@font-face {
  font-family: "Noto Serif JP";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("fonts/noto-serif-jp-600.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Serif JP";
  font-style: italic;
  font-weight: 600;
  font-display: block;
  src: url("fonts/noto-serif-500-italic.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --bg: #FFFFFF;
  --fg: #221B1D;
  --muted: #5C5254;
  --line: #E3DADC;
  --accent: #A22041;
  --on-accent: #FFFFFF;
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif CJK JP", serif;

  --s05: 0.25rem;
  --s10: 0.5rem;
  --s20: 1rem;
  --s30: 1.5rem;
  --s50: 2.5rem;
  --s80: 4rem;
  --s130: 6.5rem;

  --t-large: 1.5rem;
  --t-sub: 1.125rem;
  --t-base: 1rem;
  --t-small: 0.875rem;

  --lh-text: 1.9;
  --lh-tight: 1.4;
  --lh-text-en: 1.6;
  --ls-text-ja: 0.04em;
  --ls-title-ja: 0.08em;
  --ls-text: var(--ls-text-ja);
  --ls-title: var(--ls-title-ja);
  --ls-name: 0.08em;

  --measure: 40ic;
  --gutter: clamp(var(--s30), 5vw, var(--s80));
  --rule: 1px;
  --mark: 2px;
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--t-base);
  line-height: var(--lh-text);
  letter-spacing: var(--ls-text);
  word-break: auto-phrase;
}
h1, h2, dt { font-weight: inherit; }
a { color: var(--fg); text-decoration-color: var(--muted); text-underline-offset: 0.3em; }
a:hover { text-decoration: none; }
a:focus-visible { outline: var(--mark) solid var(--accent); outline-offset: var(--mark); }

main {
  display: flex;
  flex-direction: column;
  min-block-size: 100svh;
  max-inline-size: calc(var(--measure) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--gutter) var(--gutter) var(--s80);
}
main > * { margin-block: 0; }
.head { display: flex; justify-content: space-between; align-items: center; gap: var(--s20); margin-block: calc(-1 * var(--gutter)) var(--s80); }
.site {
  margin: 0; margin-inline-start: calc(-1 * var(--s20)); padding: var(--s10) var(--s20);
  background: var(--accent); color: var(--on-accent);
  font-size: var(--t-base); line-height: var(--lh-tight); letter-spacing: var(--ls-name);
}
.site, .site a { display: flex; align-items: center; gap: var(--s10); }
.site a { color: inherit; text-decoration: none; }
.site a:focus-visible { outline-color: var(--on-accent); }
.mark { flex: none; inline-size: var(--s50); block-size: var(--s50); }
.lang { font-size: var(--t-small); line-height: var(--lh-tight); }
.title { margin: 0; font-size: var(--t-large); line-height: var(--lh-tight); letter-spacing: var(--ls-title); }
.foot { display: flex; flex-wrap: wrap; gap: var(--s10) var(--s20); margin-block-start: auto; padding-block-start: var(--s80); color: var(--muted); font-size: var(--t-small); }
.foot a { color: inherit; text-decoration-color: currentColor; white-space: nowrap; }
.foot .copy { flex-basis: 100%; }

.doc > :not(.foot) { max-inline-size: var(--measure); }
.doc > p:not(.site) { margin-block-start: var(--s20); }
.doc h2 { margin-block-start: var(--s50); padding-block-start: var(--s50); border-block-start: var(--rule) solid var(--line); font-size: var(--t-sub); line-height: var(--lh-tight); letter-spacing: var(--ls-title); }
.doc > .meta { margin-block-start: var(--s50); color: var(--muted); font-size: var(--t-small); }

.doc dl { margin: var(--s50) 0 0; }
.doc p, .doc dd { word-break: normal; }
.doc p, .doc dd, .doc li { text-wrap: pretty; }
.doc .title, .doc h2, .doc dt { text-wrap: balance; }
.doc dt { margin-block-start: var(--s30); color: var(--muted); font-size: var(--t-small); line-height: var(--lh-tight); }
.doc dd { margin: var(--s05) 0 0; }
.doc ul, .doc ol { margin: var(--s20) 0 0; padding-inline-start: var(--s30); }

.block + .block { margin-block-start: clamp(var(--s80), 10vw, var(--s130)); }
.app { position: relative; display: grid; row-gap: var(--s05); min-block-size: var(--s50); margin: var(--s30) 0 0; padding-inline-start: calc(var(--s50) + var(--s20)); }
.app dt { line-height: var(--lh-tight); }
.app-icon { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--s50); block-size: var(--s50); border-radius: 22%; }
.app dd { margin: 0; font-size: var(--t-small); text-wrap: balance; }
.profile { margin: var(--s30) 0 0; font-size: var(--t-base); line-height: var(--lh-tight); letter-spacing: var(--ls-name); }
.reading { margin-inline-start: var(--s10); color: var(--muted); font-size: var(--t-small); letter-spacing: var(--ls-text); }
.origin { margin: var(--s10) 0 0; color: var(--muted); font-size: var(--t-small); text-wrap: pretty; }
.phrase { white-space: nowrap; }

@media (min-width: 60rem) {
  .top {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto 1fr auto 2fr auto;
    grid-template-areas: "head head" ". ." "left right" ". ." "foot foot";
    max-inline-size: calc(56rem + 2 * var(--gutter));
  }
  .top > .head { grid-area: head; }
  .top > .foot { grid-area: foot; }
  .top > .block:first-of-type { grid-area: left; padding-inline-end: var(--s50); }
  .top > .block + .block { grid-area: right; }
  .top > .block + .block { margin-block-start: 0; padding-inline-start: var(--s50); border-inline-start: var(--rule) solid var(--line); }
}

:lang(en) { --ls-text: normal; --ls-title: normal; --lh-text: var(--lh-text-en); }
:root:lang(en) { --measure: 36rem; }
:lang(ja) { --ls-text: var(--ls-text-ja); --ls-title: var(--ls-title-ja); }
[lang] { letter-spacing: var(--ls-text); }