/* ==========================================================================
   NARRATIA — Design System v2
   "A lit page in a dark room."

   Thesis, palette, type and motion rationale: see DESIGN.md
   Colour: OKLCH, drenched indigo-violet canvas, gold as the only light source.
   Type:   Bodoni Moda (display) / Literata (reading) / Archivo (interface)
   Motion: transform, opacity, filter, clip-path only. Never layout properties.
   ========================================================================== */

/* ---------- 01. Tokens ---------- */
:root {
  /* Canvas — drenched indigo-black. Every neutral tinted to hue 286. */
  --ink-950: oklch(0.125 0.028 286);
  --ink-900: oklch(0.155 0.034 286);
  --ink-850: oklch(0.190 0.038 287);
  --ink-800: oklch(0.225 0.042 287);
  --ink-700: oklch(0.300 0.044 288);
  --ink-600: oklch(0.400 0.048 289);

  /* Brand indigo-violet */
  --indigo-700: oklch(0.34 0.130 284);
  --indigo-600: oklch(0.42 0.155 285);
  --indigo-500: oklch(0.50 0.175 286);
  --indigo-400: oklch(0.60 0.185 289);
  --violet-400: oklch(0.64 0.195 297);

  /* Gold — the light source */
  --gold-700: oklch(0.600 0.128 74);
  --gold-600: oklch(0.700 0.140 78);
  --gold-500: oklch(0.800 0.148 84);
  --gold-400: oklch(0.868 0.126 88);

  /* Type on dark */
  --paper:      oklch(0.960 0.008 90);
  --paper-dim:  oklch(0.800 0.012 90);
  --paper-mute: oklch(0.655 0.016 288);

  /* The one light register: the reading surface */
  --leaf-bg:   oklch(0.963 0.013 88);
  --leaf-ink:  oklch(0.240 0.030 287);
  --leaf-mute: oklch(0.480 0.024 287);
  --leaf-line: oklch(0.885 0.018 86);

  /* Status */
  --success: oklch(0.72 0.145 162);
  --warning: oklch(0.78 0.150 70);
  --danger:  oklch(0.65 0.190 22);

  /* Type families */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni MT', Georgia, serif;
  --font-read:    'Literata', Georgia, 'Times New Roman', serif;
  --font-ui:      'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-urdu:    'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;

  /* Fluid type scale, ratio >= 1.25 */
  /* Capped so each headline line sits on one line inside the hero column.
     Larger than this and "keep you up." wraps, which costs the fold. */
  --fs-hero: clamp(2.5rem, 6vw, 5rem);
  --fs-d1:   clamp(2.5rem, 5.5vw, 4.5rem);
  --fs-d2:   clamp(2rem, 3.6vw, 3.25rem);
  --fs-d3:   clamp(1.5rem, 2.2vw, 2.125rem);
  --fs-d4:   clamp(1.25rem, 1.4vw, 1.5rem);
  --fs-lg:   1.25rem;
  --fs-md:   1.0625rem;
  --fs-base: 1rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;
  --fs-2xs:  0.6875rem;

  /* Spacing */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem;  --s-4: 1rem;
  --s-5: 1.25rem;  --s-6: 1.5rem;   --s-8: 2rem;     --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  /* Layout */
  --shell: 1320px;
  --shell-tight: 1080px;
  --measure: 68ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --bay: clamp(4.5rem, 9vw, 9rem);
  --header-h: 76px;

  /* Radius — restrained. Covers and pills only. */
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 18px;
  --r-full: 999px;

  /* Elevation — cast light, violet-black shadow, no grey */
  --lift-sm: 0 1px 2px oklch(0.08 0.04 286 / 0.5);
  --lift-md: 0 0.75rem 1.75rem -0.75rem oklch(0.08 0.04 286 / 0.7);
  --lift-lg: 0 1.75rem 3.5rem -1.25rem oklch(0.08 0.04 286 / 0.78);
  --lift-cover: 0 2.5rem 4rem -1.5rem oklch(0.08 0.04 286 / 0.85);
  --glow-gold: 0 0 3.5rem -0.5rem oklch(0.8 0.148 84 / 0.4);

  /* Motion */
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --t-fast: 180ms;
  --t-mid:  320ms;
  --t-slow: 720ms;

  /* ---- Legacy aliases ----------------------------------------------------
     Interior pages carry inline styles written against the v1 token names.
     Mapping them here remaps that markup into the dark palette instead of
     leaving it broken. Do not use these in new markup.                    */
  --bg: var(--ink-950);
  --surface: var(--ink-850);
  --surface-2: var(--ink-900);
  --ink: var(--paper);
  --text: var(--paper-dim);
  --muted: var(--paper-mute);
  --border: var(--ink-700);
  --line: var(--ink-700);
  --brand-50: var(--ink-800);
  --brand-100: var(--ink-700);
  --brand-200: var(--ink-600);
  --brand-300: var(--indigo-400);
  --brand-500: var(--indigo-500);
  --brand-600: var(--indigo-500);
  --brand-700: var(--indigo-400);
  --brand-800: var(--ink-900);
  --brand-900: var(--ink-950);
  --accent-500: var(--gold-500);
  --accent-600: var(--gold-600);
  --accent-700: var(--gold-700);
  --gold-300: var(--gold-400);
  --font-serif: var(--font-display);
  --font-sans: var(--font-ui);
  --fs-2xl: var(--fs-d3);
  --fs-3xl: var(--fs-d2);
  --fs-4xl: var(--fs-d1);
  --fs-5xl: var(--fs-hero);
  --fs-6xl: var(--fs-hero);
  --r-2xl: var(--r-xl);
  --sh-sm: var(--lift-sm);
  --sh-md: var(--lift-md);
  --sh-lg: var(--lift-lg);
  --sh-xl: var(--lift-cover);
  --container-max: var(--shell);
  --container-narrow: var(--shell-tight);
  --container-prose: 720px;
  --duration: var(--t-mid);
  --ease: var(--ease-out-expo);
}

/* ---------- 02. Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  background: var(--ink-950);
}

body {
  margin: 0;
  font-family: var(--font-read);
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--paper-dim);
  background: var(--ink-950);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-optical-sizing: auto;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

a { color: var(--gold-500); text-decoration: none; transition: color var(--t-fast) var(--ease-out-quart); }
a:hover { color: var(--gold-400); }

button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
ul, ol { padding: 0; margin: 0; list-style: none; }
p { margin: 0 0 1em; }

::selection { background: oklch(0.8 0.148 84 / 0.28); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------- 03. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0 0 0.4em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-d1); }
h2 { font-size: var(--fs-d2); }
h3 { font-size: var(--fs-d3); }
h4 { font-size: var(--fs-d4); letter-spacing: -0.015em; }
h5 { font-size: var(--fs-lg); }
h6 { font-size: var(--fs-md); }

/* Italic display cut, used as voice */
.ital { font-style: italic; font-weight: 500; }

/* Interface label */
.eyebrow, .label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--s-4);
}

.lead {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.66;
  color: var(--paper-dim);
  max-width: 56ch;
}

.muted { color: var(--paper-mute); }
.brand-text { color: var(--gold-500); }
p, li { max-width: var(--measure); }

/* Section marker: "01 / DISCOVER" set as a hairline rule in the margin */
.marker {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: var(--s-8);
}
.marker__num { color: var(--gold-500); font-variant-numeric: tabular-nums; }
.marker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-700), transparent);
}

/* ---------- 04. Layout ---------- */
.container, .shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--shell-tight); }
.container--prose { max-width: 720px; }

