/* Anchor Point Publishing — Press Hub
   Dark literary press. Navy/black, antique gold, serif.
*/

/* ---------- Tokens ---------- */
:root {
  /* Surfaces — deep navy/near-black */
  --ink-0: #07090F;          /* deepest */
  --ink-1: #0B0E16;          /* page background */
  --ink-2: #11151F;          /* surface */
  --ink-3: #161B27;          /* surface alt / cards */
  --ink-4: #1E2434;          /* elevated */
  --rule: #2A3146;           /* hairline borders */
  --rule-soft: #1A2030;

  /* Text */
  --text: #E7E3D6;           /* warm parchment */
  --text-soft: #BFB9A7;
  --text-muted: #8C8773;
  --text-faint: #5F5B4E;

  /* Antique gold — restrained */
  --gold: #C9A24A;
  --gold-soft: #B89240;
  --gold-deep: #8A6E2E;
  --gold-glow: rgba(201, 162, 74, 0.18);

  /* Type */
  --serif-display: "Cormorant Garamond", "EB Garamond", Georgia, "Times New Roman", serif;
  --serif-body: "EB Garamond", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Spacing scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  /* Layout */
  --container: 1180px;
  --container-narrow: 760px;

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --text-xs: 0.72rem;
  --text-sm: 0.86rem;
  --text-base: 1rem;
  --text-lg: 1.18rem;
  --text-xl: clamp(1.35rem, 2vw, 1.7rem);
  --text-2xl: clamp(1.9rem, 3.4vw, 2.8rem);
  --text-3xl: clamp(2.4rem, 5.4vw, 4.2rem);
}

/* ---------- Reset / Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink-1);
  color: var(--text);
  font-family: var(--serif-body);
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "onum" 1, "kern" 1;
  opacity: 0;
  animation: pageFadeIn 260ms var(--ease-premium) forwards;
}

body.book-preview-fullscreen {
  overflow: hidden;
}

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

a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 74, 0.35);
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 0 1px;
  background-position: 0 100%;
  transition: color 180ms var(--ease), border-color 180ms var(--ease), background-size 220ms var(--ease-premium);
}
a:hover { color: #E1BE6A; border-bottom-color: var(--gold); background-size: 100% 1px; }
a:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Headings */
h1, h2, h3, h4 {
  font-family: var(--serif-display);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--text);
  margin: 0 0 var(--space-4);
  line-height: 1.15;
  text-wrap: balance;
  font-feature-settings: "liga" 1, "dlig" 1, "kern" 1;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 500; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); }

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

/* Utility: small uppercase eyebrow in sans */
.eyebrow {
  font-family: var(--sans-ui);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-caps: all-small-caps;
  font-feature-settings: "smcp" 1, "c2sc" 1, "kern" 1;
  color: var(--gold);
  margin: 0 0 var(--space-5);
}

@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }
body.is-leaving { animation: pageFadeOut 220ms var(--ease-premium) forwards; }
@keyframes pageFadeOut { to { opacity: 0; } }

.eyebrow.muted { color: var(--text-muted); }

/* ---------- Layout helpers ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.narrow {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
}
.section { padding: var(--space-9) 0; border-top: 1px solid var(--rule-soft); }
.section.no-rule { border-top: 0; }
.section.tight { padding: var(--space-8) 0; }

/* Shared closed-panel treatment. Keeps call-outs/cards visually complete
   across the homepage, Woven pages, and educator pages. */
.future-card,
.signup-form,
.form-status,
.stub-notice,
.callout,
.educator-panel,
.facts-grid div,
.timeline-grid div,
.theme-grid div,
.prompt-cluster,
.download-card,
.resource-card,
.access-note,
.download-thanks,
.quote-placeholder,
.comparison-table,
.series-card,
.woven-excerpt,
.founding-form {
  border: 1px solid var(--rule);
  border-radius: 0;
  box-sizing: border-box;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--ink-0);
  padding: 0.6rem 1rem;
  font-family: var(--sans-ui);
  font-weight: 600;
  z-index: 1000;
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 9, 15, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule-soft);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.9rem clamp(1rem, 3vw, 2.5rem);
  width: 100%;
  gap: var(--space-5);
}
.nav-brand {
  margin-right: auto; /* push every other nav child to the right edge */
  display: inline-flex;
  align-items: center;
  gap: 0;
  border-bottom: 0;
  color: var(--text);
  text-decoration: none;
}
.nav-brand:hover { opacity: 0.92; }
.nav-brand .brand-mark {
  width: 58px;
  height: auto;
  display: block;
}
.nav-brand .brand-name {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

.nav-links {
  display: flex;
  gap: var(--space-6);
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-family: var(--sans-ui);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
  border-bottom: 0;
  position: relative;
  background-image: none;
}
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.35rem;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 220ms var(--ease-premium);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--text);
  padding: 0.45rem 0.7rem;
  font-family: var(--sans-ui);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}

/* ---- Language toggle (EN · ES) ----
   Sits at the right edge of the primary nav.
   Treats the inactive language as a quiet sibling and the active one
   as the visible current state. Matches the nav's Inter-uppercase
   register but at a smaller size, so it never competes with the
   primary menu items. */
.nav-lang {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-lang a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 0;
  background-image: none;
  padding: 0.25rem 0.15rem;
  transition: color 220ms var(--ease-premium);
}
.nav-lang a:hover,
.nav-lang a:focus-visible {
  color: var(--gold);
}
.nav-lang a[aria-current="true"] {
  color: var(--text);
  cursor: default;
}
.nav-lang-sep {
  color: var(--rule);
  font-weight: 400;
  user-select: none;
}
/* Desktop: nav-lang sits to the right of nav-links (after the menu items).
   On mobile, nav-links is absolute-positioned overlay so order is moot;
   nav-lang naturally sits between brand and the Menu button per DOM order. */
@media (min-width: 761px) {
  .nav-lang { order: 2; }
  .nav-links { order: 1; }
}

