:root {
  --bg:#06070b; --panel:#0c0e15; --panel2:#11141d;
  --ink:#eef1f6; --ink2:#aab2c5; --ink3:#7c869c;
  --teal:#34e1c8; --blue:#7aa2ff; --gold:#E8B923; --red:#f2585b;
  --grad:linear-gradient(135deg,#34e1c8,#7aa2ff);
  --line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.06);
  --serif:'Instrument Serif','Times New Roman',serif;
  --sans:'Inter Tight',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  --max:1440px; --gutter:clamp(20px,3vw,40px); --measure:40rem;
  --teal-haze:rgba(52,225,200,.10);
  --blue-haze:rgba(122,162,255,.08);
  --gold-glow:rgba(232,185,35,.20);
  --teal-glow:rgba(52,225,200,.18);
  --blue-glow:rgba(122,162,255,.18);
  --clear:rgba(6,7,11,0);
  --shade:rgba(6,7,11,.78);
  --shade-soft:rgba(6,7,11,.28);
  --type-body:1.0625rem;
  --type-label:11px;
  --type-hero:clamp(6rem,12.5vw,12rem);
  --type-statement:clamp(2.6rem,4.1vw,4.4rem);
  --type-heading:clamp(3.25rem,5.3vw,5.6rem);
  --type-card:clamp(2rem,3vw,2.8rem);
  --weight-regular:400;
  --weight-medium:500;
  --tracking-display:-0.03em;
  --tracking-label:0.16em;
  --leading-display:0.95;
  --leading-body:1.72;
  /* The masthead includes the pill's border and padding around one label line. */
  --masthead-pad:1.65rem;
  --masthead-h:calc(var(--type-label) * 1.65 + var(--masthead-pad) * 2 + .6rem + 2px);
  /* The fixed trailing band is the height the last page gives back. */
  --footer-h:8rem;
  /* Compact page rhythm leaves the masthead offset clear at every snap. */
  --page-pad:clamp(.75rem,1.6vh,1.5rem);
  --page-gap:clamp(.65rem,1.4vh,1.25rem);
}

* { box-sizing:border-box; }
html, body { overflow-x:clip; max-width:100%; }
/* Reading progress replaces the scrollbar gutter, keeping the viewport width intact. */
html { scroll-behavior:smooth; scroll-snap-type:y mandatory; scroll-padding-top:var(--masthead-h); scrollbar-width:none; background:var(--bg); }
body {
  margin:0;
  background:radial-gradient(ellipse at 0% 0%,var(--teal-haze),var(--clear) 55%),radial-gradient(ellipse at 100% 8%,var(--blue-haze),var(--clear) 52%),var(--bg);
  background-attachment:fixed;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--type-body);
  font-weight:var(--weight-regular);
  line-height:var(--leading-body);
  -webkit-font-smoothing:antialiased;
}

::selection { color:var(--bg); background:var(--teal); }
a { color:var(--teal); text-decoration:none; }
:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
h1, h2, h3, p { margin:0; }
h1, h2, h3, .hero-statement {
  font-family:var(--serif);
  font-weight:var(--weight-regular);
  letter-spacing:var(--tracking-display);
  line-height:var(--leading-display);
}
em { font-weight:inherit; }
h2 { max-width:10.4em; font-size:var(--type-heading); }
h2 em, .hero-statement em { color:var(--teal); }
h3 { font-size:var(--type-card); }
.page-width { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.label { font-family:var(--mono); font-size:var(--type-label); font-weight:var(--weight-regular); letter-spacing:var(--tracking-label); line-height:1.65; text-transform:uppercase; color:var(--ink3); }
.prose { max-width:31rem; color:var(--ink2); }
/* Snap the document, leaving the fixed scene outside any scroll wrapper. */
.page { min-height:100svh; scroll-snap-align:start; scroll-snap-stop:always; display:flex; flex-direction:column; justify-content:center; padding-block:var(--page-pad) calc(var(--page-pad) + var(--masthead-h)); }
.page > * { flex-shrink:0; min-width:0; }
/* The masthead sits above the first page, so the final page gives that offset back
   and still fills one screen. The footer below it is the only scroll left after the
   last page's snap point, and a position with no snap point is what made the last
   line pop up and drop back, so the footer ends the document on a snap of its own. */
main > .page:last-child { min-height:calc(100svh - var(--masthead-h)); padding-bottom:var(--page-pad); }

.scene-backdrop, #convergence-scene, .scene-vignette { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; }
.scene-backdrop {
  z-index:0;
  background:radial-gradient(ellipse at 62% 39%,var(--gold-glow),var(--clear) 23%),radial-gradient(ellipse at 83% 31%,var(--teal-glow),var(--clear) 25%),radial-gradient(ellipse at 79% 67%,var(--blue-glow),var(--clear) 29%);
}
.scene-ready .scene-backdrop { opacity:.28; }
#convergence-scene { z-index:1; display:block; }
#convergence-scene[hidden] { display:none; }
/* The turn and offer pages carry their own figures, so the rig steps aside. */
#convergence-scene, .scene-backdrop { transition:opacity .55s ease,transform .55s ease; }
:root[data-active-page="turn"] #convergence-scene,
:root[data-active-page="posture"] #convergence-scene,
:root[data-active-page="offer"] #convergence-scene { opacity:.08; }
/* Sunny, 2026-09-20: the particle rig belongs to the hero only; every later page hides it. */
:root[data-active-page]:not([data-active-page="hero"]) #convergence-scene,
:root[data-active-page]:not([data-active-page="hero"]) .scene-backdrop { opacity:0 !important; visibility:hidden; transform:none; }
/* On the pages whose own content occupies the right of the screen, the faded rig was still
   readable behind the figures and the link columns, so it is parked below the fold there. */
:root[data-active-page="everything"] #convergence-scene,
:root[data-active-page="inside-the-sun"] #convergence-scene { opacity:.08; transform:translateY(68vh); }
:root[data-active-page="turn"] .scene-backdrop,
:root[data-active-page="posture"] .scene-backdrop { opacity:.4; }
.scene-vignette { z-index:2; background:linear-gradient(90deg,var(--shade),var(--clear) 61%),radial-gradient(ellipse at 64% 47%,var(--clear) 28%,var(--shade-soft) 74%,var(--shade)); }
.masthead, main, .footer { position:relative; z-index:3; }
.reading-progress { position:fixed; inset:0 0 auto; z-index:10; height:2px; }
.reading-progress span { display:block; height:100%; background:var(--grad); transform:scaleX(0); transform-origin:left; }
.skip-link { position:fixed; top:1rem; left:var(--gutter); z-index:20; padding:.7rem 1rem; background:var(--panel); transform:translateY(-200%); }
.skip-link:focus { transform:translateY(0); }
.visually-hidden { position:absolute; width:1px; height:1px; clip:rect(0,0,0,0); clip-path:inset(50%); overflow:hidden; white-space:nowrap; border:0; padding:0; margin:-1px; }

.masthead { display:flex; align-items:center; justify-content:space-between; gap:clamp(.5rem,1.5vw,1.5rem); padding-block:var(--masthead-pad); }
.present-controls { display:flex; align-items:center; gap:.75rem; margin-left:auto; white-space:nowrap; }
.present-toggle { padding:.3rem .8rem; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink2); cursor:pointer; }
.present-toggle:hover, .present-toggle[aria-pressed="true"] { border-color:var(--teal); color:var(--teal); }
.present-counter { color:var(--ink2); }
html.present-mode { overflow:hidden; scroll-snap-type:none; scroll-behavior:auto; }
body.present-mode { overflow:hidden; }
body.present-mode .page { display:none; }
body.present-mode .stay-block, body.present-mode .audience-switch { display:none; }
/* Long phone slides scroll inside the deck so their last invitation stays reachable. */
body.present-mode .page.is-present-slide { display:flex; height:calc(100vh - var(--masthead-h)); height:calc(100dvh - var(--masthead-h)); min-height:0; padding-block:var(--page-pad); overflow-y:auto; overflow-x:hidden; justify-content:safe center; overscroll-behavior-y:contain; padding-bottom:3.4rem; }
.wordmark { color:var(--ink); font-weight:var(--weight-medium); letter-spacing:.06em; }
.wordmark-dot { color:var(--teal); }
.masthead-note { margin-left:auto; margin-right:auto; }
.location { display:flex; align-items:center; gap:.7rem; }
.status-dot { width:5px; height:5px; border-radius:50%; background:var(--teal); box-shadow:0 0 12px var(--teal-glow); }
.hero { position:relative; }
.hero-copy { width:60%; }
h1 { font-size:var(--type-hero); white-space:nowrap; }
.hero-statement { margin-top:1.25rem; font-size:var(--type-statement); line-height:1.03; }
/* Two equal invitations, before the first scroll. */
/* The three fronts sit under the buttons as one quiet mono line, and wrap to two on a phone. */
/* Said "In front of" three times and let the separators orphan onto the next line at
   phone width, so a line could begin with a stray dot. One lead-in, three nouns, and
   the separator hangs off the END of an item: when the row wraps, the dot stays behind
   on the line it belongs to instead of leading the new one. */