.section {
  padding-block: var(--bay);
  position: relative;
  /* Decorative blooms and glows are allowed to bleed past the gutter, but they
     must never widen the document. `clip` (not `hidden`) contains them without
     creating a scroll container, so sticky positioning still works. */
  overflow-x: clip;
}
.section--sm { padding-block: calc(var(--bay) * 0.55); }
.section--lg { padding-block: calc(var(--bay) * 1.3); }

/* Hairline rule between acts */
.section--ruled { border-top: 1px solid var(--ink-700); }

.grid { display: grid; gap: var(--s-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); } .gap-6 { gap: var(--s-6); }

.stack > * + * { margin-top: var(--s-4); }
.stack--sm > * + * { margin-top: var(--s-2); }
.stack--lg > * + * { margin-top: var(--s-8); }

/* Act header: left-aligned title, right-aligned action. Not a centered stack. */
.act-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-6);
  flex-wrap: wrap;
  margin-bottom: var(--s-10);
}
.act-head__text { max-width: 46ch; }
.act-head h2 { margin-bottom: var(--s-3); }
.act-head p { margin: 0; color: var(--paper-mute); font-size: var(--fs-md); }

/* ---------- 05. Motion system ---------- */
@keyframes rise-in {
  from { opacity: 0; transform: translate3d(0, 1.75rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes unmask {
  from { clip-path: inset(0 0 105% 0); transform: translate3d(0, 0.5em, 0); }
  to   { clip-path: inset(-0.25em -0.15em -0.25em -0.05em); transform: none; }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes settle {
  from { opacity: 0; transform: translate3d(0, 2.5rem, 0) scale(0.94) rotate(var(--settle-rot, 0deg)); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(var(--rest-rot, 0deg)); }
}
@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -0.75rem, 0); }
}
@keyframes lamp-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
@keyframes ribbon {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes sheen {
  from { transform: translate3d(-120%, 0, 0) rotate(8deg); }
  to   { transform: translate3d(320%, 0, 0) rotate(8deg); }
}

/* Hero type: unmasks on load, no JS, no opacity:0 LCP penalty */
.unmask {
  display: block;
  animation: unmask 1s var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Scroll reveal. Base state is visible so no-JS and reduced-motion are safe. */
.reveal { --i: 0; }

@media (prefers-reduced-motion: no-preference) {
  /* JS adds .js-motion once the observer is wired, so content is never
     stranded invisible if the script fails to load. */
  .js-motion .reveal {
    opacity: 0;
    transform: translate3d(0, 1.75rem, 0);
    transition:
      opacity var(--t-slow) var(--ease-out-expo),
      transform var(--t-slow) var(--ease-out-expo);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
  }
  .js-motion .reveal.is-visible {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}

/* ---------- 06. Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: oklch(0.125 0.028 286 / 0.82);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid transparent;
  transition:
    transform var(--t-mid) var(--ease-out-quart),
    border-color var(--t-mid) linear,
    background var(--t-mid) linear;
}
.site-header.is-scrolled {
  border-bottom-color: var(--ink-700);
  background: oklch(0.125 0.028 286 / 0.95);
}
/* Retracts on scroll down, returns on scroll up */
.site-header.is-hidden { transform: translate3d(0, -100%, 0); }

/* Gold reading-progress hairline along the header's lower edge */
.site-header__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: 100%;
  transform: scaleX(var(--progress, 0));
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  pointer-events: none;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  gap: var(--s-6);
}

.site-logo { display: inline-flex; align-items: center; height: 42px; flex: 0 0 auto; }
.site-logo img { height: 40px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 2px; }

.site-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--s-2) var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--paper-dim);
  border-radius: var(--r-md);
  transition: color var(--t-fast) var(--ease-out-quart);
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--paper); }
/* Gold underscore grows from the left on hover and for the current page */
.site-nav__link::after {
  content: "";
  position: absolute;
  left: var(--s-3); right: var(--s-3);
  bottom: 0.35rem;
  height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--t-mid) var(--ease-out-expo);
}
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--paper); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; }

.menu-toggle {
  display: none;
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink-700);
}
.menu-toggle:hover { background: var(--ink-850); }
.menu-toggle svg { width: 20px; height: 20px; stroke: var(--paper); fill: none; }

@media (max-width: 1080px) {
  .menu-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: start;
    gap: 0;
    padding: var(--s-8) var(--gutter) 6rem;
    background: var(--ink-950);
    overflow-y: auto;
    opacity: 0;
    transform: translate3d(0, -0.75rem, 0);
    pointer-events: none;
    transition: opacity var(--t-mid) var(--ease-out-quart), transform var(--t-mid) var(--ease-out-quart);
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav__link {
    padding: var(--s-4) 0;
    font-family: var(--font-display);
    font-size: var(--fs-d4);
    font-weight: 500;
    border-bottom: 1px solid var(--ink-700);
    border-radius: 0;
  }
  .site-nav__link::after { display: none; }
  /* Staggered entrance for the drawer links */
  .site-nav.is-open .site-nav__link {
    animation: rise-in 520ms var(--ease-out-expo) both;
    animation-delay: calc(var(--i, 0) * 45ms);
  }
}

/* ---------- 07. Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 44px;
  padding: var(--s-3) var(--s-6);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: var(--r-full);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  overflow: hidden;
  transition:
    transform var(--t-fast) var(--ease-out-quart),
    background var(--t-fast) linear,
    color var(--t-fast) linear,
    border-color var(--t-fast) linear,
    box-shadow var(--t-mid) var(--ease-out-quart);
}
.btn:hover { transform: translate3d(0, -1px, 0); }
.btn:active { transform: translate3d(0, 0, 0); }

/* The only solid gold surface on the site, and the highest-contrast pair */
.btn--primary, .btn--accent {
  background: var(--gold-500);
  color: oklch(0.19 0.04 287);
  box-shadow: var(--glow-gold);
}
.btn--primary:hover, .btn--accent:hover {
  background: var(--gold-400);
  color: oklch(0.17 0.04 287);
  box-shadow: 0 0 4rem -0.35rem oklch(0.8 0.148 84 / 0.55);
}
/* Light sweeps across the primary button on hover */
.btn--primary::after, .btn--accent::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 35%; height: 200%;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / 0.45), transparent);
  transform: translate3d(-120%, 0, 0) rotate(8deg);
  pointer-events: none;
}
.btn--primary:hover::after, .btn--accent:hover::after {
  animation: sheen 760ms var(--ease-out-quart);
}

.btn--outline {
  background: transparent;
  color: var(--paper);
  border-color: var(--ink-600);
}
.btn--outline:hover {
  border-color: var(--gold-500);
  color: var(--gold-400);
  background: oklch(0.8 0.148 84 / 0.06);
}

.btn--ghost { background: transparent; color: var(--paper-dim); }
.btn--ghost:hover { color: var(--paper); background: var(--ink-850); }

.btn--lg { padding: var(--s-4) var(--s-8); font-size: var(--fs-md); min-height: 54px; }
.btn--sm { padding: var(--s-2) var(--s-4); font-size: var(--fs-xs); min-height: 38px; }

/* Arrow that slides on hover */
.btn__arrow { transition: transform var(--t-mid) var(--ease-out-expo); }
.btn:hover .btn__arrow { transform: translate3d(0.2rem, 0, 0); }

/* ---------- 08. Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 4.5vw, 4rem) clamp(3rem, 6vw, 5.5rem);
  overflow: hidden;
  isolation: isolate;
}
/* Cast light: two blooms behind the composition */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  filter: blur(60px);
}
.hero::before {
  width: 60vw; height: 60vw;
  max-width: 780px; max-height: 780px;
  top: -22%; right: -12%;
  background: radial-gradient(circle, oklch(0.8 0.148 84 / 0.18), transparent 68%);
  animation: lamp-breathe 11s var(--ease-out-quart) infinite;
}
.hero::after {
  width: 55vw; height: 55vw;
  max-width: 700px; max-height: 700px;
  bottom: -28%; left: -14%;
  background: radial-gradient(circle, oklch(0.5 0.175 286 / 0.4), transparent 68%);
  animation: lamp-breathe 14s var(--ease-out-quart) infinite reverse;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: var(--s-12); }
}

