/* ═══════════════════════════════════════════════════════════════
   NO DUMB QUESTIONS
   Sibling to the Genius Bar page, not a recolor of it.

   SHARED (the family):  the grain technique · Space Mono as the
   accent face · the reflect-back tree · the offline/ics/a11y rigor.

   DIVERGED (the temperament):
     type      Fraunces + Figtree      (GB: Space Grotesk throughout)
     chrome    none — nothing fixed    (GB: fixed top bar + action bar)
     spine     arched bands, no snap   (GB: full-height snapped slabs)
     rsvp      an open worksheet       (GB: one question per screen)
     read      a note that unfolds     (GB: a docked panel + sheet)
     motion    slow, springy           (GB: fast, sharp)
     shape     big radii, lots of air  (GB: tight radii, dense)
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* paper */
  --paper:#FDF7EE;
  --shell:#F6EBD9;
  --shell-2:#EFDFC7;
  --card:#FFFCF7;

  /* ink */
  --ink:#2A211B;          /* 14.9:1 on paper */
  --ink-2:#584639;        /* 7.6:1 */
  --ink-3:#7A6857;        /* 4.9:1 — only ever used at 15px and up */
  --line:#E9D9C2;
  --line-2:#DCC5A3;

  /* clay */
  --clay:#A8481C;
  --clay-2:#C2622C;
  --wash:rgba(168,72,28,.075);
  --sage:#55705A;
  --honey:#E9B45C;

  --display:'Fraunces','Fraunces sub',Georgia,'Times New Roman',serif;
  --sans:'Figtree','Figtree sub','Helvetica Neue',Helvetica,Arial,system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Space Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,'Courier New',monospace;
  --brand:'Space Grotesk','Figtree',system-ui,sans-serif;   /* the axyion wordmark, nothing else */

  /* rounder than its sibling, everywhere */
  --r-s:16px;
  --r:24px;
  --r-l:32px;
  --arch:46px;

  --pad:24px;
  --gap:clamp(76px,13vw,124px);       /* the air between sections */

  /* motion: slower, and it lands with a little give */
  --spring:cubic-bezier(.34,1.36,.56,1);
  --soft:cubic-bezier(.32,.72,0,1);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);

  /* everything the night palette needs to swap */
  --on-clay:#FFF9F1;          /* text and marks that sit on clay */
  --on-clay-rgb:255,249,241;
  --sh:42,33,27;              /* what shadows are made of */
  --nav-bg:rgba(253,247,238,.82);
  --foot-bg:#2A211B;
  --foot-ink:#EFE3D4;
  --foot-ink-2:#D8C7B4;
  --foot-ink-3:#B6A492;
  --foot-line:rgba(239,227,212,.18);
  --warn-bg:rgba(233,180,92,.14);
  --bad:#A32017;
  --bad-bg:#FDF0EE;
  --bad-ink:#8C1B13;
  --place:#9E8B77;
  --grain-blend:multiply;
  --grain-a:.19;
}

/* ═══════════════════════════════════════════════════════════════
   NIGHT
   Half of these QR codes get scanned in a dim room. Same page,
   lit by a lamp instead of a window — warm brown-black paper,
   the clay lifted so it still carries, the grain switched from
   darkening the sheet to catching light on it.
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#171310;
    --shell:#1E1813;
    --shell-2:#2A2119;
    --card:#221B15;

    --ink:#F5EADB;            /* 15.4:1 on paper */
    --ink-2:#D9C9B4;          /* 10.6:1 */
    --ink-3:#A8957F;          /*  5.7:1 */
    --line:#332A21;
    --line-2:#4B3D2E;

    --clay:#E28C54;           /* 7.4:1 on the night paper */
    --clay-2:#F0A268;
    --wash:rgba(226,140,84,.13);
    --sage:#8FB396;
    --honey:#F0C275;

    --on-clay:#1A140F;
    --on-clay-rgb:26,20,15;
    --sh:0,0,0;
    --nav-bg:rgba(30,24,19,.86);
    --foot-bg:#0F0C09;
    --foot-ink:#E8DCC9;
    --foot-ink-2:#C9B9A3;
    --foot-ink-3:#9C8B77;
    --foot-line:rgba(232,220,201,.16);
    --warn-bg:rgba(240,194,117,.14);
    --bad:#F0857A;
    --bad-bg:#2A1714;
    --bad-ink:#F2A69C;
    --place:#7E6E5D;
    --grain-blend:screen;     /* on a dark sheet the grain catches light */
    --grain-a:.10;
  }
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* every growth on this page is something the reader just did — let it grow
   downward and leave the scroll position alone */
body{overflow-anchor:none}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:clip;
}
img,svg{display:block;max-width:100%}
button,input,textarea{font:inherit;color:inherit}
button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
ol,ul{margin:0;padding:0;list-style:none}
::selection{background:var(--clay);color:var(--paper)}

/* ---------- atmosphere ----------
   Two warm washes drifting. Same idea as the sibling page, half the speed —
   the whole page is meant to move like it isn't in a hurry. */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.wash{position:absolute;border-radius:50%;filter:blur(78px);will-change:transform}
.wash-1{width:130vw;height:130vw;max-width:900px;max-height:900px;left:-32vw;top:-26vh;
  background:radial-gradient(circle at 50% 50%,rgba(233,180,92,.34),transparent 68%);
  animation:drift1 46s var(--soft) infinite alternate}
.wash-2{width:120vw;height:120vw;max-width:800px;max-height:800px;right:-36vw;top:58vh;
  background:radial-gradient(circle at 50% 50%,rgba(194,98,44,.20),transparent 66%);
  animation:drift2 58s var(--soft) infinite alternate}
@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(10vw,8vh,0) scale(1.16)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-12vw,-10vh,0) scale(.9)}}

/* ---------- grain ----------
   FAMILY DNA — deliberately the same implementation as the Genius Bar page.
   One 160×160 SVG turbulence tile, stitched, stepped through six positions
   over six seconds, so it repaints about once a second and never per frame.
   On paper it reads as stock rather than film, so it multiplies. */
.grain{position:fixed;inset:-50%;z-index:3;pointer-events:none;
  opacity:var(--grain-a);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 6s steps(6) infinite}
@keyframes grainShift{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}}

/* ---------- the spine ----------
   No fixed chrome anywhere — no top bar, no docked action bar, no modal
   sheets. It's a page you scroll, not an app shell you operate. Sections are
   arched bands that overlap the one above like stacked paper. */
