/* ==========================================================================
   SITE SHELL, STANDALONE
   The header, nav and footer, lifted out of field.css with no reset and no
   element selectors. Pages that carry their own document CSS (the research
   article, the demo walkthrough) load this instead of the whole system file:
   field.css opens with *{margin:0;padding:0}, which loads after those pages
   own layout rules and silently undoes them -- it is what un-centred the
   article reading column.
   ========================================================================== */
:root{
  /* ---- ground: day (cool paper — V6 ground system, 2026-08-13) ---- */
  --day-0:#F6F7F9;      /* page */
  --day-1:#FBFCFE;      /* raised */
  --day-2:#ECEEF1;      /* recess */
  --day-ink:#191817;
  --day-mute:#65635F;
  /* Raised 2026-08-16 to satisfy the constitution FLOOR rule: a tier landing
     below ~4.2:1 on its actual ground steps up. --day-faint measured 3.21:1
     on the page and 3.35:1 on a raised plate; --night-faint 3.69:1 on base.
     These are the mark tier, but the system uses them on text, so they have
     to clear 4.5:1. Kept on the same hue, stepped in luminance only. */
  --day-faint:#73716D;
  --day-line:rgba(25,24,23,.11);
  --day-line-2:rgba(25,24,23,.06);

  /* ---- ground: night (cool, deeper — V6 ground system) ---- */
  --night-0:#08090B;
  --night-1:#0D0F12;
  --night-2:#13151A;
  --night-ink:#F2F1ED;
  --night-mute:#9A9892;
  --night-faint:#807E79;
  --night-line:rgba(255,255,255,.12);
  --night-line-2:rgba(255,255,255,.06);

  /* ---- brand: two-tier clay (see header) ---- */
  --clay-brand:#9C4A33;         /* wordmark light-context clay (--bk-vec) */
  --clay-brand-dark:#C68070;    /* wordmark dark-context clay (--bk-vec-dark) */
  --clay-display:#B84932;       /* display cut: oklch(55% .148 33.5), rgb(184,73,50) */
  --clay-display-hover:#C85136; /* display hover lift (replaces #AB5238) */
  --clay:var(--clay-brand);     /* brand tier, light contexts */
  --clay-lit:var(--clay-brand-dark); /* brand tier, night text/stroke */
  --clay-soft:rgba(156,74,51,.07);
  --clay-line:rgba(156,74,51,.34);
  --warn:#A87A2E;
  --good:#4E8F6B;

  /* ---- semantic (defaults = day; .night overrides) ---- */
  --bg:var(--day-0);
  --bg-1:var(--day-1);
  --bg-2:var(--day-2);
  --ink:var(--day-ink);
  --mute:var(--day-mute);
  --faint:var(--day-faint);
  --line:var(--day-line);
  --line-2:var(--day-line-2);
  --accent:var(--clay);
  --grid:rgba(28,28,30,.05);
  --grid-2:rgba(28,28,30,.082);
  --lift:0 1px 0 rgba(255,255,255,.95) inset,0 1px 2px rgba(25,24,23,.06),0 8px 14px -12px rgba(25,24,23,.30);
  --plate-face:linear-gradient(180deg,#FFFFFF,var(--bg-1));
  --lift-sm:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(25,24,23,.05),0 5px 10px -9px rgba(25,24,23,.26);
  --inner:inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- type ---- */
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Sans','Inter',system-ui,sans-serif; /* the label ROLE; Plex per the product's D-11 lock -- JetBrains Mono retired 2026-08-21 */

  --t-hero:clamp(46px,6.4vw,90px);
  --t-stage:clamp(33px,4.1vw,56px);
  --t-sub:clamp(24px,2.5vw,34px);
  --t-lead:clamp(18.5px,1.45vw,23px);
  --t-body:16px;
  --t-ui:14px;
  --t-cap:13px;
  --t-mono:11px;
  --t-micro:12px;

  /* ---- MONO CONSTITUTION (2026-08-13 lock) ----------------------------------
     Every JetBrains Mono use in page chrome resolves to exactly ONE of three
     tiers. No fourth mono size, weight or tracking may be introduced.

     M1 LABEL  — 11px / .15em / 700 / uppercase.
       Section kickers + index lines ("01 · SCHEDULE ·"), panel kickers
       (SOURCE SYSTEMS / VECREAL / PROJECT MANAGER), ledger + figure header
       titles (THE FIRM LEDGER), trust card headers, stack row keys,
       stat/astat chips (LIVE / EMERGENT DIRECTION), hero bucket headers
       (EMAIL / SCHEDULE / …), composed-stack slabels, the FI register line
       (PATTERNS · EXPOSURE · LESSONS · POLICY), the hero spine label.

     M2 MICRO  — 9.5px / .12em / 600 / uppercase.
       Provenance stamps ("EASTGATE · 03-22" src lines), small chips + tags
       (ledger row tags, TRACED BELOW), the products wire label, footer
       title-block keys, the nav sheet stamp, band/beat micro-labels.

     M3 DATA   — 12px / .01em / weight per context (400–700) / NO uppercase /
       tabular-nums (inherited from body).
       Record ids, dates and amounts in exhibits (RFI 154, CO-014, $84,300,
       2026-06-12), meta value rows (chain panel .cm lines, radial .m lines,
       ledger row values, footer title-block values, axis + week figures).

     CLAUSE RULE — uppercase mono may not exceed 4 words. Middot-separated
       lists may stay uppercase at ≤4 words per segment. Anything longer is
       demoted: sentence-case mono at M2 size for meta/spec, Inter for prose.

     FLOOR — no mono below 9.5px in page chrome; where a tier lands on a
       faint color below ~4.2:1 on its actual ground, the color steps up one
       (faint→mute on day; rgba .4→.55 on night). Rendered scene assets
       (assets/scenes|loops|walkthrough) and depicted-record internals keep
       their own data styling. ------------------------------------------------ */
  --mono-m1-size:11px;  --mono-m1-track:.15em; --mono-m1-weight:700;
  --mono-m2-size:9.5px; --mono-m2-track:.12em; --mono-m2-weight:600;
  --mono-m3-size:12px;  --mono-m3-track:.01em;

  --w-display:480;
  --w-mid:520;
  --w-strong:600;

  --ls-hero:-.034em;
  --ls-stage:-.028em;
  --ls-sub:-.022em;
  --ls-lead:-.014em;
  --ls-body:-.009em;
  --ls-label:var(--mono-m1-track);

  --lh-hero:1.0;
  --lh-stage:1.055;
  --lh-lead:1.36;
  --lh-body:1.6;

  /* ---- space ---- */
  --u:4px;
  --gut:clamp(20px,4vw,40px);
  --frame:1240px;
  --frame-tight:1080px;
  --stage-y:clamp(88px,10.5vw,168px);
  --stage-y-sm:clamp(64px,7vw,104px);

  /* ---- radius / line ---- */
  --r-1:4px; --r-2:8px; --r-3:14px; --r-4:20px;
  --hair:.8px;

  /* ---- motion ---- */
  --e-out:cubic-bezier(.16,1,.3,1);
  --e-io:cubic-bezier(.45,.05,.55,.95);
  --e-fast:cubic-bezier(.25,.46,.45,.94);
  --m-1:120ms;
  --m-2:200ms;
  --m-3:340ms;
  --m-4:620ms;
  --m-5:900ms;
}

.top{border-bottom:var(--hair) solid transparent}
.top.stuck{background:rgba(8,9,11,.72);backdrop-filter:blur(18px) saturate(1.3);border-bottom-color:rgba(255,255,255,.1)}
.top.on-day.stuck{background:rgba(246,247,249,.82);border-bottom-color:rgba(25,24,23,.1)}
.top.hidden{transform:translateY(-102%)}
.frame{width:100%;max-width:var(--frame);margin:0 auto;padding:0 var(--gut)}
.top .frame{height:70px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.top .mark{display:flex;align-items:center;gap:13px;color:var(--night-ink);transition:color var(--m-3) var(--e-fast)}
.top.on-day .mark{color:var(--day-ink)}
.nav{display:flex;align-items:center;gap:28px;font-size:13.5px;color:var(--night-mute);letter-spacing:normal;
  transition:color var(--m-3) var(--e-fast)}
.top.on-day .nav{color:var(--day-mute)}
.nav>a,.nav .pdrop>a{position:relative;transition:color var(--m-1) var(--e-fast);white-space:nowrap}
.nav>a:not(.cta):not(.mobile-only)>.t{grid-area:1/1;position:relative}
.nav>a:not(.cta):not(.mobile-only)::before{content:attr(data-t);grid-area:1/1;font-weight:600;
  visibility:hidden;pointer-events:none}
.nav>a:not(.cta):not(.mobile-only)>.t::after,.nav .pdrop>a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:1.5px;background:var(--clay-lit);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--m-1) var(--e-fast)}
.top.on-day .nav>a:not(.cta):not(.mobile-only)>.t::after,.top.on-day .nav .pdrop>a::after{background:var(--clay)}
.nav>a:hover,.nav .pdrop>a:hover{color:var(--night-ink)}
.top.on-day .nav>a:hover,.top.on-day .nav .pdrop>a:hover{color:var(--day-ink)}
.nav a.here{color:var(--clay-lit);font-weight:600}
.top.on-day .nav a.here{color:var(--clay)}
.nav .cta{padding:8px 16px;border-radius:var(--r-2);border:var(--hair) solid var(--night-line);
  color:var(--night-ink);font-weight:560;font-size:13px}
