/* v7 "Proof, alive" — the live sheet. Folded in from moodboards/v7c-alive/
   style.v7c.css on 2026-07-10; revised the same day on Satya's first read
   (round 2): the canonical resolve specimen retired with its layer, the
   header became a section ticker, the receipt stepper now folds its
   unchecked stages, every openable plate carries a cue chip, and the
   editorial page gained the book-run rail.

   The system in one breath: Colorplan Pristine White ground, Piazzolla and
   Public Sans self-hosted, one correction ink for the editor's pen and one
   register ink per dossier. Motion lives on the furniture and the marks,
   never on the running copy, and hover is the bonus tier: every joyful
   thing has a press form, because a recruiter reads this on a phone.

   No rounded corners, no shadows, no grain, no glow, no blur, and no
   scroll-driven animation anywhere; colour mixing runs in oklab because the
   cylindrical space drags near-neutrals to lavender. The banned-token list
   lives in tests/v7-structure.sh, which audits this sheet.

   Garnish round, 2026-07-13: margin glosses (the proofreader's pencil),
   a status line and spec card on the landing, the colophon rebuilt around
   the email, and a night edition. The night edition is the DEFAULT (his
   call, same day): the base tokens are the dark room, readers whose
   system asks for light get the paper edition under "screen and
   (prefers-color-scheme: light)", and the print layer pins the paper
   palette outright, so the sheet a recruiter prints is always paper.
   Every artefact keeps a paper backing (invisible on paper, lamplight
   after dark: the Iyer and KKR charts are transparent PNGs with dark
   labels and would otherwise vanish), and the colophon overprint runs as
   screen on the night ground, multiply on paper: each can only push away
   from its own ground.                                                   */

@layer reset, tokens, base, furniture, dossier, essay, print;