.wrap{position:relative;z-index:1}
.band>.in,.hero>*{position:relative;z-index:1}
/* Each panel pins where it ends and the next one slides up over it. `top` is
   set per panel by script — a panel taller than the screen has to finish
   scrolling before it pins, or its bottom half would be unreachable. Later
   panels are later in the DOM, so they paint over the pinned one for free. */
.hero,.band{position:sticky;top:0}
/* a panel darkens as the next one comes up over it, so the stack has some
   depth to it instead of one flat sheet swapping for another */
.hero::after,.band::after{content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;z-index:5;background:rgba(var(--sh),var(--recede,0))}
/* The worksheet is the one panel that never pins. It's two or three screens
   tall, it changes height constantly, and it ends in a form — a pinned panel
   can't scroll an input up away from the phone keyboard, and its lower cards
   could never be brought to the top of the screen. It scrolls like an ordinary
   section; every other panel still stacks around it. */
.band[data-nopin]{position:relative;top:0!important}
.band[data-nopin]::after{display:none}
html.nostack .hero,html.nostack .band{position:relative;top:0!important}
html.nostack .hero::after,html.nostack .band::after{display:none}
.band{padding:var(--gap) var(--pad)}
.band--tint,.band--paper{box-shadow:0 -22px 46px -30px rgba(var(--sh),.6)}
.band--tint{background:var(--shell);border-radius:var(--arch) var(--arch) 0 0;margin-top:-26px;
  padding-top:calc(var(--gap) + 14px)}
.band--paper{background:var(--paper);border-radius:var(--arch) var(--arch) 0 0;margin-top:-26px;
  padding-top:calc(var(--gap) + 14px)}
.band--last{padding-bottom:calc(var(--gap) + var(--safe-b))}
.in{width:100%;max-width:600px;margin:0 auto}

/* ---------- shared type ---------- */
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay);display:inline-flex;align-items:center;gap:10px;margin-bottom:22px}
.kicker::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--clay);flex:none}

.big{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(34px,9vw,50px);line-height:1.08;letter-spacing:-.015em;color:var(--ink);
  text-wrap:balance}
.big em{font-style:italic;color:var(--clay);font-weight:600}
.sub{font-size:18.5px;line-height:1.7;color:var(--ink-2);margin-top:20px}
.sub+.sub{margin-top:18px}
.sub b{color:var(--ink);font-weight:600}
.small{font-size:15.5px;line-height:1.65;color:var(--ink-3)}

/* ---------- hero ----------
   Centred, generous, nothing pinned. The sibling opens with a hard-left
   three-line stack under a fixed bar; this one opens like something handed
   to you across a table. */
/* NB: no position here — .hero is sticky, set with .band up in the spine
   block. Re-declaring position:relative below it silently turned the pin into
   a plain -195px nudge upward, which left a gap under the hero. */
.hero{padding:calc(var(--safe-t) + 46px) var(--pad) 62px;text-align:center;overflow:hidden}
.hero__arch{position:absolute;left:50%;top:calc(var(--safe-t) + 10px);
  width:min(560px,118vw);height:min(700px,134vw);transform:translateX(-50%);
  background:linear-gradient(180deg,var(--shell) 0%,transparent 82%);
  border-radius:50% 50% 30% 30% / 46% 46% 8% 8%;z-index:0;
  animation:breathe 16s var(--soft) infinite alternate}
@keyframes breathe{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.05)}}
.hero>*:not(.hero__arch){position:relative;z-index:1}

.hero__brand{display:inline-flex;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:32px;animation:fadeUp .8s var(--soft) both}
.wordmark{font-family:var(--brand);font-weight:700;font-size:15px;letter-spacing:-.03em;
  color:var(--ink);text-transform:none}
.wordmark i{font-style:normal;color:var(--clay)}

.hero__title{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(50px,15.5vw,86px);line-height:.98;letter-spacing:-.022em;margin-bottom:22px}
.hero__title span{display:block;overflow:hidden;padding-bottom:.04em}
.hero__title span>i{display:block;font-style:normal;animation:liftIn 1.15s var(--spring) both}
.hero__title span:nth-child(2)>i{animation-delay:.1s}
.hero__title span:nth-child(3)>i{animation-delay:.2s}
.hero__title .curl{font-style:italic;color:var(--clay)}
@keyframes liftIn{from{transform:translateY(105%)}to{transform:translateY(0)}}

.hero__topic{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--clay);background:var(--wash);
  border-radius:999px;padding:10px 18px;margin-bottom:26px;
  animation:fadeUp .9s var(--soft) .34s both}
.hero__hook{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:23ch;margin:0 auto 34px;
  animation:fadeUp .9s var(--soft) .42s both}

/* ---------- the question stack ----------
   Three notes, fanned, the top one swapping every few seconds. This is the
   page's whole argument: a paragraph promising the room is friendly does
   less work than one real beginner question sitting there in the open. */
.stack{position:relative;max-width:410px;margin:0 auto 36px;min-height:148px;
  animation:fadeUp .9s var(--soft) .5s both}
.stack__back{position:absolute;inset:0;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:0 10px 26px -20px rgba(var(--sh),.7)}
.stack__back.b1{transform:rotate(-3.4deg) translateY(7px) scale(.96);opacity:.7}
.stack__back.b2{transform:rotate(2.6deg) translateY(3px) scale(.98);opacity:.88}
.stack__front{position:relative;min-height:148px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:0 20px 44px -28px rgba(var(--sh),.9);
  display:flex;align-items:center;justify-content:center;padding:26px 24px;overflow:hidden;
  transform:rotate(-.6deg)}
.stack__pin{position:absolute;z-index:2;left:50%;top:-8px;width:15px;height:15px;margin-left:-7.5px;
  border-radius:50%;background:var(--clay);border:2px solid var(--paper)}
.stack__q{font-family:var(--display);font-optical-sizing:auto;font-weight:500;font-size:20.5px;
  line-height:1.32;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.stack__q--out{position:absolute;left:24px;right:24px}
.qIn{animation:qIn .75s var(--spring) .28s both}
.qOut{animation:qOut .32s var(--soft) both}
@keyframes qIn{from{opacity:0;transform:translateY(15px) rotate(1.6deg)}to{opacity:1;transform:none}}
@keyframes qOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-12px)}}
.stack__list{text-align:left}
.stack__list li{font-family:var(--display);font-weight:500;font-size:18px;line-height:1.35;
  padding:11px 0;border-bottom:1px dashed var(--line-2)}
