/* PY: shared design system (interior pages).
   The landing page (/) carries its own critical CSS inline; keep tokens and
   shared components here in sync with it. */

@font-face{font-family:"Satoshi";font-weight:400;font-display:swap;src:url("/assets/fonts/satoshi-400.woff2") format("woff2")}
@font-face{font-family:"Satoshi";font-weight:500;font-display:swap;src:url("/assets/fonts/satoshi-500.woff2") format("woff2")}
@font-face{font-family:"Fragment Mono";font-weight:400;font-display:swap;src:url("/assets/fonts/fragment-mono-latin.woff2") format("woff2")}

:root{
  --bg:#08090A;--surface:#0E0F12;
  --border:rgba(255,255,255,0.08);--border-2:rgba(255,255,255,0.14);
  --text:#F5F6F7;--dim:#8A8F98;--mute:#757A82;--amber:#E3A72C;
  --sans:"Satoshi",-apple-system,"Segoe UI",system-ui,sans-serif;
  --mono:"Fragment Mono","SFMono-Regular",Menlo,monospace;
  --maxw:1120px;--ease:cubic-bezier(.16,1,.3,1)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--dim);font-family:var(--sans);font-size:1rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
/* A large monitor should get the same page at its own scale, not the same page
   stranded small in a corner. Every size on the site is capped in rem, so moving
   the root grows type, spacing and drawings together; the column widens with it. The
   biggest step also asks for height, because the landing page's pinned panels get one
   screen each and cannot scroll inside themselves. Kept identical in index.html. */
@media(min-width:1700px){:root{--maxw:1240px}html{font-size:18px}}
@media(min-width:2200px){:root{--maxw:1400px}}
@media(min-width:2200px) and (min-height:900px){html{font-size:20px}}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:var(--amber);color:#0a0a0a}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:2px}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--amber);color:#0a0a0a;
  font-family:var(--mono);font-size:.8rem;padding:.7rem 1rem;border-radius:0 0 4px 0}
.skip-link:focus{left:0}

/* scroll progress rail */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--amber);
  transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none}
@supports (animation-timeline: scroll()){
  .progress{animation:prog linear both;animation-timeline:scroll(root block)}
}
@keyframes prog{to{transform:scaleX(1)}}
/* phones: the scroll-timeline bar remaps when Safari's URL bar resizes the viewport,
   and the fixed mix-blend grain is a scroll-repaint cost. Drop both. */
@media(max-width:900px){.progress{display:none}.grain{display:none}}

/* ambient grain */
.grain{position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.035;mix-blend-mode:overlay;
  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='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(8,9,10,0.7);
  backdrop-filter:blur(12px) saturate(1.4);-webkit-backdrop-filter:blur(12px) saturate(1.4);border-bottom:1px solid var(--border)}
.nav-in{max-width:var(--maxw);margin-inline:auto;height:60px;padding-inline:clamp(1.1rem,4vw,2rem);
  display:flex;align-items:center;justify-content:space-between}
.brand{display:inline-flex;align-items:center}.brand img{width:30px;height:23px}
.nav-links{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem)}
.nav-links a{font-size:.92rem;font-weight:400;color:var(--dim);transition:color .18s}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.4em;font-family:var(--sans);font-size:.92rem;
  font-weight:500;line-height:1;border-radius:3px;cursor:pointer;
  transition:transform .18s var(--ease),background .18s,border-color .18s,color .18s}
