/* Pulpit to Publishing, Option 2 concept ("Sanctuary", revision 4, 2026-10-21).
   Local only. Do not deploy without Pablo's approval.
   Revision 4: photographs are rectangles with one soft radius (--r-lg), varied by size and placement
   (a full-width band, a two-thirds rectangle, small portraits beside text, a two-photo pairing); no arches
   remain. The statement has no icon chips. The how-it-works sequence has a
   fifth beat (the human pass) and a five-still storyboard under reduced motion. Pinned tracks are
   shorter and the dead stretches between sections are gone.
   Palette (2026-10-22): the light blue #00A1BC carries the page, the dark blue is text and buttons; see the :root notes. Type: three pairings behind data-type.
   Before that date the palette was Option 1's navy ink, warm paper, amber ember and burgundy ribbon. Every color below is one of those tokens, a translucent wash of one, or a sky
   tint that keeps the navy's own hue. The page background is one sky that changes as you scroll: paper,
   pale navy-tinted skies, navy for the dark sections, and back to paper. No clouds, no closing hill scene:
   the turns between light and dark are clean blends. Every visible box has rounded corners.
   Animated properties are transform and opacity; the hero card's clip-path is the one scrubbed exception. */

:root{
  /* Palette 2026-10-22 (Pablo, final direction): the LIGHT blue #00A1BC is the main color. It carries every big surface:
     the hero card, the menu, the archive band, the stadium, the planner foot, the featured edition, the subpage heads and
     the footer. Text on it is white. The DARK blue is the secondary: headings and body on white, kickers, tags, links,
     and the solid button (dark pill, white label, white circle, dark arrow). The two blues never sit on each other: on a
     light-blue surface the solid button inverts to white with a dark circle. Accent words on white (the statement's
     highlighted words, the step numerals, frames and rules) are the light blue. Burgundy stays on strike marks and errors.
     Token names are kept so every rule below still resolves. */
  --blue:#00A1BC; --blue-2:#0092AB; --blue-3:#007F95;              /* unused aliases of the ground */
  --blue3-rgb:0 127 149;
  --ground:#00A1BC; --ground-2:#0092AB; --ground-rgb:0 161 188;   /* the light blue: the main color, every big surface */
  --ink-950:#0B3A47; --ink-900:#0E4454; --ink-800:#155A6D;        /* the dark blue: text on light grounds, the solid button */
  --paper-0:#FFFFFF; --paper-50:#FFFFFF; --paper-100:#EEF8FA; --paper-200:#DDF1F5;   /* white, pale, paler */
  /* the old amber scale, now pale tints of the hue (050-300) and the ONE button hover (400) */
  --ember-050:#EEF8FA; --ember-100:#D9EEF2; --ember-200:#B9DCE4; --ember-300:#D6F3F8; --ember-400:#155A6D;
  --btn:#0B3A47;                                                    /* the solid button fill (dark) */
  --on-accent:#FFFFFF;                                              /* the button label: white on the dark pill, 12:1 */
  --ribbon:#0B3A47; --ribbon-light:#155A6D;                        /* the small accents (= the dark blue) */
  --mark:#7A1F2E;                                                   /* the editor's red: strike marks and form errors only */
  --text-body:#1E4553; --text-muted:#44666F;
  --on-deep:#F4FBFC; --on-deep-strong:#FFFFFF; --on-deep-muted:#DFF4F8;   /* on the light blue: white, 3.1:1 (passes for large type only; Pablo's hex) */

  /* the same colors as channels, for hairlines, washes and tinted shadows */
  --ink-rgb:11 58 71;        /* ink-950 */
  --paper-rgb:255 255 255;   /* paper-50 */
  --deep-rgb:255 255 255;    /* on-deep */
  --ember-rgb:0 161 188;      /* the old amber channel: now the dark blue (washes and frames on light) */
  --gold-rgb:255 255 255;    /* the pale tint channel (hairlines on dark) */
  --ribbon-rgb:11 58 71;     /* ribbon */
  --night-rgb:0 70 84;       /* ink-950 halved toward black: only for shadows that fall on the dark blue */

  /* the sky: the hue at sky lightness, so white turns to the dark blue without passing through grey.
     50-200 carry body text; 300-500 only appear inside the blends and on form borders. */
  --sky-50:#F0FAFC; --sky-100:#DFF4F8; --sky-200:#C2EAF1; --sky-300:#94DBE7; --sky-400:#55C4D6; --sky-500:#1FB0C9;

  /* roles */
  --bg:var(--paper-50);
  --card:var(--paper-0);
  --heading:var(--ink-950);
  --text:var(--text-body);
  --muted:var(--text-muted);
  --gold:var(--ground);             /* frames, rules, ornaments on light (the old amber role) */
  --gold-text:var(--ink-950);        /* small accent text on light: 12:1 */
  --gold-display:var(--ground);     /* the statement's highlighted words and the step numerals */
  --gold-on-deep:#FFFFFF;            /* accent on the dark blue: a pale tint, 11:1 on ink-950 */
  --rubric:var(--ribbon);            /* the small accents on light */
  --hair:rgb(var(--ink-rgb) / .14); --hair-2:rgb(var(--ink-rgb) / .08); --hair-deep:rgb(var(--deep-rgb) / .3);
  --focus:var(--ribbon-light); --focus-deep:var(--paper-0);

  /* corners: nothing visible is square */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px; --r-pill:999px;
  --hero-r:34px;                              /* matches the radius the hero card closes to (home.js) */
  --foot-r:clamp(28px,4.2vw,60px);            /* the footer's rounded top */

  /* type: three candidate pairings switched by data-type on <html> (?type=a|b|c, read by home.js / pages.js).
     a is the default. Each pairing carries its own weights, tracking and sizes so the hero, the statement,
     the headings and the body are tuned to that face, not inherited from another. */
  --f-display:'Source Serif 4','Iowan Old Style',Georgia,serif;
  --f-text:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --w-head:600; --w-accent:500;
  --ls-hero:-.022em; --ls-h2:-.016em; --ls-h3:-.006em; --lh-hero:1;
  --fs-hero:clamp(2.8rem,1.3rem + 4.2vw,5.2rem);
  --fs-h2:clamp(2.1rem,1.4rem + 2.8vw,3.7rem);
  --fs-h2-xl:clamp(2.45rem,1.25rem + 4.2vw,5.1rem);
  --fs-h3:clamp(1.4rem,1.2rem + .7vw,1.8rem);
  --fs-lead:clamp(1.1rem,1rem + .4vw,1.3rem);
  --fs-body:1.0625rem; --lh-body:1.65;
  --fs-statement:clamp(1.7rem,1rem + 3.2vw,3.9rem);

  --container:100%; --gutter:clamp(16px,5vw,96px); --hdr:78px;
  --ease:cubic-bezier(.22,1,.36,1); --ease-expo:cubic-bezier(.16,1,.3,1); --drift:cubic-bezier(.45,.05,.55,.95);
  --sh-1:0 1px 2px rgb(var(--ink-rgb) / .06),0 16px 36px -20px rgb(var(--ink-rgb) / .3);
  --sh-2:0 2px 6px rgb(var(--ink-rgb) / .08),0 34px 70px -30px rgb(var(--ink-rgb) / .42);
}
/* pairing b: one geometric sans for display, a humanist sans for reading */
html[data-type="b"]{
  --f-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --f-text:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --w-head:700; --w-accent:500;
  --ls-hero:-.035em; --ls-h2:-.028em; --ls-h3:-.016em; --lh-hero:1.02;
  --fs-hero:clamp(2.6rem,1.2rem + 3.9vw,4.8rem);
  --fs-h2:clamp(2rem,1.3rem + 2.6vw,3.4rem);
  --fs-h2-xl:clamp(2.3rem,1.2rem + 3.9vw,4.7rem);
  --fs-h3:clamp(1.3rem,1.15rem + .6vw,1.65rem);
  --fs-body:1.125rem; --lh-body:1.62;
  --fs-statement:clamp(1.6rem,.95rem + 2.95vw,3.6rem);
}
/* pairing c: a modern editorial serif for display, a modern serif for reading */
html[data-type="c"]{
  --f-display:'Newsreader','Iowan Old Style',Georgia,serif;
  --f-text:'Source Serif 4','Iowan Old Style',Georgia,serif;
  --w-head:500; --w-accent:500;
  --ls-hero:-.015em; --ls-h2:-.012em; --ls-h3:-.004em; --lh-hero:.98;
  --fs-hero:clamp(3rem,1.4rem + 4.4vw,5.5rem);
  --fs-h2:clamp(2.2rem,1.45rem + 2.9vw,3.9rem);
  --fs-h2-xl:clamp(2.6rem,1.3rem + 4.4vw,5.4rem);
  --fs-h3:clamp(1.45rem,1.25rem + .7vw,1.85rem);
  --fs-body:1.0625rem; --lh-body:1.68;
  --fs-statement:clamp(1.75rem,1rem + 3.35vw,4.1rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--fs-body)/var(--lh-body) var(--f-text);font-variant-numeric:lining-nums;overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);color:var(--heading);font-weight:var(--w-head);margin:0;overflow-wrap:break-word;text-wrap:balance}
h2{font-size:var(--fs-h2);line-height:1.04;letter-spacing:var(--ls-h2)}
h3{font-size:var(--fs-h3);line-height:1.14;letter-spacing:var(--ls-h3)}
p{margin:0 0 1.1em}
b,strong{font-weight:600}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* focus: zero-specificity so a pill keeps its pill shape; anything without a radius gets a rounded ring */
:where(a,button,summary,input,textarea,select):focus-visible{outline:2px solid var(--focus);outline-offset:3px}
:where(a,summary):focus-visible{border-radius:var(--r-xs)}
:where(.tone-dark,.hero,#menu,.colophon,.tier-mid) :where(a,button,summary,input):focus-visible{outline-color:var(--focus-deep)}
.skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--ink-950);color:var(--paper-50);padding:.7rem 1rem;border-radius:var(--r-xs);transition:transform .4s var(--ease)}
.skip:focus{transform:translateY(5rem)}