.hero-fronts { margin-top:1.1rem; color:var(--ink3); display:flex; flex-wrap:wrap; align-items:baseline; gap:0 .35rem; }
.hero-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; max-width:36rem; margin-top:1.5rem; }
.hero-actions > a { margin-top:0; }
.audience-switch { display:inline-flex; margin-top:.85rem; margin-right:1.6rem; }
.audience-switch + .quiet-link { margin-left:.4rem; }
.audience-option { padding:.25rem .65rem; border:1px solid var(--line2); background:transparent; color:var(--ink3); cursor:pointer; transition:border-color .25s ease,color .25s ease; }
.audience-option:first-child { border-radius:999px 0 0 999px; }
.audience-option:last-child { margin-left:-1px; border-radius:0 999px 999px 0; }
.audience-option:hover { color:var(--ink2); }
.audience-option[aria-pressed="true"] { position:relative; border-color:var(--line); color:var(--teal); }
.audience-option:focus-visible { position:relative; outline:2px solid var(--teal); outline-offset:3px; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; gap:2rem; margin-top:clamp(2rem,5vh,4rem); }
.scroll-cue { display:inline-flex; align-items:center; gap:1rem; color:var(--ink2); }
.scroll-stem { display:block; width:1px; height:35px; background:var(--line); overflow:hidden; }
.scroll-stem::after { content:""; display:block; height:15px; background:var(--teal); animation:scroll-hint 2.6s ease-in-out infinite; }
.quiet-link { display:inline-block; align-self:flex-start; margin-top:var(--page-gap); color:var(--ink3); text-decoration:underline; text-underline-offset:.3em; transition:color .25s ease; }
.quiet-link:hover { color:var(--teal); }
.quiet-link:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
/* Light tiles leave the story, rather than the card, in the foreground. */
.tile-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.65rem,1vw,1rem); margin-top:var(--page-gap); min-width:0; }
.posture-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; margin-top:var(--page-gap); max-width:var(--measure); }
.posture-card h3 { margin:.5rem 0 0; font-size:clamp(1.6rem,2.2vw,2rem); line-height:1.1; }
.venture-card.posture-ask { border-color:var(--line2); box-shadow:none; }
.posture-ask .card-label, .posture-ask h3 { color:var(--ink3); }
.venture-card.posture-offer { border-color:color-mix(in oklch,var(--teal) 48%,transparent); box-shadow:0 0 40px var(--teal-haze); }
.posture-offer h3 { color:var(--ink); }
/* The overlap is the whole argument, so the diagram sits beside the posture. */
.turn-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:clamp(1rem,3vw,3rem); margin-top:var(--page-gap); }
.venn-figure { margin:0; min-width:0; }
.venn { display:block; width:100%; height:auto; max-height:clamp(190px,32vh,330px); margin-inline:auto; overflow:visible; }
.venn-set circle { fill-opacity:.15; stroke-width:2; mix-blend-mode:screen; }
.venn-email { fill:var(--teal); stroke:var(--teal); }
.venn-show { fill:var(--blue); stroke:var(--blue); }
.venn text { font-family:var(--mono); text-transform:uppercase; letter-spacing:var(--tracking-label); fill:var(--ink); }
.venn-label { font-size:15px; letter-spacing:.12em; fill:var(--ink2); }
.venn-center { font-size:17px; fill:var(--gold); }
.venn-note { font-size:12px; fill:var(--ink3); letter-spacing:.08em; }
.venn-pill { fill:var(--shade); stroke:color-mix(in oklch,var(--gold) 55%,transparent); stroke-width:1.2; }
.venn-set circle, .venn-labels, .venn-meet { transform-box:fill-box; transform-origin:center; }
.reveal-enabled .venn-figure.is-visible .venn-email { animation:venn-close-left .85s cubic-bezier(.2,.65,.2,1) both; }
.reveal-enabled .venn-figure.is-visible .venn-show { animation:venn-close-right .85s cubic-bezier(.2,.65,.2,1) both; }
.reveal-enabled .venn-figure.is-visible .venn-labels { animation:venn-fade .6s ease both .45s; }
.reveal-enabled .venn-figure.is-visible .venn-meet { animation:venn-fade .6s ease both .85s; }
@keyframes venn-close-left { from { opacity:0; transform:translateX(-64px); } to { opacity:1; transform:none; } }
@keyframes venn-close-right { from { opacity:0; transform:translateX(64px); } to { opacity:1; transform:none; } }
@keyframes venn-fade { from { opacity:0; } to { opacity:1; } }
/* Beliefs are open serif paragraphs, with room between the two thoughts. */
.beliefs { max-width:76rem; margin-top:clamp(1.25rem,2.5vh,2rem); }
.belief em, .close-title em { color:var(--teal); }
/* The thinker: one icon at rest, three lines on hover, focus or tap. The long
   belief paragraphs and the method quote it replaced said the same thing in
   eight times the words, and the section was too busy to read. */
.thinker { position:relative; max-width:76rem; margin-top:clamp(1rem,2.2vh,1.75rem); }
@media (hover:hover) { .thinker:hover .thinker-card { display:block; opacity:1; transform:translateY(0); visibility:visible; transition-delay:0s; } .thinker-toggle:hover { border-color:color-mix(in oklch,var(--teal) 45%,transparent); color:var(--ink); } }
@media (prefers-reduced-motion:no-preference) { .thinker-toggle[aria-expanded="false"] .thinker-icon { animation:thinker-pulse 4.5s ease-in-out infinite; } }
@keyframes thinker-pulse { 0%,82%,100% { box-shadow:0 0 0 0 var(--clear); } 88% { box-shadow:0 0 0 6px color-mix(in oklch,var(--teal) 14%,transparent); } }
@media (prefers-reduced-motion:reduce) { .thinker-card { transition:none; } }
@media (max-width:600px) { .thinker-card { position:static; width:100%; margin-top:.6rem; display:none; } .thinker-toggle[aria-expanded="true"] + .thinker-card, body.present-mode .thinker-card { display:block; } .thinker-hint { display:none; } }
/* The show stands on its own, and the invitation is free. */
.show-free { margin-top:var(--page-gap); padding:clamp(.75rem,1.5vh,1.25rem); border:1px solid var(--line); border-left:2px solid var(--teal); color:var(--ink2); }
.episode-card { display:flex; flex-direction:column; gap:.75rem; min-width:0; padding:.7rem; background:var(--panel); border:1px solid var(--line); border-radius:12px; color:var(--ink); scroll-snap-align:start; transition:border-color .35s ease,background .35s ease; }
.episode-card:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.episode-thumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--panel2); }
.episode-thumb img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .4s cubic-bezier(.2,.65,.2,1); }
.episode-title { display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-family:var(--sans); font-size:.95rem; font-weight:var(--weight-medium); line-height:1.4; color:var(--ink); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .episode-card:hover { background:var(--panel2); border-color:color-mix(in oklch,var(--teal) 42%,transparent); }
  .episode-card:hover .episode-thumb img { transform:scale(1.045) translateY(-3px); }
}
@media (prefers-reduced-motion:reduce) {
  .episode-thumb img { transition:none; }
  .episode-card:hover .episode-thumb img { transform:none; }
}
@media (min-width:1100px) {
  /* Four previews across; the next four stay in the same scroll row. */
  .episode-row { grid-auto-columns:calc((100% - 3rem) / 4); }
  .trap-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
}

.venture-card { position:relative; min-width:0; padding:clamp(1rem,2vh,1.5rem); background:var(--panel); border:1px solid var(--line); border-radius:3px; transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease; }
.accent-teal { --card-accent:var(--teal); --card-glow:var(--teal-glow); }
.accent-blue { --card-accent:var(--blue); --card-glow:var(--blue-glow); }
.accent-gold { --card-accent:var(--gold); --card-glow:var(--gold-glow); }
.card-label { color:var(--card-accent,var(--ink3)); }
.tier-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; margin-top:var(--page-gap); min-width:0; }
.tier-card { display:flex; flex-direction:column; padding:clamp(.75rem,1.3vh,1rem); }
.venture-card.tier-card h3 { margin-top:0; margin-bottom:clamp(.25rem,.6vh,.5rem); font-size:clamp(2rem,2.5vw,2.5rem); }
.tier-price { margin-top:clamp(.35rem,.7vh,.75rem); }
/* The price shares its card with the complete scope and both actions. */
.tier-total { font-family:var(--serif); font-size:clamp(2.25rem,2.8vw,3rem); font-weight:var(--weight-regular); letter-spacing:var(--tracking-display); line-height:1; }
.tier-caption { margin-top:.25rem; color:var(--ink2); }
/* Checkout follows the scope, with room to talk first. */
.tier-cta { margin-top:auto; padding-top:var(--page-gap); text-align:center; }
.tier-cta .primary-button { width:100%; margin-top:0; padding:.7rem 1.2rem; gap:1rem; }
.tier-talk { display:inline-block; margin-top:.25rem; color:var(--ink3); transition:color .25s ease; }
.tier-talk:hover { color:var(--teal); }
/* Three sizes, numbered. The rank reads before the name does. */
.tier-index { margin-bottom:.15rem; color:var(--ink3); letter-spacing:.24em; opacity:.75; }
/* A hairline of the card accent warms the top edge under the pointer. */
.tier-card::before { content:''; position:absolute; left:0; right:0; top:0; height:1px; border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--clear),var(--card-accent,var(--teal)),var(--clear)); opacity:0; transition:opacity .35s ease; pointer-events:none; }
.tier-price { font-variant-numeric:tabular-nums lining-nums; }
/* The show rate sits under the list price, struck, so both numbers stay honest. */
.tier-show { display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem; margin-top:.4rem; padding-top:.4rem; border-top:1px dashed var(--line); font-variant-numeric:tabular-nums lining-nums; }
.tier-show-label { color:var(--ink3); }
.tier-show-now { font-family:var(--serif); font-size:1.5rem; line-height:1; letter-spacing:var(--tracking-display); color:var(--card-accent,var(--teal)); }
.tier-show-term { color:var(--ink3); }
.tier-shownote { margin-top:.75rem; color:var(--ink3); font-size:.9rem; }
/* Sprint is the quiet rung: one legible line, no card and no button. */
.sprint-line { max-width:82rem; margin-top:.5rem; color:var(--ink2); font-size:.92rem; line-height:1.6; }
.sprint-sep { margin:0 .15rem; color:var(--ink3); }
/* The closing invitation shares a line, with the record directly below it. */
.offer-close { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:var(--page-gap) 1.5rem; margin-top:clamp(1.5rem,3.2vh,2.75rem); }
.close-title { font-size:clamp(2.25rem,3vw,3rem); line-height:1.05; }

.stay-block { padding-block:clamp(2rem,5vw,4rem); border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); }
.stay-block .label { color:var(--ink3); }
.stay-copy { margin-top:.25rem; color:var(--ink2); }
.stay-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.75rem; max-width:42rem; margin-top:var(--page-gap); }
.stay-email { min-width:0; padding:.9rem 1.1rem; border:1px solid var(--line); border-radius:999px; background:var(--panel); color:var(--ink); font:inherit; }
.stay-email::placeholder { color:var(--ink3); }
.stay-email:focus-visible { outline:2px solid var(--teal); outline-offset:3px; border-color:var(--teal); }
.stay-form .stay-submit { margin-top:0; cursor:pointer; font-family:var(--mono); font-size:var(--type-label); font-weight:var(--weight-medium); }

