/* ============================================================
 FONT — Fredoka (self-hosted variable woff2)
 ============================================================
 Single declaration covers all weights (300-700) — Fredoka is shipped as
 a variable font; browsers pick the weight via the font-weight property.
 Self-hosted at Web/site/Fredoka.woff2 — no third-party CDN, no Google
 Fonts. Honors the audit constraint in UI INBOX/FONT_AUDIT.md §8
 ("no CDN, no Google Fonts, no @import") AND the site's zero-third-
 party-trackers posture in the FAQ / Privacy pages. Self-hosting bundle
 = 38KB woff2 + this one CSS rule.
 ============================================================ */
@font-face {
 font-family: 'Fredoka';
 font-style: normal;
 font-weight: 300 700;
 font-display: swap;
 src: url('Fredoka.woff2') format('woff2-variations'),
 url('Fredoka.woff2') format('woff2');
}

/* ============================================================
 The Great Otter Dam — shared site styles
 Used by: index.html (consolidated landing+about+faq), privacy.html,
 terms.html. Each page also has a small page-specific style block if
 needed (e.g., FAQ <details> styles live here; about's companion-card
 grid lives here; legal-page TLDR box lives here).

 Architecture lock 2026-05-19:
 - Multi-section index.html replaced standalone about.html + faq.html
 - privacy + terms kept as separate files for legal citation URLs
 - All 3 HTML files share this single stylesheet
 ============================================================ */

:root {
 --frame: #0d2b35;
 --frame-deep: #061a21;
 --cream: #f5ead0;
 --star: #fdd835;
 --gold-warm: #ffb627;
 --ember: #ff8f00;
 --ember-hi: #ffb53d;
 /* 2026-05-26 — action-green tokens (parity with play.html). Were referenced
    by existing rules (.status-card-label etc.) without ever being declared
    here; the rgb-triplet variant is needed for the chapter-emoji drop-shadow
    glow recipe parametrized via accent vars on status-card variants. */
 --color-action-green: #34c759;
 --color-action-green-rgb: 52,199,89;
 --star-rgb: 253,216,53;
}

*, *::before, *::after { box-sizing: border-box; }

html {
 /* Dark fallback so the page never shows white between paint frames or
 while the chapter-bg layers initialize. */
 background: var(--frame);
}
html, body {
 margin: 0; padding: 0;
 color: var(--cream);
 font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", "Segoe UI", system-ui, sans-serif;
 -webkit-font-smoothing: antialiased;
 min-height: 100vh;
}
body {
 /* Transparent so chapter-bg layers below show through (when present). */
 background: transparent;
 display: flex;
 flex-direction: column;
 align-items: stretch;
 position: relative;
 overflow-x: hidden;
 line-height: 1.55;
}

a { color: inherit; }

/* ============================================================
 BLOCK: chapter background (landing only — driven by
 site.js cycle every 12s with 4s crossfade)
 ============================================================ */
.chapter-bg {
 position: fixed;
 inset: 0;
 z-index: -2;
 opacity: 0;
 transition: opacity 4s ease-in-out;
 pointer-events: none;
 background:
 /* (1) wet-sheen highlight (top) */
 radial-gradient(ellipse 70% 50% at 50% 12%,
 rgba(255,255,255,0.10) 0%,
 rgba(255,255,255,0.04) 40%,
 rgba(255,255,255,0.00) 72%),
 /* (2) dam-timber logs (per Card V2 mockup) */
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='80' viewBox='0 0 1000 80' preserveAspectRatio='none'><g transform='translate(80 22) rotate(-3)'><rect width='220' height='9' rx='3' fill='%23241710'/><rect width='220' height='1.5' fill='rgba(255,180,120,0.22)'/></g><g transform='translate(380 36) rotate(2)'><rect width='280' height='10' rx='3' fill='%23241710'/><rect width='280' height='1.5' fill='rgba(255,180,120,0.22)'/></g><g transform='translate(700 28) rotate(-1.5)'><rect width='180' height='9' rx='3' fill='%23241710' opacity='0.85'/><rect width='180' height='1.5' fill='rgba(255,180,120,0.18)'/></g><g transform='translate(40 50) rotate(-2)'><rect width='150' height='7' rx='3' fill='%23241710' opacity='0.75'/></g><g transform='translate(540 56) rotate(1)'><rect width='180' height='7' rx='3' fill='%23241710' opacity='0.78'/></g></svg>")
 no-repeat center 78% / 100% 8vh,
 /* (3) near ridge */
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='140' viewBox='0 0 1000 140' preserveAspectRatio='none'><path d='M0,140 L0,90 L30,70 L55,86 L90,62 L130,84 L175,58 L220,82 L260,64 L305,86 L345,60 L390,84 L435,64 L480,88 L525,58 L575,80 L620,62 L670,84 L715,66 L760,82 L805,60 L855,84 L900,68 L950,80 L1000,72 L1000,140 Z' fill='rgba(8,18,24,0.78)'/></svg>")
 no-repeat center 64% / 100% 16vh,
 /* (4) far ridge */
 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1000' height='120' viewBox='0 0 1000 120' preserveAspectRatio='none'><path d='M0,120 L0,80 L40,72 L70,84 L110,68 L150,82 L195,74 L240,86 L280,70 L320,82 L370,66 L420,80 L470,74 L520,84 L570,70 L620,82 L670,72 L720,86 L770,76 L820,84 L870,70 L920,82 L970,76 L1000,82 L1000,120 Z' fill='rgba(20,30,40,0.55)'/></svg>")
 no-repeat center 58% / 100% 12vh,
 /* (5) sun glow */
 radial-gradient(circle at 38% 52%,
 rgba(255,230,160,0.45) 0%,
 rgba(255,200,120,0.22) 14%,
 rgba(255,180,90,0.08) 28%,
 rgba(255,180,90,0.00) 42%),
 /* (6) multi-stop sky→water gradient (per-chapter palette via vars) */
 linear-gradient(180deg,
 var(--sky2) 0%,
 var(--sky2) 14%,
 var(--sky1) 40%,
 var(--wash) 54%,
 #6a4a3a 62%,
 var(--water) 100%);
}
.chapter-bg.active { opacity: 1; }