.btn-primary{background:var(--amber);color:#0a0a0a;padding:.6rem 1rem;border:1px solid var(--amber)}
.btn-primary:hover{background:#f0b53c;transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,0.02);color:var(--text);padding:.58rem 1rem;border:1px solid var(--border-2)}
.btn-ghost:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.btn-amber,.nav-links a.btn-amber{background:transparent;color:var(--amber);padding:.6rem 1rem;border:1px solid var(--amber)}
.btn-amber:hover,.nav-links a.btn-amber:hover{background:var(--amber);color:#0a0a0a;transform:translateY(-1px)}

/* layout shells */
.wrap{position:relative;z-index:1;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2rem)}
.sec{padding-block:clamp(3.5rem,8vw,6rem);position:relative}
.sec-tight{padding-block:clamp(2.4rem,5vw,3.6rem)}
.sec-head{max-width:36rem}
.sec-head.center{margin-inline:auto;text-align:center}
.eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
h2{font-family:var(--sans);font-weight:500;color:var(--text);font-size:clamp(1.8rem,3.8vw,2.7rem);
  letter-spacing:-.018em;line-height:1.1}
.lead{color:var(--dim);margin-top:.95rem;font-size:1.06rem;line-height:1.55}

/* interior page hero */
.page-hero{position:relative;padding-top:clamp(4.5rem,12vh,8rem);padding-bottom:clamp(2.4rem,6vw,4rem)}
.page-hero>*:not(.field){position:relative;z-index:1}
/* The hero holds the whole screen, as it does on the landing page: nothing below
   it is visible until you ask for it. svh, not vh, so a phone's collapsing URL bar
   cannot leave the hero taller than the screen it is meant to fill. The nav is 60px
   and sits above it. Contact is deliberately not tall: it is a page you use, and
   the address should be reachable without a scroll. */
.page-hero.tall{min-height:calc(100svh - 60px);display:flex;flex-direction:column;justify-content:center;
  padding-top:clamp(2rem,6vh,4rem);padding-bottom:clamp(3.5rem,9vh,6rem)}
/* the per-page dot field (assets/motion.js), masked so the reading column stays clean */
.field{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;height:100%;
  z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 58%,#000 78%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 20%,#000 66%,transparent 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent 0%,transparent 58%,#000 78%,#000 92%,transparent 100%),
                     linear-gradient(180deg,transparent 0%,#000 20%,#000 66%,transparent 100%);
          mask-composite:intersect}
/* phones: the reading column runs the full width, so hold the field to the top right
   corner and lighten it, otherwise the dots sit under the headline */
@media(max-width:899px){
  .field{opacity:.5;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 74%,#000 90%,transparent 100%),
                       linear-gradient(180deg,#000 0%,#000 30%,transparent 62%);
            mask-image:linear-gradient(90deg,transparent 0%,transparent 46%,#000 74%,#000 90%,transparent 100%),
                       linear-gradient(180deg,#000 0%,#000 30%,transparent 62%)}
}
.page-hero h1{font-family:var(--sans);font-weight:500;color:var(--dim);
  font-size:clamp(2.3rem,5vw,3.7rem);line-height:1.06;letter-spacing:-.02em;max-width:20ch}
.page-hero h1 em{font-style:normal;color:var(--text)}
/* every heading lands on an amber full stop. Listed under .page-hero h1 em too, which
   would otherwise outrank a bare `h1 .dot` and paint the period white again. */
h1 .dot,h2 .dot,h3 .dot,.page-hero h1 em .dot{color:var(--amber)}
.page-hero h1 em .ul{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.055em;text-underline-offset:.18em;text-decoration-skip-ink:none}
.page-hero .sub{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--dim);line-height:1.55;
  max-width:38rem;margin-top:clamp(1.3rem,2.6vw,1.7rem)}
.page-hero .cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.7rem,3.6vw,2.2rem)}
.page-hero .cta .btn{font-size:.98rem;padding:.82rem 1.4rem}
.page-hero .meta{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--amber);margin-bottom:1.1rem}

/* statement */
.statement{padding-block:clamp(2.5rem,6vw,4.5rem)}
.statement p{font-family:var(--sans);font-weight:500;font-size:clamp(1.45rem,3.2vw,2.3rem);
  line-height:1.28;letter-spacing:-.02em;color:var(--dim);max-width:28ch}
.statement b{font-weight:500;color:var(--text)}
.statement.center{text-align:center}.statement.center p{margin-inline:auto}

/* figure columns (grid, static) */
.figrow{margin-top:clamp(1.8rem,4vw,2.6rem);border-top:1px solid var(--border);padding-top:clamp(1.8rem,4vw,2.6rem);
  display:grid;grid-template-columns:repeat(var(--cols,4),1fr);position:relative}
.figrow::before{content:"";position:absolute;top:-1px;left:0;height:1px;width:100%;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--amber) 50%,transparent 100%);opacity:.4}
.figcol{display:flex;flex-direction:column;padding:0 clamp(1.4rem,2.6vw,2.2rem);border-left:1px solid var(--border)}
.figcol:first-child{border-left:0;padding-left:0}
.figcol .fig{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.figcol .art{height:clamp(96px,11vw,132px);display:flex;align-items:center;justify-content:center;color:var(--text);
  margin:clamp(.7rem,1.5vw,1rem) 0}
.figcol .art svg{width:auto;height:100%;max-width:100%;overflow:visible}
.figcol h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.08rem,1.55vw,1.25rem);color:var(--text);letter-spacing:-.01em;
  line-height:1.35}