/* paper grain in ink: fixed, never on a scrolling layer (the matrix carries ink-950's channels) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:90;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .043 0 0 0 0 .227 0 0 0 0 .278 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:900px}
.center{text-align:center}
.small{font-size:.9rem}
.tone-dark{color:var(--on-deep)}
.tone-dark h2,.tone-dark h3{color:var(--on-deep-strong)}
.prose{max-width:36em}
.lead{font-size:var(--fs-lead);line-height:1.62}
.orn{display:block;width:min(240px,72%);height:24px;margin-inline:auto;color:var(--gold)}
.tone-dark .orn{color:var(--gold-on-deep)}
.dropcap::first-letter{float:left;font-family:var(--f-display);font-weight:600;font-size:3.8em;line-height:.74;padding:.06em .07em 0 0;color:var(--rubric)}
.tone-dark .dropcap::first-letter{color:var(--gold-on-deep)}

/* ---------- photographs: rectangles, one soft radius, varied only by size and placement.
   Photos stay natural: no tint, a soft foot shade only. ---------- */
.photo{position:relative;margin:0;overflow:hidden;border-radius:var(--r-lg);background:var(--ground);box-shadow:var(--sh-2);isolation:isolate;z-index:0}
.photo img{width:100%;height:100%;object-fit:cover}
.photo img[data-par]{position:absolute;left:0;top:-9%;height:118%;will-change:transform}
.photo::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:linear-gradient(to top,rgb(var(--ink-rgb) / .28),rgb(var(--ink-rgb) / 0) 38%);box-shadow:inset 0 0 0 1px rgb(var(--paper-rgb) / .14)}
.tone-dark .photo{box-shadow:0 40px 80px -36px rgb(var(--night-rgb) / .85)}
.photo-tall{aspect-ratio:4/5}
.photo-port{aspect-ratio:3/4}
.photo-wide{aspect-ratio:3/2}
/* a full-width band: the photograph runs edge to edge, the words sit on its foot over a gradient */
.band{position:relative;margin:0;overflow:hidden;display:flex;align-items:flex-end;min-height:min(88vh,860px);background:var(--ground);isolation:isolate}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.band img[data-par]{top:-9%;height:118%;will-change:transform}
.band::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgb(var(--ground-rgb) / .08) 0%,rgb(var(--ground-rgb) / 0) 24%,rgb(var(--ground-rgb) / .2) 46%,rgb(var(--ground-rgb) / .86) 74%,var(--ground) 100%)}
.band-copy{position:relative;width:100%;padding-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem)}
/* two photographs side by side, the second set a little lower */
.pair{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1rem,2.4vw,2rem);align-items:start;margin-top:clamp(2.5rem,5vw,4rem)}
.pair .pair-b{margin-top:clamp(2rem,5vw,4.5rem)}


/* ---------- buttons: pill + nested icon ---------- */
.btn{--bg:var(--btn);--fg:var(--on-accent);--ico-bg:var(--paper-0);--ico-fg:var(--ink-950);
  display:inline-flex;align-items:center;justify-content:center;gap:.8rem;min-height:48px;padding:.5rem .5rem .5rem 1.35rem;border-radius:var(--r-pill);border:1px solid transparent;
  background:var(--bg);color:var(--fg);font:500 1rem/1.2 var(--f-text);text-decoration:none;cursor:pointer;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .1),0 16px 30px -18px rgb(var(--ink-rgb) / .6);
  transition:transform .55s var(--ease),background-color .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),box-shadow .55s var(--ease)}
.btn .ico{flex:none;width:2.15rem;height:2.15rem;border-radius:50%;display:grid;place-items:center;background:var(--ico-bg);color:var(--ico-fg);transition:transform .55s var(--ease)}
.btn .ico svg{width:1.05rem;height:1.05rem}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .1),0 22px 38px -20px rgb(var(--ink-rgb) / .7)}
.btn:hover .ico{transform:translate(3px,-1px) scale(1.06)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-ink:hover{--bg:var(--ember-400)}
.btn-honey{--bg:var(--btn);--fg:var(--on-accent);--ico-bg:var(--paper-0);--ico-fg:var(--ink-950);box-shadow:inset 0 1px 0 rgb(var(--paper-rgb) / .3),0 18px 34px -18px rgb(var(--night-rgb) / .6)}
.btn-honey:hover{--bg:var(--ember-400)}
/* on the light-blue surfaces the solid button inverts: white pill, dark label, dark circle, white arrow. The two blues never touch. */
.tone-dark .btn:not(.btn-ghost),.hero .btn:not(.btn-ghost),#menu .btn:not(.btn-ghost),.tier-mid .btn:not(.btn-ghost),.colophon .btn:not(.btn-ghost),.page-hero .btn:not(.btn-ghost),.lead-item .btn:not(.btn-ghost),.result-one .btn:not(.btn-ghost),.side-note-deep .btn:not(.btn-ghost){--bg:var(--paper-0);--fg:var(--ink-950);--ico-bg:var(--ink-950);--ico-fg:var(--paper-0);box-shadow:0 18px 34px -18px rgb(var(--night-rgb) / .6)}
.tone-dark .btn:not(.btn-ghost):hover,.hero .btn:not(.btn-ghost):hover,#menu .btn:not(.btn-ghost):hover,.tier-mid .btn:not(.btn-ghost):hover,.colophon .btn:not(.btn-ghost):hover,.page-hero .btn:not(.btn-ghost):hover,.lead-item .btn:not(.btn-ghost):hover,.result-one .btn:not(.btn-ghost):hover,.side-note-deep .btn:not(.btn-ghost):hover{--bg:var(--ember-050)}
.btn-ghost{--bg:transparent;--fg:var(--ink-950);--ico-bg:rgb(var(--ink-rgb) / .08);--ico-fg:var(--ink-950);border-color:rgb(var(--ink-rgb) / .3);box-shadow:none;padding:.5rem 1.45rem}
.btn-ghost:has(.ico){padding-right:.5rem}
.btn-ghost:hover{--bg:rgb(var(--ink-rgb) / .04);border-color:var(--ink-950);box-shadow:none}
.tone-dark .btn-ghost,.hero .btn-ghost,#menu .btn-ghost,.tier-mid .btn-ghost{--fg:var(--on-deep-strong);--ico-bg:rgb(var(--deep-rgb) / .1);--ico-fg:var(--on-deep-strong);border-color:rgb(var(--deep-rgb) / .34)}
.tone-dark .btn-ghost:hover,.hero .btn-ghost:hover{--bg:rgb(var(--deep-rgb) / .07);border-color:var(--on-deep-strong)}
.btn-lg{min-height:56px;font-size:1.05rem;padding-left:1.6rem}
.btn-ghost.btn-lg{padding:.5rem 1.6rem}
.btn-sm{min-height:44px;font-size:.94rem;padding-left:1.1rem}
.btn-sm .ico{width:1.85rem;height:1.85rem}
.ctas{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.ctas.center{justify-content:center}

/* ---------- masthead: floating, blurred ---------- */
.masthead{position:fixed;top:10px;left:0;right:0;z-index:100;padding-inline:max(8px,1.2vw);pointer-events:none}
.masthead-bar{pointer-events:auto;max-width:calc(var(--container) + 16px);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.45rem .45rem .45rem .95rem;border-radius:20px;background:rgb(var(--paper-rgb) / .92);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);border:1px solid rgb(var(--ink-rgb) / .1);box-shadow:0 14px 34px -24px rgb(var(--ink-rgb) / .5)}
.lockup{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink-950);min-width:0}
.lockup img{width:38px;height:36px;flex:none;border-radius:var(--r-xs)}
.lockup .name{display:block;font:600 1.38rem/1 var(--f-display);letter-spacing:-.005em;white-space:nowrap}
.lockup .name b{font-weight:700;color:var(--rubric)}
.lockup .sub{display:block;font:italic 400 .74rem/1.25 var(--f-text);color:var(--muted);margin-top:.22rem;white-space:nowrap}
.masthead-actions{display:flex;align-items:center;gap:.45rem;flex:none}
.menu-btn{display:inline-flex;align-items:center;gap:.6rem;min-height:44px;padding:0 1rem;border-radius:var(--r-pill);border:1px solid rgb(var(--ink-rgb) / .22);background:transparent;color:var(--ink-950);font:500 .92rem/1 var(--f-text);cursor:pointer;transition:border-color .3s var(--ease),transform .5s var(--ease)}
.menu-btn:hover{border-color:var(--ink-950)}
.menu-btn:active{transform:scale(.97)}
.bars{position:relative;width:18px;height:10px}
.bars i{position:absolute;left:0;right:0;height:1.5px;border-radius:2px;background:currentColor;transition:transform .5s var(--ease)}
.bars i:first-child{top:0}
.bars i:last-child{bottom:0}
.menu-btn[aria-expanded="true"] .bars i:first-child{transform:translateY(4.25px) rotate(45deg)}
.menu-btn[aria-expanded="true"] .bars i:last-child{transform:translateY(-4.25px) rotate(-45deg)}

