/* ============================================================
   DELVO DIGITAL — shared design system
   Ground/ink measured from the reference; accent #652a97.
   Committed dark look. color-scheme: dark. Normal scroll.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face{
  font-family:'Instrument Sans';
  src:url('fonts/InstrumentSans-var.woff2') format('woff2');
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Sometype Mono';
  src:url('fonts/SometypeMono-500.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- tokens ---------- */
:root{
  color-scheme:dark;
  --canvas:#1a1c1c;
  --canvas-deep:#141617;         /* behind panels, footer well */
  --panel:#25272b;               /* OKLab ΔL +0.024 vs canvas, positive sign */
  --panel-2:#2b2d32;             /* hover lift */
  --accent:#652a97;
  --accent-hover:#7b3ab4;
  --accent-focus:#9b5fd0;        /* 4.1:1 on canvas */
  --accent-muted:rgba(101,42,151,.35);
  --ink:#f9f4eb;                 /* 15.6:1 on canvas */
  --ink-2:rgba(249,244,235,.66); /* secondary text, 9.6:1 */
  --hairline:rgba(249,244,235,.2);
  --hairline-strong:rgba(249,244,235,.5);  /* interactive borders ≥3:1 */
  --field-line:rgba(249,244,235,.32);      /* form fields: ≥3:1 without shouting */
  --card-line:rgba(249,244,235,.14);       /* border lighter than panel fill */
  --mono:'Sometype Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --sans:'Instrument Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.23,.86,.28,1);
  --ease-soft:cubic-bezier(.33,.02,.2,1);
  --tshadow:0 1px 2px rgba(8,6,12,.95),0 3px 12px rgba(8,6,12,.78),0 10px 44px rgba(8,6,12,.8);
  --pad:24px;
  --max:1264px;
  --chrome-top:82px;             /* pill nav clearance */
}

/* ---------- reset-lite ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:hidden;overflow-x:clip;scroll-padding-top:96px}
body{overflow-x:hidden;overflow-x:clip}
html{background:var(--canvas)}
body{
  background:var(--canvas);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--accent);color:var(--ink)}

/* focus is never disabled: only non-keyboard focus drops the ring, and only
   where :focus-visible is supported to put it back */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--accent-focus);outline-offset:2px}

.skip{
  position:fixed;left:16px;top:-64px;z-index:200;padding:12px 18px;
  background:var(--panel);border:1px solid var(--hairline-strong);border-radius:6px;
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:-.2px;text-transform:uppercase;
  transition:top .2s var(--ease);
}
.skip:focus-visible{top:16px}

.sr{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------- type ---------- */
.d1{font-size:clamp(40px,5.4vw,72px);font-weight:700;line-height:1.04;letter-spacing:-.02em}
.d2{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.015em}
.h3{font-size:clamp(22px,2.2vw,30px);font-weight:400;line-height:1.22;letter-spacing:-.01em}
.lede{font-size:19px;line-height:1.55;color:var(--ink-2)}
.body-2{color:var(--ink-2)}
.mono,.kick,.chip,.dec{
  font-family:var(--mono);font-weight:500;font-size:10px;
  letter-spacing:-.2px;text-transform:uppercase;
}
.kick{color:var(--ink-2);display:inline-flex;align-items:center;gap:8px}
.kick::before{content:"";width:8px;height:8px;border:1px solid var(--hairline-strong);display:inline-block}
p+p{margin-top:1em}

/* ---------- environment layer ---------- */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{ /* fine film grain: photographic, never a lattice */
  content:"";position:absolute;inset:0;
  background-image:url('grain.8ab885c4.png');
  background-size:128px 128px;opacity:.05;
}
.env::after{ /* one slow violet pool, whisper level */
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(ellipse 44% 36% at 30% 22%,rgba(101,42,151,.1),transparent 62%);
  animation:envdrift 96s var(--ease-soft) -12s infinite alternate;
}
@keyframes envdrift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(9%,7%,0)}
}
.env .pt{
  position:absolute;width:3px;height:3px;border-radius:50%;
  background:var(--accent-focus);opacity:.12;
  animation:ptdrift var(--ptd,70s) linear var(--ptn,-20s) infinite;
}
@keyframes ptdrift{
  from{transform:translate3d(0,12vh,0)}
  to{transform:translate3d(var(--ptx,4vw),-112vh,0)}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

main{position:relative;z-index:1}

/* ---------- pill nav ---------- */
.pill{
  position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:100;
  display:flex;align-items:center;gap:14px;
  width:min(calc(100% - 32px),560px);height:50px;padding:0 8px 0 16px;
  /* fill LIGHTER than the ground: elevation sign positive (standard 1.1) */
  background:rgba(43,45,50,.97);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--hairline);border-radius:6px;
}
.pill .mark{display:flex;align-items:center;flex:0 0 auto}
.pill .mark{gap:10px}
.pill .mark svg{display:block;border-radius:6px}
.pill .mark-name{font-weight:700;font-size:17px;letter-spacing:normal;line-height:1;
  transform:translateY(-1px)}   /* optical alignment to the mark's center */
