/* ============================================================
   夜航书 · Base — tokens, reset, typography
   ============================================================ */

:root{
  /* ── 夜空 Night ─────────────────────────── */
  --void:      #0b0818;
  --nocturne:  #171238;
  --indigo:    #241a4a;
  --plum:      #452a5c;
  --dusk:      #6d3a5e;

  /* ── 纸 Vellum ──────────────────────────── */
  --vellum:    #f7f1e6;
  --vellum-2:  #efe5d4;
  --vellum-3:  #e5d8c2;
  --edge:      #d8c8ae;
  --ink:       #2b2039;
  --ink-soft:  #6a5c7c;
  --ink-faint: #a295b0;

  /* ── 光 Accents (on night) ──────────────── */
  --sakura:    #ffb7d5;
  --lumen:     #ffd9a0;
  --mizu:      #8ce0ff;
  --jade:      #7ef0c4;

  /* ── 光 Accents (on paper) ──────────────── */
  --sakura-ink: #c93a72;
  --lumen-ink:  #a4670c;
  --mizu-ink:   #1a6b96;
  --jade-ink:   #0f7355;

  /* ── Type ───────────────────────────────── */
  --f-display: 'Klee One', 'Noto Serif SC', serif;
  --f-serif:   'Noto Serif SC', Songti SC, serif;
  --f-ui:      'Zen Maru Gothic', 'Noto Sans SC', sans-serif;
  --f-latin:   'Cormorant Garamond', Georgia, serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  --t-hero:    clamp(1.9rem, 1.1rem + 2.8vw, 3rem);
  --t-chapter: clamp(1.35rem, .95rem + 1.6vw, 2rem);
  --t-lead:    clamp(.98rem, .92rem + .35vw, 1.12rem);
  --t-body:    .94rem;
  --t-small:   .82rem;
  --t-micro:   .71rem;

  /* ── Geometry ───────────────────────────── */
  --spine-w:  26px;
  --leaf-pad: clamp(20px, 2.4vw, 40px);
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;

  --ease-page: cubic-bezier(.32, .72, .28, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }

html, body{ height: 100%; }

body{
  font-family: var(--f-serif);
  font-size: var(--t-body);
  color: var(--ink);
  background: var(--void);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg{ display: block; max-width: 100%; }
button, input, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }
a{ color: var(--mizu-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ── Focus ────────────────────────────────── */
:focus-visible{
  outline: 2px solid var(--sakura-ink);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-night :focus-visible{ outline-color: var(--sakura); }

/* ── Scrollbar ────────────────────────────── */
.scroller{ scrollbar-width: thin; scrollbar-color: var(--edge) transparent; }
.scroller::-webkit-scrollbar{ width: 7px; height: 7px; }
.scroller::-webkit-scrollbar-track{ background: transparent; }
.scroller::-webkit-scrollbar-thumb{
  background: linear-gradient(var(--edge), var(--vellum-3));
  border-radius: 99px;
}
.scroller::-webkit-scrollbar-thumb:hover{ background: var(--ink-faint); }

/* ── Typographic primitives ───────────────── */
.eyebrow{
  font-family: var(--f-latin);
  font-style: italic;
  font-size: var(--t-small);
  letter-spacing: .1em;
  color: var(--ink-faint);
}

.chapter-title{
  font-family: var(--f-display);
  font-size: var(--t-chapter);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .03em;
  color: var(--ink);
}

.chapter-title .num{
  font-family: var(--f-latin);
  font-style: italic;
  font-weight: 400;
  color: var(--sakura-ink);
  margin-right: .5em;
}

.lead{
  font-size: var(--t-lead);
  line-height: 1.85;
  color: var(--ink-soft);
}

.rule{
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, var(--edge), transparent 78%);
  margin: 14px 0 20px;
}

.num-display{
  font-family: var(--f-mono);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

/* ── Utilities ────────────────────────────── */
.sr-only{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.stack{ display: flex; flex-direction: column; }
.row{ display: flex; align-items: center; }
.wrap{ flex-wrap: wrap; }
.gap-sm{ gap: 8px; } .gap{ gap: 14px; } .gap-lg{ gap: 24px; }
.grow{ flex: 1; }
.center{ align-items: center; justify-content: center; }
.hidden{ display: none !important; }

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