/* ==========================================================================
   MY CREDO · scrollytelling page
   Layout concept: the existing ChaplainUSA neumorphic surface (one ground,
   light from the top left) stretched into a long, calm read. Raised cards
   hold the text, inset wells hold quotations, and three dark slate bands
   (the squad car, the North Star, the last page) slow the reader down.
   Motion is quiet: a slow zoom on the photograph, drifting motes, and text
   that arrives one paragraph at a time.
   ========================================================================== */
:root {
  /* Palette, taken from the live site */
  --surface: #f0eee8;       /* shared ground and card surface */
  --sh: #d3cdbf;            /* dark half of the paired shadow */
  --hl: #ffffff;            /* light half of the paired shadow */
  --bd: #d7d1c5;
  --fg: #31344b;            /* slate-indigo ink */
  --body: #3b3e54;
  --mut: #565866;
  --accent: #9f7c45;        /* gold, used sparingly */
  --accent-t: #76531b;      /* gold that passes contrast as text */
  --blue: #233d4d;
  --blue-low: #182e3b;

  /* Type roles */
  --f-display: 'Libre Caslon Display', Georgia, 'Times New Roman', serif;
  --f-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --raised: 7px 7px 14px var(--sh), -7px -7px 14px var(--hl);
  --raised-s: 3px 3px 6px var(--sh), -3px -3px 6px var(--hl);
  --inset: inset 2px 2px 5px var(--sh), inset -3px -3px 7px var(--hl);
  --r: 20px;
  --gut: clamp(17px, 4vw, 28px);
  --hh: 72px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  color-scheme: light;
}
/* Slate bands: same system, dark values (the live site's "collection" band) */
.band-dark {
  --surface: #303c48; --sh: #232d37; --hl: #3d4b59; --bd: #3c4a57;
  --fg: #f5f4ef; --body: #e4e8ec; --mut: #ced6dd; --accent: #d6bd88; --accent-t: #e5cf9d;
  --raised: 7px 7px 14px var(--sh), -7px -7px 14px var(--hl);
  --raised-s: 3px 3px 6px var(--sh), -3px -3px 6px var(--hl);
  --inset: inset 2px 2px 5px var(--sh), inset -3px -3px 7px var(--hl);
  background: #28323d; color: var(--fg);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body.credo-neu { background: #f0eee8; color: var(--fg); font-family: var(--f-body); line-height: 1.72; margin: 0; overflow-x: hidden; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid #76531b; outline-offset: 4px; border-radius: 8px; }
.band-dark :focus-visible { outline-color: #e0c88f; }
.wrap { width: min(1160px, calc(100% - 2 * var(--gut))); margin-inline: auto; }
::selection { background: #d6bd88; color: #182e3b; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: linear-gradient(90deg, #9f7c45, #d6bd88); transform-origin: 0 50%; transform: scaleX(0); }

.rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 40; display: none; flex-direction: column; gap: 10px; padding: 12px 8px; border-radius: 28px; background: #f0eee8; box-shadow: 5px 5px 10px rgba(60,55,40,.28), -4px -4px 8px rgba(255,255,255,.4); }
@media (min-width: 1240px) { .rail { display: flex; } }
.rail a { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #f0eee8; box-shadow: var(--raised-s); color: #565866; font-size: 12px; font-weight: 700; text-decoration: none; transition: box-shadow .25s, color .25s, transform .25s; }
.rail a:hover { transform: translateX(-3px); color: #76531b; }
.rail a.on { box-shadow: inset 2px 2px 4px #d3cdbf, inset -2px -2px 4px #fff; color: #76531b; }

#motes { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }

/* ---------- Buttons ---------- */
.credo-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 20px; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--fg); text-decoration: none; cursor: pointer;
  border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--raised-s);
  transition: box-shadow .15s var(--ease), transform .3s var(--ease), color .3s, text-shadow .3s; }
.credo-button:hover { transform: translateY(-3px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 22px rgba(159, 124, 69, .28); }
.credo-button:active { transform: none; box-shadow: var(--inset); }
.credo-button.primary { color: var(--accent-t); }
.credo-button[aria-pressed="true"] { box-shadow: var(--inset); color: var(--accent-t); }

.eyebrow { margin: 0 0 15px; color: var(--accent-t); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.card { background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--raised); }
.lift { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }

/* ---------- Scroll reveal ---------- */
.rv { transition: opacity .9s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms); }
.rv.pre { opacity: 0; transform: translateY(26px); }
.rv.pre.from-r { transform: translateX(60px); }
.rv.pre.from-l { transform: translateX(-60px); }

/* ---------- Hero ---------- */
.credo-hero { background: #f0eee8; }
.banner { position: relative; overflow: hidden; border-radius: 0 0 var(--r) var(--r); box-shadow: 0 6px 18px rgba(0, 0, 0, .14); background: #2b333b; width: 100%; height: clamp(300px, 52vw, 78vh); }
.banner-img { width: 100%; height: 100%; object-fit: cover; transform-origin: 32% 45%; animation: slow-zoom 38s ease-in-out infinite alternate; will-change: transform; }
@keyframes slow-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 46, 59, 0) 55%, rgba(24, 46, 59, .5)); pointer-events: none; }
.banner-logo { position: absolute; z-index: 2; left: clamp(18px, 4vw, 64px); top: clamp(14px, 3.4vw, 48px); width: clamp(190px, 30vw, 460px); pointer-events: none; animation: logo-in 1.4s var(--ease) .3s both; }
.banner-logo img { width: 100%; filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .3)); }
@keyframes logo-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy { padding-block: clamp(28px, 4vw, 52px); max-width: 760px; margin-left: max(var(--gut), calc((100% - 1160px) / 2)); width: auto; }
.subtitle, .accent, .hero-subtitle { font-family: var(--f-display); }
.subtitle { font-size: clamp(1.15rem, 1rem + .9vw, 1.55rem); line-height: 1.45; margin: 0 0 12px; }
.accent { font-size: clamp(1.05rem, .95rem + .6vw, 1.3rem); color: var(--accent-t); font-style: italic; margin: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
@media (max-width: 620px) { .hero-actions { display: grid; } .hero-actions .credo-button, .invite-copy .credo-button { width: 100%; } .hero-copy { margin-inline: var(--gut); } }

/* ---------- Origin ---------- */
.origin { padding-block: clamp(56px, 8vw, 110px); }
.origin .wrap { max-width: 920px; }
.origin-card { padding: clamp(26px, 4.5vw, 52px); margin-bottom: clamp(34px, 5vw, 56px); }
.origin-card:last-child { margin-bottom: 0; }
.origin-card h2, .invite-copy h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 24px; }
.prose p { margin: 0 0 1.1em; font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); color: var(--mut); max-width: 66ch; }
.prose p:last-child { margin-bottom: 0; }
.idfig { max-width: 600px; margin: 0 auto clamp(34px, 5vw, 56px); text-align: center; }
.idframe { padding: 8px; border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--inset); background: var(--surface); overflow: hidden; }
.idframe img { width: 100%; border-radius: calc(var(--r) - 4px); animation: slow-zoom 46s ease-in-out infinite alternate; transform-origin: 50% 40%; }
.idframe { position: relative; }
.idfig figcaption { margin-top: 14px; font-size: 13px; color: var(--mut); font-style: italic; }