@media (max-width:560px){
  .pill .mark-name{display:none}
}
.pill .plabel{
  flex:1 1 auto;text-align:center;color:var(--ink);
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0;
}
.pill .menu-btn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  min-height:36px;padding:0 12px;border-radius:4px;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;
  border:1px solid transparent;transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.pill .menu-btn:hover{border-color:var(--hairline-strong)}
.pill .menu-btn .bars{display:inline-flex;flex-direction:column;gap:3px}
.pill .menu-btn .bars i{width:14px;height:2px;background:var(--ink);transition:transform .3s var(--ease)}
body.menu-open .pill .menu-btn .bars i:first-child{transform:translateY(2.5px) rotate(45deg)}
body.menu-open .pill .menu-btn .bars i:last-child{transform:translateY(-2.5px) rotate(-45deg)}
/* with the menu open the pill rides ABOVE the overlay, so the X stays visible and clickable */
body.menu-open .pill{z-index:160}

/* ---------- contact card (desktop, the reference position) ---------- */
.touchcard{
  position:fixed;right:16px;top:16px;z-index:100;width:184px;
  display:none;text-shadow:var(--tshadow);
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
/* flat card over scrolling content is unreadable; past the top it yields to
   the pill and the status bar, which carry the same two affordances */
body.scrolled .touchcard{opacity:0;visibility:hidden;pointer-events:none}
.touchcard .tc-k{color:var(--ink-2);display:block;margin-bottom:10px}
.touchcard a{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  padding:7px 0;
  font-size:14px;transition:color .2s var(--ease);
}
.touchcard a:hover{color:var(--accent-focus)}
.touchcard a .tc-x{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--ink-2)}
@media (min-width:1024px){.touchcard{display:block}}

/* ---------- status bar ---------- */
.statusbar{
  position:fixed;left:0;right:0;bottom:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  min-height:36px;padding:0 16px calc(env(safe-area-inset-bottom,0px)/1.5);
  /* lighter than the ground, same sign as the pill */
  background:rgba(40,42,47,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--hairline);
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;
  white-space:nowrap;
}
.statusbar>*{flex:0 0 auto}
.statusbar .sb-loc{color:var(--ink-2)}
.statusbar .sb-clock{color:var(--ink-2)}
.statusbar .sb-clock .dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  /* muted: the fold image's violet is the second accent carrier now */
  background:rgba(249,244,235,.4);margin:0 2px;vertical-align:1px;
  animation:blink 2.4s steps(1) -1s infinite;
}
@keyframes blink{0%,70%{opacity:1}70.1%,100%{opacity:.25}}
.statusbar .sb-tel{
  display:inline-flex;align-items:center;min-height:36px;padding:0 2px;
  color:var(--ink);transition:color .2s var(--ease);
}
.statusbar .sb-tel:hover{color:var(--accent-focus)}
@media (pointer:coarse){
  .statusbar{min-height:44px}
  .statusbar .sb-tel{min-height:44px}
}
/* the clock drops BEFORE the location: FAIRFIELD, CA is the differentiator on a phone */
@media (max-width:560px){.statusbar .sb-clock{display:none}}
@media (max-width:340px){.statusbar .sb-loc{display:none}}