.hero__title {
  font-size: var(--fs-hero);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin-bottom: var(--s-6);
  text-wrap: initial;
}
/* Banned: gradient text. Emphasis is the italic cut in gold. */
.hero__title em {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--gold-500);
}

.hero__sub {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--paper-dim);
  max-width: 46ch;
  margin-bottom: var(--s-8);
}

.hero__search {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-5);
  margin-bottom: var(--s-6);
  max-width: 34rem;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-full);
  transition: border-color var(--t-mid) var(--ease-out-quart), box-shadow var(--t-mid) var(--ease-out-quart);
}
.hero__search:focus-within {
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px oklch(0.8 0.148 84 / 0.14);
}
.hero__search > svg { width: 18px; height: 18px; color: var(--paper-mute); flex: 0 0 auto; fill: none; }
.hero__search input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--paper);
  padding-block: var(--s-2);
}
.hero__search input::placeholder { color: var(--paper-mute); }
.hero__search input:focus { outline: none; }

.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-10); }

/* Proof row, set as a hairline-ruled band. Deliberately not the
   big-number/small-label hero-metric template: values are inline, sized
   with the body, and read as a sentence of evidence. */
.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-6) var(--s-10);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-700);
}
.hero__stat { display: flex; flex-direction: column; gap: 2px; }
.hero__stat strong {
  font-family: var(--font-ui);
  font-size: var(--fs-d4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-500);
  letter-spacing: -0.01em;
}
.hero__stat span {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* Hero visual: a settled stack of real covers */
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1;
  max-width: 520px;
  margin-inline: auto;
  width: 100%;
  perspective: 1400px;
}
.hero__book {
  position: absolute;
  width: 54%;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--ink-800);
  box-shadow: var(--lift-cover);
  animation: settle 1.1s var(--ease-out-expo) both;
  transition: transform var(--t-slow) var(--ease-out-expo);
  will-change: transform;
}
.hero__book img { width: 100%; height: 100%; object-fit: cover; }
/* Hairline highlight on the leading edge, as if lit from the lamp */
.hero__book::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid oklch(1 0 0 / 0.1);
  border-radius: inherit;
  pointer-events: none;
}
/* A fan of three: the featured title sits centre and in front, the other two
   flank it. Spread far enough apart that all three covers stay legible. */
.hero__book { width: 47%; }
.hero__book--1 { top: 2%;  left: 26.5%; --rest-rot: 2deg;  --settle-rot: 6deg;   animation-delay: 260ms; z-index: 3; }
.hero__book--2 { top: 15%; left: 0;     --rest-rot: -9deg; --settle-rot: -15deg; animation-delay: 380ms; z-index: 1; }
.hero__book--3 { top: 13%; right: 0;    --rest-rot: 9deg;  --settle-rot: 15deg;  animation-delay: 500ms; z-index: 2; }

/* Pointer parallax, driven by JS custom props */
.hero__visual:hover .hero__book { transition-duration: var(--t-mid); }
.hero__book { transform: rotate(var(--rest-rot, 0deg)) translate3d(calc(var(--px, 0) * var(--depth, 8px)), calc(var(--py, 0) * var(--depth, 8px)), 0); }
.hero__book--1 { --depth: 22px; }
.hero__book--2 { --depth: 10px; }
.hero__book--3 { --depth: 14px; }

/* ---------- 09. Title ribbon (infinite marquee) ---------- */
.ribbon {
  position: relative;
  padding-block: var(--s-5);
  border-block: 1px solid var(--ink-700);
  overflow: hidden;
  background: var(--ink-900);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.ribbon__track {
  display: flex;
  width: max-content;
  gap: var(--s-10);
  animation: ribbon 46s linear infinite;
}
.ribbon:hover .ribbon__track { animation-play-state: paused; }
.ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: var(--s-10);
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-style: italic;
  font-weight: 500;
  color: var(--paper-dim);
  white-space: nowrap;
}
.ribbon__item::after {
  content: "✦";
  font-style: normal;
  font-size: 0.6em;
  color: var(--gold-500);
}

/* ---------- 10. Story shelf (scroll-snap rail) ---------- */
.shelf { position: relative; }
.shelf__header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-5);
}
.shelf__title { display: flex; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; }
.shelf__title h2 { margin: 0; }
.shelf__sub { color: var(--paper-mute); font-size: var(--fs-sm); font-family: var(--font-ui); }
.shelf__nav { display: flex; gap: var(--s-2); }
.shelf__btn {
  width: 42px; height: 42px;
  border-radius: var(--r-full);
  background: transparent;
  border: 1px solid var(--ink-700);
  color: var(--paper);
  display: grid; place-items: center;
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear, background var(--t-fast) linear, transform var(--t-fast) var(--ease-out-quart);
}
.shelf__btn:hover:not(:disabled) { border-color: var(--gold-500); color: var(--gold-400); transform: translate3d(0, -1px, 0); }
.shelf__btn:disabled { opacity: 0.3; cursor: not-allowed; }
.shelf__btn svg { width: 17px; height: 17px; fill: none; }

.shelf__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(158px, 1fr);
  gap: clamp(var(--s-4), 2vw, var(--s-6));
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-block: var(--s-2) var(--s-8);
  /* bleed to the viewport edge so the rail reads as continuing off-screen */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: none;
}
.shelf__rail::-webkit-scrollbar { display: none; }
.shelf__rail > * { scroll-snap-align: start; }
@media (min-width: 768px)  { .shelf__rail { grid-auto-columns: 192px; } }
@media (min-width: 1200px) { .shelf__rail { grid-auto-columns: 214px; } }

/* ---------- 11. Story card ---------- */
.book-card--wp, .book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  transition: transform var(--t-mid) var(--ease-out-quart);
}
.book-card--wp__cover, .book-card__cover {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  background: var(--ink-800);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--lift-md);
  transform-style: preserve-3d;
  transition:
    transform var(--t-mid) var(--ease-out-quart),
    box-shadow var(--t-mid) var(--ease-out-quart);
}
.book-card--wp__cover img, .book-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out-expo);
}
.book-card--wp:hover .book-card--wp__cover,
.book-card:hover .book-card__cover {
  box-shadow: var(--lift-cover);
}
.book-card--wp:hover .book-card--wp__cover img,
.book-card:hover .book-card__cover img { transform: scale(1.05); }

/* Gold sheen sweeps the cover on hover */
.book-card--wp__cover::after, .book-card__cover::after {
  content: "";
  position: absolute;
  top: -50%; left: 0;
  width: 40%; height: 200%;
  background: linear-gradient(90deg, transparent, oklch(0.9 0.09 88 / 0.28), transparent);
  transform: translate3d(-140%, 0, 0) rotate(8deg);
  pointer-events: none;
}
.book-card--wp:hover .book-card--wp__cover::after,
.book-card:hover .book-card__cover::after { animation: sheen 900ms var(--ease-out-quart); }

/* Metadata chips over a scrim */
.book-card--wp__overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--s-6) var(--s-3) var(--s-3);
  background: linear-gradient(180deg, transparent, oklch(0.125 0.028 286 / 0.92));
  color: var(--paper);
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  opacity: 0;
  transform: translate3d(0, 0.5rem, 0);
  transition: opacity var(--t-mid) var(--ease-out-quart), transform var(--t-mid) var(--ease-out-quart);
}
.book-card--wp:hover .book-card--wp__overlay { opacity: 1; transform: none; }
.book-card--wp__overlay strong { color: var(--gold-400); font-size: var(--fs-sm); font-weight: 600; }
.book-card--wp__overlay span { color: var(--paper-mute); }

