/* ============================================================
   main.css — Orb & Ink · typography under temporal stress
   Void black under a candle-glow bloom, old-gold accent,
   hairline structure, film grain over the whole frame.
   ============================================================ */

:root {
  --bg: #0A0908;                /* brand void */
  --bg-2: #14110D;
  --ink: #EDE6DC;
  --ink-dim: #A79D8F;
  --ink-faint: #6E665B;
  --accent: #D6AE5E;            /* brand old gold — global */
  --gold-hot: #E8AC3C;          /* brand foil gold — sparse highlights */
  --accent-ink: #14100A;        /* text on accent fills */
  --line: rgba(237, 230, 220, 0.16);
  --line-soft: rgba(237, 230, 220, 0.10);

  --font-display: "Unbounded", "Unbounded Fallback", "Arial Black", sans-serif;
  --font-title: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", "Manrope Fallback", -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --pad: clamp(20px, 4.5vw, 76px);
  --ease: cubic-bezier(0.22, 0.61, 0.2, 1);
  --t-fast: 200ms;
  --t-page: 420ms;
}

/* Japanese: the Latin display faces have no JP coverage */
html[lang="ja"] {
  --font-display: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", sans-serif;
  --font-title: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; scrollbar-color: var(--ink-faint) var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(17px, 0.35vw + 15.8px, 19px);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ---- the orb: a candle-glow bloom over the void (brand bloom tones),
   fixed so every scroll depth keeps the light; grain over the whole
   frame like film stock. Both decorative, both inert to the pointer. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(clamp(640px, 110vw, 1500px) clamp(480px, 85vh, 900px) at 50% -18%,
      rgba(70, 56, 28, 0.62), rgba(41, 33, 17, 0.30) 46%, transparent 74%),
    radial-gradient(clamp(500px, 90vw, 1200px) clamp(400px, 70vh, 800px) at 88% 115%,
      rgba(46, 37, 19, 0.42), transparent 64%),
    radial-gradient(clamp(420px, 70vw, 1000px) clamp(340px, 55vh, 700px) at -6% 60%,
      rgba(30, 30, 44, 0.35), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 6; pointer-events: none;
  background: url("../img/grain.png") repeat 0 0 / 160px 160px;
  opacity: 0.05; mix-blend-mode: overlay;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--ink); text-decoration-color: rgba(214, 174, 94, 0.5); text-underline-offset: 3px; transition: color var(--t-fast) var(--ease), text-decoration-color var(--t-fast) var(--ease); }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 1px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* layering: fixed fx canvases sit at z:0, content above */
#glfx, #bgfx { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.site { position: relative; z-index: 1; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  transform: translateY(-64px); opacity: 0;
  background: var(--bg-2); border: 1px solid var(--accent); color: var(--ink);
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 10px 16px; text-decoration: none;
  transition: transform var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease);
}
.skip:focus-visible { transform: none; opacity: 1; }

/* ---- shared vocab ---- */
.kicker {
  font-family: var(--font-mono); font-size: 12px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-dim);
}
.mono-meta {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim);
}
.display { font-family: var(--font-display); font-weight: 700; line-height: 0.98; letter-spacing: -0.01em; overflow-wrap: anywhere; }
html[lang="ja"] .display { line-height: 1.12; letter-spacing: 0.02em; }
.section { padding-inline: var(--pad); margin-block: clamp(88px, 11vw, 176px); }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.1em;
  border: 1px solid var(--line); padding: 0.4em 0.9em; color: var(--ink-dim);
}
.pill--preorder { color: var(--accent-book, var(--accent)); border-color: currentColor; }
.pill--soon { border-style: dashed; }