@media(min-width:561px){.figcol h3{min-height:2.7em}}  /* hold the baseline when one label wraps */
.figcol p{color:var(--dim);font-size:.96rem;line-height:1.55;margin-top:.55rem;max-width:34ch}
@media(max-width:900px){.figrow{grid-template-columns:1fr 1fr;row-gap:2.2rem}
  .figcol:nth-child(odd){border-left:0;padding-left:0}}
@media(max-width:560px){.figrow{grid-template-columns:1fr}
  .figcol{border-left:0;padding:0}}

/* feature board (static card, e.g. a Title) */
.card{border:1px solid var(--border);border-radius:10px;margin-top:clamp(1.8rem,4vw,2.6rem);
  display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);grid-template-rows:auto auto auto auto;
  align-content:center;column-gap:clamp(1.6rem,4vw,3.6rem);
  padding:clamp(1.8rem,4vw,3.2rem) clamp(1.8rem,5vw,4rem);position:relative;overflow:hidden}
.card .art{grid-column:1;grid-row:1/5;align-self:center;justify-self:center;
  height:clamp(150px,20vw,210px);display:flex;align-items:center;justify-content:center;color:var(--text)}
.card .art svg{width:auto;height:100%;max-width:100%;overflow:visible}
.card .fig{grid-column:2;grid-row:1;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.card h3{grid-column:2;grid-row:2;font-family:var(--sans);font-weight:500;font-size:clamp(1.5rem,2.8vw,2.15rem);color:var(--text);letter-spacing:-.02em;margin:.7rem 0}
.card .desc{grid-column:2;grid-row:3;color:var(--dim);font-size:clamp(1rem,1.4vw,1.12rem);line-height:1.6;max-width:42ch}
.card .cardfoot{grid-column:2;grid-row:4;margin-top:1.5rem;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap}
.card .go{font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;text-transform:uppercase;color:var(--amber);
  display:inline-flex;gap:.4em;align-items:center;transition:gap .2s}
.card .go:hover{gap:.75em}
.card .tag{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
@media(max-width:720px){
  .card{grid-template-columns:1fr;grid-template-rows:auto auto auto auto auto;
    justify-items:start;text-align:left;padding:clamp(1.6rem,6vw,2.4rem);row-gap:.4rem}
  .card .art{grid-column:1;grid-row:1;height:clamp(120px,28vw,160px);justify-self:start;margin-left:-.4rem}
  .card .fig{grid-column:1;grid-row:2}
  .card h3{grid-column:1;grid-row:3}
  .card .desc{grid-column:1;grid-row:4}
  .card .cardfoot{grid-column:1;grid-row:5}
}

/* numbered step rows */
.steps{margin-top:clamp(1.8rem,4vw,2.6rem);border-top:1px solid var(--border)}
.step{display:grid;grid-template-columns:4.5rem minmax(0,1fr);gap:clamp(1rem,3vw,2.5rem);
  padding-block:clamp(1.5rem,3vw,2.2rem);border-bottom:1px solid var(--border)}
.steps-3 .step{grid-template-columns:4.5rem minmax(0,1fr) minmax(0,17rem)}
.step .n{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;color:var(--amber);padding-top:.35rem}
.step h3{font-family:var(--sans);font-weight:500;font-size:clamp(1.15rem,1.8vw,1.4rem);color:var(--text);letter-spacing:-.01em}
.step p{color:var(--dim);font-size:1rem;line-height:1.6;margin-top:.5rem;max-width:58ch}
.step .give{grid-column:3;border-left:1px solid var(--border);padding-left:clamp(1rem,2vw,1.6rem);align-self:start}
.step .give span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.step .give p{font-size:.95rem;margin-top:.5rem;color:var(--dim)}
@media(max-width:900px){
  .step,.steps-3 .step{grid-template-columns:4.5rem minmax(0,1fr)}
  .step .give{grid-column:2;border-left:0;padding-left:0;margin-top:1rem;
    border-top:1px solid var(--border);padding-top:1rem}
}
@media(max-width:560px){
  .step,.steps-3 .step{grid-template-columns:1fr;gap:.4rem}
  .step .give{grid-column:1}
}

/* argument on the left, the ledger that proves it on the right */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,6vw,4.5rem);align-items:start}
.split .sec-head{max-width:34rem}
.ledger{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,2rem);padding-top:.4rem}
.ledger-col{border-top:1px solid var(--border);padding-top:1rem}
.ledger-col.fixed{border-top-color:var(--amber)}
.ledger-h{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);margin-bottom:.9rem;line-height:1.5}
.ledger-col.fixed .ledger-h{color:var(--amber)}
.ledger ul{list-style:none}
.ledger li{color:var(--dim);font-size:.94rem;line-height:1.45;padding:.42rem 0}
.ledger-col.fixed li{color:var(--text)}
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:2rem}
  .ledger{padding-top:0}
}
@media(max-width:420px){.ledger{grid-template-columns:1fr;gap:1.6rem}}
/* The rows arrive on a timer, in order, once the ledger comes into view. They used to be
   scrubbed by scroll position under a timed fade, and the two clocks disagreeing is what made
   them snap: a row would still be sliding when its fade had already finished. */