.book-card--wp__stat, .book-card__meta-chip {
  position: absolute;
  top: var(--s-2); right: var(--s-2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: var(--r-full);
  background: oklch(0.125 0.028 286 / 0.78);
  backdrop-filter: blur(8px);
  color: var(--paper);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.book-card--wp__stat svg { width: 11px; height: 11px; }

.book-card--wp__badge, .book-card__badge {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  padding: 4px 9px;
  border-radius: var(--r-full);
  background: var(--gold-500);
  color: oklch(0.19 0.04 287);
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.book-card--wp__badge--indigo { background: var(--indigo-400); color: var(--paper); }
.book-card--wp__badge--brand { background: var(--paper); color: oklch(0.19 0.04 287); }

.book-card--wp__body, .book-card__body {
  padding: var(--s-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.book-card--wp__title, .book-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.book-card--wp__title a, .book-card__title a { color: var(--paper); }
.book-card--wp__title a:hover, .book-card__title a:hover { color: var(--gold-400); }
.book-card--wp__author, .book-card__author {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--paper-mute);
  margin: 0;
  max-width: none;
}
.book-card--wp__author strong, .book-card__author strong { color: var(--paper-dim); font-weight: 500; }
.book-card__genre {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.book-card__meta {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-1);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--paper-mute);
}
.book-card__rating { color: var(--gold-500); }

/* ---------- 12. Featured act ---------- */
.featured-banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: clamp(var(--s-6), 4vw, var(--s-16));
  align-items: center;
  padding: clamp(var(--s-6), 3.5vw, var(--s-12));
  border: 1px solid var(--ink-700);
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 0% 0%, oklch(0.5 0.175 286 / 0.35), transparent 62%),
    var(--ink-900);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 760px) { .featured-banner { grid-template-columns: 1fr; } }
.featured-banner__cover {
  display: block;
  aspect-ratio: 2 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--lift-cover);
  transition: transform var(--t-slow) var(--ease-out-expo);
}
.featured-banner__cover:hover { transform: translate3d(0, -6px, 0) scale(1.015); }
.featured-banner__cover img { width: 100%; height: 100%; object-fit: cover; }
.featured-banner__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 5px 12px;
  margin-bottom: var(--s-5);
  border: 1px solid var(--gold-700);
  border-radius: var(--r-full);
  background: oklch(0.8 0.148 84 / 0.1);
  color: var(--gold-400);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.featured-banner h2 { color: var(--paper); margin-bottom: var(--s-4); font-size: var(--fs-d2); }
.featured-banner p { color: var(--paper-dim); margin-bottom: var(--s-6); max-width: 52ch; }
.featured-banner__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-8);
  margin-bottom: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-700);
}
.featured-banner__stat { display: flex; flex-direction: column; gap: 2px; }
.featured-banner__stat strong {
  font-family: var(--font-ui);
  font-size: var(--fs-d4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-500);
}
.featured-banner__stat span {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
}

/* ---------- 13. Genre tiles (the one Full-palette moment) ---------- */
.genre-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--s-3);
}
.genre-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 4 / 5;
  padding: var(--s-4);
  border-radius: var(--r-md);
  color: var(--paper);
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--t-mid) var(--ease-out-quart), box-shadow var(--t-mid) var(--ease-out-quart);
}
.genre-tile:hover { transform: translate3d(0, -5px, 0); box-shadow: var(--lift-lg); color: var(--paper); }
/* Grain + light wash so the flat duotone reads as a surface, not a swatch */
.genre-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(155deg, oklch(1 0 0 / 0.14), transparent 46%);
  pointer-events: none;
}
.genre-tile__name {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
  order: 2;
}
.genre-tile__count {
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: oklch(1 0 0 / 0.68);
  order: 3;
  margin-top: 3px;
}
/* Interior pages wrap name+count in a div; the homepage lists them as
   siblings. Both must read icon-first, name-last. */
.genre-tile > div { order: 2; }
.genre-tile__icon {
  order: 1;
  align-self: start;
  font-size: 20px;
  line-height: 1;
  color: oklch(1 0 0 / 0.55);
  transition: transform var(--t-mid) var(--ease-out-expo), color var(--t-mid) linear;
}
.genre-tile:hover .genre-tile__icon { transform: translate3d(0, -2px, 0) scale(1.12); color: oklch(1 0 0 / 0.9); }

/* On phones a 2-up grid of 14 tall tiles costs ~1600px of scroll. Three
   denser tiles per row reads better as a picker and saves most of it. */
@media (max-width: 560px) {
  .genre-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
  .genre-tile { aspect-ratio: 3 / 4; padding: var(--s-3); }
  .genre-tile__name { font-size: var(--fs-sm); }
  .genre-tile__count { font-size: 0.5625rem; letter-spacing: 0.08em; }
  .genre-tile__icon { font-size: 15px; }
}

.gt-romance    { background: linear-gradient(158deg, oklch(0.40 0.155 12),  oklch(0.26 0.11 8)); }
.gt-mystery    { background: linear-gradient(158deg, oklch(0.36 0.120 268), oklch(0.21 0.08 272)); }
.gt-thriller   { background: linear-gradient(158deg, oklch(0.34 0.145 300), oklch(0.19 0.07 292)); }
.gt-horror     { background: linear-gradient(158deg, oklch(0.30 0.110 348), oklch(0.17 0.06 340)); }
.gt-fantasy    { background: linear-gradient(158deg, oklch(0.42 0.170 292), oklch(0.24 0.11 286)); }
.gt-scifi      { background: linear-gradient(158deg, oklch(0.40 0.110 218), oklch(0.21 0.06 226)); }
.gt-historical { background: linear-gradient(158deg, oklch(0.45 0.110 76),  oklch(0.26 0.07 66)); }
.gt-adventure  { background: linear-gradient(158deg, oklch(0.42 0.100 178), oklch(0.23 0.06 186)); }
.gt-action     { background: linear-gradient(158deg, oklch(0.42 0.165 28),  oklch(0.24 0.10 24)); }
.gt-drama      { background: linear-gradient(158deg, oklch(0.38 0.150 310), oklch(0.22 0.09 302)); }
.gt-comedy     { background: linear-gradient(158deg, oklch(0.52 0.135 62),  oklch(0.30 0.09 54)); }
.gt-slice      { background: linear-gradient(158deg, oklch(0.46 0.130 258), oklch(0.26 0.08 262)); }
.gt-spiritual  { background: linear-gradient(158deg, oklch(0.40 0.105 158), oklch(0.22 0.06 164)); }
.gt-crime      { background: linear-gradient(158deg, oklch(0.34 0.045 260), oklch(0.20 0.03 264)); }
.gt-psych      { background: linear-gradient(158deg, oklch(0.38 0.130 282), oklch(0.21 0.08 278)); }
.gt-paranormal { background: linear-gradient(158deg, oklch(0.36 0.150 318), oklch(0.20 0.09 310)); }
.gt-children   { background: linear-gradient(158deg, oklch(0.50 0.120 208), oklch(0.28 0.08 214)); }
.gt-ya         { background: linear-gradient(158deg, oklch(0.44 0.170 358), oklch(0.25 0.11 352)); }
.gt-poetry     { background: linear-gradient(158deg, oklch(0.34 0.120 350), oklch(0.20 0.08 342)); }
.gt-bio        { background: linear-gradient(158deg, oklch(0.36 0.110 250), oklch(0.20 0.07 256)); }
.gt-memoir     { background: linear-gradient(158deg, oklch(0.34 0.090 20),  oklch(0.20 0.05 20)); }

