/* ==========================================================================
   Juan Fernandez, catalogue of systems. V2.
   Light editorial ground; the peak inverts to near-black and returns.
   That is the direction Juan picked, so it is now the only mode.

   Brand: PlanwithJuan Mode A. #F5F5F7 ground, #1D1D1F anchor, #FF6600 accent,
   Inter, no serif. Two accent stops of one hue, because #FF6600 measures
   ~2.7:1 on #F5F5F7 and cannot carry text: it owns fills, rules and plates;
   --sc-accent-text carries accent type.
   ========================================================================== */

:root {
  --sc-canvas:#F5F5F7; --sc-surface:#FFFFFF;
  --sc-ink:#1D1D1F; --sc-ink-soft:#5C5C63;
  --sc-accent:#FF6600; --sc-accent-ink:#1D1D1F; --sc-accent-text:#B84A00;
  --sc-cta:#C24A00; --sc-cta-ink:#FFFFFF;
  --sc-hairline:color-mix(in oklab, var(--sc-ink) 13%, transparent);
  --sc-hairline-strong:color-mix(in oklab, var(--sc-ink) 26%, transparent);

  --sc-font-display:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --sc-font-text:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --sc-font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --sc-shadow-color:240 12% 45%;
  --sc-maxw:78rem; --sc-measure:60ch;
  --sc-section:clamp(3.25rem,6.2vw,7rem);   /* page-local, tighter than the default */

  --idx-w:2.6rem;                       /* a column of marks, never wider */
  --rail-left:max(var(--sc-gutter), calc(var(--idx-w) + 1.75rem));
  --rail-gap:clamp(1rem,2.2vw,2rem);
  --card-w:clamp(18rem,26vw,23rem);
}

/* the peak inverts. Tokens redefined AND `color` restated, because `color`
   resolves as a computed value and a redefined token does not re-ink it. */
.sys {
  --sc-canvas:#101114; --sc-surface:#191B20;
  --sc-ink:#F2F0EC; --sc-ink-soft:#9C988F;
  --sc-accent:#FF7A1F; --sc-accent-ink:#14100C; --sc-accent-text:#FFA05C;
  --sc-hairline:color-mix(in oklab, var(--sc-ink) 15%, transparent);
  --sc-hairline-strong:color-mix(in oklab, var(--sc-ink) 30%, transparent);
  color:var(--sc-ink);
}

/* ------------------------------------------------------------- base ---- */
body{
  background:var(--sc-canvas); color:var(--sc-ink);
  font-family:var(--sc-font-text); font-size:var(--sc-t-base);
  line-height:var(--sc-leading-body); letter-spacing:var(--sc-track-normal);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
::selection{background:var(--sc-accent);color:#fff}
:focus-visible{outline:2px solid var(--sc-accent-text);outline-offset:3px;border-radius:3px}
.sc-grain{opacity:.026}
img{display:block}
.skip{position:fixed;top:.5rem;left:.5rem;z-index:9000;transform:translateY(-200%);
  background:var(--sc-ink);color:var(--sc-canvas);padding:.6rem 1rem;border-radius:var(--sc-r-sm);font-size:var(--sc-t-sm)}
.skip:focus-visible{transform:none}
.wrap{width:100%;max-width:var(--sc-maxw);margin-inline:auto;padding-inline:var(--rail-left) var(--sc-gutter)}

/* ------------------------------------------------------- typography ---- */
.disp{font-family:var(--sc-font-display);font-weight:800;line-height:var(--sc-leading-none);
  letter-spacing:var(--sc-track-tight);text-wrap:balance;margin:0}
.disp--xl{font-size:clamp(2.15rem,1rem + 3.2vw,3.7rem)}
.disp--lg{font-size:clamp(1.95rem,1rem + 2.6vw,3rem)}
.disp--md{font-size:clamp(1.6rem,1rem + 1.7vw,2.3rem);letter-spacing:var(--sc-track-snug)}
.lede{font-size:var(--sc-t-lg);line-height:1.44;letter-spacing:var(--sc-track-snug);
  color:var(--sc-ink);max-width:46ch;text-wrap:pretty;margin:0}
.note{color:var(--sc-ink-soft);font-size:var(--sc-t-sm);max-width:32ch;margin:0;text-wrap:pretty}
p{text-wrap:pretty}

.eyebrow{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:var(--sc-track-wide);
  text-transform:uppercase;color:var(--sc-ink-soft);display:flex;align-items:center;gap:.6rem;margin:0}
.eyebrow i{font-style:normal;color:var(--sc-accent-text);font-weight:600}
.eyebrow .rule{flex:0 0 1.6rem;height:1px;background:var(--sc-hairline-strong)}
.dot{width:6px;height:6px;border-radius:99px;background:var(--sc-accent);flex:none}
.pill{font-style:normal;font-size:.62rem;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  padding:.22em .6em .28em;border:1px dashed var(--sc-hairline-strong);border-radius:var(--sc-r-pill);
  color:var(--sc-ink-soft);white-space:nowrap}

.facts{margin:0;display:grid;gap:.6rem}
.facts > div{display:grid;grid-template-columns:5.6rem 1fr;gap:.2rem 1rem;align-items:baseline;
  padding-top:.6rem;border-top:1px solid var(--sc-hairline)}
.facts dt{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:var(--sc-track-wide);
  text-transform:uppercase;color:var(--sc-ink-soft)}
.facts dd{margin:0;font-size:var(--sc-t-sm);line-height:1.5}
.facts a{color:var(--sc-accent-text);text-underline-offset:3px}
.facts--wide > div{grid-template-columns:7rem 1fr}

.acts{display:flex;flex-wrap:wrap;gap:.75rem;margin:0;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--sc-t-sm);
  padding:.75rem 1.35rem;border-radius:var(--sc-r-sm);background:var(--sc-cta);color:var(--sc-cta-ink);
  border:1px solid transparent;text-decoration:none;white-space:nowrap;box-shadow:var(--sc-e1);
  transition:transform 140ms var(--sc-ease-out),box-shadow 160ms var(--sc-ease-out)}
.btn--ghost{background:transparent;color:var(--sc-ink);border-color:var(--sc-hairline-strong);box-shadow:none}
.btn--big{padding:.95rem 1.9rem;font-size:var(--sc-t-base)}
@media (hover:hover) and (pointer:fine){.btn:hover{transform:translateY(-1px);box-shadow:var(--sc-e2)}
  .btn--ghost:hover{border-color:var(--sc-ink);box-shadow:none}}
.btn:active{transform:translateY(1px);box-shadow:var(--sc-e1)}
.tlink{color:var(--sc-accent-text);font-size:var(--sc-t-sm);font-weight:500;text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--sc-accent) 45%,transparent);padding-bottom:2px}
@media (hover:hover) and (pointer:fine){.tlink:hover{border-bottom-color:var(--sc-accent)}}