/* ---------- menu overlay ---------- */
.menu{
  position:fixed;inset:0;z-index:150;background:rgba(20,21,24,.98);
  display:flex;flex-direction:column;justify-content:center;
  padding:96px var(--pad) 72px;
  visibility:hidden;opacity:0;pointer-events:none;
  transition:opacity .32s var(--ease),visibility 0s linear .32s;
}
body.menu-open .menu{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .32s var(--ease)}
.menu ul{max-width:var(--max);margin:0 auto;width:100%}
.menu a.mlink{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:18px 4px;font-size:clamp(30px,4.5vw,52px);font-weight:700;
  letter-spacing:-.015em;line-height:1.05;
  transition:padding-left .3s var(--ease),color .3s var(--ease);
}
.menu a.mlink:hover{padding-left:18px;color:var(--accent-focus)}
.menu a.mlink .mn{font-family:var(--mono);font-weight:500;font-size:10px;color:var(--ink-2)}
.menu .mmeta{
  max-width:var(--max);margin:28px auto 0;width:100%;
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;color:var(--ink-2);
}
.menu .mmeta a{color:var(--ink);min-height:44px;display:inline-flex;align-items:center}
.menu .mmeta a:hover{color:var(--accent-focus)}

/* ---------- layout primitives ---------- */
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.sec{position:relative;padding:96px 0}
.sec-rule{}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:40px}
@media (max-width:720px){
  :root{--pad:16px}
  .sec{padding:64px 0}
}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.chiprow{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 26px;border-radius:6px;
  font-size:15px;font-weight:700;letter-spacing:-.01em;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
}
.btn:active{transform:scale(.985)}
.btn-accent{background:var(--accent);color:var(--ink)}
.btn-accent:hover{background:var(--accent-hover)}
.btn-ghost{border:1px solid var(--hairline-strong);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(249,244,235,.05)}
.btn .bx{font-family:var(--mono);font-weight:500;font-size:10px}

/* ---------- cards ---------- */
.card{position:relative}
.card .c-k{display:block;margin-bottom:14px;color:var(--ink-2)}
.card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin-bottom:10px}
.card p{color:var(--ink-2);font-size:15px}

/* ---------- entrances (choreographed, retire-able) ---------- */
@media (prefers-reduced-motion:no-preference){
  .sec .rev{opacity:0;transform:translateY(14px);
    transition:opacity .55s var(--ease),transform .55s var(--ease);
    transition-delay:var(--d,0s)}
  .sec.in .rev{opacity:1;transform:none}
  .sec.settled .rev{transition-delay:0s}
  .draw path,.draw line{stroke-dasharray:var(--len,600);stroke-dashoffset:var(--len,600);
    transition:stroke-dashoffset 1.4s var(--ease-soft) .15s}
  .sec.in .draw path,.sec.in .draw line{stroke-dashoffset:0}
}

/* ---------- footer ---------- */
footer{
  position:relative;z-index:1;background:var(--canvas-deep);
  padding:56px 0 96px;  /* clears the status bar */
}
footer .f-grid{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:baseline}
footer .f-word{font-size:19px;font-weight:700;letter-spacing:-.01em}
footer nav{display:flex;gap:20px;flex-wrap:wrap}
footer nav a,footer .f-c a{
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;color:var(--ink-2);
  min-height:44px;display:inline-flex;align-items:center;
  transition:color .2s var(--ease);
}
footer nav a:hover,footer .f-c a:hover{color:var(--ink)}
footer .f-c{display:flex;gap:20px;flex-wrap:wrap}
footer .f-fine{margin-top:22px;font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;color:var(--ink-2)}

