/* ==========================================================================
   Full Stop · work pages (round 5; round 6: the filled gradient and the live content): work.html?p=<slug>
   Loaded after system.css and home.css, which bring the shared pieces (tokens, glass, pills, tags, the section irises,
   the footer). The same site: night and ice never change, the light is the scheme's, circles only for UI.
   Round 6, Werner: "I don't want the circle with the image, instead the background should be completely filled with
   the gradient". No light disc sits behind an image: the hero and the Next band are filled edge to edge by the live
   aurora field (or the scheme's still), every media plate by the scheme's --aurora-lit with the project's key and fill.
   ========================================================================== */

.work-page main{background:var(--night)}
/* devices and tracks never widen the page (sticky still works under clip, unlike hidden) */
.w-sec{overflow-x:clip}

/* ── 1 · the plate: the gradient, edge to edge, r28 (r24 on phones), and the media on it ──────────────────────────
   .pl-lt is the homepage card's disc light covering the whole plate: the scheme's --aurora-lit (the whole sky, at the
   plate's own size, so every plate shows it whole) under the project's key (--h1 from --ax/--ay) and fill (--h2, blend
   color, from the opposite side). A fit plate (.pl--fit) has its context's aspect and is a size container: a device,
   a detail or a framed screen is centred and sized in it in container units. A hug plate (.pl--hug) is padded round
   its media at the media's own aspect (the boards and screens of the live sections). */
.pl{position:relative;isolation:isolate;border-radius:var(--r-card);overflow:hidden;background:var(--night-2);color:var(--moon)}
.pl-lt{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background-image:var(--aurora-lit);background-size:100% 100%;background-repeat:no-repeat}
.pl-lt::before,.pl-lt::after{content:"";position:absolute;inset:0;border-radius:inherit}
.pl-lt::before{background:radial-gradient(circle at var(--ax,30%) var(--ay,26%),var(--h1),#0000 60%);opacity:.92;transition:opacity 480ms var(--ease-focus)}
.pl-lt::after{background:radial-gradient(circle at calc(100% - var(--ax,30%)) calc(100% - var(--ay,26%)),var(--h2),#0000 66%);mix-blend-mode:color;opacity:.8}
.pl--fit{container-type:size}
.pl--hug{padding:clamp(16px, 5%, 64px)}
@media (hover:hover){.rack.is-hover .pl-lt::before,.pl[data-lens]:hover .pl-lt::before{opacity:1}}

/* a device: a zero box at the stage's centre; the render is placed from its fit (js/work-data.js WORK.fit): its content
   box (not its padding) as wide as --fw of the stage and as tall as --fh at most (--bar its aspect), --bwf its share of
   the render's width, --cxf/--cyf its centre. Its shadow is its own halo's silhouette in the night, a little lower and
   smaller, so it reads as an object on the light; the keyed renders crossfade from their scheme-tinted soft layer
   (--soft, the focus), the live ones blur. */
.st-dev{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1;
  --cw:min(calc(var(--fw,1) * 100cqw), calc(var(--fh,1) * 100cqh * var(--bar)));--rw:calc(var(--cw) / var(--bwf))}
.st-dev>.st-img,.st-dev>.st-sh{position:absolute;left:calc(var(--cxf) * var(--rw) * -1);top:calc(var(--cyf) * var(--ar) * var(--rw) * -1);width:var(--rw);max-width:none}
.st-img{height:auto}
.st-sh{display:block;height:calc(var(--ar) * var(--rw));background:var(--night);opacity:calc(.5 * var(--halo,1));transform:translateY(3.5%) scale(.95);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transition:opacity 320ms var(--ease-focus)}
.st-soft{opacity:var(--soft,0)}
.st-sharp{opacity:calc(1 - var(--soft,0))}
.st-soft,.st-sharp{transition:opacity 420ms var(--ease-focus)}
.st-dev--flat .st-sharp{opacity:1;filter:blur(calc(var(--soft,0) * 12px));transition:filter 420ms var(--ease-focus)}
/* a detail: the 1600w render at 1:1, render px (--cx, --cy) at the plate's centre, cut by the plate's own edge */
.st-det{position:absolute;left:50%;top:50%;width:0;height:0;z-index:1}
.st-det>*{position:absolute;left:calc(var(--cx) * -1px);top:calc(var(--cy) * -1px);width:calc(var(--rw) * 1px);max-width:none}
.st-det>.st-sh{height:calc(var(--rw) * var(--ar) * 1px)}

/* a flat screen: its glass frame (a translucent bezel over the light, the site's rim, a shadow), the screen at 1:1 at
   most. In a fit plate it is centred within --sfw × --sfh of it (container units); in a hug plate it fills it. Out of
   focus the screen blurs and takes the project's hue pair (only the out-of-focus layers carry the light's tint); the
   frame stays sharp, like glass in front of it. No backdrop blur: over the smooth gradient a translucent bezel reads
   the same, and a page of forty frames stays cheap. */
.scr{--bz:clamp(6px, 1.1cqh, 12px);position:relative;z-index:1;display:block;padding:var(--bz);border-radius:calc(var(--bz) + 10px);
  background:color-mix(in srgb,var(--moon) 16%,transparent);box-shadow:0 40px 80px -32px #000000b3,0 0 0 .5px #F3F1F814}
.scr::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--glass-rim);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.scr img{display:block;width:100%;height:auto;border-radius:10px;filter:blur(calc(var(--soft,0) * 14px));transition:filter 420ms var(--ease-focus)}
.scr-tint{position:absolute;inset:var(--bz);border-radius:10px;pointer-events:none;background:radial-gradient(circle at var(--ax,30%) var(--ay,26%),var(--h1),var(--h2));
  mix-blend-mode:color;opacity:calc(var(--soft,0) * 1.2);transition:opacity 420ms var(--ease-focus)}
.pl--fit .scr{--sw:min(calc(var(--nw) * 1px), var(--sfw,80) * 1cqw, calc(var(--sfh,78) * 1cqh * var(--nw) / var(--nh)));
  position:absolute;left:50%;top:50%;width:calc(var(--sw) + 2 * var(--bz));transform:translate(-50%,-50%)}
.pl--hug .scr{--bz:clamp(5px, .9vw, 12px)}
/* a board: flat UI straight on the light (its own shadows), or on a night board where its type is set light on dark */
.pl-bd{position:relative;z-index:1;display:block}
.pl-bd img{display:block;width:100%;height:auto}
/* round 7: a board kept near its own pixels (the Bandcamp player's 2× panels), centred on the light */
.pl-bd--cap{width:min(100%, var(--cap));margin-inline:auto}
.pl-bd--night{padding:clamp(10px, 2.4%, 36px);border-radius:clamp(12px, 1.4vw, 20px);background:var(--night-2);
  box-shadow:0 40px 80px -36px #000000b3,inset 0 0 0 1px var(--line-night)}
/* a wide board's pan (phones only, §15): elsewhere it is just the board's box */
.pl-pan{position:relative;z-index:1;display:block}
/* a night board needs less of the light round it: its own ground is already the frame (the inputs strip read small) */
.pl--hug:has(>.pl-bd--night){padding:clamp(12px, 3.2%, 44px)}

/* the back pill: the chip leads, its arrow points back */
.pill--back{padding:0 18px 0 5px}
.arr--back{transform:scaleX(-1)}
.pill--back .chip .arr{transition:color 240ms var(--ease-focus),transform 320ms var(--ease-glass)}
@media (hover:hover){.pill--back:hover .chip .arr--back{transform:scaleX(-1) translateX(2px)}}

/* ── 2 · the lit bands: the hero and the Next band, filled edge to edge ─────────────────────────────────────────
   Transparent, so the live aurora field shows through them (js/work.js light(): the one fixed canvas, in the mode the
   footer uses, clipped to exactly the bands in view). .w-sky is the scheme's still in its place: in static and reduced
   motion (where the field is off or still), while the menu borrows the field, and if the scripts are late. The night
   veil (.w-veil) sits under the words only: the header's band, the stack's corner, the meta strip's foot. Its strengths
   are tokens (§11b), tuned per scheme against measured contrast. Type on the light is the footer's: moon, and the mono
   labels at 74% of it (the haze would sink into the light). */
.w-lit{background:transparent;color:var(--moon);--fg-dim:color-mix(in srgb,var(--moon) 84%,transparent);--line:color-mix(in srgb,var(--moon) 24%,transparent);
  --wv:.62;--wv-top:.46;--wv-foot:.56}
/* glass on the light: the pills keep their rim and blur, their fill turns to the night, or their words sank into the
   brightest scheme (the back pill read 3.8:1 on sodium in glass) */
.w-lit .pill{background:color-mix(in srgb,var(--night) 36%,transparent)}
.w-sky{position:absolute;inset:0;z-index:0;display:none;pointer-events:none;--sd:var(--sky-dim,.12);
  background:linear-gradient(color-mix(in srgb,var(--night) calc(var(--sd) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--sd) * 100%),transparent)),var(--still) center/cover no-repeat,var(--dusk)}
/* the Next band touches the footer: its still is dimmed like the footer's own (.ft-sky, 36%), so the two meet as one light */
.w-next .w-sky{--sd:.36}
html.is-static .w-sky,html.is-reduced .w-sky,html.field-borrowed .w-sky,html.hero-bailed .w-hero .w-sky,html.no-field .w-sky{display:block}
.w-veil{position:absolute;inset:0;z-index:1;pointer-events:none;transition:opacity 560ms var(--ease-focus)}
.w-lit .label{color:var(--fg-dim)}
.w-lit .tag{box-shadow:inset 0 0 0 1px var(--line);background:color-mix(in srgb,var(--night) 22%,transparent)}
.w-lit .tag .t-stop{background:transparent;box-shadow:inset 0 0 0 1px var(--fg-dim)}
/* the field in its still form (no WebGL, a lost context): dimmed like the live field's footer mode, so a band shows
   the same light through its transparency as its own still does */
.work-page .field--still[data-mode=full]{background:linear-gradient(color-mix(in srgb,var(--night) 26%,transparent),color-mix(in srgb,var(--night) 26%,transparent)),var(--still) center/cover no-repeat,var(--dusk)}

/* ── 3 · hero ──────────────────────────────────────────────────────────────────
   The whole hero is the light. Right: the device, large, on it (its stage runs from the headline's column to the
   margin, from under the header to the meta strip; a size container, the device fitted in it). Left, bottom-anchored
   like the homepage stack: back pill, label, name, the headline (js/work.js fits it: as large as its column allows,
   52–120px), the tags. The meta strip runs along the bottom. Stacked (under 768, and portrait tablets): the device on
   top, the words under it on the veil. */
.w-hero{position:relative;height:100svh;min-height:640px;overflow:clip;--stacked:0;--meta-h:92px;--gap:clamp(32px, 2.8vw, 56px);--col:max(440px, 34vw)}
.w-hero .w-veil{background:
  linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 210px),
  linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv-foot) * 100%),transparent),#0000 calc(var(--meta-h) + 150px)),
  radial-gradient(66% 118% at 0% 100%,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 94%),transparent) 50%,#0000 100%)}