/* ---------- Invitation ---------- */
.invite { padding-block: clamp(64px, 9vw, 120px); }
.bigquote { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 84px); padding: 34px 0; text-align: center; border-top: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transition: text-shadow .5s; }
.bigquote p { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1rem + 1.8vw, 2rem); line-height: 1.4; }
.bigquote:hover { text-shadow: 0 0 26px rgba(159, 124, 69, .4); }
.invite-grid { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 600px); justify-content: center; gap: clamp(34px, 6vw, 80px); align-items: center; }
.cover-wrap { cursor: pointer; perspective: 1200px; }
.cover { margin: 0; border-radius: var(--r); box-shadow: 3px 3px 0 #b8afa1, 6px 6px 0 #e4dfd3, 12px 15px 18px #c1b9ab; animation: float 7s ease-in-out infinite; transition: transform .4s var(--ease); }
.cover img { width: 100%; border-radius: var(--r); aspect-ratio: 2 / 3; background: #6b2a2a; }
.cover-wrap:hover .cover { transform: translateY(-6px) rotate(-1deg); }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.invite-copy p:not(.eyebrow) { max-width: 540px; margin: 0 0 18px; font-size: clamp(1rem, .96rem + .3vw, 1.14rem); color: var(--mut); }
@media (max-width: 900px) { .invite-grid { grid-template-columns: 220px 1fr; gap: 30px; } }
@media (max-width: 620px) { .invite-grid { grid-template-columns: 1fr; } .cover-wrap { max-width: 220px; margin: 0 auto; } }

/* ---------- Book chapters ---------- */
.bookopen { padding-top: clamp(20px, 4vw, 40px); }
.chap { padding-block: 0; }
.chap-wrap { width: min(880px, calc(100% - 2 * var(--gut))); margin-inline: auto; padding-block: clamp(22px, 3.5vw, 40px); }
.chap-card { background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--raised); padding: clamp(24px, 5vw, 60px); }
.band-dark { padding-block: clamp(34px, 6vw, 80px); margin-block: clamp(24px, 4vw, 48px); }
.band-dark .chap-wrap { padding-block: 0; }
.chap-head { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 22px); margin-bottom: clamp(24px, 3.5vw, 38px); }
.badge { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); box-shadow: var(--raised-s); font-family: var(--f-display); font-size: 1.5rem; color: var(--accent-t); transition: box-shadow .5s, color .5s; }
.chap.active .badge { box-shadow: var(--inset); }
.chapter-num { display: block; margin-bottom: 4px; color: var(--accent-t); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.chap h2 { margin: 0; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; }
.opening h1 { margin: 0 0 14px; font-family: var(--f-display); font-weight: 400; font-size: clamp(2.8rem, 2rem + 4.5vw, 5rem); line-height: 1; letter-spacing: -.02em; }
.hero-subtitle { margin: 0 0 clamp(24px, 4vw, 40px); font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); font-style: italic; color: var(--accent-t); line-height: 1.4; max-width: 32ch; }

.chap-body > * { max-width: 66ch; }
.chap-body p { margin: 0 0 1.15em; font-size: clamp(1.03rem, .98rem + .3vw, 1.15rem); color: var(--body); }
.chap-body strong { font-weight: 700; color: var(--fg); }
.chap-body > :last-child { margin-bottom: 0; }

/* Quotations rest in an inset well */
.chap-body blockquote { position: relative; max-width: none; margin: 1.8rem 0; padding: clamp(22px, 3.5vw, 36px) clamp(22px, 3.5vw, 40px); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); font-family: var(--f-display); font-style: italic; font-size: clamp(1.15rem, 1.02rem + .7vw, 1.45rem); line-height: 1.5; transition: box-shadow .5s, transform .5s var(--ease); }
.chap-body blockquote::before { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 3px; background: var(--accent); opacity: .8; }
.chap-body blockquote:hover { box-shadow: var(--inset), 0 0 30px rgba(159, 124, 69, .3); }
.chap-body blockquote cite { display: block; margin-top: 14px; font-family: var(--f-body); font-style: normal; font-size: .82rem; letter-spacing: .05em; line-height: 1.5; color: var(--accent-t); }
.chap-body blockquote strong { font-style: normal; }
.chap-body blockquote mark { background: transparent; color: inherit; padding: .05em .12em; border-radius: 4px; transition: background .4s, box-shadow .4s; }
.maple[data-hl="place"] mark[data-k="place"], .maple[data-hl="action"] mark[data-k="action"], .maple[data-hl="identity"] mark[data-k="identity"], .maple[data-hl="refusal"] mark[data-k="refusal"] { background: rgba(159, 124, 69, .32); box-shadow: 0 0 0 3px rgba(159, 124, 69, .32); }

/* Gap figure (scroll-scrubbed with --p) */
.gapfig { --p: 0; position: relative; height: 300px; max-width: 520px; margin: 1.6rem 0 2rem; }
.well { position: absolute; left: 0; right: 0; height: 72px; display: flex; align-items: center; padding: 0 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); font-family: var(--f-display); font-size: 1.15rem; }
.well.top { top: 0; color: var(--accent-t); }
.well.bot { top: calc(228px - clamp(0, (var(--p) - .22) * 2.4, 1) * 156px); color: var(--mut); }
.thread { position: absolute; left: 50%; width: 3px; top: 72px; bottom: 72px; border-radius: 3px; background: linear-gradient(var(--accent), transparent); opacity: clamp(0, calc((var(--p) - .35) * 3), 1); }
.tcap { position: absolute; left: calc(50% + 18px); top: 50%; transform: translateY(-50%); font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--accent-t); opacity: clamp(0, calc((var(--p) - .5) * 3), 1); }

/* Chapter 2 scene */
.scene { max-width: none !important; padding: clamp(20px, 3.5vw, 36px); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); margin-bottom: 1.8rem; }
.scene p { font-size: clamp(1.03rem, .98rem + .3vw, 1.15rem); }
.scene p:nth-last-child(-n+3) { font-family: var(--f-display); font-style: italic; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem); color: var(--accent-t); line-height: 1.45; }
.scene p:last-child { margin-bottom: 0; }
.freeze { position: relative; max-width: none !important; margin: 2.4rem 0; padding: 38px 20px; text-align: center; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); font-family: var(--f-display); font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); line-height: 1.3; color: var(--accent-t); }
.freeze::before { content: ""; position: absolute; inset: 10px; border-radius: 14px; border: 1px solid var(--accent); opacity: .5; animation: ring 3.6s ease-in-out infinite; }
@keyframes ring { 0%, 100% { opacity: .15; transform: scale(.985); } 50% { opacity: .65; transform: scale(1); } }