.stack__list li:last-child{border-bottom:none}

.hero__when{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:30px;
  animation:fadeUp .9s var(--soft) .58s both}
.hero__date{font-family:var(--display);font-weight:600;font-size:23px;letter-spacing:-.01em}
.hero__meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;color:var(--ink-3)}
.hero__cta{animation:fadeUp .9s var(--soft) .66s both}
.hero__free{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--ink-3);
  margin-top:18px;animation:fadeUp .9s var(--soft) .74s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* everything that arrives on scroll shares one slow, slightly overshooting
   gesture — that gesture is the page's signature */
.rise{opacity:0;transform:translateY(26px)}
.rise.is-in{animation:riseIn .85s var(--spring) both}
.d1.is-in{animation-delay:.08s}
.d2.is-in{animation-delay:.16s}
.d3.is-in{animation-delay:.24s}
.d4.is-in{animation-delay:.32s}
@keyframes riseIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:11px;
  min-height:62px;padding:18px 30px;border-radius:999px;border:2px solid transparent;
  font-family:var(--sans);font-size:17.5px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;
  transition:transform .4s var(--spring),background .25s var(--soft),border-color .25s var(--soft)}
.btn:active{transform:scale(.955)}
.btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.btn--go{background:var(--clay);color:var(--on-clay);box-shadow:0 16px 34px -18px rgba(168,72,28,.95)}
.btn--go[disabled]{background:var(--shell-2);color:var(--ink-2);box-shadow:none;cursor:not-allowed}
.btn--quiet{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn--quiet:active{background:var(--shell)}
.btn--wide{width:100%}
.btn--sm{min-height:54px;padding:15px 24px;font-size:16.5px}

/* ---------- "what it is" — offset cards, not a column of paragraphs ---------- */
.pts{margin-top:38px;display:flex;flex-direction:column;gap:18px}
.pt{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 26px;box-shadow:0 14px 34px -30px rgba(var(--sh),.9)}
.pt:nth-child(even){margin-left:auto;margin-right:-6px;max-width:96%}
.pt:nth-child(odd){margin-left:-6px;max-width:96%}
.pt__n{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--clay);
  text-transform:uppercase;margin-bottom:10px}
.pt__t{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:22px;
  line-height:1.22;letter-spacing:-.015em;margin-bottom:8px}
.pt p{font-size:16.5px;line-height:1.65;color:var(--ink-2)}

.pull{margin-top:40px;padding:28px 4px 0;border-top:2px dotted var(--line-2);text-align:center}
.pull q{display:block;font-family:var(--display);font-optical-sizing:auto;font-style:italic;
  font-weight:500;font-size:clamp(23px,6vw,30px);line-height:1.3;letter-spacing:-.015em;
  color:var(--ink);quotes:none;text-wrap:balance}
.pull figcaption{font-family:var(--mono);font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-top:16px}

/* ---------- the series — a rail you push sideways ----------
   Horizontal on purpose. Nothing on the sibling page moves this way, and on a
   phone a rail reads as "there'll be more of these" faster than a list does. */
.rail{margin:34px -24px 0;padding:6px 24px 22px;display:flex;gap:14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;
  scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.tcard{flex:0 0 min(255px,74vw);scroll-snap-align:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-l);padding:22px;min-height:170px;
  display:flex;flex-direction:column;transition:transform .4s var(--spring)}
.tcard--now{background:var(--clay);border-color:var(--clay);color:var(--on-clay);
  box-shadow:0 18px 40px -22px rgba(168,72,28,.9)}
.tcard__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--clay);margin-bottom:14px}
.tcard--now .tcard__tag{color:rgba(var(--on-clay-rgb),.82)}
.tcard__t{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:21px;
  line-height:1.2;letter-spacing:-.015em;margin-bottom:auto}
.tcard__w{font-size:15px;line-height:1.5;color:var(--ink-3);margin-top:16px}
.tcard--now .tcard__w{color:rgba(var(--on-clay-rgb),.86)}
.railcue{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);display:flex;align-items:flex-start;gap:8px;margin-top:4px;line-height:1.6}
.railcue svg{margin-top:3px}
.railcue svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}

/* ══════════════════════════════════════════════════════════════
   THE WORKSHEET
   Five numbered cards, all visible from the start. Answer one and it
   folds down into a line you can tap to change; the next one opens
   itself. You can see the whole job before you begin and you can see
   what you've said — which is a different promise from a flow that
   shows one screen at a time and hides the rest.
   ══════════════════════════════════════════════════════════════ */
.work{background:var(--card);border:1px solid var(--line-2);border-radius:var(--r-l);
  padding:8px;box-shadow:0 30px 70px -50px rgba(var(--sh),1);margin-top:34px}
.work__top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px 14px}
.work__ttl{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ink-3)}
.work__count{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--clay)}
.pearls{display:flex;gap:6px}
.pearls i{width:9px;height:9px;border-radius:50%;background:var(--shell-2);
  transition:background .5s var(--spring),transform .5s var(--spring)}
.pearls i.on{background:var(--clay);transform:scale(1.25)}

.qc{border-top:1px solid var(--line)}
.qc:first-of-type{border-top:none}
.qc__head{display:flex;align-items:center;gap:14px;width:100%;padding:20px 18px;
  background:none;border:none;text-align:left;cursor:pointer;border-radius:var(--r);
  transition:background .3s var(--soft)}
.qc__head:active{background:var(--shell)}
.qc[data-state="locked"] .qc__head{cursor:default;opacity:.45}
.qc[data-state="open"] .qc__head{cursor:default}
.qc__n{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:700;
  background:var(--shell);color:var(--ink-3);
  transition:background .45s var(--spring),color .45s var(--spring),transform .45s var(--spring)}
.qc[data-state="open"] .qc__n{background:var(--clay);color:var(--on-clay);transform:scale(1.08)}
.qc[data-state="done"] .qc__n{background:var(--sage);color:var(--on-clay)}
.qc__n svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.qc__txt{flex:1;min-width:0}
.qc__q{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:19px;
  line-height:1.25;letter-spacing:-.015em;color:var(--ink)}