.wh-stage{position:absolute;z-index:2;left:calc(var(--margin) + var(--col) + var(--gap));right:var(--margin);top:calc(var(--header-h) + 4px);bottom:calc(var(--meta-h) + 24px);
  container-type:size;pointer-events:none}
.wh-stage .st-dev{--fw:1;--fh:1}
.wh-stack{position:absolute;z-index:3;left:var(--margin);bottom:calc(var(--meta-h) + clamp(32px, 4.4svh, 48px));width:var(--stack-w,var(--col));
  display:flex;flex-direction:column;align-items:flex-start}
.wh-back{margin-bottom:clamp(28px, 4.4svh, 48px)}
.wh-name{font:600 var(--t-ui)/1.2 var(--f-sans);margin-top:var(--s3);color:var(--moon)}
.wh-title{margin-top:var(--s4);font:600 var(--wt,clamp(56px, 6.6vw, 120px))/.94 var(--f-display);letter-spacing:-.042em;color:var(--moon);
  text-wrap:balance;max-width:100%;padding-right:.16em}
.wh-title .w{display:inline-block}
.wh-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:clamp(24px, 3.4svh, 36px)}
.wh-tags .tag{height:36px;font-size:14px;padding:0 14px 0 12px;gap:9px}
/* the meta strip: four cells (five with the live site's Link), mono terms over Sans values, hairlines between */
.wh-meta{position:absolute;z-index:3;left:var(--margin);right:var(--margin);bottom:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line)}
.wh-meta--5{grid-template-columns:repeat(4,minmax(0,1fr)) minmax(0,.9fr)}
.wh-meta--3{grid-template-columns:repeat(3,minmax(0,1fr))}   /* round 7: Bandcamp has no Team: three across, never a lone Year */
.wm{padding:20px 24px 28px;border-left:1px solid var(--line);min-width:0}
.wm:first-child{border-left:0;padding-left:0}
.wm dt{font:400 var(--t-micro)/1.3 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim)}
.wm dd{margin:8px 0 0;font:500 clamp(15px, 1.2vw, 18px)/1.35 var(--f-sans);letter-spacing:-.005em;color:var(--moon);text-wrap:balance}
.wm dd a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;text-decoration-color:var(--fg-dim);border-radius:4px;
  transition:text-decoration-color 240ms var(--ease-focus)}
@media (hover:hover){.wm dd a:hover{text-decoration-color:var(--moon)}}
.wm-sep{color:var(--fg-dim)}
.w-hero--none{background:var(--night)}
.w-hero--none .wh-stack{bottom:clamp(64px, 12svh, 128px)}
/* measured by js/work.js as it fits them: never transitioned. Under reduced motion system.css gives every element a
   1ms transition, and transition-property defaults to all, so a fit read the size from before its own change */
.wh-stack,.wh-title,.wh-title *,.nx-name{transition:none!important}

/* ── 4 · sections: numbered, named and toned by their place (js/work-data.js render): night and ice alternate ── */
.w-sec{position:relative;padding-top:var(--s11);padding-bottom:var(--s11)}
.w-sec.on-night{background:var(--night)}
.w-sec.on-ice{background:var(--ice);--ground:var(--ice)}
.w-head .h2{margin-top:var(--s4)}
/* a heading that is a sentence (Affinidi's system): a statement size, not the section size */
.h2--statement{font-size:clamp(40px, 5vw, 84px);line-height:.98;letter-spacing:-.036em;max-width:15em}
/* the blocks: text in the editorial column (5–12 of 12, like What I did), media on the whole grid */
.w-b{padding-inline:var(--margin);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s8)}
.w-b>*{grid-column:5 / 13;min-width:0}
.w-b--full>*{grid-column:1 / -1}
.w-head+.w-b{margin-top:var(--s9)}