@media (max-width: 760px) {
  .nav-links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--ink-0);
    border-bottom: 1px solid var(--rule-soft);
    padding: var(--space-3) 0;
  }
  .nav-links.is-open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a {
    display: block;
    padding: 0.8rem var(--space-5);
    width: 100%;
  }
  .nav-toggle { display: inline-block; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  font-family: var(--sans-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  color: var(--gold);
  background: transparent;
  border-radius: 0;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover {
  background: var(--gold);
  color: var(--ink-0);
  box-shadow: 0 0 0 1px rgba(201,162,74,0.16), 0 0 34px var(--gold-glow);
  transform: translateY(-2px);
}
.btn.is-loading {
  position: relative;
  color: transparent;
  pointer-events: none;
}
.btn.is-loading::after {
  content: "";
  width: 0.9rem;
  height: 0.9rem;
  border: 1px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  position: absolute;
  left: calc(50% - 0.45rem);
  top: calc(50% - 0.45rem);
  color: var(--gold);
  animation: spin 780ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.btn.btn-ghost {
  border-color: var(--rule);
  color: var(--text-soft);
}
.btn.btn-ghost:hover {
  background: transparent;
  color: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
}
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: clamp(660px, 82vh, 860px);
  padding: clamp(7rem, 12vw, 12rem) 0 clamp(7rem, 11vw, 11rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  border-top: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(201,162,74,0.07), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(30,40,80,0.5), transparent 70%);
  pointer-events: none;
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  transition: transform 60ms linear;
}
.hero-inner {
  position: relative;
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 var(--space-5);
}
.hero-logo {
  width: clamp(150px, 18vw, 215px);
  margin: 0 auto clamp(3.5rem, 6vw, 5.25rem);
  display: block;
}
.hero-sub {
  font-family: var(--serif-body);
  font-size: clamp(1.1rem, 1.75vw, 1.35rem);
  color: var(--text-soft);
  max-width: 540px;
  margin: 0 auto var(--space-6);
  line-height: 1.75;
}
.hero-cta { display: inline-flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

/* Hero rule */
.gold-rule {
  height: 1px;
  width: 64px;
  background: var(--gold);
  margin: 0 auto var(--space-7);
  opacity: 0.7;
}

/* ---------- Section header ---------- */
.section-head {
  text-align: center;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lead {
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.75;
  max-width: 620px;
  margin: 0 auto;
}

/* ---------- Woven section ---------- */
.woven-section {
  position: relative;
  padding: clamp(8rem, 12vw, 12rem) 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,162,74,0.05), transparent 60%),
    var(--ink-2);
}
/* Pull every child of the section into one centered column so the
   eyebrow, h2, hook, trust-line, and button all share the same
   horizontal centre axis (no width hop between section-head and card). */
.woven-section .section-head,
.woven-card {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.woven-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.woven-hook {
  font-family: var(--serif-display);
  font-size: clamp(1.35rem, 2.25vw, 1.82rem);
  line-height: 1.58;
  color: var(--text);
  font-style: italic;
  margin-bottom: var(--space-7);
  max-width: 720px; /* tighter measure for the hook itself */
}
.trust-line {
  font-family: var(--sans-ui);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-7);
  max-width: 620px;
}

/* ---------- Catalog / Book object ---------- */
.catalog-section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
}

.catalog-section .section-head {
  text-align: left;
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}

.catalog-section .section-head .lead {
  margin-left: 0;
}

.catalog-grid {
  display: grid;
  grid-template-columns: minmax(500px, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 1140px;
  margin: 0 auto;
}
.catalog-grid--secondary {
  margin-top: clamp(4rem, 8vw, 7rem);
  border-top: 1px solid var(--rule-soft);
  padding-top: clamp(4rem, 8vw, 7rem);
}
/* Alternate the second row so book sits on the right, meta on left. */
.catalog-grid--secondary:nth-of-type(odd) {
  grid-template-columns: minmax(0, 0.85fr) minmax(500px, 1.15fr);
}
.catalog-grid--secondary:nth-of-type(odd) .book-object { order: 2; }
.catalog-grid--secondary:nth-of-type(odd) .book-meta   { order: 1; }
@media (max-width: 820px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-grid--secondary,
  .catalog-grid--secondary:nth-of-type(odd) { grid-template-columns: 1fr; }
  .catalog-grid--secondary:nth-of-type(odd) .book-object { order: 0; }
  .catalog-grid--secondary:nth-of-type(odd) .book-meta   { order: 0; }
}

.book-object {
  position: relative;
  display: grid;
  /* Force the implicit column to track the container width.
     Without this, the track auto-sizes to max-content of children
     (which use width: min(100%, 560px)), so at parent cell widths
     below 560px the .book-stage, .book-controls, and .book-hint
     overflow the cell to the right and the hint visually drifts
     off-center under the cover. */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: var(--space-4);
  perspective: 1800px;
  padding: 0;
}

/* Catalog covers — every book in #catalog renders at IDENTICAL
   dimensions, whatever the wrapper (.book-link as anchor for Books 1/2,
   .book-link--static as div for Book Three). We constrain on the img
   itself so the result is deterministic regardless of whether the
   span ends up inline or block in the document flow. */
#catalog .book-object .book {
  display: inline-block;
  width: 100%;
  max-width: 460px;
}
#catalog .book-object .book img {
  display: block;
  width: 100%;
  height: auto;
}
.book-link,
.book-link--static {
  display: block;
  text-decoration: none;
  width: 100%;
  text-align: center;
}

.book-stage {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  perspective: 1800px;
  transition: width 700ms var(--ease), transform 700ms var(--ease);
}
.book-stage:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
}

.book-closed,
.book-spread {
  grid-area: 1 / 1;
  width: 100%;
  display: block;
}

.book-closed {
  max-width: 340px;
  transform-style: preserve-3d;
  transition: opacity 620ms var(--ease), transform 1120ms cubic-bezier(0.16, 1, 0.3, 1), filter 700ms var(--ease);
}

.book-object .book {
  position: relative;
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  transform: rotateY(-6deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 700ms var(--ease);
}
.book-object.is-open .book {
  transform: rotateY(-3deg) rotateX(1deg) translateY(-3px);
}
.book-object .book img {
  width: 100%;
  display: block;
  box-shadow:
    -2px 0 0 rgba(0,0,0,0.6),
    0 30px 50px -20px rgba(0,0,0,0.85),
    0 60px 80px -30px rgba(0,0,0,0.6);
  border-radius: 1px;
}
.book-object .book::after {
  content: none;
}

.book-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: min(100%, 560px);
  aspect-ratio: 4 / 3;
  opacity: 0;
  transform: rotateX(4deg) rotateY(13deg) translateY(18px) scale(0.9);
  transform-style: preserve-3d;
  transition: opacity 760ms var(--ease), transform 1120ms cubic-bezier(0.16, 1, 0.3, 1);
  filter:
    drop-shadow(0 28px 42px rgba(0,0,0,0.55))
    drop-shadow(0 70px 70px rgba(0,0,0,0.35));
}