@font-face{font-family:"V7 Serif";src:url("assets/fonts/piazzolla-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"V7 Serif";src:url("assets/fonts/piazzolla-italic-latin.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"V7 Sans";src:url("assets/fonts/publicsans-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Registered so they interpolate. Both are read on the element that sets
   them, so they must not inherit; a pseudo-element inherits from its
   originating element, which is the trap that silently kills the move. */
@property --draw{syntax:"<percentage>";inherits:false;initial-value:0%}
@property --ink{syntax:"<number>";inherits:false;initial-value:400}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  body,h1,h2,h3,p,figure,blockquote,table{margin:0}
  img{display:block;max-width:100%;height:auto}
  table{border-collapse:collapse}
  button{font:inherit;color:inherit;background:none;border:0}
}

@layer tokens{
  :root{
    /* The night edition is the default edition (2026-07-13, his call):
       the same warm sheet with the lights off. The paper palette lives
       in the day-edition block below and is pinned again in print. */
    --ground:#161511;       /* Colorplan Pristine White, lights off */

    --key:#ece8df;          /* body. Never overprints. */
    --muted:#a69d8e;        /* secondary, and the struck words */
    --correction:#e5837a;   /* the editor's pen under lamplight. Marks only. */
    --register:#9db1e3;     /* per dossier; set by body class below. */

    --line:color-mix(in oklab,var(--key) 26%,var(--ground));
    --frost-strength:7%;
    --frost:color-mix(in oklab,var(--key) var(--frost-strength),var(--ground));
    /* the selection needs its own strength: at 12% the highlight sinks
       into the dark; 14% keeps the pen AA on it. The day edition drops
       back to 12% below. */
    --select:color-mix(in oklab,var(--key) 14%,var(--ground));

    /* constants that must not flip with the scheme: real paper for the
       artefact backings after dark, real ink for the dark chart plates,
       and the opened sheet's veil with its own text colour */
    --paper:#fffdf9;
    --plate-dark:#181814;
    --veil:#080706;
    --veil-text:var(--key);
    color-scheme:dark;

    --serif:"V7 Serif",Georgia,serif;
    --sans:"V7 Sans","Helvetica Neue",sans-serif;

    --step--1:clamp(.78rem,.75rem + .14vw,.86rem);
    --step-0:clamp(1.05rem,1.01rem + .2vw,1.16rem);
    --step-1:clamp(1.24rem,1.1rem + .7vw,1.6rem);
    --step-2:clamp(1.5rem,1.3rem + 1vw,2.05rem);
    --step-3:clamp(1.9rem,1.5rem + 2vw,2.8rem);
    --step-5:clamp(3.2rem,2.3rem + 4.6vw,6.4rem);

    --space-3xs:.25rem; --space-2xs:.45rem; --space-xs:.75rem;
    --space-s:1rem;     --space-m:1.6rem;   --space-l:2.4rem;
    --space-xl:3.6rem;  --space-2xl:5.2rem; --space-3xl:7.5rem;

    /* opsz tops out at 30 in Piazzolla. Presence comes from weight. */
    --f-display:"opsz" 30,"wght" 600;
    --f-mid:"opsz" 30,"wght" 500;
    --f-text:"opsz" 11,"wght" 400;
    --f-small:"opsz" 8,"wght" 460;

    /* A press has mass. It goes down fast and settles, overshooting a hair.
       linear() approximates that spring in one declaration, no JS, and it is
       the only easing on the sheet that is allowed to overshoot. */
    --spring:linear(0,.106 2.4%,.4 5.6%,.882 10.7%,1.05 13.6%,1.117 16.6%,1.09 20.7%,.995 27.5%,.966 31.6%,.981 39.1%,1.006 51.4%,1);
    --bite:cubic-bezier(.2,0,.1,1);   /* the pen coming down. No overshoot. */
    --t-press:.1s;
    --t-mark:.32s;
  }

  /* One register ink per dossier: the night voices of Claret, Forest and
     Federal Blue. All three clear AA body on the night ground (claret
     7.45:1, forest 8.54:1, federal 8.55:1); the paper set below clears
     14.10 / 10.80 / 7.24 on its stock. Measured by tests/ink-check.py. */
  body.reg-editorial{--register:#d49599}   /* Claret, night voice */
  body.reg-ai{--register:#8cbd94}          /* Forest, night voice */
  body.reg-campaigns{--register:#9db1e3}   /* Federal Blue, night voice */

  /* ---------------------------------------------------------- day edition */
  /* Screen-only: readers whose system asks for light get the paper
     edition, the original v7 sheet on Colorplan Pristine White (chosen
     2026-07-09). Print pins this same palette in the print layer, so
     paper is what always comes off the printer. prefers-color-scheme is
     the whole switch: the sheet stays zero-JS. */
  @media screen and (prefers-color-scheme:light){
    :root{
      color-scheme:light;
      --ground:#fffdf9;
      --key:#181814;
      --muted:#5d574e;
      --correction:#b62a2f;  /* the editor's pen */
      --register:#3d5588;
      /* at 7% on near-white stock the highlight is invisible; 12% reads */
      --select:color-mix(in oklab,var(--key) 12%,var(--ground));
      --veil:var(--key);
      --veil-text:var(--ground);
    }
    body.reg-editorial{--register:#461e1f}   /* Colorplan Claret */
    body.reg-ai{--register:#214421}          /* Colorplan Forest */
    body.reg-campaigns{--register:#3d5588}   /* Riso Federal Blue */
  }
}

@layer base{
  html{background:var(--ground)}
  body{
    background:var(--ground);
    color:var(--key);
    font-family:var(--serif);
    font-size:var(--step-0);
    line-height:1.55;
    font-variation-settings:var(--f-text);
    font-variant-numeric:oldstyle-nums proportional-nums;
  }
  h1,h2,h3{font-weight:400;letter-spacing:-.015em;text-wrap:balance}
  p{text-wrap:pretty}
  .measure{max-width:66ch}
  .shell{width:min(1180px,100% - 3rem);margin-inline:auto}

  /* The reader keeps the pen. Only background and color are reliable here. */
  ::selection{background:var(--select);color:var(--correction)}

  a{
    color:inherit;text-decoration:none;
    background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 1px;
    transition:background-size .2s var(--bite);
  }
  a:hover,a:focus-visible{background-size:100% 1px}
  /* a link inside running copy must be visible at rest, not only on approach:
     a half-strength hairline that takes full ink on hover. */
  p a,figcaption a,.credit a{
    background-size:100% 1px;
    background-image:linear-gradient(color-mix(in oklab,currentColor 45%,transparent),color-mix(in oklab,currentColor 45%,transparent));
  }
  p a:hover,p a:focus-visible,figcaption a:hover,figcaption a:focus-visible,
  .credit a:hover,.credit a:focus-visible{
    background-image:linear-gradient(currentColor,currentColor);
  }
  :focus-visible{outline:2px solid var(--correction);outline-offset:3px}

  .skip-link{position:fixed;z-index:50;top:1rem;left:1rem;padding:.6rem .9rem;background:var(--key);color:var(--ground);transform:translateY(-200%)}
  .skip-link:focus{transform:none}
  .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@layer furniture{
  .kicker{
    font-family:var(--serif);
    font-variant-caps:small-caps;
    font-feature-settings:"smcp";
    font-variation-settings:"opsz" 12,"wght" 560;
    font-size:.95rem;
    letter-spacing:.09em;
    color:var(--register);
  }

  /* ------------------------------------------------ the garnish furniture */
  /* The status line: a fact, cheap to remove the day it stops being true.
     The dot is drawn square, the imprint's ink-swatch grammar; the subset
     fonts carry no U+25CF, and a round dot would need the banned radius. */
  .kicker-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--space-3xs) var(--space-m)}
  .status{
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--key);
  }
  .status::before{content:"";display:inline-block;width:.6em;height:.6em;background:var(--correction);margin-right:.5em}

  /* the spec card: dotted-leader rows, the grammar of a colophon's spec
     table. No box; the leaders are the only furniture. */
  .spec{margin:var(--space-l) 0 var(--space-2xl);max-width:44rem}
  .spec>div{display:flex;align-items:baseline;gap:var(--space-s);padding:.5rem 0}
  .spec dt{
    flex:1;display:flex;align-items:baseline;gap:var(--space-s);
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  }
  .spec dt::after{content:"";flex:1;border-bottom:1px dotted color-mix(in oklab,var(--key) 42%,var(--ground));transform:translateY(-.3em)}
  .spec dd{margin:0;font-size:var(--step-0);text-align:right;max-width:34ch}

  /* the margin gloss: the proofreader's pencil. Piazzolla italic in the
     pen's ink over a short hairline leader, hung in the margin beside the
     line it annotates; below 900px it tucks in after the line. It is real
     copy, so it stays in the accessibility tree and prints with the page.
     A gloss annotates; it never re-litigates a settled edit. */
  .glossed{
    display:grid;grid-template-columns:minmax(0,auto) minmax(11rem,15rem);
    justify-content:start;column-gap:clamp(2rem,5vw,5rem);align-items:start;
  }
  .glossed+p{margin-top:var(--space-s)}
  .gloss{
    font-style:italic;color:var(--correction);
    font-size:var(--step--1);line-height:1.5;max-width:22ch;
    font-variation-settings:"opsz" 9,"wght" 450;
    padding-top:.15rem;
  }
  .gloss::before{content:"";display:block;width:2.4rem;border-top:1px solid var(--correction);margin-bottom:.45rem}

  .site-header{border-bottom:1px solid var(--line)}
  /* centre-aligned, not baseline: baseline packing left the strip
     bottom-heavy (his note, 2026-07-13) */
  .header-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-m);min-height:4.2rem;padding-block:var(--space-2xs)}

  /* Ink saturation. The wordmark and the index entries gain weight on
     approach, the way ink saturates a fibre. Anything that could wrap is
     width-locked below so a heavier weight cannot shove the column. */
  .wordmark{
    font-size:1.05rem;background:none;cursor:pointer;
    font-variation-settings:"opsz" 14,"wght" var(--ink);
    --ink:500;
    width:max-content;
    transition:--ink .2s var(--bite);
  }
  /* :active is not decoration here. It is the only form of this a thumb
     ever receives, and cursor:pointer makes iOS Safari paint it on tap. */
  .wordmark:hover,.wordmark:focus-visible,.wordmark:active{--ink:700}

  /* the ticker: the whole map of the site in one dense row. The current
     section stands in its register ink under a firm rule; the others wait
     in the margin colour. Same three-beat press grammar as the stage rail. */
  .ticker{
    display:flex;flex-wrap:wrap;column-gap:var(--space-m);row-gap:0;
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;
    font-variant-numeric:lining-nums;
  }
  .ticker a{
    background:none;color:var(--muted);
    padding:.45rem 0 .35rem;
    border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color .14s var(--bite),border-bottom-color .14s var(--bite),
               border-bottom-width var(--t-press) var(--bite);
  }
  .ticker a:hover,.ticker a:focus-visible{color:var(--key)}
  .ticker a:active{border-bottom-width:4px;border-bottom-color:var(--correction);padding-bottom:calc(.35rem - 2px)}
  .ticker a[aria-current="page"]{color:var(--register);border-bottom-color:var(--register)}

  .section-rule{
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-m);
    border-top:2px solid var(--correction);
    padding-top:var(--space-xs);
    margin-bottom:var(--space-m);
    position:relative;z-index:1;
  }
  .section-rule h2{
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;
  }
  .section-rule p{
    font-family:var(--sans);font-size:var(--step--1);color:var(--muted);letter-spacing:.02em;
    font-variant-numeric:lining-nums;
  }

  .standfirst{
    font-size:var(--step-1);line-height:1.34;max-width:44ch;
    font-variation-settings:"opsz" 24,"wght" 360;
  }

  blockquote{
    font-style:italic;font-size:var(--step-2);line-height:1.32;
    border-left:2px solid var(--register);padding-left:var(--space-s);
    margin-block:var(--space-m);max-width:48ch;
  }
}

@layer dossier{
  .route-hero{padding:var(--space-2xl) 0 var(--space-l);position:relative;isolation:isolate}
  .route-hero h1{
    font-size:var(--step-5);line-height:.94;letter-spacing:-.025em;
    margin:var(--space-2xs) 0 var(--space-m);max-width:12ch;
    font-variation-settings:var(--f-display);
  }
  .route-hero .standfirst{margin-bottom:var(--space-s)}
  /* a sentence-length h1 reads as a statement, not a title. Weight carries it. */
  .route-hero h1.statement{font-size:var(--step-3);line-height:1.12;max-width:24ch;letter-spacing:-.02em}

  .case-section{padding:var(--space-xl) 0 var(--space-2xl)}
  .case-section p+p,.route-hero p+p{margin-top:var(--space-s)}
  .case-layout{
    display:grid;grid-template-columns:minmax(0,1.15fr) minmax(18rem,.85fr);
    gap:clamp(2rem,5vw,5rem);align-items:start;
  }
  .case-layout>*{min-width:0}

  h3{
    font-size:var(--step-2);margin:var(--space-l) 0 var(--space-2xs);
    font-variation-settings:var(--f-mid);
  }
  h3:first-child{margin-top:0}

  .eyebrow{
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    margin-bottom:var(--space-3xs);
  }

  /* ------------------------------------------- plates that open, not figures */
  /* A <button> wrapping the plate, so keyboard and touch get it for free. The
     press is the ink taking: the frame's foot rule thickens and reddens. The
     plate itself never lifts and never casts a shadow. */
  .plate{border:0;padding:0;background:none;display:block;width:100%}
  .plate-open{
    display:block;width:100%;cursor:zoom-in;text-align:left;
    border:1px solid var(--key);
    border-bottom:1px solid var(--key);
    padding:var(--space-2xs);
    transition:border-color var(--t-press) var(--bite);
  }
  .plate-open img{width:100%}
  .plate-open:hover,.plate-open:focus-visible{border-color:var(--correction)}
  .plate-open:active{border-bottom-width:3px;border-bottom-color:var(--correction);padding-bottom:calc(var(--space-2xs) - 2px)}

  /* the cue chip: a plate must say it opens. The insertion mark carries the
     invitation; on approach the chip takes the pen's ink and the mark turns,
     the same move the old proof rail made. Screen-only furniture. */
  .plate-cue{
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2xs);
    margin-top:var(--space-2xs);padding-top:.3rem;
    border-top:1px solid var(--line);
    font-family:var(--sans);font-size:.66rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
    transition:color .14s var(--bite),border-top-color .14s var(--bite);
  }
  .plate-cue::after{
    content:"\2295";
    font-family:var(--serif);font-size:.95rem;line-height:1;font-weight:400;
    color:var(--correction);
  }
  .plate-open:hover .plate-cue,.plate-open:focus-visible .plate-cue{
    color:var(--correction);border-top-color:var(--correction);
  }

  .plate figcaption{
    padding:var(--space-xs) var(--space-3xs) var(--space-3xs);
    font-size:var(--step--1);color:var(--muted);line-height:1.45;
    font-variation-settings:var(--f-small);
  }
  .plate figcaption b{
    display:block;font-family:var(--sans);font-weight:700;font-size:var(--step--1);
    letter-spacing:.09em;text-transform:uppercase;color:var(--key);margin-bottom:var(--space-3xs);
  }
  .plate figcaption a{color:inherit}
  .plate-stack{position:sticky;top:var(--space-m);display:grid;gap:var(--space-m)}
  .plate-row{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-s);margin-top:var(--space-m)}
  .plate-row.two{grid-template-columns:repeat(2,1fr);max-width:56rem}
  /* the curated wall: a scale block heads it, the grid carries the run,
     and a wide plate takes the full line beneath at the wall's own width */
  .wall{margin-top:var(--space-l)}
  .plate-wide{max-width:56rem;margin-top:var(--space-s)}
  /* the shelf: a row of book jackets, each a control */
  .plate-shelf{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-s);margin-top:var(--space-m)}

  /* the opened sheet. Top layer, light dismiss, Escape, focus return: all native. */
  .sheet{
    border:0;padding:0;background:none;max-width:min(94vw,1150px);width:100%;
    position:fixed;inset:0;margin:auto;height:max-content;max-height:94dvh;overflow:auto;
    opacity:1;
    transition:opacity .18s var(--bite),overlay .18s allow-discrete,display .18s allow-discrete;
  }
  .sheet:not(:popover-open){opacity:0}
  @starting-style{.sheet:popover-open{opacity:0}}
  /* the backdrop has to actually close the page. At 82% the copy behind
     stayed legible and the sheet's foot appeared to float over it. */
  .sheet::backdrop{background:color-mix(in oklab,var(--veil) 94%,transparent)}
  /* a sheet for a plate cut at 598px: open at natural size, never upscaled
     to the full sheet width */
  .sheet-narrow{max-width:min(94vw,600px)}
  .sheet img{width:100%;border:1px solid var(--veil-text)}
  .sheet-foot{
    display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-s);
    padding-top:var(--space-2xs);
    font-family:var(--sans);font-size:var(--step--1);color:var(--veil-text);
  }
  .sheet-foot a{color:inherit}
  .sheet-close{
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--veil-text);
    cursor:pointer;padding:.2rem 0 .1rem;
    border-bottom:1px solid color-mix(in oklab,var(--veil-text) 50%,transparent);
    transition:border-bottom-width var(--t-press) var(--bite),border-bottom-color var(--t-press) var(--bite);
  }
  .sheet-close:hover,.sheet-close:focus-visible{border-bottom-color:var(--veil-text)}
  .sheet-close:active{border-bottom-width:3px}

  /* a sheet that opens to a page rather than a plate: the jacket beside the
     blurb that went to print on it. Paper on the dark backdrop, flat. */
  .sheet-page{
    display:grid;grid-template-columns:minmax(9rem,.45fr) 1fr;gap:var(--space-m);
    background:var(--ground);color:var(--key);padding:var(--space-m);
    align-items:start;
  }
  .sheet-page img{border:1px solid var(--line)}
  .sheet-page .blurb{
    font-style:normal;font-size:var(--step-0);line-height:1.55;border:0;padding:0;margin:0;max-width:58ch;
  }
  .sheet-page .blurb p{margin-bottom:var(--space-xs)}
  .sheet-page h3{margin-top:0;font-size:var(--step-1)}
  .sheet-page .byline{color:var(--muted);font-size:var(--step--1);margin-bottom:var(--space-s)}
  .sheet-page .credit{
    font-family:var(--sans);font-size:var(--step--1);color:var(--muted);
    border-top:1px solid var(--line);padding-top:var(--space-2xs);margin-top:var(--space-2xs);
  }

  /* a sheet that opens to a strip: the carousel as it ran, slide by slide. */
  .sheet-strip{
    display:grid;grid-auto-flow:column;grid-auto-columns:min(76vw,22rem);
    gap:var(--space-2xs);overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:var(--space-2xs);
  }
  .sheet-strip img{scroll-snap-align:center}

  /* ------------------------------------------------------------ the book run */
  /* The chain a title walks from manuscript to print, drawn: six stages on
     one spine, and the fifth forks into two working lanes that rejoin for
     the print order. Same connector grammar as the engine opposite: border
     rules, drawn heads, no glyphs, so it prints whole and lands on paper
     the way it lands on screen. */
  .book-run{
    list-style:none;margin:var(--space-l) auto 0;padding:0;
    counter-reset:run;max-width:44rem;
    --flow:var(--register);--fan-gap:var(--space-m);
  }
  .book-run>li{
    counter-increment:run;position:relative;
    width:fit-content;min-width:min(26rem,100%);max-width:100%;
    margin-inline:auto;
    border:1px solid var(--key);
    padding:var(--space-2xs) var(--space-s) var(--space-xs);
  }
  .book-run>li+li{margin-top:var(--space-l)}
  .book-run>li+li::before{
    content:"";position:absolute;left:calc(50% - 1px);top:calc(-1*var(--space-l));height:2rem;
    border-left:2px solid var(--flow);
  }
  .book-run>li+li::after{
    content:"";position:absolute;left:50%;top:-.4rem;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }
  .book-run>li>b{
    display:block;font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--key);
    margin-bottom:var(--space-3xs);
  }
  .book-run>li>b::before{
    content:counter(run,decimal-leading-zero);
    color:var(--register);margin-right:.7rem;letter-spacing:.05em;
    font-variant-numeric:lining-nums tabular-nums;
  }
  .book-run p{font-size:var(--step--1);color:var(--muted);font-variation-settings:var(--f-small);max-width:52ch}
  .book-run>li.run-print{border-width:2px}

  /* stage five: the fork. A header on the spine, a bus, two lanes, a rejoin */
  .book-run>li.run-fork{border:0;padding:0;text-align:center;width:100%;min-width:0}
  .book-run>li.run-fork>b{
    display:inline-block;margin-bottom:0;
    border:1px solid var(--key);padding:var(--space-2xs) var(--space-s);
  }
  .run-split{display:grid;grid-template-columns:1fr 1fr;gap:var(--fan-gap);text-align:left}
  .run-split>div{border:1px solid var(--key);padding:var(--space-2xs) var(--space-s) var(--space-xs)}
  .run-split b{
    display:block;font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;color:var(--key);
    margin-bottom:var(--space-3xs);
  }
  .run-split p+p{margin-top:0}

  /* the back-and-forth on the passes stage: a small return bracket in the
     pen's ink, the same mark as the engine's correction loop opposite */
  .run-loop{
    position:absolute;left:calc(100% + .4rem);top:.55rem;bottom:.55rem;width:1.4rem;
    border:1px solid var(--correction);border-left:0;
  }
  .run-loop::before{
    content:"";position:absolute;left:0;top:-.27rem;
    border:.26rem solid transparent;border-left:0;border-right:.36rem solid var(--correction);
  }

  .run-fan{
    display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--fan-gap);
    position:relative;height:2.4rem;margin-top:var(--space-3xs);
  }
  .run-fan::after{
    content:"";position:absolute;
    left:calc((100% - var(--fan-gap))/4);right:calc((100% - var(--fan-gap))/4);
    border-top:2px solid var(--flow);
  }
  .run-fan.out::after{top:1rem}
  .run-fan.in::after{top:calc(100% - 1rem)}
  .run-fan>i{position:relative}
  .run-fan>i.mid{position:absolute;inset:0}
  .run-fan.out>i::before{content:"";position:absolute;left:calc(50% - 1px);top:1rem;bottom:.4rem;border-left:2px solid var(--flow)}
  .run-fan.out>i::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }
  .run-fan.out>i.mid::before{left:calc(50% - 1px);top:0;height:1rem;bottom:auto}
  .run-fan.out>i.mid::after{display:none}
  .run-fan.in>i::before{content:"";position:absolute;left:calc(50% - 1px);top:0;height:calc(100% - 1rem);border-left:2px solid var(--flow)}
  .run-fan.in>i::after{display:none}
  .run-fan.in>i.mid::before{top:calc(100% - 1rem);height:auto;bottom:.4rem}
  .run-fan.in>i.mid::after{
    display:block;content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }
  .run-fan.in{margin-top:0}
  .run-fork .run-split{margin-top:0}
  .book-run>li.run-fork+li{margin-top:0}
  .book-run>li.run-fork+li::before,.book-run>li.run-fork+li::after{display:none}
  .run-stake{
    margin-top:var(--space-m);max-width:56ch;
    font-size:var(--step-0);line-height:1.5;
    font-variation-settings:"opsz" 18,"wght" 470;
  }

  /* ------------------------------------------------------------- the engine */
  /* The pipeline, drawn. Three lanes on one grid: the /match-note bypass on
     the left, the trunk in the middle, the correction loop on the right.
     Every connector is a border rule and every arrowhead a border triangle,
     because the subset fonts carry no arrow glyphs (Public Sans has none at
     all; even the plate-cue's U+2295 renders from the Georgia fallback), and
     borders survive print where background fills are dropped. The text is
     real HTML, so find-in-page still reaches every component name. Trunk
     items auto-place in column two; only the two side lanes pin their rows. */
  .engine{
    display:grid;
    grid-template-columns:minmax(8rem,10rem) minmax(0,1fr) 2rem;
    column-gap:var(--space-m);
    margin-top:var(--space-l);
    --flow:var(--register);
    --fan-gap:var(--space-s);
  }
  .engine>*{grid-column:2;min-width:0}
  .engine b{
    display:block;font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    color:var(--register);letter-spacing:.03em;font-variant-numeric:lining-nums;
  }
  .engine span{
    display:block;font-size:var(--step--1);color:var(--muted);
    font-variation-settings:var(--f-small);line-height:1.45;margin-top:.1rem;
    text-wrap:balance;
  }

  .eng-node{
    justify-self:center;text-align:left;max-width:36ch;
    border:1px solid var(--key);padding:var(--space-2xs) var(--space-s);
  }
  .eng-input{border-color:color-mix(in oklab,var(--key) 45%,var(--ground))}
  .eng-post{border-width:2px;padding-inline:var(--space-l)}
  .eng-post b{color:var(--key)}

  /* a file is a ledger strip, not a box: rules above and below, no sides */
  .eng-chit{
    justify-self:center;text-align:left;max-width:40ch;
    border-block:1px solid var(--line);padding:.35rem var(--space-s);
  }
  .eng-chit b{color:var(--key)}
  .eng-stamp{border:2px solid var(--register);padding:var(--space-2xs) var(--space-s)}
  .eng-stamp b{color:var(--register)}

  .eng-band{border:1px solid var(--key);padding:var(--space-2xs) var(--space-s)}
  .eng-band>b+span{max-width:52ch}
  /* the gates catch both lanes, so the band runs under the bypass as well */
  .eng-gates{grid-column:1/3;text-align:left;padding-block:0}
  .eng-gates>div{
    display:grid;grid-template-columns:minmax(8.5rem,10rem) 1fr;gap:var(--space-s);
    padding:var(--space-2xs) 0;border-top:1px solid var(--line);
  }
  .eng-gates>div:first-child{border-top:0}
  .eng-gates span{max-width:56ch}

  /* trunk connectors: a rule down the spine, a drawn head at the foot */
  .eng-flow{display:block;position:relative;height:var(--space-l)}
  .eng-flow::before{
    content:"";position:absolute;left:calc(50% - 1px);top:0;bottom:.34rem;
    border-left:2px solid var(--flow);
  }
  .eng-flow::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }
  .eng-thin::before{border-left-width:1px}

  /* the dispatch fan: bus and drops share the workers' column tracks, so the
     three lines land dead-centre on the three boxes at any width or zoom */
  .eng-fan{
    display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--fan-gap);
    height:3rem;position:relative;
  }
  .eng-fan::after{
    content:"";position:absolute;
    left:calc((100% - 2*var(--fan-gap))/6);right:calc((100% - 2*var(--fan-gap))/6);
    border-top:2px solid var(--flow);
  }
  .eng-fan.out::after{top:1.1rem}
  .eng-fan.in::after{top:calc(100% - 1.1rem)}
  .eng-fan>i{position:relative}
  .eng-fan>i::before{content:"";position:absolute;left:calc(50% - 1px);border-left:2px solid var(--flow)}
  .eng-fan.out>i::before{top:1.1rem;bottom:.34rem}
  .eng-fan.out>i:nth-child(2)::before{top:0}
  .eng-fan.out>i::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }
  .eng-fan.in>i::before{top:0;height:calc(100% - 1.1rem)}
  .eng-fan.in>i:nth-child(2)::before{height:auto;bottom:.34rem}
  .eng-fan.in>i:nth-child(2)::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.32rem solid transparent;border-bottom:0;border-top:.4rem solid var(--flow);
  }

  .eng-workers{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,1fr);column-gap:var(--fan-gap);
  }
  .eng-workers li{border:1px solid color-mix(in oklab,var(--key) 45%,var(--ground));padding:.4rem .3rem;text-align:center}

  /* the short lane: /match-note runs beside the trunk and meets the same
     gates, which is what the receipt below documents */
  .eng-lane{
    grid-column:1;grid-row:3/11;
    display:grid;grid-template-rows:auto minmax(1.6rem,1fr);min-height:0;
  }
  .eng-lane-head{border:1px solid var(--key);padding:var(--space-2xs) var(--space-xs)}
  .eng-lane-rule{position:relative;min-height:1.6rem}
  .eng-lane-rule::before{
    content:"";position:absolute;left:calc(50% - .5px);top:0;bottom:.3rem;
    border-left:1px solid var(--flow);
  }
  .eng-lane-rule::after{
    content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    border:.28rem solid transparent;border-bottom:0;border-top:.36rem solid var(--flow);
  }

  /* the correction loop: verdicts send the work back up. A margin bracket in
     the pen's ink, meeting the two bands on their shoulders, never their
     corners */
  .eng-loop{
    grid-column:3;grid-row:7/12;
    margin:var(--space-m) 0 var(--space-l) calc(-1*var(--space-m));
    border:1px solid var(--correction);border-left:0;
    position:relative;display:grid;align-items:center;justify-items:end;
  }
  .eng-loop::before{
    content:"";position:absolute;left:0;top:-.33rem;
    border:.32rem solid transparent;border-left:0;border-right:.44rem solid var(--correction);
  }
  .eng-loop span{
    writing-mode:vertical-rl;margin:0 .3rem 0 0;
    font-family:var(--sans);font-size:.68rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--correction);
  }

  /* ------------------------------------------------------------ turn it over */
  details{border-block:1px solid var(--line);margin-top:var(--space-l)}
  summary{
    display:flex;justify-content:space-between;align-items:center;gap:var(--space-s);
    padding:var(--space-xs) 0;cursor:pointer;list-style:none;
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;
    border-bottom:1px solid transparent;
    transition:border-bottom-width var(--t-press) var(--bite),border-bottom-color var(--t-press) var(--bite);
  }
  summary::-webkit-details-marker{display:none}
  /* the pen approaches, then bites: no rule at rest, a hairline on hover, a
     thick correction rule under a press. The same three beats on every control. */
  summary:hover,summary:focus-visible{border-bottom-color:var(--line)}
  summary:active{border-bottom-width:3px;border-bottom-color:var(--correction);padding-bottom:calc(var(--space-xs) - 2px)}
  summary .marker{
    color:var(--correction);font-family:var(--serif);font-size:1.3rem;line-height:1;
    transition:transform .22s var(--spring),color var(--t-press) var(--bite);
  }
  details[open] summary .marker{color:var(--register);transform:rotate(45deg)}
  .reveal{
    padding:0 0 var(--space-m);display:grid;
    grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:var(--space-m);
  }
  .reveal p{font-size:var(--step--1);color:var(--muted);font-variation-settings:var(--f-small)}
  .reveal b{
    display:block;font-family:var(--sans);font-size:var(--step--1);
    letter-spacing:.08em;text-transform:uppercase;color:var(--key);margin-bottom:var(--space-3xs);
  }
  /* Chrome only, and it degrades to the jump every browser does today. */
  @supports selector(::details-content){
    details::details-content{
      block-size:0;overflow:clip;
      transition:block-size .3s var(--bite),content-visibility .3s allow-discrete;
    }
    details[open]::details-content{block-size:auto}
  }

  /* ------------------------------------------------- the receipt, steppable */
  /* Four stages of one documented run, in source order. The rail is the
     control: the checked stage stands full and the other three fold to
     their running heads, so clicking visibly turns the page. Native radios
     and :has() only; print (below) unfolds everything, and a browser
     without :has() keeps all four stages open. */
  .stages{margin-top:var(--space-s)}
  .stage-rail{display:flex;flex-wrap:wrap;gap:0 var(--space-s);border-bottom:1px solid var(--line)}
  .stage-rail input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
  .stage-rail label{
    font-family:var(--sans);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;
    padding:.45rem .1rem .35rem;cursor:pointer;color:var(--muted);
    border-bottom:2px solid transparent;margin-bottom:-1px;
    transition:color .14s var(--bite),border-bottom-color .14s var(--bite),border-bottom-width var(--t-press) var(--bite);
  }
  .stage-rail label:hover{color:var(--key)}
  .stage-rail label:active{border-bottom-width:4px;border-bottom-color:var(--correction)}
  .stage-rail input:checked + label{
    color:var(--key);border-bottom-color:var(--register);
    font-variation-settings:"wght" 800;
  }
  .stage-rail input:focus-visible + label{outline:2px solid var(--correction);outline-offset:2px}

  .stage{
    position:relative;
    border-left:2px solid var(--line);
    padding-left:var(--space-s);margin-top:var(--space-m);
    transition:border-left-color .2s var(--bite);
  }
  /* a folded card is a click target in its own right: a stretched label
     covers it, and disappears once the stage is open so the copy stays
     selectable. Lives inside the fold guard below. */
  .stage-hit{display:none}
  .stage h3{font-size:var(--step-1);margin-top:0}
  .stage blockquote{font-size:var(--step-1);margin-block:var(--space-xs)}
  .stages:has(#st-1:checked) .stage-1,
  .stages:has(#st-2:checked) .stage-2,
  .stages:has(#st-3:checked) .stage-3,
  .stages:has(#st-4:checked) .stage-4{border-left-color:var(--register)}
  .stages:has(#st-1:checked) .stage-1 .eyebrow,
  .stages:has(#st-2:checked) .stage-2 .eyebrow,
  .stages:has(#st-3:checked) .stage-3 .eyebrow,
  .stages:has(#st-4:checked) .stage-4 .eyebrow{color:var(--register)}
  /* the fold. Guarded so a browser without :has() can never trap content. */
  @supports selector(.stages:has(input:checked)){
    .stage>*:not(.eyebrow):not(h3):not(.stage-hit){display:none}
    .stage h3{color:var(--muted);transition:color .2s var(--bite)}
    .stage-hit{display:block;position:absolute;inset:0;cursor:pointer}
    .stage:has(.stage-hit:hover) h3{color:var(--key)}
    .stages:has(#st-1:checked) .stage-1>*,
    .stages:has(#st-2:checked) .stage-2>*,
    .stages:has(#st-3:checked) .stage-3>*,
    .stages:has(#st-4:checked) .stage-4>*{display:block}
    .stages:has(#st-1:checked) .stage-1 h3,
    .stages:has(#st-2:checked) .stage-2 h3,
    .stages:has(#st-3:checked) .stage-3 h3,
    .stages:has(#st-4:checked) .stage-4 h3{color:var(--key)}
    .stages:has(#st-1:checked) .stage-1 .stage-hit,
    .stages:has(#st-2:checked) .stage-2 .stage-hit,
    .stages:has(#st-3:checked) .stage-3 .stage-hit,
    .stages:has(#st-4:checked) .stage-4 .stage-hit{display:none}
  }

  /* the reading list: the index grammar at reading size */
  .reading-list{border-top:2px solid var(--key);margin-top:var(--space-s)}
  .reading-list a{
    display:block;padding:var(--space-s) 0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
    transition:border-bottom-width var(--t-press) var(--bite),border-bottom-color var(--t-press) var(--bite);
  }
  .reading-list a strong{
    display:block;font-size:var(--step-1);font-weight:400;letter-spacing:-.01em;
    --ink:480;
    font-variation-settings:"opsz" 24,"wght" var(--ink);
    width:max-content;max-width:100%;
    transition:--ink .2s var(--bite),color .2s var(--bite);
  }
  .reading-list a span{display:block;color:var(--muted);font-size:var(--step--1);max-width:60ch;margin-top:var(--space-3xs)}
  .reading-list a:hover strong,.reading-list a:focus-visible strong,.reading-list a:active strong{color:var(--register);--ink:640}
  .reading-list a:active{border-bottom-width:3px;border-bottom-color:var(--correction);padding-bottom:calc(var(--space-s) - 2px)}

  /* --------------------------------------------------- contents, felt focus */
  .index{border-top:2px solid var(--key);margin-top:var(--space-2xl)}
  .index a{
    display:block;padding:var(--space-s) 0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
    transition:opacity .2s var(--bite),border-bottom-width var(--t-press) var(--bite),
               border-bottom-color var(--t-press) var(--bite);
  }
  /* width:max-content locks the box so a heavier weight cannot rewrap the line
     and shove the column. Verified by tests/motion-check.py. */
  .index a strong{
    display:block;font-size:var(--step-3);font-weight:400;letter-spacing:-.02em;
    --ink:480;
    font-variation-settings:"opsz" 30,"wght" var(--ink);
    width:max-content;max-width:100%;
    transition:--ink .2s var(--bite),color .2s var(--bite);
  }
  .index a span{display:block;color:var(--muted);font-size:var(--step--1);max-width:52ch;margin-top:var(--space-3xs)}
  .index a:hover strong,.index a:focus-visible strong,.index a:active strong{color:var(--register);--ink:640}
  .index a:active{border-bottom-width:3px;border-bottom-color:var(--correction);padding-bottom:calc(var(--space-s) - 2px)}

  /* the home contents previews each route in its own ink (night voices;
     the day edition swaps them back below) */
  .index a.ink-editorial{--register:#d49599}
  .index a.ink-ai{--register:#8cbd94}
  .index a.ink-campaigns{--register:#9db1e3}

  /* --------------------------------------------------- the landing contents */
  /* Home, third round (2026-07-10 visual): each route sits IN its register
     ink at rest under an oversized folio numeral, and carries a specimen
     strip of artefacts that already live on its dossier: pointers, not
     tellings. The go-mark is the diagrams' border-triangle reused, and it
     takes the pen's ink on approach. The imprint closes the page the way a
     copyright page closes front matter. */
  .aside-note{
    font-style:italic;color:var(--muted);
    border-left:2px solid var(--line);padding-left:var(--space-s);
  }
  .index-home a{
    display:grid;grid-template-columns:minmax(5rem,7.5rem) minmax(0,1.15fr) minmax(15rem,.85fr);
    column-gap:clamp(1.6rem,4vw,4rem);align-items:start;
    padding:var(--space-l) 0;
  }
  .index-home .spec-wrap{display:block;margin:0;max-width:none;font-size:var(--step-0)}
  .index-home .num{
    display:block;margin:0;max-width:none;
    font-family:var(--serif);font-variation-settings:"opsz" 30,"wght" 460;
    font-size:clamp(2.9rem,2.1rem + 3vw,4.4rem);line-height:.9;
    color:var(--register);font-variant-numeric:lining-nums;
  }
  .index-home .route-body{display:block;margin:0;max-width:none;font-size:var(--step-0);color:var(--key)}
  .index-home strong{font-size:clamp(2rem,1.4rem + 2.2vw,2.9rem);line-height:1.08;color:var(--register)}
  /* the go-mark rides the last word, so a wrapped title never strands it.
     The span must shed the index's generic span dress first. */
  .index-home .go-w{
    display:inline;white-space:nowrap;margin:0;max-width:none;
    font-size:inherit;color:inherit;
  }
  .index-home .go-w::after{
    content:"";display:inline-block;width:.95em;height:.56em;margin-left:.45rem;
    background:var(--register);
    clip-path:polygon(0 44%,64% 44%,64% 12%,100% 50%,64% 88%,64% 56%,0 56%);
    transition:background-color .14s var(--bite);
  }
  .index-home a:hover .go-w::after,.index-home a:focus-visible .go-w::after,
  .index-home a:active .go-w::after{background-color:var(--correction)}
  .index-home .desc{max-width:52ch}
  .index-home .spec-label{
    display:block;margin-top:.25rem;
    font-family:var(--sans);font-size:.66rem;font-weight:700;
    letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  }
  .index-home .specimen{
    display:flex;flex-wrap:wrap;gap:var(--space-2xs);
    margin-top:var(--space-2xs);max-width:none;
  }
  .index-home .specimen img{height:6.4rem;width:auto;border:1px solid var(--line)}
  .index-home .specimen img.wide{height:auto;width:100%;max-width:24rem}

  .imprint{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2xs) var(--space-l);
    margin-top:var(--space-l);border-top:1px solid var(--line);padding-top:var(--space-xs);
    font-family:var(--sans);font-size:var(--step--1);color:var(--muted);letter-spacing:.02em;
  }
  .sw{display:inline-block;width:.6em;height:.6em;background:var(--sw);margin:0 .4em 0 1.1em}
  .inks .sw:first-child{margin-left:0}
  /* the legend shows the inks actually on duty: night set by default,
     swapped to the paper set in the day-edition block below */
  .sw-claret{--sw:#d49599}
  .sw-forest{--sw:#8cbd94}
  .sw-federal{--sw:#9db1e3}
  .sw-correction{--sw:#e5837a}

  /* ---------------------------------------------------------------- colophon */
  /* Rebuilt around the email (garnish round, 2026-07-13): the address is
     the display element, a real mailto at display scale, and the name sits
     quiet in the meta row; two display elements would compete. The caption
     above the address was cut at his ask, same day: the address needs no
     caption. The one overprint moved with the scale — the address hangs so
     its cap height straddles the correction rule, multiply on paper, screen
     after dark. It crosses a RULE, never running text. The only motion is
     the ink saturating on approach, the same move the wordmark and the
     index make: the page opens and closes on the one gesture. */
  .colophon{margin-top:var(--space-3xl);padding-bottom:var(--space-2xl);isolation:isolate}
  .colophon .crossing{border-top:2px solid var(--correction)}
  .colophon .mail{
    display:block;width:max-content;max-width:100%;
    font-family:var(--serif);
    font-size:clamp(1.55rem,.4rem + 5.4vw,5.9rem);
    line-height:1.04;letter-spacing:-.025em;
    color:var(--register);
    --ink:340;
    font-variation-settings:"opsz" 30,"wght" var(--ink);
    margin-top:-.22em;
    padding-bottom:.06em;
    mix-blend-mode:screen;
    background:linear-gradient(currentColor,currentColor) no-repeat left bottom/0 .05em;
    transition:--ink .25s var(--bite),background-size .22s var(--bite),color var(--t-press) var(--bite);
  }
  .colophon .mail:hover,.colophon .mail:focus-visible{--ink:540;background-size:100% .05em}
  .colophon .mail:active{--ink:540;background-size:100% .12em;color:var(--correction)}
  .colophon .meta{
    display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-s);
    margin-top:var(--space-m);border-top:1px solid var(--line);padding-top:var(--space-xs);
    font-family:var(--sans);font-size:var(--step--1);
    color:var(--muted);letter-spacing:.03em;
  }
  /* the essay room keeps its narrower shell and a smaller crossing */
  .colophon-essay{margin-top:var(--space-2xl)}
  .colophon-essay .mail{font-size:clamp(1.35rem,.5rem + 3vw,3.2rem)}
}

/* The long-read layer for the three IPL essays. The essay bodies are
   verbatim artefacts; this layer only sets the room they are read in.
   The charts were rendered dark for Instagram, so they hang as framed
   plates rather than pretending to be page furniture. */
@layer essay{
  .article-shell{width:min(760px,calc(100% - 2rem));margin-inline:auto}
  .article-nav{
    padding:var(--space-m) 0;border-bottom:1px solid var(--line);
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    text-transform:uppercase;letter-spacing:.09em;
  }
  .article-header{padding:var(--space-2xl) 0 var(--space-l)}
  .article-header h1{
    font-size:var(--step-5);line-height:.94;letter-spacing:-.025em;
    margin:var(--space-2xs) 0 var(--space-m);
    font-variation-settings:var(--f-display);
  }
  .section-number{
    font-family:var(--sans);font-size:var(--step--1);font-weight:700;
    letter-spacing:.1em;text-transform:uppercase;color:var(--register);
    border-top:2px solid var(--correction);padding-top:var(--space-xs);
  }
  .provenance{
    font-family:var(--sans);font-size:var(--step--1);color:var(--muted);
    border-block:1px solid var(--line);padding:var(--space-s) 0;
  }
  .article-body{padding-bottom:var(--space-3xl)}
  .article-body>p{font-size:1.18rem;line-height:1.62;margin-bottom:var(--space-s)}
  .article-body h2{
    font-size:var(--step-2);line-height:1.08;margin:var(--space-xl) 0 var(--space-s);
    font-variation-settings:var(--f-mid);
  }
  .article-body hr{border:0;border-top:1px solid var(--line);margin:var(--space-l) 0}
  .article-body ul{font-size:.92rem;color:var(--muted);padding-left:1.2rem}
  .article-body li{margin-bottom:var(--space-2xs)}
  .article-chart{
    width:min(1060px,calc(100vw - 2rem));
    margin:var(--space-xl) 50%;transform:translateX(-50%);
  }
  .article-chart img{width:100%;border:1px solid var(--line)}
  /* the Iyer and KKR charts were drawn with cream labels for a dark ground
     (transparent PNGs). They hang as dark plates; the CSK SVGs are drawn
     for paper and sit on it directly. */
  .article-chart img[src$="_embed_dark.png"]{
    background:var(--plate-dark);border-color:var(--plate-dark);
    padding:clamp(.6rem,2vw,1.4rem);
  }
  .article-chart figcaption{
    font-family:var(--sans);font-size:var(--step--1);font-weight:600;
    color:var(--muted);margin-top:var(--space-2xs);line-height:1.45;
  }
  .carousel-pair{border-top:2px solid var(--correction);padding:var(--space-xl) 0 var(--space-2xl);margin-top:var(--space-2xl)}
  .carousel-pair h2{font-size:var(--step-2);font-variation-settings:var(--f-mid);margin:var(--space-2xs) 0 var(--space-xs)}
  .carousel-strip{
    display:flex;overflow-x:auto;gap:var(--space-s);
    scroll-snap-type:x mandatory;margin-top:var(--space-m);padding-bottom:var(--space-2xs);
  }
  .carousel-strip img{width:min(70vw,340px);scroll-snap-align:start;border:1px solid var(--line)}
  body>footer .article-shell{padding:var(--space-l) 0 var(--space-2xl)}
}

@media(max-width:900px){
  .case-layout{grid-template-columns:1fr}
  .glossed{display:block}
  .gloss{margin-top:var(--space-s)}
  .plate-stack{position:static}
  .plate-row,.plate-row.two{grid-template-columns:1fr}
  .plate-shelf{grid-template-columns:repeat(3,1fr)}
  .sheet-page{grid-template-columns:1fr}
  .sheet-page img{max-width:12rem}
}
@media(max-width:640px){
  .section-rule{flex-direction:column;align-items:flex-start;gap:.3rem}
  /* the dotted leader is a wide-page grammar; the rows stack instead */
  .spec>div{display:block}
  .spec dt::after{display:none}
  .spec dd{text-align:left;margin-top:.15rem;max-width:none}
  .shell{width:min(1180px,100% - 2.5rem)}
  .index a strong{width:auto}
  .plate-shelf{grid-template-columns:repeat(2,1fr)}
  .ticker{column-gap:var(--space-s)}
  /* the fork stacks: both lanes hang off one bracket, so they still read as
     concurrent under stage five, not as two more steps in the sequence */
  .run-split{grid-template-columns:1fr;gap:var(--space-s);position:relative;padding-left:1.15rem}
  .run-split::before{content:"";position:absolute;left:.3rem;top:0;bottom:0;border-left:2px solid var(--flow)}
  .run-split>div{position:relative}
  .run-split>div::before{content:"";position:absolute;left:-.85rem;top:1.05rem;width:.5rem;border-top:2px solid var(--flow)}
  .run-split>div::after{
    content:"";position:absolute;left:-.4rem;top:.87rem;
    border:.26rem solid transparent;border-right:0;border-left:.34rem solid var(--flow);
  }
  .run-fan{height:1.4rem;margin-top:0}
  .run-fan.out>i::before,.run-fan.out>i::after,.run-fan.in>i::before{display:none}
  .run-fan.out::after{left:.3rem;right:calc(50% - 1px);top:auto;bottom:0}
  .run-fan.out>i.mid::before{top:0;height:auto;bottom:0}
  .run-fan.in::after{left:.3rem;right:calc(50% - 1px);top:0}
  .run-fan.in>i.mid::before{top:0;bottom:.4rem;height:auto}
  /* the engine narrows: the bypass lane becomes a spine, its head set
     vertically the way a title runs down a book's spine; the trunk keeps
     the exact desktop geometry, only tighter */
  .index-home a{grid-template-columns:3rem minmax(0,1fr)}
  .index-home a{column-gap:var(--space-s)}
  .index-home .num{font-size:1.9rem;padding-top:.4rem}
  .index-home .spec-wrap{grid-column:2;margin-top:var(--space-s)}
  .index-home .spec-label{margin-top:0}
  .index-home .specimen img{height:4.4rem}
  .engine{grid-template-columns:2.6rem minmax(0,1fr) 1.5rem;column-gap:var(--space-xs)}
  /* the lane head runs down like a spine title; the bounded row makes it
     wrap to a second column rather than swallow the rule and its arrow */
  .engine .eng-lane{grid-template-rows:minmax(0,1fr) 2.2rem}
  .engine .eng-lane-head{border:0;padding:0;justify-self:center;writing-mode:vertical-rl;max-height:100%}
  .engine .eng-lane-head b{display:inline;margin:0}
  .engine .eng-lane-head span{display:none}
  .run-loop{display:none}
  .eng-gates>div{grid-template-columns:1fr;gap:.1rem}
  .eng-loop{margin-left:calc(-1*var(--space-xs))}
  .eng-node,.eng-band{padding-inline:var(--space-xs)}
  /* "communications" has fourteen letters; the display size must clear it
     on a narrow screen without breaking the word. */
  .route-hero h1{font-size:clamp(2.2rem,11vw,3.4rem)}
  .article-header h1{font-size:clamp(2.2rem,11vw,3.4rem)}
}

/* artefacts stay paper: every plate, specimen and chart keeps a lit sheet
   behind it. On the paper edition the backing is invisible (paper on
   paper); after dark it is the lamplight that keeps transparent PNGs
   (charts drawn in dark ink, the T1 mark) from sinking into the ground.
   The Iyer plates keep their own dark ink instead: cream labels. */
.plate img,.plate-open img,.specimen img,.sheet img,.sheet-strip img,
.carousel-strip img,.article-chart img{background:var(--paper)}
.article-chart img[src$="_embed_dark.png"]{background:var(--plate-dark)}

@media screen and (prefers-color-scheme:light){
  /* the day edition swaps the working inks back to the paper set */
  .sw-claret{--sw:#461e1f}
  .sw-forest{--sw:#214421}
  .sw-federal{--sw:#3d5588}
  .sw-correction{--sw:#b62a2f}
  .index a.ink-editorial{--register:#461e1f}
  .index a.ink-ai{--register:#214421}
  .index a.ink-campaigns{--register:#3d5588}
  /* screen only lightens, so on paper the crossing flips back to
     multiply: the same overprint, positive */
  .colophon .mail{mix-blend-mode:multiply}
}

@media(prefers-reduced-motion:reduce){
  /* Every state still changes. It just arrives instantly. */
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
  details[open] summary .marker{transform:none}
  .sheet-strip{scroll-snap-type:none}
}

@media(forced-colors:active){
  .plate-open{border:1px solid}
}

@layer print{
  @media print{
    @page{margin:2cm}
    /* whatever the screen scheme, the printed sheet is the paper edition:
       pin the paper palette before anything resolves a token */
    :root{
      --ground:#fffdf9;--key:#181814;--muted:#5d574e;
      --correction:#b62a2f;--register:#3d5588;
      --veil:#181814;--veil-text:#fffdf9;
    }
    body.reg-editorial{--register:#461e1f}
    body.reg-ai{--register:#214421}
    body.reg-campaigns{--register:#3d5588}
    html,body{background:#fff;color:#000;font-size:10.5pt}
    .skip-link,.index,.stage-rail,.ticker,.plate-cue{display:none}
    /* the landing's index is the page itself: print it as contents lines.
       The specimen column is screen furniture, so its track goes with it. */
    .index-home{display:block;border-top:2px solid #000}
    .index-home a{grid-template-columns:5.5rem minmax(0,1fr)}
    /* the ink legend is meaningless without its swatches on paper */
    .index-home .spec-wrap,.index-home .go-w::after,.imprint .inks{display:none}
    .index-home .num,.index-home strong{color:#000}
    .index-home strong{font-size:1.6rem}
    /* the colophon prints whole: page 2 becomes the imprint page, not a strand */
    .colophon{break-inside:avoid}
    /* every stage prints unfolded, whatever the rail left on screen */
    .stage{border-left:2px solid #000}
    .stage>*{display:block!important}
    .stage h3{color:#000!important}
    .colophon .mail{margin-top:0;mix-blend-mode:normal;font-size:2.1rem;color:#000;background:none}
    /* the status square is a background, which print drops by default */
    .status::before{print-color-adjust:exact;-webkit-print-color-adjust:exact}
    /* A closed <details> hides its content with content-visibility:hidden on
       ::details-content. This is the fix, and it is the reason the printed
       dossier is complete: everything reaches the page a recruiter prints. */
    details{border:0}
    details>*{display:block!important}
    details::details-content{
      block-size:auto!important;overflow:visible!important;
      content-visibility:visible!important;
    }
    summary .marker{display:none}
    .reveal{display:block}
    .sheet{display:none!important}
    .plate-open{border:1px solid #000;padding:0}
    /* the dark chart plates must keep their ground on paper, or their
       cream labels print invisible. */
    .article-chart img[src$="_embed_dark.png"]{
      background:#181814!important;
      print-color-adjust:exact;-webkit-print-color-adjust:exact;
    }
    .case-section,table,.stage,.book-run>li{break-inside:avoid}
    /* the KTS wall outgrew one page: an unsatisfiable avoid pushes the whole
       section past a near-blank sheet, so it may break; figures stay whole */
    #kts{break-inside:auto}
    figure:not(.engine){break-inside:avoid}
    /* the diagram may break between trunk rows, never inside a node or fan;
       tighter connectors so the whole pipeline sits on one sheet */
    .eng-node,.eng-chit,.eng-band,.eng-fan,.eng-workers,.eng-lane-head{break-inside:avoid}
    .eng-flow{height:1.3rem}
    .eng-fan{height:2.2rem}
    .eng-fan.out::after{top:.8rem}
    .eng-fan.in::after{top:calc(100% - .8rem)}
    .eng-fan.out>i::before{top:.8rem}
    .eng-fan.in>i::before{height:calc(100% - .8rem)}
    .engine{--flow:#000}
    .engine b{color:#000}
    .eng-stamp,.eng-post{border-color:#000}
    /* the correction loops keep the pen's ink: the one colour that still
       means something on paper */
    .book-run{--flow:#000}
    .book-run>li>b::before{color:#000}
    .run-fan,.run-split>div{break-inside:avoid}
    h2,h3{break-after:avoid}
    a{background:none}
    a[href^="http"]::after{content:" (" attr(href) ")";font-size:.85em;color:#444;word-break:break-all}
  }
}