/* ── 5 · brief: one statement, focus-revealed word by word as it passes the reading line (js/work.js) ── */
.w-brief{padding-top:clamp(112px, 15svh, 176px);padding-bottom:clamp(128px, 17svh, 200px)}
.w-statement{margin-top:var(--s7);font:500 clamp(32px, 4.2vw, 68px)/1.08 var(--f-display);letter-spacing:-.032em;color:var(--moon);max-width:20em;text-wrap:pretty}
.w-statement .w,.w-qt .w,.w-lead .w,.ph-lead .w{display:inline-block}
.w-statement .stop,.w-qt .stop{--sk:1.3}
.w-statement .stop::before,.w-outcome .stop::before,.w-qt .stop::before{transition:clip-path 180ms var(--ease-glass);box-shadow:0 0 .3em color-mix(in srgb,var(--iris) 45.1%,transparent),0 0 .08em color-mix(in srgb,var(--pearl) 40%,transparent)}
.on-ice .w-qt .stop::before,.on-ice .w-outcome .stop::before{box-shadow:inset 0 .06em .12em #0000008c,inset 0 0 0 1px #15111F33}

/* ── 6 · what I did: two columns under the head, offset like an editorial spread ── */
.what-cols{margin-top:var(--s9);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
.what-cols p,.w-p p,.ph-col p,.w-ia-p p{font:400 clamp(18px, 1.5vw, 22px)/1.55 var(--f-sans);letter-spacing:-.005em;color:color-mix(in srgb,var(--fg) 88%,transparent);text-wrap:pretty}
.what-cols p:nth-child(1){grid-column:5 / 9}
.what-cols p:nth-child(2){grid-column:9 / 13}
.w-p--2{columns:2;column-gap:var(--gutter)}
.w-p p{break-inside:avoid}
.w-p p+p,.ph-col p+p,.w-ia-p p+p{margin-top:1em}

/* ── 7 · the live blocks ─────────────────────────────────────────────────────────────────────────────────────── */
/* a lead: a statement in Display 500, its full stop lit */
.w-lead{font:500 clamp(28px, 3vw, 46px)/1.14 var(--f-display);letter-spacing:-.026em;color:var(--fg);max-width:22em;text-wrap:pretty}
.w-lead .stop::before{box-shadow:0 0 .2em color-mix(in srgb,var(--iris) 34.9%,transparent)}
.on-ice .w-lead .stop::before{box-shadow:inset 0 .06em .12em #0000008c,inset 0 0 0 1px #15111F33}
/* a lead-in line: Sans, dimmed, before what it introduces */
.w-note{font:400 clamp(17px, 1.3vw, 20px)/1.5 var(--f-sans);color:var(--fg-dim)}
/* lit-stop bullets: each point a row between hairlines, its bullet the site's stop, lit in turn as the list enters */
.w-b .w-list{margin-top:calc(var(--s5) - var(--s8))}
.w-list{border-top:1px solid var(--line)}
.w-list li{display:flex;align-items:baseline;gap:20px;padding:22px 0 23px;border-bottom:1px solid var(--line);
  font:500 clamp(20px, 1.8vw, 28px)/1.3 var(--f-sans);letter-spacing:-.012em;color:var(--fg);text-wrap:pretty}
.li-stop{position:relative;flex:none;width:.36em;height:.36em;border-radius:50%;box-shadow:inset 0 0 0 1px var(--fg-dim);transform:translateY(-.02em)}
.li-stop .lit{position:absolute;inset:0;border-radius:50%;clip-path:circle(var(--bl,50%) at 50% 50%);transition:clip-path 480ms var(--ease-glass)}
.on-night .li-stop .lit{box-shadow:0 0 .3em color-mix(in srgb,var(--iris) 40%,transparent)}
/* a quote (the solution statement) and heycar's aim: the manifesto's size, word by word into focus, its stop last */
.w-b--full>.w-quote{grid-column:1 / 12}
.w-qt{font:600 clamp(36px, 5vw, 76px)/.98 var(--f-display);letter-spacing:-.042em;color:var(--fg);max-width:15em;text-wrap:balance}
.w-note+.w-b--full,.w-b+.w-b--full:has(.w-quote){margin-top:var(--s7)}
.w-b:has(.w-list)+.w-b--full:has(.w-quote){margin-top:var(--s10)}
/* figures: plates in the 12-column grid, their mono labels under them */
.pf-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s7);align-items:stretch}
.pf{grid-column:span var(--span,12);min-width:0;margin:0}
/* plates side by side share one height: the shorter one's media centres in its extra light (Organisms' sidebar and
   form, the Templates pair), so a row reads as one band, not a ragged skyline */
.pf-grid>.pf{display:flex;flex-direction:column}
.pf-grid>.pf>.pl--hug{flex:1;display:flex;flex-direction:column;justify-content:center}
.pf-cap{margin-top:var(--s3)}
/* the process: four glass index discs on one hairline (each segment runs from its disc to the next), lit in turn */
.stp-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gutter)}
.stp{position:relative;min-width:0}
.stp:not(:last-child)::before{content:"";position:absolute;left:calc(var(--btn-l) + 14px);top:calc(var(--btn-l) / 2);width:calc(100% + var(--gutter) - var(--btn-l) - 28px);height:1px;
  background:var(--line);transform-origin:0 50%;transition:transform 720ms var(--ease-iris)}