/* ---------- menu: a navy sheet from the right, its exposed left corners rounded ---------- */
#menu{position:fixed;inset:0;z-index:200;visibility:hidden;pointer-events:none;transition:visibility 0s .65s}
#menu.open{visibility:visible;pointer-events:auto;transition-delay:0s}
#menu .veil{position:absolute;inset:0;background:rgb(var(--ground-rgb) / .58);opacity:0;transition:opacity .55s var(--ease)}
#menu .panel{position:absolute;top:0;right:0;bottom:0;width:min(470px,calc(100% - 14px));display:flex;flex-direction:column;gap:1.5rem;padding:1.1rem clamp(1.1rem,4vw,2rem) 2rem;background:var(--ground);color:var(--on-deep);border-radius:var(--r-lg) 0 0 var(--r-lg);overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);transition:transform .65s var(--ease);isolation:isolate}
#menu .panel::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(200deg,rgb(var(--ember-rgb) / .14),rgb(var(--ember-rgb) / 0) 45%),linear-gradient(20deg,rgb(var(--ribbon-rgb) / .24),rgb(var(--ribbon-rgb) / 0) 50%)}
#menu.open .veil{opacity:1}
#menu.open .panel{transform:none}
.panel-head{display:flex;justify-content:space-between;align-items:center;font:600 .72rem/1 var(--f-text);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-on-deep)}
#menu-close{width:46px;height:46px;border-radius:50%;border:1px solid var(--hair-deep);background:transparent;color:var(--on-deep-strong);cursor:pointer;display:grid;place-items:center;transition:transform .5s var(--ease),border-color .3s var(--ease)}
#menu-close svg{width:20px;height:20px}
#menu-close:hover{transform:rotate(90deg);border-color:var(--on-deep-strong)}
#menu-close:active{transform:rotate(90deg) scale(.94)}
#menu nav{display:grid}
#menu nav a{display:block;padding:1rem 0;border-bottom:1px solid var(--hair-deep);text-decoration:none;font:600 1.75rem/1.1 var(--f-display);color:var(--on-deep-strong);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .6s var(--ease),color .3s var(--ease)}
#menu nav a small{display:block;margin-top:.35rem;font:400 .86rem/1.4 var(--f-text);color:var(--on-deep-muted)}
#menu nav a:hover{color:var(--gold-on-deep)}
#menu.open nav a{opacity:1;transform:none}
#menu.open nav a:nth-child(2){transition-delay:.05s}
#menu.open nav a:nth-child(3){transition-delay:.1s}
#menu.open nav a:nth-child(4){transition-delay:.15s}
#menu.open nav a:nth-child(5){transition-delay:.2s}
#menu.open nav a:nth-child(6){transition-delay:.25s}
.panel-cta{margin-top:auto}
.panel-cta .btn{width:100%}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform 1.1s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* =====================================================================================================
   HERO: the Matthew 28 photograph. A navy card, rounded at its foot, that closes into a rounded card as
   you scroll away.
   ===================================================================================================== */
.hero{position:relative;z-index:2}
.hero-card{position:relative;isolation:isolate;overflow:hidden;min-height:100vh;min-height:100svh;display:flex;align-items:center;background:var(--ground);color:var(--on-deep);border-radius:0}
.hero-photo{position:absolute;top:0;right:0;bottom:0;width:54%;z-index:-2;display:block;overflow:hidden;background:var(--ground);border-radius:0}
.hero-photo img{position:absolute;left:0;top:-7%;width:100%;height:114%;object-fit:cover;object-position:50% 34%;will-change:transform}
.hero-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ground) 0%,var(--ground) 46%,rgb(var(--ground-rgb) / .8) 51%,rgb(var(--ground-rgb) / .32) 58.5%,rgb(var(--ground-rgb) / 0) 66%)}
.hero-inner{position:relative;padding-top:calc(var(--hdr) + clamp(1.5rem,5vh,4rem));padding-bottom:clamp(2.5rem,6vh,4.5rem)}
.hero-copy{max-width:min(35rem,41vw);will-change:transform,opacity}
.hero h1{font-size:var(--fs-hero);line-height:var(--lh-hero);letter-spacing:var(--ls-hero);color:var(--on-deep-strong)}
.hero h1 em{font-style:italic;font-weight:var(--w-accent);color:var(--gold-on-deep)}
.hl{display:block;overflow:hidden;padding:.08em .12em .1em 0;margin:-.08em -.12em -.1em 0}
.hl-i{display:block}
.proofline{list-style:none;padding:0;margin:2.1rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.92rem;line-height:1.45;color:var(--on-deep-muted)}
.proofline li{display:block}
.proofline li::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.6rem;border-radius:1.5px;background:var(--gold-on-deep);transform:translateY(-2px) rotate(45deg)}
.proofline b{color:var(--on-deep-strong)}
.mission{margin:1.5rem 0 0;max-width:28em;font:italic 500 clamp(1.12rem,1.02rem + .45vw,1.38rem)/1.5 var(--f-display);color:var(--on-deep-strong);text-wrap:pretty}
.mission::before{content:"";display:block;width:3rem;height:1px;margin-bottom:.9rem;background:var(--gold-on-deep)}
.builtby{display:flex;align-items:center;gap:1rem;margin:1.9rem 0 0;padding-top:1.5rem;border-top:1px solid var(--hair-deep);max-width:36em;font-size:.95rem;line-height:1.55;color:var(--on-deep)}
.medallion{width:56px;height:56px;border-radius:50%;flex:none;box-shadow:0 0 0 2px var(--ground),0 0 0 3.5px var(--gold-on-deep)}
.builtby a{color:var(--gold-on-deep);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s var(--ease)}
.builtby a:hover{color:var(--on-deep-strong)}
.prose a:not(.btn),.faq-list a{color:var(--rubric);text-decoration-thickness:1px;text-underline-offset:3px;transition:color .3s var(--ease)}
.faq-list a:hover{color:var(--ink-950)}

/* intro: the photo lifts in from the bottom edge, the two title lines rise out of their masks */
@keyframes hero-photo-in{from{clip-path:inset(100% 0 0 0);transform:scale(1.12)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes line-up{from{transform:translateY(110%)}to{transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.js .hero-photo{animation:hero-photo-in 1.5s var(--ease-expo) .05s both}
.js .hl-i{animation:line-up 1.15s var(--ease-expo) .3s both}
.js .hl + .hl .hl-i{animation-delay:.42s}
.js .hero-in{animation:fade-up 1s var(--ease-expo) both}
.js .hero-in.ctas{animation-delay:.68s}
.js .hero-in.proofline{animation-delay:.8s}
.js .hero-in.mission{animation-delay:.9s}
.js .hero-in.builtby{animation-delay:1s}

/* =====================================================================================================
   THE PROMISE: a pinned statement; the words darken one by one. Plain words, no chips, room to breathe.
   The track is 200vh (one window pinned), a third shorter than before.
   ===================================================================================================== */
/* the statement is already pinned beneath the hero card; the card lifts off it like a page turning up */
.statement{position:relative;z-index:1;height:200vh;margin-top:-100vh;margin-top:-100svh;background:var(--bg)}
.statement-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:calc(var(--hdr) + clamp(1.5rem,4vh,3rem)) 0 clamp(2.5rem,6vh,4rem)}
.statement .wrap{max-width:100%}
.statement-text{margin:0 auto;max-width:20em;padding-block:clamp(1rem,3vh,2.5rem);text-align:center;font:var(--w-head) var(--fs-statement)/1.3 var(--f-display);letter-spacing:-.012em;word-spacing:.08em;color:var(--ink-950);text-wrap:balance}
.statement-vis .w{display:inline-block;opacity:.34;will-change:opacity}
.statement-vis em{font-style:italic;color:var(--gold-display)}

/* =====================================================================================================
   HOW IT WORKS: the pinned sequence on a sky that cools from paper to pale navy, then deepens into the
   navy of the archive below (a clean blend where the old cloud bank stood)
   ===================================================================================================== */
.how{position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bg) 0%,var(--sky-50) 9%,var(--sky-100) 36%,var(--sky-200) 70%,var(--sky-200) 100%)}
/* the sky deepens to navy across the top of the archive band below; no padding, no empty stretch */
.how::after{content:"";position:absolute;left:0;right:0;top:100%;height:clamp(7rem,16vh,12rem);z-index:1;pointer-events:none;background:linear-gradient(180deg,var(--sky-200) 0%,rgb(var(--ink-rgb) / .18) 40%,rgb(var(--ink-rgb) / 0) 100%)}
.how-intro{padding-top:clamp(2rem,4vw,3.5rem)}
.how-intro h2{font-size:var(--fs-h2-xl);max-width:11.5em;line-height:1;letter-spacing:var(--ls-hero)}
.how-track{position:relative;height:350vh;margin-top:clamp(.5rem,2vw,1.5rem)}
.how-pin{position:sticky;top:0;height:100vh;height:100svh;padding-top:var(--hdr);display:flex;overflow:clip;isolation:isolate}
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,4vw,4.5rem);align-items:center;height:100%;padding-block:1.2rem 1.6rem}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem;align-self:center}
.step{position:relative;display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.9rem;padding-left:1.1rem;opacity:.5;transition:opacity .5s var(--ease)}
.step::before{content:"";position:absolute;left:0;top:.35rem;bottom:.35rem;width:2px;border-radius:2px;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease)}
.step.is-active{opacity:1}
.step.is-active::before{transform:scaleY(1)}
.step .num{font:600 2.3rem/1 var(--f-display);color:var(--gold-display)}
.step h3{font-size:clamp(1.3rem,1.1rem + .55vw,1.62rem);color:var(--ink-950)}
.step p{margin:.5rem 0 0;font-size:.97rem;line-height:1.6;color:var(--text)}
.scene-col{display:grid;grid-template-rows:auto minmax(0,1fr);gap:.9rem;height:100%;min-height:0;will-change:transform}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.chip{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1rem;border-radius:var(--r-pill);border:1px solid var(--hair);background:rgb(var(--paper-rgb) / .45);font:500 .82rem/1 var(--f-text);color:var(--text);opacity:.6;transition:opacity .5s var(--ease)}
.chip::before{content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;border:1px solid rgb(var(--ember-rgb) / .6);background:rgb(var(--paper-rgb) / .8);opacity:0;transition:opacity .5s var(--ease)}
.chip.is-done{opacity:.85}
.chip.is-on{opacity:1;color:var(--ink-950)}
.chip.is-on::before{opacity:1}
.scene-box{position:relative;min-height:0}
/* the human line: real text laid out in scene pixels and placed by the same transform as the drawing (--fit, home.js) */
.hp-line{position:absolute;left:0;top:0;z-index:3;margin:0;padding:28px 0 0;width:620px;transform-origin:0 0;transform:var(--fit,none) translate3d(0,var(--rise,0px),0);opacity:0;pointer-events:none;will-change:transform,opacity;text-align:center;font:600 30px/1.14 var(--f-display);letter-spacing:-.012em;color:var(--ink-950);text-wrap:balance}
.hp-line::after{content:"";display:block;width:52px;height:2px;margin:12px auto 0;border-radius:2px;background:var(--gold)}
.hp-card{position:absolute;left:160px;width:30em;font-size:var(--doc-f);padding:.85em 1.1em .9em 1.1em;border-radius:1em;background:var(--card);color:var(--text);font-family:var(--f-text);line-height:1.45;opacity:0;z-index:7;will-change:transform,opacity;
  box-shadow:0 .08em .15em rgb(var(--ink-rgb) / .14),0 1.4em 2.4em -1.2em rgb(var(--ink-rgb) / .5),inset 0 0 0 1px rgb(var(--ember-rgb) / .22)}