.qc[data-state="locked"] .qc__q{font-weight:500}
.qc__a{display:none;font-size:15.5px;line-height:1.4;color:var(--clay);font-weight:600;margin-top:4px}
.qc[data-state="done"] .qc__a{display:block;animation:fadeUp .5s var(--soft) both}
.qc__chg{display:none;flex:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.qc[data-state="done"] .qc__chg{display:block}

/* the fold. Height is animated by script (it needs a real number), the easing
   lives here so the gesture matches everything else on the page. */
.qc__body{overflow:hidden;height:0;
  transition:height .62s var(--spring),opacity .4s var(--soft)}
.qc[data-state="open"] .qc__body{opacity:1}
.qc:not([data-state="open"]) .qc__body{opacity:0}
.qc__inner{padding:2px 18px 24px}

/* ---------- controls ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.card{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;
  gap:10px;min-height:104px;padding:16px;text-align:left;
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r);
  color:var(--ink);font-size:16px;font-weight:500;line-height:1.22;letter-spacing:-.01em;
  cursor:pointer;
  transition:transform .4s var(--spring),background .3s var(--soft),border-color .3s var(--soft)}
.card svg{width:25px;height:25px;stroke:var(--clay);fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.card>span,.card>svg,.chip>span{position:relative;z-index:1}
.card:active{transform:scale(.96)}
.card[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:var(--on-clay);
  box-shadow:0 16px 30px -20px rgba(168,72,28,1)}
.card[aria-pressed="true"] svg{stroke:var(--on-clay)}
.card__tick{position:absolute;top:12px;right:12px;width:18px!important;height:18px!important;
  opacity:0;transform:scale(.5) rotate(-20deg);stroke-width:2.8!important;
  transition:opacity .3s var(--soft),transform .5s var(--spring)}
.card[aria-pressed="true"] .card__tick{opacity:1;transform:scale(1) rotate(0)}

/* the press spreads from where the finger landed — softer and slower than
   the sibling's ink ripple */
.rip{position:absolute;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  pointer-events:none;background:radial-gradient(circle,rgba(168,72,28,.22),transparent 70%);
  animation:rip .9s var(--soft) forwards}
.card[aria-pressed="true"] .rip,.chip[aria-pressed="true"] .rip{
  background:radial-gradient(circle,rgba(var(--on-clay-rgb),.45),rgba(var(--on-clay-rgb),0) 70%)}
@keyframes rip{from{transform:scale(1);opacity:1}to{transform:scale(28);opacity:0}}

.dial{background:var(--paper);border:2px solid var(--line);border-radius:var(--r-l);padding:26px 22px 20px}
.dial__v{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(32px,9vw,42px);line-height:1.12;letter-spacing:-.02em;color:var(--clay);
  height:1.12em;margin-bottom:4px}
.dial__c{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:26px}
.roller{position:relative;overflow:hidden}
.roller .roll{display:block;white-space:nowrap}
.roller .roll--in{animation:rollIn .5s var(--spring) both}
.roller .roll--out{position:absolute;left:0;top:0;width:100%;animation:rollOut .38s var(--soft) both}
@keyframes rollIn{from{opacity:0;transform:translateY(calc(var(--dir,1) * .8em))}to{opacity:1;transform:translateY(0)}}
@keyframes rollOut{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(calc(var(--dir,1) * -.8em))}}

.slider{position:relative;height:54px;--p:.4;--tw:50px;touch-action:pan-y}
.slider__track{position:absolute;left:0;right:0;top:50%;height:8px;margin-top:-4px;
  border-radius:99px;background:var(--shell-2)}
.slider__fill{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--clay);
  width:calc(var(--tw)/2 + var(--p) * (100% - var(--tw)))}
.slider__ticks i{position:absolute;top:50%;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;
  background:var(--line-2);transition:background .3s,transform .4s var(--spring);
  left:calc(var(--tw)/2 + var(--t) * (100% - var(--tw)))}
.slider__ticks i.on{background:rgba(var(--on-clay-rgb),.8);transform:scale(1.7)}
.slider__thumb{position:absolute;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;
  background:var(--card);border:3px solid var(--clay);pointer-events:none;
  left:calc(var(--tw)/2 + var(--p) * (100% - var(--tw)));
  box-shadow:0 8px 20px -6px rgba(var(--sh),.45);
  transition:box-shadow .3s var(--soft),transform .4s var(--spring)}
.slider.is-drag .slider__thumb{transform:scale(1.14);box-shadow:0 0 0 14px rgba(168,72,28,.11)}
.slider .range{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:2;
  -webkit-appearance:none;appearance:none;background:transparent;cursor:grab}
.slider .range:active{cursor:grabbing}
.slider .range:focus{outline:none}
.slider .range::-webkit-slider-runnable-track{height:100%;background:transparent;border:none}
.slider .range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:50px;height:50px;
  border-radius:50%;background:transparent;border:none}
.slider .range::-moz-range-track{height:100%;background:transparent;border:none}
.slider .range::-moz-range-thumb{width:50px;height:50px;border-radius:50%;background:transparent;border:none}
.slider .range:focus-visible~.slider__thumb{box-shadow:0 0 0 4px var(--card),0 0 0 8px var(--clay)}
.ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11.5px;
  color:var(--ink-3);letter-spacing:.05em;margin-top:8px}

.counter{display:flex;align-items:center;justify-content:space-between;gap:14px;
  border:2px solid var(--line);background:var(--paper);border-radius:var(--r-l);padding:18px}
.cbtn{position:relative;overflow:hidden;width:66px;height:66px;flex:none;border-radius:50%;
  border:2px solid var(--line-2);background:var(--card);color:var(--clay);
  display:grid;place-items:center;cursor:pointer;
  transition:transform .4s var(--spring),background .25s,border-color .25s}
.cbtn svg{position:relative;z-index:1;width:24px;height:24px;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;fill:none}
.cbtn:active{transform:scale(.9)}
.cbtn[disabled]{opacity:.35;cursor:not-allowed}
.counter__mid{text-align:center;flex:1;min-width:0}
.counter__n{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(40px,12vw,52px);line-height:1.1;height:1.1em;letter-spacing:-.02em;color:var(--clay)}
.counter__l{font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);margin-top:8px}

.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  min-height:54px;padding:14px 19px;border-radius:999px;
  background:var(--paper);border:2px solid var(--line);color:var(--ink);
  font-size:16px;font-weight:500;letter-spacing:-.01em;cursor:pointer;
  transition:transform .4s var(--spring),background .25s var(--soft),border-color .25s var(--soft)}