/* Compact actions retain a full text line and comfortable padded edges. */
.primary-button, .secondary-button { display:inline-flex; align-items:center; justify-content:space-between; gap:2rem; max-width:100%; padding:.9rem 1.5rem; margin-top:var(--page-gap); border:1px solid transparent; border-radius:999px; font-weight:var(--weight-medium); }
.primary-button { background:var(--grad); color:var(--bg); box-shadow:0 5px 35px var(--teal-glow); transition:transform .25s ease,box-shadow .25s ease; }
.primary-button:hover { transform:translateY(-3px); box-shadow:0 8px 45px var(--teal-glow); }
.secondary-button { border-color:var(--line); background:transparent; color:var(--ink); transition:border-color .25s ease,color .25s ease; }
.secondary-button:hover { border-color:var(--teal); color:var(--teal); }
.secondary-button:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

/* The everything page: the same light tiles, but every one of them is a link. */
.masthead-everything { color:var(--ink3); white-space:nowrap; transition:color .25s ease; }

/* The index page: five columns of links, one column on a phone. */
.sun-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(.75rem,1.6vw,1.75rem); margin-top:var(--page-gap); min-width:0; }

/* Shots on goal: one week of the real calendar, Monday to Friday, 7am to 8pm, drawn the way a
   calendar draws itself. Hour lines, half-hour hairlines, a column per day, and every block
   sized to its own duration so back-to-back calls really do stack. Markup is generated by
   scripts/render-week-calendar.ts from present/data/week-shots.json. */
.cal { --hour-h:clamp(34px,4.3vh,48px); --cal-gutter-w:48px; margin-top:var(--page-gap); min-width:0; }
.cal-frame { border:1px solid var(--line); border-radius:10px; background:var(--panel); overflow:hidden; }
.cal-head { display:grid; grid-template-columns:var(--cal-gutter-w) repeat(5,minmax(0,1fr)); border-bottom:1px solid var(--line); background:var(--panel2); }
.cal-col-head { display:flex; align-items:baseline; justify-content:center; gap:.4rem; padding:.45rem .3rem; border-left:1px solid var(--line2); min-width:0; }
.cal-dow { color:var(--ink3); }
.cal-dom { font-family:var(--sans); font-size:1.05rem; font-weight:var(--weight-medium); line-height:1; color:var(--ink); }
.cal-body { display:grid; grid-template-columns:var(--cal-gutter-w) minmax(0,1fr); max-height:min(58vh,620px); overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.cal-times { position:relative; height:calc(13 * var(--hour-h)); }
.cal-time { position:absolute; top:calc(var(--t) * var(--hour-h) + 2px); right:8px; font-family:var(--mono); font-size:9px; line-height:1; color:var(--ink3); white-space:nowrap; }
/* Solid lines on the hour, hairlines on the half hour. The hour gradient is listed first so it
   paints over the half-hour one where the two land on the same pixel. */
.cal-grid { position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); height:calc(13 * var(--hour-h));
  background-image:repeating-linear-gradient(to bottom,var(--line) 0 1px,transparent 1px var(--hour-h)),
                   repeating-linear-gradient(to bottom,var(--line2) 0 1px,transparent 1px calc(var(--hour-h) / 2)); }
