/* BOUW. site.css - tokens, type, pencil-dot kit, components, pin, devices.
   Rule: hex colours live only in the token blocks below. */

/* 1. Fonts (self-hosted, latin subset; OFL 1.1) -- */
@font-face{font-family:"Hanken Grotesk";src:url(/fonts/hanken-var.woff2) format("woff2");font-weight:100 900;font-display:swap;ascent-override:100%;descent-override:30.3%;line-gap-override:0%}
@font-face{font-family:"Hanken fallback";src:local("Arial");size-adjust:102%;ascent-override:98%;descent-override:29.7%;line-gap-override:0%}
@font-face{font-family:Poppins;src:url(/fonts/poppins-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(/fonts/poppins-800.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/jost-var.woff2) format("woff2");font-weight:100 900;font-display:swap}

/* 2. Tokens ------------------------------------------------------------ */
:root{
  /* fixed in both modes: device metal, shadows, glass */
  --metal-1:#2b332e;--metal-2:#0a0e0c;--metal-3:#8d958f;--hi:rgb(255 255 255/.14);
  --sh-amb:0 50px 90px -30px rgb(0 0 0/.55);--sh-tight:0 2px 4px rgb(0 0 0/.35);
  --glass:rgb(255 255 255/.06);

  --f-text:"Hanken Grotesk","Hanken fallback",system-ui,sans-serif;
  --f-disp:Poppins,"Century Gothic",Futura,sans-serif;
  --f-geo:Jost,"Century Gothic",Futura,sans-serif;

  --sp-1:.25rem;--sp-2:.5rem;--sp-3:1rem;--sp-4:1.5rem;--sp-5:2.5rem;--sp-6:4rem;--sp-7:6rem;
  --sp-section:clamp(5rem,3rem + 6vw,9rem);--gutter:clamp(1rem,.4rem + 3vw,4rem);
  --r-s:6px;--r-m:14px;--r-l:28px;--r-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-io:cubic-bezier(.65,0,.35,1);

  --t--1:clamp(.83rem,.8rem + .15vw,.9rem);--t-0:clamp(1rem,.95rem + .25vw,1.125rem);
  --t-1:clamp(1.25rem,1.1rem + .6vw,1.5rem);--t-2:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);
  --t-3:clamp(2rem,1.4rem + 2.6vw,3.4rem);--t-display:clamp(3rem,1rem + 8vw,9rem);
  --t-ghost:clamp(6rem,2rem + 18vw,22rem);

  --grain-opacity:.12; /* toggled .08/.12/.16 */
  --paper:url(/img/dots-paper-512.png);--tile:url(/img/dots-tile-512.png);
}
:root,[data-mode="dark"]{
  color-scheme:dark;
  --bg:#0f1612;--ink:#f3efe6;--ink-2:#8a978d;--accent:#7fc29b;--warm:#e8956b;--surface:#17211b;
  --line:rgb(243 239 230/.12);--on-accent:#0f1612;--ghost:#272d28; /* ghost = 1.3:1 on bg */
  --mist:rgb(127 194 155/.16);
}
[data-mode="cream"]{
  color-scheme:light;
  --bg:#f3efe6;--ink:#0f1612;--ink-2:#5b6359;--accent:#1f4d36;--warm:#a4492a;--surface:#e9e3d6;
  --line:rgb(15 22 18/.1);--on-accent:#f3efe6;--ghost:#d6d3cb;
  --mist:rgb(31 77 54/.12);
}

/* 3. Base -------------------------------------------------------------- */
*,::before,::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{margin:0;min-height:100svh;background:var(--bg);color:var(--ink);font:400 var(--t-0)/1.6 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
[data-mode]{background-color:var(--bg);color:var(--ink)}
h1,h2,h3,p,figure,blockquote{margin:0}
h1,h2,h3{font-weight:inherit;text-wrap:balance;line-height:1}
p{text-wrap:pretty}
img,svg,video,canvas{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* sitewide pencil grain: ink-coloured paper dots, one fixed layer, drifts in steps.
   soft-light eats most of the alpha, so the toggle value is scaled x3 */
body::after{content:"";position:fixed;inset:-25%;z-index:90;pointer-events:none;background:var(--ink);
  -webkit-mask:var(--paper) 0 0/320px;mask:var(--paper) 0 0/320px;
  opacity:calc(var(--grain-opacity)*3);mix-blend-mode:soft-light;animation:grain-drift 2.4s steps(4) infinite}
@keyframes grain-drift{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,4%)}}

/* 4. Accessibility helpers -------------------------------------------- */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--sp-3);top:var(--sp-3);z-index:100;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600;text-decoration:none;transform:translateY(-200%);transition:transform .3s var(--ease-out)}
.skip-link:focus{transform:none}

/* 5. Type ----------------------------------------------------------- */
.pop{font-family:var(--f-disp);font-weight:800;letter-spacing:-.045em}
.geo{font-family:var(--f-geo);font-weight:300;letter-spacing:.2em;text-transform:uppercase}
.acc{color:var(--accent)}
.display{font-size:var(--t-display);line-height:.9}
/* overset: big type allowed to push past its column; parent must clip */
.overset{font-size:var(--t-display);line-height:.92;margin-inline-start:-.05em}
.ghost{position:absolute;z-index:0;margin:0;color:var(--ghost);font:300 var(--t-ghost)/.8 var(--f-geo);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;pointer-events:none;user-select:none}
.has-ghost{position:relative;overflow:clip;isolation:isolate}
.has-ghost>:where(:not([aria-hidden="true"])){position:relative;z-index:1}
.label{display:flex;align-items:center;gap:.8em;font:400 .78rem/1.2 var(--f-geo);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.label::before{content:"";width:.45em;height:.45em;border-radius:50%;background:var(--accent)}
.lede{font-size:var(--t-1);line-height:1.45;max-width:34ch}
.muted{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* the mark: full stop settles on load */
.mark{font-family:var(--f-disp);font-weight:800;letter-spacing:-.04em;line-height:.9;white-space:nowrap}
.mark__dot{display:inline-block;color:var(--accent);transform-origin:50% 90%;animation:dot-settle 1.5s var(--ease-out) .35s both}
@keyframes dot-settle{0%{opacity:0;transform:translateY(-1.4em) scale(.5)}45%{opacity:1;transform:translateY(.06em) scale(1.25,.75)}65%{transform:translateY(-.12em) scale(.92,1.08)}82%{transform:translateY(0) scale(1.03,.97)}100%{transform:none}}

/* 6. Links and buttons -------------------------------------------------- */
.link{color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em;transition:text-decoration-thickness .2s,text-underline-offset .3s var(--ease-out)}
.link:hover{text-decoration-thickness:2px;text-underline-offset:.3em}
.btn{--bh:3.25rem;display:inline-flex;align-items:center;gap:.9em;min-height:var(--bh);padding:0 .4rem 0 1.4rem;border:1px solid transparent;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:600 var(--t-0)/1 var(--f-text);text-decoration:none;cursor:pointer;transition:transform .5s var(--ease-out),background-color .3s}
.btn:active{transform:scale(.97)}
.btn__ic{display:grid;place-items:center;width:calc(var(--bh) - .8rem);aspect-ratio:1;border-radius:50%;background:var(--on-accent);color:var(--accent);overflow:hidden}
.btn__ic::before{content:"\2192";font-weight:500;transition:transform .5s var(--ease-out)}
.btn:hover .btn__ic::before{transform:translateX(.22em)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.btn--ghost .btn__ic{background:var(--surface);color:var(--ink)}

/* 7. Pencil-dot kit: colour comes from background, dots from the mask --- */
.dots{--m:url(/img/dots-disc.webp);aspect-ratio:1;background:var(--accent);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.dots--ring{--m:url(/img/dots-ring.webp)}
.dots--half{--m:url(/img/dots-half.webp);aspect-ratio:2}
.dots--quarter{--m:url(/img/dots-quarter.webp)} /* centre top-left, dense on the arc */
.dots--arch{--m:url(/img/dots-arch.webp);aspect-ratio:3/4}
.dots--australia{--m:url(/img/dots-australia.webp);aspect-ratio:1000/936}
.dots--ink{background:var(--ink)}
.dots--warm{background:var(--warm)}
/* hard-edge dotted shapes: dots tile intersected with a geometric shape */
.tx-shape{--ts:256px;--shape:linear-gradient(black,black);aspect-ratio:1;background:var(--ink);
  -webkit-mask:var(--tile) 0 0/var(--ts),var(--shape);-webkit-mask-composite:source-in;
  mask:var(--tile) 0 0/var(--ts),var(--shape);mask-composite:intersect}
.tx-circle{--shape:radial-gradient(closest-side,black 99.4%,transparent)}
.tx-clover{-webkit-mask-composite:source-in,source-over,source-over,source-over,source-over,source-over;mask-composite:intersect,add,add,add,add,add;--shape:radial-gradient(29% 29% at 30% 30%,black 99%,transparent),radial-gradient(29% 29% at 70% 30%,black 99%,transparent),radial-gradient(29% 29% at 30% 70%,black 99%,transparent),radial-gradient(29% 29% at 70% 70%,black 99%,transparent),radial-gradient(30% 30%,black 99%,transparent)}
.tx-paper{background:var(--ink);-webkit-mask:var(--paper) 0 0/320px;mask:var(--paper) 0 0/320px}
/* cream grid paper: 24px minor, 120px major */
.tx-grid{background-image:
  repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 120px),
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 120px),
  repeating-linear-gradient(0deg,var(--line) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px 24px);background-position:-1px -1px}
.spin{animation:spin 80s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.lean{transform:translate(calc(var(--nx,0)*1.2rem),calc(var(--ny,0)*1rem)) rotate(calc(var(--nx,0)*-4deg));transition:transform 1.2s var(--ease-out)}

/* 8. Mist: drifting forest glow, guide lines lit near the pointer, click ring */
.mist{--mx:60%;--my:40%;position:relative;isolation:isolate;overflow:clip}
.mist__fx{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mist__fx::before,.mist__fx::after{content:"";position:absolute;inset:-25%;background:radial-gradient(38% 42% at 70% 30%,var(--mist),transparent 70%),radial-gradient(30% 34% at 20% 75%,var(--mist),transparent 70%);animation:drift 70s var(--ease-io) infinite alternate}
.mist__fx::after{background:radial-gradient(26% 30% at 45% 50%,var(--mist),transparent 70%);animation-duration:90s;animation-direction:alternate-reverse}
@keyframes drift{33%{transform:translate(6%,-4%) scale(1.08)}66%{transform:translate(-5%,5%) scale(.95)}to{transform:translate(3%,3%) rotate(8deg)}}
.mist__fx i{position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--line) 0 1px,transparent 1px calc(100% / 12));opacity:.55}
.mist__fx i::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,var(--accent) 0 1px,transparent 1px calc(100% / 12)),repeating-linear-gradient(color-mix(in srgb,var(--accent) 40%,transparent) 0 1px,transparent 1px calc(100vw / 12));
  -webkit-mask:radial-gradient(circle 20rem at var(--mx) var(--my),black,transparent);mask:radial-gradient(circle 20rem at var(--mx) var(--my),black,transparent)}