.book-object.is-open .book-closed {
  opacity: 0;
  transform: rotateY(-116deg) translateX(-38%) scale(0.9);
  filter: blur(0.4px);
  pointer-events: none;
}

.book-object.is-open .book-spread {
  opacity: 1;
  transform: rotateX(1deg) rotateY(-2deg) translateY(0) scale(1);
}

.book-object.is-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  gap: var(--space-5);
  padding: clamp(1.25rem, 3vw, 3rem);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(201,162,74,0.08), transparent 42%),
    rgba(3,5,10,0.96);
  backdrop-filter: blur(10px);
}

.book-object.is-fullscreen .book-stage {
  width: min(92vw, 1120px);
  max-height: 78vh;
}

.book-object.is-fullscreen .book-spread {
  width: min(92vw, 1120px);
  max-height: 78vh;
}

.book-object.is-fullscreen .book-page img {
  object-fit: contain;
}

.book-object.is-fullscreen .book-controls,
.book-object.is-fullscreen .book-hint {
  width: min(92vw, 1120px);
}

.book-page {
  position: relative;
  overflow: hidden;
  background: #fbfaf6;
  display: block;
  box-shadow:
    inset 0 0 0 1px rgba(29, 22, 12, 0.06),
    inset 0 0 26px rgba(61, 46, 22, 0.09);
}

.book-page-left {
  border-radius: 4px 0 0 4px;
}

.book-page-right {
  border-radius: 0 4px 4px 0;
}

.book-page img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fbfaf6;
}

.book-page.is-blank img {
  opacity: 0;
}

.book-gutter {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 28px;
  transform: translateX(-50%);
  z-index: 3;
  background:
    linear-gradient(90deg, rgba(70,52,24,0.26), rgba(255,255,255,0.18) 42%, rgba(33,24,12,0.22));
  pointer-events: none;
  mix-blend-mode: multiply;
}

.flip-leaf {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  transform-origin: left center;
  opacity: 0;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.98), rgba(247,242,231,0.96) 52%, rgba(188,176,150,0.82));
  box-shadow:
    -18px 0 38px rgba(0,0,0,0.32),
    inset 18px 0 30px rgba(255,255,255,0.24);
}

.book-object.is-flipping .flip-leaf {
  animation: pageFlip 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pageFlip {
  0% { opacity: 0; transform: rotateY(0deg) translateZ(2px); filter: brightness(1.05); }
  10% { opacity: 1; }
  38% { opacity: 0.98; transform: rotateY(-76deg) skewY(-1.4deg) translateZ(18px); filter: brightness(1.02); }
  72% { opacity: 0.9; transform: rotateY(-151deg) skewY(0.6deg) translateZ(6px); filter: brightness(0.88); }
  100% { opacity: 0; transform: rotateY(-179deg) translateZ(0); filter: brightness(1); }
}

.book-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: min(100%, 560px);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

.book-object.is-open .book-controls {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.book-object.is-fullscreen .book-controls {
  position: relative;
  z-index: 2;
}

.book-control {
  border: 1px solid var(--rule);
  background: rgba(7,9,15,0.34);
  color: var(--text-soft);
  font-family: var(--sans-ui);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
}

.book-control:hover:not(:disabled),
.book-control:focus-visible {
  color: var(--gold);
  border-color: var(--gold);
  outline: none;
}

.book-control:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.book-page-indicator {
  min-width: 104px;
  text-align: center;
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.book-hint {
  width: min(100%, 560px);
  margin: calc(-1 * var(--space-2)) auto 0;
  text-align: center;
  font-family: var(--sans-ui);
  font-size: 0.74rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (max-width: 620px) {
  .book-stage {
    width: min(100%, 340px);
    aspect-ratio: 2 / 3;
  }
  .book-spread {
    width: min(100%, 340px);
    aspect-ratio: 2 / 3;
    grid-template-columns: 1fr;
  }
  .book-page-left,
  .book-gutter {
    display: none;
  }
  .book-page-right {
    border-radius: 4px;
  }
  .book-controls {
    width: min(100%, 340px);
    flex-wrap: wrap;
  }
  .book-object.is-fullscreen .book-stage,
  .book-object.is-fullscreen .book-spread {
    width: min(92vw, 430px);
    max-height: 72vh;
    aspect-ratio: 2 / 3;
  }
}

.book-meta .eyebrow { color: var(--gold); }
.book-meta h3 {
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  font-style: italic;
  font-weight: 500;
  margin-bottom: var(--space-3);
}
.book-meta .series {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin-bottom: var(--space-4);
}
.book-meta p {
  color: var(--text-soft);
  line-height: 1.78;
}

/* Future book placeholder */
.future-row {
  margin-top: clamp(3rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 0.9fr;
  gap: var(--space-5);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 700px) {
  .future-row { grid-template-columns: 1fr; }
}
.future-card {
  border: 1px dashed var(--rule);
  padding: var(--space-6) var(--space-4);
  text-align: center;
  background: rgba(255,255,255,0.01);
}
.future-card .label {
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}
.future-card .title {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--text-soft);
  font-size: 1.05rem;
}

/* ---------- Founding / About text columns ---------- */
.about-section {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  background:
    linear-gradient(90deg, rgba(201,162,74,0.035), transparent 38%),
    var(--ink-1);
}

.text-block {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.text-block p {
  color: var(--text-soft);
  font-size: 1.1rem;
  line-height: 1.75;
}
.text-block p + p { margin-top: var(--space-4); }

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(280px, 0.88fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  max-width: 1040px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 820px) {
  .two-col { grid-template-columns: 1fr; }
}
.two-col h2 {
  margin-bottom: var(--space-5);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
}
.two-col p {
  color: var(--text-soft);
  line-height: 1.82;
  font-size: 1.06rem;
}
/* Balanced two-column About. No decorative left-rules (they read as
   uneven when the two panels have different text lengths) and no
   vertical offset — both columns start at the same baseline and the
   eyebrows align across the row. */
.story-panel,
.press-panel {
  max-width: 560px;
  padding: 0;
  border-left: 0;
}
.press-panel {
  margin-top: 0;
  justify-self: end; /* hug the right side of the grid cell */
}
.press-panel h2 {
  font-size: clamp(2rem, 3.4vw, 2.9rem); /* match story-panel h2 */
}

/* ---------- Teachers block ---------- */
.teachers {
  padding: clamp(3.75rem, 6.5vw, 5.75rem) 0;
  background: var(--ink-2);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}
.teachers-inner {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.44fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  text-align: left;
}
.teachers .lead {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  color: var(--text);
  line-height: 1.46;
  max-width: 680px;
  margin-bottom: 0;
}
.teachers-action {
  padding-left: 0;
  border-left: 0;
}
@media (max-width: 760px) {
  .teachers-inner {
    grid-template-columns: 1fr;
  }
  .teachers-action {
    padding-left: 0;
    border-left: 0;
  }
}

/* ---------- Signup ---------- */
.signup {
  padding: clamp(4rem, 7vw, 6rem) 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(201,162,74,0.05), transparent 62%),
    var(--ink-2);
}
.signup-card {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 5.5rem);
  align-items: start;
  text-align: left;
}
.signup-card h2 { margin-bottom: var(--space-3); }
.signup-card .lead {
  color: var(--text-soft);
  margin-bottom: 0;
  line-height: 1.78;
}
.signup-intro {
  padding-top: var(--space-3);
}

.signup-form {
  display: grid;
  gap: var(--space-4);
  margin-top: 0;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--rule);
  background: rgba(7,9,15,0.24);
  text-align: left;
}
.field { display: grid; gap: var(--space-2); }
.field label {
  font-family: var(--sans-ui);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input[type="email"], .field input[type="text"] {
  width: 100%;
  padding: 0.9rem 1rem;
  background: var(--ink-3);
  border: 1px solid var(--rule);
  color: var(--text);
  font-family: var(--serif-body);
  font-size: 1.05rem;
  border-radius: 0;
  transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease);
}
.field input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-glow);
}