.nav .cta::after{display:none}
.nav .cta:hover{border-color:var(--clay-lit);color:var(--clay-lit)}
.top.on-day .nav .cta{border-color:var(--day-line);color:var(--day-ink)}
.top.on-day .nav .cta:hover{border-color:var(--clay);color:var(--clay)}
.pdrop{position:relative}
.pdrop>a .tg{position:relative;display:inline-flex;align-items:center;gap:6px}
.nav .pdrop>a::after{content:none}
.nav .pdrop>a .tg::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;
  background:var(--clay-lit);transform:scaleX(0);transform-origin:right center;
  transition:transform var(--m-1) var(--e-fast)}
.top.on-day .nav .pdrop>a .tg::after{background:var(--clay)}
.nav .pdrop>a:hover .tg::after,.nav .pdrop>a.here .tg::after{transform:scaleX(1);
  transform-origin:left center;transition-duration:var(--m-2)}
.pdrop>a .cv{width:9px;height:9px;transition:transform var(--m-1) var(--e-out)}
.pdrop:hover>a .cv,.pdrop.open>a .cv{transform:rotate(180deg)}
.ppanel{position:absolute;top:calc(100% + 16px);left:50%;transform:translate(-50%,6px);width:352px;
  background:var(--day-1);border:var(--hair) solid var(--day-line);border-radius:var(--r-3);padding:7px;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 26px 60px -22px rgba(20,22,28,.45);
  opacity:0;visibility:hidden;z-index:70;
  transition:opacity var(--m-2) var(--e-out),transform var(--m-2) var(--e-out),visibility 0s linear var(--m-2)}