html.js .ledger .ledger-h,html.js .ledger li{opacity:0;transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.js .ledger.in .ledger-h,html.js .ledger.in li{opacity:1;transform:none}
html.js .ledger.in li:nth-child(1){transition-delay:.10s}
html.js .ledger.in li:nth-child(2){transition-delay:.19s}
html.js .ledger.in li:nth-child(3){transition-delay:.28s}
html.js .ledger.in li:nth-child(4){transition-delay:.37s}
html.js .ledger.in .ledger-col.fixed .ledger-h{transition-delay:.05s}

/* CTA band */
.band{border:1px solid var(--border);border-radius:10px;padding:clamp(2rem,5vw,3.4rem) clamp(1.6rem,5vw,3.4rem);
  display:flex;justify-content:space-between;align-items:center;gap:1.6rem;flex-wrap:wrap;position:relative;overflow:hidden}
.band h2{font-size:clamp(1.5rem,3vw,2.2rem);max-width:22ch}
.band .lead{max-width:44ch}
.band .cta{display:flex;gap:.8rem;flex-wrap:wrap}
.band .cta .btn{font-size:.98rem;padding:.82rem 1.4rem}


/* legal prose */
.legal-updated{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-top:1.1rem}
.legal-prose{max-width:44rem}
.legal-block{padding-block:clamp(1.4rem,3vw,2rem);border-top:1px solid var(--border)}
.legal-block:first-child{border-top:0}
.legal-block h2{font-size:clamp(1.15rem,1.8vw,1.4rem);letter-spacing:-.01em}
.legal-block p{color:var(--dim);margin-top:.6rem;line-height:1.65;max-width:60ch}
.legal-block a{color:var(--text);border-bottom:1px solid var(--border-2)}
.legal-block a:hover{color:var(--amber);border-color:var(--amber)}

/* touch targets: on phones the nav, footer and brand links are only 19px to 24px
   tall as text. Grow the hit area to 44px without moving anything visually. */
@media(pointer:coarse),(max-width:900px){
  .brand{min-width:44px;min-height:44px}
  .nav-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px}
  .nav-links a.btn{padding-block:.78rem}
  .btn{padding-block:.84rem}
  .foot-col li{margin-top:0}
  .foot-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .card .go{min-height:44px}
  .foot-id .foot-mail{min-height:44px}
  .legal-block a{position:relative}
  .legal-block a::after{content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .skip-link{padding:.85rem 1rem}
}

/* footer */
.foot{border-top:1px solid var(--border);margin-top:clamp(2rem,6vw,4rem)}
.foot-in{max-width:var(--maxw);margin-inline:auto;padding:clamp(2rem,5vw,3rem) clamp(1.1rem,4vw,2rem) 2rem}
.foot-top{display:flex;justify-content:space-between;gap:2.5rem;flex-wrap:wrap}
.foot-top .brand img{width:34px;height:26px}
.foot-id{max-width:22rem}
.foot-id .foot-tag{margin-top:1rem;color:var(--text);font-weight:500;font-size:1.02rem;letter-spacing:-.01em}
.foot-id .foot-sub{margin-top:.4rem;color:var(--dim);font-size:.92rem;line-height:1.5}
.foot-id .foot-mail{display:inline-flex;align-items:center;margin-top:.9rem;font-family:var(--mono);font-size:.78rem;
  color:var(--amber);border-bottom:1px solid transparent;transition:border-color .18s}
.foot-id .foot-mail:hover{border-color:var(--amber)}
.foot-cols{display:flex;gap:clamp(2.5rem,7vw,5.5rem);flex-wrap:wrap}
.foot-col p{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:.85rem}
.foot-col ul{list-style:none}
.foot-col li{margin-top:.45rem}
.foot-col a{font-size:.92rem;color:var(--dim);transition:color .18s}
.foot-col a:hover{color:var(--text)}
.foot-legal{margin-top:clamp(2rem,5vw,2.8rem);padding-top:1.4rem;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;gap:.8rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.72rem;color:var(--mute);line-height:1.7}

/* Reveal on enter. Deliberately time-based rather than scroll-linked: with a view()
   timeline the fade tracks scroll position, so text resting near the fold can sit at
   30% opacity for as long as the reader leaves it there. A transition always resolves. */
.reveal{opacity:1;transform:none}                    /* no-JS: visible */
html.js .reveal{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease),transform .75s var(--ease)}
html.js .reveal.in{opacity:1;transform:none}