.checkbox-row {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-family: var(--sans-ui);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-soft);
  cursor: pointer;
}
.checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin-top: 3px;
  border: 1px solid var(--gold);
  background: transparent;
  position: relative;
  cursor: pointer;
  border-radius: 1px;
}
.checkbox-row input[type="checkbox"]:checked {
  background: var(--gold);
}
.checkbox-row input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 11px;
  border: solid var(--ink-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.signup-button { justify-self: start; margin-top: var(--space-2); }
.signup-note {
  font-family: var(--sans-ui);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: var(--space-3);
  line-height: 1.55;
}
.form-status {
  margin-top: var(--space-3);
  padding: 0.85rem 1rem;
  border: 1px solid transparent;
  font-family: var(--sans-ui);
  font-size: 0.9rem;
  display: none;
}
.form-status.is-success {
  display: block;
  border-color: var(--gold);
  color: var(--text);
  background: rgba(201,162,74,0.08);
}
.form-status.is-error {
  display: block;
  border-color: #8a3344;
  color: #e9b9c1;
  background: rgba(138,51,68,0.12);
}

@media (max-width: 820px) {
  .signup-card {
    grid-template-columns: 1fr;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink-0);
  border-top: 1px solid var(--rule-soft);
  padding: var(--space-9) 0 var(--space-7);
  margin-top: var(--space-8);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}
@media (max-width: 760px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
.footer-logo {
  width: 170px;
  margin-bottom: var(--space-4);
}
.footer-col h4 {
  font-family: var(--sans-ui);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: var(--space-2); }
.footer-col a {
  color: var(--text-soft);
  border-bottom: 0;
  font-family: var(--sans-ui);
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--gold); }

.footer-base {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans-ui);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ---------- Page hero (interior pages) ---------- */
.page-hero {
  padding: clamp(3.5rem, 7vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(201,162,74,0.05), transparent 65%);
}
.page-hero .eyebrow { margin-bottom: var(--space-3); }
.page-hero h1 { font-style: italic; font-weight: 500; }
.page-hero .lead {
  font-size: 1.2rem;
  color: var(--text-soft);
  max-width: 640px;
  margin: var(--space-4) auto 0;
}

/* ---------- Long-form prose (legal pages) ---------- */
.prose {
  max-width: 720px;
  margin: 0 auto;
  color: var(--text-soft);
}
.prose h2 {
  font-size: 1.45rem;
  font-style: italic;
  color: var(--text);
  margin-top: var(--space-7);
  margin-bottom: var(--space-3);
}
.prose h3 {
  font-size: 1.1rem;
  font-family: var(--sans-ui);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  text-transform: none;
}
.prose p, .prose li { font-size: 1.02rem; line-height: 1.75; }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: var(--space-2); }
.prose .meta {
  font-family: var(--sans-ui);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.callout {
  margin: var(--space-5) 0;
  padding: var(--space-5);
  border-left: 2px solid var(--gold);
  background: var(--ink-2);
  color: var(--text-soft);
  font-size: 0.98rem;
}

/* Stub notices */
.stub-notice {
  border: 1px solid var(--rule);
  background: var(--ink-2);
  padding: var(--space-5) var(--space-6);
  margin: 0 auto var(--space-7);
  max-width: 640px;
  text-align: center;
}
.stub-notice .eyebrow { margin-bottom: var(--space-2); }
.stub-notice p { margin: 0; color: var(--text-soft); }

/* Center the back link area */
.back-row {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-7);
}

/* ---------- Educator portal ---------- */
.educator-hero {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background:
    radial-gradient(ellipse 70% 50% at 80% 0%, rgba(201,162,74,0.045), transparent 65%),
    var(--ink-1);
}
.educator-hero.compact {
  padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}