.mist::after{content:"";position:absolute;z-index:-1;left:var(--cx,50%);top:var(--cy,50%);width:60rem;aspect-ratio:1;margin:-30rem 0 0 -30rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 2rem var(--mist);opacity:0;transform:scale(0);pointer-events:none}
.mist.is-ring::after{animation:ring 700ms linear}
@keyframes ring{from{opacity:1;transform:scale(0)}35%{opacity:.85;transform:scale(.62)}to{opacity:0;transform:scale(1)}}

/* 9. Velaris: CSS-only backdrop, dotted glow, vignette to bg ----------- */
.velaris{position:relative;isolation:isolate;overflow:clip}
.velaris::before{content:"";position:absolute;inset:-20%;z-index:-2;background:radial-gradient(34% 30% at 30% 35%,var(--accent),transparent 70%),radial-gradient(30% 26% at 72% 68%,var(--warm),transparent 70%);opacity:.22;
  -webkit-mask:var(--tile) 0 0/256px,linear-gradient(rgb(0 0 0/.45) 0 0);mask:var(--tile) 0 0/256px,linear-gradient(rgb(0 0 0/.45) 0 0);mask-composite:add;
  animation:drift 60s var(--ease-io) infinite alternate}
.velaris::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 75% 70% at 50% 50%,transparent 40%,var(--bg) 100%)}

/* 10. Riffle: isometric tray of hairline cards. JS sets data-d on each card
   (on, f1-f3 in front, b1-b3 behind, rest beyond) and --k = distance for the stagger.
   Pose = lean back by --a in the iso frame: matrix maps the card's up vector onto
   sin(a)*back + cos(a)*up while its bottom edge stays put. */
.riffle{--intensity:1;position:relative;aspect-ratio:5/4;outline-offset:6px;border-radius:var(--r-m)}
.riffle svg{width:100%;height:100%;overflow:visible}
.riffle .tray polygon{fill:none;stroke:var(--ink);stroke-opacity:.6;stroke-width:1;vector-effect:non-scaling-stroke}
.riffle .tray--front polygon{fill:var(--bg)}
.riffle .tray polygon:first-child{fill:var(--surface);fill-opacity:.5}
.riffle .card{--t:0deg;--a:calc(55deg + var(--t)*var(--intensity));pointer-events:none;transform-box:view-box;transform-origin:0 0;
  transform:translateY(calc(var(--up,0)*-1px)) matrix(calc(1 + .5*sin(var(--a))),calc((.5 - .25*sin(var(--a)) - .5*cos(var(--a)))/.866),calc(-.866*sin(var(--a))),calc(.5*sin(var(--a)) + cos(var(--a))),0,0);
  transition:transform 700ms var(--ease-out) calc(var(--k,0)*45ms)}
.riffle .card rect{fill:var(--bg);stroke:var(--ink);stroke-width:1.15;vector-effect:non-scaling-stroke;transition:stroke .3s}
.riffle .card__rule{stroke:var(--ink);stroke-opacity:.18;stroke-width:1;vector-effect:non-scaling-stroke}
.riffle .card__rule line:first-child{stroke:var(--accent);stroke-opacity:.7}
.riffle .card__t{font:600 13px var(--f-text);fill:var(--ink)}
.riffle .card__n{font:300 12px var(--f-geo);letter-spacing:.12em;fill:var(--ink-2)}
.riffle .card[data-d="on"]{--a:0deg;--up:15}
.riffle .card[data-d="on"] rect{stroke:var(--accent)}
.riffle .card[data-d="f1"]{--t:-61deg}.riffle .card[data-d="f2"]{--t:-41deg}.riffle .card[data-d="f3"]{--t:-21deg}
.riffle .card[data-d="b1"]{--t:13deg}.riffle .card[data-d="b2"]{--t:8deg}.riffle .card[data-d="b3"]{--t:4deg}
.riffle .hit{fill:transparent;cursor:pointer}
.riffle__cap{display:grid;gap:var(--sp-1);min-height:4.5em;max-width:32ch}
.riffle__cap b{font:800 var(--t-2)/1 var(--f-disp);letter-spacing:-.04em}
.riffle__cap span{color:var(--ink-2);font-size:var(--t--1)}

/* 11. Tilt: pointer sets --rx/--ry (deg) and --gx/--gy (glare) ------- */
.tilts{perspective:1100px}
.tilt{position:relative;isolation:isolate;transform:rotateX(calc(var(--rx,0)*1deg)) rotateY(calc(var(--ry,0)*1deg));transition:transform .6s var(--ease-out)}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle 16rem at var(--gx,50%) var(--gy,0%),var(--glass),transparent 70%);opacity:0;transition:opacity .4s;mix-blend-mode:screen}
.tilt.is-tilting{transition-duration:.12s}
.tilt.is-tilting::after{opacity:1}

/* 12. Stacked parallax: sticky panels; the one underneath shrinks and dims */
.stack{--n:4;position:relative;view-timeline:--stack block}
.stack__panel{position:sticky;top:calc(var(--sp-3) + var(--i)*1.1rem);height:calc(100svh - 2*var(--sp-3) - 3.3rem);margin-bottom:var(--sp-3);border-radius:var(--r-l);overflow:clip;isolation:isolate;transform-origin:50% 0;box-shadow:inset 0 0 0 1px var(--line),var(--sh-amb)}
.stack__panel::after{content:"";position:absolute;inset:0;z-index:9;background:rgb(0 0 0);opacity:0;pointer-events:none}
@supports (animation-timeline:view()){
  .stack__panel:not(:last-child),.stack__panel:not(:last-child)::after{animation:cover linear both;animation-timeline:--stack;animation-range:contain calc(var(--i)/(var(--n) - 1)*100%) contain calc((var(--i) + 1)/(var(--n) - 1)*100%)}
  .stack__panel:not(:last-child)::after{animation-name:dim}
}
@keyframes cover{to{transform:scale(.94)}}
@keyframes dim{to{opacity:.5}}
@supports not (animation-timeline:view()){
  .stack__panel,.stack__panel::after{transition:transform .8s var(--ease-out),opacity .8s}
  .stack__panel[data-covered]{transform:scale(.94)}
  .stack__panel[data-covered]::after{opacity:.5}
}