/* ---- header ---- */
.site-head {
  display: flex; align-items: center; gap: clamp(16px, 3vw, 40px);
  padding: 18px var(--pad);
  border-bottom: 1px solid var(--line-soft);
}
.wordmark { display: inline-flex; align-items: center; text-decoration: none; }
.wordmark img {
  height: 21px; width: auto; display: block; opacity: 0.94;
  transition: opacity var(--t-fast) var(--ease), filter var(--t-fast) var(--ease);
}
.wordmark:hover img { opacity: 1; filter: drop-shadow(0 0 10px rgba(232, 172, 60, 0.45)); }
.site-head nav { margin-left: auto; display: flex; gap: clamp(14px, 2.5vw, 32px); }
.site-head nav a {
  font-family: var(--font-mono); font-size: 12px; text-transform: uppercase;
  letter-spacing: 0.14em; text-decoration: none; color: var(--ink-dim);
}
.site-head nav a:hover { color: var(--accent); }
.site-head nav a[aria-current="page"] { color: var(--ink); }
.site-head nav a[aria-current="page"]::after { content: " ●"; color: var(--accent); font-size: 8px; vertical-align: 2px; }

/* language switcher */
.langs { position: relative; }
.langs summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.1em;
  color: var(--ink-dim); border: 1px solid var(--line); padding: 7px 12px;
  display: flex; align-items: center; gap: 8px; user-select: none;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: "▾"; font-size: 9px; color: var(--ink-faint); }
.langs[open] summary, .langs summary:hover { color: var(--ink); border-color: var(--accent); }
.langs-panel {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr)); gap: 2px;
  background: var(--bg-2); border: 1px solid var(--line); padding: 8px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
}
.langs-panel a {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  text-decoration: none; color: var(--ink-dim); padding: 8px 10px; display: flex; gap: 8px;
}
.langs-panel a:hover { color: var(--accent-ink); background: var(--accent); }
.langs-panel a[aria-current="true"] { color: var(--accent); }
.langs-panel .lc { color: var(--ink-faint); width: 2.4em; }
.langs-panel a:hover .lc { color: inherit; }

/* ---- hero ---- */
.hero {
  position: relative;
  min-height: calc(100svh - 76px);
  display: grid; align-content: center; justify-items: center;
  padding: clamp(40px, 6vw, 80px) var(--pad);
}
.hero-kicker { margin-bottom: clamp(20px, 3vh, 40px); text-align: center; color: var(--accent); }
.hero-word-wrap { position: relative; width: 100%; display: grid; justify-items: center; }
.hero-word {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(48px, 10.5vw, 220px);
  line-height: 0.95; letter-spacing: -0.015em; text-align: center;
  margin: 0; user-select: text; white-space: nowrap;
}
html[lang="ja"] .hero-word { font-size: clamp(46px, 10.5vw, 200px); letter-spacing: 0.04em; }
.hero-lattice { position: absolute; inset: -12%; width: 124%; height: 124%; pointer-events: none; }
.hero-foot {
  position: absolute; left: var(--pad); right: var(--pad); bottom: 26px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue::after { content: "↓"; color: var(--accent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* text ghosted under a live canvas effect — still real, selectable, indexable */
.fx-ghost { color: transparent !important; }
.fx-cover-live img { opacity: 0; }
.cover-box img { transition: opacity 300ms var(--ease), transform 600ms var(--ease), filter 600ms var(--ease); }

/* plated covers: at rest the art wears a duotone veil and the rained-in
   canvas title reads as the cover type. The reveal (auto after the title
   settles, or early on hover) clears the veil while the letters fall off
   the cover's bottom edge into the printed title below — and it's
   permanent: an unveiled cover never re-veils. */
html.no-webgl .cover-box.has-plate img {
  filter: sepia(0.5) saturate(0.4) brightness(0.46) contrast(1.02);
  transition: opacity 300ms var(--ease), transform 600ms var(--ease),
              filter var(--reveal-ms, 600ms) var(--ease);
}
html.no-webgl .cover-box.has-plate.is-revealed img { filter: saturate(1) contrast(1.06); }

/* a revealed cover behaves like the physical object: 3D tilt toward the
   cursor with a moving sheen (fine pointers only; GL hands the box back
   to the real <img> once its veil has fully cleared) */
.cover-box[data-fx] {
  transform: perspective(940px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg))
             translateY(var(--lift, 0px));
  transition: transform 0.3s var(--ease);
}
.cover-box::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(420px 300px at var(--gx, 50%) var(--gy, 30%),
    rgba(239, 231, 218, 0.13), transparent 62%);
  transition: opacity 0.3s var(--ease);
}
.cover-box.is-revealed:hover::after { opacity: 1; }

/* ---- covers / cards ---- */
.cover-box {
  position: relative; aspect-ratio: 2 / 3; overflow: hidden;
  border: 1px solid var(--line-soft); background: transparent;
}
.cover-box img { width: 100%; height: 100%; object-fit: cover; }

.grid-books {
  display: grid; gap: clamp(28px, 3.4vw, 52px);
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
}
.card { display: grid; gap: 0; align-content: start; }
.card > a { text-decoration: none; color: inherit; display: grid; gap: 16px; }
.card .meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 2px; }
.card h3 {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0;
  font-size: clamp(20px, 1.8vw, 27px);
  line-height: 1.12; margin-top: 10px;
  transition: color var(--t-fast) var(--ease);
}
.card:hover h3 { color: var(--accent-book, var(--accent)); }
.card .tagline { color: var(--ink-dim); font-size: 15px; margin: 8px 0 0; }
.card[hidden] { display: none; }

/* filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 44px; }
.filters .fgroup { display: contents; }
.chip {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ink-dim);
  background: none; border: 1px solid var(--line); padding: 9px 16px; cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { border-color: var(--accent); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.filters .sep { align-self: center; color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; }

/* ---- page titles ---- */
.page-title-wrap { padding: clamp(48px, 8vw, 120px) var(--pad) 0; }
.page-title { font-family: var(--font-title); font-weight: 700; letter-spacing: 0; font-size: clamp(46px, 8.8vw, 156px); line-height: 1.0; }
.page-sub { margin-top: 18px; max-width: 60ch; color: var(--ink-dim); }

/* ---- featured band (home) ---- */
.featured { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(32px, 5vw, 96px); align-items: center; }
.featured .cover-box { max-width: 380px; }
.featured-title {
  font-family: var(--font-title); font-weight: 700; font-size: clamp(36px, 5vw, 92px);
  line-height: 1.0; letter-spacing: 0; margin: 14px 0 18px;
}
.featured-title a { text-decoration: none; color: inherit; }
.featured-title a:hover { color: var(--accent-book, var(--accent)); }
.featured .tagline { font-size: clamp(18px, 1.6vw, 22px); color: var(--ink-dim); max-width: 46ch; }
.featured .meta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; align-items: center; }

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-ink); text-decoration: none;
  border: 1px solid var(--accent-book, var(--accent)); padding: 14px 22px;
  transition: all var(--t-fast) var(--ease);
  background: var(--accent-book, var(--accent));
}
.btn::after { content: "↗"; color: var(--accent-ink); transition: inherit; }
.btn:hover { filter: brightness(1.09); box-shadow: 0 10px 32px rgba(214, 174, 94, 0.28); }
.btn:hover::after { transform: translate(2px, -2px); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost::after { content: "→"; color: var(--accent-book, var(--accent)); }
.btn--ghost:hover { filter: none; background: var(--accent-book, var(--accent)); color: var(--accent-ink); }
.btn--ghost:hover::after { color: var(--accent-ink); }

/* section head row */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 56px); }
.sec-head h2 { font-family: var(--font-title); font-weight: 700; letter-spacing: 0; font-size: clamp(28px, 3.6vw, 60px); line-height: 1; }
.sec-head .more { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; color: var(--ink-dim); white-space: nowrap; }
.sec-head .more:hover { color: var(--accent); }

/* ---- authors roster (about) ---- */
.authors-list { display: grid; border-top: 1px solid var(--line); }
.author-row {
  position: relative; display: grid; grid-template-columns: 3.4em 1fr;
  gap: clamp(14px, 2.4vw, 32px); align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4.4vw, 58px) 0;
}
.author-idx { color: var(--accent); }
.author-name {
  font-family: var(--font-title); font-weight: 700; letter-spacing: 0;
  font-size: clamp(30px, 4.6vw, 76px); line-height: 1.04;
  transition: color var(--t-fast) var(--ease);
}
.author-row:hover .author-name { color: var(--accent); }
.author-lane { margin: 12px 0 0; }
.author-bio { margin: 14px 0 0; max-width: 58ch; color: var(--ink-dim); font-size: clamp(16px, 1.15vw, 18px); }
.author-status { margin: 20px 0 0; }