.educator-hero.compact > .container > .eyebrow,
.educator-hero.compact > .container > h1,
.educator-hero.compact > .container > .lead {
  margin-left: auto;
  margin-right: auto;
}
.educator-hero.compact > .container > .lead {
  max-width: 760px;
}
.educator-hero-grid,
.educator-two,
.educator-cta {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(320px, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.educator-hero h1,
.educator-prose h1 {
  font-style: italic;
}
.educator-hero .lead {
  max-width: 760px;
  color: var(--text);
  font-size: clamp(1.25rem, 2vw, 1.65rem);
  line-height: 1.5;
}
.educator-hero p:not(.eyebrow):not(.lead),
.educator-section p,
.educator-prose li {
  color: var(--text-soft);
  line-height: 1.76;
}
.educator-panel {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.018);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.educator-subnav {
  position: sticky;
  top: 83px;
  z-index: 25;
  background: rgba(7,9,15,0.92);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(12px);
}
.educator-subnav .container {
  display: flex;
  gap: var(--space-5);
  overflow-x: auto;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.educator-subnav a {
  flex: 0 0 auto;
  border: 0;
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.educator-subnav a:hover,
.educator-subnav a[aria-current="page"] {
  color: var(--gold);
}
.educator-section {
  padding: clamp(4rem, 7vw, 6rem) 0;
}
.educator-note {
  border-left: 1px solid var(--gold);
  padding-left: var(--space-5);
  margin-top: var(--space-5);
}
.facts-grid,
.standards-list,
.theme-grid,
.download-grid,
.resource-menu,
.timeline-grid {
  display: grid;
  gap: var(--space-4);
}
.facts-grid {
  grid-template-columns: 1fr 1fr;
}
.facts-grid div,
.timeline-grid div,
.theme-grid div,
.prompt-cluster,
.download-card,
.resource-card,
.access-note,
.download-thanks {
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.015);
  padding: var(--space-5);
}
.facts-grid strong,
.timeline-grid strong {
  display: block;
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}
.facts-grid span,
.timeline-grid span {
  color: var(--text-soft);
}
.standards-list ul,
.lesson-list,
.prompt-cluster ul {
  color: var(--text-soft);
  line-height: 1.75;
}
.resource-menu,
.download-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.resource-card {
  display: block;
  color: var(--text-soft);
  transition: border-color 180ms var(--ease), transform 180ms var(--ease);
}
.resource-card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
}
.resource-card span,
.download-card span {
  display: block;
  font-family: var(--sans-ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-3);
}
.resource-card strong {
  display: block;
  font-family: var(--serif-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  color: var(--text);
  margin-bottom: var(--space-2);
}
.quote-placeholder {
  border: 1px dashed var(--rule);
  padding: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
  color: var(--text-muted);
}
.educator-prose {
  max-width: 900px;
}
.educator-prose h2 {
  margin-top: var(--space-8);
  font-style: italic;
}
.educator-prose h2:first-child {
  margin-top: 0;
}
.theme-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.theme-grid h3,
.prompt-cluster h3 {
  color: var(--text);
  font-style: italic;
}
.comparison-table {
  border: 1px solid var(--rule);
  margin: var(--space-5) 0;
}
.comparison-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--rule-soft);
}
.comparison-table > div:first-child {
  border-top: 0;
  color: var(--gold);
  font-family: var(--sans-ui);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.download-inline {
  margin-top: var(--space-6);
}
.timeline-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.strong-order {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(201,162,74,0.06), transparent 64%),
    var(--ink-2);
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.download-card h2 {
  font-size: clamp(1.45rem, 2.2vw, 1.9rem);
  font-style: italic;
}
.download-card > div:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-4);
}
.order-link {
  font-family: var(--sans-ui);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.educator-unlock {
  margin-top: var(--space-8);
  border: 1px solid var(--gold-deep);
  background: rgba(201,162,74,0.045);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  gap: var(--space-4);
}
.unlock-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-4);
}
.download-thanks {
  margin-top: var(--space-5);
}
.download-thanks[hidden] {
  display: none;
}
.access-note {
  margin-bottom: var(--space-6);
}

/* ---------- The Woven conversion page ---------- */
.woven-page {
  background: #05070c;
}

.woven-hero-final {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: end start;
  overflow: hidden;
  isolation: isolate;
}

.woven-hero-bg,
.woven-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -4;
}

.woven-hero-video {
  /* Subtle ambient overlay; the still hero carries the scene and
     the video adds a touch of movement. */
  opacity: 0.28;
  z-index: -3;
}

.woven-hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse at 72% 44%, rgba(201,162,74,0.16), transparent 34%),
    linear-gradient(90deg, rgba(3,5,10,0.86) 0%, rgba(6,8,14,0.58) 42%, rgba(6,8,14,0.22) 100%),
    linear-gradient(0deg, rgba(3,5,10,0.84) 0%, rgba(3,5,10,0.10) 44%, rgba(3,5,10,0.72) 100%);
}

.woven-hero-content {
  padding-top: clamp(7rem, 10vw, 10rem);
  padding-bottom: clamp(8rem, 14vw, 13rem);
  max-width: 980px;
}

.woven-wordmark {
  display: block;
  width: min(540px, 78vw);
  height: auto;
  margin-bottom: clamp(1.15rem, 3vw, 2.2rem);
  filter: drop-shadow(0 12px 28px rgba(0,0,0,0.5));
}

.woven-hero-final h1 {
  max-width: 850px;
  font-size: clamp(2.35rem, 5.8vw, 5.35rem);
  line-height: 0.98;
  font-style: italic;
  color: #f1eadb;
  text-shadow: 0 18px 38px rgba(0,0,0,0.56);
}

.woven-hero-sub {
  font-family: var(--serif-display);
  font-size: clamp(1.25rem, 2.5vw, 1.95rem);
  color: var(--text);
  margin-top: var(--space-3);
  margin-bottom: var(--space-4);
}

.woven-hook {
  max-width: 760px;
  color: rgba(231,227,214,0.82);
  font-size: clamp(1rem, 1.45vw, 1.18rem);
  line-height: 1.72;
}

.woven-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-5);
}

.quiet-link {
  font-family: var(--sans-ui);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  border-bottom-color: rgba(201,162,74,0.38);
}

.quiet-link:hover {
  color: var(--gold);
}

.woven-book-section,
.five-section,
.what-the-books-ask-section,
.echo-chambers-section,
.founding-readers-section {
  padding: clamp(5rem, 9vw, 9rem) 0;
  border-top: 1px solid var(--rule-soft);
}