/* 13. Halftone wordmark: canvas over real text; JS adds .is-drawn ------ */
.wordmark{position:relative;overflow:clip}
.wordmark__text{font:800 15.2vw/.74 var(--f-disp);letter-spacing:-.04em;white-space:nowrap;color:var(--accent);margin:0 0 -.04em -.04em}
.wordmark canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.wordmark.is-drawn .wordmark__text{color:transparent}
@media (max-width:43.75rem){.wordmark__text{white-space:normal;font-size:29vw;line-height:.82}}

/* 14. Entrance -------------------------------------------------------- */
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  .reveal{transition:opacity 1s var(--ease-out),transform 1.1s var(--ease-out);transition-delay:calc(var(--d,0)*90ms)}
  .reveal:not(.is-in){opacity:0;transform:translateY(2rem)}
}

/* 15. Pinned scene: sticky stage, scroll-driven, native scroll. Four states (.s1-.s4), each
   settled around 20/45/70/95% of the range; --o1..3 fade a state out, --i1..3 fade the next in (3% gap, only the device shows). A pin with
   --n:3 simply ends on .s3 (its last child). The last ~13% is a dwell so the sticky releases by scrolling. */
.pin{--n:4;--o1:contain 24% contain 29%;--i1:contain 32% contain 37%;--o2:contain 49% contain 54%;--i2:contain 57% contain 62%;--o3:contain 74% contain 79%;--i3:contain 82% contain 87%;position:relative;height:calc(var(--n)*80svh + 100svh);view-timeline:--pin block}
.pin__stage{position:sticky;top:0;height:100svh;display:grid;place-items:center;overflow:clip}
.pin__step{position:absolute;left:0;width:1px;height:80svh;top:calc(var(--i)*80svh);pointer-events:none}
.xfade{display:grid}
.ui{grid-area:1/1;opacity:0}
.s1{opacity:1}
@supports (animation-timeline:view()){
  .pin .ui{animation:ui-in linear both,ui-out linear both;animation-timeline:--pin,--pin}
  .pin .s1{animation:ui-out linear both;animation-timeline:--pin;animation-range:var(--o1)}
  .pin .s2{animation-range:var(--i1),var(--o2)}
  .pin .s3{animation-range:var(--i2),var(--o3)}
  .pin .s3:last-child,.pin .s4{animation:ui-in linear both;animation-timeline:--pin;animation-range:var(--i2)}
  .pin .s4{animation-range:var(--i3)}
  .pin .rise{animation:rise linear both;animation-timeline:--pin;animation-range:entry 0% contain 15%}
  .pin .bit{animation:ui-in linear both;animation-timeline:--pin;animation-range:contain calc(58% + var(--i)*3%) contain calc(62% + var(--i)*3%)}
}
@keyframes ui-in{from{opacity:0;transform:translateY(6%) scale(.97)}to{opacity:1;transform:none}}
@keyframes ui-out{to{opacity:0;transform:translateY(-6%) scale(.97)}}
@keyframes rise{from{opacity:0;transform:translateY(14svh) scale(.94)}}
@supports not (animation-timeline:view()){
  .pin .ui,.pin .bit{transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--i,0)*90ms)}
  .pin[data-s] .ui{opacity:0;transform:translateY(4%) scale(.98)}
  .pin[data-s="1"] .s1,.pin[data-s="2"] .s2,.pin[data-s="3"] .s3,.pin[data-s="4"] .s4{opacity:1;transform:none}
  .pin:not([data-s="3"]) .bit{opacity:0;transform:translateY(30%)}
}

/* 16. Devices: pure CSS, inner UI sized in cqi ------------------------ */
.device{position:relative;flex:none}
.screen{position:relative;display:grid;overflow:hidden;container-type:inline-size;background:var(--bg);color:var(--ink)}
.screen::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:linear-gradient(118deg,var(--glass) 0 36%,transparent 36.3%);mix-blend-mode:screen}
.phone{width:var(--w,18rem);aspect-ratio:9/19.5;padding:calc(var(--w,18rem)*.034);border-radius:14%/6.5%;isolation:isolate;
  background:linear-gradient(150deg,var(--metal-3),var(--metal-1) 14%,var(--metal-2) 55%,var(--metal-1) 92%,var(--metal-3));
  box-shadow:inset 0 0 0 1px var(--hi),inset 0 0 0 5px var(--metal-2),var(--sh-tight),var(--sh-amb)}
.phone .screen{height:100%;border-radius:11.5%/5.3%}
.phone::after{content:"";position:absolute;z-index:6;top:4.6%;left:50%;width:29%;height:3.1%;transform:translateX(-50%);border-radius:var(--r-pill);background:var(--metal-2);box-shadow:inset 0 0 0 1px var(--hi)}
.phone::before{content:"";position:absolute;z-index:-1;inset:17% -1.3% auto;height:34%;background:
  linear-gradient(var(--metal-1) 0 0) 0 0/6px 11% no-repeat,linear-gradient(var(--metal-1) 0 0) 0 24%/6px 22% no-repeat,
  linear-gradient(var(--metal-1) 0 0) 0 57%/6px 22% no-repeat,linear-gradient(var(--metal-1) 0 0) 100% 30%/6px 32% no-repeat}
.laptop{width:var(--w,44rem)}
.laptop__lid{position:relative;padding:2.4% 2.4% 3.2%;border-radius:2.6%/4.2%;border-bottom-left-radius:0;border-bottom-right-radius:0;background:linear-gradient(var(--metal-1),var(--metal-2) 30%);box-shadow:inset 0 0 0 1px var(--hi),var(--sh-amb)}
.laptop__lid::before{content:"";position:absolute;top:1%;left:50%;width:.6%;aspect-ratio:1;border-radius:50%;background:var(--metal-3);opacity:.5}
.laptop .screen{aspect-ratio:16/10;border-radius:.5%}
.laptop__base{position:relative;width:114%;margin-left:-7%;aspect-ratio:100/2.6;clip-path:polygon(0 0,100% 0,97.5% 100%,2.5% 100%);background:linear-gradient(var(--metal-3),var(--metal-1) 40%,var(--metal-2))}
.laptop__base::before{content:"";position:absolute;top:0;left:43%;width:14%;height:40%;border-radius:0 0 8px 8px;background:var(--metal-2);opacity:.6}
.laptop::after{content:"";position:absolute;z-index:-1;left:-6%;right:-6%;bottom:-3%;height:7%;background:radial-gradient(closest-side,rgb(0 0 0/.7),transparent)}
.chrome{display:flex;align-items:center;gap:1.2cqi;padding:1.1cqi 1.6cqi;border-bottom:1px solid var(--line);background:var(--surface)}
.chrome i{width:1cqi;aspect-ratio:1;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 1px var(--line)}
.chrome span{flex:1;max-width:36%;margin-inline:auto;padding:.5cqi 2cqi;border-radius:var(--r-pill);background:var(--bg);font-size:1.25cqi;text-align:center;color:var(--ink-2)}

/* 17. Marquee --------------------------------------------------------- */
.marquee{overflow:clip}
.marquee__track{display:flex;width:max-content;animation:marquee 36s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* 18. Site shell ------------------------------------------------------ */
.wrap{max-width:96rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sp-section)}
section[data-mode="cream"]{position:relative}
section[data-mode="cream"]:not(.velaris)::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--ink);-webkit-mask:var(--paper) 0 0/320px;mask:var(--paper) 0 0/320px;opacity:calc(var(--grain-opacity)*1.4);mix-blend-mode:multiply}
.site-head{position:sticky;top:0;z-index:80;background:color-mix(in srgb,var(--bg) 85%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid var(--line)}
.site-head__in{display:flex;align-items:center;gap:var(--sp-4);min-height:4.25rem}
.site-head .mark{margin-right:auto;font-size:1.7rem;color:var(--ink);text-decoration:none}
.site-nav{display:flex;align-items:center;gap:var(--sp-4)}
.site-nav ul{display:flex;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.site-nav a:not(.btn){color:var(--ink-2);font-weight:500;font-size:var(--t--1);text-decoration:none;padding-block:.5rem}
.site-nav a:not(.btn):hover,.site-nav a[aria-current]{color:var(--ink)}
.site-nav a[aria-current]{box-shadow:0 2px var(--accent)}
.btn--sm{--bh:2.6rem;font-size:var(--t--1)}
.site-head__toggle{display:none;width:2.75rem;aspect-ratio:1;border:1px solid var(--line);border-radius:50%;background:transparent;cursor:pointer;place-items:center}
.site-head__bars,.site-head__bars::before{display:block;width:1.1rem;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease-out)}
.site-head__bars{position:relative;transform:translateY(-.22rem)}
.site-head__bars::before{content:"";position:absolute;top:.44rem}
.site-head__toggle[aria-expanded="true"] .site-head__bars{transform:rotate(45deg)}
.site-head__toggle[aria-expanded="true"] .site-head__bars::before{top:0;transform:rotate(-90deg)}
@media (max-width:56.25rem){
  .site-head__in{flex-wrap:wrap;padding-block:.6rem}
  .site-nav{flex:1 0 100%;flex-direction:column;align-items:stretch;gap:var(--sp-3);padding-block:var(--sp-3)}
  .site-nav ul{flex-direction:column;gap:0}
  .site-nav li a:not(.btn){display:block;padding-block:.8rem;border-top:1px solid var(--line);font-size:var(--t-0)}
}
@media (max-width:56.25rem) and (scripting:enabled){
  .site-head__in{flex-wrap:nowrap;padding-block:0}
  .site-head__toggle{display:grid}
  .site-nav{position:absolute;top:100%;left:0;right:0;z-index:1;padding:var(--sp-2) var(--gutter) var(--sp-4);background:var(--bg);border-bottom:1px solid var(--line);visibility:hidden;opacity:0;transform:translateY(-.5rem);transition:opacity .25s,transform .35s var(--ease-out),visibility 0s .35s}
  .site-nav.is-open{visibility:visible;opacity:1;transform:none;transition-delay:0s}
}
.site-foot{padding:var(--sp-section) var(--gutter) 0;border-top:1px solid var(--line)}
.site-foot__top{display:grid;grid-template-columns:1.4fr repeat(2,1fr);gap:var(--sp-5);padding-bottom:var(--sp-6)}
.site-foot__top h2{font-size:var(--t-2);line-height:1.05;max-width:16ch}
.site-foot__top h2 .acc{white-space:nowrap}
.site-foot ul{display:grid;gap:var(--sp-2);margin:var(--sp-3) 0 0;padding:0;list-style:none}
.site-foot__note{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-2) var(--sp-4);padding-block:var(--sp-3);border-top:1px solid var(--line);font-size:var(--t--1);color:var(--ink-2)}
.site-foot__note .geo{font-size:.72rem;letter-spacing:.2em}
@media (max-width:43.75rem){.site-foot__top{grid-template-columns:1fr 1fr}.site-foot__top>:first-child{grid-column:1/-1}}