/* Properties and table */
.property { max-width: none !important; margin: 0 0 16px; padding: 20px 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised-s); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.property:hover { transform: translateY(-4px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 24px rgba(159, 124, 69, .25); }
.property p { margin: 0 0 6px; }
.property > p:first-child { display: flex; align-items: center; gap: 14px; }
.property > p:last-child { margin: 0; }
.property-num { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--inset); font-family: var(--f-display); font-size: 1.1rem; color: var(--accent-t); }
.property-title { font-family: var(--f-display); font-size: clamp(1.25rem, 1.1rem + .6vw, 1.55rem); }
.chap-body h3 { margin: 2.4rem 0 .5rem; font-family: var(--f-display); font-weight: 400; font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem); }
.compare-table { width: 100%; max-width: none !important; border-collapse: separate; border-spacing: 0 14px; margin-top: 4px; }
.compare-table th { text-align: left; padding: 0 20px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.compare-table td { padding: 16px 20px; background: var(--surface); box-shadow: var(--raised-s); font-size: clamp(.98rem, .95rem + .2vw, 1.08rem); vertical-align: top; transition: box-shadow .4s, color .4s, opacity .4s; }
.compare-table td:first-child { border-radius: 16px 0 0 16px; }
.compare-table td:last-child { border-radius: 0 16px 16px 0; }
.compare-table tbody tr { cursor: pointer; }
.compare-table tbody tr:hover td { color: var(--fg); }
.compare-table tr.struck td:first-child { text-decoration: line-through; text-decoration-color: var(--accent-t); text-decoration-thickness: 2px; opacity: .55; box-shadow: var(--inset); }
.compare-table tr.struck td:last-child { box-shadow: var(--inset); color: var(--accent-t); font-weight: 700; }
.compare-table tr:not(.struck) td:last-child { color: var(--mut); }
.hint { font-size: .85rem !important; font-style: italic; color: var(--mut) !important; margin-top: -4px !important; }

.callout { max-width: none !important; margin: 2rem 0; padding: clamp(22px, 3.5vw, 34px); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); transition: box-shadow .5s; }
.callout:hover { box-shadow: var(--inset), 0 0 30px rgba(159, 124, 69, .28); }
.callout-label { margin-bottom: 10px; color: var(--accent-t); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.callout p { margin: 0; }

/* Chapter 4 meter */
.meter { max-width: 560px !important; margin: 2rem 0; padding: 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); display: grid; gap: 14px; }
.mlab { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); font-variant-numeric: tabular-nums; }
.mtrack { position: relative; height: 22px; border-radius: 12px; box-shadow: var(--inset); background: var(--surface); overflow: hidden; }
.mfill { position: absolute; inset: 3px auto 3px 3px; width: 100%; max-width: calc(100% - 6px); border-radius: 10px; background: linear-gradient(90deg, #9f7c45, #d6bd88); transition: width .9s var(--ease), background .6s; }
.mfill.low { background: linear-gradient(90deg, #8a3b30, #c1664f); }
.mstate { min-height: 1.7em; font-family: var(--f-display); font-style: italic; font-size: 1.25rem; color: var(--fg); }
.meter .credo-button { justify-self: start; }

/* Chapter 6 chips */
.chips, .builder-starters { display: flex; flex-wrap: wrap; gap: 12px; max-width: none !important; margin: 1.2rem 0 1.6rem; }
.chip, .builder-starters button { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; cursor: pointer; min-height: 44px; padding: 10px 18px; color: var(--fg); background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--raised-s); transition: box-shadow .15s var(--ease), transform .3s var(--ease), color .3s; }
.chip:hover, .builder-starters button:hover { transform: translateY(-3px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 20px rgba(159, 124, 69, .25); }
.chip:active, .chip[aria-pressed="true"], .builder-starters button:active, .builder-starters button[aria-pressed="true"] { transform: none; box-shadow: var(--inset); color: var(--accent-t); }

/* Chapter 8: tap cards */
.reflection { display: grid; gap: 14px; max-width: none !important; margin-top: 1.6rem; }
.pcard { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; padding: 20px 24px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised-s); transition: box-shadow .15s var(--ease), transform .3s var(--ease); }
.pcard:hover { transform: translateY(-3px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 22px rgba(159, 124, 69, .25); }
.pcard:focus-visible { outline: 3px solid #76531b; outline-offset: 4px; }
.pcard[aria-pressed="true"] { transform: none; box-shadow: var(--inset); }
.ptext { font-family: var(--f-display); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.35; color: var(--fg); }
.phint { grid-column: 1; max-height: 0; opacity: 0; overflow: hidden; font-size: .95rem; font-style: italic; color: var(--mut); transition: max-height .5s var(--ease), opacity .5s; }
.pcard[aria-pressed="true"] .phint { max-height: 3em; opacity: 1; }
.pmark { grid-row: 1 / span 2; grid-column: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--inset); color: transparent; font-size: 14px; transition: all .4s; }
.pcard[aria-pressed="true"] .pmark { color: var(--accent-t); }

/* Chapter 9 builder */
.builder { max-width: none !important; margin: 1.8rem 0; padding: clamp(20px, 3.5vw, 32px); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); }
.builder .callout-label { margin-bottom: 4px; }
.paper { position: relative; min-height: 150px; padding: 8px 22px 10px; border-radius: 14px; background: #f8f6ef; color: #31344b; box-shadow: var(--raised-s); font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem); line-height: 44px;
  background-image: repeating-linear-gradient(transparent 0 43px, rgba(35, 61, 77, .22) 43px 44px); background-position: 0 8px; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: #76531b; vertical-align: -.2em; margin-left: 4px; animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Chapter 10 test list */
.test-list { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: 14px; max-width: none !important; }
.test-list li { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--r); background: var(--surface); box-shadow: var(--raised-s); cursor: pointer; transition: box-shadow .15s var(--ease), transform .3s var(--ease); font-size: clamp(1rem, .96rem + .25vw, 1.1rem); }
.test-list li:hover { transform: translateX(5px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 20px rgba(159, 124, 69, .22); }
.test-list li.on { box-shadow: var(--inset); transform: none; }
.test-check { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--inset); color: transparent; font-size: 14px; transition: color .4s; }
.test-list li.on .test-check { color: var(--accent-t); }

/* North Star pinned scene */
.starscene { --p: 0; height: 300vh; }
.starpin { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); height: calc(100svh - var(--hh)); overflow: hidden; display: grid; align-content: center; justify-items: center; text-align: center; background: radial-gradient(75% 65% at 50% 35%, #2d4b60, #182e3b 80%); }
.starpin canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.orb { position: absolute; left: 50%; top: 26%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8e0, #e5cf9d 55%, #b79a5e); transform: scale(calc(.35 + var(--p) * 1.15)); box-shadow: 0 0 calc(10px + var(--p) * 90px) calc(var(--p) * 14px) rgba(229, 207, 157, .5), 8px 8px 16px #121f28, -8px -8px 16px #36526a; }
.starcopy { position: relative; margin-top: 22vh; padding-inline: var(--gut); display: grid; gap: 22px; justify-items: center; }
.sl { margin: 0; max-width: 30ch; font-size: clamp(1.15rem, 1rem + 1.2vw, 1.8rem); line-height: 1.45; color: #e4e8ec; opacity: clamp(0, calc((var(--p) - var(--s)) * 7), 1); transform: translateY(calc((1 - clamp(0, (var(--p) - var(--s)) * 7, 1)) * 22px)); }
.sl.big { font-family: var(--f-display); font-style: italic; font-size: clamp(1.7rem, 1.2rem + 2.6vw, 3.1rem); color: #e5cf9d; line-height: 1.2; }

/* Finale */
.finale-band { padding-block: clamp(60px, 9vw, 130px); }
.finale-card { text-align: center; }
.finale-card .chap-body > * { margin-inline: auto; }
.finale { max-width: none !important; margin-bottom: 1.4rem; }
.finale h2 { font-size: clamp(2.2rem, 1.5rem + 3.5vw, 4.2rem) !important; margin-bottom: 18px !important; }
.finale p { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.8rem) !important; color: var(--accent-t) !important; max-width: none; }
.sigrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 56px; margin: 8px 0 38px; }
.sigrow span { min-width: min(220px, 100%); padding-top: 8px; border-top: 2px solid var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.finale-card .callout { text-align: center; margin-top: 3rem; }
.finale-card .callout p { font-size: .98rem !important; color: var(--mut); }
.tail { padding-block: clamp(34px, 5vw, 56px) 20px; text-align: center; }
.modal-footer { max-width: none; margin: 0 auto; font-size: 14px; color: var(--mut); }

/* ---------- Footer ---------- */
body.credo-neu .credo-footer.wrap { display: flex; align-items: center; gap: 25px; padding-block: 38px calc(38px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--bd); color: var(--mut); font-size: 13px; }
.credo-footer img { width: 165px; }
.credo-footer p { margin: 0; }
.credo-footer nav { display: flex; gap: 20px; margin-left: auto; }
@media (max-width: 620px) { body.credo-neu .credo-footer.wrap { display: grid; } .credo-footer nav { display: grid; margin-left: 0; gap: 8px; } .chap-head { align-items: flex-start; } .badge { width: 46px; height: 46px; font-size: 1.25rem; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rv.pre { opacity: 1; transform: none; }
}

/* ---------- Heroes of Our Youth ---------- */
.heroes { padding-bottom: clamp(56px, 8vw, 110px); }
.heroes-grid { display: grid; gap: clamp(26px, 4vw, 48px); grid-template-columns: 1fr; align-items: start; max-width: 1060px; }
@media (min-width: 900px) { .heroes-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.heroes-card { padding: clamp(26px, 4.5vw, 52px); }
.heroes-card h2 { font-family: var(--f-display); font-size: clamp(1.9rem, 1.4rem + 2vw, 2.9rem); font-weight: 400; line-height: 1.12; letter-spacing: -.02em; margin: 0 0 24px; }
.heroes-card .strong-line { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); line-height: 1.4; color: var(--accent-t); transition: text-shadow .5s; }
.heroes-card .strong-line:hover { text-shadow: 0 0 24px rgba(159, 124, 69, .4); }
.tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.4rem 0 .6rem; }
.tiles button { font: inherit; font-size: 14px; font-weight: 700; line-height: 1.35; text-align: left; cursor: pointer; padding: 12px 18px; color: var(--fg); background: var(--surface); border: 1px solid var(--bd); border-radius: var(--r); box-shadow: var(--raised-s); transition: box-shadow .15s var(--ease), transform .3s var(--ease), color .3s; }
.tiles button:hover { transform: translateY(-3px); box-shadow: 5px 5px 10px var(--sh), -5px -5px 10px var(--hl), 0 0 20px rgba(159, 124, 69, .25); }
.tiles button:active, .tiles button[aria-pressed="true"] { transform: none; box-shadow: var(--inset); color: var(--accent-t); }
.tiles.all button { box-shadow: var(--inset), 0 0 18px rgba(159, 124, 69, .35); }
.tilehint { font-size: .88rem !important; font-style: italic; color: var(--mut) !important; }
.fquote { position: sticky; top: calc(var(--hh) + 24px); }
.fquote figure { margin: 0; position: relative; padding: clamp(34px, 4vw, 48px) clamp(24px, 3.5vw, 40px) clamp(26px, 3vw, 36px); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); transition: box-shadow .5s; }
.fquote figure:hover { box-shadow: var(--inset), 0 0 34px rgba(159, 124, 69, .3); }
.qmark { position: absolute; left: clamp(18px, 3vw, 32px); top: 6px; font-family: var(--f-display); font-size: 5.5rem; line-height: 1; color: var(--accent); opacity: .55; pointer-events: none; }
.fquote blockquote { margin: 18px 0 0; padding: 0; }
.fquote blockquote p { margin: 0; font-family: var(--f-display); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.1rem); line-height: 1.38; color: var(--fg); text-wrap: balance; }
.fquote figcaption { margin-top: 22px; display: grid; gap: 2px; font-size: .9rem; color: var(--mut); }
.fquote figcaption strong { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
@media (max-width: 899px) { .fquote { position: static; } }

/* Heroes: inline pull quote and video card */
.heroes-card .pull { margin: 1.6rem 0; padding: clamp(18px, 3vw, 28px) clamp(20px, 3vw, 32px); max-width: none; border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); transition: box-shadow .5s; }
.heroes-card .pull:hover { box-shadow: var(--inset), 0 0 28px rgba(159, 124, 69, .28); }
.heroes-card .pull p { margin: 0; max-width: none; font-family: var(--f-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + .8vw, 1.5rem); line-height: 1.45; color: var(--fg); }
.heroes-card .pull cite { display: block; margin-top: 12px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.vidcard { display: grid; gap: 14px; margin-top: clamp(22px, 3vw, 32px); padding: 10px 10px 18px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); text-decoration: none; color: var(--fg); transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.vidcard:hover { transform: translateY(-4px); box-shadow: 8px 8px 16px var(--sh), -8px -8px 16px var(--hl), 0 0 26px rgba(159, 124, 69, .25); }
.vidcard:active { transform: none; box-shadow: var(--inset); }
.vframe { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: calc(var(--r) - 6px); overflow: hidden; background: #1d242b; }
.vframe img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.2) contrast(1.05); animation: slow-zoom 30s ease-in-out infinite alternate; }
.vplay { position: absolute; left: 50%; top: 50%; width: 62px; height: 62px; margin: -31px 0 0 -31px; border-radius: 50%; display: grid; place-items: center; padding-left: 4px; background: #f0eee8; color: #76531b; font-size: 20px; box-shadow: 4px 4px 10px rgba(0,0,0,.4), -2px -2px 6px rgba(255,255,255,.2); transition: transform .3s var(--ease); }
.vidcard:hover .vplay { transform: scale(1.08); }
.vcap { display: grid; gap: 2px; padding-inline: 10px; font-size: .9rem; color: var(--mut); }
.vcap strong { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.fquote { display: grid; align-content: start; }

/* ===== Heroes of Our Youth, merged story ===== */
.hwrap { max-width: 1060px; }
.hhead { margin-bottom: clamp(26px, 4vw, 44px); }
.hhead h2 { font-family: var(--f-display); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; margin: 0; }
.hrow { display: grid; gap: clamp(22px, 3.5vw, 44px); grid-template-columns: 1fr; align-items: center; margin-bottom: clamp(30px, 4.5vw, 56px); }
@media (min-width: 900px) { .hrow { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .hrow.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .hrow.flip > :first-child { order: 2; } }
.hcard { padding: clamp(24px, 4vw, 46px); }
.hfig { margin: 0; text-align: center; }
.hfig img { width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 4px); }
.hfig figcaption, .vplayer figcaption { margin-top: 14px; display: grid; gap: 2px; font-size: .9rem; color: var(--mut); font-style: normal; }
.hfig figcaption strong, .vplayer figcaption strong { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.hrow .fquote { position: static; }
.hclose { margin-top: clamp(8px, 2vw, 20px); }
.hclose .strong-line { font-family: var(--f-display); font-style: italic; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); line-height: 1.4; color: var(--accent-t); max-width: none; }
/* in-place video */
.vplayer { margin: 0 auto clamp(30px, 4.5vw, 56px); max-width: 900px; text-align: center; }
.vstage { padding: 10px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); }
.vinner { position: relative; aspect-ratio: 16 / 9; border-radius: calc(var(--r) - 6px); overflow: hidden; background: #1d242b; }
.vinner video, .vinner .vposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #1d242b; }
.vinner video { z-index: 1; }
.vinner.playing .vposter, .vinner.playing .vbig { display: none; }
.vbig { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: linear-gradient(180deg, rgba(24,46,59,0) 50%, rgba(24,46,59,.45)); cursor: pointer; display: grid; place-items: center; }
.vbig .vplay { position: static; margin: 0; width: 76px; height: 76px; font-size: 1.5rem; }
.vbig:hover .vplay { transform: scale(1.08); }

/* ===== The story box: one card, three movements ===== */
.story { padding: 0; overflow: hidden; }
.story .s1, .story .s3 { padding: clamp(26px, 5vw, 64px); }
.story .s2 { margin: 0; padding: clamp(30px, 5.5vw, 72px) clamp(26px, 5vw, 64px); box-shadow: inset 0 14px 22px -16px #1b232b, inset 0 -14px 22px -16px #1b232b; }
.story .prose p { max-width: none; }
.story .prose::after { content: ""; display: block; clear: both; }
.story h2 { font-family: var(--f-display); font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem); font-weight: 400; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 clamp(20px, 3vw, 32px); }
.movement { display: flex; align-items: center; gap: 14px; margin: 0 0 clamp(18px, 2.6vw, 28px); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
.movement span { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--inset); font-family: var(--f-display); font-size: 1.05rem; letter-spacing: 0; }
.movement::after { content: ""; flex: 1; height: 1px; background: var(--bd); }
/* the pair at the top: side by side, tilted opposite ways, drifting slightly as you scroll */
.duo { display: flex; justify-content: center; align-items: flex-start; gap: clamp(8px, 3vw, 36px); margin: 0 0 clamp(26px, 4vw, 44px); padding-top: 6px; }
.polaroid { margin: 0; width: min(44%, 300px); padding: 10px 10px 12px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); text-align: center; translate: 0 calc((.5 - var(--p, .5)) * 34px); }
.polaroid:nth-child(2) { margin-top: clamp(14px, 3vw, 34px); translate: 0 calc((.5 - var(--p, .5)) * -34px); }
.polaroid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 22%; border-radius: calc(var(--r) - 8px); }
.polaroid figcaption { margin-top: 10px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-t); }
/* images that sit inside the text and wrap it */
.wrapfig { margin: 6px 0 14px; width: min(40%, 290px); }
.wrapfig.left { float: left; margin-right: clamp(20px, 3vw, 34px); shape-outside: margin-box; }
.wrapfig.right { float: right; margin-left: clamp(20px, 3vw, 34px); shape-outside: margin-box; }
.wrapfig img { width: 100%; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); }
.wrapfig.id { width: min(46%, 340px); padding: 8px; border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--raised); }
.wrapfig.id img { border-radius: calc(var(--r) - 4px); filter: none; }
.wrapfig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.45; font-style: italic; color: var(--mut); }
/* each piece rises into place as it is scrolled to; pictures settle into their tilt */
.story .rv { transition: opacity 1s var(--ease) var(--d, 0ms), transform 1s var(--ease) var(--d, 0ms), filter 1s var(--ease) var(--d, 0ms); }
.story .rv.pre { opacity: 0; transform: translateY(46px); filter: blur(6px); }
.story .pop { transform: rotate(var(--rot, 0deg)); }
.story .pop.pre { transform: translateY(70px) rotate(calc(var(--rot, 0deg) * 3)) scale(.82); }
.story .wrapfig.left.pre { transform: translateX(-70px) rotate(calc(var(--rot, 0deg) * 3)) scale(.82); }
.story .wrapfig.right.pre { transform: translateX(70px) rotate(calc(var(--rot, 0deg) * 3)) scale(.82); }
.story .fquote { max-width: none; margin: clamp(24px, 3.5vw, 40px) 0; }
.story .vplayer { margin: 0 auto; }
.story .strong-line { margin-top: 1.4em; }
@media (max-width: 640px) {
  .duo { gap: 6px; } .polaroid { width: 47%; padding: 7px 7px 9px; }
  .wrapfig, .wrapfig.id { float: none !important; width: min(70%, 280px); margin: 8px auto 20px !important; }
}
@media (prefers-reduced-motion: reduce) { .story .rv.pre { filter: none; } .polaroid { translate: none; } }
.story .prose p.strong-line { font-family: var(--f-display); font-style: italic; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); line-height: 1.4; color: var(--accent-t); clear: both; }

