/* ============================================================
   Shared foundation
   Seven tokens, one easing curve, three durations. Before adding an eighth token, ask whether a rule is what is missing.
   The names come from the site's own world: 和紙 / 墨 / 薄墨 / 罫 / 棚 / 藍 / 朱

   The published pages use six of them; 朱 is unused for now.

   Material: 和紙 is warm, not a screen's default cold grey. A very faint fibre noise lies on the paper (SVG feTurbulence,
   one data: image, no request), and day and night use the same paper: at night the lamp is simply off.
   ============================================================ */

@layer reset, tokens, type, layout, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
  ul { padding: 0; list-style: none; }
  img { max-width: 100%; display: block; }
  button { font: inherit; color: inherit; }
  :focus-visible { outline: 2px solid var(--ai); outline-offset: 3px; border-radius: 2px; }
}

@layer tokens {
  :root {
    --washi:  #f2eee6;   /* 和紙 · ground (warm white, slightly beige) */
    --sumi:   #1c1a16;   /* 墨 · text (warm black) */
    --usu:    #6a655b;   /* 薄墨 · secondary text, all metadata */
    --kei:    #d9d2c4;   /* 罫 · every rule */
    --tana:   #faf8f3;   /* 棚 · the only raised surface */
    --ai:     #24567f;   /* 藍 · links and marks */
    --shu:    #b23a21;   /* 朱 · the one loud colour (5.2:1 on 和紙) */

    --ease: cubic-bezier(.22, 1, .36, 1);

    /* Three durations, chosen by who caused the change */
    --t-touch:   .18s;   /* the pointer is still on it */
    --t-state:   .45s;   /* a change of state (day and night) */
    --t-ambient: .8s;    /* a change nobody asked for (entrances) */

    --measure: 34em;
    --col: 720px;
    --gutter: 24px;

    /* Font stacks for the three voices; pages refer to them by name only */
    --f-serif: 'EB Garamond', 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', Georgia, serif;
    --f-mincho: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'MS Mincho', serif;   /* Japanese */
    --f-song: 'Noto Serif SC', 'Songti SC', 'Noto Serif CJK SC', 'Source Han Serif SC', SimSun, serif; /* Chinese */
    --f-mono: 'DM Mono', 'SFMono-Regular', Menlo, Consolas, monospace,
              'Hiragino Sans', 'PingFang SC', 'Noto Sans CJK JP', 'Microsoft YaHei';
    --f-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
              'PingFang SC', 'Hiragino Sans', 'Microsoft YaHei', sans-serif;

    /* The paper's fibre: used once, on body::before */
    --grain-opacity: .07;

    color-scheme: light dark;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --washi: #15140f; --sumi: #e9e3d6; --usu: #9a9385;
      --kei: #2b2823;   --tana: #1c1a15; --ai: #83b4dc; --shu: #e26a4c;
      --grain-opacity: .09;
    }
  }
  :root[data-theme="dark"] {
    --washi: #15140f; --sumi: #e9e3d6; --usu: #9a9385;
    --kei: #2b2823;   --tana: #1c1a15; --ai: #83b4dc; --shu: #e26a4c;
    --grain-opacity: .09;
  }

  /* Every colour property runs on one clock, so the whole page turns over as one object.
     Hover transitions sit on their own selectors, which are more specific and still win. */
  *, *::before, *::after {
    transition-property: background-color, border-color, color, fill, stroke;
    transition-duration: var(--t-state);
    transition-timing-function: ease;
  }
}

@layer type {
  body {
    position: relative;
    font-family: var(--f-sans);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--sumi);
    background: var(--washi);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* The fibre of the 和紙. It covers the whole document, scrolls with the paper, ignores the pointer and is absent in print.
     A 160px mid-grey noise tile, laid on the paper through opacity: slightly darker by day, slightly lighter at night, no blend mode. */
  body::before {
    content: '';
    position: absolute; inset: 0; z-index: 2147483647;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
    opacity: var(--grain-opacity);
    transition: opacity var(--t-state) ease;
  }

  /* Three voices, each for one kind of content, not for one range of sizes.
     .dsp is the voice of the book: Garamond for Latin, Mincho for Japanese;
     .mono is the voice of the card catalogue: numbers, dates, labels;
     body text is the speaking voice: the system sans-serif. */
  .dsp  { font-family: var(--f-serif), var(--f-song); font-weight: 500; }
  .dsp:lang(zh), .dsp:lang(zh-CN) { font-family: var(--f-song); font-weight: 700; }
  .dsp:lang(ja) { font-family: var(--f-mincho); font-weight: 700; }
  /* Metadata comes in two sizes only: .mono and .label. */
  .mono { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
  .label { color: var(--usu); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; }

  p { max-width: var(--measure); text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  /* Japanese breaks between phrases (Chrome 119+): 「小鈴」 and 「読むのが」 stay on one line; other browsers still break between characters. */
  :lang(ja) { word-break: auto-phrase; }
  html { scroll-padding-top: 7rem; }
  :root[data-theme="light"] { color-scheme: light; }
  :root[data-theme="dark"] { color-scheme: dark; }
  [hidden] { display: none !important; }

  a { color: var(--ai); text-decoration: none;
      border-bottom: 1px solid color-mix(in srgb, var(--ai) 28%, transparent);
      transition: color var(--t-touch) var(--ease), border-color var(--t-touch) var(--ease); }
  a:hover { border-bottom-color: var(--ai); }

  ::selection { background: var(--ai); color: var(--washi); }
}

@layer layout {
  .wrap { max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); }

  .theme-btn {
    background: none; border: 1px solid var(--kei); border-radius: 999px;
    padding: 4px 12px; min-height: 44px; flex: none; white-space: nowrap; cursor: pointer; color: var(--usu);
    font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em;
    transition: border-color var(--t-touch) var(--ease), color var(--t-touch) var(--ease);
  }
  .theme-btn:hover { border-color: var(--ai); color: var(--ai); }
  /* Hold the place until the script arrives, so the links beside it do not jump */
  .theme-btn[hidden] { display: inline-flex !important; visibility: hidden; }
  /* Day/night button: the current half is in ink */
  .theme-btn [data-theme-day], .theme-btn [data-theme-night] { color: var(--usu); transition: color var(--t-state) ease; }
  :root:not([data-theme="dark"]) .theme-btn [data-theme-day] { color: var(--sumi); }
  :root[data-theme="dark"] .theme-btn [data-theme-night] { color: var(--sumi); }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-btn [data-theme-day] { color: var(--usu); }
    :root:not([data-theme="light"]) .theme-btn [data-theme-night] { color: var(--sumi); }
  }


  .skip-link { position: absolute; top: -100px; left: 24px; padding: 10px 16px; background: var(--tana); z-index: 100; }
  .skip-link:focus { top: 8px; }
}