.hp-card-1{top:412px}
.hp-card-2{top:526px}
.hp-k{display:block;margin-bottom:.3em;font:600 .6em/1 var(--f-text);letter-spacing:.2em;text-transform:uppercase;color:var(--rubric)}
/* the editor's mark on the typed sheet: a proofreader's delete loop in the margin of a struck aside */
.mk{position:absolute;color:var(--mark);opacity:0;pointer-events:none;will-change:transform,opacity}
.mk-del{left:-1.85em;top:.4em;width:1.45em;height:1.45em;transform-origin:50% 50%}
.mk-del svg{display:block;width:100%;height:100%}

/* the scene is drawn at a fixed logical size and scaled to fit (JS); sizes inside are in em */
.scene{position:absolute;left:0;top:0;transform-origin:0 0;width:620px;height:660px;font-size:15px;line-height:1.4;--doc-f:15px;--card-f:15px;--book-f:15px;--play-s:1.1;--doc3-s:.75}
.anchor{position:absolute;width:0;height:0}
.anchor[data-a="play"]{left:0;top:30px}
.anchor[data-a="doc3"]{left:141px;top:0}
.anchor[data-a="book4"]{left:70px;top:150px}

.aud{position:absolute;width:12.667em;height:6.667em;font-size:var(--card-f);padding:.75em .85em .7em;border-radius:1em;background:var(--card);color:var(--ink-950);display:flex;flex-direction:column;justify-content:space-between;transform-origin:0 0;opacity:0;will-change:transform,opacity;
  box-shadow:0 .08em .15em rgb(var(--ink-rgb) / .16),0 1.5em 2.6em -1.3em rgb(var(--ink-rgb) / .5),inset 0 0 0 1px rgb(var(--ember-rgb) / .18)}
.aud[data-card="0"]{left:10px;top:200px;z-index:6}
.aud[data-card="1"]{left:215px;top:200px;z-index:5}
.aud[data-card="2"]{left:420px;top:200px;z-index:4}
.aud[data-card="3"]{left:10px;top:315px;z-index:3}
.aud[data-card="4"]{left:215px;top:315px;z-index:2}
.aud[data-card="5"]{left:420px;top:315px;z-index:1}
.aud-top{display:flex;align-items:center;gap:.5em}
.aud-play{flex:none;width:1.65em;height:1.65em;border-radius:50%;display:grid;place-items:center;background:var(--ground);color:var(--ember-300)}
.aud-play svg{width:1.15em;height:1.15em}
.aud-title{font:600 .86em/1 var(--f-text);color:var(--ink-950);white-space:nowrap}
.aud-src{margin-left:auto;font:500 .58em/1 var(--f-text);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.aud-wave{display:flex;align-items:center;gap:.13em;height:1.9em}
.aud-wave i{flex:1;height:100%;border-radius:2px;background:rgb(var(--ink-rgb) / .24);transform:scaleY(var(--h,.5))}
.aud.is-playing .aud-wave i{background:var(--ribbon-light);animation:wave .9s var(--drift) infinite alternate;animation-delay:calc(var(--d,0) * -1s)}
@keyframes wave{from{transform:scaleY(var(--h,.5))}to{transform:scaleY(calc(var(--h,.5) * .3 + .08))}}
.aud-foot{display:flex;align-items:center;gap:.6em}
.aud-rail{flex:1;height:2px;border-radius:2px;background:rgb(var(--ink-rgb) / .14);overflow:hidden}
.aud-rail i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:left}
.aud-time{font:500 .6em/1 var(--f-mono);color:var(--muted)}

.doc{position:absolute;left:160px;top:150px;width:30em;font-size:var(--doc-f);border-radius:1em;background:var(--card);overflow:hidden;transform-origin:0 0;opacity:0;z-index:7;will-change:transform,opacity;
  box-shadow:0 .1em .2em rgb(var(--ink-rgb) / .16),0 2.4em 4em -2em rgb(var(--ink-rgb) / .55)}
.doc-bar{display:flex;align-items:center;gap:.5em;height:2.4em;padding:0 1em;background:var(--paper-100);border-bottom:1px solid var(--hair);color:var(--muted);border-radius:1em 1em 0 0}
.doc-bar svg{width:1.15em;height:1.15em;color:var(--gold-text)}
.doc-bar span{font:500 .74em/1 var(--f-mono)}
.doc-body{padding:1em 1.2em 1em 1.2em}
.doc .ln{display:block;position:relative;height:2.2em;padding-left:0;margin:0;overflow:visible;font-family:var(--f-mono);font-size:.9em;line-height:2.2em;white-space:pre;color:var(--ink-950)}
.doc .ln.is-drop{color:var(--mark)}
.tx{position:relative;display:inline-block}
.js .scene .ch{opacity:0}
.ch.is-caret{position:relative}
.ch.is-caret::after{content:"";position:absolute;right:-2px;top:.3em;bottom:.3em;width:2px;border-radius:1px;background:var(--mark);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.strike{position:absolute;left:-.15em;right:-.15em;top:52%;height:1.5px;border-radius:1px;background:var(--mark);transform:scaleX(0);transform-origin:left}

.fly{position:absolute;left:0;top:0;z-index:9;font-family:var(--f-mono);font-size:calc(var(--doc-f) * .9);line-height:1.7;white-space:pre;color:var(--ink-950);background:var(--card);padding:0 .35em;border-radius:.4em;transform-origin:0 0;opacity:0;pointer-events:none;will-change:transform,opacity;
  box-shadow:0 .6em 1.2em -.4em rgb(var(--ink-rgb) / .45),inset 0 0 0 1px rgb(var(--ember-rgb) / .25)}

.book-wrap{position:absolute;left:70px;top:250px;width:32em;height:22.6em;font-size:var(--book-f);perspective:2400px;opacity:0;z-index:8;will-change:transform,opacity}
.book{position:relative;width:100%;height:100%;transform-style:preserve-3d;will-change:transform}
.book-shadow{position:absolute;left:3%;right:3%;bottom:-1.6em;height:3em;border-radius:50%;background:radial-gradient(closest-side,rgb(var(--ink-rgb) / .45),rgb(var(--ink-rgb) / 0));transform-origin:97% 50%}
.page{position:absolute;top:0;width:50%;height:100%;overflow:hidden}
/* pages: generous outer corners, a small curve where they meet the spine */
.recto{left:50%;padding:2.3em 1.9em 1.6em 2.2em;border-radius:.3em .8em .8em .3em;background:linear-gradient(90deg,var(--paper-200) 0,var(--paper-100) 6%,var(--card) 15%);box-shadow:1px 0 0 var(--paper-200),3px 0 0 var(--paper-100),4px 0 0 var(--paper-200),6px 0 0 var(--paper-100),7px 0 0 var(--sky-300)}
.pg-run{margin:0;text-align:center;font:600 .6em/1 var(--f-text);letter-spacing:.34em;text-transform:uppercase;color:var(--rubric)}
.pg-orn{display:block;width:8.5em;height:.85em;margin:.75em auto 1.15em;color:var(--gold)}
.pg-verse{font-family:var(--f-display);font-style:italic;font-weight:500;font-size:1.04em;line-height:1.42;color:var(--ink-950)}
.pg-drop{float:left;font-style:normal;font-weight:600;font-size:3.3em;line-height:.8;margin:.06em .08em 0 0;color:var(--rubric)}
.vl{display:block;white-space:nowrap}
.vl > span{display:inline-block}
.pg-bars{display:grid;gap:.62em;margin-top:1.05em;clear:both}
.pg-bars i{display:block;height:.34em;border-radius:.2em;background:var(--paper-200);transform-origin:left;transform:scaleX(0)}
.pg-bars i:nth-child(2){width:94%}
.pg-bars i:nth-child(3){width:98%}
.pg-bars i:nth-child(4){width:91%}
.pg-bars i:nth-child(5){width:97%}
.pg-bars i:nth-child(7){width:56%}
.leaf{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:0 50%;transform-style:preserve-3d;transform:rotateY(-180deg);will-change:transform}
.face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.face.front{border-radius:.3em .8em .8em .3em;background:linear-gradient(140deg,var(--ink-800) 0%,var(--ink-900) 52%,var(--ink-950) 100%);box-shadow:inset .6em 0 .9em -.5em rgb(var(--night-rgb) / .8),inset 0 0 0 1px rgb(var(--gold-rgb) / .14)}
.cover{position:absolute;inset:1.05em;border:1px solid rgb(var(--gold-rgb) / .55);border-radius:.8em;display:flex;flex-direction:column;align-items:center;text-align:center;padding:2.2em 1.1em 1.9em;color:var(--ember-300)}
.cover::before{content:"";position:absolute;inset:.35em;border:1px solid rgb(var(--gold-rgb) / .25);border-radius:.5em;pointer-events:none}
.cv-top{font:500 .58em/1 var(--f-text);letter-spacing:.32em;text-transform:uppercase}
.cv-qf{width:2.5em;height:2.5em;margin:auto 0 1em;color:var(--ember-300)}
.cv-title{font:600 1.9em/1.02 var(--f-display);color:var(--on-deep-strong)}
.cv-title span{display:block;margin-top:.55em;font:italic 500 .5em/1.3 var(--f-display);color:var(--ember-300)}
.cv-author{margin-top:auto;font:500 .56em/1 var(--f-text);letter-spacing:.26em;text-transform:uppercase}
.face.back{transform:rotateY(180deg);border-radius:.8em .3em .3em .8em;background:linear-gradient(270deg,var(--paper-200) 0,var(--paper-100) 6%,var(--card) 15%);box-shadow:-1px 0 0 var(--paper-200),-3px 0 0 var(--paper-100),-4px 0 0 var(--paper-200),-6px 0 0 var(--paper-100),-7px 0 0 var(--sky-300)}
.verso{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2em 1.6em}
.verso-b{opacity:0}
.pg-qf{width:3.2em;height:3.2em;color:var(--gold)}
.pg-ref{margin-top:1em;font:italic 500 1.12em/1.2 var(--f-display);color:var(--rubric)}
.fd-head{font:600 .6em/1 var(--f-text);letter-spacing:.32em;text-transform:uppercase;color:var(--rubric)}
.qr{display:block;width:7.6em;height:7.6em;margin:1.1em 0 1em;padding:.45em;background:var(--paper-0);border-radius:.85em;box-shadow:0 0 0 1px var(--hair);fill:var(--ink-950);shape-rendering:crispEdges}
.fd-link{font:italic 500 1.02em/1.2 var(--f-display);color:var(--ink-950);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:.22em}
.cap{position:absolute;left:-3em;right:-3em;top:calc(100% + 1.1em);margin:0;text-align:center;font:italic 500 1.5em/1.2 var(--f-display);color:var(--ink-950);opacity:0}

/* =====================================================================================================
   THE ARCHIVE: dusk. The window rises across the turn from sky to navy.
   ===================================================================================================== */
.archive{position:relative;z-index:1;display:flow-root;background:var(--ground)}
.archive-text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.archive .verses{columns:2;column-gap:2.4rem}
.archive .verses p{break-inside:avoid;color:var(--on-deep)}
.archive .verses p:last-child{margin-bottom:0}
.band-archive img{object-position:50% 36%}

/* =====================================================================================================
   CHAPTERS: night, the stadium, and the light coming back (navy lifting through pale sky to paper)
   ===================================================================================================== */
.chapters{position:relative;z-index:1;overflow-x:clip;--dawn-h:clamp(5rem,12vh,8rem);padding:clamp(2rem,5vw,4rem) 0 var(--dawn-h);background:var(--ground)}
.chapters::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--dawn-h);pointer-events:none;background:linear-gradient(180deg,var(--ground) 0%,var(--ground) 14%,var(--sky-500) 28%,var(--sky-400) 50%,var(--sky-300) 66%,var(--sky-200) 79%,var(--sky-100) 88%,var(--sky-50) 95%,var(--bg) 100%)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.split-chapters h2{font-size:var(--fs-h2-xl);line-height:1;letter-spacing:var(--ls-hero);margin-bottom:1.8rem}
.chapters-photo{max-width:380px;justify-self:end;width:100%}
.chapters-photo img{object-position:50% 30%}