/* ------------------------------------------- the index, as marks ------ */
/* Numerals and standing labels sat over the page while it moved. This is a
   column of dashes instead: the active one is longer and accented, and the
   title arrives in a card only when a dash is pointed at or focused. Nothing
   is painted over the design unless the reader asks for it. */
.idx{position:fixed;z-index:120;left:0;top:0;height:100vh;height:100svh;
  width:var(--idx-w);display:flex;align-items:center;pointer-events:none}
.idx ul{list-style:none;margin:0;padding:0 0 0 clamp(.7rem,1.3vw,1.1rem);display:grid;gap:0}
.idx li{position:relative;display:flex}
.idx a{pointer-events:auto;position:relative;display:flex;align-items:center;
  width:2rem;height:1.35rem;text-decoration:none;color:var(--sc-ink-soft)}
.idx i{display:block;width:.75rem;height:2px;border-radius:2px;
  background:color-mix(in oklab,var(--sc-ink-soft) 46%,transparent);
  box-shadow:0 0 7px 3px color-mix(in oklab,var(--idx-ground,var(--sc-canvas)) 72%,transparent);
  transition:width 240ms var(--sc-ease-out),background-color 200ms var(--sc-ease-out)}
.idx a.is-here i{width:1.5rem;background:var(--sc-accent)}
/* the title card. Absolute, so nothing it does can change the rail's width. */
.idx span{position:absolute;left:calc(100% + .1rem);top:50%;
  transform:translate(-5px,-50%);white-space:nowrap;pointer-events:none;
  font-size:.72rem;line-height:1;letter-spacing:var(--sc-track-snug);
  color:var(--sc-ink);background:var(--sc-surface);
  border:1px solid var(--sc-hairline);border-radius:6px;
  padding:.4rem .58rem;box-shadow:var(--sc-e2);opacity:0;
  transition:opacity 150ms var(--sc-ease-out),transform 150ms var(--sc-ease-out)}
.idx a:hover span,.idx a:focus-visible span{opacity:1;transform:translate(0,-50%)}
@media (hover:hover) and (pointer:fine){
  .idx a:hover i{width:1.5rem;background:var(--sc-ink)}}