/* Scroll-scrubbed items. Only hidden once site.js has confirmed it is driving
   them (html.scrub); without that class they are plain, visible content.
   Opacity resolves on entry and stays resolved, like .reveal. Only the transform
   follows the scroll, so no item can ever be stranded half-legible. */
html.scrub [data-scrub-item]{opacity:0;transition:opacity .6s var(--ease);will-change:opacity,transform}
html.scrub [data-scrub-item].lit{opacity:1}

/* The hero's entrance. Every page opens the same way: the lines of the hero rise
   into place one after another, so a page arrives rather than appearing. Pure CSS,
   so it runs before any script does, and it resolves on a timer rather than on a
   scroll position: it always finishes, whatever the reader does. */
.h-anim{opacity:0;animation:heroIn .9s var(--ease) forwards}
.meta.h-anim{animation-delay:0s}
h1.h-anim{animation-delay:.06s}
.sub.h-anim{animation-delay:.16s}
.cta.h-anim{animation-delay:.26s}
.addr.h-anim{animation-delay:.36s}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Hero elements that trail the scroll. Written to the standalone `translate`
   property, not to `transform`: the entrance above animates transform and its
   forwards fill outranks an inline style, so a parallax written to transform would
   be frozen at translateY(0) the moment the entrance finished. The two properties
   compose instead of fighting. */