@layer components {
  /* Keyboard sheet (a native <dialog> added by js/shortcuts.js): one card that rises 8px from below */
  .kbd-help {
    margin: auto; padding: 22px 26px 18px; width: min(22rem, calc(100vw - 32px));
    background: var(--tana); color: var(--sumi); border: 1px solid var(--kei); border-radius: 4px;
    box-shadow: 0 24px 40px -24px rgb(0 0 0 / .45);
    opacity: 0; translate: 0 8px;
    transition: opacity var(--t-touch) var(--ease), translate var(--t-touch) var(--ease), overlay var(--t-touch) allow-discrete, display var(--t-touch) allow-discrete;
  }
  .kbd-help[open] { opacity: 1; translate: 0 0; }
  @starting-style { .kbd-help[open] { opacity: 0; translate: 0 8px; } }
  .kbd-help::backdrop { background: color-mix(in srgb, var(--sumi) 28%, transparent); backdrop-filter: blur(2px); }
  .kbd-help .label { margin-bottom: 12px; }
  .kbd-help dl { margin: 0; }
  .kbd-help dl > div { display: grid; grid-template-columns: 4.2em 1fr; gap: 12px; align-items: baseline; padding: 6px 0; border-top: 1px solid var(--kei); font-size: .92rem; }
  .kbd-help kbd { font-family: var(--f-mono); font-size: .78rem; color: var(--usu); border: 1px solid var(--kei); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
  /* Off switch for single-key shortcuts (WCAG 2.1.4); with it off the list is dimmed and the keys dashed. */
  .kbd-help .kbd-toggle { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--kei); font-size: .9rem; max-width: none; }
  .kbd-help .kbd-toggle label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
  .kbd-help .kbd-toggle input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--ai); }
  .kbd-help[data-off] dl { color: var(--usu); }
  .kbd-help[data-off] kbd { border-style: dashed; }
  .kbd-help form { margin-top: 14px; text-align: right; }
  .kbd-help form button { background: none; border: 0; padding: 6px 8px; margin-right: -8px; min-height: 44px; cursor: pointer; color: var(--usu); font-size: .8rem; }
  .kbd-help form button:hover { color: var(--ai); }
  @media (hover: none) { [data-kbd-hint] { display: none !important; } }

  /* The small tag at the bottom left after g (a manual popover): which keys can follow */
  .kbd-chord {
    position: fixed; inset: auto auto 18px 18px; margin: 0;
    display: flex; gap: 14px; align-items: center; padding: 8px 12px;
    background: var(--tana); color: var(--usu); border: 1px solid var(--kei); border-radius: 4px;
    box-shadow: 0 12px 24px -16px rgb(0 0 0 / .4); font-size: .76rem;
  }
  .kbd-chord kbd { font: inherit; color: var(--sumi); border: 1px solid var(--kei); border-radius: 3px; padding: 0 .4em; margin-right: .35em; }
  .kbd-chord > kbd { color: var(--ai); border-color: var(--ai); }
}

/* Cross-document View Transitions: a static multi-page site still moves continuously between pages. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: var(--t-touch); }

/* Day/night flip (js/theme.js): a same-document transition. The new side spreads from the button like a drop of ink;
   per-property colour transitions are off meanwhile, or the snapshot would catch colours halfway through changing. */
:root.theme-flip *, :root.theme-flip *::before, :root.theme-flip *::after { transition: none !important; }
:root.theme-flip::view-transition-old(root),
:root.theme-flip::view-transition-new(root) { animation: none; mix-blend-mode: normal; display: block; }
:root.theme-flip::view-transition-old(root) { z-index: 1; }
:root.theme-flip::view-transition-new(root) { z-index: 2; }
:root.theme-flip::view-transition { pointer-events: none; }   /* the page stays clickable during the flip */

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  body::before { display: none; }
}