.idx a:focus-visible i{width:1.5rem;background:var(--sc-ink)}
/* over the inverted peak the ground, the marks and the card switch together */
html.on-dark{--idx-ground:#101114}
html.on-dark .idx i{background:color-mix(in oklab,#9C988F 55%,transparent)}
html.on-dark .idx a.is-here i{background:#FFA05C}
html.on-dark .idx a:hover i,html.on-dark .idx a:focus-visible i{background:#F2F0EC}
html.on-dark .idx span{color:#F2F0EC;background:#191B20;
  border-color:color-mix(in oklab,#F2F0EC 20%,transparent)}
html.on-dark .cur__ring{border-color:#FF7A1F}
/* and again over the toolkit's deep orange band */
html.on-warm{--idx-ground:#7C3105}
html.on-warm .idx i{background:color-mix(in oklab,#E7C3A8 58%,transparent)}
html.on-warm .idx a.is-here i{background:#FF9042}
html.on-warm .idx a:hover i,html.on-warm .idx a:focus-visible i{background:#FFF1E8}
html.on-warm .idx span{color:#FFF1E8;background:#95400E;
  border-color:color-mix(in oklab,#FFF1E8 26%,transparent)}
html.on-warm .cur__ring{border-color:#FF9042}

/* --------------------------------------------------------- 01 hero ---- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;
  padding:clamp(5rem,12vh,8rem) 0 clamp(4rem,9vh,6.5rem);overflow:clip}
.hero__bed{position:absolute;inset:0;pointer-events:none;z-index:0}
.plane{position:absolute;max-width:none;translate:var(--lean-x,0px) var(--lean-y,0px)}
.plane--grid{inset:-14% -8%;opacity:.5;
  background-image:linear-gradient(var(--sc-hairline) 1px,transparent 1px),
    linear-gradient(90deg,var(--sc-hairline) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(70% 60% at 62% 45%,#000 0%,transparent 78%);
  mask-image:radial-gradient(70% 60% at 62% 45%,#000 0%,transparent 78%)}
.plane--wires{inset:-12% -6%;color:color-mix(in oklab,var(--sc-accent) 34%,transparent);opacity:.62;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 26%,rgba(0,0,0,.4) 44%,#000 64%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 26%,rgba(0,0,0,.4) 44%,#000 64%)}
.plane--wires svg{width:100%;height:100%}
.plane--glow{right:-6%;top:6%;width:60%;height:70%;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in oklab,var(--sc-accent) 13%,transparent),transparent 72%)}
.hero__inner{position:relative;z-index:2;width:100%;max-width:var(--sc-maxw);margin-inline:auto;
  padding-inline:var(--rail-left) var(--sc-gutter);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__copy{display:grid;gap:var(--sc-5);align-content:start}
.hero__copy .disp--xl{margin-top:var(--sc-2);max-width:15ch}
.hero__copy .facts{margin-top:var(--sc-3)}
.hero__subject{margin:0;position:relative;z-index:3}
.hero__subject img{width:100%;height:auto;border-radius:var(--sc-r-md);position:relative;z-index:1;
  box-shadow:var(--sc-e3)}
.mount{position:absolute;left:-8%;top:-6%;width:98%;aspect-ratio:1/1.18;background:var(--sc-surface);
  border:1px solid var(--sc-hairline);border-radius:var(--sc-r-lg);box-shadow:var(--sc-e2);z-index:0}
.hero__resume{position:absolute;z-index:4;right:-1.45rem;top:2.1rem;width:5.35rem;aspect-ratio:1;
  display:grid;place-content:center;justify-items:center;gap:.35rem;border-radius:50%;
  background:var(--sc-cta);color:var(--sc-cta-ink);border:1px solid color-mix(in oklab,var(--sc-cta-ink) 16%,transparent);
  box-shadow:var(--sc-e2);text-decoration:none;font-family:var(--sc-font-mono);font-size:.68rem;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;transform:rotate(4deg);
  transition:transform 160ms var(--sc-ease-out),box-shadow 160ms var(--sc-ease-out)}
.hero__resume svg{width:1rem;height:1rem;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.hero__resume:focus-visible{outline:3px solid var(--sc-accent);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.hero__resume:hover{transform:rotate(0deg) translateY(-2px);box-shadow:var(--sc-e3)}}
.hero__resume:active{transform:rotate(0deg) translateY(1px);box-shadow:var(--sc-e1)}
.accession{position:absolute;z-index:2;left:-1.6rem;bottom:1.4rem;padding:.5rem .85rem;
  background:var(--sc-ink);color:var(--sc-canvas);border-radius:var(--sc-r-sm);
  font-family:var(--sc-font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  white-space:nowrap;box-shadow:var(--sc-e2)}
.accession em{font-style:normal;color:var(--sc-accent)}
.hero__floor{position:absolute;inset:auto 0 0 0;height:200px;z-index:1;
  background:linear-gradient(to bottom,transparent,var(--sc-canvas))}

/* --------------------------------------------------------- 02 work ---- */
.work__stage{background:var(--sc-canvas)}
/* The rail and its heading are one card. It slides off to the left and the
   close is underneath, already there, rather than fading in over the top. */
.work__top{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  padding-top:clamp(7rem,17vh,11rem);background:var(--sc-canvas);
  --sw:clamp(0,(var(--sc-p,0) - .82) * 6.5,1);
  transform:translate3d(calc(var(--sw) * -102%),0,0);
  box-shadow:26px 0 46px -16px color-mix(in oklab,var(--sc-ink) 26%,transparent)}
/* The section heading sits on the sticky stage rather than in the rail, so it
   holds while the cards travel, then steps aside for the close. */
.work__head{position:absolute;z-index:5;top:clamp(2rem,7vh,4.5rem);
  left:var(--rail-left);right:var(--sc-gutter);max-width:34rem;
  display:grid;gap:var(--sc-3)}
.work__head .note{max-width:44ch}
.rail{gap:var(--rail-gap);align-items:center;padding-inline:var(--rail-left) 0;will-change:transform}
.rail__tail{flex:0 0 24vw;width:24vw}

.obj{flex:0 0 var(--card-w);width:var(--card-w);display:grid;gap:.85rem;align-content:start;
  --li:calc((var(--sc-p,0) * 6.4) - var(--i) + 1.15);
  --lv:clamp(0,var(--li),1);
  opacity:clamp(.5,var(--li),1);
  transform:translate3d(0,calc((1 - var(--lv)) * 18px),0)}
.obj__shot{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;
  background:var(--sc-surface);border-radius:var(--sc-r-md);overflow:hidden;cursor:pointer;
  box-shadow:var(--sc-e1);outline-offset:4px;
  transition:box-shadow 220ms var(--sc-ease-out),transform 220ms var(--sc-ease-out)}
.obj__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;
  transition:transform 420ms var(--sc-ease-out)}
.obj__shot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 1px var(--sc-hairline)}
.obj__view{position:absolute;left:.6rem;bottom:.6rem;z-index:2;
  font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.34rem .6rem;border-radius:var(--sc-r-pill);
  background:var(--sc-ink);color:var(--sc-canvas);
  opacity:0;transform:translateY(4px);transition:opacity 200ms var(--sc-ease-out),transform 200ms var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){
  .obj__shot:hover{box-shadow:var(--sc-e2);transform:translateY(-2px)}
  .obj__shot:hover img{transform:scale(1.035)}
  .obj__shot:hover .obj__view{opacity:1;transform:none}}
.obj__shot:focus-visible .obj__view{opacity:1;transform:none}
.obj__shot--drawn{background:color-mix(in oklab,var(--sc-ink) 4%,var(--sc-surface))}
.obj__shot--wide img{object-position:left center}
.mini{width:100%;height:100%;display:block}
.mini text{font-family:var(--sc-font-mono);font-size:12px;fill:var(--sc-ink-soft)}
.mini__col rect:first-of-type{fill:none;stroke:var(--sc-hairline-strong);stroke-width:1.1}
.mini .c{fill:color-mix(in oklab,var(--sc-ink) 8%,transparent)}
.mini .c--on{fill:color-mix(in oklab,var(--sc-accent) 34%,transparent)}
.mini__grid line{stroke:var(--sc-hairline);stroke-width:1}
.mini .bk{fill:color-mix(in oklab,var(--sc-ink) 10%,transparent)}
.mini .bk--pair{fill:color-mix(in oklab,var(--sc-accent) 30%,transparent)}
.mini .tag{font-size:10px;fill:var(--sc-accent-text)}
.mini .sm{font-size:10px;fill:var(--sc-ink-soft)}
.mini .lft{text-anchor:start}
.mini__flow rect{fill:var(--sc-surface);stroke:var(--sc-hairline-strong);stroke-width:1.1}
.mini__flow .nd0--on{fill:color-mix(in oklab,var(--sc-accent) 12%,var(--sc-surface));
  stroke:color-mix(in oklab,var(--sc-accent) 55%,transparent)}
.mini__flow .ln0{fill:none;stroke:var(--sc-hairline-strong);stroke-width:1.4}
.mini__flow text{text-anchor:middle;fill:var(--sc-ink)}
.mini__opts rect{fill:none;stroke:var(--sc-hairline);stroke-width:1}
.mini__opts rect:first-of-type{fill:color-mix(in oklab,var(--sc-accent) 10%,transparent);
  stroke:color-mix(in oklab,var(--sc-accent) 40%,transparent)}

.obj__meta{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:.15rem .8rem}
.obj__kind{grid-column:1;margin:0;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:var(--sc-ink-soft)}
.obj__kind em{font-style:normal;color:var(--sc-accent-text)}
.obj__meta h3{grid-column:1;margin:0;font-family:var(--sc-font-display);font-weight:700;
  font-size:var(--sc-t-lg);line-height:1.1;letter-spacing:var(--sc-track-snug)}
.obj__n{grid-column:2;grid-row:1/3;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  color:color-mix(in oklab,var(--sc-ink-soft) 65%,transparent)}
.obj__sum{margin:0;font-size:var(--sc-t-sm);color:var(--sc-ink-soft);line-height:1.5;max-width:34ch}

/* The close to the horizontal travel. Not a card: a full screen that arrives
   over the settled rail, so the argument reads as its own moment. */
.point{position:absolute;inset:0;z-index:1;display:grid;place-items:center;
  background:var(--sc-canvas);
  --pv:clamp(0,(var(--sc-p,0) - .84) * 7,1)}
.point::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(52% 56% at 38% 48%,color-mix(in oklab,var(--sc-accent) 13%,transparent),transparent 72%)}
.point__inner{position:relative;width:100%;max-width:var(--sc-maxw);
  padding-inline:var(--rail-left) var(--sc-gutter);
  display:grid;gap:var(--sc-5);justify-items:start;
  transform:translate3d(calc((1 - var(--pv)) * 46px),0,0)}
.point .disp--xl{font-size:clamp(2.4rem,1rem + 4.4vw,4.8rem);max-width:15ch}
.point .lede{max-width:44ch;color:var(--sc-ink-soft)}
.work__foot{position:absolute;inset:auto 0 clamp(1rem,4vh,2.4rem) 0;z-index:5;pointer-events:none;
  padding-inline:var(--rail-left) var(--sc-gutter)}
.rail__prog{display:block;height:2px;background:var(--sc-hairline);border-radius:2px;overflow:hidden}
.rail__prog span{display:block;height:100%;background:var(--sc-accent);transform-origin:0 50%;
  transform:scaleX(var(--sc-p,0))}

/* ------------------------------------------------- 03 the peak -------- */
.sys__stage{background:var(--sc-canvas);display:grid;
  grid-template-rows:auto minmax(8rem,1fr) auto auto;gap:clamp(.55rem,1.3vh,1.1rem);
  padding:clamp(1.1rem,3.2vh,2.4rem) var(--sc-gutter) clamp(.9rem,2.4vh,1.8rem);
  padding-left:var(--rail-left)}
.sys__head{display:grid;gap:.5rem;max-width:46rem}
.sys__head .disp--md{max-width:30ch}
.sys__diagram{position:relative;min-height:0}
.sys__bed{position:absolute;inset:-6% -4%;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 62% at 46% 46%,color-mix(in oklab,var(--sc-accent) 11%,transparent),transparent 70%),
    linear-gradient(var(--sc-hairline) 1px,transparent 1px),
    linear-gradient(90deg,var(--sc-hairline) 1px,transparent 1px);
  background-size:auto,68px 68px,68px 68px;
  -webkit-mask-image:radial-gradient(66% 70% at 50% 50%,#000 0%,transparent 82%);
  mask-image:radial-gradient(66% 70% at 50% 50%,#000 0%,transparent 82%)}
.pipe{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
.pipe--tall{display:none}

.ln{fill:none;stroke:var(--sc-hairline-strong);stroke-width:2;stroke-linecap:round}
.ln--main{stroke:color-mix(in oklab,var(--sc-accent) 74%,var(--sc-ink));stroke-width:2.5;
  stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--sc-p,0) - .04) * 4.4,1))}
.ln--br{stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0,(var(--sc-p,0) - var(--at)) * 9,1))}
.nd rect,.nd circle{fill:var(--sc-surface);stroke:var(--sc-hairline-strong);stroke-width:1.25}
.nd text{font-family:var(--sc-font-mono);font-size:16px;font-weight:500;fill:var(--sc-ink);
  text-anchor:middle;dominant-baseline:middle}
.pipe__nodes--tall text{text-anchor:start}
.nd{--on:clamp(0,(var(--sc-p,0) - var(--at)) * 16,1);opacity:calc(.2 + .8 * var(--on))}
.nd--end rect,.nd--end circle{stroke:var(--sc-accent);stroke-width:2}
.nd .tick{fill:none;stroke:var(--sc-hairline-strong);stroke-width:1.5}
.pl{--on:clamp(0,(var(--sc-p,0) - var(--at)) * 12,1);opacity:var(--on);
  transition:opacity 200ms var(--sc-ease-out)}
.pl rect,.pl circle{fill:color-mix(in oklab,var(--sc-accent) 9%,var(--sc-surface));
  stroke:color-mix(in oklab,var(--sc-accent) 55%,transparent);stroke-width:1.25}
.pl text{font-family:var(--sc-font-mono);font-size:13.5px;fill:var(--sc-ink);
  text-anchor:middle;dominant-baseline:middle}
.pl text.sub{fill:var(--sc-ink-soft);font-size:12.5px}
.pipe__routes{visibility:hidden}
.rec circle{fill:var(--sc-accent);stroke:var(--sc-canvas);stroke-width:3}
.rec text{font-family:var(--sc-font-mono);font-size:13px;font-weight:500;fill:var(--sc-ink);
  text-anchor:middle;paint-order:stroke;stroke:var(--sc-canvas);stroke-width:4px;stroke-linejoin:round}
.rec{opacity:0}
.rec[data-rec="clean"] circle{fill:var(--sc-ink)}

/* The tracking layer arrives on the same timeline as everything else: the
   records finish, the exception plates step back, and what goes home to Meta
   draws underneath. */
.pipe__track{--tk:clamp(0,(var(--sc-p,0) - .76) * 9,1);opacity:var(--tk);pointer-events:none}
.sys__stage.force-track .pipe__track{--tk:1}
.sys__stage.force-track .pipe__plates{opacity:.16}
.sys__stage.force-track .pipe__track .trn{opacity:1}
.pipe__plates{opacity:calc(1 - .84 * clamp(0,(var(--sc-p,0) - .76) * 9,1))}
.pipe__track .tr{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--tk))}
.pipe__track .trn{opacity:clamp(0,(var(--sc-p,0) - .80) * 12,1)}
.tr{fill:none;stroke:color-mix(in oklab,var(--sc-accent) 62%,transparent);stroke-width:1.4}
.tr--rail{stroke-width:1.8;stroke-dasharray:none;
  stroke:color-mix(in oklab,var(--sc-accent) 40%,transparent)}
.trn rect,.trn circle{fill:color-mix(in oklab,var(--sc-accent) 13%,var(--sc-surface));
  stroke:color-mix(in oklab,var(--sc-accent) 60%,transparent);stroke-width:1.25}
.trn text{font-family:var(--sc-font-mono);font-size:13px;fill:var(--sc-ink);
  text-anchor:middle;dominant-baseline:middle}
.trn text.sub{font-size:11.5px;fill:var(--sc-ink-soft)}
.trn rect{filter:none}

.sys__lower{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(1.2rem,3vw,3rem);align-items:start;
  border-top:1px solid var(--sc-hairline);padding-top:clamp(.55rem,1.3vh,.95rem)}
.ledger{display:grid;gap:.4rem;align-content:start}
.ledger__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:var(--sc-track-wide);
  text-transform:uppercase;color:var(--sc-ink-soft);margin:0}
.ledger__count b{color:var(--sc-accent-text);font-variant-numeric:tabular-nums}
.ledger__list{list-style:none;margin:0;padding:0;display:grid;gap:.16rem}
.lg{--on:clamp(0,(var(--sc-p,0) - var(--at,.6)) * 26,1);opacity:var(--on);
  transform:translate3d(0,calc((1 - var(--on)) * 6px),0);
  display:grid;grid-template-columns:5.6rem 4.6rem minmax(0,1fr);gap:0 .8rem;align-items:baseline;
  padding-bottom:.24rem;border-bottom:1px solid var(--sc-hairline)}
.lg b{font-family:var(--sc-font-mono);font-weight:500;font-size:var(--sc-t-xs);color:var(--sc-ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg i{font-style:normal;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:.06em;
  text-transform:uppercase;color:var(--sc-accent-text)}
.lg span{color:var(--sc-ink-soft);font-size:var(--sc-t-xs);line-height:1.45}
.lg[data-rec="clean"] i{color:var(--sc-ink-soft)}
/* fallback only. site.js writes these from the record landing times. */
.lg[data-rec="clean"]{--at:.58}.lg[data-rec="invalid"]{--at:.635}.lg[data-rec="dup"]{--at:.69}
.lg[data-rec="reply"]{--at:.745}.lg[data-rec="resched"]{--at:.80}

.chips{display:grid;gap:.42rem;align-content:start}
.chips__k{margin:0;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:var(--sc-ink-soft)}
.chips__row{display:flex;flex-wrap:wrap;gap:.4rem}
.chip{font:inherit;font-size:var(--sc-t-xs);font-weight:500;padding:.4rem .8rem;background:transparent;
  color:var(--sc-ink);border:1px solid var(--sc-hairline-strong);border-radius:var(--sc-r-pill);cursor:pointer;
  transition:background-color 140ms var(--sc-ease-out),color 140ms var(--sc-ease-out),border-color 140ms var(--sc-ease-out)}
@media (hover:hover) and (pointer:fine){.chip:hover{border-color:var(--sc-ink)}}
.chip:active{transform:translateY(1px)}
.chip.is-on{background:var(--sc-accent);border-color:var(--sc-accent);color:var(--sc-accent-ink)}
.chip--track{border-style:dashed}
.chips__out{position:relative;min-height:9.4em}
.chips__out p{position:absolute;inset:0;margin:0;font-size:var(--sc-t-xs);
  color:var(--sc-ink-soft);max-width:64ch;line-height:1.55}
.chips__out b{color:var(--sc-ink);font-weight:600}
.chips__out code{font-family:var(--sc-font-mono);font-size:.92em;color:var(--sc-accent-text)}
.prov{margin:0;font-size:var(--sc-t-xs);color:var(--sc-ink-soft);
  border-top:1px solid var(--sc-hairline);padding-top:.55rem}
.prov b{color:var(--sc-ink);font-weight:600;font-variant-numeric:tabular-nums}

.sys__stage[data-iso] .pl,.sys__stage[data-iso] .rec,.sys__stage[data-iso] .lg{opacity:.16 !important}
.sys__stage[data-iso="invalid"] .pl[data-br="invalid"],.sys__stage[data-iso="dup"] .pl[data-br="dup"],
.sys__stage[data-iso="reply"] .pl[data-br="reply"],.sys__stage[data-iso="resched"] .pl[data-br="resched"],
.sys__stage[data-iso="invalid"] .lg[data-rec="invalid"],.sys__stage[data-iso="dup"] .lg[data-rec="dup"],
.sys__stage[data-iso="reply"] .lg[data-rec="reply"],.sys__stage[data-iso="resched"] .lg[data-rec="resched"],
.sys__stage[data-iso="invalid"] .rec[data-rec="invalid"],.sys__stage[data-iso="dup"] .rec[data-rec="dup"],
.sys__stage[data-iso="reply"] .rec[data-rec="reply"],.sys__stage[data-iso="resched"] .rec[data-rec="resched"]{opacity:1 !important}

/* -------------------------------------------------------- 04 craft ---- */
/* These three sections were flat colour. Each gets a ground of its own now,
   masked so it never reaches the type. */
.craft{padding-block:var(--sc-section);position:relative;overflow:clip}
.craft::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(52% 58% at 76% 30%,color-mix(in oklab,var(--sc-accent) 11%,transparent),transparent 72%),
    radial-gradient(46% 50% at 8% 78%,color-mix(in oklab,var(--sc-ink) 6%,transparent),transparent 74%);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 78%,transparent)}
.craft > .wrap{position:relative;z-index:1}
.craft__head{display:grid;gap:var(--sc-3);max-width:46rem;margin-bottom:var(--sc-7)}
.ribbon{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(.8rem,2vw,1.6rem);
  align-items:center}
.rib{position:relative;display:block;text-decoration:none;color:inherit;border-radius:var(--sc-r-md);
  overflow:hidden;background:var(--sc-surface);box-shadow:var(--sc-e2);
  transition:transform 260ms var(--sc-ease-out),box-shadow 260ms var(--sc-ease-out)}
.rib img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/16;
  transition:transform 500ms var(--sc-ease-out)}
.rib::after{content:"";position:absolute;inset:auto 0 0 0;height:56%;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,14,.86),rgba(12,12,14,.42) 46%,transparent)}
/* the two lines stack from the bottom edge, so a caption that wraps pushes
   the title up instead of running through it */
.rib__lab{position:absolute;left:.7rem;right:.7rem;bottom:.62rem;z-index:2;
  display:grid;gap:.14rem;color:#F7F5F2}
.rib__k{font-style:normal;font-size:var(--sc-t-sm);font-weight:600;
  letter-spacing:var(--sc-track-snug);line-height:1.2}
.rib__t{font-style:normal;font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.06em;
  text-transform:uppercase;color:#C9C4BC;line-height:1.3}
.rib--a{transform:translateY(-1.6rem)} .rib--b{transform:translateY(1.4rem)}
.rib--c{transform:translateY(-2.4rem)} .rib--d{transform:translateY(1rem)}
.rib--e{transform:translateY(-.6rem)}
@media (hover:hover) and (pointer:fine){
  .rib:hover{box-shadow:var(--sc-e3)} .rib:hover img{transform:scale(1.05)}}

/* -------------------------------------------------------- 05 about ---- */
.about{padding-block:var(--sc-section) calc(var(--sc-section) * .72);position:relative;overflow:clip}
.about::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom,color-mix(in oklab,var(--sc-ink) 3.5%,transparent),transparent 42%),
    radial-gradient(38% 46% at 14% 24%,color-mix(in oklab,var(--sc-accent) 9%,transparent),transparent 72%)}
.about > .wrap{position:relative;z-index:1}
.about__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(2rem,5vw,5rem);align-items:start}
.about__copy{display:grid;gap:var(--sc-4);align-content:start}
.about__copy .lede{font-size:var(--sc-t-base);line-height:1.55;max-width:44ch}
.about__copy p:not(.lede):not(.acts){color:var(--sc-ink-soft);max-width:var(--sc-measure)}
.arc__h{margin:0 0 var(--sc-5);font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:var(--sc-ink-soft)}
.arc__list{display:grid}
.arc__list details{border-top:1px solid var(--sc-hairline)}
.arc__list details:last-child{border-bottom:1px solid var(--sc-hairline)}
.arc__list summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:4.2rem minmax(0,1fr) 1.4rem;gap:1rem;align-items:baseline;
  padding:var(--sc-5) 0;transition:color 160ms var(--sc-ease-out)}
.arc__list summary::-webkit-details-marker{display:none}
.arc__yr{font-family:var(--sc-font-mono);font-size:var(--sc-t-sm);color:var(--sc-accent-text)}
.arc__list summary b{font-family:var(--sc-font-display);font-weight:700;font-size:var(--sc-t-lg);
  line-height:1.18;letter-spacing:var(--sc-track-snug)}
.arc__list summary em{justify-self:end;position:relative;width:14px;height:14px;flex:none}
.arc__list summary em::before,.arc__list summary em::after{content:"";position:absolute;
  background:var(--sc-ink-soft);transition:transform 240ms var(--sc-ease-out),background-color 160ms}
.arc__list summary em::before{left:0;top:6px;width:14px;height:2px}
.arc__list summary em::after{left:6px;top:0;width:2px;height:14px}
.arc__list details[open] summary em::after{transform:scaleY(0)}
.arc__list details[open] summary em::before{background:var(--sc-accent)}
.arc__list details p{margin:0 0 var(--sc-6);padding-left:5.2rem;color:var(--sc-ink-soft);
  max-width:58ch;font-size:var(--sc-t-sm);line-height:1.62}
@media (hover:hover) and (pointer:fine){
  .arc__list summary:hover{color:var(--sc-ink)}
  .arc__list summary:hover em::before,.arc__list summary:hover em::after{background:var(--sc-accent)}}

/* --------------------------------------------------------- toolkit ---- */
/* Variant B, Sort, on the scroll rather than on a timer. Every chip's travel
   is a fraction of the section's own progress, staggered by index, so the pile
   files itself at the speed of the reader's hand. Same principle as the
   pipeline. The pile is aria-hidden; the real columns are the content. */
.kit{position:relative;min-height:62vh;display:grid;align-content:center;
  padding-block:clamp(2.5rem,5.5vh,4rem);
  --sc-canvas:#7C3105; --sc-surface:#95400E;
  --sc-ink:#FFF1E8; --sc-ink-soft:#E7C3A8;
  --sc-accent:#FF9042; --sc-accent-text:#FFB27A;
  --sc-hairline:color-mix(in oklab,#FFF1E8 20%,transparent);
  color:#FFF1E8;background:#7C3105}
.kit__h{margin:0 0 var(--sc-5);font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-track-wide);text-transform:uppercase;
  padding-top:var(--sc-5);border-top:1px solid var(--sc-hairline)}
.kit__grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.2rem,3vw,2.4rem)}
.kit__col h3{margin:0 0 .6rem;font-size:var(--sc-t-base);font-weight:700;
  letter-spacing:var(--sc-track-snug);
  opacity:clamp(0,(var(--sc-p,0) - .30) * 7,1)}
.kit__col ul{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.3rem}
.kit__col li,.kit__pile li{font-family:var(--sc-font-mono);font-size:.66rem;letter-spacing:.02em;
  padding:.26rem .55rem;border:1px solid var(--sc-hairline);border-radius:5px;
  color:var(--sc-ink-soft);background:var(--sc-canvas);white-space:nowrap}

/* one progress value per chip, from the act's own --sc-p */
.kit__col li,.kit__pile li{--start:calc(.32 + var(--i,0) * .0058);
  --t:clamp(0,(var(--sc-p,0) - var(--start)) * 8,1)}
.kit__col li{opacity:var(--t)}
.kit__pile{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none;z-index:2}
.kit__pile li{position:absolute;left:50%;top:50%;background:var(--sc-surface);
  box-shadow:var(--sc-e1);opacity:calc(1 - var(--t));
  transform:translate(-50%,-50%)
    translate(calc(var(--px) + (var(--tx) - var(--px)) * var(--t)),
              calc(var(--py) + (var(--ty) - var(--py)) * var(--t)))
    rotate(calc(var(--pr) * (1 - var(--t))))}
.kit__pile li.lit{border-color:color-mix(in oklab,var(--sc-accent) 55%,transparent);
  color:var(--sc-accent-text)}

/* chips on the deep ground: dark wells with light type, 8.3:1 */
.kit__h{color:#E7C3A8;border-top-color:color-mix(in oklab,#FFF1E8 22%,transparent)}
.kit__col h3{color:#FFF1E8}
.kit__col li{color:#F0D2BC;border-color:color-mix(in oklab,#FFF1E8 26%,transparent);
  background:color-mix(in oklab,#000000 12%,transparent)}
.kit__pile li{color:#F5DECB;border-color:color-mix(in oklab,#FFF1E8 30%,transparent);
  background:#95400E}

/* ------------------------------------------------------ 06 contact ---- */
.enq__stage{display:grid;place-items:center;background:var(--sc-canvas);position:relative}
.enq__stage::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(color-mix(in oklab,var(--sc-ink) 6%,transparent) 1px,transparent 1px),
    linear-gradient(90deg,color-mix(in oklab,var(--sc-ink) 6%,transparent) 1px,transparent 1px);
  background-size:86px 86px,86px 86px;
  -webkit-mask-image:linear-gradient(to right,transparent 0%,transparent 52%,#000 78%,#000 92%,transparent 100%);
  mask-image:linear-gradient(to right,transparent 0%,transparent 52%,#000 78%,#000 92%,transparent 100%)}
.enq__plate{position:relative;z-index:1}
.enq__plate{width:100%;max-width:56rem;padding-inline:var(--rail-left) var(--sc-gutter);
  display:grid;gap:var(--sc-5);justify-items:start}
.enq__plate .disp--lg{max-width:12ch}
.enq__plate .facts{width:100%;max-width:44rem}
.enq__rule{width:100%;max-width:44rem;height:1px;border:0;margin:0;background:var(--sc-accent);
  transform-origin:0 50%;transform:scaleX(clamp(0,var(--sc-p,0) * 1.6,1))}
.enq__end{margin:0;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:.04em;color:var(--sc-ink-soft)}

/* ---------------------------------------------------------- sheet ----- */
.sheet{width:min(52rem,92vw);max-height:88vh;padding:0;border:0;border-radius:var(--sc-r-lg);
  background:var(--sc-surface);color:var(--sc-ink);box-shadow:var(--sc-e3);overflow:hidden}
.sheet::backdrop{background:color-mix(in oklab,#0B0C0E 62%,transparent);backdrop-filter:blur(3px)}
.sheet__body{overflow-y:auto;max-height:88vh;padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:var(--sc-4)}
.sheet__x{position:absolute;top:.7rem;right:.7rem;z-index:3;width:2rem;height:2rem;border-radius:99px;
  border:1px solid var(--sc-hairline-strong);background:var(--sc-surface);color:var(--sc-ink);
  font-size:1.1rem;line-height:1;cursor:pointer}
.sheet__shot img,.sheet__shot svg{width:100%;height:auto;border-radius:var(--sc-r-md);
  box-shadow:var(--sc-e1);background:color-mix(in oklab,var(--sc-ink) 4%,var(--sc-surface))}
.sheet__prose{display:grid;gap:.3rem}
.sheet__prose h4{margin:var(--sc-4) 0 0;font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);
  letter-spacing:var(--sc-track-wide);text-transform:uppercase;color:var(--sc-accent-text)}
.sheet__prose p{margin:0;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);line-height:1.6;max-width:60ch}

/* ---------------------------------------------------- pointer ring ---- */
.cur{display:none}
@media (hover:hover) and (pointer:fine){
  .cur{display:block;position:fixed;left:0;top:0;z-index:9999;pointer-events:none;will-change:transform}
  .cur__ring{position:absolute;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;
    border:1.5px solid var(--sc-accent);border-radius:999px;opacity:0;transform:scale(.6);
    transition:transform 220ms var(--sc-ease-out),opacity 220ms var(--sc-ease-out),
      background-color 220ms var(--sc-ease-out),border-color 220ms var(--sc-ease-out)}
  .cur__lab{position:absolute;left:0;top:0;translate:-50% 0;margin-top:1.55rem;
    font-family:var(--sc-font-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
    color:var(--sc-ink);opacity:0;transition:opacity 180ms var(--sc-ease-out);white-space:nowrap}
  .cur.is-live .cur__ring{opacity:1;transform:scale(1)}
  .cur.is-view .cur__ring{transform:scale(1.5);background:color-mix(in oklab,var(--sc-accent) 12%,transparent)}
  .cur.is-go .cur__ring{transform:scale(1.35);background:color-mix(in oklab,var(--sc-accent) 14%,transparent);border-width:2px}
  .cur.is-file .cur__ring{transform:scale(1.25)}
  .cur.is-jump .cur__ring{transform:scale(.62);background:var(--sc-accent);border-color:var(--sc-accent)}
  /* over an index mark the ring stays hollow, so it never covers the mark */
  .cur.is-mark .cur__ring{transform:scale(.5);background:transparent;border-color:var(--sc-accent)}
  .cur.is-view .cur__lab,.cur.is-go .cur__lab,.cur.is-file .cur__lab{opacity:1}}

/* ============================== PHONE ============================== */
@media (max-width:1100px){
  :root{--idx-w:0rem;--rail-left:var(--sc-gutter);--card-w:clamp(16.5rem,76vw,20rem)}

  /* Dashes need a pointer to read. Touch has none, so the phone keeps the
     numbered bar at the foot of the screen, labels always visible. */
  .idx{left:0;right:0;top:auto;bottom:0;height:auto;width:auto;align-items:center;
    padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom,0px));
    background:color-mix(in oklab,var(--sc-canvas) 90%,transparent);
    backdrop-filter:saturate(180%) blur(14px);border-top:1px solid var(--sc-hairline);
    overflow-x:auto;scrollbar-width:none}
  .idx::-webkit-scrollbar{display:none}
  .idx ul{grid-auto-flow:column;gap:.1rem;padding:0;width:100%;justify-content:space-around}
  .idx li{display:block}
  .idx a{flex-direction:column;align-items:center;gap:.12rem;width:auto;height:auto;
    padding:.35rem .5rem;text-align:center}
  .idx a::before{content:attr(data-n);font-family:var(--sc-font-mono);font-size:.55rem;
    letter-spacing:.04em;color:color-mix(in oklab,var(--sc-ink-soft) 60%,transparent)}
  .idx a.is-here::before{color:var(--sc-accent-text)}
  .idx i{display:none}
  .idx span{position:static;transform:none;opacity:1;font-size:.66rem;line-height:1.2;
    color:inherit;background:none;border:0;box-shadow:none;padding:0}
  .idx a.is-here span{color:var(--sc-ink)}
  html.on-dark .idx{background:color-mix(in oklab,#101114 92%,transparent);
    border-top-color:color-mix(in oklab,#F2F0EC 15%,transparent)}
  html.on-dark .idx a{color:#9C988F}
  html.on-dark .idx a::before{color:color-mix(in oklab,#9C988F 62%,transparent)}
  html.on-dark .idx a.is-here,html.on-dark .idx a.is-here span{color:#F2F0EC}
  html.on-dark .idx a.is-here::before{color:#FFA05C}
  html.on-dark .idx span,html.on-warm .idx span{color:inherit;background:none;border:0;box-shadow:none}
  body{padding-bottom:3.4rem}

  .hero{padding-top:clamp(4rem,11vh,6rem);padding-bottom:2.5rem}
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--sc-6)}
  .hero__copy{order:2}
  .hero__copy .disp--xl{font-size:clamp(1.75rem,1rem + 3.4vw,2.5rem);max-width:20ch}
  .hero__copy .lede{font-size:var(--sc-t-base)}
  .hero__subject{order:1;width:min(60%,15rem)}
  .hero__resume{right:-1rem;top:1.1rem;width:4.6rem;font-size:.61rem}
  .accession{left:auto;right:-.6rem;bottom:-.8rem;font-size:.55rem}
  .mount{left:-5%;top:-4%;width:95%}
  .facts > div{grid-template-columns:5rem 1fr}
  .facts--wide > div{grid-template-columns:5.6rem 1fr}

  .point{flex-basis:min(30rem,86vw);width:min(30rem,86vw);padding-left:1rem}
  .point .disp--lg{font-size:clamp(1.6rem,1rem + 3vw,2.1rem)}

  .sys__stage{grid-template-rows:auto minmax(0,1fr) auto;gap:.65rem;
    padding:clamp(.8rem,2.4vh,1.4rem) var(--sc-gutter) calc(3.4rem + env(safe-area-inset-bottom,0px))}
  .sys__head .disp--md{font-size:var(--sc-t-lg);max-width:24ch}
  .pipe--wide{display:none} .pipe--tall{display:block}
  .sys__diagram,.sys__lower{grid-row:2;grid-column:1;min-height:0}
  .sys__diagram{opacity:calc(1 - clamp(0,(var(--sc-p,0) - .58) * 12,1))}
  .sys__lower{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;
    align-content:start;gap:1rem;border-top:0;padding-top:0;overflow:hidden;isolation:isolate;
    pointer-events:none}
  .sys__lower::before{content:"";position:absolute;inset:-.7rem -1rem;z-index:-1;
    background:var(--sc-canvas);opacity:clamp(0,(var(--sc-p,0) - .56) * 22,1)}
  .sys__lower > *{opacity:clamp(0,(var(--sc-p,0) - .615) * 16,1)}
  .sys__stage.is-lower .sys__lower{pointer-events:auto}
  .lg[data-rec="clean"]{--at:.64}.lg[data-rec="invalid"]{--at:.68}.lg[data-rec="dup"]{--at:.72}
  .lg[data-rec="reply"]{--at:.76}.lg[data-rec="resched"]{--at:.80}
  .lg{grid-template-columns:5.4rem minmax(0,1fr);gap:0 .7rem;padding-bottom:.32rem}
  .lg i{grid-column:2;grid-row:1;text-align:left}
  .lg span{grid-column:1/-1}
  .chips__out{min-height:6.4em}
  .prov{grid-row:3;padding-top:.5rem}

  /* the offsets go, the wide opener leads. Four across on a tablet keeps a
     9:16 card from growing to most of the screen. */
  .ribbon{grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}
  .rib{transform:none !important}
  .rib--a{grid-column:span 4}
  .rib--a img{aspect-ratio:16/9}

  .about__grid{grid-template-columns:minmax(0,1fr);gap:var(--sc-7)}
  .arc__list summary{grid-template-columns:3.4rem minmax(0,1fr) 1.2rem;gap:.7rem;padding:var(--sc-4) 0}
  .arc__list summary b{font-size:var(--sc-t-base)}
  .arc__list details p{padding-left:0;margin-bottom:var(--sc-5)}
  .kit{min-height:0;padding-block:var(--sc-6)}
  .kit__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sc-5)}
  .kit__pile{display:none}
  .kit__col h3,.kit__col li{opacity:1 !important}
  .enq__plate .disp--lg{font-size:clamp(1.8rem,1rem + 3.4vw,2.3rem)}
}

/* narrow phones: two across under the opener */
@media (max-width:700px){
  .ribbon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rib--a{grid-column:span 2}
  .rib--a img{aspect-ratio:16/10}
}

@media (max-height:800px){
  .sys__stage{gap:.45rem;padding-block:clamp(.75rem,1.9vh,1.3rem) clamp(.65rem,1.7vh,1.1rem)}
  .sys__head .disp--md{font-size:var(--sc-t-lg)}
  .sys__head{gap:.32rem}
  .lg{padding-bottom:.16rem} .ledger{gap:.28rem} .chips{gap:.32rem}
  .chips__out{min-height:4.2em} .prov{padding-top:.42rem}
}
@media (max-height:700px){
  .enq__plate{gap:var(--sc-4)} .enq__plate .facts > div{padding-top:.45rem}
}

/* ====================================================== 05 · THE DESK ===
   A pile. Each card sticks a little lower than the one before it, so the
   stack builds as you scroll and every earlier card stays on screen as an
   edge. Pure sticky positioning: no engine, no script, no timers. The head
   sticks too, so the frame (who, where, when) never leaves while the pile
   builds. Nothing here may take `overflow` other than visible, or sticky
   stops working.
   ---------------------------------------------------------------------- */
.desk{padding-block:var(--sc-section);position:relative}
.desk::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 60% at 88% 0%,color-mix(in oklab,var(--sc-accent) 7%,transparent),transparent 62%)}
.desk > .wrap{position:relative;z-index:1}

.desk__grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,4vw,4.5rem);align-items:start}

.desk__head{display:grid;gap:var(--sc-4);align-content:start;
  position:sticky;top:clamp(5rem,16vh,9rem)}
.desk__head .lede{font-size:var(--sc-t-base);line-height:1.55;max-width:40ch}
.desk__where{margin:0;display:flex;align-items:center;gap:.55rem;
  font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);letter-spacing:var(--sc-track-wide);
  text-transform:uppercase;color:var(--sc-ink-soft)}
.desk__where em{font-style:normal;color:var(--sc-accent-text)}

/* ------------------------------------------------------------- pile --- */
.desk__deck{--stick:clamp(4.75rem,15vh,8.5rem);--step:.85rem;--tab:3.35rem;
  display:grid;gap:clamp(.85rem,1.6vw,1.25rem);padding-bottom:11vh}

.dk{position:sticky;top:calc(var(--stick) + var(--i,0) * var(--step));
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1rem,2.2vw,1.75rem);
  align-items:start;min-height:12.5rem;
  padding:clamp(1.15rem,2.2vw,1.6rem);
  background:var(--sc-surface);border:1px solid var(--sc-hairline);
  border-radius:var(--sc-r-lg);box-shadow:var(--sc-e2)}
/* the top edge of every card carries a hairline of accent, so the covered
   cards read as layered paper rather than as one flat block */
.dk::before{content:"";position:absolute;left:clamp(1.15rem,2.2vw,1.6rem);width:2.6rem;
  top:-2px;height:3px;border-radius:3px;background:var(--sc-accent);
  transform:translateX(calc(var(--i,0) * var(--tab,3.35rem)))}

.dk__art{width:clamp(4.75rem,8vw,6rem);aspect-ratio:1;flex:none;
  display:grid;place-items:center;border-radius:var(--sc-r-md);
  background:color-mix(in oklab,var(--sc-accent) 7%,var(--sc-canvas));
  border:1px solid var(--sc-hairline);color:var(--sc-ink)}
.dk__art svg{width:78%;height:78%;display:block;overflow:visible}

.dk__body{display:grid;gap:.55rem;align-content:start}
.dk__k{margin:0;font-size:var(--sc-t-lg);font-weight:700;line-height:1.2;
  letter-spacing:var(--sc-track-snug);display:flex;align-items:baseline;gap:.7rem;text-wrap:balance}
.dk__n{font-family:var(--sc-font-mono);font-size:var(--sc-t-xs);font-weight:600;
  letter-spacing:var(--sc-track-wide);color:var(--sc-accent-text);flex:none}
.dk__d{margin:0;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);line-height:1.55;max-width:46ch}
.dk__t{margin:.15rem 0 0}

.desk__end{margin:0;color:var(--sc-ink-soft);font-size:var(--sc-t-sm);max-width:40ch;
  padding-top:var(--sc-2);border-top:1px solid var(--sc-hairline)}

/* --------------------------------------------------------- narrow ----- */
@media (max-width:1100px){
  .desk__grid{grid-template-columns:1fr;gap:var(--sc-6)}
  .desk__head{position:static}
  .desk__deck{--stick:clamp(3.75rem,11vh,6rem);--step:.7rem;--tab:2.7rem;padding-bottom:9vh}
}
@media (max-width:700px){
  .dk{grid-template-columns:1fr;gap:.9rem;min-height:0}
  .dk__art{width:3.85rem}
  .dk__k{font-size:var(--sc-t-base)}
  .desk__deck{--step:.55rem;--tab:1.55rem}
}
/* a short viewport cannot afford a tall pile offset */
@media (max-height:760px){
  .desk__deck{--stick:clamp(3.25rem,9vh,5rem);--step:.6rem}
  .desk__head{top:clamp(3.25rem,9vh,5rem)}
}

/* ------------------------------------------------------ reduced ------- */
@media (prefers-reduced-motion:reduce){
  .cur{display:none !important}
  .desk__head{position:static}
  .obj,.lg,.point{opacity:1 !important;transform:none !important}
  .nd,.pl,.rec{opacity:1 !important}
  .ln--main,.ln--br{stroke-dashoffset:0 !important}
  .enq__rule,.rail__prog span{transform:none !important}
  .sys__diagram{opacity:1 !important}
  .pipe__track,.pipe__plates,.pipe__track .trn{opacity:1 !important}
  .pipe__track .tr{stroke-dashoffset:0 !important}
  .sys__lower{opacity:1 !important;pointer-events:auto !important;position:static !important}
  .sys__lower > *{opacity:1 !important} .sys__lower::before{opacity:0 !important}
  .rib{transform:none !important}
  .kit{min-height:0}
  .kit__pile{display:none !important}
  .kit__col h3,.kit__col li{opacity:1 !important}
  .point{opacity:1 !important;transform:none !important}
  .work__top{transform:none !important;box-shadow:none !important}
  [data-sc-act="pan"] .sc-stage{scroll-padding-inline-start:var(--rail-left)}
}

@media print{
  .idx,.cur,.sc-grain{display:none !important}
  .sc-stage{position:static !important;height:auto !important}
  section{page-break-inside:avoid}
}