/* Hallmark · redesign · macrostructure: varied (problem→antidote→formats→method→bedtime→payoff→library→proof→pricing→gift→faq)
 * genre: editorial · theme: brand-native (cream paper · warm amber accent · Instrument Serif) · motion: scroll-reveal
 * pre-emit critique: P5 H4 E4 S5 R4 V5 */
/* ============ Folio — night library ============ */

/* Cross-document page transitions: one opt-in line gives every navigation a
   soft crossfade in supporting browsers (Chrome/Edge, Safari 18.2+). Browsers
   without it just navigate normally — zero JS, no perf cost. The pinned chrome
   is named so it stays put while the page content fades beneath it. */
@view-transition { navigation: auto; }
.brand { view-transition-name: fp-brand; }
.topnav { view-transition-name: fp-nav; }
.theme-toggle { view-transition-name: fp-toggle; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: 0.42s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Universal entrance: the page content fades + rises in on every load, so
   navigating always fades the assets in — works in every browser, mobile too.
   'backwards' fill means after it finishes the content reverts to normal, so
   the book-open dim/scale still works. */
@keyframes fp-page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.library { animation: fp-page-in 0.55s cubic-bezier(0.4, 0, 0.2, 1) backwards; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .library { animation: none; }
}

:root {
  --ink: #15110d;
  --ink-2: #1d1813;
  --lamp: #ffb45e;
  --cream: #f3ecdd;
  --cream-dim: #cfc4ae;
  --hair: rgba(243, 236, 221, 0.14);

  --serif-display: "Instrument Serif", Georgia, serif;
  --serif-text: "Newsreader", Georgia, serif;

  /* page geometry, set from JS */
  --page-w: 320px;
  --page-h: 445px;
  --book-w: 320px; /* 2x page-w in spread mode */
}

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

html, body {
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  background: #ffe9d2;
  color: #3a2b1a;
  font-family: var(--serif-text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* the shelves intentionally bleed past the viewport edge — the page itself
   must never pan sideways. iOS ignores overflow-x on body alone: it needs
   the root too, and `clip` is the value Safari actually honors. */
html, body { overflow-x: hidden; overflow-x: clip; }

/* ---------- atmosphere ---------- */

.room-light {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120vmax 80vmax at 50% -22%, rgba(255, 252, 245, 0.6), transparent 55%),
    radial-gradient(90vmax 70vmax at 85% 110%, rgba(216, 158, 102, 0.22), transparent 60%),
    linear-gradient(180deg, #fff1e0 0%, #ffe9d2 45%, #f8dcbb 100%);
}

.grain {
  position: fixed; inset: -50%; z-index: 50; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-shift 1.4s steps(3) infinite;
}
/* the room lights: dim gently while a book is open */
.room-dim {
  position: fixed; inset: 0; z-index: 10; pointer-events: none;
  background: rgba(18, 11, 5, 0.62); /* warm candlelit dark over the day room */
  opacity: 0;
  transition: opacity 1.15s ease, background-color 0.9s ease;
}
.room-dim.on { opacity: 1; }
body.dark .room-dim { background: rgba(13, 16, 18, 0.6); } /* cool moonlit slate */

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-2%, 1%); }
  66% { transform: translate(1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- library ---------- */

.library {
  /* positioned but WITHOUT z-index: a z-index here would form a stacking
     context that isolates mix-blend-mode spot art from the page background
     (the ambient layers below paint first; document order keeps us above) */
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: clamp(56px, 9vh, 120px) clamp(18px, 5vw, 64px) clamp(80px, 12vh, 150px);
  transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
}
.library.dimmed {
  opacity: 0.25;
  filter: blur(6px) saturate(0.7);
  transform: scale(0.985);
  pointer-events: none;
}

.lib-head { text-align: center; margin-bottom: clamp(48px, 8vh, 96px); }
.hero-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(24px, 6.7vw, 90px);
  line-height: 1.18;
  color: #241a0f;
  max-width: 1400px;
  margin: clamp(48px, 9vh, 100px) auto 0;
}
.hero-word {
  /* the switching word stands alone on the third row */
  display: block; width: fit-content;
  margin: 0.16em auto 0;
  /* real box instead of the Highlight knockout cut, so the letters stay
     legible in dark mode (knockouts show the background through) */
  background: #161310;
  color: #ffe9d2;
  padding: 0.01em 0.16em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: opacity 0.35s ease;
}
.hero-word.swapping { opacity: 0; }
body.dark .hero-title { color: #e7edf0; }
body.dark .hero-word { color: #f2f6f8; }

/* the creed, leading into the mission */
.mission p.mission-creed {
  font-family: var(--serif-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.3;
  color: #241a0f;
  margin-bottom: 18px;
}
.mission-creed em { font-style: italic; color: #6b4f33; }
body.dark .mission p.mission-creed { color: #e7edf0; }
body.dark .mission-creed em { color: #aebbc4; }

/* a breath of the page color behind the pinned chrome: scrolled content
   fades out underneath instead of clashing with the nav */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0;
  height: 96px;
  z-index: 14; /* just under the brand, nav and toggle */
  pointer-events: none;
  background: linear-gradient(to bottom, #ffedda 0%, rgba(255, 237, 218, 0.85) 40%, rgba(255, 237, 218, 0) 100%);
  transition: opacity 0.4s ease;
}
body.dark::before {
  background: linear-gradient(to bottom, #3e4448 0%, rgba(62, 68, 72, 0.85) 40%, rgba(62, 68, 72, 0) 100%);
}
body.reading::before { opacity: 0; }
@media (max-width: 560px) {
  body::before { display: none; } /* the chrome scrolls away on phones */
}

/* top middle nav: the three rooms of the house */
.topnav {
  position: fixed; top: 28px; left: 50%; transform: translateX(-50%);
  z-index: 15;
  display: flex; gap: clamp(20px, 3vw, 34px);
  transition: opacity 0.4s ease;
}
body.reading .topnav { opacity: 0; pointer-events: none; }
.topnav a {
  font-style: italic; font-size: 15px; letter-spacing: 0.1em;
  color: #a37c52;
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
  -webkit-tap-highlight-color: transparent;
}
.topnav a:hover { color: #241a0f; }
.topnav a.on { color: #241a0f; border-bottom-color: rgba(36, 26, 15, 0.45); }
body.dark .topnav a { color: #9fb0b9; }
body.dark .topnav a:hover, body.dark .topnav a.on { color: #e7edf0; }
body.dark .topnav a.on { border-bottom-color: rgba(223, 230, 233, 0.4); }

/* ---- library page: collection rows — tome left, series trailing right ---- */
/* no title: subject tabs are the header, and they filter the shelves */
.lib-tabs {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 12px 14px;
  margin: clamp(56px, 10vh, 120px) auto clamp(64px, 11vh, 130px);
}
.lib-tab {
  appearance: none; cursor: pointer;
  font-family: var(--serif-display);
  font-size: 17px;
  color: #241a0f;
  background: none;
  border: 1px solid rgba(36, 26, 15, 0.3);
  border-radius: 999px;
  padding: 9px 22px 10px;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.lib-tab:hover { transform: translateY(-1px); border-color: #241a0f; }
.lib-tab.on { background: #161310; color: #ffe9d2; border-color: #161310; }
body.dark .lib-tab { color: #dfe6e9; border-color: rgba(223, 230, 233, 0.3); }
body.dark .lib-tab:hover { border-color: #dfe6e9; }
body.dark .lib-tab.on { background: #e9eef1; color: #2c3236; border-color: #e9eef1; }
.colrow--hide { display: none; }

.colrow {
  display: flex; align-items: flex-start; justify-content: center;
  gap: clamp(44px, 6vw, 96px);
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 8px;
  text-align: left;
}
.colrow + .colrow { margin-top: clamp(200px, 30vh, 360px); /* mega-air between collections */ }
/* the elder is large and rests on the same baseline as the little books
   (40px = the strip's leftover shadow padding) */
.colrow-tomelink { flex: 0 0 auto; display: block; align-self: flex-end; padding-bottom: 40px; -webkit-tap-highlight-color: transparent; }
.colrow-tome.tome { width: clamp(212px, 23vw, 298px); }
.colrow-main { flex: 1; min-width: 0; max-width: 680px; }
.colrow-open { display: inline-block; margin-top: 22px; }
.colrow:hover .colrow-open .col-arrow { transform: translateX(4px); }

/* the series, running off the shelf. The strip scrolls sideways, so the
   tiles get generous padding (pulled back with negative margins) — the
   deep house shadows and the hover wobble need room, or the box clips them */
.colrow-strip {
  display: flex; align-items: flex-end; gap: 24px;
  overflow-x: auto;
  /* the padding must swallow the full reach of the deep shadows (100px blur
     + 50px offset), or the scroll box clips them into a visible seam */
  margin: -28px -160px -200px -160px;
  padding: 60px 160px 240px 160px;
  scrollbar-width: none;
}
.colrow-strip::-webkit-scrollbar { display: none; }
/* when the books fit, the strip is a plain box: a scroll container would
   composite against the fixed ambient gradient and leave a tone seam */
.colrow-strip.strip--loose { overflow-x: visible; }
.strip-book {
  flex: 0 0 auto;
  width: clamp(160px, 16vw, 220px);
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
/* the same deep double-cast shadow as every book in the house, scaled to
   the tile's size */
.strip-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow:
    0 50px 100px rgba(88, 46, 14, 0.5),
    0 50px 100px rgba(88, 46, 14, 0.4),
    0 18px 36px -4px rgba(88, 46, 14, 0.35);
  transition: transform 0.28s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
.strip-book:hover .strip-tile {
  box-shadow:
    0 60px 110px rgba(88, 46, 14, 0.58),
    0 60px 110px rgba(88, 46, 14, 0.46),
    0 22px 42px -4px rgba(88, 46, 14, 0.4);
}
/* covers are typeset for full-size books: render them at 2x and scale
   down, so their typography keeps its proportions on the small tiles */
.strip-tile .cover {
  position: absolute; top: 0; left: 0;
  width: 200%; height: 200%;
  transform: scale(0.5); transform-origin: top left;
}
body.dark .strip-tile {
  box-shadow:
    0 50px 100px rgba(8, 10, 12, 0.6),
    0 50px 100px rgba(8, 10, 12, 0.45),
    0 18px 36px -4px rgba(8, 10, 12, 0.45);
}
body.dark .strip-book:hover .strip-tile {
  box-shadow:
    0 60px 110px rgba(8, 10, 12, 0.68),
    0 60px 110px rgba(8, 10, 12, 0.5),
    0 22px 42px -4px rgba(8, 10, 12, 0.5);
}

/* ---- hero: a title, the pitch, and an endless ticker of every book ---- */
.pitch-title {
  margin: clamp(28px, 4vh, 52px) auto 0;
  text-align: center;
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.1;
  color: #241a0f;
}
body.dark .pitch-title { color: #e7edf0; }
.hero-pitch {
  max-width: 680px;
  margin: clamp(24px, 3.5vh, 40px) auto 0;
  text-align: center;
  font-family: var(--serif-text);
  font-size: clamp(17px, 1.95vw, 21px);
  line-height: 1.6;
  color: #4a3826;
}
body.dark .hero-pitch { color: #c4cfd5; }
/* full-bleed ticker; the track holds two identical runs and drifts left
   forever. The big vertical padding swallows the deep tile shadows so the
   clipping overflow never cuts them into a seam. */
.book-ticker {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: clamp(44px, 7vh, 96px);
  margin-bottom: clamp(-96px, -13vh, -140px);
  padding: 70px 0 160px;
  overflow: hidden;
}
.ticker-track {
  display: flex; align-items: flex-end; width: max-content;
  gap: clamp(22px, 3vw, 42px);
  animation: ticker-drift 66s linear infinite;
}
/* pause only where a real cursor can hover — on touch, Safari latches :hover
   and would freeze the ticker permanently after the first tap */
@media (hover: hover) and (pointer: fine) {
  .book-ticker:hover .ticker-track { animation-play-state: paused; }
}
@keyframes ticker-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.ticker-book {
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 205px);
  perspective: 900px;
  -webkit-tap-highlight-color: transparent;
}
/* the first tile needs a little left inset so it isn't flush to the edge */
.ticker-track > .ticker-book:first-child { margin-left: clamp(24px, 6vw, 90px); }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .book-ticker { overflow-x: auto; scrollbar-width: none; }
  .book-ticker::-webkit-scrollbar { display: none; }
}

/* ---- the source-book sheet: tap a tome, meet the book ---- */
.src-modal { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.src-modal-back {
  position: absolute; inset: 0;
  background: rgba(34, 24, 14, 0.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.35s ease;
}
.src-modal-sheet {
  position: absolute; left: 50%; bottom: 0;
  transform: translate(-50%, 104%);
  width: min(560px, 100%);
  max-height: 88dvh;
  overflow-y: auto;
  background: #fff6e9;
  border-radius: 26px 26px 0 0;
  padding: 14px 26px calc(env(safe-area-inset-bottom, 0px) + 30px);
  box-shadow: 0 -20px 70px rgba(40, 24, 8, 0.35);
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0.25, 1);
  text-align: center;
}
.src-modal.open { pointer-events: auto; }
.src-modal.open .src-modal-back { opacity: 1; }
.src-modal.open .src-modal-sheet { transform: translate(-50%, 0); }
body.modal-open { overflow: hidden; }
.src-modal-grab {
  width: 40px; height: 5px; border-radius: 999px;
  background: rgba(90, 60, 30, 0.25);
  margin: 0 auto 8px;
}
.src-modal-close {
  position: absolute; top: 16px; right: 16px;
  appearance: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(90, 60, 30, 0.12);
  color: #5a4630; font-size: 14px;
  -webkit-tap-highlight-color: transparent;
}
.src-modal-cover {
  width: clamp(110px, 30vw, 150px);
  border-radius: 6px;
  margin: 14px auto 18px;
  box-shadow: 0 18px 40px -10px rgba(60, 35, 10, 0.45);
}
.src-modal-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 34px);
  line-height: 1.1;
  color: #241a0f;
  margin-top: 6px;
}
.src-modal-why {
  margin: 14px auto 0;
  max-width: 430px;
  font-size: 15.5px; line-height: 1.6;
  color: #4a3826;
}
.src-modal-h {
  margin: 26px 0 12px;
  font-style: italic; font-size: 13.5px; letter-spacing: 0.12em;
  color: #a37c52;
}
.src-modal-chapters {
  list-style: none;
  max-width: 400px;
  margin: 0 auto;
  font-size: 14.5px; line-height: 1.5;
  color: #4a3826;
}
.src-modal-chapters li { padding: 7px 0; border-bottom: 1px solid rgba(122, 88, 54, 0.14); }
.src-modal-chapters li:last-child { border-bottom: 0; }
.src-modal-cta { margin-top: 28px; }
/* desktop: the sheet becomes a floating centered card */
@media (min-width: 700px) {
  .src-modal-sheet {
    bottom: auto; top: 50%;
    transform: translate(-50%, -42%) scale(0.96);
    opacity: 0;
    border-radius: 26px;
    max-height: 86vh;
    transition: transform 0.35s cubic-bezier(0.3, 1, 0.4, 1), opacity 0.3s ease;
  }
  .src-modal.open .src-modal-sheet { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
body.dark .src-modal-sheet { background: #353b40; }
body.dark .src-modal-title { color: #e7edf0; }
body.dark .src-modal-why, body.dark .src-modal-chapters { color: #c4cfd5; }
body.dark .src-modal-chapters li { border-color: rgba(200, 215, 224, 0.12); }
body.dark .src-modal-h { color: #9fb0b9; }
body.dark .src-modal-grab { background: rgba(220, 230, 238, 0.25); }
body.dark .src-modal-close { background: rgba(220, 230, 238, 0.12); color: #c4cfd5; }

/* the mission, when it is the whole page: held in the middle of the room */
.mission--page { margin-top: auto; margin-bottom: auto; padding: 110px 0 40px; }

/* ---- landing sections: one idea each, held in a lot of air ---- */
.lib-sec {
  margin-top: clamp(170px, 27vh, 320px);
  text-align: center;
}
.sec-kicker {
  font-style: italic; font-size: 14px; letter-spacing: 0.14em;
  color: #a37c52;
}
.sec-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.15;
  color: #241a0f;
  margin: 10px auto clamp(48px, 8vh, 84px);
  max-width: 760px;
}
body.dark .sec-kicker { color: #9fb0b9; }
body.dark .sec-title { color: #e7edf0; }

/* ── landing prose sections: the idea / the method / the maker ───── */
.prose-sec {
  margin: clamp(130px, 22vh, 240px) auto 0;
  max-width: 760px;
  text-align: center;
}
.prose-h {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.1;
  color: #241a0f;
  margin: 12px auto 0;
}
body.dark .prose-h { color: #e7edf0; }
.prose-lede {
  max-width: 640px;
  margin: clamp(28px, 4vh, 44px) auto 0;
  font-family: var(--serif-text);
  font-size: clamp(17px, 1.95vw, 21px);
  line-height: 1.6;
  color: #4a3826;
}
.prose-body {
  max-width: 600px;
  margin: clamp(20px, 2.6vh, 30px) auto 0;
  font-family: var(--serif-text);
  font-size: clamp(15.5px, 1.65vw, 18px);
  line-height: 1.68;
  color: #6b513a;
}
body.dark .prose-lede { color: #c4cfd5; }
body.dark .prose-body { color: #aebbc4; }

/* the method: big pen-and-ink illustrations in an alternating left/right
   rhythm, melting into the paper. The art leads; the text answers. */
.method {
  margin: clamp(180px, 28vh, 340px) auto 0;
  max-width: 1140px;
}
.method-head { text-align: center; }
.method-rows {
  margin-top: clamp(64px, 11vh, 130px);
  display: flex; flex-direction: column;
  gap: clamp(80px, 14vh, 180px);
}
.method-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(36px, 6vw, 100px);
}
.method-row--rev .method-fig { order: 2; }   /* image swings to the right */
.method-row--rev .method-txt { order: 1; }
.method-fig { display: flex; justify-content: center; }
.method-fig img {
  width: 100%; max-width: 480px; height: auto;
  mix-blend-mode: multiply; /* sketch paper dissolves into the cream page */
}
body.dark .method-fig img { mix-blend-mode: screen; filter: invert(1) hue-rotate(180deg) brightness(1.1); }
.method-txt { max-width: 420px; }
.method-row:not(.method-row--rev) .method-txt { justify-self: start; }
.method-row--rev .method-txt { justify-self: end; }
.method-n {
  font-family: var(--serif-display);
  font-size: 17px; letter-spacing: 0.2em;
  color: #a37c52;
  margin-bottom: 14px;
}
.method-h {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.12;
  color: #241a0f;
  margin-bottom: 16px;
}
.method-cap {
  font-family: var(--serif-text);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.62;
  color: #6b513a;
}
body.dark .method-n { color: #9fb0b9; }
body.dark .method-h { color: #e7edf0; }
body.dark .method-cap { color: #aebbc4; }

/* the maker: a framed photo with the same deep house shadow as the books */
/* the source library shelf links each tome into its collection */
.source-sec .sec-title { margin-bottom: clamp(22px, 3.5vh, 36px); }
.source-cta { display: inline-block; margin-bottom: clamp(52px, 9vh, 96px); }
.source-sec .up-row { margin-top: 8px; }
.src-tomelink { display: block; -webkit-tap-highlight-color: transparent; }

/* mission page: the manifesto leads, the creed follows */
.mission-manifesto { margin-top: clamp(40px, 8vh, 96px); }
.mission--after { margin-top: clamp(110px, 18vh, 200px); }

/* pricing: the one offer, stated plainly */
.pricing .sec-title { margin-bottom: clamp(28px, 4.5vh, 48px); }
.price { margin: 0 0 clamp(20px, 3vh, 30px); }
.price-amt {
  font-family: var(--serif-display);
  font-size: clamp(52px, 8vw, 92px);
  line-height: 1; color: #241a0f;
}
.price-per {
  font-family: var(--serif-text); font-style: italic;
  font-size: clamp(18px, 2vw, 24px); color: #a37c52;
}
body.dark .price-amt { color: #e7edf0; }
body.dark .price-per { color: #9fb0b9; }
.price-line {
  max-width: 520px; margin: 0 auto;
  font-family: var(--serif-text);
  font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #4a3826;
}
body.dark .price-line { color: #c4cfd5; }
.price-cta { margin-top: clamp(30px, 4.5vh, 44px); }
.price-fund {
  max-width: 480px; margin: clamp(34px, 5vh, 52px) auto 0;
  font-family: var(--serif-text);
  font-size: 14.5px; line-height: 1.6; color: #8a6a48;
}
.price-fund strong { font-weight: 500; color: #6b513a; }
body.dark .price-fund { color: #93a4ad; }
body.dark .price-fund strong { color: #c4cfd5; }

/* the source books being distilled next: quiet typographic tomes */
.up-label {
  text-align: center;
  margin: clamp(180px, 28vh, 340px) 0 64px;
  font-style: italic; font-size: 15px; letter-spacing: 0.1em;
  color: #a37c52;
}
body.dark .up-label { color: #9fb0b9; }
.up-row {
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(32px, 5vw, 72px);
  flex-wrap: wrap;
}
.up-tome { width: clamp(132px, 14vw, 178px); }
.up-cover {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 14% 12%;
  text-align: left;
}
.up-t {
  font-family: var(--serif-display);
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.12;
}
.up-a { font-size: 11px; font-style: italic; opacity: 0.75; }

/* the newest little books, linking into their collection */
.feat-row {
  /* two books per row, never more; an odd straggler takes center stage */
  display: grid;
  grid-template-columns: repeat(2, minmax(230px, 380px));
  justify-content: center; align-items: end;
  gap: clamp(56px, 9vh, 110px) clamp(40px, 7vw, 110px);
}
.feat-row .feat-book:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; }
.feat-book {
  position: relative;
  width: clamp(230px, 25vw, 380px);
  display: flex; flex-direction: column; gap: 16px;
  text-decoration: none;
  text-align: left;
  perspective: 1000px;
  -webkit-tap-highlight-color: transparent;
}
.feat-book .book-meta .a { transition: color 0.25s ease; }
.feat-book:hover .book-meta .a { color: #241a0f; }
body.dark .feat-book:hover .book-meta .a { color: #e7edf0; }
.lib-over {
  font-family: var(--serif-text); font-style: italic;
  font-size: 14px; letter-spacing: 0.14em; color: #a37c52;
}
.lib-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(56px, 11vw, 110px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  margin-top: 6px;
  background: linear-gradient(175deg, #2e2113 20%, #5b3e21 60%, #8a6034 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.lib-sub {
  margin-top: 24px; font-size: 15px; font-style: italic;
  color: #8a6a48;
  max-width: 560px; margin-left: auto; margin-right: auto;
  line-height: 1.5;
}

.lib-ctas {
  display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
  margin-top: clamp(40px, 7vh, 64px);
}
/* CTAs share the tab vocabulary: a pill with a hairline outline, filled when
   primary (same ink as the active tab), outline when secondary */
.cta {
  appearance: none; cursor: pointer;
  display: inline-block;
  text-decoration: none;
  font-family: var(--serif-display);
  font-size: 18px;
  padding: 12px 32px 13px;
  border: 1px solid rgba(36, 26, 15, 0.3);
  border-radius: 999px;
  background: none; color: #241a0f;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.cta:hover { transform: translateY(-2px); border-color: #241a0f; }
.cta-solid { background: #161310; color: #ffe9d2; border-color: #161310; }
.cta-solid:hover { background: #3a2b1a; border-color: #3a2b1a; }
.cta-line:hover { background: rgba(36, 26, 15, 0.07); }
body.dark .cta { border-color: rgba(223, 230, 233, 0.3); color: #dfe6e9; }
body.dark .cta:hover { border-color: #dfe6e9; }
body.dark .cta-solid { background: #e9eef1; color: #2c3236; border-color: #e9eef1; }
body.dark .cta-solid:hover { background: #ffffff; border-color: #ffffff; }
body.dark .cta-line:hover { background: rgba(223, 230, 233, 0.1); }

/* ---- collections: a source tome + the series it inspired ---- */
.collection { margin-top: clamp(70px, 12vh, 150px); }
.collection:first-child { margin-top: 0; }

.src {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(36px, 6vw, 84px);
  max-width: 980px;
  margin: 0 auto clamp(44px, 8vh, 90px);
  padding: 0 8px;
}
.tome { position: relative; width: clamp(190px, 21vw, 250px); flex: 0 0 auto; perspective: 1000px; }
.tome .b-shadow { aspect-ratio: 0.66; }
.tome .book3d { aspect-ratio: 0.66; }

.src-info { max-width: 520px; text-align: left; }
.src-kicker {
  font-style: italic; font-size: 14px; letter-spacing: 0.12em;
  color: #a37c52;
}
.src-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.08;
  color: #241a0f;
  margin-top: 8px;
}
.src-meta { font-size: 14px; font-style: italic; color: #8a6a48; margin-top: 6px; }
.src-blurb {
  margin-top: 18px;
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.55;
  color: #4a3826;
}
.src-values { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.chip {
  font-family: var(--serif-display);
  font-size: 16px;
  background: #161310;
  color: #ffe9d2;
  padding: 4px 11px 5px;
  border-radius: 2px;
}
body.dark .src-title { color: #e7edf0; }
body.dark .src-kicker { color: #9fb0b9; }
body.dark .src-meta { color: #93a4ad; }
body.dark .src-blurb { color: #c4cfd5; }
body.dark .chip { color: #f2f6f8; }

/* ---- landing: collection cards (each opens its own page) ---- */
.col-card {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(36px, 6vw, 84px);
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(28px, 4vh, 44px) 8px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.col-card + .col-card { margin-top: clamp(40px, 7vh, 80px); }
.col-tome { width: clamp(160px, 17vw, 210px); }
.col-info { max-width: 460px; text-align: left; }
.col-title {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.08;
  color: #241a0f;
  margin-top: 8px;
}
.col-note {
  margin-top: 12px;
  font-size: 14.5px; font-style: italic;
  color: rgba(122, 88, 54, 0.85);
}
.col-go {
  display: inline-block;
  text-decoration: none;
  margin-top: 22px;
  font-family: "Zilla Slab", Georgia, serif;
  font-size: 15.5px;
  color: #241a0f;
  border-bottom: 1px solid rgba(36, 26, 15, 0.45);
  padding-bottom: 2px;
  transition: border-color 0.25s ease;
}
.col-arrow { display: inline-block; transition: transform 0.25s ease; }
.col-card:hover .col-go { border-color: #241a0f; }
.col-card:hover .col-arrow { transform: translateX(4px); }
body.dark .col-title { color: #e7edf0; }
body.dark .col-note { color: rgba(159, 176, 185, 0.75); }
body.dark .col-go { color: #dfe6e9; border-color: rgba(223, 230, 233, 0.4); }
body.dark .col-card:hover .col-go { border-color: #dfe6e9; }

/* ---- collection page ---- */
/* ── liquid glass ────────────────────────────────────────────────
   A reusable refractive-glass surface: a frosted, light-bending pane
   with a bright top rim, a diagonal specular sweep, and a soft drop.
   .glass works on its own; add .glass--refract over busy art for the
   feDisplacementMap lens warp. Reused for the back puck and beyond. */
.glass {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0.16));
  -webkit-backdrop-filter: blur(7px) saturate(185%) brightness(1.06);
  backdrop-filter: blur(7px) saturate(185%) brightness(1.06);
  box-shadow:
    0 8px 22px rgba(74,50,24,0.18),
    0 2px 5px rgba(74,50,24,0.12),
    inset 0 1px 1px rgba(255,255,255,0.95),
    inset 0 -2px 4px rgba(255,255,255,0.30),
    inset 0 0 0 1px rgba(255,255,255,0.28);
}
.glass::before { /* specular sheen, top-left */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  background: linear-gradient(140deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 42%);
  mix-blend-mode: screen; opacity: 0.85;
}
.glass::after { /* rim refraction — light gathers at the curved edge */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 1;
  box-shadow: inset 0 0 7px 1px rgba(255,255,255,0.40);
  background: radial-gradient(125% 125% at 30% 22%, transparent 58%, rgba(255,255,255,0.28) 100%);
}
.glass--refract { -webkit-backdrop-filter: url(#glassWarp) blur(5px) saturate(180%); backdrop-filter: url(#glassWarp) blur(5px) saturate(180%); }
body.dark .glass {
  background: linear-gradient(135deg, rgba(231,237,240,0.16), rgba(231,237,240,0.04));
  box-shadow:
    0 8px 22px rgba(0,0,0,0.34),
    0 2px 5px rgba(0,0,0,0.22),
    inset 0 1px 1px rgba(255,255,255,0.30),
    inset 0 -2px 4px rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.12);
}
body.dark .glass::before { opacity: 0.4; }
body.dark .glass::after { box-shadow: inset 0 0 7px 1px rgba(255,255,255,0.16); background: radial-gradient(125% 125% at 30% 22%, transparent 60%, rgba(255,255,255,0.12) 100%); }

/* the back button speaks the tab language: a round outline with a chevron */
.back-puck {
  align-self: flex-start;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin: clamp(40px, 8vh, 76px) 0 clamp(36px, 6vh, 60px);
  border: 1px solid rgba(36, 26, 15, 0.3);
  border-radius: 50%;
  background: none;
  color: #241a0f;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  /* --puck-x aligns it to the books' edge via transform (layout-safe) */
  transform: translateX(var(--puck-x, 0px));
  transition: transform 0.25s cubic-bezier(.22,.9,.3,1.2), border-color 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.back-puck svg { display: block; margin-left: -1px; }
.back-puck:hover { transform: translateX(var(--puck-x, 0px)) translateY(-1px); border-color: #241a0f; background: rgba(36, 26, 15, 0.06); }
.back-puck:active { transform: translateX(var(--puck-x, 0px)) scale(0.94); }
body.dark .back-puck { color: #dfe6e9; border-color: rgba(223, 230, 233, 0.3); }
body.dark .back-puck:hover { border-color: #dfe6e9; background: rgba(223, 230, 233, 0.08); }
/* collection page: the characters wander the paper itself. Spot art from
   the books, white vignettes dissolved into the page by multiply, sitting
   UNDER the shelves — the books float above on their own shadows */
.collection { position: relative; }
.col-deco { position: absolute; inset: 0; pointer-events: none; }
.col-deco img {
  position: absolute;
  mix-blend-mode: multiply;
  opacity: 0.92;
}
.col-deco img:nth-child(1) {
  width: clamp(260px, 28vw, 440px);
  left: max(-70px, -5vw); top: 12%;
  transform: rotate(-5deg);
}
.col-deco img:nth-child(2) {
  width: clamp(240px, 26vw, 410px);
  right: max(-80px, -6vw); top: 38%;
  transform: rotate(4deg);
}
.col-deco img:nth-child(3) {
  width: clamp(220px, 24vw, 380px);
  left: 6vw; bottom: -30px;
  transform: rotate(-2.5deg);
}
body.dark .col-deco img { opacity: 0.45; }
.collection .shelf, .collection .col-head, .collection .shelf-note {
  position: relative; z-index: 1;
}
/* titles under the books stay readable over wandering spot art:
   a soft halo of the page color sits behind the letters */
.collection .book-meta .t, .collection .book-meta .a {
  text-shadow:
    0 0 6px #ffe9d2, 0 0 12px #ffe9d2, 0 0 20px #ffe9d2,
    0 1px 2px #ffe9d2, 0 -1px 2px #ffe9d2;
}
body.dark .collection .book-meta .t, body.dark .collection .book-meta .a {
  text-shadow:
    0 0 6px #3e4448, 0 0 12px #3e4448, 0 0 20px #3e4448,
    0 1px 2px #3e4448, 0 -1px 2px #3e4448;
}
@media (max-width: 900px) {
  /* small screens: one quiet companion at the bottom, not a crowd */
  .col-deco img:nth-child(1), .col-deco img:nth-child(2) { display: none; }
  .col-deco img:nth-child(3) { width: 220px; left: auto; right: -34px; bottom: -16px; }
}

/* collection page header: the books are the show, the header just whispers
   where they came from */
.col-head { text-align: center; margin: 0 auto clamp(64px, 10vh, 120px); }
/* the small elder tome, centered above the title */
.col-head-tomelink {
  display: block;
  width: clamp(118px, 13vw, 158px);
  margin: 0 auto clamp(24px, 3.2vh, 38px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* extra specificity so the header tome fills its centered link box and the
   generic .tome width rules (incl. the mobile 180px one) can't override it */
.col-head-tomelink .col-head-tome { width: 100%; }
/* a quiet line of context under the title, above the filter chips */
.col-desc {
  max-width: 560px;
  margin: 18px auto 4px;
  font-family: var(--serif-text);
  font-size: clamp(15px, 1.6vw, 17.5px);
  line-height: 1.55;
  color: #6b513a;
}
body.dark .col-desc { color: #b3bfc6; }
.col-h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.08;
  color: #241a0f;
  margin-top: 10px;
}
body.dark .col-h1 { color: #e7edf0; }
.src-values--center { justify-content: center; margin-top: 24px; }

.shelf.shelf--single { grid-template-columns: minmax(220px, 400px); }
.shelf-note {
  text-align: center;
  margin-top: 26px;
  font-size: 13px; font-style: italic;
  color: rgba(122, 88, 54, 0.7);
}
body.dark .shelf-note { color: rgba(159, 176, 185, 0.6); }

.shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 380px));
  justify-content: center;
  gap: clamp(64px, 10vh, 130px) clamp(36px, 6vw, 96px);
  align-items: end;
  padding-bottom: 26px;
}

.shelf-label {
  text-align: center;
  margin: clamp(64px, 11vh, 130px) 0 44px;
  font-style: italic; font-size: 15px; letter-spacing: 0.1em;
  color: #a37c52;
}
.shelf--square { grid-template-columns: repeat(2, minmax(220px, 400px)); }

.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* storybook cover title set into the art's calm upper area */
.c-storytitle {
  position: absolute; top: 6%; left: 0; right: 0; z-index: 2;
  text-align: center;
  font-family: var(--serif-display);
  font-size: clamp(24px, 2.8vw, 42px);
  line-height: 1.06;
  color: #2c2014;
}
/* covers with dark skies take the title in starlight */
.c-storytitle--light { color: #f4ecdc; text-shadow: 0 1px 10px rgba(20, 16, 40, 0.35); }

.book {
  appearance: none; border: 0; background: none; color: inherit;
  cursor: pointer; text-align: left;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  perspective: 1000px;
}
/* deep drop shadow lives on a flat plate OUTSIDE the 3D context —
   browsers drop box-shadows on transformed children of preserve-3d */
.b-shadow {
  position: absolute;
  left: 0; right: 0; top: 0;
  aspect-ratio: 0.72;
  border-radius: 7px;
  box-shadow:
    0 100px 200px rgba(88, 46, 14, 0.5),
    0 100px 200px rgba(88, 46, 14, 0.4),
    0 36px 70px -8px rgba(88, 46, 14, 0.35);
  transition: box-shadow 0.3s ease;
}
.book:hover .b-shadow {
  box-shadow:
    0 120px 220px rgba(88, 46, 14, 0.58),
    0 120px 220px rgba(88, 46, 14, 0.46),
    0 44px 84px -8px rgba(88, 46, 14, 0.42);
}
.book:focus-visible { outline: 1px solid rgba(140, 90, 40, 0.6); outline-offset: 8px; }

/* ---- real 3D book: cover board + page block + spine ---- */
.book3d {
  position: relative;
  width: 100%;
  aspect-ratio: 0.72; /* matches PAGE_ASPECT so the fly-in never stretches the art */
  transform-style: preserve-3d;
  /* flat at rest — the body only reveals itself when you reach for it */
  transition: transform 0.28s ease-out;
  will-change: transform;
  --bt: 24px; /* book thickness */
}
/* a quiet ring over the cover while a tapped book loads its pages —
   it fades in late, so fast opens never show it at all */
.book-load {
  position: absolute; top: 0; left: 0; width: 100%;
  aspect-ratio: 0.72;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.35s ease 0.2s;
  z-index: 3;
}
.book.loading .book-load { opacity: 1; }
.book-load::before {
  content: ""; position: absolute;
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(252, 246, 236, 0.82);
  box-shadow: 0 2px 16px rgba(60, 35, 10, 0.18);
}
.book-load span {
  position: relative;
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(36, 26, 15, 0.2);
  border-top-color: #241a0f;
  animation: bookload-spin 0.9s linear infinite;
}
body.dark .book-load::before { background: rgba(42, 47, 51, 0.85); box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35); }
body.dark .book-load span { border-color: rgba(223, 230, 233, 0.22); border-top-color: #e7edf0; }
@keyframes bookload-spin { to { transform: rotate(360deg); } }

.b-face { position: absolute; }
.b-front {
  inset: 0;
  transform: translateZ(calc(var(--bt) / 2));
  border-radius: 3px 7px 7px 3px;
  overflow: hidden;
}
/* back board doubles as the shadow caster — deep, sunlit drop */
.book3d::before {
  content: ""; position: absolute; inset: 1px;
  transform: translateZ(calc(var(--bt) / -2));
  border-radius: 7px 3px 3px 7px;
  background: #3a2b1a;
}
.b-edge { /* fore-edge: the paper block, right side */
  top: 2px; bottom: 2px; right: calc(var(--bt) / -2); width: var(--bt);
  transform: rotateY(90deg);
  background: repeating-linear-gradient(90deg, #efe7d3 0 1px, #d9cdb1 1px 2px);
}
.b-spine { /* bound side, left */
  top: 0; bottom: 0; left: calc(var(--bt) / -2); width: var(--bt);
  transform: rotateY(90deg);
  border-radius: 3px;
  filter: brightness(0.72);
}
.b-top, .b-bottom { /* page block from above / below */
  left: 2px; right: 2px; height: var(--bt);
  transform: rotateX(90deg);
  background: repeating-linear-gradient(0deg, #f2ebd9 0 1px, #ded3b8 1px 2px);
}
.b-top { top: calc(var(--bt) / -2); }
.b-bottom { bottom: calc(var(--bt) / -2); filter: brightness(0.85); }

/* matte lamination sheen — a wide soft band on the cover material that
   drifts with the tilt; not a cursor spotlight */
.b-front .sheen {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(108deg,
    transparent 30%,
    rgba(255, 248, 235, 0.11) 46%,
    rgba(255, 248, 235, 0.05) 56%,
    transparent 70%);
  background-size: 220% 100%;
  background-position-x: var(--sx, 62%);
  transition: background-position 0.25s ease-out;
}
/* spine + paper edge */
.cover::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.38) 0%, rgba(255,255,255,0.10) 2.5%, rgba(0,0,0,0.18) 5%, transparent 9%),
    linear-gradient(270deg, rgba(255,255,255,0.16) 0%, transparent 3%),
    linear-gradient(160deg, rgba(255,255,255,0.10) 0%, transparent 28%);
  border-radius: inherit;
}
.book-meta { padding-left: 4px; }
.book-meta .t {
  font-family: var(--serif-display); font-size: 17px; line-height: 1.15;
  color: #342615;
}
.book-meta .a {
  font-size: 12.5px; font-style: italic; color: #8a6a48; margin-top: 3px;
}

/* ---- cover designs (CSS-built) ---- */

.cover .c-inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  padding: 11% 10%;
}

/* Moby-Dick — deep sea, type stack */
.cover--moby { background: linear-gradient(170deg, #0e2a32 0%, #0a1f28 55%, #071318 100%); }
.cover--moby .c-inner { justify-content: space-between; }
.cover--moby .c-title {
  font-family: var(--serif-display); color: #e9f4f2;
  font-size: clamp(26px, 2.6vw, 34px); line-height: 0.98; letter-spacing: 0.01em;
}
.cover--moby .c-title em { font-style: italic; color: #7fc4bb; }
.cover--moby .c-author {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #9db8b4;
}
.cover--moby .c-wave {
  height: 34%;
  background:
    repeating-radial-gradient(120% 100% at 50% 135%, transparent 0 7px, rgba(127, 196, 187, 0.35) 7px 8px);
  mask-image: linear-gradient(180deg, transparent, #000 35%);
}

/* Alice — coral dream */
.cover--alice { background: linear-gradient(165deg, #e8654a 0%, #d44f3e 60%, #b13a33 100%); }
.cover--alice .c-inner { justify-content: center; gap: 10px; text-align: center; }
.cover--alice .c-title {
  font-family: var(--serif-display); font-style: italic;
  color: #ffe9d6; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.04;
}
.cover--alice .c-rule { width: 38%; height: 1px; background: rgba(255, 233, 214, 0.55); margin: 4px auto; }
.cover--alice .c-author { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #ffc9ad; }
.cover--alice::after {
  content: "❧"; position: absolute; bottom: 7%; left: 0; right: 0; z-index: 2;
  text-align: center; color: rgba(255, 233, 214, 0.7); font-size: 18px;
}

/* Pride & Prejudice — sage frame */
.cover--pride { background: linear-gradient(170deg, #43523f 0%, #36452f 60%, #2a3625 100%); }
.cover--pride .c-inner {
  justify-content: center; text-align: center; gap: 12px;
  margin: 7%;
  border: 1px solid rgba(238, 231, 205, 0.5);
  outline: 1px solid rgba(238, 231, 205, 0.22); outline-offset: 3px;
}
.cover--pride .c-title {
  font-family: var(--serif-display); color: #eee7cd;
  font-size: clamp(20px, 2vw, 27px); line-height: 1.1;
}
.cover--pride .c-amp { font-style: italic; font-size: 1.35em; color: #c9bf95; display: block; line-height: 1.1; }
.cover--pride .c-author { font-size: 10.5px; letter-spacing: 0.24em; text-transform: uppercase; color: #b9b28e; }

/* Metamorphosis — black & amber, brutal */
.cover--meta { background: linear-gradient(175deg, #1c1916 0%, #0f0d0b 100%); }
.cover--meta .c-inner { justify-content: flex-end; gap: 8px; }
.cover--meta .c-title {
  font-family: var(--serif-display);
  color: #f0a83c; font-size: clamp(24px, 2.5vw, 33px); line-height: 0.96;
  text-transform: uppercase; letter-spacing: 0.02em;
  word-break: break-word;
}
.cover--meta .c-author { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: #8f8273; }
.cover--meta::after {
  content: ""; position: absolute; top: 9%; left: 10%; width: 26%; aspect-ratio: 1; z-index: 2;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 35%, #f0a83c, #a85f14 70%, #6e3c0a);
  box-shadow: 0 0 26px rgba(240, 168, 60, 0.35);
}

/* mission, under the shelves */
.mission {
  margin: clamp(160px, 24vh, 300px) auto 0;
  max-width: 860px;
  text-align: center;
}
.mission-crest {
  width: 46px; height: auto;
  margin-bottom: 22px;
}
body.dark .mission-crest { filter: invert(1); } /* moonlit griffin at night */
.mission p {
  font-size: clamp(15px, 1.9vw, 18.5px);
  line-height: 1.55;
  color: #4a3826;
}
body.dark .mission p { color: #c4cfd5; }

.lib-foot {
  margin-top: auto; padding-top: 40px; text-align: center;
  font-size: 12px; font-style: italic; color: rgba(122, 88, 54, 0.65);
}

/* ---------- opener (FLIP + cover hinge) ---------- */

.opener {
  position: fixed; inset: 0; z-index: 20;
  pointer-events: none;
  perspective: 2400px;
}
.opener-book {
  position: absolute; top: 0; left: 0;
  width: var(--page-w); height: var(--page-h);
  transform-origin: top left;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.22s ease;
}
.op-page1 {
  position: absolute; inset: 0;
  background: #f7f3ea;
  border-radius: 3px 7px 7px 3px;
  box-shadow: 0 30px 70px -16px rgba(0, 0, 0, 0.85);
  overflow: hidden;
}
.op-cover {
  position: absolute; inset: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 1.05s cubic-bezier(0.3, 0.75, 0.22, 1);
  will-change: transform;
  border-radius: 3px 7px 7px 3px;
}
/* single-face cover: content swaps when the cover passes edge-on (90°),
   where it's a sliver — avoids backface-visibility, which is unreliable
   on mobile GPUs (faces vanish mid-rotation) */
.op-face {
  position: absolute; inset: 0;
  border-radius: inherit;
  overflow: hidden;
  box-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.7);
}
.op-face .cover { width: 100%; height: 100%; border-radius: inherit; box-shadow: none; aspect-ratio: auto; }
.op-face.inside {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.16) 0%, transparent 12%),
    linear-gradient(255deg, rgba(0,0,0,0.12) 0%, transparent 18%),
    #efe8d8;
  box-shadow: none;
}
.opener-book.is-open .op-cover { transform: rotateY(-179deg); }
.opener-book.fading { opacity: 0; }

/* dynamic shadow swept across page 1 while cover opens */
.op-page1::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(20, 12, 4, 0.5), transparent 55%);
  opacity: 1; transition: opacity 1s ease;
}
.opener-book.is-open .op-page1::after { opacity: 0; }

/* page 1 inside the opener is the real typeset canvas (texture-identical) */
.op-page1 canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* approximates the WebGL spine crease so the handoff matches in spread mode */
.op-gutter {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(58, 44, 26, 0.17) 0%,
    rgba(58, 44, 26, 0.055) 2.5%,
    rgba(58, 44, 26, 0.028) 8%,
    transparent 18%);
}

/* ---------- reader ---------- */

.reader {
  position: fixed; inset: 0; z-index: 30;
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transition: opacity 0.28s ease;
  /* every touch in an open book belongs to the pages: nothing scrolls,
     nothing pinches, nothing rubber-bands (iOS ignores user-scalable=no;
     touch-action is what actually holds) */
  touch-action: none;
  overscroll-behavior: contain;
}
.reader[hidden] { display: none; }
/* the library is frozen behind an open book — no wobble, no scroll-through */
body.reading { overflow: hidden; }
.reader.shown { opacity: 1; }
.reader-dim { position: absolute; inset: 0; } /* darkness comes from .room-dim */

.reader-bar {
  position: relative; z-index: 2;
  width: 100%; max-width: 980px;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 18px 10px;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.65s ease 0.18s, transform 0.65s ease 0.18s;
}
.reader.shown .reader-bar { opacity: 1; transform: none; }
.reader-close {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 4px;
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--cream-dim); font-family: var(--serif-text); font-style: italic; font-size: 15px;
  padding: 6px 10px 6px 2px; border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s ease;
}
.reader-close:hover { color: var(--cream); }
.reader-title {
  font-family: var(--serif-display); font-size: 17px; color: var(--cream);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
}
.reader-pageno { justify-self: end; font-size: 13px; font-style: italic; color: var(--cream-dim); }

.stage {
  position: relative; z-index: 1;
  flex: 1; width: 100%;
  min-height: 0; /* canvas must not stretch the stage — it overflows, centered */
  display: flex; align-items: center; justify-content: center;
  touch-action: none; /* fingers turn pages; the browser gets nothing */
}
.page-shadow {
  position: absolute;
  width: var(--book-w); height: var(--page-h);
  border-radius: 3px;
  box-shadow:
    0 34px 80px -12px rgba(0, 0, 0, 0.85),
    0 10px 28px rgba(0, 0, 0, 0.55);
  background: #0d0a08;
}
#gl {
  position: absolute; z-index: 2;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  touch-action: none;
  cursor: grab;
  display: block;
}
#gl.grabbing { cursor: grabbing; }

.reader-hint {
  position: relative; z-index: 2;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
  font-size: 12.5px; font-style: italic; color: rgba(207, 196, 174, 0.6);
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.65s ease 0.35s, transform 0.65s ease 0.35s;
}
.reader.shown .reader-hint:not(.gone) { opacity: 1; transform: none; }
.reader-hint.gone { opacity: 0; transition-delay: 0s; }

/* full-bleed reader (mobile, Apple Books-style): paper fills the screen, chrome floats on it */
.reader.fullbleed .reader-dim { background: #0d0a08; backdrop-filter: none; }
body.dark .reader.fullbleed .reader-dim { background: #2e3438; }
.reader.fullbleed .stage { position: absolute; inset: 0; }
.reader.fullbleed .page-shadow { box-shadow: none; background: #f7f3ea; }
.reader.fullbleed .reader-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
/* the bar reads the art behind it: ink on light pages (with a soft paper
   halo), cream on dark pages (with a soft shadow halo) — set by JS */
.reader.fullbleed .reader-close { color: #6b6051; }
.reader.fullbleed .reader-close:hover { color: #2c2620; }
.reader.fullbleed .reader-title { color: #2c2620; }
.reader.fullbleed .reader-pageno { color: #8a7f6d; }
.reader.fullbleed .reader-title,
.reader.fullbleed .reader-pageno,
.reader.fullbleed .reader-close {
  text-shadow: 0 0 6px rgba(255, 248, 236, 0.65), 0 1px 10px rgba(255, 248, 236, 0.5);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.reader.fullbleed.bar-light .reader-close { color: rgba(255, 246, 232, 0.88); }
.reader.fullbleed.bar-light .reader-close:hover { color: #fff6e8; }
.reader.fullbleed.bar-light .reader-title { color: #fff6e8; }
.reader.fullbleed.bar-light .reader-pageno { color: rgba(255, 246, 232, 0.75); }
.reader.fullbleed.bar-light .reader-title,
.reader.fullbleed.bar-light .reader-pageno,
.reader.fullbleed.bar-light .reader-close {
  text-shadow: 0 0 6px rgba(24, 16, 8, 0.55), 0 1px 10px rgba(24, 16, 8, 0.45);
}
.reader.fullbleed .reader-hint {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 5;
  text-align: center; color: rgba(90, 80, 64, 0.6);
}

@media (max-width: 560px) {
  .library { padding: 44px 22px 90px; }
  /* hero sits higher so the pitch title peeks above the fold */
  .lib-head { margin-bottom: clamp(40px, 6vh, 64px); }
  .pitch-title { margin-top: clamp(20px, 3.5vh, 38px); }
  .hero-title { font-size: 36px; line-height: 1.24; margin-top: 130px; }
  /* the rotating word owns line three, so the layout never shifts */
  .hero-word { display: block; width: fit-content; margin: 0.22em auto 0; padding: 0.02em 0.2em; }
  .lib-sub { margin-top: 26px; font-size: 14.5px; padding: 0 8px; }
  .lib-sec { margin-top: 180px; }
  .sec-title { font-size: 28px; padding: 0 10px; }
  /* landing prose + method on phones: stacked, generous, never cramped */
  .prose-sec { margin-top: 130px; padding: 0 4px; }
  .prose-h { font-size: 31px; line-height: 1.16; }
  .prose-lede { font-size: 17px; padding: 0 4px; }
  .prose-body { font-size: 16px; padding: 0 6px; }
  /* phones: every row stacks — illustration on top, text below, centered */
  .method { margin-top: 180px; }
  .method-rows { margin-top: 56px; gap: 84px; }
  .method-row, .method-row--rev { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .method-row--rev .method-fig, .method-row .method-fig { order: 0; }
  .method-row--rev .method-txt, .method-row .method-txt { order: 1; justify-self: center; max-width: 380px; margin: 0 auto; }
  .method-fig img { max-width: min(360px, 78vw); }
  .method-h { font-size: 25px; }
  .method-cap { font-size: 16.5px; }
  .maker-photo { width: min(260px, 70vw); }
  .up-row { gap: 26px; }
  .up-tome { width: 130px; }
  /* source library: two tomes per row on phones */
  .source-sec .up-row { gap: 34px 18px; flex-wrap: wrap; }
  .source-sec .up-tome { width: clamp(120px, 38vw, 158px); }
  /* the centered header tome wants a comfortable size on phones */
  .col-head-tomelink { width: min(46vw, 172px); }
  /* phones: one per row, every book centered in its column (not just the last) */
  .feat-row { grid-template-columns: minmax(240px, 340px); justify-content: center; justify-items: center; }
  .feat-book { width: min(300px, 76vw); text-align: center; }
  .lib-ctas { flex-direction: column; align-items: center; gap: 14px; margin-top: 56px; }
  .cta {
    width: min(320px, 82vw);
    padding: 17px 0;
    font-size: 18px;
    text-align: center;
  }
  /* phones: one big book per row — they are the show */
  .shelf, .shelf--square { grid-template-columns: minmax(240px, 340px); gap: 64px; }
  .shelf.shelf--single { grid-template-columns: minmax(240px, 340px); }
  .shelf-label { margin: 56px 0 40px; }
  .src { flex-direction: column; gap: 36px; text-align: center; }
  .src-info { text-align: center; }
  .src-values { justify-content: center; }
  .tome { width: 180px; }
  .col-card { flex-direction: column; gap: 34px; text-align: center; padding: 26px 8px; }
  .col-card + .col-card { margin-top: 56px; }
  .col-info { text-align: center; }
  .col-tome { width: 170px; }
  /* the nav sits below the brand on phones; the back link clears them both */
  .back-puck { margin: 116px 0 8px; width: 44px; height: 44px; }
  .collection { margin-top: 90px; }
  .mission { margin-top: 150px; }
  .mission p { padding: 0 6px; }
  .reader-title { font-size: 15px; }
}

/* ---------- night mode ---------- */

html { color-scheme: light; }
body { transition: background-color 0.9s ease, color 0.6s ease; }
/* html carries the theme too: iOS paints its browser chrome and the
   overscroll areas from the root background */
html.dark { background: #3e4448; color-scheme: dark; }
body.dark { background: #3e4448; color: #dfe6e9; }

.room-light { transition: opacity 0.9s ease; }
body.dark .room-light { opacity: 0; }

.night-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(110vmax 70vmax at 18% -10%, rgba(220, 230, 238, 0.1), transparent 55%),
    linear-gradient(180deg, #454c51 0%, #3e4448 48%, #353b3f 100%);
  opacity: 0; transition: opacity 0.9s ease;
}
body.dark .night-sky { opacity: 1; }

.moon {
  position: absolute; top: -8vmax; left: -7vmax;
  width: 26vmax; aspect-ratio: 1;
  /* the asset is a transparent PNG with its own glow — no crop, no halo */
  /* rises gently into the corner with the night, sets with the day */
  transform: translate(-55%, -55%) rotate(-8deg);
  transition: transform 1.6s cubic-bezier(0.22, 0.8, 0.3, 1);
}
body.dark .moon { transform: translate(0, 0) rotate(0deg); }
.moon img { width: 100%; height: 100%; object-fit: contain; }

#stars { position: absolute; inset: 0; }
#stars .star {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #eef3f6;
  opacity: 0.05;
  animation: twinkle var(--tw, 3.5s) ease-in-out var(--td, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.05; }
  50% { opacity: var(--tb, 0.7); }
}

body.dark .lib-over, body.dark .shelf-label { color: #9fb0b9; }
body.dark .lib-title {
  background: linear-gradient(175deg, #f5f8fa 20%, #c4d0d6 60%, #8ea0a9 100%);
  -webkit-background-clip: text; background-clip: text;
}
body.dark .lib-sub { color: #93a4ad; }
body.dark .book-meta .t { color: #e9eef1; }
body.dark .book-meta .a { color: #9fb0b9; }
body.dark .lib-foot { color: rgba(159, 176, 185, 0.55); }
body.dark .book:focus-visible { outline-color: rgba(190, 205, 214, 0.5); }
body.dark .b-shadow {
  box-shadow:
    0 100px 200px rgba(8, 10, 12, 0.6),
    0 100px 200px rgba(8, 10, 12, 0.45),
    0 36px 70px -8px rgba(8, 10, 12, 0.45);
}
body.dark .book:hover .b-shadow {
  box-shadow:
    0 120px 220px rgba(8, 10, 12, 0.68),
    0 120px 220px rgba(8, 10, 12, 0.5),
    0 44px 84px -8px rgba(8, 10, 12, 0.52);
}

/* corner brand: crest + boxed wordmark (Zilla Slab Highlight carves the
   letters out of solid blocks, like the reference slides) */
.brand {
  position: fixed; top: 16px; left: 20px; z-index: 15;
  display: flex; align-items: center; gap: 9px;
  transition: opacity 0.4s ease;
  text-decoration: none; /* on the collection page the brand is a link home */
  -webkit-tap-highlight-color: transparent;
}
body.reading .brand { opacity: 0; pointer-events: none; }
.brand img { width: 45px; height: auto; }
.brand-name {
  font-family: "Zilla Slab Highlight", serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: #17150f;
}
body.dark .brand-name { color: #14171a; }
@media (max-width: 560px) {
  .brand img { width: 37px; }
  .brand-name { font-size: 15.5px; }
}

/* the toggle: a little day / night capsule */
.theme-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 15;
  transition: opacity 0.4s ease;
}
body.reading .theme-toggle { opacity: 0; pointer-events: none; }
.theme-toggle {
  width: 64px; height: 32px; border-radius: 999px;
  border: 1px solid rgba(90, 60, 30, 0.25);
  background: rgba(255, 255, 255, 0.35);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 9px;
  font-size: 14px; line-height: 1;
  color: #7a5836;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.5s ease, border-color 0.5s ease, color 0.5s ease, opacity 0.4s ease;
}
.tt-knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(160deg, #fff6e6, #f0d9b8);
  box-shadow: 0 2px 6px rgba(60, 35, 10, 0.3);
  transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.4, 1), background 0.5s ease;
}
body.dark .theme-toggle {
  background: rgba(20, 24, 27, 0.45);
  border-color: rgba(200, 215, 224, 0.22);
  color: #b9c7cf;
}
body.dark .tt-knob {
  transform: translateX(32px);
  background: linear-gradient(160deg, #dfe7ec, #aebbc3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* phones: the corner chrome belongs to the top of the page, not the
   viewport — it scrolls away with the header (desktop keeps it pinned) */
@media (max-width: 560px) {
  .brand, .theme-toggle { position: absolute; }
  /* the nav slips below the brand row and scrolls with the page */
  .topnav { position: absolute; top: 106px; }
  /* the filter tabs start well below the stacked chrome */
  .lib-tabs { margin: 150px 0 90px; gap: 10px; }
  .lib-tab { font-size: 15px; padding: 7px 16px 8px; }
  /* phones: title, description and chips ABOVE; then the big tappable tome;
     then the collection button; then the little books — everything sharing
     one left edge with the sample book */
  .colrow {
    display: flex; flex-direction: column;
    align-items: flex-start;
    gap: 0;
    text-align: left;
  }
  .colrow-main { display: contents; }
  .colrow-main > * { order: 1; }
  .colrow-tomelink { order: 2; padding: 34px 0 6px; align-self: flex-start; }
  .colrow-tome.tome { width: min(64vw, 250px); height: auto; }
  /* the strip runs truly edge to edge (the explicit width must include the
     negative margins, or the scroll window clips early) */
  .colrow-main .colrow-strip { order: 3; width: calc(100% + 140px); }
  .colrow-main .src-title { font-size: 30px; }
  .colrow-main .src-blurb { margin-top: 12px; max-width: 480px; }
  .colrow-main .src-values { justify-content: flex-start; }
  /* the collection button sits UNDER the little books, closing the family */
  .colrow-main .colrow-open {
    order: 4;
    margin: 4px 0 0;
    font-family: "Zilla Slab", Georgia, serif;
    font-size: 16px;
    border: 1px solid #241a0f;
    border-radius: 2px;
    padding: 13px 28px;
    color: #241a0f;
  }
  .colrow-main .colrow-open .col-arrow { margin-left: 2px; }
  body.dark .colrow-main .colrow-open { border-color: #dfe6e9; color: #dfe6e9; }
  .colrow-main .colrow-strip {
    justify-content: flex-start;
    margin: -10px -70px -170px -70px;
    padding: 56px 70px 210px 70px;
  }
  .strip-book { width: 150px; }
}

/* ════════ Landing rebuild — Pass A (Hallmark rhythm) ════════ */

/* §1 hero trust microline */
.hero-trust { margin-top: 20px; font-size: 12.5px; letter-spacing: 0.14em; color: #a37c52; }
.hero-trust span { opacity: 0.5; margin: 0 6px; }
body.dark .hero-trust { color: #93a4ad; }

/* §2 the problem — full-bleed dark band (stays dark in both themes; it IS the screen) */
.problem {
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: clamp(96px, 15vh, 190px);
  padding: clamp(84px, 15vh, 156px) clamp(22px, 6vw, 64px);
  background: #2a2f33;
  text-align: center;
}
.problem-line {
  max-width: 900px; margin: 0 auto;
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(28px, 4.4vw, 54px); line-height: 1.16; color: #eef2f4;
}
.problem-line em { font-style: italic; color: #e0a06f; }
.problem-turn {
  margin-top: clamp(24px, 4vh, 42px);
  font-family: var(--serif-text); font-style: italic;
  font-size: clamp(17px, 2vw, 23px); color: #aebbc4;
}

/* §4 two formats — asymmetric, print weighted larger */
.formats { margin: clamp(140px, 22vh, 280px) auto 0; max-width: 1020px; }
.formats-head { text-align: center; }
.formats-grid {
  margin-top: clamp(44px, 7vh, 76px);
  display: grid; grid-template-columns: 1fr 1.18fr; gap: clamp(24px, 3.5vw, 44px);
  align-items: stretch;
}
.format-card {
  display: flex; flex-direction: column; text-align: left;
  padding: clamp(26px, 3vw, 40px);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  box-shadow: 0 2px 4px rgba(74, 50, 24, 0.08), 0 34px 64px -28px rgba(74, 50, 24, 0.32);
}
.format-icon { width: 44px; height: 44px; color: #a37c52; margin-bottom: 20px; }
.format-icon svg { width: 100%; height: 100%; display: block; }
.format-photo {
  margin: calc(-1 * clamp(26px, 3vw, 40px)) calc(-1 * clamp(26px, 3vw, 40px)) clamp(22px, 3vh, 28px);
  border-radius: 16px 16px 0 0; overflow: hidden; aspect-ratio: 4 / 3;
}
.format-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.format-name { font-family: var(--serif-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); color: #241a0f; margin-bottom: 12px; }
.format-copy { font-family: var(--serif-text); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.6; color: #6b513a; margin-bottom: clamp(22px, 3vh, 30px); flex: 1; }
.format-card .cta { align-self: flex-start; margin-top: auto; }
body.dark .format-card { background: rgba(231, 237, 240, 0.05); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 34px 64px -28px rgba(0,0,0,0.5); }
body.dark .format-name { color: #e7edf0; }
body.dark .format-copy { color: #aebbc4; }
body.dark .format-icon { color: #9fb0b9; }

/* §6 bedtime — warm dusk band, offset split */
.bedtime {
  width: 100vw; margin-left: calc(50% - 50vw);
  margin-top: clamp(140px, 22vh, 280px);
  padding: clamp(70px, 11vh, 132px) clamp(22px, 6vw, 80px);
  background: linear-gradient(180deg, #f3dcc0, #eecda8);
}
.bedtime-inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.bedtime-copy { margin-top: 18px; font-family: var(--serif-text); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #6b4a2f; }
.bedtime-text .cta { margin-top: clamp(26px, 4vh, 38px); }
.bedtime-art { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1; box-shadow: 0 34px 64px -26px rgba(74, 50, 24, 0.45); }
.bedtime-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.dark .bedtime { background: linear-gradient(180deg, #3a342c, #2e2a24); }
body.dark .bedtime-copy { color: #d8c4a8; }

/* §7 head-start payoff — stark line + triptych */
.payoff { margin: clamp(140px, 22vh, 280px) auto 0; max-width: 920px; text-align: center; }
.payoff-trio { margin-top: clamp(44px, 7vh, 76px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.payoff-n { display: block; font-family: var(--serif-display); font-size: clamp(19px, 2vw, 25px); color: #241a0f; margin-bottom: 10px; }
.payoff-item p { font-family: var(--serif-text); font-size: clamp(14.5px, 1.5vw, 16.5px); line-height: 1.55; color: #6b513a; }
body.dark .payoff-n { color: #e7edf0; }
body.dark .payoff-item p { color: #aebbc4; }

/* §8 library extras */
.library-sec { text-align: center; }
.library-sec .feat-row { margin-top: clamp(40px, 6vh, 64px); }
.library-pedigree { margin: clamp(80px, 12vh, 140px) auto clamp(30px, 5vh, 46px); font-style: italic; color: #a37c52; font-size: clamp(14px, 1.5vw, 16px); }
.library-cta { display: inline-block; margin-top: clamp(44px, 7vh, 70px); }
body.dark .library-pedigree { color: #9fb0b9; }

/* §9 founding families — quiet hairline band */
.founding { margin: clamp(130px, 20vh, 260px) auto 0; max-width: 660px; text-align: center; padding: clamp(40px, 6vh, 64px) clamp(22px, 4vw, 40px); border-top: 1px solid rgba(122, 88, 54, 0.2); border-bottom: 1px solid rgba(122, 88, 54, 0.2); }
.founding-line { font-family: var(--serif-display); font-size: clamp(22px, 2.6vw, 32px); color: #241a0f; line-height: 1.22; }
.founding-sub { margin-top: 14px; font-family: var(--serif-text); font-style: italic; color: #8a6a48; font-size: clamp(15px, 1.6vw, 17px); }
body.dark .founding { border-color: rgba(200, 215, 224, 0.16); }
body.dark .founding-line { color: #e7edf0; }
body.dark .founding-sub { color: #93a4ad; }

/* §10 pricing plans */
.pricing .price-line { max-width: 540px; margin: clamp(18px, 3vh, 26px) auto 0; font-family: var(--serif-text); font-size: clamp(15px, 1.6vw, 17.5px); line-height: 1.6; color: #4a3826; }
body.dark .pricing .price-line { color: #c4cfd5; }
.plans { margin: clamp(40px, 6vh, 64px) auto 0; display: grid; grid-template-columns: repeat(2, minmax(0, 248px)); gap: clamp(20px, 3vw, 30px); justify-content: center; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(28px, 3vw, 38px) clamp(22px, 2.5vw, 30px); border-radius: 16px; border: 1px solid rgba(122, 88, 54, 0.25); background: rgba(255, 255, 255, 0.3); }
.plan--feature { border-color: #161310; box-shadow: 0 2px 4px rgba(74, 50, 24, 0.1), 0 30px 56px -26px rgba(74, 50, 24, 0.34); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #161310; color: #ffe9d2; font-family: var(--serif-display); font-size: 13px; padding: 3px 12px 4px; border-radius: 999px; white-space: nowrap; }
.plan-name { font-family: var(--serif-text); font-style: italic; color: #a37c52; font-size: 14px; letter-spacing: 0.08em; }
.plan-price { font-family: var(--serif-display); font-size: clamp(40px, 5vw, 58px); color: #241a0f; line-height: 1; margin: 8px 0 2px; }
.plan-per { font-family: var(--serif-text); font-style: italic; font-size: 13.5px; color: #8a6a48; }
.plan-note { margin-top: 10px; font-family: var(--serif-text); font-size: 13.5px; line-height: 1.45; color: #6b513a; }
.plan .cta { margin-top: clamp(20px, 3vh, 28px); }
body.dark .plan { border-color: rgba(200, 215, 224, 0.22); background: rgba(231, 237, 240, 0.04); }
body.dark .plan--feature { border-color: #e9eef1; }
body.dark .plan-badge { background: #e9eef1; color: #2c3236; }
body.dark .plan-price { color: #e7edf0; }
body.dark .plan-note { color: #aebbc4; }

/* §11 gift — compact warm band */
.gift { width: 100vw; margin-left: calc(50% - 50vw); margin-top: clamp(120px, 18vh, 220px); padding: clamp(64px, 10vh, 120px) clamp(22px, 6vw, 80px); background: linear-gradient(180deg, #f4ddc2, #eccfab); }
.gift-inner { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.gift-copy { margin-top: 16px; font-family: var(--serif-text); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; color: #6b4a2f; }
.gift-ctas { margin-top: clamp(24px, 4vh, 36px); display: flex; gap: 14px; flex-wrap: wrap; }
.gift-art { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 34px 64px -26px rgba(74, 50, 24, 0.45); }
.gift-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.dark .gift { background: linear-gradient(180deg, #3a342c, #2e2a24); }
body.dark .gift-copy { color: #d8c4a8; }

/* §12 FAQ — left-aligned accordion */
.faq { margin: clamp(130px, 20vh, 260px) auto 0; max-width: 720px; }
.faq > .prose-h { text-align: center; margin-bottom: clamp(40px, 6vh, 64px); }
.faq-item { border-top: 1px solid rgba(122, 88, 54, 0.2); }
.faq-item:last-child { border-bottom: 1px solid rgba(122, 88, 54, 0.2); }
.faq-item summary { cursor: pointer; list-style: none; position: relative; padding: clamp(20px, 3vh, 28px) 42px clamp(20px, 3vh, 28px) 0; font-family: var(--serif-display); font-size: clamp(18px, 2vw, 23px); color: #241a0f; -webkit-tap-highlight-color: transparent; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-family: var(--serif-text); color: #a37c52; font-size: 26px; line-height: 1; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { padding: 0 42px clamp(22px, 3vh, 28px) 0; font-family: var(--serif-text); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.62; color: #6b513a; }
body.dark .faq-item { border-color: rgba(200, 215, 224, 0.16); }
body.dark .faq-item summary { color: #e7edf0; }
body.dark .faq-item p { color: #aebbc4; }

/* scroll-reveal cadence — sections rise in as they enter view.
   JS-free via scroll-driven timelines; where unsupported, content is fully
   visible (the opacity:0 only applies inside the @supports block). */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* NOTE: .method is intentionally excluded — its illustrations use
       mix-blend-mode: multiply, which a reveal transform would isolate
       (stacking context), making the white sketch paper stop dissolving. */
    #library > .problem,
    #library > .formats,
    #library > .bedtime,
    #library > .payoff,
    #library > .library-sec,
    #library > .founding,
    #library > .pricing,
    #library > .gift,
    #library > .faq {
      animation: reveal-rise linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 16%;
    }
  }
}
@keyframes reveal-rise {
  from { opacity: 0; transform: translateY(26px); }
  to { opacity: 1; transform: none; }
}

/* ── mobile (Pass A sections) ── */
@media (max-width: 560px) {
  .problem { margin-top: 110px; padding: 84px 22px; }
  .formats { margin-top: 150px; }
  .formats-grid { grid-template-columns: 1fr; gap: 20px; }
  .bedtime { margin-top: 150px; padding: 80px 22px; }
  .bedtime-inner { grid-template-columns: 1fr; gap: 28px; }
  .bedtime-art { order: -1; }
  .payoff { margin-top: 150px; }
  .payoff-trio { grid-template-columns: 1fr; gap: 30px; }
  .library-pedigree { margin-top: 96px; }
  .founding { margin-top: 130px; }
  .plans { grid-template-columns: 1fr; max-width: 320px; }
  .gift { margin-top: 130px; padding: 64px 22px; }
  .gift-inner { grid-template-columns: 1fr; gap: 28px; }
  .gift-art { order: -1; }
  .faq { margin-top: 130px; }
}