/* 19. Badge, price, card, seat bar ------------------------------------ */
.badge{display:inline-flex;align-items:center;gap:.6em;padding:.6em 1.1em;border-radius:var(--r-pill);box-shadow:inset 0 0 0 1px var(--line);font:400 .72rem/1 var(--f-geo);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.badge--on{color:var(--accent);box-shadow:inset 0 0 0 1px currentColor}
.price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3em .6em;margin:0}
.price__n{font:200 var(--t-3)/1 var(--f-geo);letter-spacing:.04em;font-variant-numeric:lining-nums tabular-nums}
.price__u{font:400 .78rem/1.3 var(--f-geo);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
:is(article,div,li).card{display:grid;align-content:start;gap:var(--sp-3);padding:clamp(1.5rem,1rem + 2vw,2.5rem);border-radius:var(--r-l);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
:is(article,div,li).card--quiet{background:transparent;color:var(--ink-2);border:1px dashed var(--line)}
.seatbar{display:flex;flex-wrap:wrap;gap:.45rem;margin:0;padding:0;list-style:none}
.seatbar i{width:.8rem;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.seatbar i.on{background:var(--accent);box-shadow:none}
.seatbar--5 i{width:1.3rem}

/* 20. Waitlist form ---------------------------------------------------- */
.wl{display:grid;gap:var(--sp-3);max-width:28rem}
.wl__field{display:grid;gap:var(--sp-1)}
.wl__field:has(input[type="checkbox"]){grid-template-columns:auto 1fr;align-items:start;gap:var(--sp-2) var(--sp-3)}
.wl label{font:400 .78rem/1.3 var(--f-geo);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.wl__field:has(input[type="checkbox"]) label{font:400 var(--t--1)/1.4 var(--f-text);letter-spacing:0;text-transform:none;color:var(--ink)}
.wl input:not([type="checkbox"]){width:100%;min-height:3.25rem;padding:0 1rem;border:0;border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:400 1rem/1 var(--f-text);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}
.wl input[type="checkbox"]{width:1.25rem;height:1.25rem;margin:.1rem 0 0;accent-color:var(--accent)}
.wl input:focus-visible{outline:2px solid var(--accent);outline-offset:2px;box-shadow:inset 0 0 0 1px var(--accent)}
.wl input:user-invalid,.wl input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--warm)}
.wl button[type="submit"]{justify-self:start}
.wl__ok,.wl__err{max-width:28rem;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-s);font-weight:500}
.wl__ok{background:var(--mist);box-shadow:inset 3px 0 0 var(--accent)}
.wl__err{background:color-mix(in srgb,var(--warm) 14%,transparent);box-shadow:inset 3px 0 0 var(--warm)}
[hidden]{display:none!important}

/* 21. Prose (legal pages) --------------------------------------------- */
.prose{max-width:65ch;margin-inline:auto;padding-block:var(--sp-6)}
.prose>*+*{margin-top:var(--sp-3)}
.prose h1{font:800 var(--t-3)/1 var(--f-disp);letter-spacing:-.045em}
.prose h2{margin-top:var(--sp-5);font:800 var(--t-2)/1.05 var(--f-disp);letter-spacing:-.04em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li+li{margin-top:var(--sp-1)}
.prose a{text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.22em}

/* 22. Pages: what two or more pages share. Page-only drawings stay in each page's <style>. */
.cv{content-visibility:auto;contain-intrinsic-size:auto 800px}
.sh{position:absolute;z-index:0;pointer-events:none}
.fine{font-size:var(--t--1);color:var(--ink-2)}
/* pin stage: numbered caption (.stage__copy, one .ui per state) beside a device rig */
.stage{display:grid;grid-template-columns:minmax(14rem,22rem) 1fr;align-items:center;gap:var(--sp-5);width:100%;max-width:92rem;padding-inline:var(--gutter)}
.stage__copy p{font:800 var(--t-2)/1.05 var(--f-disp);letter-spacing:-.04em;max-width:12ch}
.stage__copy em{display:block;margin-bottom:var(--sp-3);font:300 var(--t-3)/1 var(--f-geo);letter-spacing:.12em;color:var(--accent)}
.rig{position:relative;display:grid;place-items:center;isolation:isolate;padding-block:var(--sp-5)}
.rig__ring{position:absolute;z-index:-1;width:min(96%,50rem);opacity:.7}
.rig .laptop{--w:min(46rem,52vw)}
@media (max-width:56rem){
  .stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:var(--sp-3);height:100%;padding-block:var(--sp-5) var(--sp-3);text-align:center}
  .stage__copy p{margin-inline:auto;font-size:var(--t-1)}
  .stage__copy em{margin-bottom:var(--sp-2);font-size:var(--t-1)}
  .rig{padding:0}
}
/* app-screen bits drawn in cqi (phone and laptop mini-UIs) */
.av{display:grid;place-items:center;width:9cqi;aspect-ratio:1;border-radius:50%;background:var(--accent);color:var(--on-accent);font-size:3.4cqi;font-weight:700}
.row{display:flex;justify-content:space-between;align-items:center}
.shots i,.hop i{aspect-ratio:1;border-radius:2.4cqi;background:var(--surface);box-shadow:inset 0 0 0 .3cqi var(--line);position:relative;overflow:clip}
.shots i::after,.hop i::after{content:"";position:absolute;inset:12%;background:var(--accent);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
/* home + specimen */
.riffle-wrap{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(14rem,1fr);align-items:center;gap:var(--sp-5);max-width:84rem}
.riffle-wrap .riffle{max-height:80svh;justify-self:center;width:min(100%,calc(80svh*1.25))}
.stack__panel{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:var(--sp-5);padding:clamp(1.5rem,1rem + 4vw,5rem)}
.hero__q .dots{transform:rotate(180deg)}
@media (max-width:56rem){
  .riffle-wrap{grid-template-columns:1fr}
  .stack__panel{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
}

/* 23. Reduced motion: no pin, no stack motion, final state, decoration still */
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation:none!important;transition:none!important}
  .pin{height:auto}
  .pin__stage{position:relative;height:auto;min-height:100svh;padding-block:var(--sp-section)}
  .pin .ui{opacity:0}
  .pin .ui:last-child,.pin .bit{opacity:1;transform:none}
  .lean,.tilt,.stack__panel{transform:none!important}
  .stack__panel{position:relative;top:auto;height:auto;min-height:80svh}
  .stack__panel::after,.mist::after{opacity:0!important}
}

/* services track */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4);align-items:stretch}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.proof .num{display:block;font:800 var(--t-display)/.9 var(--f-geo);color:var(--accent)}
.proof .muted{margin-top:var(--sp-2)}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding-block:var(--sp-3);font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--sp-3);color:var(--ink-2)}
.wl--start{grid-template-columns:1fr 1fr;max-width:44rem;gap:var(--sp-3) var(--sp-4)}
.wl--start>:is(.wl__field--wide,button,.cf-turnstile,.sr-only,[type=hidden]){grid-column:1/-1}
.wl select,.wl textarea{width:100%;padding:.9rem 1rem;border:0;border-radius:var(--r-s);background:var(--surface);color:var(--ink);font:400 1rem/1.4 var(--f-text);box-shadow:inset 0 0 0 1px var(--line)}
.wl select{min-height:3.25rem}.wl textarea{resize:vertical}
.wl select:focus-visible,.wl textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wl__route{margin:0;font-size:var(--t--1);color:var(--warm)}
.site-foot__top{grid-template-columns:1.4fr repeat(3,1fr)}
@media (max-width:45rem){.tiers,.proof,.wl--start{grid-template-columns:1fr}.site-foot__top{grid-template-columns:1fr 1fr}}