/* Per-chapter palette (matches Card V2 quads). */
.chapter-bg-1 { --sky2:#7a4a8e; --sky1:#f6a85b; --wash:#d68b3e; --water:#2a3a4e; }
.chapter-bg-2 { --sky2:#5d3b75; --sky1:#f0966e; --wash:#e57c5a; --water:#2a3548; }
.chapter-bg-3 { --sky2:#3d3666; --sky1:#c69adb; --wash:#b07ec4; --water:#1f2a48; }
.chapter-bg-4 { --sky2:#34465a; --sky1:#a8c1d6; --wash:#7896b3; --water:#243846; }
.chapter-bg-5 { --sky2:#284430; --sky1:#a3c89c; --wash:#6a9968; --water:#1f3530; }
.chapter-bg-6 { --sky2:#7a4c2c; --sky1:#ecc46a; --wash:#d8a64a; --water:#33342a; }
.chapter-bg-7 { --sky2:#5a2a4a; --sky1:#e08aab; --wash:#c9678a; --water:#3a263a; }
.chapter-bg-8 { --sky2:#1f2547; --sky1:#7e8fc4; --wash:#5e6fa8; --water:#1a233a; }
.chapter-bg-9 { --sky2:#3e2519; --sky1:#d28a5a; --wash:#b16438; --water:#2e2418; }
.chapter-bg-10 { --sky2:#2c1c3b; --sky1:#c46f9d; --wash:#a04b7c; --water:#1f1830; }

/* Page vignette (above chapter-bg, below content) */
.page-vignette {
 position: fixed;
 inset: 0;
 z-index: -1;
 pointer-events: none;
 background:
 linear-gradient(180deg,
 rgba(13,30,40,0.20) 0%,
 rgba(13,30,40,0.00) 22%,
 rgba(13,30,40,0.00) 58%,
 rgba(13,30,40,0.42) 100%);
}

/* Tiny "now showing Ch.N · Name" corner tag (landing only) */
.chapter-tag {
 position: fixed;
 top: 18px; left: 20px;
 z-index: 4;
 font-family: "SF Mono", Menlo, "Courier New", monospace;
 font-size: 11px;
 letter-spacing: 0.14em;
 text-transform: uppercase;
 color: rgba(245,234,208,0.55);
 pointer-events: none;
 transition: opacity 0.6s ease-in-out;
}
.chapter-tag b { color: rgba(245,234,208,0.85); font-weight: 600; letter-spacing: 0.16em; margin-right: 6px; }

/* ============================================================
 BLOCK: Sticky site header (used on privacy/terms; not on
 landing — the landing has its own hero with brand built in)
 ============================================================ */
.site-header {
 position: sticky; top: 0;
 display: flex; align-items: center; justify-content: space-between;
 padding: 14px 20px;
 background: rgba(13,30,40,0.92);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border-bottom: 1px solid rgba(244,234,212,0.08);
 z-index: 50;
}
.site-header a.brand {
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700;
 font-size: 20px;
 color: var(--cream);
 text-decoration: none;
 letter-spacing: -0.01em;
}
.site-header .nav-play {
 display: inline-flex; align-items: center; gap: 6px;
 padding: 8px 16px;
 background: linear-gradient(180deg, #f4a04a 0%, #e08038 100%);
 color: #fff; font-weight: 800; font-size: 14px;
 border-radius: 14px; text-decoration: none;
 box-shadow: 0 3px 0 #c46f00, 0 4px 10px rgba(196,111,0,0.30), inset 0 1px 0 rgba(255,255,255,0.40);
}
.site-header .nav-play:active {
 transform: translateY(2px);
 box-shadow: 0 1px 0 #c46f00, 0 2px 4px rgba(196,111,0,0.30), inset 0 1px 0 rgba(255,255,255,0.40);
}

/* ============================================================
 BLOCK: Hero (landing only)
 ============================================================ */
.hero {
 position: relative;
 flex: 1;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 56px 24px 80px;
 text-align: center;
 min-height: 100vh;
 z-index: 1;
}
.brand-mark {
 display: inline-flex;
 align-items: center;
 gap: 10px;
 margin-bottom: 28px;
 font-family: "SF Mono", Menlo, monospace;
 font-size: 12px;
 font-weight: 700;
 letter-spacing: 0.18em;
 text-transform: uppercase;
 color: rgba(245,234,208,0.82);
 text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.brand-mark .badge {
 display: inline-flex;
 width: 38px; height: 38px;
 align-items: center; justify-content: center;
 background: linear-gradient(180deg, var(--star) 0%, var(--gold-warm) 100%);
 color: #061a21;
 border-radius: 50%;
 font-size: 20px;
 box-shadow:
 0 2px 6px rgba(0,0,0,0.45),
 inset 0 1px 0 rgba(255,255,255,0.6),
 0 0 0 2px rgba(0,0,0,0.20);
}
/* Wordmark — Fredoka (rounded geometric, friendly kid-game feel) sourced
 from Google Fonts in each HTML head. Per Gonzo's design-package
 reference (UI INBOX/Claude Design Package/screens.jsx → "FREDOKA
 THROUGHOUT"), this is the visual identity for The Great Otter Dam.
 Pre-2026-05-19 evening this was Georgia serif (cream); swapped per
 Gonzo's "I don't like our main font" call.
 ─── Privacy note: Google Fonts is a third-party request, weakly at
 odds with the "zero data" posture. Pre-public-launch follow-up:
 self-host Fredoka.woff2 like Lexend already is. Tracked in PENDING_QS. */
.wordmark {
 /* Final state 2026-05-19 (post-polish-pass): Fredoka font, cream color.
    Path: started yellow Fredoka → reverted to Georgia cream per Gonzo
    ("prior font better...not the yellow") → revised again per "But keep
    our font on the game title Fredoka." Landing = Fredoka cream.
    Breath animation stays paused (tuned for yellow glow). */
 font-family: 'Fredoka', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
 font-weight: 700;
 font-size: clamp(48px, 12vw, 96px);
 line-height: 0.98;
 letter-spacing: -0.01em;
 color: var(--cream);
 margin: 4px 0 22px;
 text-shadow:
 0 2px 14px rgba(0,0,0,0.45),
 0 1px 0 rgba(0,0,0,0.20);
}
.wordmark .wm-row { display: block; }
.wordmark .wm-row + .wm-row { margin-top: -0.04em; }

.tagline {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
 font-size: clamp(18px, 4.4vw, 24px);
 font-weight: 600;
 color: rgba(244,234,212,0.94);
 max-width: 26ch;
 margin: 0 auto 44px;
 line-height: 1.45;
 text-shadow: 0 1px 8px rgba(0,0,0,0.45);
}
.cta-stack {
 display: flex;
 flex-direction: column;
 gap: 14px;
 width: 100%;
 max-width: 340px;
}

/* ============================================================
 BLOCK: CTAs (used on landing hero + inline within sections)
 ============================================================ */
.cta {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 18px 24px;
 border-radius: 14px; /* rounded-rect — matches the game's unified 14px buttons (was a 999px pill) */
 font-family: -apple-system, BlinkMacSystemFont, "Avenir Next", sans-serif;
 font-size: 17px;
 font-weight: 800;
 letter-spacing: 0.4px;
 text-decoration: none;
 transition: transform 0.08s ease, box-shadow 0.15s ease;
 -webkit-tap-highlight-color: transparent;
 cursor: pointer;
}
.cta-primary {
 background: linear-gradient(180deg, var(--ember-hi) 0%, var(--ember) 100%);
 color: #fff;
 box-shadow:
 0 6px 0 0 #c46f00,
 0 8px 24px rgba(196,111,0,0.45),
 inset 0 1px 0 rgba(255,255,255,0.42);
}
.cta-primary:active {
 transform: translateY(4px);
 box-shadow:
 0 2px 0 0 #c46f00,
 0 3px 8px rgba(196,111,0,0.30),
 inset 0 1px 0 rgba(255,255,255,0.42);
}
.cta-outline {
 background: rgba(13,30,40,0.42);
 color: var(--cream);
 border: 1.5px solid rgba(244,234,212,0.50);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
}
.cta-outline:active { background: rgba(13,30,40,0.62); }
.cta-smaller {
 font-size: 15px;
 padding: 14px 22px;
}

/* ============================================================
 BLOCK: Dedication / Facts (landing scroll strips)
 ============================================================ */
.dedication {
 position: relative;
 z-index: 1;
 padding: 36px 24px;
 text-align: center;
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
 font-size: 15px;
 line-height: 1.7;
 color: rgba(244,234,212,0.78);
 background: rgba(13,30,40,0.55);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border-top: 1px solid rgba(244,234,212,0.08);
 border-bottom: 1px solid rgba(244,234,212,0.08);
}
.dedication strong { color: var(--cream); font-style: normal; font-weight: 700; }

/* 2026-05-25 (Gonzo, COPY_OTTERDAM_UPDATE_v1) — Hero copy variant overrides.
   `.wordmark--claim` shrinks the wordmark sizing for a longer headline
   (was the brand wordmark "The Great / Otter Dam", now a 7-word claim).
   `.tagline--claim` widens the line cap + drops italic for a longer prose
   subhead. Both stay inside the original `.wordmark` and `.tagline` shells
   so the breathe animation + responsive media queries continue to apply. */
.wordmark--claim {
 font-size: clamp(28px, 6.5vw, 56px);
 letter-spacing: -0.005em;
 line-height: 1.06;
}
.tagline--claim {
 font-family: Georgia, "Times New Roman", serif;
 font-style: normal;
 font-size: clamp(15px, 3.8vw, 19px);
 font-weight: 500;
 max-width: 42ch;
 line-height: 1.55;
 color: rgba(244,234,212,0.92);
}

/* 2026-05-25 (Gonzo, COPY_OTTERDAM_UPDATE_v1) — "Where it's at" status strip.
   Sits between .dedication and .facts. Consolidates the live-vs-coming
   status that was scattered through the FAQ. Honesty guardrail: any item
   not yet shipped stays in "Coming."
   2026-05-25 (Gonzo follow-up #2) — went SOLID. The status strip lands over
   the mountain peaks of the landing scene where the chapter art is bright,
   so 0.55-0.86 rgba alpha was bleeding peaks through (visible on iPhone).
   Solid #0a1d28 matches the teal-dark token family and now reads as a
   proper pane regardless of what's behind. Same hex as .content-section's
   rgba(6,26,33,0.80) intent, just opaque. */
/* 2026-05-26 — Status strip restyled to inherit the .dedication strip recipe
   (frosted teal) + the .companion card recipe. Single .status-card class for
   both cards; --live / --coming variants only carry an accent CSS variable
   for the dot + bullet color. Reuses the existing chapter-emoji drop-shadow
   glow recipe for the dot (lines 1115-1129) — no new keyframes, no bespoke
   pulse. Live now ships with --color-action-green; Coming with --star. */
.status {
 position: relative;
 z-index: 1;
 padding: 36px 20px 44px;
 background: rgba(13,30,40,0.55);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border-top: 1px solid rgba(244,234,212,0.08);
 border-bottom: 1px solid rgba(244,234,212,0.08);
}
.status-grid {
 max-width: 880px;
 margin: 0 auto;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 16px;
}
@media (max-width: 640px) {
 .status-grid { grid-template-columns: 1fr; gap: 12px; }
}
/* .status-card values match .companion (bg / border / radius / padding) so
   the two read as the same card family. If a .glass-card mixin is ever
   extracted both can consume it. */
.status-card {
 background: rgba(244,234,212,0.06);
 border: 1px solid rgba(244,234,212,0.10);
 border-radius: 14px;
 padding: 20px 16px;
 --accent: var(--star);
 --accent-rgb: var(--star-rgb);
}
.status-card--live   { --accent: var(--color-action-green); --accent-rgb: var(--color-action-green-rgb); }
.status-card--coming { --accent: var(--star); --accent-rgb: var(--star-rgb); }
.status-card-label {
 display: flex; align-items: center; gap: 10px;
 font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
 text-transform: uppercase;
 color: var(--accent);
 margin-bottom: 12px;
}
/* Green glow recipe — same drop-shadow pair the chapter character emojis use
   at L1115-1129 (tight inner + wider bloom), parametrized via --accent-rgb so
   live = green, coming = gold. Static, not animated. */
.status-dot {
 width: 8px; height: 8px; border-radius: 50%;
 background: var(--accent);
 filter:
   drop-shadow(0 0 8px  rgba(var(--accent-rgb),0.70))
   drop-shadow(0 0 18px rgba(var(--accent-rgb),0.38));
}
.status-card--coming .status-dot { opacity: 0.75; }

.status-list { list-style: none; padding: 0; margin: 0; }
.status-list li {
 position: relative;
 padding: 8px 0 8px 22px;
 font-size: 14px; line-height: 1.5;
 color: rgba(244,234,212,0.85);
 border-top: 1px solid rgba(244,234,212,0.06);
}
.status-list li:first-child { border-top: none; }
.status-list li::before {
 position: absolute; left: 0; top: 9px;
 font-size: 12px; font-weight: 800; line-height: 1.2;
 color: var(--accent);
}
.status-card--live   .status-list li::before { content: "✓"; }
.status-card--coming .status-list li::before { content: "→"; }
.status-li-meta {
 display: block;
 font-size: 12px;
 color: rgba(244,234,212,0.55);
 margin-top: 2px;
 line-height: 1.4;
}

.facts {
 position: relative;
 z-index: 1;
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 1px;
 background: rgba(244,234,212,0.08);
}
.fact {
 padding: 26px 12px;
 text-align: center;
 background: rgba(13,30,40,0.72);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
}
.fact-icon { font-size: 28px; line-height: 1; margin-bottom: 10px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4)); }
.fact-label {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1.4px;
 text-transform: uppercase;
 color: var(--star);
 text-shadow: 0 0 10px rgba(253,216,53,0.30);
}
.fact-body { font-size: 12px; color: rgba(244,234,212,0.70); margin-top: 4px; line-height: 1.4; }

/* ============================================================
 BLOCK: Content sections (about + FAQ on landing, full content
 on privacy + terms)
 ============================================================ */
.content-section {
 position: relative;
 z-index: 1;
 background: rgba(6,26,33,0.80);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border-top: 1px solid rgba(244,234,212,0.06);
}
main, .content-section main {
 max-width: 680px;
 margin: 0 auto;
 padding: 48px 20px;
}
.pre-hero {
 font-size: 12px;
 font-weight: 800;
 letter-spacing: 1.6px;
 text-transform: uppercase;
 color: var(--star);
 margin-bottom: 12px;
 text-align: center;
}
.section-h1 {
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700;
 font-size: clamp(32px, 8vw, 48px);
 letter-spacing: -0.02em;
 line-height: 1.1;
 margin: 0 0 24px;
 text-align: center;
 color: var(--cream);
}
.lede {
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
 font-size: 19px;
 line-height: 1.6;
 color: rgba(244,234,212,0.85);
 text-align: center;
 max-width: 36ch;
 margin: 0 auto 40px;
}
.section-h2 {
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700;
 font-size: 26px;
 margin: 44px 0 14px;
 color: var(--cream);
}
.section-h2 .pre {
 display: block;
 font-family: -apple-system, BlinkMacSystemFont, sans-serif;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1.6px;
 text-transform: uppercase;
 color: var(--star);
 margin-bottom: 4px;
}
p { color: rgba(244,234,212,0.85); font-size: 16px; margin: 12px 0; }
p strong { color: var(--cream); font-weight: 700; }
ul { color: rgba(244,234,212,0.85); padding-left: 22px; font-size: 15px; }
li { margin: 6px 0; }
.updated {
 text-align: center;
 font-size: 13px;
 color: rgba(244,234,212,0.55);
 margin-bottom: 32px;
 font-style: italic;
}

/* Companion + skills + chapter list (about section) */
.companions {
 display: grid;
 gap: 16px;
 grid-template-columns: 1fr 1fr;
 margin: 28px 0 12px;
}
.companion {
 background: rgba(244,234,212,0.06);
 border: 1px solid rgba(244,234,212,0.10);
 border-radius: 14px;
 padding: 20px 16px;
 text-align: center;
}
.companion-emoji { font-size: 44px; line-height: 1; margin-bottom: 8px; }
.companion-portrait {
  display: block;
  width: 100%;
  max-width: 184px;
  height: 120px;
  margin: 0 auto 10px;
  object-fit: contain;
}
.companion-name {
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700; font-size: 20px;
 color: var(--cream);
}
.companion-role { font-size: 12px; color: rgba(244,234,212,0.62); margin-top: 4px; letter-spacing: 0.4px; }

.skills {
 display: grid;
 gap: 14px;
 grid-template-columns: 1fr;
 margin: 18px 0 0;
}
.skill {
 background: rgba(244,234,212,0.06);
 border-left: 3px solid var(--star);
 border-radius: 10px;
 padding: 16px 18px;
}
.skill h3 {
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700; font-size: 18px;
 margin: 0 0 6px;
 color: var(--cream);
}
.skill h3 .icon { font-size: 18px; margin-right: 6px; }
.skill p { font-size: 14px; margin: 0; color: rgba(244,234,212,0.72); }

.chapter-list {
 display: grid;
 gap: 8px;
 margin: 18px 0;
}
.chapter-row {
 display: flex; gap: 14px; align-items: center;
 padding: 12px 14px;
 background: rgba(244,234,212,0.04);
 border: 1px solid rgba(244,234,212,0.08);
 border-radius: 10px;
}
.chapter-num {
 font-family: Georgia, serif;
 font-weight: 700; font-size: 15px;
 color: var(--star);
 width: 32px; flex-shrink: 0;
 text-align: center;
}
.chapter-name { font-size: 14px; font-weight: 700; color: var(--cream); }
.chapter-emoji { font-size: 20px; flex-shrink: 0; }

/* FAQ collapsibles */
details {
 background: rgba(244,234,212,0.06);
 border: 1px solid rgba(244,234,212,0.10);
 border-radius: 12px;
 padding: 0;
 margin: 10px 0;
 overflow: hidden;
}
details[open] { background: rgba(244,234,212,0.08); }
summary {
 list-style: none;
 cursor: pointer;
 padding: 18px 56px 18px 20px;
 position: relative;
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700;
 font-size: 17px;
 color: var(--cream);
 -webkit-tap-highlight-color: transparent;
}
summary::-webkit-details-marker { display: none; }
summary::after {
 content: "+";
 position: absolute;
 right: 20px; top: 50%;
 transform: translateY(-50%);
 font-family: -apple-system, sans-serif;
 font-size: 22px;
 font-weight: 400;
 color: var(--star);
 line-height: 1;
 transition: transform 0.2s ease;
}
details[open] summary::after { content: "−"; }
details > div.answer {
 padding: 0 20px 18px;
 color: rgba(244,234,212,0.78);
 font-size: 15px;
 line-height: 1.6;
}
.answer p { margin: 10px 0; }
.answer p:first-child { margin-top: 0; }
.answer strong { color: var(--cream); font-weight: 700; }

/* 2026-05-26 — disclosure--hero variant. Same native <details>/<summary>
   primitive used by FAQ + vocabulary.html, but styled as a centered bold
   one-liner CTA card. Replaces dense section walls (Method, Why-it-works,
   Scaffolding, Research) with progressive disclosure — full content opens
   in place on tap. No JS needed.
   The .disclosure-headline shows the bold claim; .disclosure-sub is the
   optional second-line teaser (used in β-mode for Why-it-works where the
   first 2 sentences stay visible before the tap). */
details.disclosure--hero {
 background: rgba(13,30,40,0.55);
 border: 1px solid rgba(244,234,212,0.10);
 border-radius: 14px;
 margin: 22px 0;
 overflow: hidden;
}
details.disclosure--hero[open] {
 background: rgba(13,30,40,0.70);
 border-color: rgba(253,216,53,0.18);
}
details.disclosure--hero > summary {
 list-style: none;
 cursor: pointer;
 padding: 26px 60px 26px 24px;
 position: relative;
 font-family: Georgia, "Times New Roman", serif;
 font-weight: 700;
 font-size: clamp(20px, 4.6vw, 26px);
 line-height: 1.3;
 color: var(--cream);
 text-align: left;
 -webkit-tap-highlight-color: transparent;
}
details.disclosure--hero > summary::-webkit-details-marker { display: none; }
details.disclosure--hero > summary::after {
 content: "+";
 position: absolute;
 right: 22px; top: 50%;
 transform: translateY(-50%);
 font-family: -apple-system, sans-serif;
 font-size: 28px;
 font-weight: 300;
 color: var(--star);
 line-height: 1;
 transition: transform 0.28s ease, color 0.2s ease;
}
details.disclosure--hero[open] > summary::after {
 content: "−";
 color: var(--star);
}
details.disclosure--hero > summary:hover { background: rgba(253,216,53,0.04); }
details.disclosure--hero .disclosure-sub {
 display: block;
 font-family: Georgia, "Times New Roman", serif;
 font-style: italic;
 font-weight: 500;
 font-size: clamp(14px, 3vw, 16px);
 color: rgba(244,234,212,0.72);
 line-height: 1.55;
 margin-top: 10px;
}
details.disclosure--hero > div.disclosure-body {
 padding: 4px 24px 24px;
 color: rgba(244,234,212,0.84);
 font-size: 15px;
 line-height: 1.6;
}
details.disclosure--hero .disclosure-body p:first-child { margin-top: 0; }

/* 2026-05-26 — .honest-band callout strip. Promotes "Honest Limits" up
   from buried-deep to a high-visibility band placed right after the
   chapter list. Same vertical rhythm as .dedication (full-width, italic
   serif) but with a warm gold left-rule borrowed from .tldr to signal
   "important context, not a feature." */
.honest-band {
 position: relative;
 z-index: 1;
 padding: 32px 24px 36px;
 background: rgba(13,30,40,0.55);
 backdrop-filter: blur(8px);
 -webkit-backdrop-filter: blur(8px);
 border-top: 1px solid rgba(244,234,212,0.10);
 border-bottom: 1px solid rgba(244,234,212,0.10);
 box-shadow: inset 4px 0 0 var(--star);
}
.honest-band .honest-inner {
 max-width: 680px;
 margin: 0 auto;
 padding-left: 8px;
}
.honest-band .honest-label {
 display: inline-block;
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1.5px;
 text-transform: uppercase;
 color: var(--star);
 margin-bottom: 12px;
}
.honest-band p {
 font-family: Georgia, "Times New Roman", serif;
 font-size: clamp(15px, 3.4vw, 17px);
 line-height: 1.65;
 color: rgba(244,234,212,0.88);
 margin: 0 0 12px;
}
.honest-band p:last-child { margin-bottom: 0; }
.honest-band strong { color: var(--cream); font-weight: 700; }

/* 2026-05-25 — Words & Sources teaser list on index.html. Compact, scannable;
   each line is one chunk of provenance. Mirrors the dedication's vertical
   rhythm but keyed to the section content (not a full strip). */
.sources-summary {
 list-style: none;
 padding: 0;
 margin: 14px 0 18px;
}
.sources-summary li {
 padding: 10px 0;
 border-top: 1px solid rgba(244,234,212,0.08);
 font-size: 15px;
 line-height: 1.55;
 color: rgba(244,234,212,0.85);
}
.sources-summary li:first-child { border-top: none; }
.sources-summary li strong { color: var(--cream); }

/* Legal-page TLDR callout (privacy + terms) */
.tldr {
 background: rgba(253,216,53,0.08);
 border-left: 3px solid var(--star);
 border-radius: 8px;
 padding: 18px 20px;
 margin: 0 0 32px;
}
.tldr-label {
 font-size: 11px;
 font-weight: 800;
 letter-spacing: 1.4px;
 text-transform: uppercase;
 color: var(--star);
 margin-bottom: 6px;
}
.tldr p { margin: 0; font-size: 16px; color: var(--cream); line-height: 1.6; }

/* Section in-page CTA row (e.g., "Start playing" at end of about) */
.cta-row {
 margin-top: 48px;
 padding-top: 28px;
 border-top: 1px solid rgba(244,234,212,0.08);
 text-align: center;
}

/* Section divider arrow (between sections on consolidated landing) */
.section-divider {
 position: relative;
 z-index: 1;
 text-align: center;
 padding: 16px 0 0;
 color: rgba(244,234,212,0.42);
 font-size: 18px;
 background: rgba(6,26,33,0.80);
}

/* ============================================================
 BLOCK: Site footer nav (every page)
 ============================================================ */
.site-nav {
 position: relative;
 z-index: 1;
 padding: 36px 24px 44px;
 text-align: center;
 background: rgba(6,26,33,0.82);
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
}
.site-nav-row {
 display: flex;
 flex-wrap: wrap;
 gap: 18px 22px;
 justify-content: center;
 margin-bottom: 18px;
}
.site-nav a {
 color: rgba(244,234,212,0.70);
 font-size: 13px;
 font-weight: 700;
 letter-spacing: 0.6px;
 text-decoration: none;
 padding: 6px 0;
 border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--cream); border-bottom-color: rgba(244,234,212,0.42); }
.site-copy {
 font-size: 11px;
 color: rgba(244,234,212,0.32);
 letter-spacing: 0.8px;
}

/* Smooth scrolling for in-page anchor jumps (Learn more → #about, etc.) */
html { scroll-behavior: smooth; }

/* ============================================================
   POLISH PASS — 2026-05-19 (Claude Design Round 2 spec, locked)
   Ten subtle motion + ornament details. Appended at end so the cascade
   guarantees overrides win over the base rules above, and the whole
   block is reviewable / removable as one unit.

     1.  Scroll progress rail (orange ember, top, fills L→R)
     2.  CTA primary shine sweep (~7s period)
     3.  Wordmark glow breathe (7s)
     4.  Light motes drifting up (2 CSS layers, no JS)
     5.  Drop cap on About lede (Georgia gold)
     6.  Dedication strip book-quote ornaments
     7.  Skill cards color-coded (Heart rose · Flash gold · Phonics slate)
     8.  Chapter rows palette-tinted per chapter (--wash from bg cycle)
     9.  Companion emoji halos
     10. FAQ summary hover (warm gold tint)

   All animations honor (prefers-reduced-motion: reduce).
   ============================================================ */

/* Accent palette additions for skill cards + word-types + reuse. */
:root {
  --heart-rose:   #d4527a;
  --flash-gold:   #f4a04a;
  --vocab-green:  #6a9968;  /* Added 2026-05-19 for the 4th word kind
                                (Vocabulary). Same green family as
                                Ch.V Waterfall --wash for visual harmony. */
  --phonics-slate:#6e85a8;
}

/* (1) Scroll progress rail — slim ember strip at top, JS-driven width. */
.scroll-rail {
  position: fixed;
  top: 0; left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--ember-hi) 0%, var(--ember) 100%);
  box-shadow: 0 0 10px rgba(255,143,0,0.55), 0 0 2px rgba(255,179,61,0.85);
  z-index: 100;
  pointer-events: none;
  transition: width 0.08s ease-out;
}

/* (2) CTA shine sweep — diagonal highlight crosses the button every ~7s. */
.cta-primary { position: relative; overflow: hidden; isolation: isolate; }
.cta-primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,0) 100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: cta-shine 7s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes cta-shine {
  0%   { left: -60%; }
  18%  { left: 140%; }
  100% { left: 140%; }
}

/* (3) Wordmark glow breathe — PAUSED 2026-05-19 with the yellow-revert
       (Gonzo: "I like our prior font better for now"). The glow was tuned
       for yellow Fredoka; cream Georgia doesn't carry it the same way.
       Keyframes kept below so un-revert is a one-line uncomment. */
/*
.wordmark {
  animation: wordmark-breathe 7s ease-in-out infinite;
}
*/
@keyframes wordmark-breathe {
  0%, 100% {
    text-shadow:
      0 0 22px rgba(253,216,53,0.28),
      0 0 56px rgba(255,182,39,0.16),
      0 2px 14px rgba(0,0,0,0.45),
      0 1px 0    rgba(0,0,0,0.20);
  }
  50% {
    text-shadow:
      0 0 36px rgba(253,216,53,0.46),
      0 0 92px rgba(255,182,39,0.28),
      0 2px 14px rgba(0,0,0,0.45),
      0 1px 0    rgba(0,0,0,0.20);
  }
}

/* (4) Light motes drifting up — two CSS-only layers at different speeds. */
.motes {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.motes::before,
.motes::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100vh;
  width: 100%;
  height: 300vh;
  background-repeat: repeat-y;
  background-size: 100% 33.333%;
  will-change: transform;
}
.motes::before {
  background-image:
    radial-gradient(4px 4px at 12% 6%,  rgba(255,200,120,0.85), transparent 62%),
    radial-gradient(3.2px 3.2px at 28% 19%, rgba(253,216,53,0.80), transparent 62%),
    radial-gradient(4px 4px at 45% 36%, rgba(255,143,0,0.70), transparent 62%),
    radial-gradient(3.2px 3.2px at 64% 53%, rgba(255,200,120,0.80), transparent 62%),
    radial-gradient(4px 4px at 80% 13%, rgba(253,216,53,0.75), transparent 62%),
    radial-gradient(3.2px 3.2px at 91% 78%, rgba(255,200,120,0.75), transparent 62%),
    radial-gradient(4px 4px at 8% 92%,  rgba(255,143,0,0.62), transparent 62%),
    radial-gradient(3.2px 3.2px at 52% 88%, rgba(253,216,53,0.68), transparent 62%);
  animation: motes-rise 32s linear infinite;
}
.motes::after {
  background-image:
    radial-gradient(2.6px 2.6px at 18% 22%, rgba(253,216,53,0.78), transparent 62%),
    radial-gradient(2.6px 2.6px at 38% 64%, rgba(255,200,120,0.72), transparent 62%),
    radial-gradient(2.6px 2.6px at 58% 9%,  rgba(255,143,0,0.68), transparent 62%),
    radial-gradient(2.6px 2.6px at 72% 41%, rgba(253,216,53,0.72), transparent 62%),
    radial-gradient(2.6px 2.6px at 86% 71%, rgba(255,200,120,0.70), transparent 62%),
    radial-gradient(2.6px 2.6px at 3%  48%, rgba(253,216,53,0.68), transparent 62%);
  animation: motes-rise 22s linear infinite;
  opacity: 0.95;
}
@keyframes motes-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(-33.333%); }
}

/* (5) Drop cap on About-section lede — Georgia gold, classic book opener. */
.lede.has-drop {
  text-align: left;
  max-width: 38ch;
}
.lede.has-drop::first-letter {
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 700;
  font-size: 3.4em;
  line-height: 0.82;
  float: left;
  margin: 0.08em 0.12em -0.05em 0;
  color: var(--star);
  text-shadow:
    0 0 18px rgba(253,216,53,0.40),
    0 1px 0  rgba(0,0,0,0.30);
}

/* (6) Dedication strip — ornaments DROPPED 2026-05-19 per Gonzo:
       "Drop the quotes we are trying to polish."
       History: tried ❦ florettes (centered above + below), then large
       curly "…" brackets (diagonal), then re-tuned padding/line-height
       for cut-off — net effect didn't earn its keep. Strip now stands on
       its own with just the Georgia-italic copy. Block kept here, fully
       commented, for easy revisit if we ever want to reintroduce. */
/*
.dedication {
  padding-top: 56px;
  padding-bottom: 64px;
}
.dedication::before,
.dedication::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 76px);
  line-height: 0.9;
  color: var(--gold-warm);
  opacity: 0.48;
  pointer-events: none;
}
.dedication::before {
  content: '\201C';
  top: 18px;
  left: 22%;
}
.dedication::after {
  content: '\201D';
  bottom: 22px;
  right: 22%;
}
*/

/* (7) Skill cards — per-card accent (border + faint tint + emoji glow).
       Emoji glow added 2026-05-19 per Gonzo: "Glow is missing from emojis
       on our 3 rows on right." Each card's emoji picks up its own accent
       color via stacked drop-shadow filters (tight inner + wider bloom). */
.skill:nth-of-type(1) {
  border-left-color: var(--heart-rose);
  background: rgba(212,82,122,0.07);
}
.skill:nth-of-type(2) {
  border-left-color: var(--flash-gold);
  background: rgba(244,160,74,0.07);
}
.skill:nth-of-type(3) {
  border-left-color: var(--phonics-slate);
  background: rgba(110,133,168,0.09);
}
.skill:nth-of-type(1) h3 .icon {
  filter:
    drop-shadow(0 0 8px  rgba(212,82,122,0.70))
    drop-shadow(0 0 18px rgba(212,82,122,0.38));
}
.skill:nth-of-type(2) h3 .icon {
  filter:
    drop-shadow(0 0 8px  rgba(244,160,74,0.70))
    drop-shadow(0 0 18px rgba(244,160,74,0.38));
}
.skill:nth-of-type(3) h3 .icon {
  filter:
    drop-shadow(0 0 8px  rgba(110,133,168,0.75))
    drop-shadow(0 0 18px rgba(110,133,168,0.42));
}

/* (8) Chapter rows palette-tinted — full-perimeter outlined glow + brighter
       hover, both derived from the chapter's own --row-accent (which itself
       traces to that chapter's --wash from the bg-cycle palette upstream).
       color-mix() lets a single hex accent drive border + glow + hover at
       different alphas. iOS Safari 16.4+ / Chrome 111+ / Firefox 113+. */
.chapter-list .chapter-row {
  border: 1px solid color-mix(in srgb, var(--row-accent, var(--star)) 32%, transparent);
  border-left: 3px solid var(--row-accent, var(--star));
  padding-left: 14px;
  box-shadow:
    0 0 14px color-mix(in srgb, var(--row-accent, var(--star)) 16%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--row-accent, var(--star)) 9%, transparent);
  transition: box-shadow 0.22s ease, border-color 0.22s ease;
}
.chapter-list .chapter-row:hover {
  border-color: color-mix(in srgb, var(--row-accent, var(--star)) 60%, transparent);
  box-shadow:
    0 0 22px color-mix(in srgb, var(--row-accent, var(--star)) 34%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--row-accent, var(--star)) 22%, transparent);
}
.chapter-list .chapter-row .chapter-num {
  color: var(--row-accent, var(--star));
}
.chapter-list .chapter-row:nth-child(1)  { --row-accent: #d68b3e; }
.chapter-list .chapter-row:nth-child(2)  { --row-accent: #e57c5a; }
.chapter-list .chapter-row:nth-child(3)  { --row-accent: #b07ec4; }
.chapter-list .chapter-row:nth-child(4)  { --row-accent: #7896b3; }
.chapter-list .chapter-row:nth-child(5)  { --row-accent: #6a9968; }
.chapter-list .chapter-row:nth-child(6)  { --row-accent: #d8a64a; }
.chapter-list .chapter-row:nth-child(7)  { --row-accent: #c9678a; }
.chapter-list .chapter-row:nth-child(8)  { --row-accent: #5e6fa8; }
.chapter-list .chapter-row:nth-child(9)  { --row-accent: #b16438; }
.chapter-list .chapter-row:nth-child(10) { --row-accent: #a04b7c; }

/* (9) Companion emoji halos — soft gold radial behind Pebble / Axel. */
.companion .companion-emoji,
.companion .companion-portrait {
  filter:
    drop-shadow(0 0 18px rgba(253,216,53,0.38))
    drop-shadow(0 0 36px rgba(255,182,39,0.20))
    drop-shadow(0 2px 6px rgba(0,0,0,0.40));
}

/* (10) FAQ summary hover + animated open/close.
       Updated 2026-05-19 per Gonzo (multiple rounds):
       - Open state: no fill (no "forehead" amber)
       - Hover on closed: tiny amber ping
       - Hover on OPEN: NO ping (Gonzo: "still need that forehead
         highlight on hover gone" — the open question shouldn't repaint
         when the cursor passes over it)
       - Focus ring: blue default focus outline suppressed; subtle
         outline-only visible on keyboard-focus for a11y. */
summary { transition: background 0.20s ease; outline: none; }
summary::after { transition: transform 0.32s ease, color 0.2s ease; }
summary:hover {
  background: rgba(253,216,53,0.06);
}
summary:hover::after {
  color: var(--ember-hi);
  transform: translateY(-50%) scale(1.15);
}
/* Open summaries get NO hover ping AND NO focus outline — they're already
   "selected" by virtue of the body being open + the −. Repainting on
   hover read as the "forehead highlight" Gonzo wanted gone. */
details[open] summary,
details[open] summary:hover,
details[open] summary:focus {
  background: transparent;
  outline: none;
}
/* Keyboard a11y: keep a subtle accent ring when (and only when) the
   summary is keyboard-focused — mouse clicks don't trigger this. */
summary:focus-visible {
  outline: 2px solid rgba(253,216,53,0.35);
  outline-offset: -2px;
  border-radius: 12px;
}
/* Tiny rotation on the indicator across the open swap — feels intentional
   even though `content` itself can't transition (the +→− content swap is
   instant but the rotate gives the eye motion to track). */
details[open] summary::after {
  transform: translateY(-50%) rotate(180deg);
}
details[open] summary:hover::after {
  transform: translateY(-50%) rotate(180deg) scale(1.15);
}

/* Animated body expand — grid-template-rows 0fr → 1fr is the modern
   cross-browser height-auto interpolation trick (Chrome 109+ / Safari 16+
   / Firefox 110+). The inner > * carries the overflow clip. */
details > .answer {
  display: grid;
  grid-template-rows: 0fr;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    grid-template-rows 0.34s ease,
    padding-bottom 0.34s ease;
}
details[open] > .answer {
  grid-template-rows: 1fr;
  padding-bottom: 18px;
}
details > .answer > * {
  overflow: hidden;
  min-height: 0;
}

/* ============================================================
   CONTENT EXPANSION 2026-05-19 — sections added from Claude Design's
   "In each chapter" + "Not all words are alike" reference screenshots.
   Keeps our existing site aesthetic; only introduces new component
   styling for the additions.
   ============================================================ */

/* (11) Chapter row subtitle — small "Companion focus: …" line under
        the chapter name. Phonics text in slate, prefix in muted cream. */
.chapter-name-block { flex: 1; min-width: 0; }
.chapter-subtitle {
  font-size: 12px;
  color: rgba(244,234,212,0.50);
  line-height: 1.4;
  margin-top: 3px;
}
.chapter-subtitle em {
  font-style: normal;
  color: var(--phonics-slate);
  font-weight: 600;
}

/* (12) Chapter list intro + footnote — frame the chapter list with
        context above and the Hard/Classroom mode note below. */
.chapter-intro {
  font-size: 14px;
  color: rgba(244,234,212,0.85);
  line-height: 1.6;
  margin: -4px 0 18px;
}
.chapter-intro strong {
  color: var(--phonics-slate);
  font-weight: 700;
}
.chapter-footnote {
  font-size: 13px;
  color: rgba(244,234,212,0.62);
  font-style: italic;
  line-height: 1.55;
  margin: 18px 0 0;
}

/* (13) Word types — 4 sample-word pills + definition rows. Restyled
        2026-05-19 per Gonzo: pills are bigger, accent-color filled (not
        just outlined), with proper inner glow and Georgia serif weight.
        Uses --type-accent CSS var pattern so the rule is DRY. */
.word-types {
  display: grid;
  gap: 12px;
  margin: 22px 0 14px;
}
.word-type {
  --type-accent: var(--star);
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background: color-mix(in srgb, var(--type-accent) 5%, rgba(244,234,212,0.04));
  border: 1px solid color-mix(in srgb, var(--type-accent) 22%, transparent);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.word-type:hover {
  background: color-mix(in srgb, var(--type-accent) 9%, rgba(244,234,212,0.05));
  border-color: color-mix(in srgb, var(--type-accent) 38%, transparent);
}
.wt-pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 11px 18px;
  border-radius: 12px;
  border: 2px solid var(--type-accent);
  background: color-mix(in srgb, var(--type-accent) 14%, rgba(13,30,40,0.62));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--type-accent) 25%, transparent),
    0 0 18px color-mix(in srgb, var(--type-accent) 22%, transparent);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--cream);
  text-align: center;
  letter-spacing: 0.01em;
}
.wt-text {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(244,234,212,0.82);
}
.wt-text strong {
  font-weight: 800;
  color: var(--type-accent);
}
.wt-heart   { --type-accent: var(--heart-rose); }
.wt-flash   { --type-accent: var(--flash-gold); }
.wt-vocab   { --type-accent: var(--vocab-green); }
.wt-phonics { --type-accent: var(--phonics-slate); }
.word-types-footnote {
  font-size: 13px;
  color: rgba(244,234,212,0.62);
  font-style: italic;
  line-height: 1.6;
  margin: 18px 0 0;
}
.word-types-footnote em {
  color: rgba(244,234,212,0.92);
  font-style: italic;
}

/* (14) Chapter chip counts — 4 colored count pills per chapter row.
        Added 2026-05-19 to match Claude Design's chapter layout (matches
        word-type accent colors so the eye ties chip → kind). */
.chapter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
}
.chip {
  --chip-color: var(--star);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: rgba(13,30,40,0.55);
  border: 1px solid color-mix(in srgb, var(--chip-color) 28%, rgba(244,234,212,0.10));
  color: rgba(244,234,212,0.85);
  line-height: 1.2;
}
.chip::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chip-color);
  box-shadow: 0 0 6px color-mix(in srgb, var(--chip-color) 50%, transparent);
}
.chip-heart   { --chip-color: var(--heart-rose); }
.chip-flash   { --chip-color: var(--flash-gold); }
.chip-vocab   { --chip-color: var(--vocab-green); }
.chip-phonics { --chip-color: var(--phonics-slate); }

/* (15) Inline word-type accent — small reusable classes for color-coding
        type-name words in body copy (footnotes, intros, etc.). Bold +
        non-italic so they pop against an italic parent paragraph. */
.t-heart, .t-flash, .t-vocab, .t-phonics {
  font-style: normal;
  font-weight: 700;
}
.t-heart   { color: var(--heart-rose); }
.t-flash   { color: var(--flash-gold); }
.t-vocab   { color: var(--vocab-green); }
.t-phonics { color: var(--phonics-slate); }

/* Reduced-motion respect — disable all polish animations for a11y. */
@media (prefers-reduced-motion: reduce) {
  /* .wordmark removed from this list when the breathe animation was paused
     2026-05-19. Re-add if the breathe is un-reverted. */
  .cta-primary::after,
  .motes::before,
  .motes::after {
    animation: none;
  }
  .scroll-rail { transition: none; }
}