/* Literary theme — centered verse, generous whitespace, per-section hue drift.
   Inert until #css-toggle is checked. */
@layer reset, tokens, base, components;

@layer reset {
  :root:has(#css-toggle:checked) {
    & *, & *::before, & *::after { box-sizing: border-box; margin: 0; }
    & input, & button { font: inherit; }
  }
}

@layer tokens {
  :root:has(#css-toggle:checked) {
    color-scheme: light dark;
    --hue: 340;
    --accent: oklch(55% 0.13 var(--hue));
    --paper: light-dark(oklch(98% 0.008 var(--hue)), oklch(18% 0.015 var(--hue)));
    --ink: light-dark(oklch(26% 0.02 var(--hue)), oklch(92% 0.01 var(--hue)));
    --muted: color-mix(in oklch, var(--ink) 55%, var(--paper));
    --rule: color-mix(in oklch, var(--ink) 15%, var(--paper));
    --space: clamp(1.1rem, 0.7rem + 1.6vw, 1.8rem);
  }
}

@layer base {
  :root:has(#css-toggle:checked) {
    background: var(--paper);

    & body {
      color: var(--ink);
      font-family: Georgia, "Iowan Old Style", serif;
      font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
      line-height: 1.7;
      max-inline-size: 42rem;
      margin-inline: auto;
      padding: var(--space);
    }
    & a { color: var(--accent); text-underline-offset: 0.2em; }
    & :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    & body > a[href="#main"] {
      position: absolute; inset-block-start: -100vb;
      &:focus-visible { inset: var(--space) auto auto var(--space);
        background: var(--paper); padding: 0.5rem 1rem; border: 1px solid var(--rule); }
    }
  }
}

@layer components {
  :root:has(#css-toggle:checked) {
    & main > article { max-inline-size: 46rem; margin-inline: auto; }
    & body > header {
      font-family: system-ui, sans-serif;
      display: flex; flex-wrap: wrap; gap: var(--space); align-items: center;
      padding-block-end: var(--space);
      border-block-end: 1px solid var(--rule);
      margin-block-end: calc(var(--space) * 1.8);
      font-size: 0.9em; color: var(--muted);
      & nav { margin-inline-start: auto; }
      & nav ul { display: flex; gap: 1rem; list-style: none; padding: 0; }
    }

    & article > header {
      text-align: center;
      margin-block-end: calc(var(--space) * 2);
      & h1 { font-size: clamp(1.9rem, 1.4rem + 2.4vw, 2.9rem);
        text-wrap: balance; line-height: 1.15; font-weight: 500;
        font-style: italic; }
      & p { color: var(--muted); text-wrap: pretty; margin-block-start: 0.8em;
        text-align: start; }
    }

    /* Each language section drifts the hue — one token, four moods */
    & section { margin-block: calc(var(--space) * 2.2); }
    & section:nth-of-type(1) { --hue: 150; }
    & section:nth-of-type(2) { --hue: 80; }
    & section:nth-of-type(3) { --hue: 250; }
    & section:nth-of-type(4) { --hue: 20; }
    & h2 {
      font-family: system-ui, sans-serif;
      font-size: 0.85rem; font-weight: 700;
      text-transform: uppercase; letter-spacing: 0.2em;
      color: var(--accent);
      margin-block-end: 1em;
      &::after { content: ""; display: block; inline-size: 3rem;
        border-block-end: 2px solid var(--accent); margin-block-start: 0.5em; }
    }

    /* Verse */
    & [lang="ja"], & blockquote p {
      font-size: 1.25em; line-height: 2.1; text-align: center;
    }
    & ruby rt { color: var(--muted); font-size: 0.45em; }

    & figure { margin-block: 1.2em; }
    & blockquote {
      position: relative; padding-block: 0.5em;
      &::before {
        content: "”"; position: absolute;
        inset-inline-start: 50%; translate: -50% 0; inset-block-start: -0.65em;
        font-size: 3.2em; line-height: 1; color: var(--accent); opacity: 0.4;
      }
    }
    & figcaption { text-align: center; color: var(--muted); font-size: 0.9em;
      font-style: italic; }

    & ul { list-style: none; padding: 0; display: grid; gap: 0.5em;
      justify-content: center; }
    & ul li { text-align: center; }
    & bdi { font-weight: 700; color: var(--accent); }

    & q { quotes: auto; font-style: italic; }
    & code {
      font-size: 0.8em; font-style: normal;
      background: color-mix(in oklch, var(--accent) 9%, var(--paper));
      padding: 0.08em 0.3em; border-radius: 4px;
      font-family: ui-monospace, monospace;
    }

    & article > footer, & body > footer {
      margin-block-start: calc(var(--space) * 2);
      border-block-start: 1px solid var(--rule);
      padding-block-start: var(--space);
      text-align: center; color: var(--muted);
      font-family: system-ui, sans-serif; font-size: 0.85em;
    }
  }
}