/* dictionary entry */
.dict{max-width:40rem;padding:var(--sp-4) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dict__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4em 1em;margin:0}
.dict__word{font:800 var(--t-3)/1 var(--f-disp);letter-spacing:-.04em}
.dict__ipa{font:300 var(--t-0)/1 var(--f-geo);color:var(--ink-2)}
.dict__pos{font:400 .78rem/1.2 var(--f-geo);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.dict__senses{list-style:none;padding:0;margin:var(--sp-3) 0 0}
.dict__senses li+li{margin-top:var(--sp-2)}
.dict__n{display:inline-block;min-width:1.5em;font:700 .8em/1 var(--f-geo);color:var(--accent)}
.dict__sense{margin:var(--sp-3) 0 0}
.dict__etym{margin:var(--sp-3) 0 0;font-size:var(--t--1);color:var(--ink-2)}
.dict i{font-style:italic}

/* 24. Blog: article (article.post) and index list (.blog-list) ------------
   Root rules say article.post: the marketing-os mock already uses a div.post.
   Figures are inline SVG or HTML, every fill and stroke from a token (src/blog/brief.md section 10).
   Motion: figures take .reveal (opacity only here); the list moves only on hover devices. */
article.post{max-width:65ch;margin-inline:auto;padding-block:clamp(3rem,2rem + 4vw,6rem) var(--sp-section);overflow-wrap:break-word}
article.post [id]{scroll-margin-top:6rem}
article.post a:not([class]){color:inherit;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:1px;text-underline-offset:.22em}
article.post sup{line-height:0}
article.post .reveal:not(.is-in){transform:none}
.post__head{display:grid;gap:var(--sp-3);justify-items:start}
.post__head h1{font-size:var(--t-3);line-height:1.02}
.post__head .lede{color:var(--ink-2);max-width:40ch}
.post__meta::before{content:none}
.post__meta>*+*::before{content:"";display:inline-block;width:1.5em;height:1px;margin-right:.8em;vertical-align:middle;background:var(--ink-2)}
/* TLDR: surface panel, accent rule on the left, h2.label inside */
.post__tldr{margin-block:var(--sp-5);padding:var(--sp-4);border-radius:var(--r-s);background:var(--surface);box-shadow:inset 3px 0 0 var(--accent)}
.post__tldr ul{margin:var(--sp-3) 0 0;padding-left:1.1em}
.post__tldr li{max-width:60ch}
.post__tldr li+li{margin-top:var(--sp-2)}
.post__tldr li::marker{color:var(--accent)}
/* body: flat flow of h2, h3, p, lists, figures, aside, close */
.post__body>*+*{margin-top:var(--sp-3)}
.post__body>h2{margin-top:var(--sp-6);font:800 var(--t-2)/1.05 var(--f-disp);letter-spacing:-.045em}
.post__body>h3{margin-top:var(--sp-5);font:800 var(--t-1)/1.15 var(--f-disp);letter-spacing:-.03em}
.post__body>:is(ul,ol){padding-left:1.25em}
.post__body li+li{margin-top:var(--sp-1)}
/* figures: chart, stat tiles or flow, then a caption that ends with its source number */
.post__fig{margin-block:var(--sp-5)}
.post__fig figcaption{margin-top:var(--sp-3);max-width:60ch;font:400 var(--t--1)/1.5 var(--f-geo);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.post__chart{max-width:28rem}
.post__chart svg{width:100%;height:auto;overflow:visible}
.post__chart text{font:500 var(--t--1) var(--f-text);fill:var(--ink);text-anchor:middle}
.post__chart .bar{fill:var(--accent)}
.post__chart .bar--warm{fill:var(--warm)}
.post__chart .line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.post__chart .base{stroke:var(--ink-2);stroke-width:1;vector-effect:non-scaling-stroke}
.post__unit,.post__axis{font-size:var(--t--1);color:var(--ink-2)}
.post__unit{margin-bottom:var(--sp-2)}
.post__axis{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin-top:var(--sp-2);text-align:center}
.post__axis .is-on{color:var(--ink);font-weight:600}
.post__stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
.post__stats li{display:grid;align-content:start;gap:var(--sp-2);padding-top:var(--sp-3);border-top:1px solid var(--line)}
.post__stat{font:200 var(--t-3)/1 var(--f-geo);letter-spacing:.02em;color:var(--accent)}
.post__stats p:not(.post__stat){max-width:24ch;font-size:var(--t--1);color:var(--ink-2)}
/* flow: an ordered list of steps; stacks on phones, runs left to right from 48rem */
.post__flow{display:grid;gap:var(--sp-4);margin:0;padding:0;list-style:none}
.post__flow li{position:relative;display:grid;align-content:start;gap:var(--sp-1);padding:var(--sp-3);border:1px solid var(--line);border-radius:var(--r-s)}
.post__flow li+li::before{content:"";position:absolute;left:var(--sp-4);bottom:100%;height:var(--sp-4);border-left:1px solid var(--ink-2)}
.post__flow b{font-weight:600}
.post__flow span{font-size:var(--t--1);color:var(--ink-2)}
.post__flow .is-out{border-color:var(--warm)}
@media (min-width:48rem){
  .post__flow{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .post__flow li+li::before{left:auto;right:100%;bottom:auto;top:50%;width:var(--sp-4);height:0;border-left:0;border-top:1px solid var(--ink-2)}
}
/* pull quote: one per post, short accent rule above */
.post__quote{margin-block:var(--sp-6);padding-top:var(--sp-4);background:linear-gradient(var(--accent) 0 0) 0 0/3rem 2px no-repeat}
.post__quote p{max-width:24ch;font:700 var(--t-2)/1.15 var(--f-disp);letter-spacing:-.035em}
.post__quote figcaption{margin-top:var(--sp-3);font-size:var(--t--1);color:var(--ink-2)}
/* under the hood: quieter, hairline box, p.label on top */
.post__hood{display:grid;gap:var(--sp-2);margin-block:var(--sp-5);padding:var(--sp-4);border:1px solid var(--line);border-radius:var(--r-m);font-size:var(--t--1);color:var(--ink-2)}
.post__close{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line);font-size:var(--t-1);line-height:1.45}
.post__close>*+*{margin-top:var(--sp-3)}
/* sources: small, tabular, long URLs wrap */
.post__src{margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--line)}
.post__sources{margin:var(--sp-3) 0 0;padding-left:2em;font-size:var(--t--1);line-height:1.5;color:var(--ink-2);font-variant-numeric:tabular-nums lining-nums}
.post__sources li{overflow-wrap:anywhere}
.post__sources li+li{margin-top:var(--sp-2)}
.post__sources li:target{color:var(--ink)}
.post__next{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.post__next a{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-3);padding-block:var(--sp-4);border-block:1px solid var(--line);color:var(--ink);text-decoration:none;font:800 var(--t-2)/1.05 var(--f-disp);letter-spacing:-.045em}
.post__next a::after{content:"\2192";content:"\2192"/"";flex:none;color:var(--accent);font-weight:500;transition:transform .5s var(--ease-out)}
/* index: hairline list. Whole row clicks through the title link; focus ring stays on the link */
.blog-list{max-width:56rem;margin:0;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.blog-list__item{position:relative;display:grid;gap:var(--sp-2);padding-block:var(--sp-5);border-top:1px solid var(--line)}
.blog-list__t{max-width:24ch;font:800 var(--t-2)/1.05 var(--f-disp);letter-spacing:-.045em}
.blog-list__t a{color:inherit;text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:2px;text-underline-offset:.15em;transition:text-decoration-color .2s}
.blog-list__t a::after{content:"";position:absolute;inset:0}
.blog-list__t a:is(:hover,:focus-visible){text-decoration-color:var(--accent)}
.blog-list__item:focus-within{border-top-color:var(--accent)}
.blog-list__lede{max-width:60ch;color:var(--ink-2)}
.blog-list__item .post__meta{margin-top:var(--sp-1)}
/* hairline riffle: the row under the pointer or focus steps forward, its neighbours part */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .blog-list__item{transition:transform .5s var(--ease-out),border-color .3s}
  .blog-list__item:is(:hover,:focus-within){transform:translateX(.6rem);border-top-color:var(--accent)}
  .blog-list__item:has(+.blog-list__item:is(:hover,:focus-within)){transform:translateY(-.3rem);transition-delay:40ms}
  .blog-list__item:is(:hover,:focus-within)+.blog-list__item{transform:translateY(.3rem);transition-delay:40ms}
  .post__next a:hover::after{transform:translateX(.25em)}
}

/* 25. Post scenes: a post told as a scrolled story ------------------------
   Spec: src/blog/brief.md section 11. Every component is rendered in src/blog/scenes.html; copy from there.
   article.post--scenes keeps the 65ch reading column; .post-hero, .scene, .pin and .hood bleed to the viewport edge.
   Rules: one warm mark per scene, connectors in --ink-2, numerals in Jost light, motion = .reveal fade + CSS state.
   Device UI (.chat, .siteui, .inbox) is set in em off a cqi base with a 13px floor, so no text drops below 12px. */

/* bleed and rhythm */
article.post--scenes{padding-top:0}
.post :is(.post-hero,.scene,.pin,.hood){margin-inline:calc(50% - 50vw)}
.post__body>:is(.scene,.pin,.hood,.pq,.bignum,.divider){margin-block:var(--sp-6)}
.post--scenes .post__body{counter-reset:sec}
.post--scenes .post__body>h2{margin-top:var(--sp-7);font-size:var(--t-3);line-height:1}
.post--scenes .post__body h2:not(.label)::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);content:counter(sec,decimal-leading-zero)/"";display:block;margin-bottom:var(--sp-3);font:300 var(--t-1)/1 var(--f-geo);letter-spacing:.12em;color:var(--accent)}
.label--warm::before{background:var(--warm)}
:is(.compare,.loops,.calc,.strip,.icards,.hbars,.key,.exits,.chat__list,.siteui__qs,.inbox ul,.tldr ul)>li+li{margin-top:0} /* undo section 24 li+li spacing */
@media (max-width:47.99rem){.wide-only{display:none!important}}