/* the stadium: the sanctuary photograph fills the stage from its first frame; the ring closes down on the line */
.portal{position:relative;height:200vh;margin-top:clamp(1rem,4vw,3rem)}
.portal-stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate}
.portal-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 4%;z-index:-2}
.portal-wash{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(52% 42% at 50% 50%,rgb(var(--ink-rgb) / .94) 0%,rgb(var(--ink-rgb) / .88) 55%,rgb(var(--ink-rgb) / .55) 100%),linear-gradient(180deg,rgb(var(--ink-rgb) / .6),rgb(var(--ink-rgb) / .3) 40%,rgb(var(--ink-rgb) / .8))}
.portal-ring{position:absolute;left:50%;top:50%;width:min(118vmin,1180px);height:min(66vmin,660px);border-radius:var(--r-pill);border:min(14vmin,140px) solid var(--ground-2);box-shadow:inset 0 0 0 1px rgb(var(--paper-rgb) / .22),0 0 0 1px rgb(var(--paper-rgb) / .18);transform:translate(-50%,-50%) scale(5);will-change:transform}
.pull{position:relative;z-index:1;text-align:center;padding-inline:var(--gutter)}
.pull .orn{width:min(200px,50vw)}
.portal-words{margin:1rem auto;max-width:9.6em;font:italic 500 clamp(2.3rem,1.15rem + 3.9vw,4.7rem)/1.06 var(--f-display);color:var(--on-deep-strong);letter-spacing:-.01em}
.portal-vis .pw{display:inline-block;white-space:nowrap}
.portal-vis .pl{display:inline-block;will-change:transform,opacity}
.portal-vis .pw.em{color:var(--gold-on-deep)}
.js:not(.still) .portal-vis .pl,.js:not(.still) .portal .orn{opacity:0}
.chapters-after{max-width:940px;padding-block:clamp(2.5rem,5vw,4rem) 0;text-align:center}
.chapters-after p{margin:0;font:500 clamp(1.45rem,1.1rem + 1.2vw,2.2rem)/1.34 var(--f-display);color:var(--on-deep-strong);text-wrap:balance}

/* =====================================================================================================
   THE TWELVE WEEKS: morning. The procession line draws itself as you scroll.
   ===================================================================================================== */
.timeline{position:relative;background:var(--bg);padding:clamp(1.5rem,3vw,2.5rem) 0 clamp(3.5rem,6vw,5rem)}
.timeline-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,4rem);align-items:end}
.timeline-head .lead{margin:0}
.procession{list-style:none;margin:clamp(2.5rem,5vw,3.5rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.procession::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;background:linear-gradient(90deg,rgb(var(--ember-rgb) / 0),var(--gold) 5%,var(--gold) 95%,rgb(var(--ember-rgb) / 0));transform-origin:left;transform:scaleX(var(--draw,1))}
.procession li{position:relative;display:flex;flex-direction:column;padding-right:1.1rem}
.procession .mark{position:relative;z-index:1;display:grid;place-items:center;width:2.1rem;height:2.1rem;margin-bottom:1.1rem;border-radius:50%;background:var(--bg);color:var(--gold);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.procession .mark svg{width:1.7rem;height:1.7rem}
.js:not(.still) .procession li:not(.is-lit) .mark{opacity:.25;transform:scale(.6)}
.procession .who{font:600 .7rem/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}
.procession b{font:600 1.45rem/1.12 var(--f-display);color:var(--ink-950);margin-bottom:.35rem}
.procession .what{font-size:1rem;line-height:1.55}
.procession .you .mark,.procession .you .who,.procession .you b{color:var(--rubric)}
.procession .end .mark,.procession .end b{color:var(--gold-text)}
.timeline-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:clamp(1.5rem,3vw,2rem);border-top:1px solid var(--hair)}
.involve{margin:0;font:italic 500 clamp(1.45rem,1.2rem + .9vw,2rem)/1.2 var(--f-display);color:var(--rubric)}
.timeline-foot .ctas{margin:0}

/* =====================================================================================================
   WHAT IS YOUR BOOK FOR: three lancets drifting at different depths in a pale sky
   ===================================================================================================== */
.for{position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--sky-50) 52%,var(--sky-100) 100%);padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,7rem)}
.for-head{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.for-head h2{font-size:var(--fs-h2-xl);line-height:1;letter-spacing:var(--ls-hero)}
.for-head p{margin:0;font-size:var(--fs-lead);line-height:1.6}
.lancets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.25rem,3vw,2.75rem);margin-top:clamp(3rem,6vw,5rem);align-items:start}
.lancet{margin-top:4.5rem}
.lancet.lancet-mid{margin-top:0}
.lancet h3{margin-top:1.6rem;font-size:clamp(1.38rem,1.2rem + .5vw,1.72rem)}
.lancet p{margin:.6rem 0 0;font-size:.98rem}
.lancet:first-child .photo img{object-position:30% 50%}
.lancet .photo{will-change:transform}

/* =====================================================================================================
   VOICE: the photo rises over the end of the previous section
   ===================================================================================================== */
.voice{position:relative;background:linear-gradient(180deg,var(--sky-100) 0%,var(--sky-50) 22%,var(--bg) 55%);padding:clamp(3rem,6vw,5rem) 0 clamp(4.5rem,8vw,7rem)}
.split-voice{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
.voice-photo{width:100%}
.voice-photo img{object-position:50% 30%}
.split-voice h2{margin-bottom:1.6rem}
.bookplate{position:relative;max-width:780px;margin:clamp(3rem,6vw,5rem) auto 0;padding:2.4rem clamp(1.4rem,4vw,3rem);text-align:center;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1);outline:1px solid rgb(var(--ribbon-rgb) / .4);outline-offset:-10px}
.bookplate::before,.bookplate::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:2px;background:var(--gold);transform:translateY(-50%) rotate(45deg)}
.bookplate::before{left:-4px}
.bookplate::after{right:-4px}
.bookplate b{display:block;margin-bottom:.6rem;font:600 clamp(1.7rem,1.35rem + 1vw,2.3rem)/1.1 var(--f-display);color:var(--rubric)}
.bookplate p{margin:0;font-size:1.05rem}
.compare-block{margin-top:3rem}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.compare figure{margin:0;padding:1.6rem;background:var(--card);border-radius:var(--r-md);box-shadow:var(--sh-1)}
.compare figcaption{font:600 .72rem/1 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:var(--rubric);margin-bottom:1rem}
.compare blockquote{margin:0;font:italic 500 1.25rem/1.45 var(--f-display);color:var(--ink-950)}
.compare-caption{margin-top:1.2rem;text-align:center;font:italic 500 1.4rem/1.2 var(--f-display);color:var(--ink-950)}