/* ---- 4.3 "What the books ask" three-question module ---- */
.what-the-books-ask-section {
  background: var(--ink-1);
  text-align: center;
}
.what-the-books-ask-section h2 {
  font-style: italic;
}
.what-the-books-ask-section .lead {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.three-questions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  text-align: left; /* cards read left-aligned even when the section head is centered */
}
.three-questions article {
  padding: clamp(1.5rem, 3vw, 2rem);
  border-left: 1px solid rgba(201,162,74,0.34);
  background: rgba(255,255,255,0.018);
}
.three-questions article .eyebrow {
  margin-bottom: var(--space-3);
}
.three-questions article h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2vw, 1.6rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-3);
}
.three-questions article p {
  color: var(--text-soft);
  line-height: 1.75;
  font-size: 0.98rem;
  margin: 0;
}
@media (max-width: 860px) {
  .three-questions { grid-template-columns: 1fr; }
}

/* ---- 4.2 Echo Chambers — seven rooms beneath a city ---- */
.echo-chambers-section {
  background: radial-gradient(ellipse at 70% 50%, rgba(201,162,74,0.05), transparent 58%), var(--ink-2);
  text-align: center;
}
.echo-chambers-section h2 {
  font-style: italic;
}
.echo-chambers-section .lead {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  color: var(--text-soft);
  font-size: 1.06rem;
  line-height: 1.78;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.chamber-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  text-align: left; /* chamber cards read left-aligned */
}
.chamber-grid > div {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.015);
}
.chamber-grid h3 {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.15rem, 1.7vw, 1.35rem);
  font-weight: 500;
  color: var(--text);
  margin-bottom: var(--space-2);
}
.chamber-grid p {
  color: var(--text-soft);
  line-height: 1.7;
  font-size: 0.96rem;
  margin: 0;
}
.chamber-sealed {
  border: 1px dashed rgba(201,162,74,0.45) !important;
  background: rgba(201,162,74,0.045) !important;
}
.chamber-sealed h3 {
  color: var(--gold) !important;
}
.chamber-sealed p {
  font-style: italic;
}

.woven-book-section {
  background:
    radial-gradient(ellipse at 12% 48%, rgba(201,162,74,0.08), transparent 46%),
    var(--ink-1);
}

.woven-book-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(3rem, 7vw, 7rem);
  /* align-items: start so the left column cell takes the full row
     height (matching the taller right-column copy), which gives the
     sticky book the runway it needs to stay anchored on scroll. */
  align-items: start;
}

.woven-cover-wrap {
  /* The wrap is the actual sticky target so the book stays pinned
     while the longer copy on the right scrolls past it. top is the
     navbar height plus a comfortable inset. */
  position: sticky;
  top: 7rem;
  align-self: start;
}
.woven-cover-wrap .book-object {
  /* sticky now lives on the parent wrap; the book sits inside */
  position: static;
}

.woven-book-copy p {
  color: var(--text-soft);
  line-height: 1.82;
  font-size: 1.06rem;
}

.woven-book-copy h2,
.world-copy h2,
.five-section h2,
.woven-series-section h2,
.founding-readers-section h2,
.woven-educators-card h2 {
  font-style: italic;
}

.woven-glyph {
  width: 54px;
  height: 54px;
  object-fit: contain;
  opacity: 0.72;
  margin-bottom: var(--space-5);
  mix-blend-mode: screen;
}

.woven-glyph.small {
  width: 38px;
  height: 38px;
}

.woven-excerpt {
  margin: clamp(2rem, 5vw, 4rem) 0;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-left: 1px solid var(--gold);
  background: rgba(201,162,74,0.045);
}

.woven-excerpt p {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  line-height: 1.45;
  color: var(--text);
}

.woven-excerpt cite {
  display: block;
  margin-top: var(--space-4);
  color: var(--gold);
  font-family: var(--sans-ui);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
}

.chapter-intro {
  color: var(--text) !important;
  font-style: italic;
}

.san-lirio-section {
  position: relative;
  padding: clamp(6rem, 11vw, 11rem) 0;
  border-top: 1px solid var(--rule-soft);
  background:
    linear-gradient(180deg, rgba(5,7,12,0.7), rgba(5,7,12,0.96)),
    var(--ink-2);
  overflow: hidden;
}

.world-copy {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: clamp(3rem, 7vw, 6rem);
  text-align: center;
}

.world-copy .woven-glyph,
.world-copy .woven-glyph.small {
  margin-left: auto;
  margin-right: auto;
}

.world-copy h2 {
  font-size: clamp(2.6rem, 7vw, 6rem);
}

.world-copy p {
  color: var(--text-soft);
  font-size: clamp(1.08rem, 1.8vw, 1.32rem);
  line-height: 1.72;
}

.san-lirio-gallery {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  grid-template-areas:
    "a b c"
    "a d d";
  gap: var(--space-4);
}

.san-lirio-gallery picture,
.san-lirio-gallery img {
  width: 100%;
  height: 100%;
  display: block;
}
.san-lirio-gallery img {
  object-fit: cover;
  min-height: 260px;
  border: 1px solid rgba(201,162,74,0.18);
  box-shadow: 0 28px 70px rgba(0,0,0,0.42);
}

.san-lirio-gallery picture:nth-child(1) { grid-area: a; }
.san-lirio-gallery picture:nth-child(2) { grid-area: b; }
.san-lirio-gallery picture:nth-child(3) { grid-area: c; }
.san-lirio-gallery picture:nth-child(4) { grid-area: d; }

.five-section {
  background: var(--ink-1);
}

.five-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.five-grid p {
  color: var(--text-soft);
  line-height: 1.78;
}

.five-group,
.character-row img {
  width: 100%;
  display: block;
  object-fit: cover;
  border: 1px solid rgba(201,162,74,0.18);
  box-shadow: 0 30px 70px rgba(0,0,0,0.38);
}

.five-group {
  border-radius: 2px;
}

.character-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
  margin-top: clamp(2rem, 5vw, 4rem);
}

.character-row figure {
  margin: 0;
}

.character-row figcaption {
  font-family: var(--sans-ui);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: var(--space-3);
}

.woven-series-section,
.woven-educators-card {
  padding: clamp(4.5rem, 8vw, 7rem) 0;
  border-top: 1px solid var(--rule-soft);
  background: var(--ink-2);
}

.woven-series-grid,
.conversion-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.series-stack {
  display: grid;
  gap: var(--space-4);
}

.series-card {
  border: 1px solid var(--rule);
  padding: var(--space-5);
  background: rgba(255,255,255,0.015);
  color: var(--text-soft);
  background-image: none;
  border-bottom-color: var(--rule);
}