.ppanel::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.pdrop:hover .ppanel,.pdrop.open .ppanel,.pdrop:focus-within .ppanel{opacity:1;visibility:visible;
  transform:translate(-50%,0);transition-delay:0s}
.pcard{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-2);
  transition:background var(--m-1) var(--e-fast)}
.pcard:hover{background:var(--day-2)}
.pcard+.pcard{border-top:var(--hair) solid var(--day-line-2)}
.pcard .pmk{width:30px;height:30px;border-radius:7px;background:var(--clay);color:#fff;display:flex;
  align-items:center;justify-content:center;flex:none}
.pcard .pmk svg{width:62%;height:62%}
.pcard[data-fi] .pmk{background:var(--day-ink)}
.pcard .pn{display:block;font-size:13.5px;font-weight:600;color:var(--day-ink);letter-spacing:-.012em}
.pcard:hover .pn{color:var(--clay)}
.pcard .pd{display:block;font-size:11.5px;line-height:1.45;color:var(--day-mute);margin-top:3px}
.pcard .go{flex:none;color:var(--day-faint);
  transition:color var(--m-1) var(--e-fast),transform var(--m-1) var(--e-out)}
.pcard:hover .go{color:var(--clay);transform:translateX(2px)}
.pcard .go svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.8}
.navtoggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;
  color:var(--night-ink);-webkit-tap-highlight-color:transparent}