/* hero: ghost word, one dots shape, overset hook, lede, meta (parent: header.post-hero.has-ghost) */
.post-hero{display:grid;align-content:end;min-height:min(84svh,50rem);padding-block:clamp(5rem,3rem + 8vw,10rem) clamp(2.5rem,1.5rem + 3vw,4.5rem)}
.post-hero__in{display:grid;gap:var(--sp-4);justify-items:start;width:100%;max-width:96rem;margin-inline:auto;padding-inline:var(--gutter)}
.post-hero h1{max-width:14ch;font-size:clamp(2.5rem,.9rem + 5.4vw,6.6rem);line-height:.92}
.post-hero h1 .acc{white-space:nowrap}
.post-hero .lede{max-width:40ch;color:var(--ink-2)}
.post-hero__ghost{top:.1em;right:-.08em}
.post-hero__shape{position:absolute;z-index:0;right:-6%;bottom:-8%;width:min(56vw,34rem);opacity:.55;pointer-events:none}
.post-hero__shape--flip{transform:rotate(180deg)}
.post-hero__shape--top{top:8%;bottom:auto}
@media (max-width:47.99rem){.post-hero__shape{top:10%;bottom:auto;width:72vw}} /* phones: the shape fills the space above the H1 */

/* TLDR: numbered short answers, the first one larger; a quarter of stipple in the corner */
.tldr{position:relative;isolation:isolate;display:grid;align-items:start;gap:var(--sp-3) var(--sp-5);margin-block:var(--sp-5) var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--ink-2)}
.tldr::after{content:"";position:absolute;z-index:-1;top:0;right:0;width:min(40%,11rem);aspect-ratio:1;background:var(--accent);-webkit-mask:url(/img/dots-quarter.webp) center/contain no-repeat;mask:url(/img/dots-quarter.webp) center/contain no-repeat;transform:scaleX(-1);opacity:.3;pointer-events:none}
.tldr ul{display:grid;margin:0;padding:0;list-style:none;counter-reset:tl}
.tldr li{position:relative;padding:var(--sp-3) 0 var(--sp-3) 3.5rem;border-bottom:1px solid var(--line)}
.tldr li::before{position:absolute;left:0;top:var(--sp-3);counter-increment:tl;content:counter(tl,decimal-leading-zero);content:counter(tl,decimal-leading-zero)/"";font:300 var(--t-0)/1.6 var(--f-geo);letter-spacing:.08em;color:var(--accent)}
.tldr li:first-child{font:600 var(--t-1)/1.4 var(--f-text);letter-spacing:-.01em}
.tldr li:first-child::before{font-size:var(--t-1);line-height:1.4}
@media (min-width:48rem){.tldr{grid-template-columns:8rem minmax(0,1fr)}.tldr li:first-child{padding-top:0}.tldr li:first-child::before{top:0}}