/* ---------- 14. "Because you read" ---------- */
.because-rail {
  display: grid;
  grid-template-columns: minmax(150px, 190px) 1fr;
  gap: clamp(var(--s-6), 3vw, var(--s-10));
  align-items: center;
  padding: clamp(var(--s-5), 2.5vw, var(--s-8));
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-xl);
}
@media (max-width: 760px) { .because-rail { grid-template-columns: 1fr; } }
.because-rail__seed { text-align: center; }
.because-rail__seed-cover {
  width: 118px;
  aspect-ratio: 2/3;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-sm);
  overflow: hidden;
  box-shadow: var(--lift-md);
  transform: rotate(-3deg);
  transition: transform var(--t-slow) var(--ease-out-expo);
}
.because-rail:hover .because-rail__seed-cover { transform: rotate(0deg) scale(1.04); }
.because-rail__seed-cover img { width: 100%; height: 100%; object-fit: cover; }
.because-rail__seed-label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin: 0 0 var(--s-1);
}
.because-rail__seed-title { font-family: var(--font-display); font-size: var(--fs-d4); margin: 0; }
.because-rail__suggestions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s-2);
}
.because-rail__suggestion {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear, transform var(--t-fast) var(--ease-out-quart);
}
.because-rail__suggestion:hover {
  background: var(--ink-850);
  border-color: var(--ink-700);
  transform: translate3d(2px, 0, 0);
}
.because-rail__suggestion-cover {
  width: 42px;
  aspect-ratio: 2/3;
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: var(--lift-sm);
}
.because-rail__suggestion-cover img { width: 100%; height: 100%; object-fit: cover; }
.because-rail__suggestion-text { min-width: 0; }
.because-rail__suggestion-title {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--paper);
  margin: 0;
  line-height: 1.24;
}
.because-rail__suggestion-author {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  color: var(--paper-mute);
  margin: 0;
}

/* ---------- 15. Library card (progress) ---------- */
.continue-rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s-4);
}
.lib-card {
  display: grid;
  grid-template-columns: 68px 1fr auto;
  gap: var(--s-4);
  align-items: center;
  padding: var(--s-4);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.lib-card:hover { border-color: var(--ink-600); background: var(--ink-850); }
.lib-card__cover {
  width: 68px;
  aspect-ratio: 2/3;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
  box-shadow: var(--lift-sm);
}
.lib-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.lib-card__cover-progress {
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: oklch(0.125 0.028 286 / 0.7);
}
.lib-card__cover-progress-fill { height: 100%; background: var(--gold-500); }
.lib-card__body { min-width: 0; }
.lib-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lib-card__author {
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  color: var(--paper-mute);
  margin: 0 0 var(--s-2);
}
.lib-card__progress-text {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.lib-card__progress-bar {
  height: 3px;
  background: var(--ink-800);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: 5px;
}
.lib-card__progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  border-radius: var(--r-full);
  transform-origin: 0 50%;
}
.lib-card__cta { display: flex; flex-direction: column; gap: var(--s-1); align-items: end; }

/* ---------- 16. Chat story card ---------- */
.book-card--chat {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-900);
  transition: transform var(--t-mid) var(--ease-out-quart), border-color var(--t-mid) linear;
}
.book-card--chat:hover { transform: translate3d(0, -4px, 0); border-color: var(--ink-600); }
.book-card--chat__cover {
  aspect-ratio: 4 / 5;
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-4);
  background:
    radial-gradient(110% 90% at 100% 0%, oklch(0.5 0.175 286 / 0.5), transparent 60%),
    var(--ink-850);
  color: var(--paper);
}
.book-card--chat__bubble {
  padding: 9px 13px;
  border-radius: 13px;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  line-height: 1.5;
  max-width: 88%;
  background: var(--ink-800);
  border: 1px solid var(--ink-700);
  transform: translate3d(0, 0, 0);
  transition: transform var(--t-mid) var(--ease-out-expo);
}
.book-card--chat__bubble--left { align-self: flex-start; border-bottom-left-radius: 4px; }
.book-card--chat__bubble--right {
  align-self: flex-end;
  background: var(--gold-500);
  color: oklch(0.19 0.04 287);
  border-color: transparent;
  border-bottom-right-radius: 4px;
  font-weight: 500;
}
.book-card--chat:hover .book-card--chat__bubble--left  { transform: translate3d(-3px, -2px, 0); }
.book-card--chat:hover .book-card--chat__bubble--right { transform: translate3d(3px, 2px, 0); }
.book-card--chat__title {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  line-height: 1.1;
  color: var(--paper);
  margin: 0;
}
.book-card--chat__author {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  color: var(--paper-mute);
  margin: 4px 0 0;
}
.book-card--chat__body { padding: var(--s-3) var(--s-5) var(--s-4); }
.book-card--chat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  color: var(--paper-mute);
}
.book-card--chat__tag {
  padding: 2px 8px;
  border-radius: var(--r-full);
  border: 1px solid var(--ink-600);
  color: var(--gold-500);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 17. Awards podium ---------- */
.podium {
  display: grid;
  grid-template-columns: 1fr 1.18fr 1fr;
  gap: clamp(var(--s-3), 2vw, var(--s-6));
  align-items: end;
  max-width: 780px;
  margin-inline: auto;
}
@media (max-width: 620px) { .podium { grid-template-columns: 1fr; max-width: 320px; } }
.podium__place {
  position: relative;
  padding: var(--s-5) var(--s-4);
  text-align: center;
  border-radius: var(--r-lg);
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  transition: transform var(--t-slow) var(--ease-out-expo), box-shadow var(--t-slow) var(--ease-out-expo);
}
.podium__place:hover { transform: translate3d(0, -8px, 0); }
.podium__place--1 {
  padding-top: var(--s-8);
  border-color: var(--gold-700);
  background:
    radial-gradient(120% 100% at 50% 0%, oklch(0.8 0.148 84 / 0.2), transparent 62%),
    var(--ink-850);
  box-shadow: var(--glow-gold);
}
.podium__place--2 { border-color: var(--ink-600); }
.podium__place--3 { border-color: oklch(0.42 0.06 56); }
.podium__medal {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: var(--s-4);
  color: var(--paper-mute);
}
.podium__place--1 .podium__medal { color: var(--gold-400); }
.podium__cover {
  width: 82px;
  aspect-ratio: 2/3;
  margin: 0 auto var(--s-4);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--lift-md);
}
.podium__place--1 .podium__cover { width: 104px; box-shadow: var(--lift-cover); }
.podium__cover img { width: 100%; height: 100%; object-fit: cover; }
.podium__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 3px;
  line-height: 1.2;
}
.podium__author { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--paper-mute); }

/* ---------- 18. Author journey (numbered ladder, not cards) ---------- */
.journey {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink-700);
}
@media (max-width: 1000px) { .journey { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .journey { grid-template-columns: 1fr; } }

.journey__step {
  position: relative;
  padding: var(--s-8) var(--s-5) var(--s-8) 0;
  border-right: 1px solid var(--ink-700);
  transition: background var(--t-mid) linear;
}
.journey__step:last-child { border-right: 0; }
@media (max-width: 1000px) {
  .journey__step { border-bottom: 1px solid var(--ink-700); padding-right: var(--s-5); }
  .journey__step:nth-child(2n) { border-right: 0; }
}
@media (max-width: 620px) { .journey__step { border-right: 0; } }
/* The rung fills with gold as it enters view */
.journey__step::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  height: 2px;
  width: 100%;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 900ms var(--ease-out-expo);
  transition-delay: calc(var(--i, 0) * 120ms);
}
.journey__step.is-visible::before, .journey:hover .journey__step::before { transform: scaleX(1); }
.journey__step:hover { background: var(--ink-900); }