.cal-col { position:relative; border-left:1px solid var(--line2); min-width:0; }
.cal-ev { position:absolute; top:calc(var(--t) * var(--hour-h)); height:calc(var(--d) * var(--hour-h) - 2px);
  left:var(--l); width:var(--w); margin-left:1px; padding:1px 4px 1px 5px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:flex-start; gap:1px; overflow:hidden;
  border-radius:3px; border-left:3px solid var(--kind,var(--line));
  background:color-mix(in oklch,var(--kind,var(--ink3)) 17%,#0d1017); transform-origin:top; }
.cal-ev-title { font-size:10px; line-height:1.15; font-weight:var(--weight-medium); color:color-mix(in oklch,var(--kind,var(--ink2)) 55%,var(--ink)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-ev-time { font-family:var(--mono); font-size:8.5px; line-height:1.1; color:var(--ink3); white-space:nowrap; }
/* A slot under twenty-five minutes cannot hold two lines, so the name and the time share one. */
.cal-ev.is-tiny { flex-direction:row; align-items:center; gap:4px; padding-top:0; padding-bottom:0; }
.cal-ev.is-tiny .cal-ev-title { font-size:9px; flex:1 1 auto; min-width:0; }
.cal-ev.is-tiny .cal-ev-time { flex:0 0 auto; font-size:8px; }
.cal-tabs { display:none; gap:.35rem; margin-bottom:.5rem; overflow-x:auto; scrollbar-width:none; }
.cal-tab { flex:1 1 0; min-width:0; padding:.4rem .2rem; font-family:var(--mono); font-size:var(--type-label); text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); background:var(--panel); border:1px solid var(--line); border-radius:6px; cursor:pointer; }
.cal-tab[aria-selected="true"] { color:var(--ink); border-color:color-mix(in oklch,var(--teal) 45%,transparent); background:var(--panel2); }
.cal-tab-n { color:var(--ink3); }
.kind-taping { --kind:var(--teal); }
.kind-pre-interview { --kind:var(--blue); }
.kind-client { --kind:var(--gold); }
.kind-other { --kind:var(--ink3); }
.week-legend { display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; margin-top:.75rem; color:var(--ink3); }
.week-key::before { content:""; display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.55rem; background:var(--kind,var(--line)); vertical-align:middle; }
.week-key b { font-weight:var(--weight-medium); color:var(--ink2); }
/* The blocks draw in one day after the next once the calendar comes into view. */
.reveal-enabled .cal.is-visible .cal-ev { animation:block-in .45s ease both; animation-delay:calc(var(--day) * 90ms); }
@keyframes block-in { from { opacity:0; transform:scaleY(.2); } to { opacity:1; transform:none; } }
/* One day at a time on a phone. Without script the calendar still shows Monday rather than five
   columns too narrow to read. */
@media (max-width:760px) {
  .cal { --hour-h:46px; --cal-gutter-w:42px; }
  .cal-tabs { display:flex; }
  .cal-head { grid-template-columns:var(--cal-gutter-w) minmax(0,1fr); }
  .cal-grid { grid-template-columns:minmax(0,1fr); }
  .cal-col, .cal-col-head { display:none; }
  .cal-col[data-cal-day="0"], .cal-col-head[data-cal-day="0"] { display:block; }
  .cal-col-head[data-cal-day="0"] { display:flex; }
  .cal[data-cal-ready] .cal-col, .cal[data-cal-ready] .cal-col-head { display:none; }
  .cal[data-cal-ready] .cal-col.is-on { display:block; }
  .cal[data-cal-ready] .cal-col-head.is-on { display:flex; }
  .cal-body { max-height:min(62vh,540px); }
}

.footer { display:flex; justify-content:space-between; align-items:flex-end; gap:1rem; height:var(--footer-h); padding-top:1.8rem; padding-bottom:5rem; scroll-snap-align:end; }
.footer::before { content:""; position:absolute; top:0; left:var(--gutter); right:var(--gutter); height:1px; background:var(--line); }
.current-site-pill { position:fixed; right:var(--gutter); bottom:18px; z-index:15; padding:9px 15px; font-family:var(--mono); font-size:var(--type-label); text-transform:uppercase; letter-spacing:.12em; color:var(--ink2); background:var(--panel); border:1px solid color-mix(in oklch,var(--teal) 35%,transparent); border-radius:999px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); transition:background .25s ease,border-color .25s ease,color .25s ease; }
.current-site-pill:hover { color:var(--teal); background:var(--panel2); border-color:var(--teal); }
.current-site-pill:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }

.reveal-enabled [data-reveal] { opacity:0; transform:translateY(22px); transition:opacity .85s ease,transform .85s cubic-bezier(.2,.65,.2,1); transition-delay:var(--reveal-delay,0ms); }
.reveal-enabled [data-reveal].is-visible { opacity:1; transform:translateY(0); }
.reveal-enabled [data-reveal]:focus-visible { opacity:1; transform:none; transition:none; }
.reveal-enabled [data-reveal]:focus-within { opacity:1; transform:none; transition:none; }
.reveal-enabled .venture-card.is-visible { transition:opacity .85s ease,transform .35s ease,border-color .35s ease,box-shadow .35s ease; transition-delay:0ms; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .tier-card:hover, .reveal-enabled .tier-card.is-visible:hover { border-color:var(--card-accent); box-shadow:0 0 20px -12px var(--card-accent),inset 0 1px 0 var(--card-glow); }
  .tier-card:hover::before, .reveal-enabled .tier-card.is-visible:hover::before { opacity:1; }
}
@keyframes scroll-hint {
  0% { transform:translateY(-16px); }
  65%,100% { transform:translateY(36px); }
}

@media (max-width:900px) {
  .masthead-note { display:none; }
  .hero-copy { width:76%; }
  .scene-key { padding-right:0; gap:1rem; }
  .scene-vignette { background:linear-gradient(90deg,var(--shade-soft),var(--clear)),radial-gradient(ellipse at 70% 36%,var(--clear),var(--shade) 95%); }
}
@media (max-width:600px) {
  /* The mobile masthead keeps its existing reduced padding. */
  :root { --masthead-pad:1.2rem; --page-gap:clamp(.5rem,1.2vh,.75rem); --type-heading:clamp(2.6rem,10.8vw,3.25rem); }
  /* Phone prose keeps a full reading size with tighter leading. */
  .narrative { font-size:1rem; line-height:1.5; }
  /* Beliefs and full paid scope need longer pages at readable phone sizes. */
  html { scroll-snap-type:y proximity; }
  .turn, .engagement { min-height:auto; scroll-snap-stop:normal; }
  main > .page:last-child { min-height:auto; padding-bottom:var(--page-pad); }
  .location { letter-spacing:.09em; }
  .hero-copy { width:100%; }
  .hero .eyebrow { letter-spacing:.07em; margin-bottom:1rem; }
  h1 { font-size:clamp(5.5rem,23vw,8.4rem); }
  .hero-statement { margin-top:1.3rem; font-size:clamp(2.6rem,10.4vw,3.8rem); }
  .hero-actions { grid-template-columns:minmax(0,1fr); gap:.75rem; }
  .stay-form { grid-template-columns:minmax(0,1fr); }
  .stay-email, .stay-submit { width:100%; }
  .hero-bottom { align-items:flex-end; margin-top:2.5rem; gap:1rem; }
  .scroll-cue { gap:.7rem; letter-spacing:.07em; }
  .scene-key { flex-direction:column; gap:.2rem; }
  .scene-backdrop { background:radial-gradient(ellipse at 24% 51%,var(--gold-glow),var(--clear) 35%),radial-gradient(ellipse at 78% 42%,var(--teal-glow),var(--clear) 32%),radial-gradient(ellipse at 70% 67%,var(--blue-glow),var(--clear) 38%); }
  .scene-vignette { background:linear-gradient(0deg,var(--shade),var(--clear) 38%,var(--shade-soft) 65%,var(--shade)); }
  /* Cards travel sideways so every scope remains readable at phone width. */
  .tier-grid, .tile-grid { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:min(20rem,82vw); overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain; scrollbar-width:none; -ms-overflow-style:none; padding:.3rem .3rem .4rem; }
  /* The rail hides its scrollbar, so without a cue the last visible card reads as
     clipped rather than swipeable. A mask on the rail gives the cue with no extra
     DOM, because a mask applies to the element box and does not scroll with the
     content inside it. It is set only while there is actually more to scroll to. */
  .tier-grid[data-more="1"], .tile-grid[data-more="1"] {
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 2.5rem),transparent);
  }
  .tile-grid { grid-auto-columns:min(17rem,80vw); }
  .tier-grid::-webkit-scrollbar, .tile-grid::-webkit-scrollbar { width:0; height:0; display:none; }
  .tile, .tier-card { scroll-snap-align:start; }
  /* Three sizes stack on a phone: the whole ladder reads in one downward pass,
     so the offer needs no sideways swipe and no mask cue. */
  .tier-grid { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; padding:0; -webkit-mask-image:none; mask-image:none; }
  .tier-grid[data-more="1"] { -webkit-mask-image:none; mask-image:none; }
  .tier-card { scroll-snap-align:none; }
  .tier-show-now { font-size:1.35rem; }
  .sprint-line { font-size:.95rem; }
  .sprint-line a { display:inline; }
  /* The two index pages read as one column on a phone rather than as a sideways rail. */
  .feature-grid, .sun-grid { grid-template-columns:minmax(0,1fr); grid-auto-flow:row; grid-auto-columns:auto; overflow-x:visible; padding:0; }
  .link-note { display:none; }
  .everything, .sunlist { overflow-y:auto; }
  .turn h2, .machine h2 { font-size:var(--type-heading); }
  .turn-split { grid-template-columns:minmax(0,1fr); gap:.9rem; }
  /* Flatten the copy wrapper so the phone diagram separates the say-line from the posture cards. */
  .turn-copy { display:contents; }
  .turn-copy .posture-pair { order:1; }
  .venn { max-height:none; }
  .posture-pair { grid-template-columns:minmax(0,1fr); gap:.65rem; }
  .posture-card { padding:.85rem 1rem; }
  .front-line { grid-template-columns:minmax(0,1fr) auto; gap:.3rem .5rem; }
  .front-label { letter-spacing:.08em; }
  .front-body { grid-column:1 / -1; }
  .figure-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem 1rem; }
  .split { grid-template-columns:minmax(0,1fr); gap:1rem; margin-top:1.5rem; }
  .offer-close { grid-template-columns:minmax(0,1fr); gap:.75rem; margin-top:1.75rem; }
}
/* Short phones keep both invitations clear of the current-site pill. */
@media (max-width:600px) and (max-height:700px) {
  .hero .eyebrow { margin-bottom:.75rem; }
  .hero-statement { margin-top:1rem; }
  .hero-description { margin-top:1rem; line-height:1.6; }
  .hero-actions { margin-top:1rem; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal-enabled [data-reveal] { opacity:1; transform:none; }
  .scroll-stem::after { transform:none; }
  .primary-button:hover, .text-link:hover span { transform:none; }
}
.motion-reduced { scroll-behavior:auto; }
.motion-reduced *, .motion-reduced *::before, .motion-reduced *::after { animation:none !important; transition:none !important; }
.motion-reduced [data-reveal] { opacity:1; transform:none; }
.motion-reduced .primary-button:hover, .motion-reduced .text-link:hover span { transform:none; }

@media print {
  .scene-backdrop, #convergence-scene, .scene-vignette, .reading-progress, .scroll-cue, .scene-key, .current-site-pill { display:none !important; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .reveal-enabled [data-reveal] { opacity:1; transform:none; }
  .page { min-height:0; padding-block:2rem; }
  .venture-card { break-inside:avoid; }
}

/* The offer keeps only its numbers. The terms that used to sit in a bordered box
   are one muted mono line at the foot of the section. */
.offer-fineprint { display:block; max-width:82rem; margin-top:.9rem; color:var(--ink3); font-size:12px; line-height:1.7; text-transform:none; letter-spacing:.03em; }
/* The invitation is its own page: one line, one button, nothing else. */
.closing { align-items:center; text-align:center; }
.closing .close-title { max-width:26ch; font-size:clamp(3rem,7vw,6rem); line-height:1.02; }
.closing .primary-button { margin-top:clamp(1.25rem,3vh,2.25rem); }
/* The record strip moved off the offer and now closes the page in the footer. */
.footer { flex-wrap:wrap; height:auto; min-height:var(--footer-h); }
@media (max-width:600px) {
  .closing .close-title { font-size:clamp(2.6rem,12vw,3.4rem); }
}

/* One line icon per tile on the trap and hood pages, drawn in the page teal on the same soft
   halo the thinker card uses so the two rhyme. It fades in just behind its tile. */
.tile-icon { position:absolute; top:.85rem; right:.85rem; display:grid; place-items:center; width:2.1rem; height:2.1rem; margin-bottom:0; border-radius:50%; color:var(--teal); background:var(--teal-glow); border:1px solid color-mix(in oklch,var(--teal) 34%,transparent); }
@media (prefers-reduced-motion:reduce) {
  .reveal-enabled .tile[data-reveal] .tile-icon { opacity:1; transform:none; transition:none; }
}

/* The turn is now one page for the picture and one for the posture, so the Venn is the whole
   page and draws about twice the radius it had beside a column of copy. */
.venn-hero { width:100%; max-width:min(100%,1080px); margin-inline:auto; }
.venn-hero .venn { max-height:min(62vh,640px); max-width:100%; }
/* The ask and the offer sit centred and large on their own page. */
.posture-hero { max-width:min(100%,72rem); margin-inline:auto; }
.posture-hero .posture-card { text-align:center; padding:clamp(1.1rem,2.4vh,2rem) 1.25rem; }
.posture-hero .posture-card h3 { font-size:clamp(1.9rem,3.2vw,3rem); }
@media (max-width:760px) {
  .venn-hero .venn { max-height:none; }
  .posture-hero .posture-card h3 { font-size:clamp(1.6rem,7vw,2.1rem); }
}

/* ============================================================
   2026-09-20 / the twenty-two page build.
   Ten words a page, one visual, one animation. Every animated
   element is authored at its END state; the keyframes run it in
   from a start pose, and they only run under .is-playing with
   motion allowed, so reduced motion simply shows the end state.
   ============================================================ */

.page.slide { gap:clamp(1rem,3.2vh,2.6rem); }
.slide-line {
  max-width:16em;
  font-family:var(--serif);
  font-size:clamp(2.5rem,5.4vw,5.2rem);
  line-height:1.02;
  letter-spacing:var(--tracking-display);
}
.slide-line em { color:var(--teal); }
.stage { margin:0; width:100%; display:flex; align-items:center; justify-content:center; min-width:0; }
.art { display:block; width:100%; max-width:min(96%,900px); height:auto; max-height:min(52vh,460px); overflow:visible; }
.masthead-note { color:var(--ink3); letter-spacing:var(--tracking-label); }

/* The presenter strip is gone: the spoken line now sits on the slide itself,
   in scroll mode and in present mode, so the screen carries one line, not two. */
.presenter-strip { display:none !important; }

/* The spoken line: what Sunny reads out on every slide. Light grey, serif
   italic, quiet, directly under the headline. It is authored at its
   end state, so reduced motion and print show it with no animation at all.
   Excluded from the ten-words-a-page budget by scripts/present-words.ts. */
.spoken {
  margin-top:0;
  padding-top:clamp(.6rem,2vh,1.5rem);
  max-width:40em;
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.05rem,1.35vw,1.25rem);
  line-height:1.45;
  letter-spacing:.005em;
  color:var(--ink3);
  opacity:1;
}
/* The pre-state is set only once script has confirmed motion is wanted, so a
   page with no script, or with motion turned down, always shows the line. */
@media (prefers-reduced-motion:no-preference) {
  .slide-motion .slide:not(.is-playing) .spoken { opacity:0; }
  .is-playing .spoken { animation:spoken-in .8s ease 2.2s both; }
}
@media (max-width:700px) { .spoken { font-size:1.05rem; padding-top:.85rem; } }
@keyframes spoken-in { from { opacity:0; transform:translateY(8px); } }

/* 2 / the ledger: three claims land as deposits, each flips to a withdrawal,
   and the balance drains to nothing. Sunny's own brief, 2026-09-20. */
.stage-ledger { flex-direction:column; }
.ledger-book { width:min(680px,96%); display:flex; flex-direction:column; gap:clamp(.4rem,1.5vh,.9rem); }
.led-row { display:flex; align-items:baseline; gap:clamp(.6rem,1.6vw,1.1rem); padding:clamp(.35rem,1.1vh,.7rem) 0; border-bottom:1px solid var(--line2); }
.led-sign { position:relative; flex:0 0 auto; display:inline-block; width:1.1em; height:1em; font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; }
.led-plus, .led-minus { position:absolute; left:0; top:0; line-height:1; }
.led-plus { color:var(--teal); opacity:0; }
.led-minus { color:var(--red); opacity:1; }
.led-what { font-family:var(--serif); font-size:clamp(1.4rem,2.6vw,2.2rem); line-height:1.15; color:var(--red); }
.led-balance { display:flex; align-items:center; gap:clamp(.6rem,1.6vw,1.1rem); margin-top:clamp(.3rem,1.2vh,.8rem); }
.led-balance-label { flex:0 0 auto; color:var(--ink3); }
.led-balance-track { flex:1 1 auto; height:6px; border-radius:3px; background:var(--panel2); overflow:hidden; }
.led-balance-fill { display:block; height:100%; border-radius:3px; background:var(--gold); transform:scaleX(0); transform-origin:left; }
.led-balance-zero { flex:0 0 auto; font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1; color:var(--ink3); opacity:1; }
.is-playing .led-row { animation:led-land .5s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--n,0) * 420ms); }
.is-playing .led-what { animation:led-flip .45s ease both; animation-delay:calc(var(--n,0) * 420ms + 620ms); }
.is-playing .led-plus { animation:led-credit .1s linear both; animation-delay:calc(var(--n,0) * 420ms + 620ms); }
.is-playing .led-minus { animation:led-debit .1s linear both; animation-delay:calc(var(--n,0) * 420ms + 620ms); }
.is-playing .led-balance-fill { animation:led-drain 1.5s cubic-bezier(.4,0,.2,1) 1.5s both; }
.is-playing .led-balance-zero { animation:fade-in .5s ease 2.7s both; }
@keyframes led-land { from { opacity:0; transform:translateY(-14px); } }
@keyframes led-flip { from { color:var(--teal); } to { color:var(--red); } }
@keyframes led-credit { from { opacity:1; } to { opacity:0; } }
@keyframes led-debit { from { opacity:0; } to { opacity:1; } }
@keyframes led-drain { from { transform:scaleX(1); } to { transform:scaleX(0); } }