/* scene band: full-bleed section or figure; add .scene--surface, .has-ghost, .mist or .velaris (once per post) */
.scene{position:relative;padding-block:clamp(3.5rem,2rem + 5vw,7rem)}
.scene--surface{background:var(--surface)}
.scene__in{position:relative;z-index:1;display:grid;gap:var(--sp-5);max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.scene__head{display:grid;gap:var(--sp-3);justify-items:start;max-width:44rem}
.scene__h{max-width:18ch;font:800 var(--t-3)/1 var(--f-disp);letter-spacing:-.045em}
.scene__head p:not(.label){max-width:56ch;color:var(--ink-2)}
.scene__cap{max-width:62ch;font:400 var(--t--1)/1.5 var(--f-geo);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.scene__split{display:grid;gap:var(--sp-5);align-items:center}
@media (min-width:56rem){.scene__split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.scene__split--wide{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}

/* big number: Jost light numeral, optional stipple shape behind (then the numeral turns ink) */
.bignum{display:grid;gap:var(--sp-4) var(--sp-5);align-items:center;margin:0}
.bignum__fig{position:relative;isolation:isolate;display:grid;place-items:center;justify-self:start}
.bignum__n{font:200 clamp(4.5rem,2rem + 11vw,11rem)/.85 var(--f-geo);color:var(--accent);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.bignum__n small{margin-left:.15em;font-size:.3em;font-weight:300;letter-spacing:.08em}
.bignum__shape{position:absolute;z-index:-1;left:50%;top:50%;width:max(150%,12rem);translate:-50% -50%;opacity:.45;pointer-events:none}
.bignum__fig:has(.bignum__shape) .bignum__n{color:var(--ink)}
.bignum__cap{display:grid;gap:var(--sp-2);max-width:38ch}
.bignum__cap p:not(.bignum__src){font:600 var(--t-1)/1.35 var(--f-text);letter-spacing:-.01em}
.bignum__src{font:400 .78rem/1.4 var(--f-geo);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (min-width:56rem){.scene__in:not(.scene__split)>.bignum{grid-template-columns:auto minmax(0,1fr)}}

/* stat strip: two to four numbers, each with what it measured and its scope */
.strip{display:grid;margin:0;padding:0;list-style:none}
.strip>li{display:grid;grid-template-columns:minmax(5.5rem,max-content) minmax(0,1fr);align-content:start;gap:var(--sp-1) var(--sp-4);padding-block:var(--sp-4);border-top:1px solid var(--line)}
.strip__n{grid-row:span 2;font:200 clamp(2.4rem,1.4rem + 3vw,4.6rem)/.95 var(--f-geo);color:var(--accent);font-variant-numeric:lining-nums tabular-nums}
.strip__n--words{max-width:6ch;font-size:var(--t-2);font-weight:300;line-height:1.1}
.strip__scope{font:400 .78rem/1.4 var(--f-geo);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
@media (min-width:48rem){
  .strip{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}
  .strip>li{grid-template-columns:none;padding:var(--sp-4) var(--sp-4) 0;border-top:0;border-left:1px solid var(--line)}
  .strip>li:first-child{padding-left:0;border-left:0}
  .strip__n{grid-row:auto}
}

/* horizontal bars, HTML: --max on the list, --v on each item; the value sits at the bar tip, zero is the left rule */
.hbars{--max:100;--nr:clamp(7rem,4rem + 6vw,11rem);display:grid;gap:var(--sp-4);margin:0;padding:0;list-style:none;max-width:56rem}
.hbars>li{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3)}
.hbars__l{flex-basis:100%;font-size:var(--t--1);color:var(--ink-2)}
.hbars__b{flex:none;width:calc(var(--v)/var(--max)*(100% - var(--nr)));min-width:3px;height:clamp(1.5rem,1rem + 2vw,2.75rem);background:var(--accent);box-shadow:-1px 0 0 var(--ink-2)}
.hbars__n{flex:none;font:200 var(--t-3)/1 var(--f-geo);font-variant-numeric:lining-nums tabular-nums}
.hbars .is-on .hbars__b{background:var(--warm)}
.hbars .is-on :is(.hbars__l,.hbars__n){color:var(--ink);font-weight:600}
.hbars--sm{--nr:5rem;gap:var(--sp-3)}
.hbars--sm .hbars__b{height:1.25rem}
.hbars--sm .hbars__n{font-size:var(--t-1);font-weight:400}

/* dot matrix (100 <i>, ten a row) and its key: .a accent dot, .r accent ring, .w warm square, bare = ink-2 ring */
.dotgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(.3rem,.15rem + .6vw,.6rem);width:min(100%,26rem)}
:is(.dotgrid,.key) i{display:block;aspect-ratio:1;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-2)}
:is(.dotgrid,.key) .a{background:var(--accent);box-shadow:none}
:is(.dotgrid,.key) .r{box-shadow:inset 0 0 0 .22rem var(--accent)}
:is(.dotgrid,.key) .w{background:var(--warm);box-shadow:none;border-radius:2px}
.key{display:grid;gap:var(--sp-2);margin:0;padding:0;list-style:none;font-size:var(--t--1);color:var(--ink-2)}
.key li{display:grid;grid-template-columns:1rem minmax(0,1fr);gap:var(--sp-3);align-items:center}
.key b{color:var(--ink);font-weight:600}
.key--row{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4)}
.key--row li{grid-template-columns:1rem auto;gap:var(--sp-2)}
.key i.blk{height:1rem;padding:0;border-radius:3px}

/* device UI: phone and laptop screens (section 16) take one of .chat, .siteui, .inbox */
.screen :is(.chat,.siteui,.inbox){font-size:max(.8125rem,4.6cqi);padding:19cqi 5cqi 6cqi}
.laptop :is(.chat,.siteui,.inbox){font-size:max(.8125rem,1.7cqi);padding:3cqi 5cqi}
/* chat: a buyer's question, the assistant's answer, a list of named businesses */
.chat{display:grid;gap:.75em;align-content:start;font:400 var(--t-0)/1.4 var(--f-text);color:var(--ink)}
.chat--panel{max-width:30rem;padding:var(--sp-4);border-radius:var(--r-l);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line),var(--sh-amb)}
.chat__top{display:flex;align-items:center;gap:.5em;font:400 .92em/1.2 var(--f-geo);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.chat__top::before{content:"";width:.55em;aspect-ratio:1;border-radius:50%;background:var(--accent)}
.chat__q{justify-self:end;max-width:88%;margin:0;padding:.65em .9em;border-radius:1.1em 1.1em .3em 1.1em;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.chat__a{display:grid;gap:.5em;justify-items:start;margin:0}
.chat__list{display:grid;gap:.4em;width:100%;margin:0;padding:0;list-style:none}
.chat__list li{display:grid;gap:.15em;justify-items:start;padding:.5em .75em;border-radius:.6em;box-shadow:inset 0 0 0 1px var(--line)}
.chat__list b{font-weight:700}
.chat__list span{font-size:.92em;color:var(--ink-2)}
.chat__list .is-you{box-shadow:inset 0 0 0 2px var(--accent)}
.chat__list .is-miss{box-shadow:none;border:1px dashed var(--warm)}
.chat__note{font-size:.92em;color:var(--ink-2)}
.tag{display:inline-flex;align-items:center;gap:.4em;padding:.2em .7em;border-radius:var(--r-pill);font:600 .92em/1.3 var(--f-text);font-style:normal;color:var(--accent);background:var(--mist);box-shadow:inset 0 0 0 1px var(--accent)}
.tag--warm{color:var(--warm);background:transparent;box-shadow:inset 0 0 0 1px var(--warm)}
/* siteui: a tiny client site; each buyer question answered (.is-ans, tick) or blank (.is-blank, dashed warm, "?") */
.siteui{display:grid;gap:.75em;align-content:start;font:400 var(--t-0)/1.35 var(--f-text);color:var(--ink)}
.siteui__url{justify-self:center;max-width:100%;overflow:hidden;padding:.3em 1em;border-radius:var(--r-pill);background:var(--surface);font-size:max(.92em,12px);color:var(--ink-2);white-space:nowrap;text-overflow:ellipsis}
.siteui__img{position:relative;aspect-ratio:16/9;border-radius:.6em;background:var(--surface);overflow:clip}
.siteui__img::after{content:"";position:absolute;inset:18% 8% 0;background:var(--ink-2);-webkit-mask:url(/img/dots-half.webp) center bottom/contain no-repeat;mask:url(/img/dots-half.webp) center bottom/contain no-repeat;opacity:.55}
.siteui__h{font:700 1.25em/1.1 var(--f-text);letter-spacing:-.01em}
.siteui__p{color:var(--ink-2)}
.siteui__qs{display:grid;gap:.4em;margin:0;padding:0;list-style:none}
.siteui__qs li{display:grid;grid-template-columns:1.1em minmax(0,1fr);gap:.1em .55em;padding:.5em .7em;border-radius:.55em;box-shadow:inset 0 0 0 1px var(--line)}
.siteui__qs li::before{grid-row:1/span 2;align-self:start}
.siteui__qs b{font:400 max(.92em,12px)/1.3 var(--f-geo);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.siteui__qs .is-ans::before{content:"";width:.45em;height:.8em;margin:.15em 0 0 .3em;border:solid var(--accent);border-width:0 .15em .15em 0;rotate:45deg}
.siteui__qs .is-blank{box-shadow:none;border:1px dashed var(--warm)}
.siteui__qs .is-blank::before{content:"?";content:"?"/"";font-weight:700;line-height:1.3;text-align:center;color:var(--warm)}
.siteui__qs .is-blank span{color:var(--ink-2)}
.siteui__go{justify-self:start;padding:.5em 1.2em;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font-weight:600}
.siteui__load{display:grid;place-items:center;align-content:center;gap:.6em;min-height:9em;color:var(--ink-2)}
.siteui__load::before{content:"";width:2.2em;aspect-ratio:1;border:.2em solid transparent;border-top-color:var(--warm);border-radius:50%;box-shadow:0 0 0 .2em var(--line) inset;animation:spin 1.2s linear infinite}
/* inbox: rows of mail; the one being pointed at takes .is-new (warm rule) and a .tag--warm */
.inbox{display:grid;gap:.6em;align-content:start;font:400 var(--t-0)/1.35 var(--f-text);color:var(--ink)}
.inbox__h{font:700 1.25em/1.1 var(--f-text)}
.inbox ul{display:grid;gap:.4em;margin:0;padding:0;list-style:none}
.inbox li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.2em .6em;padding:.6em .75em;border-radius:.6em;background:var(--surface)}
.inbox b{font-weight:700}
.inbox li>span{grid-column:1/-1;color:var(--ink-2)}
.inbox time{font:400 .92em/1.3 var(--f-geo);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.inbox .is-new{box-shadow:inset 3px 0 0 var(--warm)}
.inbox .tag{grid-column:1/-1;justify-self:start}

/* compare: two columns, before (.label--warm) and after (.label), stacked below 48rem */
.compare{display:grid;gap:var(--sp-6) var(--sp-5);margin:0;padding:0;list-style:none}
.compare>li{display:grid;gap:var(--sp-3);justify-items:center;align-content:start;min-width:0}
.compare .phone{--w:min(17rem,74vw)}
.compare__note{max-width:32ch;text-align:center;font-size:var(--t--1);color:var(--ink-2)}
.compare--text>li{justify-items:stretch}
.compare--text .compare__note{text-align:left}
@media (min-width:48rem){.compare{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* week: Mon to Fri, one or more tracks. Days are columns from 48rem and rows below it.
   Each .week__d takes --d (1-5), each .week__t takes --t, each .week__c takes both. */
.week{--tracks:1;display:grid;grid-template-columns:3rem repeat(var(--tracks),minmax(0,1fr));gap:var(--sp-2) var(--sp-3)}
.week__d{grid-column:1;grid-row:calc(var(--d) + 1);margin:0;padding-top:.6rem;font:400 .78rem/1.2 var(--f-geo);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.week__t{grid-row:1;grid-column:calc(var(--t) + 1);align-self:start;margin:0}
.week__c{grid-row:calc(var(--d) + 1);grid-column:calc(var(--t) + 1);display:grid;gap:var(--sp-2);align-content:start;min-width:0;padding-top:var(--sp-2);border-top:1px solid var(--line)}
@media (min-width:48rem){
  .week{grid-template-columns:minmax(0,7rem) repeat(5,minmax(0,1fr))}
  .week__d{grid-row:1;grid-column:calc(var(--d) + 1);padding:0}
  .week__t{grid-column:1;grid-row:calc(var(--t) + 1);padding-top:var(--sp-2)}
  .week__c{grid-column:calc(var(--d) + 1);grid-row:calc(var(--t) + 1);min-height:8rem}
}
.blk{position:relative;isolation:isolate;overflow:clip;display:grid;gap:.15em;padding:.55em .7em;border-radius:var(--r-s);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:var(--t--1);line-height:1.35}
.blk b{font-weight:600}
.blk span{color:var(--ink-2)}
.blk--work{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink-2)}
.blk--waste{box-shadow:inset 3px 0 0 var(--warm),inset 0 0 0 1px var(--warm)}
.blk--waste::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--warm);-webkit-mask:var(--tile) 0 0/180px;mask:var(--tile) 0 0/180px;opacity:.3}
.blk--freed{background:transparent;box-shadow:none;outline:1.5px dashed var(--accent);outline-offset:-1.5px}

/* exits: a step flow on a spine; a step where sites drop out carries .exits__out (dashed warm, branches right from 56rem) */
.exits{position:relative;isolation:isolate;display:grid;max-width:58rem;margin:0;padding:0;list-style:none;counter-reset:ex}
.exits>li{position:relative;display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:var(--sp-1) var(--sp-3);padding-bottom:var(--sp-5)}
.exits>li:last-child{padding-bottom:0}
.exits>li::before{counter-increment:ex;content:counter(ex);content:counter(ex)/"";grid-row:1/span 3;display:grid;place-items:center;width:2.5rem;aspect-ratio:1;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--accent);font:300 var(--t-0)/1 var(--f-geo);color:var(--accent)}
.exits>li:not(:last-child)::after{content:"";position:absolute;z-index:-1;left:1.25rem;top:2.5rem;bottom:0;border-left:1.5px solid var(--ink-2)}
.exits>li>b{font:700 var(--t-1)/1.2 var(--f-text);letter-spacing:-.01em}
.exits span{color:var(--ink-2)}
.exits .exits__out{position:relative;margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border:1px dashed var(--warm);border-radius:var(--r-s);font-size:var(--t--1);color:var(--ink)}
@media (min-width:56rem){
  .exits>li{grid-template-columns:2.5rem minmax(0,1fr) minmax(0,1fr);column-gap:var(--sp-5)}
  .exits>li>:not(.exits__out){grid-column:2}
  .exits .exits__out{grid-column:3;grid-row:1/span 3;align-self:center;margin:0}
  .exits .exits__out::before{content:"";position:absolute;right:100%;top:50%;width:var(--sp-5);border-top:1px dashed var(--warm)}
  .exits .exits__out::after{content:"";position:absolute;left:-1px;top:50%;translate:0 -50%;border:.3rem solid transparent;border-left:.45rem solid var(--warm)}
}

/* calculator strip: a worked example as numbers joined by arrows; the result is the one warm mark */
.calc{display:grid;margin:0;padding:0;list-style:none}
.calc>li{display:grid;align-content:start;gap:var(--sp-1);padding-block:var(--sp-3);border-top:1px solid var(--line)}
.calc>li+li::before{content:"\2193";content:"\2193"/"";font:300 var(--t-1)/1 var(--f-geo);color:var(--accent)}
.calc__op{font:400 .78rem/1.4 var(--f-geo);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.calc__n{font:200 clamp(2.4rem,1.4rem + 2.6vw,3.8rem)/1 var(--f-geo);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.calc__n small{margin-inline:.25em;font-size:.4em;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.calc__u{color:var(--ink-2)}
.calc .is-on .calc__n{color:var(--warm)}
.calc .is-on .calc__u{color:var(--ink);font-weight:600}
@media (min-width:64rem){
  .calc{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);column-gap:var(--sp-5)}
  .calc>li{position:relative;padding-top:var(--sp-4)}
  .calc>li+li::before{content:"\2192";content:"\2192"/"";position:absolute;left:calc(-1*var(--sp-5) + .35rem);top:calc(var(--sp-4) + 1.9rem)}
}

/* icon cards: a short list of parallel rules, each with a thin-line icon (decorative, aria-hidden) */
.icards{display:grid;gap:var(--sp-3);margin:0;padding:0;list-style:none}
.icards>li{display:grid;align-content:start;gap:var(--sp-3);padding:clamp(1.25rem,1rem + 1.5vw,2.25rem);border-radius:var(--r-l);background:var(--bg);box-shadow:inset 0 0 0 1px var(--line)}
.icards svg{width:2.75rem;height:2.75rem;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.icards b:first-child{display:block;margin-bottom:.45em;font:800 var(--t-1)/1.15 var(--f-disp);letter-spacing:-.03em}
@media (min-width:56rem){.icards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* loops: up to three drawn loops side by side */
.loops{display:grid;gap:var(--sp-6) var(--sp-4);margin:0;padding:0;list-style:none}
.loops>li{display:grid;gap:var(--sp-3);justify-items:center;align-content:start;text-align:center}
.loops .dg{width:min(100%,20rem)}
.loops p:not(.label){max-width:30ch;font-size:var(--t--1);color:var(--ink-2)}
@media (min-width:56rem){.loops{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* drawn diagrams (inline SVG): classes only, never a colour attribute. Text 13 user units, viewBox 300 to 320 wide. */
.dg{width:min(100%,30rem)}
.dg svg{width:100%;height:auto;overflow:visible}
.dg text{font:500 13px var(--f-text);fill:var(--ink);text-anchor:middle}
.dg .t2{font-weight:400;fill:var(--ink-2)}
.dg .tb{font-weight:700}
.dg .tw{fill:var(--warm);font-weight:600}
.dg .tg{font:400 12px var(--f-geo);letter-spacing:.14em;text-transform:uppercase;fill:var(--ink-2)}
.dg .ts{text-anchor:start}.dg .te{text-anchor:end}
.dg .ln{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.dg .ln--w{stroke:var(--warm);stroke-dasharray:5 5}
.dg .hd{fill:var(--ink-2)}
.dg .hd--w{fill:var(--warm)}
.dg .nd{fill:var(--bg);stroke:var(--ink-2);stroke-width:1.5;vector-effect:non-scaling-stroke}
.dg .nd--a{stroke:var(--accent);stroke-width:2}
.dg .nd--w{stroke:var(--warm);stroke-dasharray:5 5}

/* pull quote at display size: a sentence lifted from the body, so aria-hidden; one per post */
.pq{position:relative;padding-top:var(--sp-4)}
.pq::before{content:"";position:absolute;top:0;left:0;width:3rem;height:2px;background:var(--accent)}
.pq p{max-width:20ch;font:800 clamp(2rem,1.1rem + 3.6vw,4.4rem)/1.02 var(--f-disp);letter-spacing:-.045em;text-wrap:balance}
@media (min-width:72rem){.pq{margin-inline:-6rem}}

/* divider: a strip of pencil stipple between movements of a post */
.divider{height:1rem;border:0;background:var(--ink-2);-webkit-mask:var(--tile) 0 0/160px;mask:var(--tile) 0 0/160px;opacity:.6}

/* under the hood: a quiet full-bleed strip on grid paper (add .tx-grid) */
.hood{padding-block:var(--sp-5);background-color:var(--surface);font-size:var(--t--1);color:var(--ink-2)}
.hood__in{display:grid;gap:var(--sp-3) var(--sp-5);max-width:76rem;margin-inline:auto;padding-inline:var(--gutter)}
.hood__in p:not(.label){max-width:68ch;line-height:1.7}
@media (min-width:56rem){.hood__in{grid-template-columns:12rem minmax(0,1fr)}}

/* pinned story (section 15) with a phone in the rig and sentence-length captions */
.rig--phone .phone{--w:min(17rem,calc((100svh - 12rem)*.44))}
.stage--long .stage__copy p{max-width:22ch;font-size:var(--t-1);line-height:1.15}
.rig--phone .screen{text-align:left}
@media (max-width:56rem){.rig--phone .phone{--w:min(16rem,calc((100svh - 22rem)*.46))}.stage--long{padding-top:calc(4.25rem + var(--sp-3))}}
/* price note: posts that show other providers' prices say so, directly after the TLDR (brief, price note) */
.price-note{display:block;max-width:62ch;margin:calc(var(--sp-5) * -.5) 0 var(--sp-6);padding:var(--sp-3) var(--sp-4);border-left:2px solid var(--warm);background:var(--surface);color:var(--ink-2);font-size:var(--t--1);line-height:1.5}
.price-note::before{content:"Note";display:inline-block;margin-right:.8em;font:400 .78rem/1.5 var(--f-geo);letter-spacing:.2em;text-transform:uppercase;color:var(--warm)}
.price-note a{color:var(--ink)}
/* phone inbox text: 12px floor at every width (was 11.96px) */
.post .screen .inbox{font-size:max(.82rem,4.6cqi)}