/* testimonials slot: two rows moving in opposite directions */
.pastors{position:relative;background:var(--bg);padding:clamp(3rem,6vw,5rem) 0 clamp(4rem,7vw,6rem)}
.testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;max-width:var(--container);margin:2.5rem auto 0;padding-inline:var(--gutter)}
.testimonials.is-running{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;max-width:none;padding:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.mq-row{display:flex;gap:1.2rem;width:max-content;animation:mq 80s linear infinite}
.mq-row.mq-rev{animation-direction:reverse;animation-duration:92s}
.testimonials.is-running:hover .mq-row{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - .6rem))}}
.testimonial{margin:0;padding:1.8rem;border-radius:var(--r-md);background:var(--card);border:1px solid rgb(var(--ember-rgb) / .22);box-shadow:var(--sh-1)}
.is-running .testimonial{width:min(400px,82vw);flex:none}
.testimonial blockquote{margin:0 0 1.4rem;font:italic 500 1.3rem/1.4 var(--f-display);color:var(--ink-950)}
.testimonial figcaption{display:flex;align-items:center;gap:.8rem;font-size:.9rem}
.testimonial figcaption b{display:block;color:var(--ink-950)}
.t-photo{width:48px;height:48px;border-radius:50%}
.t-cover{width:44px;height:auto;margin-left:auto;border-radius:6px}

/* =====================================================================================================
   THREE WAYS: the editions rise into place as the sky cools
   ===================================================================================================== */
.ways{position:relative;background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 25%,var(--sky-100) 100%);padding:clamp(2rem,5vw,4rem) 0 clamp(5rem,9vw,8rem)}
.ways-head{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:end}
.ways-head p{margin:0}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,2rem);margin-top:clamp(3.2rem,6vw,4.75rem);align-items:stretch}
.tier{position:relative;padding:6px;border-radius:var(--r-lg);background:linear-gradient(170deg,rgb(var(--ember-rgb) / .6),rgb(var(--ember-rgb) / .16));box-shadow:var(--sh-1);will-change:transform}
.tier-core{height:100%;display:flex;flex-direction:column;align-items:center;padding:2.9rem clamp(1.2rem,2.4vw,1.9rem) 2rem;border-radius:calc(var(--r-lg) - 5px);background:var(--card)}
.tier h3{text-align:center;font-size:clamp(1.55rem,1.35rem + .6vw,1.9rem)}
.tier .does{margin:.65rem 0 1.4rem;text-align:center;font-size:.97rem;line-height:1.55;color:var(--muted)}
.tier-more{width:100%}
.tier-more summary{display:none}
.tier ul{list-style:none;width:100%;margin:0 0 1.9rem;padding:1.25rem 0 0;border-top:1px solid var(--hair);display:grid;gap:.72rem;font-size:.95rem;line-height:1.5}
.tier li{position:relative;padding-left:1.35rem}
.tier li::before{content:"";position:absolute;left:.15rem;top:.62em;width:6px;height:6px;border-radius:1.5px;background:var(--gold);transform:rotate(45deg)}
.tier li.plus{font-weight:600;color:var(--ink-950)}
.tier li.plus::before{background:var(--rubric)}
.tier .btn{margin-top:auto;align-self:stretch}
.tier-mid{background:linear-gradient(170deg,var(--sky-300),var(--ground))}
.tier-mid .tier-core{background:var(--ground);color:var(--on-deep)}
.tier-mid h3,.tier-mid li.plus{color:var(--on-deep-strong)}
.tier-mid .does{color:var(--on-deep)}
.tier-mid ul{border-top-color:var(--hair-deep)}
.tier-mid li::before{background:var(--gold-on-deep)}
.tier-mid li.plus::before{background:var(--paper-0)}
.tag{position:absolute;top:-.95rem;left:50%;z-index:2;transform:translateX(-50%);padding:.5rem .95rem;border-radius:var(--r-pill);background:var(--ribbon);color:var(--paper-50);font:600 .68rem/1 var(--f-text);letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;box-shadow:0 10px 20px -10px rgb(var(--ribbon-rgb) / .8)}
.tier-note{margin:2.6rem auto 0;max-width:40em;text-align:center;font-style:italic;color:var(--text)}
.sample-link{display:inline-block;margin-top:.3rem;color:var(--rubric)}

/* =====================================================================================================
   PLANNER: evening. The sky deepens to navy inside the top padding, before any text; the hymn board.
   ===================================================================================================== */
.planner-sec{position:relative;--pl-pad:clamp(6rem,10vw,9rem);padding:var(--pl-pad) 0 clamp(5rem,9vw,8rem);
  background:linear-gradient(180deg,var(--sky-100) 0,var(--sky-200) calc(var(--pl-pad) * .14),var(--sky-300) calc(var(--pl-pad) * .32),var(--sky-400) calc(var(--pl-pad) * .52),var(--sky-500) calc(var(--pl-pad) * .7),var(--ground) calc(var(--pl-pad) * .86),var(--ground) var(--pl-pad),var(--ground) 100%)}
.split-planner{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.planner-sec .lead{margin:1.5rem 0 0;color:var(--on-deep)}
.hymnboard{margin-top:2rem;padding:8px;border-radius:20px;background:linear-gradient(160deg,var(--ember-100) 0%,var(--paper-0) 45%,var(--ember-100) 100%);box-shadow:0 2px 6px rgb(var(--night-rgb) / .12),0 34px 60px -36px rgb(var(--night-rgb) / .6),inset 0 0 0 1px rgb(var(--paper-rgb) / .6)}
.planner{width:100%;border-collapse:separate;border-spacing:0 6px;padding:.4rem .7rem .55rem;border-radius:13px;background:var(--paper-0)}
.planner th{padding:.7rem .8rem .25rem;text-align:left;font:600 .66rem/1 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text)}
.planner th:last-child,.planner td:last-child{text-align:right}
.planner td{padding:.8rem .9rem;background:var(--paper-100);color:var(--ink-950);font:600 1.3rem/1.1 var(--f-display);vertical-align:middle}
/* each row reads as one rounded bar: outer corners rounded, the seam between its two cells is interior */
.planner td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.planner td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
.planner td small{display:block;margin-top:.3rem;font:400 .82rem/1.3 var(--f-text);color:var(--muted)}
.planner .slot{display:inline-block;padding:.5rem .8rem;border-radius:var(--r-pill);background:var(--ember-100);color:var(--ink-950);font:600 .92rem/1.1 var(--f-text);box-shadow:inset 0 -2px 0 rgb(var(--ink-rgb) / .16)}
.planner tr.featured td{background:var(--ember-050)}
.planner tr.featured td:first-child{box-shadow:inset 3px 0 0 var(--ink-950)}
.planner tr.featured .slot{background:var(--ink-950);color:var(--on-deep-strong)}
.planner-note{margin:1.5rem 0 0;color:var(--on-deep-muted)}
.planner-photo{max-width:440px;width:100%;justify-self:end}
.planner-photo img{object-position:56% 50%}

/* =====================================================================================================
   GUARANTEES: the seals sit across the turn from night back to a pale morning sky
   ===================================================================================================== */
.guarantees{position:relative;background:linear-gradient(180deg,var(--ground) 0%,var(--ground) 20%,var(--ground) 29%,var(--sky-500) 36%,var(--sky-400) 44%,var(--sky-300) 53%,var(--sky-200) 63%,var(--sky-100) 74%,var(--bg) 87%);padding:clamp(1rem,3vw,2rem) 0 clamp(5rem,9vw,8rem)}
.guarantees h2{color:var(--on-deep-strong);text-align:center}
.seals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);margin-top:clamp(2.75rem,5vw,4rem)}
.seal{position:relative;padding:2.3rem 2rem 2.1rem;border-radius:var(--r-lg);background:var(--card);border:1px solid rgb(var(--ember-rgb) / .3);box-shadow:var(--sh-2)}
.seal-qf{display:block;width:2.7rem;height:2.7rem;margin-bottom:1.1rem;color:var(--gold)}
.seal h3{margin-bottom:.75rem;font-size:clamp(1.55rem,1.35rem + .6vw,1.85rem)}
.seal p{margin:0;font-size:.97rem}
.seal-limit{background:var(--paper-100);border:1px dashed rgb(var(--ribbon-rgb) / .55)}
.seal-limit .seal-qf,.seal-limit h3{color:var(--rubric)}
.guarantees .ctas{margin-top:3rem}