/* 3 / every inbox, the same email */
.inbox-stack { display:flex; flex-direction:column; gap:7px; width:min(560px,92%); filter:blur(2.6px); opacity:.6; }
.inbox-row { display:block; height:16px; border-radius:3px; background:linear-gradient(90deg,var(--panel2) 0 22%,rgba(255,255,255,.09) 22% 78%,var(--panel2) 78%); }
.is-playing .inbox-stack { animation:stack-blur 2.6s ease both; }
.is-playing .inbox-row { animation:row-in .34s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--n,0) * 70ms); }
.inbox-row:nth-child(1){--n:0}.inbox-row:nth-child(2){--n:1}.inbox-row:nth-child(3){--n:2}
.inbox-row:nth-child(4){--n:3}.inbox-row:nth-child(5){--n:4}.inbox-row:nth-child(6){--n:5}
.inbox-row:nth-child(7){--n:6}.inbox-row:nth-child(8){--n:7}.inbox-row:nth-child(9){--n:8}
.inbox-row:nth-child(10){--n:9}.inbox-row:nth-child(11){--n:10}.inbox-row:nth-child(12){--n:11}

/* 4 / Jeffrey the associate */
.art-jeffrey .jf-envelope { transform:translate(600px,110px) rotate(-18deg); opacity:.15; }
.art-jeffrey .jf-filter { opacity:1; }
.art-jeffrey .jf-person { opacity:1; }
.is-playing .art-jeffrey .jf-envelope { animation:envelope-run 2.4s cubic-bezier(.45,0,.55,1) both; }
.is-playing .art-jeffrey .jf-filter { animation:filter-hit .5s ease both; animation-delay:calc(var(--n,0) * 340ms + 340ms); }
.art-jeffrey .jf-filter:nth-child(1){--n:0}.art-jeffrey .jf-filter:nth-child(2){--n:1}
.art-jeffrey .jf-filter:nth-child(3){--n:2}.art-jeffrey .jf-filter:nth-child(4){--n:3}
.is-playing .art-jeffrey .jf-person { animation:person-turn .6s ease 1.7s both; }

/* 5 / five things, five flames */
.stage-trap { min-width:0; }
.flame-row { display:flex; gap:clamp(.8rem,4vw,3rem); align-items:flex-end; }
.flame-icon { display:block; width:clamp(42px,7vw,78px); height:auto; }
.flame { opacity:0; }
.flame-glyph { stroke:var(--teal); }
.is-playing .flame { animation:snuff .55s ease both; animation-delay:calc(var(--n,0) * 420ms); }
.is-playing .flame-glyph { animation:glyph-light .5s ease both; animation-delay:calc(var(--n,0) * 420ms + 200ms); }
.flame-cell:nth-child(1) .flame,.flame-cell:nth-child(1) .flame-glyph{--n:0}
.flame-cell:nth-child(2) .flame,.flame-cell:nth-child(2) .flame-glyph{--n:1}
.flame-cell:nth-child(3) .flame,.flame-cell:nth-child(3) .flame-glyph{--n:2}
.flame-cell:nth-child(4) .flame,.flame-cell:nth-child(4) .flame-glyph{--n:3}
.flame-cell:nth-child(5) .flame,.flame-cell:nth-child(5) .flame-glyph{--n:4}

/* 6 / stop asking, start giving */
.swap-line { max-width:none; }
.swap-out { color:var(--ink3); }
.swap-in { color:var(--gold); font-style:italic; }
.is-playing .swap-out { animation:slide-out-left .7s cubic-bezier(.4,0,.2,1) both; }
.is-playing .swap-in { animation:slide-in-right .7s cubic-bezier(.2,.8,.3,1) .35s both; }
.art-swap .swap-arc { stroke-dasharray:160; stroke-dashoffset:0; }
.is-playing .art-swap .swap-arc { animation:draw-line .8s ease .5s both; }
.is-playing .art-swap .swap-hand-give { animation:fade-up .7s ease .4s both; }

/* 7 / the ask and the offer */
.posture-hero { max-width:min(62rem,100%); width:100%; margin-inline:auto; }
.posture-card { transform-origin:center; }
.posture-ask { transform:scale(.93); opacity:.5; }
.posture-offer { transform:scale(1.04); }
.is-playing .posture-ask { animation:card-dim .9s cubic-bezier(.4,0,.2,1) .2s both; }
.is-playing .posture-offer { animation:card-lift .9s cubic-bezier(.2,.8,.3,1) .2s both; }

/* 8 / the turn: three circles, cold email, the show, money */
.venn-hero .venn { max-height:min(64vh,680px); }
@media (max-width:700px) { .venn-hero .venn { max-height:none; width:100%; } }
.venn-three .venn-set circle { transform-box:view-box; transform-origin:320px 290px; }
.venn-money { fill:var(--gold); stroke:var(--gold); }
.is-playing .venn-email { animation:bloom .9s cubic-bezier(.2,.85,.3,1) both; }
.is-playing .venn-show { animation:bloom .9s cubic-bezier(.2,.85,.3,1) .12s both; }
.is-playing .venn-money { animation:bloom .9s cubic-bezier(.2,.85,.3,1) .26s both; }
.is-playing .venn-labels { animation:fade-in .5s ease .7s both; }
.is-playing .venn-meet { animation:fade-in .45s ease .95s both; }

/* 9 / the channel does not change */
.art-channel .ch-cone { opacity:.14; }
.art-channel .ch-envelope { stroke:var(--gold); }
.is-playing .art-channel .ch-cone { animation:cone-in 1s ease .5s both; }
.is-playing .art-channel .ch-envelope { animation:envelope-light 1.2s ease both; }
.art-channel .ch-flap { transform-box:fill-box; transform-origin:bottom; }
.is-playing .art-channel .ch-flap { animation:flap-open .8s cubic-bezier(.2,.8,.3,1) .3s both; }

/* 10 / one motion */
.art-motion .mo-arrow, .art-motion .mo-fused, .art-motion .mo-head { stroke-dasharray:420; stroke-dashoffset:0; }
.is-playing .art-motion .mo-a { animation:draw-line .8s ease both; }
.is-playing .art-motion .mo-b { animation:draw-line .8s ease both; }
.is-playing .art-motion .mo-fused { animation:draw-line .55s ease .8s both; }
.is-playing .art-motion .mo-head { animation:fade-in .3s ease 1.3s both; }
.is-playing .art-motion .mo-cal { animation:fade-up .5s ease 1.4s both; }

/* 11 / the chicken and the egg */
.art-loop .lp-spin { transform-box:view-box; transform-origin:308px 140px; opacity:.3; }
.art-loop .lp-show { opacity:1; transform-box:view-box; transform-origin:308px 140px; }
.art-loop .lp-open { stroke-dasharray:400; stroke-dashoffset:0; }
.is-playing .art-loop .lp-spin { animation:loop-spin 1.5s cubic-bezier(.4,0,.5,1) both; }
.is-playing .art-loop .lp-show { animation:drop-in .55s cubic-bezier(.2,.9,.3,1) 1.1s both; }
.is-playing .art-loop .lp-open { animation:draw-line .7s ease 1.6s both; }

/* 13 and 14 / one hundred attempts */
.stage-dots { min-width:0; }
.dot-field { display:grid; grid-template-columns:repeat(20,minmax(0,1fr)); gap:clamp(5px,.9vw,11px); width:min(860px,96%); }
.dot { display:block; aspect-ratio:1; border-radius:50%; background:var(--ink3); opacity:.45; }
.dot.is-six { background:var(--teal); opacity:1; }
.dot.is-deal { background:var(--gold); }
.dot.is-dim { opacity:.22; }
.is-playing .dot { animation:dot-fall .45s cubic-bezier(.2,.8,.3,1) both; animation-delay:calc(var(--i,0) * 11ms); }
.dot-field-faces { grid-template-columns:repeat(20,minmax(0,1fr)); }
.dot.is-face { position:relative; border-radius:4px; background:none; overflow:visible; z-index:2; }
.dot-thumb { position:absolute; left:50%; top:50%; width:clamp(56px,7.4vw,96px); height:auto; aspect-ratio:16/9; object-fit:cover; transform:translate(-50%,-50%); border-radius:4px; border:1px solid var(--line); box-shadow:0 8px 28px rgba(0,0,0,.55); }
.is-playing .dot-field-faces .is-face .dot-thumb { animation:swell .6s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(1s + var(--r,0) * 120ms); }

/* 15 / delivery, not copy */
.mailbox-strip { display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); gap:clamp(5px,1vw,12px); width:min(820px,96%); }
.mbox { display:block; aspect-ratio:1; border-radius:3px; background:var(--teal); opacity:.85; }
.mbox.is-dark { background:var(--panel2); border:1px solid var(--line); opacity:1; }
.is-playing .mbox:not(.is-dark) { animation:warm-up .5s ease both; animation-delay:calc(var(--i,0) * 26ms); }

/* 16 / the ring */
.art-ring { max-height:min(48vh,420px); }
.art-ring .rg-spin { transform-box:view-box; transform-origin:260px 200px; }
.art-ring .rg-node { opacity:1; }
.is-playing .art-ring .rg-spin { animation:ring-turn 2.4s cubic-bezier(.3,0,.3,1) both; }
.is-playing .art-ring .rg-node { animation:node-pulse .7s ease both; animation-delay:calc(var(--i,0) * 200ms + 300ms); }
.is-playing .art-ring .rg-inbox { animation:drop-in .5s ease 1.6s both; }