.chip:active{transform:scale(.95)}
.chip[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:var(--on-clay);font-weight:600}
.chip__r{width:24px;height:24px;flex:none;border-radius:50%;display:none;place-items:center;
  background:var(--on-clay);color:var(--clay);font-family:var(--mono);font-size:12px;font-weight:700;
  line-height:1;position:relative;z-index:1}
.chip[aria-pressed="true"] .chip__r{display:grid;animation:popIn .5s var(--spring) both}
@keyframes popIn{from{transform:scale(0) rotate(-40deg)}to{transform:scale(1) rotate(0)}}
.tip{font-size:15.5px;line-height:1.6;color:var(--ink-3);margin-top:18px}

.field{margin-bottom:20px}
.field label{display:block;font-size:16px;font-weight:600;color:var(--ink-2);margin-bottom:9px}
.field .opt{font-weight:400;color:var(--ink-3)}
.field input,.field textarea{width:100%;padding:17px 18px;font-size:17px;line-height:1.45;
  background:var(--paper);border:2px solid var(--line);border-radius:var(--r-s);color:var(--ink);
  transition:border-color .25s,background .25s;-webkit-appearance:none;appearance:none}
.field textarea{min-height:112px;resize:vertical;font-family:var(--sans)}
.field input::placeholder,.field textarea::placeholder{color:var(--place)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--clay);background:var(--card)}
.field.err input,.field.err textarea{border-color:var(--bad);background:var(--bad-bg)}
.errmsg{display:none;font-size:15px;font-weight:500;color:var(--bad-ink);margin-top:8px}
.field.err .errmsg{display:block}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.promise{font-size:15px;line-height:1.6;color:var(--ink-3);margin:2px 0 22px}

.go{margin-top:24px}
.gorow{display:flex;align-items:center;gap:14px;margin-top:24px;flex-wrap:wrap}
.gorow .btn{flex:1;min-width:190px}

/* ══════════════════════════════════════════════════════════════
   THE NOTE — the reflect-back
   It doesn't dock and it doesn't open a sheet. It unfolds inside the
   card you just answered, tilted a degree off true, and it grows as
   you go. Same tree underneath as the Genius Bar page; completely
   different way of arriving.
   ══════════════════════════════════════════════════════════════ */
.note{overflow:hidden;height:0;transition:height .68s var(--spring)}
.note__pad{padding-top:22px}
.note__card{position:relative;background:linear-gradient(172deg,var(--shell) 0%,var(--card) 76%);
  border:1px solid var(--line-2);border-radius:var(--r);padding:22px 22px 24px;
  transform:rotate(-.7deg);box-shadow:0 20px 44px -34px rgba(var(--sh),1)}
.note__card::after{content:"";position:absolute;left:26px;top:-7px;width:13px;height:13px;
  border-radius:50%;background:var(--honey);border:2px solid var(--card)}
.note__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);margin-bottom:12px}
.note__h{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:20px;
  line-height:1.28;letter-spacing:-.015em;color:var(--ink);margin-bottom:10px;text-wrap:balance}
.note__b{font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.note__ask{margin-top:18px;padding:16px 18px;background:var(--card);border:2px dashed var(--line-2);
  border-radius:var(--r-s)}
.note__ask b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);font-weight:400;margin-bottom:9px}
.note__ask q{display:block;font-family:var(--display);font-optical-sizing:auto;font-style:italic;
  font-weight:600;font-size:18.5px;line-height:1.35;color:var(--ink);quotes:none}
.note__t{font-size:15px;line-height:1.6;color:var(--ink-3);margin-top:16px;padding-top:14px;
  border-top:1px dotted var(--line-2)}
.note__spec{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.note__spec span{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:6px 11px;line-height:1.2}
.note__spec span b{color:var(--clay);font-weight:700}
/* the two beats: it thinks, then it answers */
.thinking{display:inline-flex;gap:6px;align-items:center;height:1.28em}
.thinking i{width:7px;height:7px;border-radius:50%;background:var(--line-2);
  animation:blip 1.3s var(--soft) infinite}
.thinking i:nth-child(2){animation-delay:.18s}
.thinking i:nth-child(3){animation-delay:.36s}
@keyframes blip{0%,100%{opacity:.35;transform:translateY(0)}45%{opacity:1;transform:translateY(-4px)}}
.settle{animation:settle .7s var(--spring) both}
@keyframes settle{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- confirmation ---------- */
.done__seal{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;
  background:var(--clay);margin:0 auto 26px;position:relative;animation:sealIn .9s var(--spring) both}
@keyframes sealIn{from{opacity:0;transform:scale(.4) rotate(-25deg)}to{opacity:1;transform:none}}
.done__seal svg{width:34px;height:34px;stroke:var(--on-clay);stroke-width:2.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:40;
  animation:draw .8s var(--soft) .35s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.done__seal::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:2px solid var(--clay);opacity:0;animation:halo 2.4s var(--soft) .6s infinite}
@keyframes halo{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(1.32)}}
.done{text-align:center}
.done h2{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(36px,10vw,52px);line-height:1.04;letter-spacing:-.02em;margin-bottom:16px}
.done__l{font-size:18.5px;line-height:1.65;color:var(--ink-2);max-width:34ch;margin:0 auto 30px}

.ticket{position:relative;background:var(--card);border:2px solid var(--line-2);border-radius:var(--r-l);
  padding:26px 24px;text-align:left;margin-bottom:22px}
.ticket dl{display:flex;flex-direction:column;gap:16px}
.trow{display:flex;gap:16px;align-items:baseline}
.trow dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-3);width:58px;flex:none}
.trow dd{font-size:17px;font-weight:500;line-height:1.4}
.ticket__tear{height:2px;margin:22px -24px;
  background:repeating-linear-gradient(to right,var(--line-2) 0 8px,transparent 8px 16px)}
.ticket__q b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--clay);margin-bottom:10px}
.ticket__q q{display:block;font-family:var(--display);font-style:italic;font-weight:600;font-size:19px;
  line-height:1.35;quotes:none}

.calrow{display:flex;flex-direction:column;gap:11px;margin-bottom:22px}
.calopt{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:14px 18px;
  border:2px solid var(--line);border-radius:var(--r);background:var(--card);color:var(--ink);
  font-size:17px;font-weight:500;text-decoration:none;text-align:left;cursor:pointer;
  transition:transform .4s var(--spring),background .25s,border-color .25s}