.series-card.is-present {
  border-color: rgba(201,162,74,0.55);
  background: rgba(201,162,74,0.045);
}

.series-card span {
  display: block;
  font-family: var(--sans-ui);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--space-2);
}

.series-card strong {
  font-family: var(--serif-display);
  font-size: 1.45rem;
  color: var(--text);
  font-style: italic;
  font-weight: 500;
}
.series-covers {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.series-covers .series-card {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}
.series-covers picture,
.series-covers img {
  width: 100%;
  display: block;
}
.series-covers img {
  aspect-ratio: 1080 / 1697;
  object-fit: cover;
  box-shadow: 0 22px 54px rgba(0,0,0,0.34);
  margin-bottom: var(--space-2);
}
@media (max-width: 760px) {
  .series-covers {
    grid-template-columns: 1fr;
  }
}

.founding-readers-section {
  background:
    radial-gradient(ellipse at 18% 55%, rgba(201,162,74,0.09), transparent 48%),
    #07090f;
}

.founding-readers-section p {
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.72;
}

.founding-form {
  border: 1px solid rgba(201,162,74,0.34);
  background: rgba(7,9,15,0.62);
  box-shadow: 0 34px 90px rgba(0,0,0,0.42);
}

@media (max-width: 900px) {
  .woven-hero-video {
    display: none;
  }
  .woven-hero-content {
    padding-top: 8rem;
  }
  .woven-hero-final h1 {
    font-size: clamp(2.55rem, 13vw, 4.3rem);
  }
  .woven-book-grid,
  .five-grid,
  .woven-series-grid,
  .conversion-grid {
    grid-template-columns: 1fr;
  }
  .woven-cover-wrap .book-object {
    position: relative;
    top: auto;
  }
  .san-lirio-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a a"
      "b c"
      "d d";
  }
  .character-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .woven-wordmark {
    width: min(92vw, 420px);
  }
  .woven-hook {
    font-size: 0.98rem;
  }
  .woven-hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .san-lirio-gallery,
  .character-row {
    grid-template-columns: 1fr;
    grid-template-areas: none;
  }
  .san-lirio-gallery picture,
  .san-lirio-gallery img {
    grid-area: auto !important;
  }
  .san-lirio-gallery img {
    min-height: 220px;
  }
}

/* ---------- Premium motion, typography, and thematic interaction ---------- */
.reveal {
  opacity: 1;
  transform: none;
}
body.reveal-ready .reveal.is-pre-reveal:not(.is-revealed) {
  opacity: 1;
  transform: translateY(18px);
}
body.reveal-ready .reveal.is-revealed {
  opacity: 1;
  /* No transform on the revealed state. Per CSS spec, ANY non-none
     transform (even identity) on an ancestor turns it into the
     containing block for descendant position:fixed elements, which
     breaks the fullscreen book preview. We animate opacity only on
     the revealed state and let the transform return to none. */
  animation: reveal-in 760ms var(--ease-premium) both;
  animation-delay: var(--reveal-delay, 0ms);
  transition: opacity 760ms var(--ease-premium);
  transition-delay: var(--reveal-delay, 0ms);
}
@keyframes reveal-in {
  from { transform: translateY(18px); }
  to   { transform: none; }
}

.gold-rule,
.woven-glyph,
.hero-logo,
.footer-logo,
.brand-mark {
  animation: lanternBreath 5.4s ease-in-out infinite;
}

@keyframes lanternBreath {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(201,162,74,0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 13px rgba(201,162,74,0.14)); transform: scale(1.006); }
}

.story-panel > p:not(.eyebrow):first-of-type::first-letter,
.woven-book-copy > p:not(.eyebrow):first-of-type::first-letter {
  float: left;
  font-family: var(--serif-display);
  font-size: 4.25rem;
  line-height: 0.78;
  color: var(--gold);
  padding: 0.12rem 0.45rem 0 0;
  font-feature-settings: "liga" 1, "kern" 1;
}

.woven-excerpt {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  border-color: rgba(201,162,74,0.45);
  text-align: left;
}
.woven-excerpt::before {
  content: "";
  display: block;
  width: 72px;
  height: 1px;
  background: var(--gold);
  opacity: 0.72;
  margin: 0 0 var(--space-5);
}
.woven-excerpt p {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.7;
  hanging-punctuation: first last;
}