.top.on-day .navtoggle{color:var(--day-ink)}
.navtoggle svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round}
.navtoggle .ic-x{display:none}
body.nav-open .navtoggle .ic-m{display:none}
body.nav-open .navtoggle .ic-x{display:block}
.navscrim{display:none}
.foot .frame{padding-top:56px;padding-bottom:26px}
.foot .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:32px}
.foot .brand{max-width:34ch}
.foot .brand p{font-size:var(--t-cap);line-height:1.6;color:var(--night-mute);margin-top:16px}
.foot .cols a{display:block;font-size:var(--t-cap);color:var(--night-mute);margin-bottom:10px;
  transition:color var(--m-1) var(--e-fast)}
.foot .cols a:last-child{margin-bottom:0}
.foot .cols a:hover{color:var(--clay-lit)}
.foot .block>div{padding:10px 14px 11px;border-left:var(--hair) solid var(--night-line-2)}
.foot .block>div:first-child{border-left:0}
.foot .block .k{font-family:var(--mono);font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight); /* M2 */
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--night-mute);line-height:1.35}
.foot .block .v{font-family:var(--mono);font-size:var(--mono-m3-size);letter-spacing:var(--mono-m3-track); /* M3 */
  font-weight:600;color:var(--night-ink);margin-top:4px;line-height:1.35;white-space:nowrap}