.journey__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-full);
  color: var(--gold-500);
  transition: border-color var(--t-mid) linear, transform var(--t-mid) var(--ease-out-expo);
}
.journey__icon svg { fill: none; }
.journey__step:hover .journey__icon { border-color: var(--gold-600); transform: translate3d(0, -2px, 0); }
.journey__step--gold .journey__icon { color: var(--gold-400); border-color: var(--gold-700); }
.journey__step--emerald .journey__icon { color: var(--indigo-400); }
.journey__level {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-bottom: var(--s-2);
  font-variant-numeric: tabular-nums;
}
.journey__name {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  color: var(--paper);
  margin: 0 0 var(--s-2);
}
.journey__text { font-size: var(--fs-sm); color: var(--paper-mute); margin: 0; max-width: 30ch; }

/* ---------- 19. Spec rows (replaces the banned icon-card grid) ----------
   `.feature` markup is reused across many pages. Restyled from a card into
   a hairline-ruled definition row so it stops reading as a template grid. */
.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-6) var(--s-5) var(--s-6) 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--ink-700);
  border-radius: 0;
  transition: none;
}
.feature:hover { transform: none; box-shadow: none; }
.feature::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 100%; height: 1px;
  background: var(--gold-500);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 700ms var(--ease-out-expo);
}
.feature:hover::before { transform: scaleX(1); }
.feature__icon {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--gold-500);
  transition: transform var(--t-mid) var(--ease-out-expo);
}
.feature__icon svg { width: 22px; height: 22px; fill: none; }
.feature:hover .feature__icon { transform: translate3d(0, -2px, 0); }
.feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  color: var(--paper);
  margin: 0;
}
.feature__text {
  font-family: var(--font-read);
  font-size: var(--fs-sm);
  line-height: 1.66;
  color: var(--paper-mute);
  margin: 0;
}

/* ---------- 20. Generic card (owner / about pages) ---------- */
.card {
  padding: var(--s-6);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
  transition: border-color var(--t-mid) linear, transform var(--t-mid) var(--ease-out-quart), background var(--t-mid) linear;
}
.card:hover { border-color: var(--ink-600); background: var(--ink-850); transform: translate3d(0, -3px, 0); }
.card h3 { font-family: var(--font-display); margin: 0 0 var(--s-3); font-size: var(--fs-d4); }
.card p { color: var(--paper-mute); margin: 0; font-size: var(--fs-sm); }
.card__icon {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  margin-bottom: var(--s-5);
  border: 1px solid var(--ink-600);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--gold-500);
}
.card__icon svg { width: 20px; height: 20px; fill: none; }

/* ---------- 21. CTA banner ---------- */
.cta-banner {
  position: relative;
  padding: clamp(var(--s-8), 5vw, var(--s-20)) clamp(var(--s-6), 4vw, var(--s-16));
  border: 1px solid var(--ink-700);
  border-radius: var(--r-xl);
  background:
    radial-gradient(90% 130% at 100% 0%, oklch(0.8 0.148 84 / 0.16), transparent 58%),
    radial-gradient(90% 130% at 0% 100%, oklch(0.5 0.175 286 / 0.42), transparent 58%),
    var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}
.cta-banner h2 {
  color: var(--paper);
  font-size: var(--fs-d1);
  margin-bottom: var(--s-5);
  max-width: 22ch;
  margin-inline: auto;
}
.cta-banner p {
  color: var(--paper-dim);
  max-width: 54ch;
  margin-inline: auto;
  margin-bottom: var(--s-8);
}
.cta-banner__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; }
.cta-banner .btn--outline { color: var(--paper); border-color: var(--ink-600); }

/* ---------- 22. Founder portrait ---------- */
.founder-portrait { position: relative; max-width: 420px; margin-inline: auto; }
.founder-portrait img {
  width: 100%;
  border-radius: var(--r-lg);
  box-shadow: var(--lift-cover);
}
/* Lamp bloom behind the portrait. Kept within the element's own width so it
   cannot widen the page on narrow viewports. */
.founder-portrait::before {
  content: "";
  position: absolute;
  inset: -6% 0 -4%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.8 0.148 84 / 0.18), transparent 66%);
  filter: blur(40px);
}
.founder-portrait__caption {
  margin-top: var(--s-4);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.founder-grid h2 { margin-bottom: var(--s-5); }
.founder-grid p { margin-bottom: var(--s-4); }

/* ---------- 23. Stats strip ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink-700);
  border-bottom: 1px solid var(--ink-700);
}
.stats > * {
  padding: var(--s-8) var(--s-6) var(--s-8) 0;
  border-right: 1px solid var(--ink-700);
}
.stats > *:last-child { border-right: 0; }
.stat__num {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--gold-500);
  line-height: 1;
}
.stat__label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-mute);
  margin-top: var(--s-3);
}

/* ---------- 24. Testimonials / quotes ---------- */
.testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
  padding: var(--s-8) 0 0;
  border-top: 1px solid var(--ink-700);
  background: transparent;
  border-radius: 0;
  transition: border-color var(--t-mid) linear;
}
.testimonial:hover { border-top-color: var(--gold-700); }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-style: italic;
  font-weight: 500;
  line-height: 1.42;
  color: var(--paper);
  margin: 0;
  flex: 1;
}
.testimonial__quote::before { content: none; }
.testimonial__person { display: flex; align-items: center; gap: var(--s-3); }
.testimonial__person strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--paper);
}
.testimonial__person span { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--paper-mute); }

.avatar {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  border: 1px solid var(--ink-600);
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold-500);
  background: var(--ink-850);
}
.avatar--gold { border-color: var(--gold-700); color: var(--gold-400); }

.quote-card {
  position: relative;
  padding: clamp(var(--s-6), 4vw, var(--s-12));
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-xl);
}
.quote-card .eyebrow { display: block; margin-bottom: var(--s-5); }
.quote-card__text { margin: 0 0 var(--s-8); padding: 0; }
.quote-card__text p {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
  max-width: 44ch;
}
.quote-card__text p::before,
.quote-card__text p::after { content: none; }
.quote-card__person {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink-700);
}
.quote-card__person strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--paper);
}
.quote-card__person span { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--paper-mute); }

/* ---------- 25. Reading surface — the one light register ---------- */
.leaf {
  background: var(--leaf-bg);
  color: var(--leaf-ink);
}
.leaf h1, .leaf h2, .leaf h3, .leaf h4 { color: var(--leaf-ink); }
.leaf .eyebrow, .leaf .label { color: oklch(0.52 0.13 62); }
.leaf .muted, .leaf p { color: var(--leaf-mute); }
.leaf .act-head p { color: var(--leaf-mute); }

.reader-preview {
  background: var(--leaf-bg);
  border: 1px solid var(--leaf-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 2rem 4rem -1.5rem oklch(0.125 0.028 286 / 0.55);
}
.reader-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--leaf-line);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leaf-mute);
}
.reader-preview__body {
  padding: clamp(var(--s-5), 3vw, var(--s-10));
  font-family: var(--font-read);
  font-size: var(--fs-md);
  line-height: 1.86;
  color: var(--leaf-ink);
}
.reader-preview__paragraph {
  position: relative;
  margin: 0 0 1.1em;
  padding: 4px 0;
  max-width: 62ch;
  transition: background var(--t-fast) linear;
}
.reader-preview__paragraph:hover { background: oklch(0.8 0.148 84 / 0.12); }
.reader-preview__paragraph em { font-style: italic; color: oklch(0.34 0.06 287); }
.reader-preview__comment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: var(--r-full);
  background: oklch(0.80 0.148 84);
  color: oklch(0.24 0.03 287);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 700;
  vertical-align: middle;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out-quart), background var(--t-fast) linear;
}
.reader-preview__comment:hover { transform: translate3d(0, -2px, 0) scale(1.06); background: var(--gold-400); }
.comment-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  color: var(--leaf-mute);
}
.comment-hint svg { width: 13px; height: 13px; fill: none; }