html.stp-live .stp:not(.is-lit):not(:last-child)::before{transform:scaleX(0)}
.stp-idx,.dec-idx{font:400 13px/1 var(--f-mono);letter-spacing:.02em}
.stp-idx .b-light,.dec-idx .b-light{transition:clip-path 420ms var(--ease-glass)}
.stp-idx>span,.dec-idx>span{transition:color 240ms var(--ease-focus)}
.stp.is-lit .b-light,html.is-static .stp .b-light,html.is-reduced .stp .b-light{--bl:50%}
.stp.is-lit .stp-idx>span,html.is-static .stp-idx>span,html.is-reduced .stp-idx>span{color:var(--ink)}
.stp-h{margin-top:var(--s6);font:500 clamp(28px, 2.6vw, 42px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--fg)}
.stp-p{margin-top:var(--s4);font:400 clamp(16px, 1.2vw, 18px)/1.6 var(--f-sans);color:color-mix(in srgb,var(--fg) 82%,transparent);max-width:24em;text-wrap:pretty}
/* the photo band: full bleed, full colour; its lead on a night veil over the photo's foot; the columns beside it */
.ph{margin-top:var(--s9)}
.ph-band{position:relative;height:min(88svh, 64vw);min-height:420px;overflow:hidden;background:var(--night-2)}
.ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.ph-veil{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,color-mix(in srgb,var(--night) 86%,transparent),color-mix(in srgb,var(--night) 58%,transparent) 30%,#0000 64%)}
.ph-lead{position:absolute;left:0;right:0;bottom:clamp(40px, 7svh, 80px);z-index:1;font:500 clamp(28px, 3.2vw, 52px)/1.1 var(--f-display);letter-spacing:-.028em;
  color:var(--moon);max-width:min(24em, 100%);text-wrap:pretty}
.ph-cols{margin-top:var(--s9)}
.ph-cols>.ph-col:nth-child(1){grid-column:5 / 9}
.ph-cols>.ph-col:nth-child(2){grid-column:9 / 13}
/* the information architecture: its lead-in in the column, then the diagram (light on its night board) beside the
   three paragraphs that walk it */
.w-ia{row-gap:var(--s6);align-items:center}
.w-ia>.w-note{grid-column:5 / 13;grid-row:1}
.w-ia>.pf{grid-column:1 / 7;grid-row:2}
.w-ia>.w-ia-p{grid-column:8 / 13;grid-row:2}
/* the stepped sequence: a stack of its steps (phones, static, reduced: js/work.js turns it into a stage) */
.seq{margin-top:var(--s7)}
.seq-list{display:flex;flex-direction:column;gap:var(--s7)}
.seq-cap{display:flex;gap:14px}
.seq-tab{color:var(--fg)}
.seq-bar{display:none}
.seq-dot{position:relative;width:12px;height:12px;border-radius:50%;padding:0;box-shadow:inset 0 0 0 1px var(--fg-dim);flex:none}
.seq-dot::after{content:"";position:absolute;inset:-8px;border-radius:50%}
.seq-dot .lit{position:absolute;inset:0;border-radius:50%;clip-path:circle(0% at 50% 50%);transition:clip-path 420ms var(--ease-glass)}
.seq-dot.is-on .lit{clip-path:circle(50% at 50% 50%)}
.seq-dot.is-on{box-shadow:none}
@media (hover:hover){.seq-dot:hover{box-shadow:inset 0 0 0 1px var(--fg)}}
/* the features: a stack, each a row (the wireframe on the light, its index, title and line beside it) */
.feat{margin-top:var(--s9)}
.feat-track{display:flex;flex-direction:column;gap:var(--s9);padding-inline:var(--margin)}
.feat-it{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center;row-gap:var(--s3)}
.feat-it>.pl{grid-column:1 / 9;grid-row:1 / 4}
.feat-no{grid-column:9 / 13;align-self:end}
.feat-h{grid-column:9 / 13;font:500 clamp(26px, 2.4vw, 38px)/1.06 var(--f-display);letter-spacing:-.028em;color:var(--fg);text-wrap:balance}
.feat-p{grid-column:9 / 13;align-self:start;font:400 clamp(16px, 1.2vw, 19px)/1.55 var(--f-sans);color:color-mix(in srgb,var(--fg) 84%,transparent);text-wrap:pretty}

/* the index and stat discs on ice light with the lit aurora, the light their ink numbers are set on (the ice's own
   sky sample, --aurora-sky, is the night's dusk: ink on it was unreadable, in GoodWorker's ice Process and Outcome) */
.on-ice .dec-idx .b-light,.on-ice .stp-idx .b-light,.on-ice .st-disc .b-light{background-image:var(--aurora-lit)}
/* lights on ice: the rail's discs, the bullets' stops and the step dots are lit with the favicon's own light (the
   brand dot's treatment on ice, css/system.css), set into the ground by an ink ring. The sky sample the ice gives a
   .lit (--aurora-sky) read as a flat navy dot, not a light */
.on-ice .stg-d .lit,.on-ice .li-stop .lit,.on-ice .seq-dot .lit{background:radial-gradient(circle at 40% 36%,var(--pearl),var(--lit-1) 42%,var(--iris));
  box-shadow:0 0 0 1px color-mix(in oklab,var(--ink) 34%,transparent),inset 0 1px 2px #0000008c}

/* ── 8 · Affinidi's atomic design: the style guide, then the stages beside their rail ─────────────────────────────
   The style guide is the foundation, a tall dark board given the whole grid (the loupe reads its small type). Then the
   rail: five discs growing from atom to page (the stop opening up), sticky beside the stages, each lit while its
   stage is in view (js/work.js stages; UI discs, not image circles). Phones and tablets: a compact disc row stuck
   under the header, naming the stage in view. */
.stg-guide{row-gap:var(--s4);margin-top:var(--s10)}
.stg-guide>.stg-gl{grid-column:4 / 13}
.stg-guide>.stg-gp{grid-column:4 / 11;font:400 clamp(18px, 1.5vw, 22px)/1.55 var(--f-sans);color:color-mix(in srgb,var(--fg) 88%,transparent);text-wrap:pretty}
.stg-guide>.pf--guide{grid-column:1 / -1;margin-top:var(--s6)}
.pf--guide .pl--hug{padding:clamp(20px, 6%, 112px) clamp(20px, 12%, 240px)}
.stg{margin-top:var(--s11);align-items:start}
/* the rail's column is placed with more weight than the tablet .w-b>* rule (r6 review: 1024–1099 stacked the rail on the copy) */
.stg-rail{position:sticky;top:calc(var(--header-h) + 56px);z-index:2}
.w-b.stg>.stg-rail{grid-column:1 / 4}
.stg-rail ol{display:flex;flex-direction:column;gap:14px}
.stg-a{display:flex;align-items:center;gap:14px;border-radius:var(--r-pill);color:var(--fg-dim);font:500 16px/1.2 var(--f-sans);letter-spacing:-.005em;
  transition:color 320ms var(--ease-focus)}
.stg-a.is-on{color:var(--fg)}
.stg-d{position:relative;display:block;flex:none;width:var(--d);height:var(--d);margin-inline:calc((42px - var(--d)) / 2);border-radius:50%;box-shadow:inset 0 0 0 1px var(--fg-dim)}
.stg-d .lit{position:absolute;inset:0;border-radius:50%;clip-path:circle(0% at 50% 50%);transition:clip-path 560ms var(--ease-glass)}
.stg-a.is-on .stg-d .lit{clip-path:circle(50% at 50% 50%)}
.stg-at{display:none}
.w-b.stg>.stg-body{grid-column:4 / 13}
.stage{scroll-margin-top:calc(var(--header-h) + 24px)}
.stage+.stage{margin-top:var(--s11)}
.stage-h{margin-top:var(--s3);font:500 clamp(36px, 4vw, 64px)/1 var(--f-display);letter-spacing:-.034em;color:var(--fg)}
.stage-p{margin-top:var(--s5);font:400 clamp(18px, 1.5vw, 22px)/1.55 var(--f-sans);color:color-mix(in srgb,var(--fg) 88%,transparent);max-width:34em;text-wrap:pretty}
.stage .pf-grid,.stage .seq{margin-top:var(--s7)}

/* ── 9 · key decisions: rows, the media on alternating sides ─────────── */
.dec-list{margin-top:var(--s10);display:flex;flex-direction:column;gap:clamp(112px, 11vw, 176px)}
.dec{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:center}
.dec-text,.dec-fig,.dec-illus{grid-row:1}
.dec[data-side=right] .dec-text{grid-column:1 / 6}
.dec[data-side=right] .dec-fig,.dec[data-side=right] .dec-illus{grid-column:7 / 13}
.dec[data-side=left] .dec-text{grid-column:8 / 13}
.dec[data-side=left] .dec-fig,.dec[data-side=left] .dec-illus{grid-column:1 / 7}
/* the index: the services' glass disc, lit while its row is in view (static: always lit) */
.dec.is-lit .dec-idx .b-light,html.is-static .dec-idx .b-light{--bl:50%}
.dec.is-lit .dec-idx>span,html.is-static .dec-idx>span{color:var(--ink)}
.dec-h{margin-top:var(--s6);font:500 clamp(32px, 3.4vw, 52px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--fg);max-width:12em;text-wrap:balance}
.dec-body{margin-top:var(--s5);font:400 clamp(17px, 1.3vw, 20px)/1.6 var(--f-sans);color:color-mix(in srgb,var(--fg) 82%,transparent);max-width:30em;text-wrap:pretty}
/* the media card: a 4:3 plate, the light filled edge to edge; a device fitted in it, a framed screen, or a detail */
.dm{aspect-ratio:4/3;--fw:.84;--fh:.84}
.dm[data-kind=screen]{--sfh:62;--sfw:84}
.dec-cap{margin-top:var(--s4);font:400 12px/1.4 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim);text-wrap:balance}
/* the illustration slot (js/work-illus.js): the card's box, 4:3, night-2 (the circle diagrams stay, on either tone),
   and until it is filled an unlit aperture ring */
.dec-illus{position:relative;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--night-2);container-type:size;color:var(--moon)}
.dec-illus[data-state=empty]::before{content:"";position:absolute;left:50%;top:50%;width:73.6cqh;height:73.6cqh;margin:-36.8cqh 0 0 -36.8cqh;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--line-night)}