/* 17 / one inbox */
.art-funnel .fn-line, .art-funnel .fn-teal { stroke-dasharray:700; stroke-dashoffset:0; }
.is-playing .art-funnel .fn-line { animation:draw-line .9s ease both; animation-delay:calc(var(--i,0) * 110ms); }
.is-playing .art-funnel .fn-teal { animation:draw-line .8s ease 1.1s both; }
.is-playing .art-funnel .fn-inbox { animation:fade-in .5s ease 1.8s both; }

/* 18 / one real week */
#shots .cal-col { clip-path:inset(0 0 0 0); }
.is-playing #shots .cal-col { animation:wipe-down .5s ease both; animation-delay:calc(var(--day,0) * 280ms); }
#shots .cal-ev-title { opacity:0; transition:opacity .2s ease; }
#shots .cal-ev:hover .cal-ev-title, #shots .cal-ev:focus-within .cal-ev-title { opacity:1; }
/* The calendar body scrolls, so a popup above the block would be clipped.
   The frame fills the block instead, with the title riding on top of it. */
#shots .cal-ev.kind-taping[style*="--thumb"]:hover::after {
  content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:var(--thumb) center/cover no-repeat; opacity:.42; pointer-events:none;
}
#shots .cal-ev:hover { z-index:5; }

/* 19 / nine before ten */
.stage-morning { flex-direction:column; gap:clamp(.6rem,2vh,1.4rem); }
.morning-count { font-family:var(--serif); font-size:clamp(2.4rem,6vw,4.6rem); line-height:1; color:var(--teal); font-variant-numeric:tabular-nums; }
.morning-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(.5rem,1.4vw,1rem); width:min(620px,94%); }
.mblock { display:flex; align-items:center; justify-content:center; height:clamp(46px,7.5vh,72px); border-radius:4px; background:var(--panel); border:1px solid color-mix(in oklch,var(--teal) 42%,transparent); box-shadow:0 0 24px var(--teal-haze); }
.mblock-time { font-family:var(--mono); font-size:var(--type-label); letter-spacing:var(--tracking-label); color:var(--ink2); }
.is-playing .mblock { animation:block-in .4s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 170ms); }

/* 20 / the offer */
#offer .tier-card { opacity:1; transform:none; }
.is-playing #offer .tier-card { animation:fade-up .6s cubic-bezier(.2,.8,.3,1) both; }
.is-playing #offer .tier-card:nth-child(2) { animation-delay:.14s; }
.is-playing #offer .tier-card:nth-child(3) { animation-delay:.28s; }
#offer .tier-show { position:relative; }
#offer .tier-show::after { content:''; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--gold); transform:scaleX(1); transform-origin:left; }
.is-playing #offer .tier-show::after { animation:draw-underline .7s ease .6s both; }
.offer-fineprint { max-width:64rem; color:var(--ink3); font-size:.86rem; line-height:1.6; }
.offer-fineprint a { color:var(--ink3); text-decoration:underline; text-underline-offset:3px; }
.offer-fineprint a:hover { color:var(--teal); }
.fineprint-more { color:var(--ink3); }

/* 21 / you keep the keys */
.art-keys .ky-key { transform:translate(320px,110px) rotate(0deg); }
.is-playing .art-keys .ky-key { animation:key-hand 1.5s cubic-bezier(.4,0,.2,1) both; }
.is-playing .art-keys .ky-hand-right { animation:fade-in .6s ease 1.1s both; }

/* 22 / come on the show */
#close { align-items:flex-start; }
.close-button { align-self:flex-start; }
:root[data-active-page="close"] #convergence-scene { opacity:.1 !important; visibility:visible; }
:root[data-active-page="close"] .scene-backdrop { opacity:.14 !important; visibility:visible; }