/* ---------- 26. Blog ---------- */
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-mid) var(--ease-out-quart), border-color var(--t-mid) linear;
}
.post-card:hover { transform: translate3d(0, -4px, 0); border-color: var(--ink-600); }
.post-card__cover {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(100% 130% at 20% 0%, oklch(0.5 0.175 286 / 0.6), transparent 62%),
    var(--ink-850);
}
.post-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); flex: 1; }
.post-card__meta {
  display: flex;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-600);
}
.post-card__title {
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.post-card__title a { color: var(--paper); }
.post-card__title a:hover { color: var(--gold-400); }
.post-card__excerpt { color: var(--paper-mute); font-size: var(--fs-sm); margin: 0; flex: 1; }
.post-card__link {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--gold-500);
  margin-top: var(--s-2);
}

.prose {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.82;
  color: var(--paper-dim);
}
.prose > * { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-16); margin-bottom: var(--s-4); font-size: var(--fs-d2); }
.prose h3 { margin-top: var(--s-12); margin-bottom: var(--s-3); font-size: var(--fs-d3); }
.prose p { margin: 0 0 1.15em; }
.prose strong { color: var(--paper); font-weight: 600; }
.prose a { color: var(--gold-500); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose blockquote {
  margin: var(--s-10) 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--gold-700);
  border-bottom: 1px solid var(--ink-700);
  padding-block: var(--s-6);
  font-family: var(--font-display);
  font-size: var(--fs-d3);
  font-style: italic;
  font-weight: 500;
  line-height: 1.42;
  color: var(--paper);
}
.prose blockquote p { margin: 0; max-width: 42ch; }
.prose ul, .prose ol { padding-left: var(--s-6); margin-bottom: 1.2em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-bottom: var(--s-2); }
.prose li::marker { color: var(--gold-600); }
.prose code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: var(--ink-850);
  border: 1px solid var(--ink-700);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.88em;
  color: var(--gold-400);
}
.prose img { border-radius: var(--r-md); margin-block: var(--s-8); box-shadow: var(--lift-md); }

/* ---------- 27. Page hero (interior) ---------- */
.page-hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 5rem) clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--ink-700);
  overflow: hidden;
  isolation: isolate;
}
.page-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40%; right: -10%;
  width: 46vw; height: 46vw;
  max-width: 620px; max-height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.5 0.175 286 / 0.4), transparent 66%);
  filter: blur(60px);
  pointer-events: none;
}
.page-hero__title {
  font-size: var(--fs-d1);
  /* Bodoni's ascenders need more room than a tight display leading allows;
     below ~1.04 they clip against the section's overflow. */
  line-height: 1.05;
  margin-bottom: var(--s-5);
  max-width: 24ch;
}
/* Emphasis matches the homepage: the italic cut, in gold. Never gradient text. */
.page-hero__title em,
.page-hero__title .ital {
  font-style: italic;
  font-weight: 500;
  color: var(--gold-500);
}
.page-hero__sub {
  font-family: var(--font-read);
  font-size: var(--fs-lg);
  line-height: 1.62;
  color: var(--paper-dim);
  max-width: 58ch;
}

/* ---------- 28. Breadcrumbs ---------- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding-block: var(--s-5);
  font-family: var(--font-ui);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--paper-mute);
}
.breadcrumbs a { color: var(--paper-mute); }
.breadcrumbs a:hover { color: var(--gold-500); }
.breadcrumbs__sep { color: var(--ink-600); }

/* ---------- 29. Chips / tags ---------- */
.genres { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 38px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-full);
  border: 1px solid var(--ink-700);
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--paper-dim);
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear, background var(--t-fast) linear, transform var(--t-fast) var(--ease-out-quart);
}
.chip:hover {
  border-color: var(--gold-600);
  color: var(--gold-400);
  transform: translate3d(0, -1px, 0);
}
.chip--solid {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: oklch(0.19 0.04 287);
}
.chip--solid:hover { background: var(--gold-400); border-color: var(--gold-400); color: oklch(0.17 0.04 287); }
.chip__count { font-size: var(--fs-2xs); color: var(--paper-mute); font-variant-numeric: tabular-nums; }
.chip--solid .chip__count { color: oklch(0.19 0.04 287 / 0.7); }

.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-full);
  border: 1px solid var(--ink-600);
  background: transparent;
  color: var(--paper-dim);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}
.tag--gold { border-color: var(--gold-700); color: var(--gold-400); }
.tag--accent { border-color: var(--gold-700); color: var(--gold-400); }
.tag--ink { background: var(--paper); border-color: var(--paper); color: oklch(0.19 0.04 287); }

/* ---------- 30. Forms ---------- */
.form-group { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-5); }
.form-group label {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-mute);
}
.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--ink-700);
  background: var(--ink-900);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  color: var(--paper);
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear, background var(--t-fast) linear;
}
.input::placeholder, .textarea::placeholder { color: var(--paper-mute); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  background: var(--ink-850);
  border-color: var(--gold-600);
  box-shadow: 0 0 0 3px oklch(0.8 0.148 84 / 0.14);
}
.textarea { resize: vertical; min-height: 150px; font-family: var(--font-read); line-height: 1.7; }
.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, oklch(0.655 0.016 288) 50%), linear-gradient(135deg, oklch(0.655 0.016 288) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--s-10);
}

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-4);
  margin-bottom: var(--s-10);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
}
.filter-bar .input { flex: 1; min-width: 200px; }
.filter-bar .select { width: auto; min-width: 170px; }

/* ---------- 31. FAQ ---------- */
.faq__item { border-bottom: 1px solid var(--ink-700); }
.faq__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-6) 0;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-d4);
  font-weight: 600;
  color: var(--paper);
  list-style: none;
  transition: color var(--t-fast) linear;
}
.faq__item summary:hover { color: var(--gold-400); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--gold-500);
  border-bottom: 1.5px solid var(--gold-500);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--t-mid) var(--ease-out-expo);
}
.faq__item[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.faq__answer {
  padding-bottom: var(--s-6);
  color: var(--paper-mute);
  font-size: var(--fs-md);
  animation: rise-in 420ms var(--ease-out-quart) both;
}

/* ---------- 32. Pricing ---------- */
.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-5);
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-8) var(--s-6);
  background: var(--ink-900);
  border: 1px solid var(--ink-700);
  border-radius: var(--r-lg);
  transition: transform var(--t-mid) var(--ease-out-quart), border-color var(--t-mid) linear;
}
.plan:hover { transform: translate3d(0, -4px, 0); border-color: var(--ink-600); }
.plan--featured {
  border-color: var(--gold-700);
  background:
    radial-gradient(110% 90% at 50% 0%, oklch(0.8 0.148 84 / 0.13), transparent 60%),
    var(--ink-850);
  box-shadow: var(--glow-gold);
}
.plan__name {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--s-4);
}
.plan__price {
  font-family: var(--font-display);
  font-size: var(--fs-d1);
  font-weight: 600;
  color: var(--paper);
  line-height: 1;
  letter-spacing: -0.03em;
}
.plan__price small { font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 400; color: var(--paper-mute); letter-spacing: 0; }
.plan__desc { color: var(--paper-mute); margin: var(--s-4) 0 var(--s-6); font-size: var(--fs-sm); }
.plan__features { margin: 0 0 var(--s-8); display: flex; flex-direction: column; gap: var(--s-3); }
.plan__features li {
  display: flex;
  align-items: start;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  color: var(--paper-dim);
  max-width: none;
}
.plan__features li::before {
  content: "";
  flex: 0 0 auto;
  width: 6px; height: 10px;
  margin-top: 6px;
  border-right: 1.5px solid var(--gold-500);
  border-bottom: 1.5px solid var(--gold-500);
  transform: rotate(45deg);
}
.plan__cta { margin-top: auto; }