[data-parallax]{will-change:translate}

/* ---- The opening deck. The interior pages open the way the landing page does:
   the hero and the phrase are two panels stacked in a pin, so the first stretch
   of scroll does not move the page, it drives it. The hero fades and drifts, the
   phrase types itself, and then the deck ends and the page below it scrolls like
   any other page. Only the opening is a deck: everything past the phrase is
   ordinary flow, reading at reading speed.

   The .live class is added by site.js, and only where a pin can work: a wide
   screen, motion allowed, JS running. Without it the deck is nothing at all: the
   hero and the phrase are two plain sections, one after the other, which is what
   a phone, reduced motion, and a JS-less browser get. */
/* 516vh, not a round number: it is the length at which one unit of panel weight buys exactly
   as much scroll here as it does on the landing page (its deck is 1208vh over 10.4 units of
   weight; this one is 3.9: the hero, the phrase at 1.9, and the section behind it). The hero,
   the phrase, the typing, the hold and the cut all then last the same number of pixels on
   every page. */
.deck.live{height:var(--deck,516vh)}
.deck.live .deck-pin{position:sticky;top:0;height:100svh;overflow:hidden}
.deck.live .panel{position:absolute;inset:0;padding:60px 0 20px;display:flex;flex-direction:column;
  justify-content:center;opacity:0;pointer-events:none;will-change:opacity,transform}
.deck.live .panel.on{pointer-events:auto}
.deck.live .panel>.wrap{width:100%}
.deck.live #pnl-hero{padding:0}
/* No padding: the hero's copy is centered in the pin, which lands the headline at
   the same height as the landing page's. These pages carry an eyebrow line the
   landing page does not, and centering the block with it would push the headline
   below where the landing sets it. */
.deck.live .page-hero.tall{min-height:0;height:100%;padding-top:0;padding-bottom:0}
.deck.live .reveal{opacity:1!important;transform:none!important}
/* the phrase, typed by the scroll. The characters exist only while the deck is
   live: without JS there is nothing here but the sentence. */
.deck.live .statement .w{white-space:nowrap}
.deck.live .statement .c{opacity:0;color:var(--dim)}
.deck.live .statement .c.hl{color:var(--text)}
.deck.live .statement .c.dot{color:var(--amber)}   /* the full stop the phrase lands on */
.deck.live .statement .c.caret::after{content:"";position:absolute;right:-.06em;top:.08em;bottom:.08em;width:2px;
  background:var(--amber);animation:caretblink 1.05s steps(1) infinite}
.deck.live .statement .c.caret{position:relative}
@keyframes caretblink{50%{opacity:0}}

/* Alignment. The pages used to run on a single left rule from the nav to the
   footer; these are the beats that break it. The statement addresses the room,
   so it is centered. The eyebrow steps out beside its heading, on the other
   side of a rule, so a section head reads like a caption on a plate rather
   than one more left-aligned block. Long prose is never centered: it stays on
   the left rule, where it is read fastest. */
.queue.center{text-align:center}
@media(min-width:900px){
  .sec-head.hang{display:grid;grid-template-columns:11rem 1fr;column-gap:1.8rem;max-width:46rem}
  .sec-head.hang .eyebrow{grid-column:1;grid-row:1/3;margin:0;padding:.45rem 1.1rem 0 0;
    text-align:right;border-right:1px solid var(--border);align-self:stretch}
  .sec-head.hang h2,.sec-head.hang .lead{grid-column:2}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,html.js .reveal,.h-anim{opacity:1!important;transform:none!important;animation:none!important;transition:none!important}
  html.scrub [data-scrub-item]{opacity:1;transform:none}
  html.js .ledger .ledger-h,html.js .ledger li{opacity:1!important;transform:none!important;transition:none!important}
  .progress{display:none}
  .figrow::before{display:none}
}