.smooth-scale-section {
  padding: clamp(5rem, 10vw, 9rem) 0;
  border-top: 1px solid var(--rule-soft);
  background:
    radial-gradient(ellipse at 78% 34%, rgba(201,162,74,0.07), transparent 48%),
    var(--ink-2);
}
.smooth-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.76fr) minmax(340px, 1.24fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.smooth-copy p {
  color: var(--text-soft);
  line-height: 1.78;
}
.smooth-demo {
  --smoothness: 0.35;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.018);
  padding: clamp(1rem, 3vw, 2rem);
  box-shadow: 0 30px 80px rgba(0,0,0,0.34);
}
.smooth-scene {
  position: relative;
  overflow: hidden;
  min-height: clamp(260px, 36vw, 430px);
  border: 1px solid rgba(201,162,74,0.22);
  border-radius: calc(22px - (var(--smoothness) * 20px));
  background: var(--ink-0);
  transition: border-radius 320ms var(--ease-premium), filter 320ms var(--ease-premium);
}
.smooth-scene img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  filter:
    saturate(calc(1.18 - (var(--smoothness) * 0.46)))
    contrast(calc(1.12 - (var(--smoothness) * 0.26)))
    brightness(calc(1 - (var(--smoothness) * 0.1)))
    blur(calc(var(--smoothness) * 0.55px));
  transform: scale(calc(1.035 - (var(--smoothness) * 0.02)));
  transition: filter 320ms var(--ease-premium), transform 320ms var(--ease-premium);
}
.smooth-scene picture {
  display: block;
  height: 100%;
  min-height: inherit;
}
.smooth-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(0.28 - (var(--smoothness) * 0.24));
  background-image:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,0.18) 0 1px, transparent 1px),
    radial-gradient(circle at 68% 71%, rgba(255,255,255,0.12) 0 1px, transparent 1px);
  background-size: 13px 13px, 19px 19px;
  mix-blend-mode: screen;
}
.smooth-gridlines {
  position: absolute;
  inset: 0;
  opacity: calc(var(--smoothness) * 0.32);
  background:
    linear-gradient(90deg, transparent 49.7%, rgba(255,255,255,0.16) 50%, transparent 50.3%),
    linear-gradient(0deg, transparent 49.7%, rgba(255,255,255,0.12) 50%, transparent 50.3%);
  background-size: 25% 25%;
  pointer-events: none;
}
.smooth-caption {
  min-height: 4.5rem;
  margin: var(--space-5) 0 var(--space-4);
  color: var(--text);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.45;
  transition: opacity 280ms var(--ease-premium);
}
.smooth-label {
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  font-family: var(--sans-ui);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.smooth-range {
  width: 100%;
  accent-color: var(--gold);
  margin: var(--space-3) 0 var(--space-2);
}
.smooth-payoff {
  margin-top: var(--space-4);
  color: var(--gold);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.25rem;
}
.smooth-payoff[hidden] { display: none; }

.form-status.is-success {
  box-shadow: inset 0 0 0 1px rgba(201,162,74,0.08), 0 0 26px rgba(201,162,74,0.08);
}

@media (max-width: 860px) {
  .smooth-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body, body.is-leaving {
    opacity: 1;
    animation: none;
  }
  body.reveal-ready .reveal,
  body.reveal-ready .reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .gold-rule,
  .woven-glyph,
  .hero-logo,
  .footer-logo,
  .brand-mark {
    animation: none;
  }
  .woven-hero-bg,
  .woven-hero-video,
  .hero::before {
    transform: none !important;
  }
  .woven-hero-video {
    display: none;
  }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (max-width: 900px) {
  .educator-hero-grid,
  .educator-two,
  .educator-cta,
  .facts-grid,
  .resource-menu,
  .download-grid,
  .theme-grid,
  .timeline-grid,
  .unlock-grid {
    grid-template-columns: 1fr;
  }
  .educator-subnav {
    top: 74px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .book-object .book { transform: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   THE DOOR — reader portal entry section (Woven page)
   The on-theme threshold a child clicks to enter the living map.
   ============================================================ */
.door-section {
  scroll-margin-top: 96px;
  background:
    radial-gradient(ellipse 70% 60% at 50% 0%, rgba(201,162,74,0.10), transparent 70%),
    var(--ink-1);
  padding: var(--space-9) 0;
  border-top: 1px solid var(--rule-soft);
}
.door-inner {
  max-width: var(--container-narrow);
  text-align: center;
}
.door-eyebrow {
  font-family: var(--sans-ui);
  font-size: var(--text-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 var(--space-3);
}
.door-section h2 {
  font-family: var(--serif-display);
  font-size: var(--text-2xl);
  color: var(--text);
  margin: 0 0 var(--space-4);
  font-weight: 500;
}
.door-lead {
  font-family: var(--serif-body);
  font-size: var(--text-lg);
  line-height: 1.6;
  color: var(--text-soft);
  margin: 0 auto var(--space-7);
  max-width: 38rem;
}

/* The door itself — a clickable threshold that holds a video.
   The poster image (door-hero.png) shows until clicked. On click,
   we transform the door element to fixed/inset:0 via the body
   class .door-playing, and the video plays at full-screen size. */
.door-portal {
  position: relative;
  display: block;
  width: min(420px, 80vw);
  aspect-ratio: 3 / 4;
  margin: 0 auto var(--space-6);
  border-radius: 10px;
  border: 1px solid var(--gold-deep);
  overflow: hidden;
  text-decoration: none;
  background: var(--ink-3);
  cursor: pointer;
  transition: transform 700ms var(--ease-premium),
              border-radius 700ms var(--ease-premium),
              border-color 700ms var(--ease);
}
.door-portal:hover { transform: translateY(-6px) scale(1.015); }
.door-portal:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 6px;
}

.door-portal__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none; /* clicks bubble to <a> for the navigation handler */
  background: var(--ink-3);
}

/* Warm light spilling from the door's edges */
.door-portal__glow {
  position: absolute;
  inset: -2px;
  border-radius: 12px;
  box-shadow: 0 0 50px 6px var(--gold-glow);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 700ms var(--ease), box-shadow 700ms var(--ease);
}
.door-portal:hover .door-portal__glow {
  opacity: 1;
  box-shadow: 0 0 80px 14px rgba(242,200,121,0.34);
}

.door-portal__cta {
  position: absolute;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  transition: opacity 400ms var(--ease);
  pointer-events: none;
}
.door-portal__cta-text {
  display: inline-block;
  font-family: var(--sans-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-0);
  background: linear-gradient(180deg, #F2C879, var(--gold-soft));
  border-radius: 999px;
  padding: 0.7rem 1.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}

.door-portal__skip {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  z-index: 2;
  font-family: var(--sans-ui);
  font-size: var(--text-sm);
  letter-spacing: 0.1em;
  color: var(--ink-0);
  background: linear-gradient(180deg, #F2C879, var(--gold-soft));
  border: 0;
  border-radius: 999px;
  padding: 0.6rem 1.3rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.door-portal__skip:hover { filter: brightness(1.06); }
.door-portal__skip:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.door-portal__skip[hidden] { display: none; }

/* When playing, the door becomes the whole screen — same element,
   no separate overlay, so there's no chance of "the video didn't
   appear" failure modes. */
body.door-playing { overflow: hidden; }
body.door-playing .door-portal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  margin: 0;
  border-radius: 0;
  border-color: transparent;
  aspect-ratio: auto;
  z-index: 9999;
  transform: none;
  cursor: default;
}
body.door-playing .door-portal:hover { transform: none; }
body.door-playing .door-portal__glow { opacity: 0; }

.door-note {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .door-portal,
  .door-portal__glow,
  .door-portal__cta { transition: none; }
  .door-portal:hover { transform: none; }
}

/* --- Audit fixes 2026-07-01: scroll offset, subnav scroll affordance, locked-state --- */
.download-thanks{scroll-margin-top:120px}
@media (max-width:768px){.download-thanks{scroll-margin-top:150px}}
[data-gated-download].is-locked{opacity:.55;filter:grayscale(.25)}
@media (max-width:768px){.educator-subnav .container{-webkit-mask-image:linear-gradient(to right,#000 90%,transparent 100%);mask-image:linear-gradient(to right,#000 90%,transparent 100%)}}
[data-book-preview].is-open .book-hint{display:none}