/* ---------- gallery tour cards (phone-framed: the customers' view) ---------- */
.tourcard{position:relative}
.tour-frame{
  display:block;position:relative;overflow:hidden;border-radius:22px;
  border:1px solid var(--hairline-strong);background:var(--panel);
  aspect-ratio:39/76;max-width:390px;margin:0 auto;
  box-shadow:0 0 0 4px rgba(16,17,19,.9);
}
.tour-frame img{
  position:absolute;left:0;top:0;width:100%;height:auto;
  transform:translate3d(0,calc(var(--p,0) * var(--travel,-60%)),0);
  will-change:transform;
}
.tour-frame::after{ /* bottom fade so the cut never looks broken */
  content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
  background:linear-gradient(rgba(26,28,28,0),rgba(26,28,28,.55));pointer-events:none;
}
.tourcard .t-meta{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:16px 0 6px}
.tourcard .t-name{font-size:clamp(20px,2vw,26px);font-weight:700;letter-spacing:-.012em}
.tourcard .t-town{font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;color:var(--ink-2)}
.tourcard .t-line{color:var(--ink-2);font-size:15px;max-width:52ch}
.tourcard .t-open{
  margin-top:14px;display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--mono);font-weight:500;font-size:10px;letter-spacing:-.2px;text-transform:uppercase;
  border-bottom:1px solid var(--hairline-strong);
  transition:color .2s var(--ease),border-color .2s var(--ease);
}
.tourcard .t-open:hover{color:var(--accent-focus);border-color:var(--accent-focus)}
.tour-frame:hover{border-color:var(--hairline-strong)}

/* ---------- reduced motion: final states, drives stopped ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .env::after{animation:none}
  .env .pt{display:none}
  .tour-frame img{transform:none}
}

/* short desktop windows: hide floating overlays that have no room */
@media (max-height:560px) and (pointer:fine){
  .touchcard{display:none}
}

/* ============================================================
   THE SYSTEM (18.19): four moves shared by every route.
   1 ORBIT: .ctile drift on long-period keyframes (positions per page).
   2 COLOR-TRADE: the focused peer holds color, siblings recede.
   3 DECODE: .dec everywhere small and mono; money never scrambles.
   4 BRIGHT IMAGE, TYPE BESIDE: imagery full-bright, no text over it.
   ============================================================ */
.constellation{position:absolute;inset:0;z-index:0;pointer-events:none}
.cband{display:none}
.ctile{position:absolute;animation:var(--dp,drifta) var(--dd,120s) ease-in-out var(--dn,-20s) infinite;
  will-change:transform}
.ctile a{display:block;pointer-events:auto;border-radius:10px;overflow:hidden;
  border:1px solid rgba(249,244,235,.14);background:var(--canvas-deep);
  /* every preview is the same size and shape: the tile owns its aspect, the capture
     is cropped to fit. A recapture can never change a tile's dimensions again. */
  aspect-ratio:380/452;
  transition:opacity .35s var(--ease),filter .35s var(--ease),transform .35s var(--ease)}
.ctile img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ctile.far a{opacity:.88;filter:blur(.5px) saturate(.9)}
.constellation:has(a:hover) a:not(:hover),
.constellation:has(a:focus-visible) a:not(:focus-visible){opacity:.35;filter:saturate(.25)}
.ctile a:hover,.ctile a:focus-visible{transform:scale(1.03)}
/* perceptible drift: 14-22px paths over 44-60s (~0.4-0.5 px/s, the reference's speed) */
@keyframes drifta{0%,100%{transform:translate(0,0)}25%{transform:translate(14px,-19px)}55%{transform:translate(22px,8px)}80%{transform:translate(7px,20px)}}
@keyframes driftb{0%,100%{transform:translate(0,0)}30%{transform:translate(-16px,14px)}60%{transform:translate(-22px,-10px)}85%{transform:translate(-6px,-20px)}}
@keyframes driftc{0%,100%{transform:translate(0,0)}20%{transform:translate(11px,16px)}50%{transform:translate(-14px,21px)}75%{transform:translate(-19px,-7px)}}
/* the trade in the menu: greets every route */
.menu ul:has(.mlink:hover) .mlink:not(:hover),
.menu ul:has(.mlink:focus-visible) .mlink:not(:focus-visible){opacity:.4}
.menu .mlink{transition:opacity .3s var(--ease),padding-left .3s var(--ease),color .3s var(--ease)}
/* the type-trade for peer rows (ledger, tiers, checklist, work list) */
.tradelist:has(> :hover) > :not(:hover){opacity:.55;transition:opacity .3s var(--ease)}
.tradelist > *{transition:opacity .3s var(--ease)}


/* ============================================================ L7 SYSTEM
   docs/delvo-site-design-system.md — the tone ladder, the monolith fold,
   and the motion layer. Everything below is enhancement: content is whole
   with JS off, and every move sits behind prefers-reduced-motion. */