/* ---- about ---- */
.about-grid { display: grid; grid-template-columns: minmax(240px, 360px) 1fr; gap: clamp(32px, 5vw, 96px); align-items: start; }
.bio { max-width: 62ch; font-size: clamp(17px, 1.15vw, 19px); }
.bio p + p { margin-top: 1em; }
.contact-list { display: grid; gap: 10px; margin-top: 34px; }
.contact-list a { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.04em; }

/* press boilerplate + contact, side by side on the authors page */
.press-contact {
  display: grid; grid-template-columns: minmax(0, 62ch) auto;
  gap: clamp(32px, 5vw, 96px); align-items: start;
}
.press-note { display: grid; gap: 14px; }
.press-note p { margin: 0; color: var(--ink-dim); }
@media (max-width: 900px) { .press-contact { grid-template-columns: 1fr; } }

/* ---- plain prose pages (privacy) ---- */
.prose { max-width: 62ch; font-size: clamp(17px, 1.15vw, 19px); }
.prose p + p { margin-top: 1em; }

/* striped placeholder — drop real art here */
.ph {
  position: relative; border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(237, 230, 220, 0.05) 12px 13px);
  display: grid; place-items: center; min-height: 200px;
}
.ph--portrait { aspect-ratio: 3 / 4; }
.ph span { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-faint); text-transform: uppercase; }

/* the imprint's plate on the home authors band — wordmark under glass */
.brand-plate {
  position: relative; border: 1px solid var(--line); aspect-ratio: 3 / 4;
  display: grid; place-items: center; overflow: hidden; padding: 10%;
  background: radial-gradient(72% 56% at 50% 42%,
    rgba(63, 50, 25, 0.55), rgba(41, 33, 17, 0.20) 62%, transparent 100%);
}
.brand-plate img { width: 100%; height: auto; opacity: 0.95; }
.brand-plate::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 12px, rgba(237, 230, 220, 0.03) 12px 13px);
}

/* ---- book page ---- */
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; padding: 28px var(--pad) 0; }
.crumbs a { color: var(--ink-dim); text-decoration: none; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.crumbs a:hover { color: var(--accent-book, var(--accent)); }
.crumbs .sep { color: var(--ink-faint); font-size: 11px; }

.book-title-wrap { padding: clamp(28px, 4.5vw, 64px) var(--pad) 0; }
.book-title { font-family: var(--font-title); font-weight: 700; letter-spacing: 0; font-size: clamp(42px, 7.2vw, 132px); line-height: 1.0; max-width: 14em; }
.book-tagline { margin-top: 20px; font-size: clamp(18px, 1.7vw, 24px); color: var(--ink-dim); max-width: 40ch; }

.book-layout { display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(36px, 5.5vw, 110px); align-items: start; }
.book-layout .cover-col { position: sticky; top: 32px; }
.book-body .synopsis { max-width: 60ch; font-size: clamp(17px, 1.15vw, 19px); }
.series-note { margin: 0 0 26px; }
.series-note a { color: var(--accent-book, var(--accent)); text-decoration: none; }
.series-note a:hover { text-decoration: underline; }

.themes-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }

/* praise quotes */
.praise { max-width: 60ch; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.praise > .kicker { display: block; margin-bottom: 20px; }
.praise blockquote { position: relative; margin: 0 0 24px; padding-left: 22px; }
.praise blockquote:last-child { margin-bottom: 0; }
.praise blockquote::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 1px; background: var(--accent-book, var(--accent));
}
.praise blockquote p {
  font-family: var(--font-title); font-style: italic;
  font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; margin: 0 0 8px;
}
html[lang="ja"] .praise blockquote p { font-style: normal; }
.praise cite {
  font-style: normal; font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-dim);
}
.praise cite::before { content: "— "; color: var(--accent-book, var(--accent)); }

.plate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--line); margin: 40px 0 0;
}
.plate > div { border-bottom: 1px solid var(--line); padding: 14px 16px 16px 0; }
.plate dt { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin: 0 0 6px; }
.plate dd { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.02em; margin: 0; color: var(--ink); overflow-wrap: anywhere; }