@keyframes draw-line { from { stroke-dashoffset:820; } to { stroke-dashoffset:0; } }
@keyframes draw-underline { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes fade-in { from { opacity:0; } }
@keyframes fade-up { from { opacity:0; transform:translateY(16px); } }
@keyframes row-in { from { opacity:0; transform:translateY(-14px); } }
@keyframes stack-blur { 0%,55% { filter:blur(0); opacity:1; } 100% { filter:blur(2.6px); opacity:.6; } }
@keyframes envelope-run {
  0% { transform:translate(-40px,110px) rotate(0deg); opacity:1; }
  70% { transform:translate(470px,110px) rotate(0deg); opacity:.7; }
  100% { transform:translate(600px,110px) rotate(-18deg); opacity:.15; }
}
@keyframes filter-hit { 0% { opacity:.35; } 40% { opacity:1; stroke:var(--teal); } 100% { opacity:1; } }
@keyframes person-turn { 0% { opacity:.3; } 60% { opacity:1; transform:translateX(6px); } 100% { opacity:1; transform:none; } }
@keyframes snuff { 0% { opacity:1; transform:translateY(0); } 100% { opacity:0; transform:translateY(-6px) scaleY(.4); } }
@keyframes glyph-light { from { stroke:var(--ink3); } to { stroke:var(--teal); } }
@keyframes slide-out-left { 0% { opacity:1; color:var(--ink); transform:translateX(0); } 100% { opacity:1; color:var(--ink3); transform:translateX(-10px); } }
@keyframes slide-in-right { from { opacity:0; transform:translateX(34px); } }
@keyframes card-dim { from { transform:scale(1); opacity:1; } }
@keyframes card-lift { from { transform:scale(1); } }
@keyframes venn-left { from { transform:translateX(-120px); opacity:0; } }
@keyframes venn-right { from { transform:translateX(120px); opacity:0; } }
@keyframes cone-in { from { opacity:0; } }
@keyframes envelope-light { from { stroke:var(--ink3); } }
@keyframes flap-open { from { transform:rotateX(0deg); } to { transform:rotateX(0deg); } }
@keyframes loop-spin { from { transform:rotate(0deg); opacity:1; } to { transform:rotate(300deg); opacity:.3; } }
@keyframes drop-in { from { opacity:0; transform:scale(.4); } }
@keyframes bloom { from { opacity:0; transform:scale(.25); } }
@keyframes dot-fall { from { opacity:0; transform:translateY(-22px); } }
@keyframes swell { from { opacity:0; transform:translate(-50%,-50%) scale(.2); } }
@keyframes warm-up { from { background:var(--panel2); opacity:.35; } }
@keyframes ring-turn { from { transform:rotate(-40deg); } }
@keyframes node-pulse { 0% { opacity:.25; } 50% { opacity:1; } 100% { opacity:1; } }
@keyframes wipe-down { from { clip-path:inset(0 0 100% 0); } }
@keyframes block-in { from { opacity:0; transform:translateY(12px) scale(.9); } }
@keyframes key-hand {
  0% { transform:translate(170px,110px) rotate(0deg); opacity:0; }
  20% { opacity:1; }
  85% { transform:translate(320px,110px) rotate(0deg); }
  100% { transform:translate(320px,110px) rotate(14deg); }
}

@media (prefers-reduced-motion:reduce) {
  .is-playing * { animation:none !important; }
}

@media (max-width:700px) {
  .slide-line { font-size:clamp(2rem,8.4vw,2.9rem); max-width:none; }
  .art { max-height:34vh; }
  .dot-field, .dot-field-faces { grid-template-columns:repeat(10,minmax(0,1fr)); }
  .mailbox-strip { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .flame-row { gap:.45rem; }
  .posture-pair { grid-template-columns:1fr; }
  .morning-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  #offer .tier-grid { grid-template-columns:1fr; }
}

/* ============================================================
   2026-09-20 evening / the second pass on motion.
   One idea a slide, dramatised, settled inside three seconds.
   Every element below is authored at its END state; the keyframes
   run it in from a start pose. The reduced-motion and print block
   at the foot of this file restates those end states explicitly,
   so nothing depends on a keyframe to become visible.
   ============================================================ */

/* 1 / the hero: the ask hangs, the offer lands with weight. */
.hero { overflow:clip; }
.hero-copy, .hero-bottom, .hero .spoken { position:relative; z-index:1; }
.hero-asking { color:var(--ink2); }
.is-playing .hero-asking { animation:ask-hang 1.1s ease both; }
.is-playing .hero-offering { animation:offer-land .85s cubic-bezier(.2,.9,.3,1) .95s both; }
@keyframes ask-hang { 0% { opacity:0; transform:translateY(10px); } 100% { opacity:1; transform:none; } }
@keyframes offer-land { 0% { opacity:0; transform:translateY(-28px) scale(1.07); } 100% { opacity:1; transform:none; } }

/* 3 / sameness: one row breaks the grid and is pulled back to the same shape. */
.inbox-row.is-odd { transform:none; }
.is-playing .inbox-row.is-odd {
  animation:row-in .34s cubic-bezier(.2,.8,.3,1) both, break-out 2.1s cubic-bezier(.45,0,.2,1) both;
  animation-delay:calc(var(--n,0) * 70ms), 1.1s;
}
@keyframes break-out {
  0% { transform:none; filter:none; }
  30% { transform:translateX(30px) scaleX(1.03); filter:brightness(2.2); }
  62% { transform:translateX(30px); filter:brightness(2.2); }
  100% { transform:none; filter:none; }
}

/* 4 / Jeffrey: the envelope runs the gauntlet, slows at every filter, and
   drops at the feet of a man who never looks up. */
.art-jeffrey .jf-envelope { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
.art-jeffrey .jf-name { font-family:var(--mono); font-size:13px; letter-spacing:var(--tracking-label); text-transform:uppercase; fill:var(--ink3); opacity:1; }
.is-playing .art-jeffrey .jf-envelope { animation:envelope-run 2.6s cubic-bezier(.3,0,.5,1) both; }
.is-playing .art-jeffrey .jf-person { animation:fade-in .6s ease .25s both; }
.is-playing .art-jeffrey .jf-name { animation:fade-in .5s ease 2.2s both; }
@keyframes envelope-run {
  0% { transform:translate(-40px,110px) rotate(0deg); opacity:1; }
  18% { transform:translate(155px,110px) rotate(0deg); opacity:1; }
  24% { transform:translate(158px,110px) rotate(-5deg); opacity:.9; }
  40% { transform:translate(245px,110px) rotate(0deg); opacity:.78; }
  58% { transform:translate(335px,112px) rotate(4deg); opacity:.6; }
  76% { transform:translate(425px,112px) rotate(-3deg); opacity:.44; }
  88% { transform:translate(482px,124px) rotate(-12deg); opacity:.32; }
  100% { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
}

/* 5 / the trap: five candles go out one after another, the sixth stays lit. */
.flame { transform-box:fill-box; transform-origin:bottom; }
.is-playing .flame { animation:snuff .55s ease both; animation-delay:calc(var(--n,0) * 380ms); }
.is-playing .flame-glyph { animation:glyph-light .5s ease both; animation-delay:calc(var(--n,0) * 380ms + 200ms); }
.flame-cell.is-lit .flame { opacity:1; }
.flame-cell.is-lit .flame-glyph { stroke:var(--gold); }
.is-playing .flame-cell.is-lit .flame { animation:flame-hold .9s ease 1.85s both; }
.is-playing .flame-cell.is-lit .flame-glyph { animation:glyph-gold .5s ease 2.05s both; }
@keyframes flame-hold { 0% { opacity:.2; transform:scaleY(.6); } 62% { opacity:1; transform:scaleY(1.07); } 100% { opacity:1; transform:none; } }
@keyframes glyph-gold { from { stroke:var(--ink3); } to { stroke:var(--gold); } }

/* 6 / the swap: asking slides out and dims, giving arrives and lights, and
   the whole line takes one breath afterwards. */
.swap-line { transform-origin:left center; }
.swap-in { text-shadow:0 0 22px var(--gold-glow); }
.is-playing .swap-line { animation:line-breathe 1.3s ease 1.15s both; }
@keyframes line-breathe { 0% { transform:none; } 42% { transform:scale(1.022); } 100% { transform:none; } }

/* 7 / the posture pair: the ask and the offer physically trade places. */
.is-playing .posture-ask { animation:posture-cross-left 1.15s cubic-bezier(.55,0,.2,1) .2s both; }
.is-playing .posture-offer { animation:posture-cross-right 1.15s cubic-bezier(.55,0,.2,1) .2s both; }
@keyframes posture-cross-left {
  0% { transform:translateX(calc(100% + 1rem)) scale(1); opacity:1; }
  50% { transform:translateX(calc(50% + .5rem)) translateY(-30px) scale(.97); opacity:.8; }
  100% { transform:scale(.93); opacity:.5; }
}
@keyframes posture-cross-right {
  0% { transform:translateX(calc(-100% - 1rem)) scale(1); }
  50% { transform:translateX(calc(-50% - .5rem)) translateY(30px) scale(.99); }
  100% { transform:scale(1.04); }
}

/* 8 / the turn: the three circles close in, then one pulse through the middle. */
.venn-pulse { transform-box:view-box; transform-origin:320px 290px; opacity:0; }
.is-playing .venn-pulse { animation:venn-ring 1.1s ease 1.25s both; }
@keyframes venn-ring { 0% { opacity:0; transform:scale(.45); } 34% { opacity:.8; } 100% { opacity:0; transform:scale(1.28); } }
.is-playing .venn-meet { animation:fade-in .45s ease .95s both, meet-glow 1.4s ease 1.2s both; }
@keyframes meet-glow { 0%,100% { filter:none; } 50% { filter:drop-shadow(0 0 16px var(--gold-glow)); } }

/* 9 / the channel: the same envelope, the hand inside it turns into a handshake. */
.ch-glyph { transform-box:fill-box; transform-origin:center; }
.ch-ask { opacity:0; }
.ch-give { opacity:1; }
.is-playing .ch-ask { animation:glyph-out .55s ease .95s both; }
.is-playing .ch-give { animation:glyph-in .6s cubic-bezier(.2,.85,.3,1) 1.3s both; }
@keyframes glyph-out { 0% { opacity:1; transform:none; } 100% { opacity:0; transform:translateY(7px) scale(.88); } }
@keyframes glyph-in { 0% { opacity:0; transform:translateY(-9px) scale(.84); } 100% { opacity:1; transform:none; } }
.art-channel .ch-flap { backface-visibility:visible; transform-style:flat; transform:none; }
.is-playing .art-channel .ch-flap { animation:flap-open .8s cubic-bezier(.2,.8,.3,1) .25s both; }
@keyframes flap-open { from { transform:rotateX(-148deg); } to { transform:none; } }

/* 10 / one motion: two lanes fuse, and one pulse runs the fused line home. */
.mo-pulse { opacity:0; }
.is-playing .art-motion .mo-pulse { animation:mo-travel 1s cubic-bezier(.4,0,.6,1) 1.3s both; }
@keyframes mo-travel {
  0% { opacity:0; transform:translateX(0); }
  16% { opacity:1; }
  82% { opacity:1; transform:translateX(178px); }
  100% { opacity:0; transform:translateX(196px); }
}

/* 11 / the loop: it spins, the show drops in, the loop opens into a line. */
.is-playing .art-loop .lp-show { animation:drop-in .55s cubic-bezier(.2,.9,.3,1) 1.05s both, node-glow 1.1s ease 1.55s both; }
@keyframes node-glow { 0%,100% { filter:none; } 45% { filter:drop-shadow(0 0 18px var(--gold-glow)); } }

/* 12 / volume: the number counts up deliberately while the field lands. */
.stage-dots { flex-direction:column; gap:clamp(.5rem,1.8vh,1.2rem); }
.dot-readout { font-family:var(--serif); font-size:clamp(2rem,4.4vw,3.4rem); line-height:1; color:var(--teal); font-variant-numeric:tabular-nums; }

/* 13 / which six: the six bloom, and the rest of the field falls back. */
.is-playing .dot-field-faces .is-dim {
  animation:dot-fall .45s cubic-bezier(.2,.8,.3,1) both, dim-down .7s ease both;
  animation-delay:calc(var(--i,0) * 11ms), 1.5s;
}
@keyframes dim-down { from { opacity:.45; } to { opacity:.22; } }

/* 15 / delivery: most of the fleet warms up, and the ones that are blocked
   bounce off and go dark. The copy was never the problem. */
.mbox { transform:none; }
.is-playing .mbox:not(.is-dark) { animation:warm-up .5s ease both; animation-delay:calc(var(--i,0) * 22ms); }
.is-playing .mbox.is-dark { animation:bounce-off .75s cubic-bezier(.3,0,.4,1) both; animation-delay:calc(var(--i,0) * 22ms + 460ms); }
@keyframes bounce-off {
  0% { transform:none; background:var(--teal); }
  26% { transform:translateY(-11px) scale(1.14); background:var(--red); }
  58% { transform:translateY(3px); background:var(--red); }
  100% { transform:none; background:var(--panel2); }
}

/* 16 / under the hood: the machine assembles, spoke by spoke, then turns. */
.rg-spoke { stroke-dasharray:170; stroke-dashoffset:0; }
.is-playing .rg-spoke { animation:draw-spoke .5s ease both; animation-delay:calc(var(--i,0) * 130ms + 180ms); }
@keyframes draw-spoke { from { stroke-dashoffset:170; } }
.art-ring .rg-node { transform-box:fill-box; transform-origin:center; }
.is-playing .art-ring .rg-node { animation:node-assemble .6s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 130ms + 120ms); }
@keyframes node-assemble { from { opacity:0; transform:scale(.2); } }
.is-playing .art-ring .rg-spin { animation:ring-turn 2.1s cubic-bezier(.3,0,.3,1) both; }
.is-playing .art-ring .rg-inbox { animation:drop-in .5s ease 1.5s both; }

/* 17 / the funnel: six lines land, a seventh arrives late from below, and the
   inbox rings once when it does. */
.fn-pulse { transform-box:view-box; transform-origin:540px 151px; opacity:0; }
.is-playing .art-funnel .fn-pulse { animation:fn-ring 1s ease 1.85s both; }
@keyframes fn-ring { 0% { opacity:0; transform:scale(.88); } 32% { opacity:.85; } 100% { opacity:0; transform:scale(1.2); } }

/* 18 / the week: the calendar fills a day at a time, then the tapings light. */
#shots .cal-ev { box-shadow:none; }
.is-playing #shots .cal-ev.kind-taping { animation:taping-light .6s ease both; animation-delay:calc(var(--day,0) * 280ms + 620ms); }
@keyframes taping-light {
  0% { box-shadow:none; }
  45% { box-shadow:0 0 0 1px var(--teal),0 0 18px var(--teal-haze); }
  100% { box-shadow:none; }
}

/* 19 / the morning: the hand sweeps to ten and nine dots appear along it. */
.morning-head { display:flex; align-items:center; justify-content:center; gap:clamp(.8rem,2.4vw,1.6rem); }
.morning-clock { flex:0 0 auto; width:clamp(64px,8vw,106px); height:auto; }
.mc-hand { transform-box:view-box; transform-origin:60px 60px; transform:none; }
.is-playing .mc-hand { animation:clock-sweep 1.8s cubic-bezier(.35,0,.25,1) both; }
@keyframes clock-sweep { from { transform:rotate(-300deg); } to { transform:none; } }
.mc-ticks circle { transform-box:fill-box; transform-origin:center; opacity:1; }
.is-playing .mc-ticks circle { animation:tick-in .4s cubic-bezier(.2,.85,.3,1) both; animation-delay:calc(var(--i,0) * 175ms + 160ms); }
@keyframes tick-in { from { opacity:0; transform:scale(.2); } }

/* 20 / the offer: three columns rise, and the middle one settles taller.
   Nothing here touches a price or the fine print. */
#offer .tier-card { --lift:0px; transform:translateY(var(--lift)); }
.is-playing #offer .tier-card { animation:column-rise .85s cubic-bezier(.2,.85,.3,1) both; }
.is-playing #offer .tier-card:nth-child(2) { animation-delay:.16s; }
.is-playing #offer .tier-card:nth-child(3) { animation-delay:.32s; }
@keyframes column-rise {
  0% { opacity:0; transform:translateY(calc(var(--lift) + 58px)) scaleY(.9); transform-origin:bottom; }
  100% { opacity:1; transform:translateY(var(--lift)); }
}

/* 21 / the keys: the key turns, and the door lights up behind it. */
.art-keys .ky-key { transform:translate(320px,110px) rotate(80deg); }
.art-keys .ky-door { opacity:1; }
.is-playing .art-keys .ky-key { animation:key-hand 1.6s cubic-bezier(.4,0,.2,1) both; }
.is-playing .art-keys .ky-door { animation:door-light .9s ease 1.2s both; }
@keyframes key-hand {
  0% { transform:translate(150px,110px) rotate(0deg); opacity:0; }
  18% { opacity:1; }
  62% { transform:translate(320px,110px) rotate(0deg); opacity:1; }
  100% { transform:translate(320px,110px) rotate(80deg); opacity:1; }
}
@keyframes door-light {
  0% { opacity:.15; filter:none; }
  58% { opacity:1; filter:drop-shadow(0 0 18px var(--gold-glow)); }
  100% { opacity:1; filter:none; }
}

/* 22 / the show: everything settles, then the invitation arrives and holds. */
.is-playing #close .close-button { animation:fade-up .7s ease .15s both; }
.is-playing #close .close-title { animation:title-arrive 1s cubic-bezier(.2,.85,.3,1) 1s both; }
@keyframes title-arrive { from { opacity:0; transform:translateY(20px) scale(.96); } }

/* The end states, restated. Under reduced motion and in print nothing animates,
   so every pose a keyframe would have produced is written out here. This is the
   rule that the Sep 18 blank flip broke; animation:none alone is not enough. */
@media print, (prefers-reduced-motion:reduce) {
  .is-playing *, .is-playing *::before, .is-playing *::after { animation:none !important; }
  .spoken { opacity:1 !important; transform:none !important; }
  .hero-asking, .hero-offering { opacity:1; transform:none; }
  .led-row { opacity:1; transform:none; }
  .led-plus { opacity:0; }
  .led-minus { opacity:1; }
  .led-what { color:var(--red); }
  .led-balance-fill { transform:scaleX(0); }
  .led-balance-zero { opacity:1; }
  .inbox-stack { filter:blur(2.6px); opacity:.6; }
  .inbox-row { opacity:1; transform:none; filter:none; }
  .art-jeffrey .jf-envelope { transform:translate(486px,166px) rotate(-26deg); opacity:.18; }
  .art-jeffrey .jf-filter, .art-jeffrey .jf-person, .art-jeffrey .jf-name { opacity:1; transform:none; }
  .flame { opacity:0; transform:none; }
  .flame-cell.is-lit .flame { opacity:1; transform:none; }
  .flame-glyph { stroke:var(--teal); }
  .flame-cell.is-lit .flame-glyph { stroke:var(--gold); }
  .swap-out { opacity:1; transform:none; color:var(--ink3); }
  .swap-in { opacity:1; transform:none; }
  .swap-line { transform:none; }
  .art-swap .swap-arc { stroke-dashoffset:0; }
  .art-swap .swap-hand-give { opacity:1; transform:none; }
  .posture-ask { transform:scale(.93); opacity:.5; }
  .posture-offer { transform:scale(1.04); opacity:1; }
  .venn-set circle { opacity:1; transform:none; }
  .venn-labels, .venn-meet { opacity:1; transform:none; filter:none; }
  .venn-pulse { opacity:0; }
  .art-channel .ch-cone { opacity:.14; }
  .art-channel .ch-envelope { stroke:var(--gold); opacity:1; }
  .art-channel .ch-flap { transform:none; backface-visibility:visible; transform-style:flat; }
  .ch-ask { opacity:0; }
  .ch-give { opacity:1; transform:none; }
  .art-motion .mo-arrow, .art-motion .mo-fused, .art-motion .mo-head { stroke-dashoffset:0; opacity:1; }
  .art-motion .mo-cal { opacity:1; transform:none; }
  .mo-pulse { opacity:0; }
  .art-loop .lp-spin { transform:none; opacity:.3; }
  .art-loop .lp-show { opacity:1; transform:none; filter:none; }
  .art-loop .lp-open { stroke-dashoffset:0; }
  .art-ledger .ledger-drain { stroke-dashoffset:0; }
  .dot { opacity:.45; transform:none; }
  .dot.is-six { opacity:1; }
  .dot.is-dim { opacity:.22; }
  .dot-thumb { opacity:1; transform:translate(-50%,-50%); }
  .mbox { transform:none; }
  .mbox:not(.is-dark) { background:var(--teal); opacity:.85; }
  .mbox.is-dark { background:var(--panel2); opacity:1; }
  .rg-spoke { stroke-dashoffset:0; }
  .art-ring .rg-spin { transform:none; }
  .art-ring .rg-node, .art-ring .rg-inbox { opacity:1; transform:none; }
  .art-funnel .fn-line, .art-funnel .fn-teal { stroke-dashoffset:0; }
  .art-funnel .fn-inbox { opacity:1; transform:none; }
  .fn-pulse { opacity:0; }
  #shots .cal-col { clip-path:none; }
  #shots .cal-ev { opacity:1; transform:none; box-shadow:none; }
  #shots .cal-ev-title { opacity:1; }
  .mc-hand { transform:none; }
  .mc-ticks circle { opacity:1; transform:none; }
  .mblock { opacity:1; transform:none; }
  #offer .tier-card { opacity:1; transform:translateY(var(--lift)); }
  #offer .tier-show::after { transform:scaleX(1); }
  .art-keys .ky-key { transform:translate(320px,110px) rotate(80deg); opacity:1; }
  .art-keys .ky-hand-left, .art-keys .ky-hand-right { opacity:1; transform:none; }
  .art-keys .ky-door { opacity:1; filter:none; }
  #close .close-title, #close .close-button { opacity:1; transform:none; }
}

/* The week page carries the calendar, its key and the spoken line, so the
   calendar body gives back the height the line needs. */
#shots .cal-body { max-height:min(50vh,500px); }
@media (max-width:760px) { #shots .cal-body { max-height:min(46vh,420px); } }
@media (max-width:700px) { .spoken { padding-right:5.5rem; } }

/* Every slide pairs one centred text block with one centred visual. */
@media (min-width:901px) {
  .page.slide { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); column-gap:clamp(2.5rem,5vw,5rem); align-items:center; align-content:center; justify-content:normal; }
  .slide-text { grid-column:1; grid-row:1; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:clamp(.8rem,2.2vh,1.6rem); min-width:0; text-align:left; }
  .slide-visual { grid-column:2; grid-row:1; display:flex; align-items:center; justify-content:center; min-width:0; max-height:100%; }
  body.present-mode .page.slide.is-present-slide { display:grid; justify-content:normal; align-content:center; }
  .slide-line { max-width:none; }
  .hero-copy { width:100%; }
  .closing .slide-text { text-align:left; align-items:flex-start; }
  .closing .close-title { max-width:18ch; }
  #close { align-items:center; }
  .slide-visual .art { max-width:100%; max-height:min(56vh,500px); }
  .slide-visual .venn { max-height:min(56vh,520px); max-width:100%; }
  .slide-visual .venn-hero, .slide-visual .posture-hero { max-width:100%; }
  .slide-visual .ledger-book, .slide-visual .inbox-stack, .slide-visual .dot-field, .slide-visual .mailbox-strip, .slide-visual .morning-grid { width:100%; }
  .slide-visual .posture-hero .posture-card { padding:clamp(.8rem,1.8vh,1.3rem) 1rem; }
  .slide-visual .posture-hero .posture-card h3 { font-size:clamp(1.3rem,1.9vw,2rem); }
  /* Three tiers stacked in half a page only fit if the cards themselves give
     back the height. Nothing here touches a price, a term or a link. */
  .slide-visual .tier-grid { grid-template-columns:minmax(0,1fr); gap:.55rem; }
  .slide-visual .tier-card { --lift:0px; padding:.5rem .8rem; }
  .slide-visual .tier-card h3 { margin-bottom:.1rem; font-size:clamp(1.1rem,1.4vw,1.45rem); }
  .slide-visual .tier-price { margin-top:.2rem; }
  .slide-visual .tier-total { font-size:clamp(1.25rem,1.5vw,1.6rem); }
  .slide-visual .tier-show { margin-top:.25rem; padding-top:.25rem; }
  .slide-visual .tier-show-now { font-size:1.05rem; }
  .slide-visual .tier-cta { padding-top:.35rem; }
  .slide-visual .tier-cta .primary-button { padding:.4rem .9rem; }
  .slide-visual .cal { --hour-h:clamp(24px,3.1vh,34px); --cal-gutter-w:34px; }
  #shots .slide-visual .cal-body { max-height:min(56vh,520px); }
  .hero-scene-slot { width:100%; height:min(62vh,560px); }
  .slide-visual .art-mark { width:min(100%,320px); max-height:min(44vh,320px); }
}

/* Stacked slides keep their natural height and put the words first. */
@media (max-width:900px) {
  .slide-text, .slide-visual { display:flex; flex-direction:column; align-items:stretch; justify-content:center; width:100%; min-width:0; gap:clamp(.7rem,1.8vh,1.2rem); }
  .hero-scene-slot { display:none; }
}

/* The text arrives first, then the visual follows with the same easing. */
@keyframes slide-block-in { from { opacity:0; transform:translateY(18px); } }
.slide-motion .slide:not(.is-playing) .slide-text, .slide-motion .slide:not(.is-playing) .slide-visual { opacity:0; }
.slide-motion .slide.is-playing .slide-text { animation:slide-block-in .75s cubic-bezier(.2,.65,.2,1) both; }
.slide-motion .slide.is-playing .slide-visual { animation:slide-block-in .75s cubic-bezier(.2,.65,.2,1) .18s both; }

/* The closing mark draws two quiet rings before its centre lights. */
.mk-ring { stroke-dasharray:760; stroke-dashoffset:0; }
.mk-ring2 { stroke-dasharray:470; stroke-dashoffset:0; }
.mk-dot { opacity:1; }
.is-playing .mk-ring { animation:mark-draw 1.1s cubic-bezier(.2,.65,.2,1) .25s both; }
.is-playing .mk-ring2 { animation:mark-draw2 .9s cubic-bezier(.2,.65,.2,1) .7s both; }
.is-playing .mk-dot { animation:fade-in .6s ease 1.5s both; }
@keyframes mark-draw { from { stroke-dashoffset:760; } }
@keyframes mark-draw2 { from { stroke-dashoffset:470; } }

/* Print and reduced motion show every new element at its settled pose. */
@media print, (prefers-reduced-motion:reduce) {
  .slide-text, .slide-visual { opacity:1 !important; transform:none !important; }
  .mk-ring, .mk-ring2 { stroke-dashoffset:0; opacity:1; }
  .mk-dot { opacity:1; }
}