/* ── 10 · final designs: large plates, the loupe on hover, then what each design is ─────────── */
.fd-list{margin-top:var(--s9);display:flex;flex-direction:column;gap:clamp(96px, 9vw, 144px)}
.fdc{aspect-ratio:16/9;max-height:82svh;width:100%;--fw:.84;--fh:.84;--sfw:78;--sfh:78}
.fd[data-kind=screen] .fdc{aspect-ratio:16/10;max-height:90svh;--sfw:88;--sfh:88}   /* r6 review: the payoff is the largest screen on the page */
/* a device render cut at its own edge (heycar's calculator: the laptop's base runs off the image) bleeds off the plate */
.fdc--bleed{--fw:1.02;--fh:.9}
.fd-cap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);margin-top:var(--s5);align-items:baseline}
.fd-cap .label{grid-column:1 / 4}
.fd-main{grid-column:4 / 11;display:flex;flex-direction:column;gap:var(--s3)}
.fd-cap .fd-main:first-child{grid-column:1 / 10}
.fd-title{font:500 clamp(28px, 2.8vw, 44px)/1.04 var(--f-display);letter-spacing:-.03em;color:var(--fg);text-wrap:balance}
.fd-txt{font:500 clamp(18px, 1.6vw, 24px)/1.35 var(--f-sans);letter-spacing:-.01em;color:var(--fg);text-wrap:balance}
.fd-title+.fd-txt{font-size:clamp(16px, 1.2vw, 19px);font-weight:500;color:var(--fg-dim)}
.fd-p{font:400 clamp(16px, 1.25vw, 19px)/1.6 var(--f-sans);color:color-mix(in srgb,var(--fg) 84%,transparent);max-width:36em;text-wrap:pretty}
.fd-note{font:400 12px/1.45 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim);max-width:44em;text-wrap:balance}
h3.fd-title{margin:0}
/* a group (heycar's financing calculator): its H3, the devices, the stepped sequence */
.fd-group{display:flex;flex-direction:column}
.fd-gh{font:600 clamp(40px, 5vw, 84px)/.96 var(--f-display);letter-spacing:-.038em;color:var(--fg)}
.fd--lead{margin-top:var(--s7)}
.fd-group .seq{margin-top:var(--s9)}

/* ── 10b · the eye-candy gallery: the one real render (a Final designs card), then details of its screen ────
   Each detail is a window on the one flat screen (tools/work.py) at one scale: u is the size of one of its pixels,
   1px at 1440 (the grid is 1344 wide), so the UI's text is the same size in every frame. Under 1344 the frames'
   heights and the fragments shrink more slowly than the columns (u ≥ the grid / 1000, up to 1px), so a narrow column
   shows less screen rather than smaller text. Each frame is a plate filled with the project's light; the fragment sits
   inset at its anchor (data-a: tl, tr, bl, br) and bleeds off the other two sides. */
.gal-grid{margin-top:clamp(96px, 10vw, 160px);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--s8);
  align-items:start;container-type:inline-size}
.gd{--u:max(calc(100cqw / 1344), min(1px, calc(100cqw / 1000)));--ix:var(--ixd,60);--iy:var(--iyd,60);min-width:0;margin-top:calc(var(--mt,0) * var(--u))}
.gd[data-span=wide]{grid-column:span 8}
.gd[data-span=narrow]{grid-column:span 4}
.gd[data-span=half]{grid-column:span 6}
.gd[data-span=full]{grid-column:1 / -1}
.gd-f{height:calc(var(--fh) * var(--u))}
/* the fragment: the crop at its own size in u, its anchored corner rounded like the screen's glass */
.gd-scr{position:absolute;z-index:1;width:calc(var(--cw) * var(--u));height:calc(var(--ch) * var(--u));border-radius:calc(14 * var(--u));overflow:hidden;
  background:#fff;box-shadow:0 40px 80px -32px #000000b3,0 0 0 .5px #F3F1F814}
[data-a^=t] .gd-scr{top:calc(var(--iy) * var(--u))}
[data-a^=b] .gd-scr{bottom:calc(var(--iy) * var(--u))}
[data-a$=l] .gd-scr{left:calc(var(--ix) * var(--u))}
[data-a$=r] .gd-scr{right:calc(var(--ix) * var(--u))}
.gd-scr img{display:block;width:100%;height:100%}
.gd-cap{margin-top:var(--s4)}

/* ── 11 · outcome: the numbers as stat discs, then the statement ─────── */
.w-out{--sd:clamp(168px, 15.5vw, 232px)}
.stats{display:flex;flex-wrap:wrap;gap:var(--s6) var(--s7);margin-top:var(--s8)}
.stat{display:flex;flex-direction:column;align-items:center;gap:var(--s4);width:var(--sd)}
.st-disc{width:var(--sd);height:var(--sd)}
/* the light opens slowly from each disc's centre as the row comes into view (static: open) */
.st-disc .b-light{transition:clip-path 900ms var(--ease-iris)}
.st-n{font:600 clamp(64px, 6.6vw, 104px)/1 var(--f-display);letter-spacing:-.045em;color:var(--fg);font-variant-numeric:tabular-nums;transition:color 480ms var(--ease-focus)}
/* the word pair (Affinidi's weeks → days) stacks, the arrow turned down, and scales with its disc like the numerals do:
   .stat .st-n--w outranks the phone .st-n size, which set it at 47px in a 109px disc. Its ink waits for the light to
   open past its ends (the iris takes 900ms from the centre, the numerals' 480ms ink was early on a wide word) */
.stat .st-n--w{display:inline-flex;flex-direction:column;align-items:center;gap:0;font-size:calc(var(--sd) * .17);line-height:.92;letter-spacing:-.03em;
  transition:color 480ms var(--ease-focus) 380ms}
.st-n--w .to{display:block;margin:.1em 0 .04em;line-height:0}
.st-n--w .to .arr{width:.62em;height:.62em;vertical-align:0;transform:rotate(90deg)}
.stat.is-lit .b-light,html.is-static .stat .b-light,html.is-reduced .stat .b-light{--bl:50%}
.stat.is-lit .st-n,html.is-static .st-n,html.is-reduced .st-n{color:var(--ink)}
.st-l{font:400 var(--t-micro)/1.4 var(--f-mono);letter-spacing:.02em;color:var(--fg-dim);text-align:center;max-width:100%;text-wrap:balance}
.w-outcome{margin-top:var(--s8);font:600 clamp(36px, 4.6vw, 80px)/1.02 var(--f-display);letter-spacing:-.038em;color:var(--fg);max-width:17em;text-wrap:pretty}
.w-out .label+.w-outcome{margin-top:var(--s7)}
/* a single stat (GoodWorker's 10): beside the statement, at its end, not a row of one above it */
@media (min-width:1024px){
  .w-out--one{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter);align-items:end}
  .w-out--one>.label{grid-column:1 / -1}
  .w-out--one .stats{grid-column:10 / 13;grid-row:2;justify-self:end;margin:0}
  .w-out--one .w-outcome{grid-column:1 / 10;grid-row:2;margin-top:var(--s8);max-width:none}
}
.w-outcome .w{display:inline-block}
.w-outcome .stop{--sk:1.2}

/* ── 12 · next project: one link, the next hero in miniature. Filled edge to edge with the light like the hero, the
   next device large on it (right), the number and headline top left, the name across the bottom as large as the width
   allows (--nfs, js/work.js), the arrow disc at its end; the veil under the words. Hover racks the device into focus,
   lifts the veil a little and lights the arrow; a click grows the band's light to the whole viewport (js/handoff.js). */
/* the name is display type (3:1 is its bar, it measured 6.6–8 under the full veil), so its veil is lighter: the band's
   foot meets the footer's light without a dark ledge */
.w-next{position:relative;overflow:clip;z-index:3;border-top:1px solid var(--line-night);--nb:clamp(40px, 7svh, 72px);--wv-name:.34}
.w-next .w-veil{background:
  linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 240px),
  radial-gradient(58% 72% at 0% 0%,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 90%),transparent) 40%,#0000 100%),
  linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv-name) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv-name) * 80%),transparent) calc(var(--nb) + var(--nfs,224px) * .7),#0000 calc(var(--nb) + var(--nfs,224px) * 1.5))}
.w-next.is-hover .w-veil,.w-next:has(.nx-link:focus-visible) .w-veil{opacity:.8}
.nx-link{position:relative;z-index:2;display:block;min-height:max(100svh, 720px);color:var(--moon);border-radius:0}
.nx-link:focus-visible{outline-offset:-8px;border-radius:var(--r-card)}
.nx-stage{position:absolute;left:44%;right:var(--margin);top:calc(var(--header-h) + 84px);bottom:calc(var(--nb) + var(--nfs,224px) * .8 + 32px);container-type:size;pointer-events:none}
.nx-stage .st-dev{--fw:1;--fh:1}
.nx-copy{position:absolute;inset:0;padding:0 var(--margin);pointer-events:none}
.nx-no{position:absolute;left:var(--margin);top:calc(var(--header-h) + 88px)}
.nx-title{position:absolute;left:var(--margin);top:calc(var(--header-h) + 124px);width:min(32vw, 12.5em);
  font:500 clamp(24px, 2.4vw, 38px)/1.12 var(--f-display);letter-spacing:-.025em;color:var(--moon);text-wrap:balance}