.foot .block .v.clay{color:var(--clay-lit)}
.foot .block a:hover{color:var(--clay-lit)}
@media(max-width:900px){
  .top .sheet{display:none}
  .nav{gap:18px}
  .foot .cols{grid-template-columns:1fr 1fr}
  .foot .block{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){
  .navtoggle{display:inline-flex;position:relative;z-index:215}
  /* The drawer carries no surface of its own across the top 70px. The header
     bar is fixed, spans the full width and paints above the drawer, so leaving
     that strip empty lets the real bar run straight across: same ground, same
     translucency, same hairline, no seam and nothing to keep in sync. The panel
     surface starts where the bar ends. */
  .nav{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,340px);flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:0;padding:84px 24px 32px;background:transparent;border-left:0;
    transform:translateX(100%);visibility:hidden;z-index:210;overflow-y:auto;font-size:16px;color:var(--day-mute);
    transition:transform var(--m-3) cubic-bezier(.4,0,.1,1),visibility 0s linear var(--m-3)}
  body.nav-open .nav{transform:none;visibility:visible;transition-delay:0s}
  body.nav-open{overflow:hidden}
  /* the panel surface, below the bar: fixed so the scroll container cannot
     clip it, and it carries the left edge and the lift the drawer used to */
  .nav::before{content:"";position:fixed;top:70px;right:0;bottom:0;
    width:min(84vw,340px);background:var(--day-1);
    border-left:var(--hair) solid var(--day-line);
    box-shadow:-28px 0 64px -32px rgba(20,22,28,.5);z-index:-1;pointer-events:none}
  .nav>a,.nav .pdrop>a{padding:15px 2px;color:var(--day-mute);border-bottom:var(--hair) solid var(--day-line-2);
    font-size:16px;display:flex;align-items:center;width:100%}
  .nav>a::after,.nav .pdrop>a::after,.nav .pdrop>a .tg::after{display:none}
  .nav a.here{color:var(--clay);font-weight:600}
  .pdrop{display:block;position:static}
  .nav .pdrop>a{min-width:0;justify-content:flex-start}
  .nav .pdrop>a .tg{display:flex;align-items:center;width:100%}
  .pdrop>a .cv{margin-left:auto;width:12px;height:12px}
  .pdrop.open .ppanel{max-height:220px}
  .ppanel .pcard{padding:12px 2px;border-radius:0;border-bottom:var(--hair) solid var(--day-line-2);align-items:center}
  .ppanel .pcard+.pcard{border-top:0}
  .ppanel .pcard .pd,.ppanel .pcard .go{display:none}
  .ppanel .pcard .pmk{width:24px;height:24px;border-radius:6px}
  .nav .cta{margin-top:18px;padding:15px;text-align:center;justify-content:center;border-radius:var(--r-2);
    font-size:15px;background:var(--clay);color:#fff;border-color:var(--clay)}
  /* the CTA sat heavier than the links it closes; a step down settles it */
  .nav .cta{margin-top:22px;padding:12px 15px;font-size:14px}

  /* ── The drawer as a page ─────────────────────────────────────────────
     The site is night bands over day bands; the drawer was day only, which
     made it read as a browser affordance rather than part of the system. It
     now opens on a night plate carrying the mark, with the list on day ground
     under it: the same rhythm as every page, at the scale of a menu. */

  /* ── Drawer corrections ───────────────────────────────────────────────
     1. The desktop bold-on-hover trick reserves width with a ::before carrying
        data-t in the same grid cell. In the drawer that pseudo becomes a flex
        sibling and pushes the label to the middle, which is why Home and About
        read centred while Research and the product link read left.
     2. The drawer has no horizontal constraint, so the product dropdown is
        pointless here: show both products as their own lines.
     3. The clay CTA needs white text; the drawer's inherited link colour was
        winning over the button. */
  .nav>a:not(.cta):not(.mobile-only)::before{display:none}
  .nav>a:not(.cta):not(.mobile-only)>.t{grid-area:auto}
  .nav>a,.nav .pdrop>a,.nav .ppanel .pcard{justify-content:flex-start;text-align:left}

  .nav .pdrop>a{display:none}
  /* the accordion is gone in the drawer, so the panel is always open. Stated
     on .nav .ppanel so a later collapsed-state rule cannot re-clamp it. */
  .nav .ppanel,.nav .pdrop .ppanel{max-height:none;padding:0;overflow:visible}
  /* the product mark indents these past every other line; drop it so all
     labels share one left edge */
  .ppanel .pcard .pmk{display:none}
  .ppanel .pcard{padding:15px 2px;gap:0}
  .ppanel .pcard .pn{font-size:16px;font-weight:400;color:var(--day-mute)}
  .nav .pdrop .pcard[aria-current="page"] .pn{color:var(--clay);font-weight:600}

  .nav .cta,.nav .cta:hover{color:#FFFFFF}
  .navscrim{display:block;position:fixed;inset:0;background:rgba(8,9,11,.5);opacity:0;pointer-events:none;
    z-index:200;transition:opacity var(--m-3) var(--e-fast)}
  body.nav-open .navscrim{opacity:1;pointer-events:auto}
  body.nav-open .top{transform:none!important;backdrop-filter:none!important;z-index:220}
  .foot .cols{grid-template-columns:1fr;gap:26px}
  .foot .brand{grid-column:1/-1}
  /* three items left, so one row of three rather than two rows of two */
  .foot .block{grid-template-columns:repeat(3,minmax(0,1fr))}
  /* three narrow columns: the copyright string is longer than its track,
     so let the value wrap instead of clipping at the plate edge */
  .foot .block .v{white-space:normal;overflow-wrap:anywhere;line-height:1.45}
  .foot .block>div{padding:9px 11px 10px}
  .foot .block>div{border-top:0;border-left:var(--hair) solid var(--night-line-2)}
  .foot .block>div:first-child{border-left:0}
  .foot .block>div:nth-child(even){border-left:var(--hair) solid var(--night-line-2)}}

/* the extractor took only .top/.nav rules, so the visibility switches the nav
   markup depends on came across missing and the mobile-only link showed */
.mobile-only{display:none}
@media(max-width:640px){.mobile-only{display:block}.desktop-only{display:none!important}}

.foot h3{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;
  color:rgba(242,241,237,.88);margin-bottom:14px}
/* the base rule for the title block: the first extract captured only the
   media-query variant of this selector, so the grid never applied */
.foot .block{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px;
  border:var(--hair) solid var(--night-line);border-radius:var(--r-2);overflow:hidden}

/* responsive shell rules: the first pass used a regex that could not walk
   nested media blocks, so the mobile drawer and footer stacking never came over */
@media(max-width:640px){
  .mobile-only{display:block}
  .desktop-only{display:none!important}
}

/* the footer title block stacks with the viewport; these two lived inside
   media blocks the extract could not reach */
@media(max-width:900px){.foot .block{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.foot .block{grid-template-columns:1fr 1fr}}

/* ── THE OPENING BAND ───────────────────────────────────────────────────────
   Every page on the site opens on night. These two carried their own document
   CSS and opened white, which broke the rhythm on arrival. The band is short:
   it carries the kicker, the title and the meta, then hands to the day ground
   the document already owns. It also gives the fixed header a night surface to
   start on, so the day/night probe resolves the way it does everywhere else. */
.v2-open{position:relative;background:var(--night-0);color:var(--night-ink);isolation:isolate}
.v2-open::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 62% 74% at 50% 34%,rgba(255,255,255,.045),
    rgba(255,255,255,.016) 52%,transparent 78%)}
.v2-open-in{position:relative;z-index:1;width:100%;max-width:var(--frame);margin:0 auto;
  padding:clamp(112px,13vh,150px) var(--gut) clamp(52px,7vh,84px)}
.v2-open-k{display:block;margin-bottom:clamp(16px,2vw,22px);font-family:var(--mono);
  font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight);
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;color:var(--clay-lit)}
.v2-open-t{margin:0;max-width:22ch;font-size:clamp(34px,4.4vw,62px);font-weight:var(--w-display);
  line-height:1.02;letter-spacing:-.038em;color:var(--night-ink)}