.buy { margin-top: 48px; }
.buy > .kicker { display: block; margin-bottom: 6px; }
.format-group { border-top: 1px solid var(--line); padding: 20px 0 26px; }
.format-group h3 { font-family: var(--font-mono); font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-dim); margin-bottom: 16px; }
.store-row { display: flex; flex-wrap: wrap; gap: 12px; }
.soon-note { border-top: 1px solid var(--line); padding: 22px 0; color: var(--ink-dim); font-size: 16px; max-width: 50ch; }

.sibling-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: clamp(24px, 3vw, 44px); }

/* ---- 404 ---- */
.nf { min-height: 72svh; display: grid; align-content: center; justify-items: start; padding-inline: var(--pad); }
.nf-code { font-family: var(--font-display); font-size: clamp(90px, 22vw, 380px); line-height: 0.9; }
.nf p { margin-top: 26px; font-size: clamp(18px, 1.8vw, 24px); color: var(--ink-dim); max-width: 34ch; }
.nf .btn { margin-top: 30px; }

/* ---- footer ---- */
.site-foot {
  margin-top: clamp(100px, 13vw, 200px);
  border-top: 1px solid var(--line);
  padding: 44px var(--pad) 56px;
  display: grid; gap: 36px;
  grid-template-columns: 1fr auto auto;
  align-items: start;
}
.site-foot .col { display: grid; gap: 10px; justify-items: start; }
.site-foot .mono-meta a { color: var(--ink-dim); text-decoration: none; }
.site-foot .mono-meta a:hover { color: var(--accent); }
.foot-langs { display: flex; flex-wrap: wrap; gap: 4px 0; max-width: 420px; }
.foot-langs a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--ink-dim); text-decoration: none; text-transform: uppercase; padding: 2px 0;
}
.foot-langs a:hover { color: var(--accent); }
.foot-langs a[aria-current="true"] { color: var(--accent); }
.foot-langs .sep { color: var(--ink-faint); font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; }