.nx-title .w{display:inline-block}
.nx-name{position:absolute;left:var(--margin);bottom:var(--nb);display:block;white-space:nowrap;
  font:600 var(--nfs,clamp(96px, 15.5vw, 224px))/.8 var(--f-display);letter-spacing:-.05em;color:var(--moon);padding-right:.04em}
/* the arrow: a glass disc that lights (the card's button), on the name's line at the right margin */
.nx-go{position:absolute;right:var(--margin);bottom:var(--nb);color:var(--moon)}
.nx-go .arr{width:22px;height:22px;vertical-align:0;transition:color 240ms var(--ease-focus),transform 320ms var(--ease-glass)}
.nx-go .b-light{transition:clip-path 420ms var(--ease-glass)}
.w-next.is-hover .nx-go .b-light,.nx-link:focus-visible .nx-go .b-light{--bl:50%}
.w-next.is-hover .nx-go .arr,.nx-link:focus-visible .nx-go .arr{color:var(--ink);transform:translateX(3px)}
.nx-label{position:absolute;z-index:3;left:var(--margin);top:calc(var(--header-h) + 40px);pointer-events:none}
.nx-back{position:absolute;z-index:3;right:var(--margin);top:calc(var(--header-h) + 28px)}

/* ── 13 · the hero's pre-intro state (html.hero-pre, set before the first paint; js/work.js lifts it) ────────────
   The copy, device and meta wait out of focus; the light waits closed (js/work.js keeps the field's clip at 0 until
   the intro irises it open, or an arrival cover already holds the light, html.is-arriving). */
html.hero-pre .wh-back,html.hero-pre .wh-label,html.hero-pre .wh-name,html.hero-pre .wh-title .w,html.hero-pre .wh-tags .tag,
html.hero-pre .wm,html.hero-pre .wh-stage .st-dev{opacity:0}
html.hero-pre .wh-title .stop{--sr:0%}
/* the head's bail (the scripts took more than 2.5s): the hero still arrives as a focus-in, not a pop */
@keyframes w-bail{from{opacity:0;filter:blur(10px)}}
html.hero-bailed .wh-stack,html.hero-bailed .wh-meta,html.hero-bailed .wh-stage .st-dev{animation:w-bail 460ms var(--ease-focus)}

/* ── 14 · wide screens, live: the sticky stages (js/work.js sequences and features set html.seq-live / feat-live) ──
   A sequence is a sticky stage the scroll steps through, one step per --step of scroll: its steps share one place and
   the current one is in focus (the others out of focus, underneath), the step dots and the "03 / 07" readout under
   it. The features ride sideways on a sticky track (--fx, the scroll's share of --travel). */
@media (min-width:1024px) and (min-height:620px){
  html.seq-live .seq{--step:var(--seq-step,52svh);height:calc(100svh - var(--header-h) + (var(--n) - 1) * var(--step))}
  html.seq-live .seq-stage{position:sticky;top:var(--header-h);height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;
    padding-block:var(--s4) var(--s5)}
  html.seq-live .seq-list{display:grid;gap:0}
  html.seq-live .seq-step{grid-area:1 / 1;opacity:0;filter:blur(10px);transition:opacity 420ms var(--ease-focus),filter 420ms var(--ease-focus);pointer-events:none}
  html.seq-live .seq-step.is-on{opacity:1;filter:none;pointer-events:auto}
  html.seq-live .seq-step .pf{width:min(100%, (100svh - var(--header-h) - 150px) * var(--sa) * 1.02)}
  html.seq-live .seq-cap{display:none}
  html.seq-live .seq-bar{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s5)}
  html.seq-live .seq-dots{display:flex;align-items:center;gap:14px}
  html.seq-live .seq-rt:not(:empty)::before{content:" · "}
  html.seq-live .seq-read{color:var(--fg-dim)}
  html.seq-live .seq-at,html.seq-live .seq-rt{color:var(--fg)}
  /* where the grid leaves room beside the step (heycar's calculator, full width), the dots and the readout stand at its
     foot on the right, a caption beside the screen; in a narrower column (Affinidi's pages) they sit under it */
  html.seq-live .seq{container-type:inline-size}
  @container (min-width:1200px){
    html.seq-live .seq-stage{flex-direction:row;align-items:flex-end;justify-content:flex-start;gap:var(--s7)}
    html.seq-live .seq-list{flex:none;width:min(calc(100% - 280px), (100svh - var(--header-h) - 80px) * var(--sa))}
    html.seq-live .seq-step .pf{width:100%}
    html.seq-live .seq-bar{flex-direction:column;align-items:flex-start;gap:var(--s4);margin:0 0 var(--s4)}
    /* the step over its tab, two lines: the UI's own tab name is the caption's second line */
    html.seq-live .seq-read{flex-direction:column;align-items:flex-start;gap:6px;font-size:13px}
    html.seq-live .seq-rt:not(:empty)::before{content:none}
  }
  html.feat-live .feat{height:calc(100svh + var(--travel,2000px))}
  html.feat-live .feat-pin{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;align-items:center}
  html.feat-live .feat-track{flex-direction:row;gap:var(--s7);padding-top:var(--header-h);transform:translate3d(calc(var(--fx,0) * -1px),0,0);will-change:transform}
  html.feat-live .feat-it{flex:none;width:min(46vw, (100svh - var(--header-h) - 260px) * 1.406);display:flex;flex-direction:column;align-items:stretch;gap:0}
  html.feat-live .feat-it>.pl{width:100%}
  html.feat-live .feat-no,html.feat-live .feat-h,html.feat-live .feat-p{align-self:auto}
  html.feat-live .feat-no{margin-top:var(--s5)}
  html.feat-live .feat-h{margin-top:var(--s3)}
  html.feat-live .feat-p{margin-top:var(--s3);max-width:28em}
}