:root{
  --ink-3:rgba(249,244,235,.52); /* tone-3: annotations · ≈4.9:1 on canvas */
  --t-micro:160ms; --t-enter:420ms; --t-draw:900ms; --t-amb:26s;
  --ease-spring:cubic-bezier(.16,1,.3,1);
}
/* tone ladder applied — the mass moves off tone-1 (the probe's conviction) */
.sec p,.sec .lede{color:var(--ink-2)}
.sec h2,.sec h3,.sec .lead{color:var(--ink)}
.kick,.c-k,.fw-k,.fm-k,.loc,.f-fine,.stand-k,.stand-src,.fold .chip{color:var(--ink-3)}
.proc .pn{color:var(--ink-2)}
.stand-quote p{color:var(--ink)} /* the promise stays tone-1: it is what he came for */
/* the hero pitch is ALSO what he came for — tone-1, not support */
.foldcopy .sub,.foldcopy .para{color:var(--ink)}
/* every mono annotation belongs to tone-3: real mass, honestly quiet */
.work .lf,.proc .pn,.fm-date,.mmeta span,.sb-loc,.tc-k,.chip{color:var(--ink-3)}

/* the monolith environment — §18.11's composite, shipped */
.fold{position:relative;isolation:isolate;overflow:hidden}
.fold::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(studio-monolith.1920.jpg) center 36%/cover no-repeat #141617}
.fold::after{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(20,22,23,.94) 0 32%,rgba(20,22,23,.6) 58%,rgba(20,22,23,.34)),
  linear-gradient(rgba(20,22,23,.28),rgba(20,22,23,.92) 94%)}
@media (max-width:760px){
  .fold::before{background-image:url(studio-monolith-portrait.1080.jpg);background-position:center 26%}
  .fold::after{background:linear-gradient(rgba(20,22,23,.5),rgba(20,22,23,.95) 80%)}
}
.fold-band>img{display:none} /* the environment replaces the desk band */
.fold .ctile{transform:scale(.85);transform-origin:top left} /* specimens, −15% */
.d1{font-size:clamp(46px,6.2vw,84px)} /* display, +1 step */

/* the work-rule marquee track (content doubled in markup; clipped here) */
.fw-wrap{overflow:hidden;display:block;max-width:100%}

@media (prefers-reduced-motion: no-preference){
  /* 1 · hero entrance: rise + variable-weight ramp, once */
  .d1{animation:l7-hero var(--t-enter) var(--ease-spring) both;font-variation-settings:"wght" 740}
  @keyframes l7-hero{from{opacity:0;transform:translateY(24px);font-variation-settings:"wght" 620}
                     to{opacity:1;transform:none;font-variation-settings:"wght" 740}}
  .fold .sub,.fold .para,.fold .row,.fold .loc,.fold .fold-meta{
    animation:l7-fade var(--t-enter) var(--ease) .14s both}
  @keyframes l7-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  /* 5 · the work-rule marquee — CSS only, pausable */
  .fw-k{display:inline-block;white-space:nowrap;animation:l7-drift var(--t-amb) linear infinite}
  .fw-wrap:hover .fw-k{animation-play-state:paused}
  @keyframes l7-drift{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  /* 4 · seam arcs draw in when their section does (rides the .sec.in engine) */
  .arc path{stroke-dasharray:var(--len,720);stroke-dashoffset:var(--len,720);
    transition:stroke-dashoffset var(--t-draw) var(--ease) .1s}
  .sec.in .arc path{stroke-dashoffset:0}
  /* 6 · tile press */
  .ctile a{display:block;transition:transform var(--t-micro) var(--ease)}
  .ctile a:hover,.ctile a:active{transform:scale(.985)}
  /* 3 · the sticky hand-off, wide screens only — phones keep the plain list */
  @media (min-width:1024px){
    .proc .row{position:sticky;top:92px;background:var(--canvas);padding-top:10px}
    .proc .row .pn,.proc .row h3{transition:color var(--t-enter) var(--ease)}
    .proc .row.dim .pn,.proc .row.dim h3{color:var(--ink-3)}
  }
}