/* ===== v8: hero subtitle + sub-navigation ===== */
.banner-logo { pointer-events: none; }
.banner-sub { margin: clamp(6px, 1.2vw, 14px) 0 0 clamp(4px, 1vw, 12px); font-family: var(--f-display); font-style: italic; font-size: clamp(.95rem, .6rem + 1.5vw, 1.65rem); line-height: 1.3; color: #31344b; text-shadow: 0 1px 12px rgba(255, 255, 255, .7); animation: logo-in 1.4s var(--ease) .7s both; }
.subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.6vw, 18px); width: min(980px, calc(100% - 2 * var(--gut))); margin: clamp(22px, 3.5vw, 40px) auto 0; padding: clamp(12px, 1.8vw, 18px); border: 1px solid var(--bd); border-radius: var(--r); background: var(--surface); box-shadow: var(--inset); }
.subnav .credo-button { flex: 1 1 220px; min-height: 52px; text-align: center; }
@media (max-width: 620px) { .subnav { display: grid; } .subnav .credo-button { width: 100%; } }

/* ===== v8: the story box (straddling photos, four movements) ===== */
.heroes { padding-top: clamp(120px, 15vw, 170px); }
.story { overflow: visible; --pad: clamp(26px, 5vw, 64px); }
.story > :first-child { border-radius: var(--r) var(--r) 0 0; }
.story > :last-child { border-radius: 0 0 var(--r) var(--r); }
.story .s1, .story .s3 { padding: var(--pad); }
.story .s2, .story .s4 { padding: clamp(30px, 5.5vw, 72px) var(--pad); }
.story .s2, .story .s4 { box-shadow: inset 0 14px 22px -16px #1b232b, inset 0 -14px 22px -16px #1b232b; }
.story .s4 { box-shadow: inset 0 14px 22px -16px #1b232b; }
/* the pair: top-right corner, half in, half out of the border; text wraps beneath */
.duo { float: right; display: flex; gap: 6px; width: clamp(236px, 27vw, 292px); margin: calc(-1 * (var(--pad) + 112px)) calc(-1 * clamp(14px, 3vw, 44px)) 14px clamp(14px, 2.4vw, 30px); padding: 0; shape-outside: margin-box; position: relative; z-index: 3; }
.duo .polaroid { width: 50%; padding: 6px 6px 8px; margin: 0; }
.duo .polaroid:nth-child(2) { margin-top: 18px; }
.duo .polaroid figcaption { margin-top: 6px; font-size: 8.5px; letter-spacing: .1em; line-height: 1.25; }
small.tiny { margin-left: 10px; font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: none; opacity: .85; color: var(--mut); }
.story .s1 .eyebrow { margin-top: 4px; }
/* section 2: book on the left, billboard on the right, text between */
.flank .wrapfig { margin-top: 4px; width: min(24%, 170px); }
.flank .wrapfig.left { margin-right: clamp(18px, 3vw, 32px); }
.flank .wrapfig.right { width: min(30%, 210px); margin-left: clamp(18px, 3vw, 32px); }
/* section 3 */
.wrapfig.id { width: min(42%, 310px); margin-top: 6px; }
.story .prose p.theory { font-family: var(--f-display); font-style: italic; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); line-height: 1.25; color: var(--accent-t); margin: .3em 0 .7em; position: relative; width: fit-content; }
.story .prose p.theory::after { content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 100%; background: linear-gradient(90deg, var(--accent), transparent); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .5s; }
.story .prose p.theory.in::after { transform: scaleX(1); }
/* section 4: quote left, video right (full width only on phones) */
.s4grid { display: grid; gap: clamp(22px, 3.5vw, 44px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .s4grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.story .s4 .fquote { margin: 0; }
.story .s4 .fquote blockquote p { font-size: clamp(1.3rem, 1rem + 1.1vw, 1.85rem); }
.story .s4 .vplayer { margin: 0; max-width: none; }
.cover-wrap { display: block; text-decoration: none; }
@media (max-width: 640px) {
  .duo { width: 232px; margin-right: calc(-1 * 10px); margin-top: calc(-1 * (var(--pad) + 100px)); }
  .flank { display: flex; justify-content: center; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .flank .wrapfig, .flank .wrapfig.left, .flank .wrapfig.right { float: none !important; width: 44%; margin: 0 !important; }
  .wrapfig.id { float: none !important; width: min(82%, 320px); margin: 12px auto 22px !important; }
}
.journey { padding-top: clamp(12px, 3vw, 28px); }
.story .band-dark { margin: 0; }
@media (max-width: 640px) { small.tiny { display: block; margin: 4px 0 0; } .story .s1 .eyebrow { white-space: nowrap; } }

/* v9: byline in script, larger photos pulled further into the frame */
.story .s1 h2 { margin-bottom: 4px; }
.byline { margin: 0 0 clamp(18px, 2.6vw, 28px); font-family: 'Dancing Script', 'Brush Script MT', cursive; font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.2; color: var(--accent-t); }
.duo { width: clamp(300px, 34vw, 372px); margin-top: calc(-1 * (var(--pad) + 56px)); margin-right: calc(-1 * clamp(8px, 1.6vw, 24px)); }
.duo .polaroid { padding: 8px 8px 10px; }
.duo .polaroid:nth-child(2) { margin-top: 22px; }
.duo .polaroid figcaption { font-size: 10px; margin-top: 7px; }
.heroes { padding-top: clamp(84px, 11vw, 120px); }
@media (max-width: 640px) { .duo { width: 268px; margin-top: calc(-1 * (var(--pad) + 44px)); margin-right: 0; } .duo .polaroid figcaption { font-size: 8.5px; } }
@media (max-width: 640px) { .story .s1 .eyebrow { clear: both; padding-top: 6px; } }

/* v10: video lives inside the story copy (Part 3), in a slate inset */
.story .s3 { display: flow-root; }
.story .s3 .vband { margin: clamp(22px, 3.5vw, 40px) auto; max-width: 860px; padding: clamp(14px, 2.4vw, 26px); border-radius: var(--r); background: #28323d; box-shadow: var(--raised); clear: both; }
.story .s3 .vband .vstage { margin: 0; }
.story .s3 .prose { margin-bottom: 0; }

/* Bunny iframe fills the exact 16:9 frame */
.skip-link{position:fixed;left:16px;top:-80px;z-index:100;background:#fff;padding:11px 15px;border-radius:10px}
.skip-link:focus{top:12px}
.vinner .vframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; background:#000; }

/* ===== Hero, as approved Oct 12 2026: logo on the left, intro paragraph and credit under the sub-navigation ===== */
.banner-logo { position: absolute; z-index: 2; left: 14.5%; top: 47%; width: clamp(190px, 23%, 380px); transform: translate(-50%, -50%); text-align: center; pointer-events: none; animation: logo-in-c 1.4s var(--ease) .3s both; }
@keyframes logo-in-c { from { opacity: 0; transform: translate(-50%, calc(-50% + 18px)); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (max-width: 760px) { .banner-logo { left: 34%; top: 10px; width: clamp(160px, 48%, 260px); transform: translate(-50%, 0); animation-name: logo-in-t; } @keyframes logo-in-t { from { opacity: 0; transform: translate(-50%, 18px); } to { opacity: 1; transform: translate(-50%, 0); } } }
.banner-sub { margin: clamp(4px, .8vw, 10px) auto 0; font-family: var(--f-display); font-style: italic; text-align: center; text-wrap: balance; font-size: clamp(.8rem, 1.5vw, 1.5rem); line-height: 1.3; color: #31344b; text-shadow: 0 1px 12px rgba(255, 255, 255, .7); animation: logo-in 1.4s var(--ease) .7s both; }
.hero-intro { width: min(780px, calc(100% - 2 * var(--gut))); margin: clamp(28px, 4.5vw, 52px) auto 0; padding-bottom: clamp(8px, 2vw, 24px); text-align: center; }
.hero-intro .subtitle { margin: 0 0 clamp(14px, 2vw, 22px); }

/* ===== Heroes of Our Youth video, in its own section below the story (Oct 13 2026) ===== */
.video-section { padding-top: clamp(48px, 7vw, 96px); }
.video-section .vband { margin: 0 auto; max-width: 860px; padding: clamp(14px, 2.4vw, 26px); border-radius: var(--r); background: #28323d; box-shadow: var(--raised); }
.video-section .vband .vstage { margin: 0; }

/* ===== Section 3 list + video thumbnail with live preview, opens in a pop-up (Oct 13 2026) ===== */
.story .prose ul.origin-list { margin: 0 0 1.1em; padding-left: 1.25em; }
.story .prose ul.origin-list li { margin: 0 0 .6em; }
.story .prose ul.origin-list li::marker { color: var(--accent); }
.vthumb { clear: both; width: 50%; margin: clamp(8px, 1.5vw, 16px) auto 0; text-align: center; }
.vthumb-btn { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 1px solid var(--bd); border-radius: var(--r); overflow: hidden; background: #1d242b; box-shadow: var(--raised); cursor: pointer; }
.vthumb-poster, .vthumb-preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vthumb-preview { opacity: 0; transition: opacity .3s; }
.vthumb-btn.previewing .vthumb-preview { opacity: 1; }
.vthumb-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,46,59,0) 55%, rgba(24,46,59,.4)); pointer-events: none; }
.vthumb-btn .vplay { z-index: 2; }
.vthumb-btn:hover .vplay, .vthumb-btn:focus-visible .vplay { transform: scale(1.08); }
.vthumb figcaption { margin-top: 12px; display: grid; gap: 2px; font-size: .9rem; color: var(--mut); }
.vthumb figcaption strong { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-t); }
@media (max-width: 640px) { .vthumb { width: 100%; } }
.vmodal { width: min(1100px, 94vw); max-width: none; padding: 56px 0 0; border: 0; background: transparent; overflow: visible; }
.vmodal::backdrop { background: rgba(16, 22, 28, .82); }
.vmodal-box { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.vmodal-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vmodal-close { position: absolute; top: 4px; right: 0; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #f0eee8; color: #31344b; font-size: 16px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.35); }

/* ===== New "Real Heroes" billboard (level, no tilt) and hero icons beside the officers' list (Oct 13 2026) ===== */
.flank .wrapfig.right.billboard { width: min(36%, 270px); }
.story .billboard, .story .billboard.pre { --rot: 0deg; }
.story .prose ul.origin-list { list-style: none; padding-left: 0; }
.story .prose ul.origin-list li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; margin: 0 0 14px; }
.story .prose ul.origin-list .hero-icon { width: 56px; height: 56px; border-radius: 50%; box-shadow: var(--raised-s); }
.story .prose ul.origin-list li.no-icon::before { content: ""; justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) { .flank .wrapfig.right.billboard { width: 52%; } .story .prose ul.origin-list li { grid-template-columns: 48px 1fr; } .story .prose ul.origin-list .hero-icon { width: 48px; height: 48px; } }

/* ===== Section subheads enlarged to anchor each of the four parts (Oct 13 2026) ===== */
.story .movement { gap: 16px; margin: 0 0 clamp(20px, 3vw, 32px); font-family: var(--f-display); font-size: clamp(1.55rem, 1.1rem + 1.5vw, 2.3rem); font-weight: 400; line-height: 1.15; letter-spacing: -.01em; text-transform: none; color: var(--fg); }
.story .movement span { width: clamp(40px, 4vw, 50px); height: clamp(40px, 4vw, 50px); font-size: clamp(1.1rem, .9rem + .6vw, 1.45rem); color: var(--accent-t); }
.story .movement::after { min-width: 32px; background: linear-gradient(90deg, var(--accent), transparent); opacity: .6; }

/* ===== Isolated "theory" interlude between parts 3 and 4: the line, then the video (Oct 13 2026) ===== */
.story .s-theory { padding: clamp(40px, 6.5vw, 84px) var(--pad); text-align: center; box-shadow: inset 0 14px 22px -16px #1b232b, inset 0 -14px 22px -16px #1b232b; }
.story .s-theory p.theory { margin: 0 auto clamp(22px, 3.5vw, 36px); font-family: var(--f-display); font-style: italic; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.25; color: var(--accent-t); width: fit-content; max-width: 100%; position: relative; }
.story .s-theory p.theory::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: scaleX(0); transition: transform 1.4s var(--ease) .5s; }
.story .s-theory p.theory.in::after { transform: scaleX(1); }
.story .s-theory .vthumb { margin-top: 0; }
.story .s4 { padding: var(--pad); box-shadow: none; }

/* ===== Part 1: small cover icons beside the Jonny Quest and Dark Knight paragraphs (Oct 13 2026) ===== */
.story .prose .icon-para { display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; margin: 0 0 1.1em; }
.story .prose .icon-para p { margin: 0; }
.story .prose .cover-icon { width: 64px; height: auto; border-radius: 6px; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
@media (max-width: 640px) { .story .prose .icon-para { grid-template-columns: 52px 1fr; gap: 14px; } .story .prose .cover-icon { width: 52px; } }

/* ===== Oct 13 evening: handwritten byline, right-side cover icons, low book in part 2, two-column theory section ===== */
.story .title-block { display: inline-block; max-width: 100%; }
.story .title-block .byline { text-align: right; margin: 2px 0 clamp(20px, 3vw, 30px); font-family: 'Homemade Apple', 'Dancing Script', cursive; font-weight: 400; font-size: clamp(1.05rem, .9rem + .7vw, 1.45rem); line-height: 1.6; color: var(--accent-t); transform: rotate(-2deg); transform-origin: right center; }
.story .title-block .byline.pre { transform: translateY(14px) rotate(-2deg); }
.story .prose .icon-para.right { grid-template-columns: 1fr 120px; gap: 22px; }
.story .prose .icon-para.right .cover-icon { width: 120px; justify-self: end; border-radius: 0; }
@media (max-width: 640px) { .story .prose .icon-para.right { grid-template-columns: 1fr 84px; gap: 14px; } .story .prose .icon-para.right .cover-icon { width: 84px; } }
.story .s2 .prose { display: flow-root; }
.story .s2 .wrapfig.book-low { width: min(26%, 180px); margin: 6px clamp(18px, 3vw, 32px) 4px 0; }
@media (max-width: 640px) { .story .s2 .wrapfig.book-low { float: left !important; width: 38%; margin: 4px 16px 8px 0 !important; } .flank { display: block; } .flank .wrapfig.right.billboard { float: none !important; width: 80%; margin: 0 auto 18px !important; } }
.story .s-theory .theory-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; text-align: left; }
.story .s-theory .theory-grid p.theory { margin: 0; width: auto; }
.story .s-theory .theory-grid p.theory::after { background: linear-gradient(90deg, var(--accent), transparent); }
.story .s-theory .theory-grid .vthumb { width: 100%; margin: 0; }
@media (max-width: 760px) { .story .s-theory .theory-grid { grid-template-columns: 1fr; text-align: center; } .story .s-theory .theory-grid p.theory { width: fit-content; margin: 0 auto; } }

/* ===== Origin Story as a storytelling device: five parts, each fills the screen and snaps into place;
         text rises paragraph by paragraph, images follow the text that names them (Oct 13 2026) ===== */
.story .chapter { min-height: calc(100svh - var(--hh, 80px)); scroll-margin-top: var(--hh, 80px); }
.story .s2.chapter, .story .s3.chapter, .story .s4.chapter, .story .s-theory.chapter { display: flex; flex-direction: column; justify-content: center; }
.story .s-theory.chapter > .theory-grid { width: 100%; }
/* snapping is now done by the scroll hold in credo-neu.js */
.story-seq .story .sq { transition: opacity .9s var(--ease), translate .9s var(--ease), scale .9s var(--ease), filter .9s var(--ease); }
.story-seq .story .sq:not(.sq-in) { opacity: 0; filter: blur(6px); }
.story-seq .story .sq-text:not(.sq-in) { translate: 0 46px; }
.story-seq .story .sq-img:not(.sq-in) { scale: .86; }
.story-seq .story .origin-list li.no-icon:has(> .sq:not(.sq-in))::before { opacity: 0; }
.story-seq .story .origin-list li::before { transition: opacity .6s; }

/* ===== Part 3 timing: the set-up line stands on its own, each hero lands, the Batman ID is the punchline (Oct 13 2026) ===== */
.story .prose p.beat { margin: clamp(26px, 4vw, 44px) 0 clamp(24px, 3.6vw, 40px); font-family: var(--f-display); font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2rem); line-height: 1.32; letter-spacing: -.005em; color: var(--fg); max-width: 34ch; }
.story-seq .story .sq-img.punch { transition: opacity .35s ease-out, scale .75s cubic-bezier(.34, 1.7, .5, 1), filter .35s ease-out; }
.story-seq .story .sq-img.punch:not(.sq-in) { scale: .35; filter: blur(2px); }

/* ===== Part 3 revised (Oct 13): the conviction stands alone and centered; the officers' lines are the big ones; hero portraits drop in ===== */
.story .prose p.conviction { margin: clamp(26px, 4vw, 44px) auto clamp(28px, 4vw, 46px); max-width: 30ch; text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.05rem); line-height: 1.32; color: var(--accent-t); }
.story .prose ul.origin-list li { grid-template-columns: 76px 1fr; gap: 18px; margin: 0 0 22px; }
.story .prose ul.origin-list li > span { font-family: var(--f-display); font-size: clamp(1.2rem, 1rem + .75vw, 1.6rem); line-height: 1.38; color: var(--fg); }
.story .prose ul.origin-list .hero-icon { width: 76px; height: 76px; }
@media (max-width: 640px) { .story .prose ul.origin-list li { grid-template-columns: 58px 1fr; gap: 14px; } .story .prose ul.origin-list .hero-icon { width: 58px; height: 58px; } }
.story-seq .story .sq-img.drop { transition: opacity .3s ease-out, translate .8s cubic-bezier(.34, 1.8, .5, 1), scale .8s cubic-bezier(.34, 1.8, .5, 1), filter .3s ease-out; }
.story-seq .story .sq-img.drop:not(.sq-in) { translate: 0 -46px; scale: .6; filter: none; }

/* ===== Part 4: The Credo Project book, right side, text wrapping on its left (Oct 13 2026) ===== */
.story .s4 .prose { display: flow-root; }
.story .s4 .wrapfig.credo-book { width: min(32%, 230px); margin: 4px 0 12px clamp(20px, 3vw, 36px); }
@media (max-width: 640px) { .story .s4 .wrapfig.credo-book { float: right !important; width: 40%; margin: 4px 0 10px 16px !important; } }

/* ===== Origin Story, GSAP choreography (Oct 15 2026): each part is a pinned screen; credo-neu.js scrubs its timeline.
         Styles here only prepare the stage; all motion comes from GSAP. ===== */
.story-gsap .story .rv, .story-gsap .story .pop, .story-gsap .story .sq { transition: none !important; }
.story-gsap .story .chapter { height: var(--avail, auto); min-height: 0; justify-content: flex-start; clip-path: inset(-260px -100vw 0 -100vw); }
.story-gsap .story .stage { position: relative; width: 100%; margin-block: auto; translate: 0 var(--drift, 0px); will-change: transform; }
.story-gsap .story .s1 > .stage, .story-gsap .story .s3 > .stage { margin-block: 0; }
.story-gsap .story .movement::after { transform: scaleX(var(--rule, 1)); transform-origin: left center; }
.story .w { display: inline-block; }
.story-gsap .story .duo .polaroid, .story-gsap .story .wrapfig, .story-gsap .story .cover-icon, .story-gsap .story .hero-icon { will-change: transform, opacity; }

/* ===== Oct 19 2026 · The Austin Project: three officers =====
   Each officer's round portrait slides in on the left margin; once the text has landed it turns over
   to show their hero. Chief Mendez's Batman ID appears on the right instead. One body font throughout. */
.story .prose ul.origin-list { --fs: clamp(104px, 13vw, 148px); display: flex; flex-direction: column; gap: clamp(16px, 2.6vh, 28px); margin: 0 0 1.1em; }
.story .prose ul.origin-list li.officer { display: grid; grid-template-columns: var(--fs) minmax(0, 1fr); gap: clamp(16px, 2.6vw, 28px); align-items: center; margin: 0; padding: 0 0 clamp(14px, 2.4vh, 24px); border-bottom: 1px solid var(--bd); }
.story .prose ul.origin-list li.officer:last-child { border-bottom: 0; padding-bottom: 0; }
.story .prose ul.origin-list li.officer-id { grid-template-columns: var(--fs) minmax(0, 1fr) minmax(150px, 30%); }
.story .prose ul.origin-list li.officer > span { font-family: var(--f-body); font-size: clamp(1.02rem, .98rem + .3vw, 1.14rem); line-height: inherit; color: var(--mut); }
.story .prose ul.origin-list li.officer strong { font-weight: 700; color: var(--fg); }
.story .prose ul.origin-list li.officer-id .wrapfig { float: none; width: 100%; margin: 0; }
.flip { position: relative; width: var(--fs); height: var(--fs); perspective: 800px; }
.flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.flip .face { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .28)); }
/* without motion (or if the animation library never loads) the hero rides along as a small corner badge */
.flip .face.back { inset: auto; right: -12px; bottom: -8px; width: 46%; height: 46%; }
.story-gsap .flip .face.back { inset: 0; right: auto; bottom: auto; width: 100%; height: 100%; transform: rotateY(180deg); }
.story-gsap .story .flip { will-change: transform, opacity; }  /* not on .flip-in: will-change:opacity would flatten the 3D flip */
@media (max-width: 640px) {
  .story .prose ul.origin-list { --fs: 92px; }
  .story .prose ul.origin-list li.officer-id { grid-template-columns: var(--fs) minmax(0, 1fr); }
  .story .prose ul.origin-list li.officer-id .wrapfig { grid-column: 1 / -1; float: none !important; width: min(100%, 320px) !important; margin: 6px auto 0 !important; }
}

/* Oct 21 2026: phones. The two book images no longer float beside the text, which squeezed it into a
   narrow column; they stack, centered, between paragraphs at a comfortable size. */
@media (max-width: 640px) {
  .story .s2 .wrapfig.book-low,
  .story .s4 .wrapfig.credo-book { float: none !important; display: block; width: min(52%, 210px) !important; margin: 18px auto 22px !important; }
  .story .icon-para, .story .icon-para.right { display: block !important; }
  .story .icon-para .cover-icon { display: block; width: min(44%, 170px) !important; height: auto !important; margin: 14px auto 6px !important; }
}

/* Oct 28 2026: phones — section 2 reads in story order: the billboard arrives right after the Junior Police Academy line,
   and the Cary Friedman book right after the line that names it. (Desktop layout is untouched.) */
@media (max-width: 640px) {
  .story .s2 .prose { display: flex; flex-direction: column; }
  .story .s2 .prose > .flank { display: contents; }
  .story .s2 .prose > p:nth-of-type(1) { order: 1; }
  .story .s2 .prose > #q-jpa { order: 2; }
  .story .s2 .prose .wrapfig.billboard { order: 3; float: none !important; display: block; width: min(64%, 260px) !important; margin: 18px auto 22px !important; }
  .story .s2 .prose > #q-ssle { order: 4; }
  .story .s2 .prose .wrapfig.book-low { order: 5; }
}

/* phones — chapter 4: the Credo Project book follows the sentence that names it */
@media (max-width: 640px) {
  .story .s4 .prose { display: flex; flex-direction: column; }
  .story .s4 .prose > #q-credo { order: 1; }
  .story .s4 .prose > .wrapfig.credo-book { order: 2; }
  .story .s4 .prose > p:not(#q-credo) { order: 3; }
}