.v2-open-t .c{color:var(--clay-display)}
.v2-open-m{display:block;margin-top:clamp(18px,2.2vw,26px);font-family:var(--mono);
  font-size:var(--mono-m2-size);font-weight:var(--mono-m2-weight);
  letter-spacing:var(--mono-m2-track);text-transform:uppercase;color:var(--night-mute)}
@media(max-width:640px){
  .v2-open-in{padding-top:96px}
  .v2-open-t{max-width:none}
}

.v2-open-l{margin:clamp(20px,2.4vw,28px) 0 0;max-width:46ch;
  font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--night-mute)}
.v2-open-l+.v2-open-m{margin-top:clamp(20px,2.4vw,28px)}
/* the bar starts transparent over the opening band, as it does site-wide */
.top{background:transparent}

/* the banner keeps its drafted margins and its clay ground, and now sits inside
   the night opening rather than under it: the page still opens black, and the
   cover that catches the eye on the index is the first thing on the article */
.v2-banner{position:relative;margin:clamp(22px,2.6vw,32px) 0 0;border-radius:var(--r-3);
  overflow:hidden;min-height:clamp(200px,23vw,280px);display:flex;flex-direction:column;
  justify-content:center;padding:clamp(28px,3.4vw,48px);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 26px 60px -30px rgba(0,0,0,.85)}
.v2-open .v2-open-m{margin-top:clamp(18px,2vw,24px)}