/* ---- page transitions ---- */
html.leaving body { opacity: 0; transition: opacity 360ms var(--ease); }
body { animation: page-in 560ms var(--ease) both; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- no-WebGL: CSS-only treatments keep the language ---- */
html.no-webgl .fx-erode, html.no-fx .fx-erode {
  background: linear-gradient(175deg, var(--ink) 55%, var(--accent-book, var(--accent)) 130%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html.no-webgl .cover-box img { filter: saturate(0.85) contrast(1.04); }
html.no-webgl .cover-box:hover img,
html.no-webgl .card a:hover .cover-box img { transform: scale(1.025); filter: saturate(1) contrast(1.06); }

/* ---- editorial layer: marks, numerals, reveals, ticker, timeline ---- */
.section { position: relative; }

.sec-mark {
  display: flex; align-items: baseline; gap: 14px;
  margin-bottom: clamp(24px, 3.4vw, 44px);
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-dim);
}
.sec-mark .idx { color: var(--accent-book, var(--accent)); }
.sec-mark::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.1s var(--ease) 0.2s;
}
.sec-mark.in::after, html:not(.fx-ready) .sec-mark::after { transform: scaleX(1); }

.sec-num {
  position: absolute; top: -0.14em; right: 1vw; z-index: -1;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(150px, 24vw, 400px); line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(214, 174, 94, 0.20);
  pointer-events: none; user-select: none; will-change: transform;
}
@supports not (-webkit-text-stroke: 1px #000) { .sec-num { color: rgba(237, 230, 220, 0.045); } }

/* scroll reveals — only once JS is live; no-JS sees everything */
html.fx-ready [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.fx-ready [data-reveal].in { opacity: 1; transform: translateY(0); }

/* data ticker */
.ticker {
  overflow: hidden; border-block: 1px solid var(--line-soft);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: ticker-run 90s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-seg { display: flex; align-items: center; gap: 26px; padding: 13px 13px 13px 26px; }
.ticker .ti {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-faint); white-space: nowrap;
}
.ticker .tsep { color: var(--accent); font-size: 9px; }
@keyframes ticker-run { to { transform: translateX(-50%); } }

/* chronology strip */
.timeline {
  display: flex; justify-content: space-between; position: relative;
  margin: clamp(18px, 2.6vw, 32px) 0 clamp(38px, 5vw, 64px); padding: 0 2px;
}
.timeline::before {
  content: ""; position: absolute; top: 3px; left: 0; right: 0;
  height: 1px; background: var(--line);
}
.tl-node {
  display: grid; gap: 12px; justify-items: center; position: relative;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ink-faint);
}
.tl-node i { width: 6px; height: 6px; background: var(--bg); border: 1px solid var(--ink-faint); transform: rotate(45deg); }
.tl-node.acc { color: var(--accent); }
.tl-node.acc i { background: var(--accent); border-color: var(--accent); }

/* glyph rain behind the shelves */
.rain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* ambient letterfall: a sparse fixed layer over the whole frame,
   under the content — the site breathes glyphs everywhere, faintly */
.rain-ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.rain-ambient .rain { z-index: auto; }

/* cards: index row, viewfinder ticks, underline sweep, lift */
.card-top {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft);
}
.card-top .idx { color: var(--accent-book, var(--accent)); }
.tick {
  position: absolute; width: 15px; height: 15px; opacity: 0; pointer-events: none;
  border: 0 solid var(--accent-book, var(--accent));
  transition: opacity var(--t-fast) var(--ease), transform 0.35s var(--ease);
}
.tk-a { top: 9px; left: 9px; border-top-width: 1px; border-left-width: 1px; transform: translate(5px, 5px); }
.tk-b { bottom: 9px; right: 9px; border-bottom-width: 1px; border-right-width: 1px; transform: translate(-5px, -5px); }
.card a:hover .tick, .cover-col:hover .tick { opacity: 1; transform: translate(0, 0); }
.card .cover-box { transition: transform 0.3s var(--ease); }
.card a:hover .cover-box { --lift: -6px; }
.card h3::after {
  content: ""; display: block; height: 1px; margin-top: 7px;
  background: var(--accent-book, var(--accent));
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease);
}
.card a:hover h3::after { transform: scaleX(1); }

/* featured data strip */
.data-strip { display: flex; flex-wrap: wrap; gap: 8px 0; margin-top: 24px; text-transform: uppercase; font-size: 11.5px; }
.data-strip .ds { white-space: nowrap; }
.data-strip .ds + .ds::before { content: "·"; color: var(--accent-book, var(--accent)); margin: 0 12px; }

/* the falling-title layer inside placeholder covers */
.cover-box .cover-title { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* mirrored reflection under featured / detail covers */
.cover-reflect { position: relative; aspect-ratio: 40 / 13; margin-top: 2px; overflow: hidden; pointer-events: none; }
html.no-webgl .cover-reflect, html.no-fx .cover-reflect { display: none; }

/* footer status line */
.foot-status { text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-faint); }
.foot-status .ok { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  html.fx-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
  .sec-mark::after { transform: scaleX(1); }
  .sec-num { transform: none !important; }
}
@media (max-width: 560px) {
  .sec-num { font-size: clamp(110px, 30vw, 160px); opacity: 0.8; }
  .timeline { flex-wrap: wrap; gap: 14px 18px; }
}

/* ---- reduced motion: designed stillness, not blankness ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html.leaving body { opacity: 1; }
  .scroll-cue::after { animation: none; }
}

/* ---- responsive ---- */
@media (max-width: 900px) {
  .featured, .about-grid, .book-layout { grid-template-columns: 1fr; }
  .book-layout .cover-col { position: static; max-width: 340px; }
  .featured .cover-box { max-width: 320px; }
  .site-foot { grid-template-columns: 1fr; }
  .hero-word { white-space: normal; }
  .brand-plate { max-width: 340px; }
  .author-row { grid-template-columns: 2.4em 1fr; }
}
@media (max-width: 560px) {
  .site-head { flex-wrap: wrap; row-gap: 12px; padding-block: 14px; }
  .site-head nav { gap: 18px; }
  .plate { grid-template-columns: repeat(2, 1fr); }
}