/* ── 15 · stacked: under 768, and portrait tablets (taller than wide) ─────────── */
/* r6 review: short landscapes (a phone on its side, a short window) stack too, so the headline never grows under the header */
@media (max-width:767px),(max-width:1100px) and (max-aspect-ratio:20/23),(max-height:540px) and (orientation:landscape){
  .w-hero{--stacked:1;height:auto;min-height:100svh;display:flex;flex-direction:column;--stg-h:min(66vw, 40svh);
    padding-top:calc(var(--header-h) + var(--stg-h) + 20px);padding-bottom:var(--s7)}
  .w-hero .w-veil{background:
    linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 150px),
    linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 96%),transparent) calc(100% - var(--header-h) - var(--stg-h) - 40px),#0000 calc(100% - var(--header-h) - var(--stg-h) * .45))}
  .wh-stage{left:var(--margin);right:var(--margin);top:calc(var(--header-h) + 4px);bottom:auto;height:var(--stg-h)}
  .wh-stack{position:relative;z-index:3;left:auto;bottom:auto;width:auto;padding:0 var(--margin)}
  .wh-back{margin-bottom:var(--s6)}
  .wh-title{font-size:clamp(38px, 10.4vw, 72px);line-height:.98;letter-spacing:-.035em;padding-right:0}
  .wh-meta,.wh-meta--5{position:relative;left:auto;right:auto;bottom:auto;margin:var(--s7) var(--margin) 0;grid-template-columns:repeat(2,minmax(0,1fr))}
  .wh-meta.wh-meta--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wm{padding:16px 16px 18px}
  .wm:nth-child(odd){border-left:0;padding-left:0}
  .wm:nth-child(n+3){border-top:1px solid var(--line)}
  .wm--link:nth-child(5){grid-column:1 / -1;border-left:0;padding-left:0}
  /* three across (Bandcamp): one row, so the two-column pattern's odd/row-two rules don't apply */
  .wh-meta--3 .wm:nth-child(3){border-left:1px solid var(--line);padding-left:16px;border-top:0}
}
/* tablets: the offset columns would be 150px wide at 768 */
@media (min-width:768px) and (max-width:1099px){
  .what-cols p:nth-child(1),.ph-cols>.ph-col:nth-child(1){grid-column:1 / 7}
  .what-cols p:nth-child(2),.ph-cols>.ph-col:nth-child(2){grid-column:7 / 13}
  .w-b>*{grid-column:3 / 13}
  .w-b--full>*,.w-ia>.pf{grid-column:1 / -1}
  .w-ia>.w-note{grid-column:1 / -1}
  .w-ia>.pf{grid-column:1 / 8}
  .w-ia>.w-ia-p{grid-column:8 / 13}
}
/* tablets and small laptops: the stages lose the side rail for the compact row; the process wraps two by two */
@media (max-width:1023px){
  .stg{display:block}
  .stg-rail{position:sticky;top:calc(var(--header-h) + 10px);z-index:4;display:flex;justify-content:center;margin-bottom:var(--s8);pointer-events:none}
  .stg-rail ol{flex-direction:row;align-items:center;gap:6px;padding:7px 14px 7px 10px;border-radius:var(--r-pill);pointer-events:auto;
    background:color-mix(in srgb,var(--ground) 80%,transparent);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:inset 0 0 0 1px var(--line)}
  .stg-a{gap:0}
  .stg-d{width:calc(var(--d) * .5 + 4px);height:calc(var(--d) * .5 + 4px);margin-inline:0}
  .stg-a{width:28px;height:28px;justify-content:center}
  .stg-n{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .stg-rail ol::after{content:attr(data-at);display:block;margin-left:10px;font:400 var(--t-micro)/1 var(--f-mono);letter-spacing:.02em;color:var(--fg);min-width:6.5em}
  .stg-rail li{list-style:none}
  .stp-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s8)}
  .stp:nth-child(2)::before{display:none}
  .dec{display:flex;flex-direction:column;align-items:stretch;gap:var(--s7)}
  .dec-h{max-width:14em}
}
/* portrait tablets: the Next band stacks like the hero (the device on top, the copy under it), with tablet sizes */
@media (min-width:768px) and (max-width:1100px) and (max-aspect-ratio:20/23){
  .nx-stage{left:var(--margin);top:calc(var(--header-h) + 96px);bottom:auto;height:min(40svh, 56vw)}
  .nx-no{top:calc(var(--header-h) + 128px + min(40svh, 56vw) + 24px)}
  .nx-title{top:calc(var(--header-h) + 128px + min(40svh, 56vw) + 56px);width:auto;right:var(--margin);max-width:24em}
}
@media (max-width:767px){
  .w-sec{padding-top:var(--s9);padding-bottom:var(--s9)}
  .pl{border-radius:var(--r-card-m)}
  .w-b{display:block;margin-top:var(--s7)}
  .w-head+.w-b{margin-top:var(--s8)}
  .h2--statement{font-size:clamp(34px, 9.4vw, 44px);line-height:1}
  .w-brief{padding-top:var(--s9);padding-bottom:var(--s10)}
  .w-statement{margin-top:var(--s5);font-size:clamp(28px, 8.2vw, 36px);line-height:1.1}
  .what-cols{display:flex;flex-direction:column;gap:var(--s5);margin-top:var(--s7)}
  .what-cols p,.w-p p,.ph-col p,.w-ia-p p,.stg-gp,.stage-p{font-size:18px}
  .w-p--2{columns:1}
  .w-lead{font-size:clamp(24px, 6.6vw, 28px);line-height:1.18}
  .w-b .w-list{margin-top:var(--s5)}
  .w-list li{font-size:19px;gap:14px;padding:16px 0 17px}
  .w-qt{font-size:clamp(34px, 9.6vw, 44px);line-height:1.02}
  .w-b:has(.w-list)+.w-b--full:has(.w-quote){margin-top:var(--s8)}
  .pf-grid{display:flex;flex-direction:column;gap:var(--s6)}
  .stp-list{display:flex;flex-direction:column;gap:var(--s7)}
  .stp{padding-left:calc(48px + 20px)}
  .stp-idx{position:absolute;left:0;top:0;width:48px;height:48px;font-size:11px}
  .stp:not(:last-child)::before{display:block;left:24px;top:calc(48px + 10px);width:1px;height:calc(100% + var(--s7) - 48px - 20px);transform-origin:50% 0}
  .stp:nth-child(2)::before{display:block}
  html.stp-live .stp:not(.is-lit):not(:last-child)::before{transform:scaleY(0)}
  .stp-h{margin-top:6px;font-size:28px}
  .stp-p{font-size:17px;margin-top:var(--s3)}
  .ph{margin-top:var(--s8)}
  /* the photo at its own aspect (its width/height), the lead under it on the section's ground, in the section's ink */
  .ph-band{height:auto;min-height:0;overflow:visible;background:none}
  .ph-img{position:relative;display:block;height:auto}
  .ph-veil{display:none}
  .ph-lead{position:relative;bottom:auto;margin-top:var(--s6);font-size:clamp(24px, 6.6vw, 28px);line-height:1.16;color:var(--fg)}
  .ph-band.on-night{--fg:inherit;color:inherit}
  .ph-cols{margin-top:var(--s6)}
  .ph-col+.ph-col{margin-top:1em}
  .w-ia>.pf{margin-top:var(--s5)}
  .w-ia-p{margin-top:var(--s6)}
  .feat-track{gap:var(--s8)}
  .feat-it{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .feat-no,.feat-h,.feat-p{align-self:auto}
  .feat-no{margin-top:var(--s4)}
  .feat-h{margin-top:var(--s2);font-size:26px}
  .feat-p{margin-top:var(--s2);font-size:17px}
  .stg-guide{margin-top:var(--s8)}
  .stg-guide>.stg-gp{margin-top:var(--s3)}
  .stg-guide>.pf--guide{margin-top:var(--s6)}
  .pf--guide .pl--hug{padding:16px}
  .stg{margin-top:var(--s9)}
  .stage+.stage{margin-top:var(--s10)}
  .stage-h{font-size:36px}
  .dec-list{margin-top:var(--s8);gap:var(--s9)}
  .dec{gap:var(--s6)}
  .dec-idx{width:48px;height:48px;font-size:11px}
  .dec-h{margin-top:var(--s5);font-size:clamp(28px, 8vw, 34px)}
  .dec-body{font-size:17px;margin-top:var(--s4)}
  .dec-illus{border-radius:var(--r-card-m)}
  .st-det>*{left:calc(var(--mcx, var(--cx)) * -1px);top:calc(var(--mcy, var(--cy)) * -1px)}
  .fd-list{margin-top:var(--s7);gap:var(--s9)}
  .fdc{aspect-ratio:4/5;max-height:none;--fw:.86;--fh:.7;--sfw:84;--sfh:66}
  /* a device's plate takes its shape from the device (a MacBook's is wider than a phone stack's): no tall band of empty
     light round a wide render on a narrow screen */
  .fdc[data-kind=device]{aspect-ratio:clamp(1, calc(var(--pbar, 1.4) * .8), 1.5);--fw:.9;--fh:.8}
  .fd[data-kind=screen] .fdc{aspect-ratio:4/3;--sfw:90;--sfh:80}
  .fdc--bleed{aspect-ratio:1.5;--fw:1.04;--fh:.86}
  /* a wide board pans: twice the plate's width inside it, scrolled sideways by touch (the page never widens) */
  .pl--pan{padding:0}
  .pl-pan{position:relative;z-index:1;display:block;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:16px}
  .pl-pan::-webkit-scrollbar{display:none}
  .pl-pan>.pl-bd{width:210%}
  .fd-cap{display:flex;flex-direction:column;gap:var(--s3);margin-top:var(--s4)}
  .fd-title{font-size:28px}
  .fd-txt{font-size:18px}
  .fd-p{font-size:17px}
  .fd-gh{font-size:32px}
  /* the gallery: one column; every frame a window 550 u wide (u ≈ .65px at 390: the render's own pixel size) */
  .gal-grid{display:flex;flex-direction:column;align-items:stretch;gap:var(--s7);margin-top:var(--s8)}
  .gd{--u:calc(100cqw / 550);--ix:36;--iy:36;margin-top:0}
  .gd-f{height:calc(var(--mh, calc(var(--fh) - 24)) * var(--u))}
  .gd-cap{margin-top:var(--s3)}
  [data-a$=l] .gd-scr{left:calc((var(--ix) - var(--msx,0)) * var(--u))}
  [data-a$=r] .gd-scr{right:calc((var(--ix) - var(--msx,0)) * var(--u))}
  .w-out{--sd:clamp(96px, 28vw, 132px)}
  .stats{margin-top:var(--s6);gap:var(--s5) var(--s3);justify-content:space-between}
  .st-n{font-size:clamp(40px, 12vw, 56px)}
  .st-l{font-size:10px}
  .w-outcome{font-size:clamp(26px, 7.2vw, 30px);line-height:1.04;margin-top:var(--s7)}
  .w-next{--nb:40px}
  .nx-link{min-height:max(92svh, 700px)}
  .nx-label{top:calc(var(--header-h) + 20px)}
  .nx-back{top:calc(var(--header-h) + 8px)}
  .nx-stage{left:var(--margin);right:var(--margin);top:calc(var(--header-h) + 72px);bottom:auto;height:min(64vw, 36svh)}
  .nx-no{top:calc(var(--header-h) + 96px + min(64vw, 36svh) + 24px)}
  .nx-title{top:calc(var(--header-h) + 96px + min(64vw, 36svh) + 52px);width:auto;right:var(--margin);font-size:22px}
  .nx-name{font-size:var(--nfs,56px)}
  .nx-go{width:48px;height:48px;bottom:36px}
  .w-next .w-veil{background:
    linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 140px),
    linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 94%),transparent) 52%,#0000 72%)}
}