.calopt:active{transform:scale(.98);background:var(--shell)}
.calopt__i{width:42px;height:42px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--wash)}
.calopt__i svg{width:21px;height:21px;stroke:var(--clay);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.calopt small{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-3);margin-top:4px;font-weight:400}
.calfold{overflow:hidden;height:0;transition:height .6s var(--spring)}

.retry{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:22px;padding:16px 18px;
  border:2px solid var(--honey);background:var(--warn-bg);border-radius:var(--r);text-align:left}
.retry p{font-size:15.5px;line-height:1.55;color:var(--ink-2);flex:1;min-width:190px}
.retry button{font-size:15.5px;font-weight:600;background:var(--card);border:2px solid var(--ink-2);
  color:var(--ink);border-radius:999px;padding:11px 20px;min-height:48px;cursor:pointer}

/* ---------- about + footer ---------- */
.portrait{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.portrait__m{width:64px;height:64px;flex:none;border-radius:22px;background:var(--clay);
  display:grid;place-items:center;font-family:var(--brand);font-weight:700;font-size:22px;
  color:var(--on-clay);letter-spacing:-.04em}
/* one inline group, not two grid items — and shifted a hair left so the
   trailing period doesn't drag the mark off centre */
.portrait__m>span{display:block;line-height:1;transform:translateX(-.03em)}
.portrait__m i{font-style:normal;color:var(--honey)}
.portrait__t{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);line-height:1.6}

.foot{background:var(--foot-bg);color:var(--foot-ink);border-radius:var(--arch) var(--arch) 0 0;
  margin-top:-26px;position:relative;z-index:1;
  box-shadow:0 -22px 46px -30px rgba(var(--sh),.75);
  padding:56px var(--pad) calc(44px + var(--safe-b))}
.foot__in{max-width:600px;margin:0 auto}
.foot .wordmark{font-size:26px;color:var(--on-clay);display:block;margin-bottom:14px}
.foot p{font-size:16px;line-height:1.7;color:var(--foot-ink-2);margin-bottom:16px}
.foot a{color:var(--honey);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.foot__legal{font-size:14px;line-height:1.75;color:var(--foot-ink-3);margin-top:26px;padding-top:22px;
  border-top:1px solid var(--foot-line)}
.foot__legal b{color:var(--foot-ink-2)}

.startover{background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--ink-3);
  text-decoration:underline;text-underline-offset:3px}
.flink{color:var(--clay);text-decoration:underline;text-underline-offset:3px;word-break:break-word}
.after{margin-top:30px;padding-top:26px;border-top:1px dotted var(--line-2);text-align:left}
.after__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--clay);margin-bottom:10px}
.after p{font-size:16.5px;line-height:1.6;color:var(--ink-3);margin-bottom:18px}
.fine{font-size:15px;line-height:1.7;color:var(--ink-3);margin-top:26px;text-align:left}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translate(-50%,18px);
  z-index:60;background:var(--foot-bg);color:var(--foot-ink);font-size:15.5px;padding:14px 22px;
  border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .4s var(--soft),transform .5s var(--spring);
  max-width:calc(100vw - 36px);text-align:center;box-shadow:0 18px 44px -16px rgba(var(--sh),.9)}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

/* ---------- focus ---------- */
:focus-visible{outline:3px solid var(--clay);outline-offset:3px;border-radius:8px}
h2[tabindex="-1"]:focus,h2[tabindex="-1"]:focus-visible{outline:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--clay);color:var(--on-clay);
  padding:16px 22px;border-radius:0 0 16px 0;font-weight:600}
.skip:focus{left:0}

/* ---------- wider screens: the same page, breathing more ---------- */
@media (min-width:700px){
  :root{--pad:40px;--arch:64px}
  .in{max-width:660px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .card{min-height:124px}
  .pts{gap:22px}
  .pt:nth-child(odd){margin-left:-18px}
  .pt:nth-child(even){margin-right:-18px}
  .rail{margin-left:-40px;margin-right:-40px;padding-left:40px;padding-right:40px}
  .hero{padding-top:calc(var(--safe-t) + 66px)}
}
@media (min-width:1040px){
  body{font-size:18px}
  .in{max-width:720px}
  .hero__title{font-size:96px}
  .work{padding:14px}
  .qc__inner{padding:2px 26px 30px}
  .qc__head{padding:24px 26px}
}
@media (max-width:359px){
  :root{--pad:18px}
  body{font-size:16px}
  .btn{font-size:16.5px;padding:16px 22px}
  .trow dt{width:52px}
}
@media (hover:hover) and (pointer:fine){
  .card:hover{background:var(--shell);border-color:var(--line-2)}
  .card[aria-pressed="true"]:hover{background:var(--clay-2);border-color:var(--clay-2)}
  .chip:hover{background:var(--shell);border-color:var(--line-2)}
  .chip[aria-pressed="true"]:hover{background:var(--clay-2);border-color:var(--clay-2)}
  .btn--go:hover:not([disabled]){background:var(--clay-2)}
  .btn--quiet:hover{background:var(--shell);border-color:var(--ink-3)}
  .cbtn:hover:not([disabled]){background:var(--shell);border-color:var(--clay)}
  .qc[data-state="done"] .qc__head:hover{background:var(--shell)}
  .calopt:hover{background:var(--shell);border-color:var(--line-2)}
  .tcard:hover{transform:translateY(-4px)}
  .retry button:hover{background:var(--shell)}
}

/* ---------- reduced motion ----------
   Everything decorative stops, including the fold — cards just appear open.
   Nothing on this page is animation-dependent, so it loses the movement and
   keeps every word. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .wash,.grain,.hero__arch,.done__seal::after,.thinking i{animation:none!important}
  .rise{opacity:1;transform:none}
  .hero__title span>i{transform:none}
  .done__seal svg{stroke-dashoffset:0}
  .note__card,.stack__front{transform:none}
  .hero::after,.band::after{display:none}
  .stack__back{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   MULTIPAGE — the parts that only exist because this is a site
   now rather than one long page.
   ═══════════════════════════════════════════════════════════════ */

/* ---------- crossing between pages ----------
   Real navigations, animated. The browser holds the old page, paints the new
   one, and cross-fades between them — so moving through the site feels like
   one continuous thing instead of four separate loads. Browsers without it
   just navigate, which is exactly what a navigation should do anyway. */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:vtOut .42s var(--soft) both }
