/*
 * The Paper Stone website: layout, type sizes and motion for every page. Linked after Brand's
 * tokens.css (fonts, palette, fold scopes) and components.css (guide inset, Wow! box, captions,
 * diagram labels), both copied from engine/templates/books/brand/ by books/site/build.mjs, and
 * after the series' tokens.css (its accents and --site-* colours), which every page links.
 *
 * Who reads it: every page books/site/build.mjs writes. The markup comes from books/site/render/.
 * Ported from the POC's books/site/static/site.css; the showcase's hero, book rows and pitch ask
 * and the multi-series library page's rules are not carried over.
 *
 * Why it looks like this: the brand is paper and ink, with six fold colors that run from the
 * shallowest level to the deepest. The site keeps that one metaphor: the ladder demo's ground
 * deepens as the slider moves and the footer is the series' night (--site-footer). One accent per
 * series (--accent-deep) for links and actions; level colors are shared, and fold colors only ever
 * mean a fold.
 *
 * Rules kept throughout:
 *  - Shapes: interactive things are pills (999px); cards 20px; pictures inside cards 14px; book
 *    covers 2–4px, because they are books.
 *  - Type: Fraunces (the brand's display face) for headings, Figtree for UI and body, and each
 *    fold's own reading face (Andika, Figtree, Literata) wherever a book's words appear. Sizes in
 *    rem: tokens.css sizes are points for print, so `.web.fold-N` re-sizes the fold scale here.
 *  - Motion is transform and opacity only, eased (--ease), and all of it switches off under
 *    prefers-reduced-motion.
 *
 * What bites:
 *  - The nav is fixed, so every page's first section carries its own top padding (--top).
 *  - .fold-N on an element changes --font-display and friends for everything inside it; the
 *    site's own headings use --font-display-sharp directly so the chrome never changes face.
 *  - [hidden] must win over component display rules, hence the !important below.
 */

:root {
  --wrap: 1240px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --section: clamp(4.5rem, 9vw, 8.5rem);
  --top: clamp(6.5rem, 10vw, 8.5rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.32, 0.72, 0, 1);
  --r-card: 20px;
  --r-media: 14px;
  --paper-2: #ECE5D6;
  --ink-2: #3c3a34;
  --shadow: 0 1px 2px rgb(43 42 38 / 0.06), 0 18px 40px -22px rgb(43 42 38 / 0.35);
  --shadow-deep: 0 2px 6px rgb(12 20 38 / 0.18), 0 30px 60px -30px rgb(12 20 38 / 0.6);
  --focus: 0 0 0 3px var(--paper), 0 0 0 5.5px var(--accent-deep);
}

/* A set's heading on the educators index: the ladder's phone cards inside it carry h3s of their own (.lc__head). */
.ed-ladder > h3 { margin-bottom: 0.75rem; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Pages with the footer fill the window, so a short page never shows bare paper under it. */
body:has(> .footer) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(> .footer) > main { flex: 1 0 auto; }
/* Paper grain: one fixed layer, never on a scrolling element. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img, svg, video { display: block; max-width: 100%; }
/* width/height attributes reserve space before load; CSS decides the rendered height. */
img { height: auto; }
picture { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display-sharp); font-weight: 600; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.wrap-text { width: min(100% - 2 * var(--gutter), 44rem); margin-inline: auto; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.muted { color: var(--ink-soft); }
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 90; padding: 0.6rem 1rem; border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 1rem; }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-height: 50px;
  padding: 0.8rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 0.5s var(--ease), background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn__icon { display: grid; place-items: center; width: 30px; height: 30px; margin: -0.4rem -0.8rem -0.4rem 0; border-radius: 50%; background: rgb(243 238 227 / 0.16); transition: transform 0.5s var(--ease); }
.btn:hover .btn__icon { transform: translate(2px, -1px) scale(1.06); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--accent-deep); }
.btn--ghost { border-color: rgb(43 42 38 / 0.55); background: rgb(251 249 244 / 0.35); color: var(--ink); }
.btn--ghost:hover { border-color: var(--ink); background: rgb(251 249 244 / 0.8); }
.btn--ghost .btn__icon { background: rgb(43 42 38 / 0.08); }
.btn--paper { background: var(--paper); color: var(--site-night); }
.btn--paper:hover { background: #fff; }
.btn--paper .btn__icon { background: rgb(27 42 71 / 0.1); }
.btn--small { min-height: 40px; padding: 0.55rem 1.05rem; font-size: 0.92rem; }
.btn .icon { font-size: 0.9em; }
.link { display: inline-flex; align-items: center; gap: 0.35em; color: var(--accent-deep); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.link .icon { transition: transform 0.4s var(--ease); }
.link:hover .icon { transform: translateX(3px); }

/* ---------- Nav: a floating island ---------- */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; padding: 12px var(--gutter) 0; pointer-events: none; }
.nav__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  max-width: var(--wrap);
  height: 62px;
  margin-inline: auto;
  padding: 0 9px 0 20px;
  border: 1px solid rgb(43 42 38 / 0.08);
  border-radius: 999px;
  background: rgb(251 249 244 / 0.84);
  box-shadow: 0 10px 30px -16px rgb(27 42 71 / 0.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  pointer-events: auto;
}
.nav__logo { display: block; flex: none; color: inherit; text-decoration: none; }
.nav__logo svg { width: auto; height: 30px; }
/* The world's own name: live type where a series shows its SVG logo. */
.wordmark { display: block; font: 600 1.35rem/1 var(--font-display-sharp); letter-spacing: -0.01em; white-space: nowrap; }
.nav__links { margin-left: auto; }
.nav__links ul { display: flex; gap: 0.2rem; margin: 0; padding: 0; list-style: none; }
.nav__links a { display: block; padding: 0.55rem 0.9rem; border-radius: 999px; font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background-color 0.3s var(--ease); }
.nav__links a:hover { background: rgb(43 42 38 / 0.07); }
.nav__links a[aria-current] { background: rgb(43 42 38 / 0.09); font-weight: 600; }
.nav__toggle { display: none; position: relative; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.nav__toggle i { position: absolute; left: 13px; width: 18px; height: 2px; border-radius: 2px; background: var(--paper); transition: transform 0.5s var(--ease), top 0.5s var(--ease); }
.nav__toggle i:nth-of-type(1) { top: 17px; }
.nav__toggle i:nth-of-type(2) { top: 25px; }
.nav__toggle[aria-expanded="true"] i:nth-of-type(1) { top: 21px; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] i:nth-of-type(2) { top: 21px; transform: rotate(-45deg); }
.nav__menu { position: fixed; inset: 0; z-index: -1; display: grid; align-content: center; padding: 6rem var(--gutter) 3rem; background: rgb(243 238 227 / 0.94); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); pointer-events: auto; }
.nav__menu ul { margin: 0; padding: 0; list-style: none; }
.nav__menu a { display: block; padding: 0.4rem 0; font: 600 clamp(2rem, 8vw, 3rem)/1.15 var(--font-display-sharp); text-decoration: none; }
.nav__menu a[aria-current] { color: var(--accent-deep); }
@media (prefers-reduced-motion: no-preference) {
  .nav__menu:not([hidden]) li { animation: rise 0.7s var(--ease) both; animation-delay: calc(var(--i) * 60ms + 60ms); }
}
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: block; }
  .nav__bar { height: 58px; padding-left: 16px; }
  .nav__logo svg { height: 26px; }
}