/* ---------- 33. Rank list ---------- */
.rank-list { display: flex; flex-direction: column; }
.rank-item {
  display: grid;
  grid-template-columns: 44px 56px 1fr auto;
  gap: var(--s-5);
  align-items: center;
  padding: var(--s-4) 0;
  border-top: 1px solid var(--ink-700);
  border-radius: 0;
  background: transparent;
  transition: background var(--t-fast) linear;
}
.rank-item:last-child { border-bottom: 1px solid var(--ink-700); }
.rank-item:hover { background: var(--ink-900); }
@media (max-width: 620px) { .rank-item { grid-template-columns: 34px 48px 1fr; gap: var(--s-4); } }
.rank-item__num {
  font-family: var(--font-ui);
  font-size: var(--fs-d4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--paper-mute);
  text-align: right;
  line-height: 1;
}
.rank-item--1 .rank-item__num, .rank-item--top .rank-item__num { color: var(--gold-500); }
.rank-item__cover {
  width: 56px;
  aspect-ratio: 2/3;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: var(--lift-sm);
}
@media (max-width: 620px) { .rank-item__cover { width: 48px; } }
.rank-item__cover img { width: 100%; height: 100%; object-fit: cover; }
.rank-item__body { min-width: 0; }
.rank-item__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}
.rank-item__title a { color: var(--paper); }
.rank-item__title a:hover { color: var(--gold-400); }
.rank-item__author { font-family: var(--font-ui); font-size: var(--fs-xs); color: var(--paper-mute); margin: 3px 0; }
.rank-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  color: var(--paper-mute);
}
.rank-item__votes { text-align: right; }
.rank-item__votes strong {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--fs-md);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--gold-500);
}
.rank-item__votes span { font-family: var(--font-ui); font-size: var(--fs-2xs); color: var(--paper-mute); }
.rank-item__trend { font-family: var(--font-ui); font-size: var(--fs-2xs); font-weight: 600; }
.rank-item__trend--up { color: var(--success); }
.rank-item__trend--down { color: var(--danger); }
@media (max-width: 620px) { .rank-item__votes { display: none; } }

/* ---------- 34. Footer ---------- */
.site-footer {
  position: relative;
  margin-top: var(--bay);
  padding-block: var(--s-20) var(--s-10);
  border-top: 1px solid var(--ink-700);
  background: var(--ink-950);
  color: var(--paper-mute);
  font-family: var(--font-ui);
}
.site-footer a { color: var(--paper-dim); }
.site-footer a:hover { color: var(--gold-400); }

.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(4, 1fr);
  gap: var(--s-10);
}
@media (max-width: 1000px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px)  { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }

.footer__brand { max-width: 320px; grid-column: 1 / -1; }
@media (min-width: 1001px) { .footer__brand { grid-column: auto; } }
.footer__brand img { height: 38px; margin-bottom: var(--s-5); }
.footer__brand p { color: var(--paper-mute); font-size: var(--fs-sm); font-family: var(--font-read); }

.footer__col h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: var(--s-5);
}
.footer__col li { margin-bottom: var(--s-3); font-size: var(--fs-sm); }
.footer__col a {
  position: relative;
  display: inline-block;
  transition: transform var(--t-fast) var(--ease-out-quart), color var(--t-fast) linear;
}
.footer__col a:hover { transform: translate3d(3px, 0, 0); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  margin-top: var(--s-16);
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink-700);
  font-size: var(--fs-xs);
  color: var(--paper-mute);
}
.footer__social { display: flex; gap: var(--s-2); }
.footer__social a {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink-700);
  border-radius: var(--r-full);
  color: var(--paper-mute);
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear, transform var(--t-fast) var(--ease-out-quart);
}
.footer__social a:hover { border-color: var(--gold-600); color: var(--gold-400); transform: translate3d(0, -2px, 0); }
.footer__social svg { width: 17px; height: 17px; }

/* ---------- 35. Mobile tab bar ---------- */
.mobile-tabbar {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 55;
  justify-content: space-around;
  padding: 6px 0 max(6px, env(safe-area-inset-bottom));
  background: oklch(0.125 0.028 286 / 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-700);
}
@media (max-width: 768px) { .mobile-tabbar { display: flex; } }
.mobile-tabbar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex: 1 1 0;
  /* Without this, each item's intrinsic label width becomes its floor and the
     five items together overflow narrow viewports. */
  min-width: 0;
  min-height: 48px;
  padding: 4px 2px;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--paper-mute);
  transition: color var(--t-fast) linear;
}
.mobile-tabbar__item span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-tabbar__item svg { width: 21px; height: 21px; fill: none; transition: transform var(--t-mid) var(--ease-out-expo); }
.mobile-tabbar__item:active svg { transform: scale(0.9); }
.mobile-tabbar__item--active { color: var(--gold-500); font-weight: 600; }
body.has-mobile-tabbar { padding-bottom: 0; }
@media (max-width: 768px) { body.has-mobile-tabbar { padding-bottom: 68px; } }

/* ---------- 35b. Auth panel ---------- */
.auth {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(var(--s-8), 6vw, var(--s-20)) var(--gutter);
  position: relative;
  overflow-x: clip;
}
.auth::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -20%; left: 50%;
  width: min(90vw, 760px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, oklch(0.5 0.175 286 / 0.4), transparent 66%);
  filter: blur(70px);
  pointer-events: none;
}
.auth__panel { width: 100%; max-width: 460px; }
.auth .card:hover { transform: none; }
.auth .eyebrow { margin-bottom: var(--s-4); }

/* Checkbox, tinted to the brand rather than the OS default blue */
input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--gold-500);
  cursor: pointer;
}

/* ---------- 36. Utilities ---------- */
.text-center { text-align: center; }
.text-center p, .text-center .lead { margin-inline: auto; }
.divider { height: 1px; background: var(--ink-700); margin-block: var(--s-16); border: 0; }

.sr-only, .visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px; left: var(--s-4);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--gold-500);
  color: oklch(0.19 0.04 287);
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  font-weight: 600;
  border-radius: var(--r-full);
  transition: top var(--t-mid) var(--ease-out-expo);
}
.skip-link:focus { top: var(--s-3); color: oklch(0.19 0.04 287); }

/* ---------- 37. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  /* Guarantee final states rather than mid-animation frames */
  .unmask { clip-path: none; animation: none; }
  .reveal, .js-motion .reveal { opacity: 1 !important; transform: none !important; }
  .hero__book { animation: none; transform: rotate(var(--rest-rot, 0deg)); }
  .ribbon__track { animation: none; }
  .journey__step::before, .feature::before { transform: scaleX(1); }
  .book-card--wp__overlay { opacity: 1; transform: none; }
}

/* ---------- 38. Print ---------- */
@media print {
  .site-header, .site-footer, .mobile-tabbar, .menu-toggle, .cta-banner, .ribbon { display: none; }
  body { background: #fff; color: #111; }
  * { box-shadow: none !important; }
}