/* ---------- founder ---------- */
.founder{position:relative;background:var(--bg);padding:clamp(2rem,5vw,4rem) 0 clamp(5rem,9vw,8rem)}
.founder-block{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,6rem);align-items:center}
.founder-photo{max-width:420px;width:100%}
.founder-block h2{margin-bottom:1.6rem}
.founder-block .btn{margin-top:.6rem}
.showcase{display:grid;grid-template-columns:1fr 2fr 2fr 2fr;gap:1rem;margin-top:3rem}
.showcase figure{margin:0}
.showcase img{border-radius:var(--r-sm);box-shadow:var(--sh-1)}
.form-card{max-width:640px;margin:3rem auto 0;padding:2rem;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.form-card h3{margin-bottom:1.2rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-label{display:block;font-size:.88rem;font-weight:500;color:var(--ink-950);margin-bottom:.35rem}
.form-input{width:100%;min-height:48px;padding:.7rem .9rem;border:1px solid var(--sky-400);border-radius:var(--r-sm);background:var(--paper-0);font:inherit;color:var(--ink-950)}
.form-error{min-height:1.2em;margin:.3rem 0 0;font-size:.82rem;color:var(--mark)}
.form-message{margin:1rem 0 0;font-size:.92rem}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.req{color:var(--mark)}

/* ---------- faq: the questions sit in one rounded card ---------- */
.faq{position:relative;background:var(--bg);padding:clamp(3rem,6vw,5rem) 0 clamp(3rem,5vw,4.5rem)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.faq-head{position:sticky;top:calc(var(--hdr) + 2.5rem)}
.faq-head h2{font-size:var(--fs-h2-xl);line-height:1;letter-spacing:var(--ls-hero)}
.faq-head .orn{margin:1.6rem 0 0;width:200px}
.faq-photo{max-width:300px;margin-top:2.2rem}
.faq-photo img{object-position:46% 40%}
.faq-list{padding:.35rem clamp(1.1rem,2.6vw,2rem);background:var(--card);border:1px solid var(--hair-2);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.faq-list details{border-bottom:1px solid var(--hair)}
.faq-list details:last-child{border-bottom:0}
.faq-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1.4rem;align-items:baseline;gap:.5rem;padding:1.25rem 0;font:600 clamp(1.22rem,1.1rem + .45vw,1.48rem)/1.25 var(--f-display);color:var(--ink-950);transition:color .3s var(--ease)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:1.05rem;height:1.05rem;justify-self:end;align-self:center;color:var(--gold-text);background:linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat;transition:transform .5s var(--ease)}
.faq-list summary:hover{color:var(--rubric)}
.faq-list summary:active{color:var(--gold-text)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list details p{margin:0;padding:0 2.2rem 1.5rem 0}
.faq-list details[open] p{animation:faq-in .55s var(--ease)}
@keyframes faq-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* =====================================================================================================
   CLOSE: the last call to action on a pale sky; the footer rises straight out of its foot
   ===================================================================================================== */
.close{position:relative;padding:clamp(2.5rem,5vw,4rem) 0 calc(clamp(2.5rem,4vw,3.5rem) + var(--foot-r));
  background:linear-gradient(180deg,var(--bg) 0%,var(--bg) 12%,var(--sky-50) 48%,var(--sky-100) 100%)}
.close-copy{position:relative}
.close h2{max-width:16em;margin:1.4rem auto 0;font-size:clamp(2.3rem,1.5rem + 3.2vw,4.3rem);line-height:1.02}
.close .lead{max-width:38em;margin:1.4rem auto 0;font-size:clamp(1.15rem,1rem + .55vw,1.45rem);color:var(--text)}
.close .under{margin:1.7rem 0 0;font-size:.92rem;font-style:italic;color:var(--muted)}

/* ---------- the scroll cue: a thin gold line drawing down to a chevron, fixed at the foot of the window ---------- */
.scroll-cue{position:fixed;left:50%;bottom:14px;z-index:95;display:flex;flex-direction:column;align-items:center;gap:4px;color:#fff;mix-blend-mode:difference;opacity:0;transform:translate(-50%,10px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none;filter:drop-shadow(0 1px 2px rgb(var(--ink-rgb) / .35))}
.scroll-cue.is-on{opacity:1;transform:translate(-50%,0)}
.cue-line{position:relative;display:block;width:1px;height:52px;overflow:hidden;background:rgb(255 255 255 / .3)}
.cue-line::after{content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:var(--gold);transform-origin:top;animation:cue-draw 2.1s var(--ease) infinite}
.scroll-cue .cue-line::after{background:#fff}
@keyframes cue-draw{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.cue-chev{width:18px;height:18px}
.scroll-cue.is-still .cue-line::after{animation:none;transform:none}

/* ---------- colophon: full width, navy, large rounded top corners ---------- */
.colophon{position:relative;z-index:2;margin-top:calc(-1 * var(--foot-r));padding:clamp(3rem,5vw,4.5rem) 0 1.6rem;background:var(--ground);color:var(--on-deep);border-radius:var(--foot-r) var(--foot-r) 0 0;font-size:1rem;box-shadow:0 -28px 60px -44px rgb(var(--ink-rgb) / .55)}
.foot{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:2.5rem}
.colophon .brand p{margin:1.2rem 0 0;max-width:24em}
.colophon h2{margin-bottom:1rem;font:600 .7rem/1 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-on-deep)}
.colophon ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.colophon a{text-decoration:none;color:var(--on-deep);transition:color .3s var(--ease)}
.colophon a:hover{color:var(--gold-on-deep)}
.colophon .lockup{color:var(--on-deep-strong)}
.colophon .lockup .name b{color:var(--gold-on-deep)}
.colophon .lockup .sub{color:var(--on-deep-muted)}
/* the emblem carries navy ink, so on navy it sits on a small paper tile */
.colophon .lockup img{width:50px;height:48px;padding:6px;background:var(--paper-50);border-radius:var(--r-sm)}
.legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 1.5rem;margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--hair-deep);font-size:.82rem;color:var(--on-deep-muted)}

/* =====================================================================================================
   Static states: no JS, reduced motion, or ?static. Every pinned piece shows its final, readable state.
   ===================================================================================================== */
html:not(.js) .statement,.still .statement{height:auto;margin-top:0}
html:not(.js) .statement-pin,.still .statement-pin{position:relative;height:auto;padding-block:clamp(6rem,14vw,11rem)}
.still .statement-vis .w{opacity:1}
html:not(.js) .portal,.still .portal{height:auto}
html:not(.js) .portal-stage,.still .portal-stage{position:relative;height:auto;min-height:min(82vmin,780px);padding-block:3rem}
html:not(.js) .portal-ring,.still .portal-ring{transform:translate(-50%,-50%)}
.how.is-static .how-track{height:auto;padding-bottom:clamp(4rem,8vw,7rem)}
.how.is-static .how-pin{position:relative;height:auto;padding-top:0;overflow:visible}
.how.is-static .how-grid{display:block;height:auto;padding-block:1rem 0}
.how.is-static .steps,.how.is-static .scene-col{display:none}
/* the storyboard: five stills, each the drawing frozen at one beat beside its words */
.storyboard{list-style:none;margin:0;padding:0;display:grid;gap:clamp(3rem,6vw,5rem)}
.sb{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.sb:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.sb:nth-child(even) .sb-art{order:2}
.sb-art{position:relative;overflow:hidden;border-radius:var(--r-lg);background:rgb(var(--paper-rgb) / .55);box-shadow:inset 0 0 0 1px rgb(var(--ink-rgb) / .07)}
.sb-scene{position:absolute;left:0;top:0;transform-origin:0 0}
.sb-text{display:grid;grid-template-columns:3rem minmax(0,1fr);gap:.9rem;align-items:start}
.sb-text .num{font:600 2.3rem/1 var(--f-display);color:var(--gold-text)}
.sb-text h3{font-size:clamp(1.3rem,1.1rem + .55vw,1.62rem);color:var(--ink-950)}
.sb-text p{margin:.5rem 0 0;font-size:.97rem;line-height:1.6;color:var(--text)}
.sb-text > h3,.sb-text > .sb-cap{grid-column:1/-1}
.sb-hp{font-size:clamp(1.55rem,1.3rem + .8vw,2.1rem);line-height:1.12;letter-spacing:-.012em}
.sb-hp::after{content:"";display:block;width:3rem;height:2px;margin-top:.9rem;border-radius:2px;background:var(--gold)}
.sb-text .sb-cap{position:static;margin:0;text-align:left;font-size:clamp(1.3rem,1.15rem + .6vw,1.8rem);opacity:1}
/* each still shows its heading; the step paragraph opens on demand (the summary is the heading itself) */
.sb-more summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 1.3rem;align-items:center;gap:.6rem}
.sb-more summary::-webkit-details-marker{display:none}
.sb-more summary::after{content:"";width:1rem;height:1rem;color:var(--gold-text);background:linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat;transition:transform .5s var(--ease)}
.sb-more[open] summary::after{transform:rotate(45deg)}
.sb-more summary:hover h3{color:var(--rubric)}
.sb-more p{margin-top:.7rem}
html:not(.js) .scene-col{display:none}
html:not(.js) .how-track{height:auto;padding-bottom:clamp(4rem,8vw,7rem)}
html:not(.js) .how-pin{position:relative;height:auto}
html:not(.js) .step{opacity:1}

/* =====================================================================================================
   Tablet and below
   ===================================================================================================== */
@media (max-width:1023px){
  :root{--hdr:72px}
  .archive-text{grid-template-columns:minmax(0,1fr)}
  .split,.split-voice,.split-planner,.founder-block{grid-template-columns:minmax(0,1fr)}
  .planner-photo,.founder-photo{justify-self:center;max-width:420px}
  .timeline-head,.for-head,.ways-head{grid-template-columns:minmax(0,1fr)}
  .procession{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:2.4rem}
  .procession::before{display:none}
  .js:not(.still) .procession li:not(.is-lit) .mark{opacity:.25;transform:scale(.6)}
  .lancets{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;gap:3.5rem}
  .lancet,.lancet.lancet-mid{margin-top:0}
  .lancet .photo{aspect-ratio:4/5}
  .tiers{grid-template-columns:minmax(0,1fr);max-width:540px;margin-inline:auto;gap:2.4rem}
  .seals{grid-template-columns:minmax(0,1fr);max-width:620px;margin-inline:auto}
  .guarantees{background:linear-gradient(180deg,var(--ground) 0%,var(--ground) 9%,var(--ground) 13%,var(--sky-500) 17%,var(--sky-400) 22%,var(--sky-300) 28%,var(--sky-200) 36%,var(--sky-100) 46%,var(--bg) 60%)}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .faq-head{position:static}
  .foot{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot .brand{grid-column:1/-1}
  .testimonials,.showcase{grid-template-columns:minmax(0,1fr)}

  /* how: pinned, captions stacked in one cell so only the live step shows, scene below */
  .how-track{height:300vh}
  .how-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:.8rem;padding-block:.5rem 1rem}
  .steps{display:grid;gap:.6rem}
  .step{opacity:1;grid-template-columns:2.1rem minmax(0,1fr);gap:.55rem;padding-left:.8rem;align-items:start}
  .step::before{top:.2rem;bottom:.2rem}
  .step .num{font-size:1.5rem;line-height:1.2;transition:color .5s var(--ease)}
  .step h3{font-size:1.12rem;line-height:1.2;transition:color .5s var(--ease)}
  .step:not(.is-active) .num,.step:not(.is-active) h3{color:var(--muted)}
  .step p{display:none;max-width:30em;font-size:.88rem;line-height:1.5;margin-top:.55rem}
  .step.is-active p{display:block}
  html:not(.js) .step p,.how.is-static .step p{display:block}
  .chips{gap:.35rem}
  .chip{font-size:.74rem;padding-right:.7rem}
  .scene{width:360px;height:510px;--doc-f:12px;--card-f:13.6px;--book-f:11.25px;--play-s:1.04;--doc3-s:.8}
  .anchor[data-a="play"]{left:0;top:0}
  .anchor[data-a="doc3"]{left:36px;top:0}
  .anchor[data-a="book4"]{left:0;top:110px}
  .aud[data-card="0"]{left:0;top:112px}
  .aud[data-card="1"]{left:188px;top:112px}
  .aud[data-card="2"]{left:0;top:212px}
  .aud[data-card="3"]{left:188px;top:212px}
  .aud[data-card="4"]{left:0;top:312px}
  .aud[data-card="5"]{left:188px;top:312px}
  .doc{left:0;top:104px}
  .book-wrap{left:0;top:200px}
  .cap{font-size:1.45em}
  .hp-line{width:360px;padding-top:0;font-size:22px}
  .hp-line::after{width:40px;margin-top:8px}
  /* phones: the caption cards show the kicker and the first clause; the rest stays in the DOM under a fade */
  .hp-card{left:0;width:30em;max-height:4.9em;overflow:hidden}
  .hp-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.6em;background:linear-gradient(180deg,rgb(255 255 255 / 0),var(--card) 70%)}
  .hp-card-1{top:318px}
  .hp-card-2{top:392px}
  /* packages: name, subhead, button; the bullets open on demand */
  .tier-more summary{display:grid;grid-template-columns:minmax(0,1fr) 1.2rem;align-items:center;gap:.6rem;list-style:none;cursor:pointer;width:100%;padding:1rem 0 .2rem;border-top:1px solid var(--hair);font:600 1.02rem/1.2 var(--f-text);color:var(--ink-950)}
  .tier-more summary::-webkit-details-marker{display:none}
  .tier-more summary::after{content:"";width:.95rem;height:.95rem;color:var(--gold-text);background:linear-gradient(currentColor,currentColor) center/100% 1.4px no-repeat,linear-gradient(currentColor,currentColor) center/1.4px 100% no-repeat;transition:transform .5s var(--ease)}
  .tier-more[open] summary::after{transform:rotate(45deg)}
  .tier-mid .tier-more summary{color:var(--on-deep-strong);border-top-color:var(--hair-deep)}
  .tier-mid .tier-more summary::after{color:var(--gold-on-deep)}
  .tier-more{order:3;margin-top:1.1rem}
  .tier .btn{order:2;margin-top:.4rem}
  .tier ul{margin-bottom:.4rem;padding-top:.8rem;border-top:0}
  .sb,.sb:nth-child(even){grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .sb:nth-child(even) .sb-art{order:0}
  .sb-text{grid-template-columns:2.4rem minmax(0,1fr);gap:.7rem}
  .sb-text .num{font-size:1.9rem}
  .storyboard{gap:clamp(2.5rem,6vw,4rem)}
  .chapters-photo{justify-self:center;max-width:360px}
  .voice-photo{justify-self:stretch}
  .pair{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .pair .pair-b{margin-top:2.5rem}
  .faq-photo{max-width:260px}
  .band{min-height:min(92svh,820px)}
  /* phones: the band is shorter and the verses sit higher, so the blue is solid from mid-height */
  .band::before{background:linear-gradient(180deg,rgb(var(--ground-rgb) / .08) 0%,rgb(var(--ground-rgb) / 0) 18%,rgb(var(--ground-rgb) / .3) 34%,rgb(var(--ground-rgb) / .92) 52%,var(--ground) 64%)}
  .archive-text{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .archive .verses{columns:1}
  .portal{height:170vh}
}
@media (min-width:1024px) and (max-height:760px){
  .step{gap:.7rem}
  .steps{gap:1.1rem}
  .step h3{font-size:1.25rem}
  .step p{font-size:.88rem;line-height:1.5}
  .step .num{font-size:1.9rem}
}
@media (max-width:767px){
  :root{--hero-r:24px}
  /* reading rhythm on phones: short lines, air between paragraphs, under headings and between list items */
  p{max-width:62ch;margin-bottom:1.1em}
  .center p,.close p,.chapters-after p,.tier .does,.tier-note,.statement-text{margin-inline:auto}
  h2,h3{margin-bottom:.6em}
  .step h3{margin-bottom:0}
  .proofline{gap:.5em 1.1rem}
  .tier ul{gap:.6em}
  .colophon ul{gap:.5em}
  .faq-list details p{padding-bottom:1.3em}
}

/* hero: photo on top, title over the dark foot of the photo */
@media (max-width:899px){
  .hero-card{display:block;min-height:0;--ph:min(74svh,860px)}
  .hero-photo{left:0;bottom:auto;width:100%;height:var(--ph);border-radius:0 0 var(--hero-r) var(--hero-r)}
  .hero-photo img{object-position:50% 14%;border-radius:inherit}
  .hero-shade{background:linear-gradient(180deg,rgb(var(--ground-rgb) / 0) 0,rgb(var(--ground-rgb) / 0) calc(var(--ph) * .48),rgb(var(--ground-rgb) / .72) calc(var(--ph) * .76),var(--ground) var(--ph),var(--ground) 100%)}
  .hero-inner{padding-top:calc(var(--ph) - 8.4rem);padding-bottom:3.2rem}
  .hero-copy{max-width:none}
}

@media (max-width:640px){
  .masthead{top:8px}
  .masthead-bar{padding:.4rem .4rem .4rem .7rem;border-radius:16px}
  .lockup{gap:.5rem;overflow:hidden}
  .lockup > span{min-width:0}
  .lockup img{width:30px;height:29px}
  .lockup .name{font-size:1.06rem}
  .lockup .sub{font-size:.6rem;white-space:normal;line-height:1.2;margin-top:.15rem}
  .menu-word{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-btn{width:44px;padding:0;justify-content:center}
  .masthead-actions .btn-sm{padding:.5rem .95rem;font-size:.88rem;min-height:44px}
  .masthead-actions .btn-sm .ico{display:none}
  .hero .ctas .btn,.close .ctas .btn{width:100%}
  .proofline{gap:.45rem 1.1rem;font-size:.88rem}
  .band img{object-position:50% 30%}
  .band-archive img{object-position:50% 34%}
  .pair{grid-template-columns:minmax(0,1fr);gap:1rem}
  .pair .pair-b{margin-top:0;margin-left:12%}
  .pair .photo:first-child{margin-right:12%}
  .chapters-photo,.faq-photo{max-width:none}
  .faq-photo{aspect-ratio:3/2}
  .scroll-cue{bottom:10px}
  .cue-line{height:40px}
  .procession{grid-template-columns:minmax(0,1fr);row-gap:1.6rem}
  .procession::before{display:block;left:1.05rem;right:auto;top:.5rem;bottom:.5rem;width:1px;height:auto;background:linear-gradient(180deg,rgb(var(--ember-rgb) / 0),var(--gold) 4%,var(--gold) 96%,rgb(var(--ember-rgb) / 0));transform-origin:top;transform:scaleY(var(--draw,1))}
  .procession li{display:grid;grid-template-columns:2.1rem minmax(0,1fr);column-gap:1rem;padding-right:0}
  .procession .mark{grid-row:1/span 3;margin:0}
  .procession .who,.procession b,.procession .what{grid-column:2}
  .timeline-foot{flex-direction:column;align-items:flex-start}
  .foot{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .foot > div:last-child{grid-column:1/-1}
  .legal{flex-direction:column}
  .faq-list{padding-inline:1rem}
  .faq-list summary{grid-template-columns:minmax(0,1fr) 1.2rem}
  .faq-list details p{padding:0 .2rem 1.4rem 0}
  .form-row,.compare{grid-template-columns:minmax(0,1fr)}
  .tier-core{padding-top:2.6rem}
  .planner td{font-size:1.1rem;padding:.7rem .6rem}
  .planner .slot{font-size:.82rem;padding:.45rem .65rem}
  .planner{padding:.3rem .45rem .45rem}
}
/* on tall, narrow screens the stadium stands upright */
@media (max-aspect-ratio:4/5){
  .portal-ring{width:min(90vw,560px);height:min(124vw,780px);border-width:min(13vw,96px)}
  .portal-words{max-width:7.4em}
  html:not(.js) .portal-stage,.still .portal-stage{min-height:min(136vw,840px)}
}
@media (max-width:400px){
  .btn{max-width:100%}
  .btn-lg{white-space:normal;line-height:1.25;text-align:left}
  .masthead{padding-inline:6px}
  .masthead-bar{padding-left:.55rem;gap:.5rem}
  .lockup{gap:.4rem}
  .lockup img{width:26px;height:25px}
  .lockup .name{font-size:.98rem}
  .masthead-actions{gap:.3rem}
  .masthead-actions .btn-sm{padding:.5rem .8rem;font-size:.84rem}
  .menu-btn{width:42px;min-height:42px}
  .colophon .lockup img{width:44px;height:42px;padding:5px}
}
@media (max-width:340px){
  .masthead .lockup img{display:none}
  .lockup .name{font-size:.94rem}
  .masthead-actions .btn-sm{padding:.45rem .7rem;font-size:.8rem}
}

/* ---------- reduced motion: final states, nothing drifts ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  .statement{height:auto;margin-top:0}
  .statement-pin{position:relative;height:auto;padding-block:clamp(6rem,14vw,11rem)}
  .portal{height:auto}
  .portal-stage{position:relative;height:auto;min-height:min(82vmin,780px);padding-block:3rem}
  .how-track{height:auto}
  .how-pin{position:relative;height:auto}
  .mq-row{animation:none}
  .cue-line::after{animation:none;transform:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
}
.static .rv{opacity:1;transform:none;transition:none}
.static .hero-photo,.static .hl-i,.static .hero-in{animation:none}