/* ---------- Section furniture ---------- */
.section-head { display: grid; gap: 0.9rem; max-width: 44rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.section-head h2, .page-title { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
.section-head p, .page-lede, .section-sub { max-width: 40rem; color: var(--ink-2); font-size: 1.15rem; }
.section-foot { margin-top: 2rem; }
.page-title { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem); }
.page-lede { margin-top: 1rem; font-size: 1.2rem; }
.spec { display: flex; flex-wrap: wrap; gap: 0.6rem 1.8rem; margin: 0; }
.spec div { display: grid; gap: 0.1rem; }
.spec dt { color: var(--ink-soft); font-size: 0.8rem; font-weight: 600; }
.spec dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.reveal { --reveal: 1; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }

/* ---------- The 3D book ---------- */
.book {
  --w: calc(var(--tw) * var(--in, 20px));
  --h: calc(var(--th) * var(--in, 20px));
  --d: calc(var(--td) * var(--in, 20px));
  position: relative;
  display: block;
  width: var(--w);
  height: var(--h);
  perspective: 1600px;
  text-decoration: none;
  border-radius: 4px;
}
.book__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateY(28deg) rotateX(3deg); transition: transform 0.9s var(--ease-soft); }
.book:hover .book__body, .book:focus-visible .book__body { transform: rotateY(10deg) rotateX(1deg) translateY(-8px); }
.book:focus-visible { box-shadow: none; }
.book:focus-visible .book__front { box-shadow: var(--focus); }
.book__front, .book__spine, .book__edge, .book__top { position: absolute; backface-visibility: hidden; }
.book__front { inset: 0; overflow: hidden; border-radius: 2px 4px 4px 2px; transform: translateZ(calc(var(--d) / 2)); background: var(--fold-c); }
.book__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.22), rgb(0 0 0 / 0) 4%, rgb(255 255 255 / 0.12) 5.5%, rgb(255 255 255 / 0) 9%); pointer-events: none; }
.book__spine { top: 0; left: calc(50% - var(--d) / 2); width: var(--d); height: 100%; background: linear-gradient(90deg, color-mix(in srgb, var(--fold-c) 78%, #000), var(--fold-c) 60%); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.book__edge { top: 2px; left: calc(50% - var(--d) / 2); width: var(--d); height: calc(100% - 4px); background: repeating-linear-gradient(90deg, #fbf8f0 0 1px, #e3dccb 1px 2px); transform: rotateY(90deg) translateZ(calc(var(--w) / 2 - 3px)); }
.book__top { left: 0; top: calc(50% - var(--d) / 2); width: calc(100% - 3px); height: var(--d); background: repeating-linear-gradient(0deg, #fbf8f0 0 1px, #e3dccb 1px 2px); transform: rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.book__shadow { position: absolute; left: 6%; right: -4%; bottom: -10px; height: 18px; border-radius: 50%; background: radial-gradient(closest-side, rgb(12 20 38 / 0.45), transparent); filter: blur(4px); transform: translateZ(0); z-index: -1; transition: transform 0.9s var(--ease-soft), opacity 0.9s; }
.book:hover .book__shadow { transform: scale(0.92); opacity: 0.7; }

/* Covers: Brand's printed front, or a stand-in of the cover art and live type. */
.cover { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--fold-c, var(--sand)); container-type: inline-size; }
.cover picture, .cover__img { width: 100%; height: 100%; }
.cover__img { object-fit: cover; }
.cover__type { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8cqw 7cqw 6cqw 9cqw; color: var(--ink); }
.cover__badge { position: absolute; top: 5cqw; right: 5cqw; width: 17cqw; }
.cover__badge svg { width: 100%; height: auto; }
.cover__title { max-width: 72%; font: 700 12cqw/0.94 var(--font-display-soft); letter-spacing: -0.01em; }
.cover__sub { max-width: 72%; margin-top: 3cqw; font: 700 5.4cqw/1.12 var(--font-body); }
.cover__series { margin-top: auto; font: italic 400 5cqw/1 var(--font-display-soft); }
.cover--f5 .cover__title, .cover--f6 .cover__title { font-family: var(--font-display-sharp); font-weight: 600; }
.cover--dark .cover__type { color: var(--paper); }
.cover--f3 .cover__type, .cover--f6 .cover__type { padding-top: 10cqw; }

/* ---------- The set: the ladder demo ---------- */
.ladder { position: relative; isolation: isolate; padding: var(--section) 0; overflow: hidden; color: var(--ink); transition: color 0.6s var(--ease); }
.ladder__depths, .ladder__depths i { position: absolute; inset: 0; }
.ladder__depths { z-index: -1; }
.ladder__depths i { opacity: 0; transition: opacity 0.9s var(--ease); }
.ladder__depths i[data-depth="1"] { background: radial-gradient(90% 60% at 20% 0%, #fffdf0, transparent 65%), linear-gradient(180deg, #fcf5d8, #f2e3a6); }
.ladder__depths i[data-depth="2"] { background: radial-gradient(90% 60% at 25% 0%, #fff6dc, transparent 65%), linear-gradient(180deg, #f9e6b8, #f1cf86); }
.ladder__depths i[data-depth="3"] { background: radial-gradient(90% 60% at 30% 0%, #fde6d8, transparent 65%), linear-gradient(180deg, #f5cdb8, #e9a384); }
.ladder__depths i[data-depth="4"] { background: radial-gradient(90% 60% at 35% 0%, #dcf0e6, transparent 65%), linear-gradient(180deg, #b9ddcd, #6fb39c); }
.ladder__depths i[data-depth="5"] { background: radial-gradient(90% 60% at 40% 0%, #3f8cbb, transparent 65%), linear-gradient(180deg, #2c73a0, #1b4d70); }
.ladder__depths i[data-depth="6"] { background: radial-gradient(70% 50% at 70% 0%, #26406b, transparent 70%), linear-gradient(180deg, #172641, #0b1325); }
.ladder[data-fold="1"] [data-depth="1"], .ladder[data-fold="2"] [data-depth="2"], .ladder[data-fold="3"] [data-depth="3"], .ladder[data-fold="4"] [data-depth="4"], .ladder[data-fold="5"] [data-depth="5"], .ladder[data-fold="6"] [data-depth="6"] { opacity: 1; }
.ladder[data-fold="5"], .ladder[data-fold="6"] { color: var(--paper); }
.ladder__inner { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); }
.ladder__head { display: grid; gap: 0.8rem; max-width: 42rem; }
.ladder__title { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); }
.ladder__head p { font-size: 1.15rem; opacity: 0.88; }
.ladder__rungs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rung { min-height: 42px; padding: 0.5rem 1.05rem; border: 1.5px solid rgb(43 42 38 / 0.25); border-radius: 999px; background: rgb(251 249 244 / 0.45); color: var(--ink); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: background-color 0.3s var(--ease), border-color 0.3s, color 0.3s, transform 0.4s var(--ease); }
.rung:hover { background: rgb(251 249 244 / 0.8); }
.rung:active { transform: scale(0.97); }
.rung[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.ladder[data-fold="5"] .rung, .ladder[data-fold="6"] .rung { border-color: rgb(243 238 227 / 0.35); background: rgb(243 238 227 / 0.08); color: var(--paper); }
.ladder[data-fold="5"] .rung[aria-selected="true"], .ladder[data-fold="6"] .rung[aria-selected="true"] { border-color: var(--paper); background: var(--paper); color: var(--site-night); }
.ladder__stage { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
.ladder__pages, .ladder__pics { display: grid; }
.lp, .lpic { grid-area: 1 / 1; }
.lp {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.25rem;
  min-height: 100%;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--r-card);
  background: var(--foam);
  color: var(--ink);
  box-shadow: var(--shadow-deep);
  transition: opacity 0.5s var(--ease), transform 0.6s var(--ease), visibility 0s linear 0s;
}
.lp:not(.is-on) { visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s; }
.lp__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; font-size: 0.9rem; }
.lp__badge { width: 40px; flex: none; }
.lp__badge svg, .stop__badge svg, .row__badge svg, .set-card__badge svg, .fold-tab__badge svg, .lt__badge svg, .ed-fold__badge svg { width: 100%; height: auto; }
.lp__head b { font-weight: 700; margin-right: 0.25rem; }
.lp__book { margin-left: auto; color: var(--ink-soft); font-size: 0.85rem; font-style: italic; text-decoration: none; }
.lp__book:hover { text-decoration: underline; }
.lp__text { align-self: center; }
.lp__text > * { margin: 0; }
.lp__coming { align-self: center; color: var(--ink-soft); font-size: 1.05rem; }
.lp__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lp__video { color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
.lp__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin: 0; font-family: var(--font-body); }
.lp__meta div { display: grid; }
.lp__meta dt { color: var(--ink-soft); font-size: 0.75rem; font-weight: 600; }
.lp__meta dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.lpic { margin: 0; overflow: hidden; border-radius: var(--r-card); aspect-ratio: 4 / 3; box-shadow: var(--shadow-deep); transition: opacity 0.6s var(--ease), transform 0.8s var(--ease); }
.lpic:not(.is-on) { opacity: 0; transform: scale(1.02); pointer-events: none; }
.lpic picture, .lpic img { width: 100%; height: 100%; object-fit: cover; }
/* The frame's height comes from aspect-ratio, which a percentage height cannot see: pin the
   diagram to the frame's box instead, and let the SVG's own viewBox letterbox it. */
.lpic--diagram { position: relative; background: var(--foam); }
.lpic--diagram .diagram { position: absolute; inset: 1rem; }
.lpic--diagram svg { width: 100%; height: 100%; }
.ladder__control { display: grid; gap: 0.6rem; padding-top: 0.5rem; }
.ladder__label { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: space-between; font-weight: 600; font-size: 0.95rem; }
.ladder__label output { font-weight: 700; }
.ladder__range { width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.ladder__range::-webkit-slider-runnable-track { height: 12px; border-radius: 999px; background: var(--fold-ramp); box-shadow: inset 0 0 0 1px rgb(12 20 38 / 0.12); }
.ladder__range::-moz-range-track { height: 12px; border-radius: 999px; background: var(--fold-ramp); }
.ladder__range::-webkit-slider-thumb { width: 34px; height: 34px; margin-top: -11px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 4px 14px rgb(12 20 38 / 0.35); -webkit-appearance: none; appearance: none; transition: transform 0.3s var(--ease); }
.ladder__range::-moz-range-thumb { width: 28px; height: 28px; border: 3px solid var(--ink); border-radius: 50%; background: var(--paper); box-shadow: 0 4px 14px rgb(12 20 38 / 0.35); }
.ladder__range:active::-webkit-slider-thumb { transform: scale(1.12); }
.ladder__range:focus-visible { box-shadow: none; }
.ladder__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.ladder__range:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
.ladder__stops { position: relative; height: 5.4rem; margin: 0; padding: 0; list-style: none; }
/* Each stop under its notch: --at (0 first … 1 last, set by set.mjs) across the thumb's travel. */
.ladder__stops li { position: absolute; top: 0; left: calc(17px + (100% - 34px) * var(--at, 0)); transform: translateX(-50%); }
.stop { display: grid; justify-items: center; gap: 0.2rem; padding: 0.3rem 0.5rem; border: 0; border-radius: 14px; background: none; cursor: pointer; transition: transform 0.4s var(--ease); }
.stop:hover { transform: translateY(-2px); }
.stop__badge { width: 38px; transition: transform 0.5s var(--ease); }
.stop[aria-current="true"] .stop__badge { transform: scale(1.18) translateY(-2px); }
.stop__stage { font-size: 0.82rem; font-weight: 700; white-space: nowrap; }
.stop__ages { font-size: 0.75rem; opacity: 0.75; }
.ladder__source { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.75rem; font-size: 0.9rem; }
.ladder__source > span:first-child { font-weight: 700; }
.ladder__source a { color: inherit; text-underline-offset: 0.2em; }
.ladder__n { opacity: 0.72; }
@media (max-width: 900px) {
  .ladder__stage { grid-template-columns: 1fr; }
  .ladder__pics { order: -1; }
  .lpic { aspect-ratio: 16 / 10; }
  /* On a phone the slider sits above the page, so a shorter or longer version never moves the
     control under the reader's thumb; each card is then only as tall as its own text. */
  .ladder__control { order: 2; }
  .ladder__stage { order: 3; }
  .ladder__source { order: 4; }
  .lp:not(.is-on) { display: none; }
  .ladder__label { flex-direction: column; gap: 0.1rem; }
  .ladder__rungs { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 0.5rem; scrollbar-width: none; }
  .rung { flex: none; }
  .stop__stage, .stop__ages { display: none; }
  .ladder__stops { height: 3rem; }
}

/* A book's words at web sizes, in the fold's own reading face. */
.web.fold-1 { --read: clamp(1.5rem, 1.1rem + 1.4vw, 2.15rem); --read-lh: 1.36; --type-aside: 1.35rem; --type-bubble: 1.3rem; --type-caption: 1.05rem; --guide-size: 104px; }
.web.fold-2 { --read: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); --read-lh: 1.32; --type-aside: 1.3rem; --type-bubble: 1.25rem; --type-caption: 1rem; --guide-size: 104px; }
.web.fold-3 { --read: clamp(1.28rem, 1.02rem + 0.9vw, 1.7rem); --read-lh: 1.5; --type-aside: 1.2rem; --type-bubble: 1.15rem; --type-caption: 0.98rem; --guide-size: 96px; }
.web.fold-4 { --read: clamp(1.14rem, 1rem + 0.45vw, 1.35rem); --read-lh: 1.55; --type-aside: 1.08rem; --type-bubble: 1.05rem; --type-caption: 0.95rem; --guide-size: 88px; }
.web.fold-5 { --read: 1.08rem; --read-lh: 1.62; --type-aside: 1rem; --type-bubble: 1rem; --type-caption: 0.9rem; --guide-size: 80px; }
.web.fold-6 { --read: 1.1rem; --read-lh: 1.72; --type-aside: 0.98rem; --type-bubble: 0.98rem; --type-caption: 0.88rem; --guide-size: 80px; }
.web .t, .web .list, .web .quiz, .web .note, .web .glossary, .web .quote p { font-family: var(--font-text); font-size: var(--read); line-height: var(--read-lh); word-spacing: var(--type-word-spacing); }
.web .t + .t { margin-top: 0.7em; }
.web .h { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--ink); line-height: 1.12; }
.web .h2 { margin: 1.4em 0 0.5em; font-size: calc(var(--read) * 1.65); }
.web .h3 { margin: 1.3em 0 0.4em; font-size: calc(var(--read) * 1.3); }
.web .h4 { margin: 1.2em 0 0.3em; font-size: calc(var(--read) * 1.12); }
.web .list { padding-left: 1.2em; }
.web .list li + li { margin-top: 0.25em; }
.web .note { color: var(--ink-soft); font-size: calc(var(--read) * 0.82); }
.web .wow { margin: 1.5rem 0; border-radius: 4px 0 4px 4px; }
.web .guide { margin: 1.5rem 0; align-items: flex-start; }
.web .guide__inset picture, .web .guide__inset img { width: 100%; height: 100%; }
.web .guide__bubble { max-width: 34rem; }
.web .sidebar { margin: 1.75rem 0; padding: 1.25rem 1.5rem; border-radius: var(--r-card); background: var(--fold-tint); }
.web .sidebar__title { margin-bottom: 0.6rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: calc(var(--read) * 1.15); }
.web .quote { margin: 1.75rem 0; padding-left: 1.25rem; border-left: 3px solid var(--fold); }
.web .quote footer { margin-top: 0.5rem; color: var(--ink-soft); font-size: 0.9rem; }
.web .quiz { padding-left: 1.4em; }
.web .quiz li + li { margin-top: 0.9rem; }
.web .quiz__a summary { color: var(--accent-deep); font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.web .quiz__a p { margin-top: 0.3rem; color: var(--ink-2); }
.web .glossary { display: grid; gap: 0.6rem; margin: 1rem 0; }
.web .glossary dt { font-weight: 700; }
.web .glossary dd { margin: 0; }
.web .fig { margin: 2rem 0; }
.web .fig__pic img { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-media); object-fit: cover; }
.web .fig--diagram .diagram { padding: 1rem; border-radius: var(--r-media); background: var(--foam); border: 1px solid var(--line); }
.web .fig--diagram { max-width: 38rem; margin-inline: auto; }
.web .diagram svg { width: 100%; height: auto; }
.fig__coming { display: grid; place-items: center; min-height: 10rem; border: 1.5px dashed var(--line); border-radius: var(--r-media); color: var(--ink-soft); font-size: 0.9rem; }
.web .caption { font-size: var(--type-caption); }
.web sup.note-ref { font-family: var(--font-body); font-size: 0.68em; line-height: 0; }
.web sup.note-ref a { padding: 0 0.15em; color: var(--accent-deep); font-weight: 700; text-decoration: none; }

/* The ▶ chip that opens a rung's clip. */
.clip-chip { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 34px; margin: 0.4rem 0 0; padding: 0.3rem 0.8rem 0.3rem 0.6rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--foam); color: var(--ink); font: 600 0.85rem/1 var(--font-body); vertical-align: middle; cursor: pointer; transition: transform 0.4s var(--ease), border-color 0.3s, background-color 0.3s; }
.clip-chip:hover { border-color: var(--ink); }
.clip-chip:active { transform: scale(0.97); }
.clip-chip .icon { color: var(--accent-deep); }
.clip-chip__len { color: var(--ink-soft); font-weight: 500; }
.clip-chip--solid { min-height: 44px; margin: 0; padding: 0.55rem 1.1rem 0.55rem 0.85rem; border-color: var(--ink); background: var(--ink); color: var(--paper); font-size: 0.95rem; }
.clip-chip--solid .icon { color: var(--amber); }
.clip-chip--solid .clip-chip__len { color: rgb(243 238 227 / 0.7); }
.clip-chip--solid:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* ---------- Footer ---------- */
.footer { padding: 4rem 0 3rem; background: var(--site-footer); color: rgb(243 238 227 / 0.78); font-size: 0.92rem; }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 2.5rem 4rem; }
.footer__logo { display: inline-block; color: var(--paper); text-decoration: none; }
.footer__logo svg { width: auto; height: 34px; }
.footer__logo .wordmark { font-size: 1.6rem; }
.footer__tag { margin-top: 0.75rem; font: italic 400 1.35rem/1.2 var(--font-display-soft); color: var(--amber); }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.footer__nav ul { display: grid; align-content: start; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.footer__nav a { text-decoration: none; }
.footer__nav a:hover { color: var(--paper); text-decoration: underline; }
.footer__small { grid-column: 1 / -1; display: grid; gap: 0.35rem; padding-top: 1.5rem; border-top: 1px solid rgb(243 238 227 / 0.12); color: rgb(243 238 227 / 0.58); font-size: 0.84rem; }
@media (max-width: 760px) { .footer__inner { grid-template-columns: 1fr; } }

/* ---------- The clip dialog ---------- */
.clip-dialog { width: min(92vw, 860px); max-width: none; max-height: none; padding: 0; overflow: visible; border: 0; background: transparent; color: var(--paper); }
.clip-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; }
.clip-dialog::backdrop { background: rgb(9 15 29 / 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.clip-dialog__frame { height: min(82vh, 680px); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 26px; background: #000; box-shadow: 0 30px 80px rgb(0 0 0 / 0.5); }
.clip-dialog__frame video { width: 100%; height: 100%; object-fit: cover; }
.clip-dialog__text { display: grid; gap: 0.75rem; }
.clip-dialog__who { color: var(--amber); font-weight: 700; }
.clip-dialog__line { font: 400 clamp(1.25rem, 1rem + 1vw, 1.8rem)/1.35 var(--font-display-sharp); }
.clip-dialog__note { color: rgb(243 238 227 / 0.65); font-size: 0.9rem; }
.clip-dialog__close { position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--paper); color: var(--ink); cursor: pointer; box-shadow: var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .clip-dialog[open] { animation: rise 0.5s var(--ease); } }
@media (max-width: 700px) {
  .clip-dialog[open] { grid-template-columns: 1fr; justify-items: center; gap: 1rem; }
  .clip-dialog__frame { height: min(66vh, 560px); }
  .clip-dialog__text { text-align: center; }
  .clip-dialog__close { top: -8px; right: 4px; }
}

/* ---------- Page heads (below the fixed nav) ---------- */
.set-head, .facts-head, .ed-head { padding-top: var(--top); padding-bottom: clamp(2rem, 4vw, 3rem); }
.li-head { padding-top: clamp(6rem, 8vw, 7rem); padding-bottom: 1.25rem; }
.li-head .page-title { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.2rem); }
.li-head .page-lede { margin-top: 0.5rem; font-size: 1.05rem; }
.lost { min-height: 60vh; padding-top: calc(var(--top) + 2rem); display: grid; align-content: start; gap: 1rem; }
.lost h1 { font-size: clamp(2.4rem, 1.5rem + 3vw, 4rem); }

/* ---------- The video series (the series' catalog page) ---------- */
/* Talking episodes are vertical (the clip dialog's 9:16 frame), so each player keeps that shape. */
.episodes { padding-bottom: var(--section); }
.episodes__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
.episode { display: grid; align-content: start; gap: 0.35rem; }
.episode__video { width: 100%; aspect-ratio: 9 / 16; margin-bottom: 0.5rem; border-radius: var(--r-media); object-fit: cover; background: #000; box-shadow: var(--shadow); }
.episode__name { font-size: 1.35rem; }
.episode__place { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- The set ---------- */
/* The cover row: whole printed fronts at one shared scale (--cw from set.mjs), standing on a shared
   baseline; fold, ages and stage are plain text under each cover, never over it. Subgrid keeps the
   baselines level when a label wraps. */
.set-fold-nav { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto auto; gap: 1.75rem 1rem; margin-top: 2rem; }
.set-fold-nav__item { display: grid; grid-row: span 2; grid-template-rows: subgrid; justify-items: center; row-gap: 0.6rem; color: var(--ink); text-decoration: none; }
.set-fold-nav__cover { display: block; align-self: end; width: var(--cw, 100%); aspect-ratio: var(--ar); overflow: hidden; border-radius: 2px 4px 4px 2px; box-shadow: var(--shadow); transition: transform 0.6s var(--ease); }
.set-fold-nav__label { display: grid; align-self: start; justify-items: center; gap: 0.15rem; text-align: center; }
.set-fold-nav__fold { color: var(--ink-soft); font-size: 0.72rem; font-weight: 700; line-height: 1.25; letter-spacing: 0.08em; text-transform: uppercase; }
.set-fold-nav__stage { font-family: var(--font-display-sharp); font-size: 0.95rem; font-weight: 600; line-height: 1.1; }
.set-fold-nav__item:hover .set-fold-nav__cover { transform: translateY(-4px); }
.set-fold-nav__item:focus-visible { box-shadow: none; }
.set-fold-nav__item:focus-visible .set-fold-nav__cover { box-shadow: var(--focus), var(--shadow); }
.set-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; padding-bottom: 2rem; }
.set-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--foam); }
/* World landing cards: the series' hero art above its logo. */
.world-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.world-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--line); }
.world-card__media picture, .world-card__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease-soft); }
.world-card:hover .world-card__img { transform: scale(1.03); }
.world-card__title { margin: 0; line-height: 1; }
.world-card__title a { display: inline-block; color: inherit; text-decoration: none; }
.world-card__title svg { width: auto; height: 38px; }
.set-card__stage { display: grid; place-items: center; min-height: 290px; padding: 2rem 1rem 2.25rem; --in: 21px; }
.set-card__stage--1 { background: linear-gradient(180deg, #fcf5d8, #f2e3a6); }
.set-card__stage--2 { background: linear-gradient(180deg, #fbeccb, #f3d08a); }
.set-card__stage--3 { background: linear-gradient(180deg, #f8ddcf, #eaa688); }
.set-card__stage--4 { background: linear-gradient(180deg, #d4ebe0, #79b9a3); }
.set-card__stage--5 { background: linear-gradient(180deg, #4f93bf, #1f5578); }
.set-card__stage--6 { background: linear-gradient(180deg, #22365c, #0d1628); }
.set-card__text { display: grid; align-content: start; gap: 0.85rem; padding: 1.4rem 1.5rem 1.6rem; }
.set-card__fold { display: flex; align-items: center; gap: 0.55rem; font-size: 0.88rem; font-weight: 600; }
.set-card__badge { width: 30px; }
.set-card__title { font-size: 1.65rem; }
.set-card__title span { display: block; margin-top: 0.2rem; font-style: italic; font-weight: 400; font-size: 0.75em; }
.set-card__blurb { color: var(--ink-2); }
.set-card__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.25rem; }
.set-foot { padding: 1.5rem 0 var(--section); color: var(--ink-soft); }
@media (max-width: 1000px) {
  .set-fold-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 0.75rem; }
  .set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-card__stage { --in: 16px; min-height: 230px; }
}
@media (max-width: 640px) {
  .set-fold-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .set-grid { grid-template-columns: 1fr; }
}

/* ---------- The fact bank ---------- */
.facts { padding-bottom: 2rem; }
.filters { display: grid; gap: 1.1rem; padding: clamp(1rem, 2.5vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--foam); }
.filters__search { display: grid; gap: 0.4rem; max-width: 30rem; }
.filters__search label, .filters__group legend { font-size: 0.85rem; font-weight: 700; }
.filters__search input { min-height: 48px; padding: 0 1.1rem; border: 1.5px solid #b9b4a8; border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; }
.filters__search input::placeholder { color: #75716a; }
.filters__search input:focus-visible { border-color: var(--ink); }
.filters__group { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; border: 0; }
.filters__group legend { width: 100%; margin-bottom: 0.4rem; padding: 0; }
.filters__note { color: var(--ink-soft); font-size: 0.88rem; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 38px; padding: 0.35rem 0.9rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--paper); font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background-color 0.3s var(--ease), border-color 0.3s, color 0.3s; }
.chip span { color: var(--ink-soft); font-weight: 500; font-variant-numeric: tabular-nums; }
.chip:hover:not(:disabled) { border-color: var(--ink); }
.chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.chip[aria-pressed="true"] span { color: rgb(243 238 227 / 0.72); }
.chip:disabled { opacity: 0.45; cursor: not-allowed; }
.chip--fold::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--fold-c); }
.facts__count { margin: 1.5rem 0 1rem; color: var(--ink-soft); font-weight: 600; }
.facts__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 32rem), 1fr)); gap: 1rem; align-items: start; }
.facts__none { padding: 2rem 0; color: var(--ink-soft); }
.fact { display: grid; gap: 0.75rem; padding: clamp(1.1rem, 2vw, 1.5rem); border: 1px solid var(--line); border-radius: var(--r-card); background: var(--foam); scroll-margin-top: 6rem; }
.fact:target { box-shadow: 0 0 0 3px var(--amber); }
.fact__head { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; font-size: 0.8rem; font-weight: 700; }
.fact__topic { color: var(--ink-soft); }
.conf { padding: 0.2rem 0.6rem; border-radius: 999px; }
.conf--established { background: color-mix(in srgb, #5C8A3C 22%, var(--foam)); color: #3F6329; }
.conf--well-supported { background: color-mix(in srgb, #2E8B87 20%, var(--foam)); color: #1d5f5c; }
.conf--emerging { background: color-mix(in srgb, var(--amber) 28%, var(--foam)); color: var(--amber-deep); }
.fact .fact__claim { font-size: 1.3rem; line-height: 1.25; }
.fact__claim a { text-decoration: none; }
.fact__claim a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; }
.fact__detail { color: var(--ink-2); }
.fact__rows { display: grid; gap: 0.45rem; margin: 0; font-size: 0.93rem; }
.fact__rows div { display: grid; grid-template-columns: 6.2rem minmax(0, 1fr); gap: 0.75rem; }
.fact__rows dt { color: var(--ink-soft); font-weight: 600; }
.fact__rows dd { margin: 0; }
.fact__rows q { font-weight: 600; }
.nums { margin: 0; padding: 0; list-style: none; }
.nums small { display: block; color: var(--ink-soft); }
.fact__used { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.85rem; }
.fact__label { margin-right: 0.3rem; color: var(--ink-soft); font-weight: 600; }
.used { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem 0.15rem 0.45rem; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; text-decoration: none; }
.used::before { content: ""; width: 9px; height: 9px; border-radius: 3px; background: var(--fold-c); }
.used--none { border-style: dashed; color: var(--ink-soft); font-weight: 500; }
.used--none::before { display: none; }
.fact__sources summary, .myth .fact__sources summary { color: var(--accent-deep); font-size: 0.9rem; font-weight: 700; cursor: pointer; }
.sources { display: grid; gap: 0.45rem; margin: 0.6rem 0 0; padding-left: 1.2rem; font-size: 0.9rem; }
.sources a { color: var(--ink); font-weight: 700; }
.sources__title { color: var(--ink-2); }
.sources__kind { color: var(--ink-soft); font-size: 0.82rem; }
.myths { padding: var(--section) 0; }
.myths__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; align-items: start; }
.myth { display: grid; gap: 0.6rem; padding: 1.25rem 1.4rem; border-radius: var(--r-card); background: var(--paper-2); scroll-margin-top: 6rem; }
.myth p { color: var(--ink-2); font-size: 0.95rem; }
.myth .myth__claim { font-size: 1.2rem; }

/* ---------- Look inside ---------- */
.li { padding-bottom: var(--section); }
.li__tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; overflow-x: auto; padding-bottom: 0.25rem; scrollbar-width: none; }
.fold-tab { flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 48px; padding: 0.35rem 1rem 0.35rem 0.4rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--foam); font-weight: 600; cursor: pointer; transition: background-color 0.3s var(--ease), color 0.3s, border-color 0.3s; }
.fold-tab__badge { width: 34px; }
.fold-tab[aria-selected="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
/* Match fact/educator anchors: focused preview tabs must clear the floating navigation. */
.fold-tab { scroll-margin-top: 6rem; }
/* Deep links land below the tab strip, leaving its 48px controls clear of the same header. */
.li-panel { scroll-margin-top: calc(6rem + 48px + var(--gutter)); }
.li-panel__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 0.25rem 0.9rem; margin-top: 0.75rem; text-align: center; }
.li-panel__head h2 { font-size: 1.25rem; }
.li-panel__head p { color: var(--ink-soft); font-size: 0.95rem; }
.flip { display: grid; gap: 0.9rem; }
.flip__stage {
  --pw: calc((min(100vw, var(--wrap)) - 2 * var(--gutter)) / 2);
  display: flex;
  justify-content: center;
  align-items: center;
  --ph: clamp(280px, calc(100dvh - 24rem), 720px);
  padding: 1.25rem;
  border-radius: var(--r-card);
  background: radial-gradient(80% 90% at 50% 40%, #e9e2d3, #d8cfbd);
  perspective: 2200px;
  touch-action: pan-y;
}
.flip__page { width: min(var(--pw) - 1.5rem, calc(var(--ph) * var(--page-ar))); aspect-ratio: var(--page-ar); margin: 0; background: #fff; box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 22px 40px -18px rgb(0 0 0 / 0.45); }
.flip__page picture, .flip__page img { width: 100%; height: 100%; object-fit: cover; }
.flip__page--verso { transform-origin: right center; }
.flip__page--recto { transform-origin: left center; }
.flip__page--verso:not(:only-child) { box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 22px 40px -18px rgb(0 0 0 / 0.45), inset -18px 0 22px -18px rgb(0 0 0 / 0.35); }
.flip__page--recto:not(:only-child) { box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 22px 40px -18px rgb(0 0 0 / 0.45), inset 18px 0 22px -18px rgb(0 0 0 / 0.3); }
.flip__page--verso img { box-shadow: inset -20px 0 20px -20px #000; }
@media (prefers-reduced-motion: no-preference) {
  .flip__page.is-in[data-dir="next"] { animation: turn-next 0.55s var(--ease) both; }
  .flip__page.is-in[data-dir="prev"] { animation: turn-prev 0.55s var(--ease) both; }
}
@keyframes turn-next { from { opacity: 0; transform: rotateY(-14deg) translateX(18px); } }
@keyframes turn-prev { from { opacity: 0; transform: rotateY(14deg) translateX(-18px); } }
.flip__bar { display: flex; justify-content: center; align-items: center; gap: 1rem; }
.flip__where { min-width: 10rem; text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.round { display: grid; place-items: center; width: 50px; height: 50px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--foam); cursor: pointer; transition: transform 0.4s var(--ease), background-color 0.3s; }
.round:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.round:active:not(:disabled) { transform: scale(0.95); }
.round:disabled { opacity: 0.35; cursor: default; }
.flip__range { width: min(100%, 40rem); justify-self: center; accent-color: var(--ink); }
.flip--coming { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2rem; padding: 2rem; border: 1.5px dashed var(--line); border-radius: var(--r-card); color: var(--ink-soft); }
.flip__cover { width: 140px; aspect-ratio: var(--page-ar, 2 / 3); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .flip__stage { --pw: calc(100vw - 2 * var(--gutter)); min-height: 0; padding: 1rem; }
  .flip__page { width: min(var(--pw) - 2rem, calc(60vh * var(--page-ar))); }
  .flip--coming { grid-template-columns: 1fr; }
}

/* ---------- Educators ---------- */
.ed-ladder, .ed-class, .ed-folds { padding-bottom: var(--section); }
.ed-ladder h2, .ed-class h2, .ed-folds h2 { margin-bottom: 0.75rem; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.8rem); }
.section-sub { margin-bottom: 1.75rem; }
.ladder-cards { display: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 0.75rem; }
.lc { padding: 1rem 1.1rem; border: 1px solid var(--line); border-top: 6px solid var(--fold-c); border-radius: var(--r-card); background: var(--foam); }
.lc__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; font-size: 1.2rem; }
.lc__head .lt__badge { width: 34px; margin: 0; }
.lc dl { display: grid; gap: 0.35rem; margin: 0; }
.lc dl div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.5rem; }
.lc dt { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
.lc dd { margin: 0; font-weight: 600; }
.lc small { color: var(--ink-soft); font-weight: 500; }
/* Six columns need ~820px: below 900px each fold gets its own card with the same rows. */
@media (max-width: 900px) {
  .ladder-table { display: none; }
  .ladder-cards { display: grid; }
}
.ladder-table { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--foam); }
.ladder-table table { width: 100%; min-width: 820px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ladder-table th, .ladder-table td { padding: 0.85rem 0.8rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.ladder-table tbody tr:last-child th, .ladder-table tbody tr:last-child td { border-bottom: 0; }
.ladder-table thead th { position: relative; padding-top: 1.1rem; font-weight: 700; }
.ladder-table thead th[style]::before { content: ""; position: absolute; inset: 0 0 auto; height: 6px; background: var(--fold-c); }
.lt__badge { display: block; width: 40px; margin-bottom: 0.4rem; }
.ladder-table tbody th { color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; white-space: nowrap; }
.ladder-table td { font-weight: 600; }
.ladder-table small { display: block; color: var(--ink-soft); font-weight: 500; }
.ed-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: step; }
.ed-steps li { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: 3.4rem 1.3rem 1.4rem; border-radius: var(--r-card); background: var(--foam); border: 1px solid var(--line); counter-increment: step; }
.ed-steps li::before { content: counter(step); position: absolute; top: 1rem; left: 1.3rem; font: italic 400 2rem/1 var(--font-display-sharp); color: var(--accent-deep); }
.ed-steps h3 { font-size: 1.2rem; }
.ed-steps p { color: var(--ink-2); font-size: 0.97rem; }
.ed-fold { display: grid; gap: 1.25rem; margin-top: 1rem; padding: clamp(1.25rem, 2.5vw, 2rem); border: 1px solid var(--line); border-left: 6px solid var(--fold-c); border-radius: var(--r-card); background: var(--foam); scroll-margin-top: 6rem; }
.ed-fold__head { display: flex; align-items: center; gap: 1rem; }
.ed-fold__badge { width: 48px; flex: none; }
.ed-fold__head h3 { font-size: 1.5rem; }
.ed-fold__head p { color: var(--ink-soft); font-weight: 600; font-size: 0.92rem; }
.ed-fold__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; }
.ed-fold__cols h4 { margin-bottom: 0.5rem; font: 700 0.95rem/1.2 var(--font-body); }
.ed-fold__cols p { color: var(--ink-2); }
.ed-fold__cols p + p { margin-top: 0.75rem; }
.ed-fold__cols .ed-note { margin-bottom: 0.45rem; color: var(--ink-soft); font-size: 0.88rem; font-weight: 600; }
.ed-q { display: grid; gap: 0.45rem; margin: 0; padding-left: 1.2rem; }
.ed-words { display: grid; gap: 0.45rem; margin: 0; }
.ed-words div { display: grid; gap: 0.05rem; }
.ed-words dt { font-weight: 700; }
.ed-words dd { margin: 0; color: var(--ink-2); font-size: 0.93rem; }
@media (max-width: 900px) { .ed-fold__cols { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
}