::view-transition-new(root){ animation:vtIn .62s var(--spring) both }
@keyframes vtOut{ to{ opacity:0; transform:translateY(-16px) scale(.986) } }
@keyframes vtIn { from{ opacity:0; transform:translateY(30px) scale(.99) } }
/* the furniture stays put while the content changes underneath it */
.nav{ view-transition-name:nav }
.foot{ view-transition-name:foot }

/* ---------- the nav ----------
   A capsule that floats in the thumb zone on a phone and moves to the top
   corner on a desktop. It's the only fixed thing on the site. */
.nav{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);
  z-index:50;display:flex;align-items:center;gap:4px;padding:6px;
  background:var(--nav-bg);border:1px solid var(--line);border-radius:999px;
  box-shadow:0 18px 44px -22px rgba(var(--sh),.65);
  backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  max-width:calc(100vw - 24px)}
.nav a{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:46px;padding:0 15px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;
  transition:color .3s var(--soft),background .3s var(--soft)}
.nav a[aria-current="page"]{color:var(--on-clay);background:var(--clay)}
.nav a:active{transform:scale(.96)}
.nav__seat{font-family:var(--sans)}
.nav a[data-nav="rsvp"]:not([aria-current]){color:var(--clay)}
@media (max-width:400px){ .nav a{padding:0 12px;font-size:14.5px} }
@media (min-width:760px){
  .nav{left:auto;right:26px;top:22px;bottom:auto;transform:none}
  .nav a{min-height:44px;font-size:15.5px}
}

/* ---------- page heads ----------
   Every page opens with the same three-beat: chapter, title, lede. It's the
   rhythm that makes four separate documents read as one publication. */
.head{position:relative;padding:calc(var(--safe-t) + 96px) var(--pad) 64px;overflow:hidden}
.head__in{width:100%;max-width:600px;margin:0 auto;position:relative;z-index:1}
.chapter{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:26px;
  animation:fadeUp .8s var(--soft) both}
.chapter b{color:var(--clay);font-weight:400}
.chapter i{flex:1;height:1px;background:var(--line-2);font-style:normal}
.head__t{font-family:var(--display);font-optical-sizing:auto;font-weight:600;
  font-size:clamp(42px,12vw,72px);line-height:1;letter-spacing:-.025em;text-wrap:balance}
.head__t em{font-style:italic;color:var(--clay)}
.head__t span{display:block;overflow:hidden;padding-bottom:.05em}
.head__t span>i{display:block;font-style:normal;animation:liftIn 1.05s var(--spring) both}
.head__t span:nth-child(2)>i{animation-delay:.09s}
.head__l{font-size:18.5px;line-height:1.7;color:var(--ink-2);max-width:38ch;margin-top:24px;
  animation:fadeUp .9s var(--soft) .3s both}

/* the numeral sitting behind the page head */
.ghost{position:absolute;right:-.08em;top:calc(var(--safe-t) + 30px);
  font-family:var(--display);font-weight:600;font-size:min(46vw,300px);line-height:.72;
  color:var(--clay);opacity:.07;pointer-events:none;user-select:none;z-index:0;
  animation:ghostIn 1.6s var(--soft) both}
@keyframes ghostIn{from{opacity:0;transform:translateY(24px)}to{opacity:.07;transform:none}}

/* ---------- the marquee ----------
   Real questions sliding past. It runs at a lazy constant and picks up
   whatever speed you're scrolling at, then eases back down. */
.strip:empty{display:none}
.strip{position:relative;padding:26px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);overflow:hidden;
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.strip__t{display:flex;width:max-content;will-change:transform}
.strip__t span{font-family:var(--display);font-optical-sizing:auto;font-style:italic;
  font-weight:500;font-size:20px;line-height:1.2;color:var(--ink-3);white-space:nowrap;
  padding-right:52px;position:relative}
.strip__t span::after{content:"";position:absolute;right:22px;top:50%;width:7px;height:7px;
  margin-top:-3.5px;border-radius:50%;background:var(--honey)}

/* ---------- the draggable question stack ---------- */
.stack{touch-action:pan-y}
.stack__front{cursor:grab;user-select:none;-webkit-user-select:none;
  transition:transform .55s var(--spring),box-shadow .4s var(--soft)}
.stack.is-held .stack__front{cursor:grabbing;transition:none}
.stack__front.is-gone{transition:transform .5s var(--soft),opacity .5s var(--soft)}
.stack__hint{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
.stack__more{background:none;border:1px solid var(--line-2);border-radius:999px;
  padding:9px 15px;min-height:40px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-2);cursor:pointer;
  transition:transform .4s var(--spring),background .25s}
.stack__more:active{transform:scale(.94)}
.stack__dots{display:flex;gap:5px;justify-content:center;margin-top:14px}
.stack__dots i{width:6px;height:6px;border-radius:50%;background:var(--line-2);
  transition:background .4s var(--spring),transform .4s var(--spring)}
.stack__dots i.on{background:var(--clay);transform:scale(1.35)}

/* ---------- big link cards, for moving between pages ---------- */
.doors{display:grid;gap:16px;margin-top:38px}
.door{position:relative;display:block;overflow:hidden;text-decoration:none;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:28px 26px 26px;color:var(--ink);
  transition:transform .5s var(--spring),border-color .3s var(--soft),box-shadow .4s var(--soft)}
.door:active{transform:scale(.985)}
.door__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--clay);margin-bottom:14px}
.door__t{font-family:var(--display);font-optical-sizing:auto;font-weight:600;font-size:27px;
  line-height:1.15;letter-spacing:-.02em;margin-bottom:10px}
.door p{font-size:16px;line-height:1.6;color:var(--ink-3);max-width:32ch}
.door__go{position:absolute;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--wash);display:grid;place-items:center;
  transition:background .3s var(--soft),transform .5s var(--spring)}