/* ── 11b · the veil, per scheme (tokens, measured: _qa/05-full-stop/work/r6/filled/contrast). The light's brightest
   point under the words sets them; sodium's yellow is the brightest light of the five. ── */
html[data-theme=sodium] .w-lit{--wv:.72;--wv-top:.56;--wv-foot:.66}
html[data-theme=sodium] .w-next{--wv-name:.44}
html[data-theme=borealis] .w-lit{--wv:.7;--wv-top:.52;--wv-foot:.62}
html[data-theme=ember] .w-lit{--wv:.64;--wv-top:.48;--wv-foot:.58}

/* ── r6 review fixes ─────────────────────────────────────────────────────────────────────────────────────────── */
/* the portal pages are glanced, the calculator's steps are read: a shorter scroll per step for the pages */
#atomic .seq{--seq-step:34svh}
/* the header's section pill over the lit hero (no scrim until scroll): the lit pills' own night fill, AA at 12px */
.work-page .site-header:not(.is-scrolled) .f-pill{background-color:color-mix(in srgb,var(--night) 46%,transparent)}
/* landscape tablets and small laptops: the headline column reaches the bright centre, so the veil widens and deepens */
@media (min-width:768px) and (max-width:1279px){
  .w-hero .w-veil{background:
    linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 210px),
    linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv-foot) * 100%),transparent),#0000 calc(var(--meta-h) + 150px)),
    radial-gradient(86% 128% at 0% 100%,color-mix(in srgb,var(--night) calc((var(--wv) + .08) * 100%),transparent),color-mix(in srgb,var(--night) calc((var(--wv) + .08) * 94%),transparent) 52%,#0000 100%)}
}
/* portrait tablets: the Next band's copy sits under the device, so the whole stack gets the phones' night foot */
@media (min-width:768px) and (max-width:1100px) and (max-aspect-ratio:20/23){
  .w-next .w-veil{background:
    linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),#0000 240px),
    linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 94%),transparent) 52%,#0000 72%)}
}
/* phones: 'Next project' sits under the header, so the top of the band holds its night longer */
@media (max-width:767px){
  .w-next .w-veil{background:
    linear-gradient(color-mix(in srgb,var(--night) calc(var(--wv-top) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv-top) * 90%),transparent) calc(var(--header-h) + 48px),#0000 calc(var(--header-h) + 110px)),
    linear-gradient(0deg,color-mix(in srgb,var(--night) calc(var(--wv) * 100%),transparent),color-mix(in srgb,var(--night) calc(var(--wv) * 94%),transparent) 52%,#0000 72%)}
}
/* a hyphenated compound never breaks at its hyphen in a display line */
.nw{white-space:nowrap}
.pl-pan:focus-visible{border-radius:inherit;outline-offset:-3px}

/* ── polish review (make-interfaces-feel-better, 2026-10-01) ─────────────────────────────────────────────────────
   Scoped to the work pages; the homepage keeps its approved state. */
/* wrapping: the short notes avoid one-word orphans, the footer line breaks at its sentences */
.w-note{text-wrap:pretty}
.work-page .ft-line{text-wrap:balance}
/* line length: side-by-side columns sit at least 2.2em apart, and the supporting copy stays near 68 characters */
@media (min-width:768px){.what-cols p:nth-child(1),.ph-cols>.ph-col:nth-child(1){padding-right:var(--s5)}}
.w-p--2{column-gap:var(--s7)}
.fd-p,.stage-p{max-width:31em}
/* hit areas: the back pill keeps a 10px buffer, so a near miss on the Next band goes Back (where it aimed), never forward;
   the step dots abut at a 32px pitch (32×40 targets, no overlap); the rail's links and the meta links reach 40–45px */
.pill--back::after{content:"";position:absolute;inset:-10px;border-radius:inherit}
html.seq-live .seq-dots{gap:20px}
.seq-dot::after{inset:-14px -10px;border-radius:0}
.stg-a{position:relative}
.stg-a::after{content:"";position:absolute;inset:-7px 0}
@media (max-width:1023px){.stg-a::after{inset:-7px -3px}}
.wm dd a{position:relative}
.wm dd a::after{content:"";position:absolute;inset:-13px -4px}
/* concentric radii on phones: plate r24 = 12 of light + the frame's r12 (bezel 5 + screen 7) */
@media (max-width:767px){
  .pl--hug,.pl-pan,.pf--guide .pl--hug{padding:12px}
  .scr{--bz:5px;border-radius:calc(var(--bz) + 7px)}
  .scr img,.scr-tint{border-radius:7px}
}
/* press: the pills answer a tap at the system's .96, like the homepage's See-the-work badge */
.work-page .pill{transition:scale 150ms ease-out}
.work-page .pill:active{scale:.96}
/* staged entrance: the numerals turn ink once the light has opened past them, not before (the iris starts slow) */
.stat .st-n:not(.st-n--w){transition-delay:300ms}   /* the word pair keeps its own wait (§11) */
html.is-static .st-n,html.is-reduced .st-n{transition-delay:0ms}
/* the meta strip's rule waits for its cells instead of standing alone on the night before the intro */
html.hero-pre .wh-meta{border-top-color:transparent}
.wh-meta{transition:border-top-color 480ms var(--ease-focus) 600ms}
/* icons: one stroke for the one icon set, the burger's 1.75px at every size; heavier beside the 600 display stat */
.work-page .arr path{vector-effect:non-scaling-stroke;stroke-width:var(--arr-sw,1.75px)}
.work-page .st-n--w .to .arr{--arr-sw:max(1.5px, .06em)}
/* the back arrow nudges for keyboard focus as it does for hover */
.pill--back:focus-visible .chip .arr--back{transform:scaleX(-1) translateX(2px)}