/* the early-build note: a plate, a clay kicker, one sentence. It qualifies the
   film without arguing with it. */
.wt-early{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(14px,2vw,26px);
  align-items:baseline;margin:clamp(20px,2.4vw,30px) 0 0;padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,24px);
  border:1px solid var(--border);border-radius:8px;background:var(--panel);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 1px 2px rgba(25,24,23,.05)}
.wt-early .k{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight);letter-spacing:var(--mono-m1-track);
  text-transform:uppercase;color:var(--clay);white-space:nowrap}
.wt-early p{margin:0;max-width:62ch;font-size:14px;line-height:1.55;color:var(--ink2)}
@media(max-width:640px){.wt-early{grid-template-columns:1fr;gap:8px}}

/* the opening band runs to the top edge: the bar is fixed and transparent over
   it, so any page spacing above the band shows as a white strip behind the nav */
.v2-open{margin-top:0}
main#main{padding-top:0!important;margin-top:0!important}
body>main>.v2-open:first-child{margin-top:0}

/* the side rail is fixed; without its rules it sat in normal flow and pushed
   the opening band 71px below the top edge, leaving a white strip behind the bar */
.rail{position:fixed;left:22px;top:50%;transform:translateY(-50%);z-index:40;display:flex;flex-direction:column;
  gap:1px;transition:opacity var(--m-3) var(--e-fast)}
.rail a{display:flex;align-items:center;gap:12px;padding:10px 0;color:var(--night-faint)}
.rail.on-day a{color:var(--day-faint)}
.rail .tk{width:9px;height:var(--hair);background:currentColor;flex:none;
  transition:width var(--m-2) var(--e-out),background var(--m-2) var(--e-fast)}
.rail .lb{font-family:var(--mono);font-size:var(--mono-m1-size);font-weight:var(--mono-m1-weight); /* M1 */
  letter-spacing:var(--mono-m1-track);text-transform:uppercase;white-space:nowrap;color:var(--night-mute);
  opacity:0;transform:translateX(-4px);transition:opacity var(--m-2) var(--e-fast),transform var(--m-2) var(--e-out)}
.rail.on-day .lb{color:var(--day-mute)}
.rail a:hover .lb{opacity:1;transform:none}
.rail a.on{color:var(--clay-lit)}
.rail.on-day a.on{color:var(--clay)}
.rail a.on .lb{color:inherit}
.rail a.on .tk{width:20px}
.rail a.on .lb{opacity:1;transform:none}
/* The rail shows on wide viewports, matching field.css. An unconditional
   display:none used to sit here, which hid the article's section rail entirely
   even though its markup and anchors were intact. */
@media(max-width:1500px){.rail{display:none}}

/* ── Footer, phone: the three link columns read across, not down. Stacked,
      they pushed the title block most of a screen below the last content. ── */
@media(max-width:640px){
  .foot .cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 14px}
  .foot .brand{grid-column:1/-1}
  .foot .cols h3{margin-bottom:9px}
  .foot .cols a{font-size:12.5px;margin-bottom:7px}
  .foot .block{margin-top:26px}
}

/* ── Phone hit areas. Footer links measured 107x20; WCAG 2.5.8 wants 24px and
      a thumb wants more. Padding grows the target without moving the text. ── */
@media(max-width:640px){
  .foot .cols a{padding-block:6px;margin-bottom:1px}
  .foot .cols h3{margin-bottom:4px}
}

/* ── The article's reading-progress strip follows the bar ─────────────────
   mobile-treatment.css parks it at top:60px and lifts it to 0 with
   `header.top.nav-up + .mobile-chapter-progress`. The V2 shell marks that same
   state with .hidden, not .nav-up -- .nav-up went out with the legacy header
   script -- so the strip stopped moving and sat floating in the gap where the
   bar used to be. Same rule, this shell's class name. */
@media(max-width:640px){
  .top.hidden + .mobile-chapter-progress{top:0}
}