.door__go svg{width:19px;height:19px;stroke:var(--clay);fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.door--go{background:var(--clay);border-color:var(--clay);color:var(--on-clay)}
.door--go .door__k{color:rgba(var(--on-clay-rgb),.75)}
.door--go p{color:rgba(var(--on-clay-rgb),.86)}
.door--go .door__go{background:rgba(var(--on-clay-rgb),.16)}
.door--go .door__go svg{stroke:var(--on-clay)}
@media (min-width:700px){ .doors{grid-template-columns:1fr 1fr} }
@media (hover:hover) and (pointer:fine){
  .door:hover{transform:translateY(-4px);border-color:var(--line-2);
    box-shadow:0 26px 50px -34px rgba(var(--sh),.9)}
  .door:hover .door__go{transform:translateX(3px)}
  .nav a:hover:not([aria-current]){background:var(--shell)}
  .stack__more:hover{background:var(--shell)}
}

/* every page ends clear of the floating nav */
.foot{padding-bottom:calc(96px + var(--safe-b))}
@media (min-width:760px){ .foot{padding-bottom:calc(48px + var(--safe-b))} }

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .ghost{animation:none;opacity:.07}
  .strip__t{transform:none!important}
  .head__t span>i{transform:none}
}

/* ---------- aurora: four washes instead of two, all slow ---------- */
.wash-3{width:100vw;height:100vw;max-width:640px;max-height:640px;left:-18vw;top:118vh;
  background:radial-gradient(circle at 50% 50%,rgba(85,112,90,.16),transparent 66%);
  animation:drift3 64s var(--soft) infinite alternate}
.wash-4{width:96vw;height:96vw;max-width:600px;max-height:600px;right:-22vw;top:8vh;
  background:radial-gradient(circle at 50% 50%,rgba(168,72,28,.14),transparent 64%);
  animation:drift4 52s var(--soft) infinite alternate}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(14vw,-12vh,0) scale(1.2)}}
@keyframes drift4{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-10vw,14vh,0) scale(.94)}}
@media (prefers-reduced-motion:reduce){ .wash-3,.wash-4{animation:none!important} }

/* ---------- clearance for the floating nav ----------
   The nav sits over the page, which is what you want while scrolling — but
   nothing should come to rest underneath it. */
:root{ --navh:78px }
.hero{ padding-bottom:calc(62px + var(--navh) + var(--safe-b)) }
.band--last{ padding-bottom:calc(var(--gap) + var(--navh) + var(--safe-b)) }
@media (min-width:760px){
  :root{ --navh:0px }
  .hero{ padding-top:calc(var(--safe-t) + 112px) }
  .head{ padding-top:calc(var(--safe-t) + 128px) }
}

/* ---------- the dwell ----------
   A panel pins the instant its bottom edge arrives — which is also the first
   moment you can read the bottom of it. Without a pause, the next panel starts
   covering that content immediately and the hero's date and button flash past.
   A transparent spacer after each panel holds it still and fully readable for
   a beat before the next one comes up. You never see the spacer: the pinned
   panel is covering the screen the whole time it's passing.
   Panels shorter than the screen are stretched to fill it, so the same pause
   doesn't leave a strip of background hanging under them. */
.hero,.head,.band{min-height:100svh}
.hold{position:relative;height:clamp(170px,32vh,300px);pointer-events:none}
.strip{background:var(--paper);position:relative;z-index:1}
@media (max-height:620px){ .hero,.head,.band{min-height:0} .hold{height:150px} }

/* ═══════════════════════════════════════════════════════════════
   FALLBACK METRICS
   Measured: at hero size Georgia sets "No Dumb Questions" 21% wider
   than Fraunces (826px vs 684px). Without this, every first visit
   reflows the headline the moment the webfont lands. These faces are
   the local fallback, scaled to Fraunces' and Figtree's metrics, so
   the swap is invisible.
   ═══════════════════════════════════════════════════════════════ */
@font-face{
  font-family:'Fraunces sub';
  src:local('Georgia'),local('Times New Roman'),local('Times');
  font-weight:100 900;font-style:normal;
  size-adjust:95.2%;   /* tuned by measuring, not by arithmetic — see README */
  ascent-override:98%;
  descent-override:24%;
  line-gap-override:0%;
}
@font-face{
  font-family:'Figtree sub';
  src:local('Helvetica Neue'),local('Helvetica'),local('Arial');
  font-weight:100 900;font-style:normal;
  size-adjust:101.1%;  /* tuned by measuring, not by arithmetic — see README */
  ascent-override:97%;
  descent-override:24%;
  line-gap-override:0%;
}

/* ═══════════════════════════════════════════════════════════════
   VARIABLE-FONT MORPH
   Fraunces carries SOFT and WONK axes we were already downloading and
   not using. They're wired to how far a panel has receded: as one
   sinks behind the next, its headings soften and the wonky letterforms
   settle down. Neither axis moves the metrics, so nothing reflows.
   Quantised in the script so the glyphs re-raster about ten times per
   transition rather than sixty times a second.
   ═══════════════════════════════════════════════════════════════ */
.hero__title,.head__t,.big,.pt__t,.door__t,.tcard__t,.stack__q,
.pull q,.note__h,.done h2,.qc__q,.dial__v,.counter__n,.ticket__q q{
  font-variation-settings:'SOFT' var(--ax-soft,0),'WONK' var(--ax-wonk,0);
}
@media (prefers-reduced-motion:reduce){
  .hero__title,.head__t,.big,.pt__t,.door__t,.tcard__t,.stack__q,
  .pull q,.note__h,.done h2,.qc__q,.dial__v,.counter__n,.ticket__q q{
    font-variation-settings:normal;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   Chamber audience. Somebody will print the confirmation and put it
   on a fridge, and somebody else will print the whole page to read
   in a truck. Both should work.
   ═══════════════════════════════════════════════════════════════ */
@media print{
  .nav,.atmos,.grain,.hold,.strip,.ghost,.stack__hint,.stack__dots,
  .skip,.toast,#calFold,#calBtn,#shareBtn,#cardBtn,.startover{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  .hero,.head,.band,.foot{position:static!important;top:auto!important;
    min-height:0!important;box-shadow:none!important;background:#fff!important;
    color:#000!important;padding:18pt 0!important;border-radius:0!important;
    page-break-inside:avoid}
  .hero::after,.band::after{display:none!important}
  .foot{border-top:1pt solid #999}
  .foot a,.foot p,.foot__legal{color:#000!important}
  .card,.chip,.pt,.door,.ticket,.note__card,.work{border:1pt solid #999!important;
    background:#fff!important;box-shadow:none!important}
  .ticket{page-break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .big,.head__t,.done h2{font-size:22pt!important;line-height:1.15!important}
  .sub,p{font-size:11pt!important;line-height:1.45!important}
}