/* ============================================================================
   THE A ROLL - series format stylesheet
   The Next Hotspot / Entelligencia. Loaded AFTER assets/system.css.

   Concept. "A roll" is the primary footage: the interview itself. Everything
   else in the report is B roll, the cutaways that surround it. The series
   therefore borrows the vernacular of the edit suite - the slate, the take,
   the frame counter, the transcript - and uses it as structure rather than
   decoration. Every edition runs the same five movements:

     THE SLATE       the masthead, carrying the production record
     THE ARC         a scrollytelling career reel, sticky stage + steps
     THE INSTRUMENTS the answers that resolve into data, on the dashboard
     THE VERBATIM    the answers that do not, left as Q&A, unedited
     THE RECORD      attribution, approval status, cross-references

   House rules carried through: British English, no em dashes, no italics,
   forest / gold / cream, Playfair Display + Inter + JetBrains Mono, and the
   four-tier claim taxonomy (Verified / Announced / Contested / Estimated).
   ============================================================================ */

/* ---------- local tokens ---------- */
:root{
  --ar-strip:rgba(244,239,230,0.055);   /* perforation rail */
  --ar-panel:#0B211A;
  --ar-wrap:1160px;
  --ar-gut:44px;
}

*{box-sizing:border-box;margin:0;padding:0}
em,i{font-style:normal}
html{scroll-behavior:smooth}
html,body{background:var(--forest-deep);color:var(--on-forest-body);
  font-family:var(--sans);font-size:16px;line-height:1.58;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  /* overflow-x MUST be clip, never hidden. hidden makes body a scroll
     container, which silently disables position:sticky for every descendant
     and stops The Arc dead after its first frame. clip does the same guarding
     job without creating a scroll container. */
  overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============================ NAV ============================ */
.nav{background:var(--forest);padding:14px var(--ar-gut);display:flex;justify-content:space-between;
  align-items:center;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--on-forest-rule);gap:24px}
.nav__left{display:flex;align-items:center;gap:22px}
.nav__brand{display:flex;align-items:center;padding-right:22px;border-right:1px solid var(--on-forest-rule)}
.nav__brand img{height:21px;width:auto;opacity:.94}
.nav__chapter{display:flex;align-items:center;gap:14px}
.nav__chapter-btn{display:flex;align-items:center;gap:6px;color:var(--on-forest-muted);font-size:12px;
  padding:5px 9px;border-radius:3px;border:1px solid var(--on-forest-rule);transition:all .2s ease}
.nav__chapter-btn:hover{color:var(--cream);border-color:var(--on-forest-rule-2)}
.nav__chapter-btn svg{width:11px;height:11px}
.nav__chapter-indicator{font-family:var(--mono);font-size:12px;color:var(--on-forest-muted);letter-spacing:.08em}
.nav__chapter-indicator .num{color:var(--gold)}
.nav__right{display:flex;align-items:center;gap:22px}
.nav__link{color:var(--on-forest-body);font-size:13px;transition:color .2s}
.nav__link:hover{color:var(--cream)}
.nav__link.is-key{color:var(--forest-deep);background:var(--gold);padding:7px 15px;border-radius:20px;font-size:12px}
.nav__link.is-key:hover{background:var(--gold-bright);color:var(--forest-deep)}
@media(max-width:1080px){.nav__right .nav__link:not(.is-key){display:none}}
@media(max-width:620px){.nav{padding:12px 20px}.nav__chapter{display:none}}

/* ====================== THE SLATE (hero) ====================== */
/* The clapper board, read as a masthead. Production metadata sits in the
   frame because in this series the production record is the credibility. */
.slate{position:relative;min-height:var(--hero-min);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--forest-deep);border-bottom:1px solid var(--on-forest-rule-2)}
.slate__bg{position:absolute;inset:0;background-size:cover;background-position:50% 26%;filter:saturate(.88)}
.slate__scrim{position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(8,28,22,.95) 0%,rgba(8,28,22,.66) 44%,rgba(8,28,22,.22) 100%),
  linear-gradient(0deg,rgba(8,28,22,.96) 0%,rgba(8,28,22,.30) 52%,rgba(8,28,22,.42) 100%)}
.slate__grain{position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:radial-gradient(rgba(244,239,230,.05) .5px,transparent .5px);background-size:3px 3px}
/* the sprocket rail: the one literal nod to the filmstrip, kept to a hairline */
.slate__perf{position:absolute;top:0;bottom:0;left:0;width:22px;z-index:3;pointer-events:none;
  border-right:1px solid var(--on-forest-rule);
  background-image:linear-gradient(180deg,var(--ar-strip) 0 10px,transparent 10px 24px);
  background-size:100% 24px}
.slate__in{position:relative;z-index:4;width:100%;max-width:var(--ar-wrap);margin:0 auto;
  padding:0 var(--ar-gut) 72px}
.slate__eb{display:flex;align-items:center;gap:13px;margin-bottom:26px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.slate__eb::before{content:"";width:34px;height:1px;background:var(--gold)}
.slate__eb .dim{color:var(--on-forest-muted)}
.slate__h{font-family:var(--serif);font-weight:500;color:var(--cream);
  font-size:clamp(34px,6vw,74px);line-height:1.0;letter-spacing:-.02em;max-width:17ch}
.slate__h .accent{color:var(--gold)}
.slate__sf{margin-top:24px;max-width:60ch;font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--on-forest-body)}
.slate__sf strong{color:var(--cream);font-weight:500}
.slate__who{display:flex;align-items:center;gap:16px;margin-top:30px;flex-wrap:wrap}
.slate__portrait{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:1px solid var(--on-forest-rule-2)}
.slate__name{font-family:var(--serif);font-size:21px;color:var(--gold-bright);line-height:1.2}
.slate__role{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--on-forest-body);
  margin-top:5px;max-width:44ch}
/* the production record: what a slate actually carries */
.slate__rec{margin-top:38px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--on-forest-rule);max-width:900px}
.slate__rec-cell{padding:18px 22px 6px 0;border-right:1px solid var(--on-forest-rule)}
.slate__rec-cell:last-child{border-right:none}
.slate__rec-k{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-forest-muted);margin-bottom:9px}
.slate__rec-v{font-family:var(--serif);font-weight:500;color:var(--cream);font-size:29px;line-height:1}
.slate__rec-v .sm{font-family:var(--sans);font-size:13px;color:var(--on-forest-body);margin-left:3px}
.slate__rec-v.text{font-size:19px;line-height:1.25}
@media(max-width:820px){
  .slate__rec{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slate__rec-cell:nth-child(2n){border-right:none}
  .slate__rec-cell:nth-child(n+3){border-top:1px solid var(--on-forest-rule)}
  .slate__in{padding:0 24px 56px}
  .slate__perf{display:none}
}

/* ====================== SECTION FURNITURE ====================== */
.arsec{padding-block:var(--sec-major);padding-inline:var(--ar-gut)}
/* A dark section MUST carry arsec--deep or arsec--forest as well as its own
   background class. The background class paints the panel; the modifier is
   what flips arsec__h, arsec__sf and their strong tags off the cream-section
   ink. Set one without the other and the heading renders dark on dark. */
.arsec--cream{background:var(--cream);color:var(--ink)}
.arsec--deep{background:var(--forest-deep)}
.arsec--forest{background:var(--forest)}
.arsec__wrap{max-width:var(--ar-wrap);margin:0 auto}
.arsec__wrap--narrow{max-width:1000px}
.arsec__eb{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.arsec__eb::before{content:"";width:38px;height:1px;background:var(--gold);flex:none}
.arsec__eb-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:500}
.arsec--deep .arsec__eb-t,.arsec--forest .arsec__eb-t{color:var(--gold)}
.arsec__h{font-family:var(--serif);font-weight:500;font-size:var(--t-h2);line-height:1.1;
  letter-spacing:-.015em;color:var(--ink);max-width:20ch}
.arsec--deep .arsec__h,.arsec--forest .arsec__h{color:var(--cream)}
.arsec__h .u-gold{color:var(--gold-deep)}
.arsec--deep .arsec__h .u-gold,.arsec--forest .arsec__h .u-gold{color:var(--gold-bright)}
.arsec__sf{margin-top:20px;max-width:72ch;font-size:16px;line-height:1.7;color:#3A3A3A}
.arsec--deep .arsec__sf,.arsec--forest .arsec__sf{color:var(--on-forest-body)}
.arsec__sf strong{color:var(--ink);font-weight:600}
.arsec--deep .arsec__sf strong,.arsec--forest .arsec__sf strong{color:var(--cream);font-weight:500}
.arsec__head{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;
  flex-wrap:wrap;margin-bottom:44px}
.arsec__file{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--on-forest-muted);
  text-align:right;line-height:1.85}
.arsec__file b{color:var(--gold)}
.arsec__foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--on-forest-rule);
  font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.7;color:var(--on-forest-muted)}
.arsec--cream .arsec__foot{border-top-color:var(--cream-line);color:var(--muted-2,#8A8478)}
@media(max-width:620px){.arsec{padding-inline:22px}.arsec__file{text-align:left}}

/* overview lede, cream */
.arov__lede{font-family:var(--serif);font-weight:500;font-size:clamp(20px,2.4vw,26px);line-height:1.4;
  color:var(--forest);margin-bottom:26px;max-width:34ch}
.arov__p{font-size:16px;line-height:1.7;color:#3A3A3A;margin-bottom:20px;max-width:70ch}
.arov__p strong{color:var(--ink);font-weight:600}
.arov__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:48px;align-items:start}
.arov__sig{display:flex;gap:12px;align-items:center;margin-top:30px;font-size:13px;color:#6B6B6B;
  border-top:1px solid var(--cream-line);padding-top:20px}
.arov__sig .rule-gold{width:26px;height:1px;background:var(--gold);flex:none}
@media(max-width:900px){.arov__grid{grid-template-columns:1fr;gap:26px}}

/* ================= THE ARC (scrollytelling) ================= */
/* Ported from the market chapters' story format. Here the sticky stage is a
   career rather than a country, so the counter reads as a frame count. */
.arc{position:relative;background:var(--forest-deep);color:var(--cream)}
.arc__progress{position:fixed;top:0;right:0;width:3px;height:100vh;z-index:40;
  background:rgba(244,239,230,.06);opacity:0;transition:opacity .4s ease;pointer-events:none}
.arc__progress.live{opacity:1}
.arc__progress-fill{position:absolute;top:0;left:0;width:100%;height:0%;
  background:linear-gradient(180deg,var(--gold) 0%,var(--flow-bright) 100%)}
.arc__progress-ticks{position:absolute;inset:0}
.arc__tick{position:absolute;right:0;width:9px;height:1px;background:rgba(244,239,230,.25);transform:translateY(-50%)}
.arc__tick.passed{background:var(--gold);width:13px}

.arc__intro{position:relative;z-index:3;max-width:var(--ar-wrap);margin:0 auto;
  padding:var(--sec-punct) var(--ar-gut) 52px;text-align:center}
.arc__intro-eb{display:inline-flex;align-items:center;gap:14px;margin-bottom:24px}
.arc__intro-eb span:first-child,.arc__intro-eb span:last-child{width:38px;height:1px;background:var(--on-forest-rule-2)}
.arc__intro-eb-t{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.arc__intro-h{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5.2vw,70px);line-height:1.0;
  letter-spacing:-.02em;color:var(--cream);margin-bottom:22px}
.arc__intro-h .accent{color:var(--gold)}
.arc__intro-p{font-size:15px;line-height:1.7;color:var(--on-forest-body);max-width:62ch;margin:0 auto}
.arc__intro-hint{margin-top:36px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--on-forest-muted);display:inline-flex;align-items:center;gap:10px}
.arc__intro-hint svg{width:13px;height:13px;animation:arcBob 1.8s ease-in-out infinite}
@keyframes arcBob{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}

.arc__stage{position:relative}
.arc__viz{position:sticky;top:0;height:100vh;width:100%;overflow:hidden;z-index:0}
.arc__scene{position:absolute;inset:0;opacity:0;pointer-events:none;
  transition:opacity 700ms cubic-bezier(.4,0,.2,1)}
.arc__scene.active,.arc__scene.leaving{will-change:opacity}
.arc__scene.active{opacity:1}
.arc__layer{position:absolute;inset:-8% -4%;background-size:cover;background-position:center}
.arc__scene.active .arc__layer{will-change:transform}
.arc__veil{position:absolute;inset:0;z-index:2;background:
  linear-gradient(90deg,rgba(8,28,22,.92) 0%,rgba(8,28,22,.52) 38%,rgba(8,28,22,.10) 68%,transparent 90%),
  linear-gradient(0deg,rgba(8,28,22,.74) 0%,transparent 52%)}
.arc__veil--right{background:
  linear-gradient(270deg,rgba(8,28,22,.92) 0%,rgba(8,28,22,.52) 38%,rgba(8,28,22,.10) 68%,transparent 90%),
  linear-gradient(0deg,rgba(8,28,22,.74) 0%,transparent 52%)}
.arc__fx{position:absolute;inset:0;width:100%;height:100%;z-index:1}
.arc__draw{stroke-dasharray:var(--len,1400);stroke-dashoffset:var(--len,1400);
  transition:stroke-dashoffset 1800ms cubic-bezier(.3,.7,.2,1)}
.arc__scene.active .arc__draw{stroke-dashoffset:0}
.arc__node{opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;
  transition:opacity 600ms ease var(--d,0ms),transform 700ms cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.arc__scene.active .arc__node{opacity:1;transform:scale(1)}
.arc__lab{opacity:0;transition:opacity 700ms ease var(--d,400ms)}
.arc__scene.active .arc__lab{opacity:1}

/* frame counter + caption, borrowed from the edit suite */
.arc__frame{position:absolute;top:26px;left:calc(var(--ar-gut) + 4px);z-index:5;font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;color:var(--on-forest-muted);display:flex;align-items:baseline;gap:7px}
.arc__frame .cur{font-size:22px;color:var(--gold);font-weight:500}
.arc__cap{position:absolute;left:calc(var(--ar-gut) + 4px);bottom:38px;z-index:5;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--on-forest-body);
  display:flex;align-items:center;gap:12px;background:rgba(8,28,22,.55);
  border:1px solid var(--on-forest-rule-2);padding:9px 14px;backdrop-filter:blur(4px);max-width:min(70vw,520px)}
.arc__cap-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}
.arc__cap-dot.v{background:var(--verified)}
.arc__cap-dot.a{background:var(--announced)}
.arc__cap-dot.c{background:var(--contested)}
.arc__cap-dot.f{background:var(--flow-bright)}

.arc__steps{position:relative;z-index:2;margin-top:-100vh;padding-bottom:8vh;pointer-events:none}
.arc__step{min-height:118vh;display:flex;align-items:center;padding:0 var(--ar-gut);pointer-events:none}
.arc__step:first-child{min-height:94vh}
.arc__step:last-child{min-height:112vh}
.arc__step.right{justify-content:flex-end}
.arc__step.center{justify-content:center}
.arc__card{pointer-events:auto;max-width:470px;background:rgba(11,26,21,.86);backdrop-filter:blur(5px);
  border:1px solid var(--on-forest-rule-2);border-left:2px solid var(--gold);padding:32px 34px 34px;
  opacity:0;transform:translateY(28px);transition:opacity 750ms ease,transform 750ms ease}
.arc__step.in .arc__card{opacity:1;transform:translateY(0)}
.arc__card--plain{background:none;border:none;backdrop-filter:none;padding:0;max-width:640px;
  text-shadow:0 2px 24px rgba(8,28,22,.9),0 1px 4px rgba(8,28,22,.75)}
.arc__card--quote{background:rgba(7,23,28,.82);border-left-color:var(--flow-bright)}
.arc__card-eb{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--gold);margin-bottom:15px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.arc__card-eb .n{color:var(--on-forest-muted)}
.arc__card-h{font-family:var(--serif);font-weight:500;font-size:29px;line-height:1.12;
  letter-spacing:-.012em;color:var(--cream);margin-bottom:15px}
.arc__card--plain .arc__card-h{font-size:clamp(32px,4vw,50px)}
.arc__card-p{font-size:14.5px;line-height:1.68;color:var(--on-forest-body);margin-bottom:14px}
.arc__card--plain .arc__card-p{font-size:17px;max-width:46ch}
.arc__card-p:last-child{margin-bottom:0}
.arc__card-p strong{color:var(--cream);font-weight:600}
.arc__metric{margin-top:20px;padding-top:18px;border-top:1px solid var(--on-forest-rule);
  display:flex;gap:26px;flex-wrap:wrap}
.arc__metric-i{display:flex;flex-direction:column;gap:4px}
.arc__metric-v{font-family:var(--serif);font-weight:500;font-size:29px;color:var(--gold);line-height:1}
.arc__metric-v.flow{color:var(--flow-bright)}
.arc__metric-v .sm{font-family:var(--sans);font-size:13px;color:var(--on-forest-muted);margin-left:3px}
.arc__metric-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-forest-muted);max-width:22ch;line-height:1.5}
.arc__pull{margin-top:2px;padding-left:18px;border-left:2px solid var(--flow-bright);
  font-family:var(--serif);font-size:21px;line-height:1.4;color:var(--cream)}
.arc__pull-src{display:block;margin-top:12px;font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  color:var(--on-forest-muted)}
.arc__tag{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;border:1px solid;line-height:1.4}
.arc__tag.v{color:var(--sage);border-color:rgba(127,176,162,.45)}
.arc__tag.a{color:var(--gold-bright);border-color:var(--on-forest-rule-2)}
.arc__tag.c{color:#E08766;border-color:rgba(176,70,45,.5)}
@media(max-width:900px){
  .arc__step{padding:0 22px;min-height:110vh}
  .arc__step.right{justify-content:flex-start}
  .arc__card{max-width:100%}
  .arc__frame{left:20px;top:18px}
  .arc__cap{left:20px;bottom:24px;max-width:calc(100% - 40px)}
  .arc__intro{padding:64px 22px 40px}
}

/* ================== THE INSTRUMENTS (dashboard) ================== */
/* Each answer that resolves into data gets a tile. Opening a tile shows what
   he said, verbatim, then what the record independently shows, with a figure. */
.inst{background:var(--forest);border-block:1px solid var(--on-forest-rule)}
.inst__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--on-forest-rule);border:1px solid var(--on-forest-rule)}
.inst__tile{background:var(--forest-2);border:none;text-align:left;cursor:pointer;color:inherit;
  padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;min-height:230px;
  transition:background .25s ease,transform .25s ease}
.inst__tile:hover{background:var(--forest-3)}
.inst__tile:hover .inst__tile-open{color:var(--gold-bright)}
.inst__tile-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inst__tile-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--on-forest-muted)}
.inst__tile-h{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.18;color:var(--cream)}
.inst__tile-fig{font-family:var(--serif);font-weight:500;font-size:34px;line-height:1;color:var(--gold-bright);
  margin-top:auto}
.inst__tile-fig .u{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-forest-muted);margin-top:9px;line-height:1.5}
.inst__tile-open{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:7px;transition:color .2s}
@media(max-width:960px){.inst__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.inst__grid{grid-template-columns:1fr}.inst__tile{min-height:0}}

/* instrument panel */
.ipanel{position:fixed;inset:0;z-index:120;display:none}
.ipanel.is-open{display:block}
.ipanel__scrim{position:absolute;inset:0;background:rgba(4,14,11,.8);backdrop-filter:blur(3px)}
.ipanel__box{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(760px,calc(100vw - 40px));max-height:min(86vh,900px);overflow-y:auto;
  background:var(--ar-panel);border:1px solid var(--on-forest-rule-2);border-top:2px solid var(--gold);
  padding:36px 38px 34px;box-shadow:0 40px 100px rgba(0,0,0,.6)}
.ipanel__close{position:absolute;top:14px;right:16px;width:32px;height:32px;border:1px solid var(--on-forest-rule);
  background:none;color:var(--on-forest-muted);cursor:pointer;border-radius:50%;
  display:flex;align-items:center;justify-content:center;transition:color .2s,border-color .2s}
.ipanel__close:hover{color:var(--cream);border-color:var(--gold)}
.ipanel__close svg{width:14px;height:14px}
.ipanel__eb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:11px;display:flex;align-items:center;gap:9px}
.ipanel__eb .d{width:8px;height:8px;border-radius:50%;background:var(--gold)}
.ipanel__eb .d.v{background:var(--verified)}
.ipanel__eb .d.a{background:var(--announced)}
.ipanel__eb .d.c{background:var(--contested)}
.ipanel__eb .d.e{background:var(--on-forest-muted)}
.ipanel__h{font-family:var(--serif);font-weight:500;font-size:clamp(23px,3vw,31px);line-height:1.16;
  color:var(--cream);margin-bottom:20px;max-width:26ch}
.ipanel__fig{display:flex;align-items:baseline;gap:13px;padding-bottom:22px;margin-bottom:22px;
  border-bottom:1px solid var(--on-forest-rule);flex-wrap:wrap}
.ipanel__fig .n{font-family:var(--serif);font-size:clamp(34px,5vw,48px);line-height:1;color:var(--gold-bright)}
.ipanel__fig .u{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-forest-muted);max-width:24ch;line-height:1.5}
/* what he said, in his words */
.ipanel__said{background:rgba(200,169,110,.06);border-left:2px solid var(--gold);padding:18px 22px;margin-bottom:22px}
.ipanel__said-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px}
.ipanel__said-t{font-family:var(--serif);font-size:17px;line-height:1.55;color:var(--cream)}
/* what the record shows, ours not his */
.ipanel__ev-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-forest-muted);margin-bottom:11px}
.ipanel__p{font-size:14.5px;line-height:1.72;color:var(--on-forest-body);margin-bottom:18px}
.ipanel__p em{color:var(--gold-bright)}
.ipanel__p a{color:var(--gold-bright);border-bottom:1px solid rgba(200,169,110,.35)}
.ipanel__chart{width:100%;height:auto;margin:6px 0 20px;background:rgba(8,28,22,.5);
  border:1px solid var(--on-forest-rule);padding:10px}
.ipanel__ax{font-family:var(--mono);font-size:10px;fill:var(--on-forest-muted);letter-spacing:.06em}
.ipanel__axv{font-family:var(--mono);font-size:12px;fill:var(--cream)}
.ipanel__stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--on-forest-rule);border:1px solid var(--on-forest-rule);margin-bottom:18px}
.ipanel__stat{background:var(--forest);padding:15px 14px}
.ipanel__stat .v{font-family:var(--serif);font-size:19px;color:var(--cream);line-height:1.15}
.ipanel__stat .l{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--on-forest-muted);margin-top:7px;line-height:1.5}
.ipanel__caveat{background:rgba(181,70,45,.09);border:1px solid rgba(181,70,45,.3);padding:14px 16px;
  font-size:13px;line-height:1.6;color:var(--on-forest-body);margin-bottom:16px}
.ipanel__caveat b{color:#E08766}
.ipanel__src{font-family:var(--mono);font-size:10px;letter-spacing:.05em;line-height:1.7;color:var(--on-forest-muted)}
@media(max-width:700px){
  .ipanel__box{padding:30px 22px 26px;width:calc(100vw - 24px);max-height:92vh}
  .ipanel__stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ==================== THE VERBATIM (transcript) ==================== */
/* The answers that do not resolve into data are left exactly as answers.
   The perforation rail marks this as the primary footage: unedited. */
.vb{background:var(--forest-deep)}
.vb__list{border-top:1px solid var(--on-forest-rule)}
.vb__item{border-bottom:1px solid var(--on-forest-rule);position:relative;padding-left:34px}
.vb__item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:15px;
  border-right:1px solid var(--on-forest-rule);
  background-image:linear-gradient(180deg,var(--ar-strip) 0 9px,transparent 9px 22px);background-size:100% 22px}
.vb__q{width:100%;text-align:left;background:none;border:none;color:inherit;cursor:pointer;
  padding:24px 44px 24px 0;display:block;position:relative;transition:color .2s}
.vb__q-n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);display:block;margin-bottom:9px}
.vb__q-t{font-family:var(--serif);font-weight:500;font-size:clamp(18px,2.1vw,23px);line-height:1.32;
  color:var(--cream);max-width:52ch}
.vb__q:hover .vb__q-t{color:var(--gold-bright)}
.vb__q-mark{position:absolute;right:2px;top:28px;width:22px;height:22px;color:var(--on-forest-muted);
  transition:transform .3s ease,color .2s}
.vb__q-mark svg{width:22px;height:22px}
.vb__item.is-open .vb__q-mark{transform:rotate(45deg);color:var(--gold)}
.vb__a{display:none;padding:0 0 30px}
.vb__item.is-open .vb__a{display:block}
.vb__a-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-forest-muted);margin-bottom:12px}
.vb__a-t{font-family:var(--serif);font-size:clamp(17px,2vw,20px);line-height:1.62;color:var(--cream);
  max-width:64ch;padding-left:18px;border-left:2px solid var(--gold)}
.vb__a-note{margin-top:18px;font-size:14px;line-height:1.68;color:var(--on-forest-body);max-width:70ch}
.vb__a-note strong{color:var(--cream);font-weight:500}
.vb__a-meta{margin-top:18px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.vb__scale{margin-top:20px;max-width:520px}
.vb__scale-bar{height:8px;background:rgba(244,239,230,.08);border-radius:4px;overflow:hidden}
.vb__scale-fill{height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));transition:width 1.1s cubic-bezier(.4,0,.2,1)}
.vb__scale-ends{display:flex;justify-content:space-between;gap:16px;margin-top:9px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-forest-muted)}
/* the four demand phases: a ladder, because the order is the argument */
.phase{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--on-forest-rule);border:1px solid var(--on-forest-rule);margin:22px 0 4px}
.phase__cell{background:var(--forest-2);padding:22px 20px 24px;position:relative}
.phase__cell::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));opacity:.28}
.phase__cell:nth-child(2)::before{opacity:.48}
.phase__cell:nth-child(3)::before{opacity:.72}
.phase__cell:nth-child(4)::before{opacity:1}
.phase__n{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-forest-muted);display:block;margin-bottom:11px}
.phase__h{font-family:var(--serif);font-weight:500;font-size:18px;line-height:1.24;color:var(--cream);margin-bottom:9px}
.phase__p{font-size:13px;line-height:1.6;color:var(--on-forest-body)}
@media(max-width:900px){.phase{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.phase{grid-template-columns:1fr}}

/* fourth grade in the taxonomy, absent from system.css */
.u-tag--e{color:var(--on-forest-muted);border-color:rgba(138,150,144,.5)}

.vb__ctrl{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.vb__btn{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-forest-body);background:none;border:1px solid var(--on-forest-rule-2);
  padding:9px 15px;border-radius:20px;cursor:pointer;transition:all .2s}
.vb__btn:hover{color:var(--gold);border-color:var(--gold)}
@media(max-width:620px){.vb__item{padding-left:26px}.vb__item::before{width:11px}}

/* ================= EDITIONS RAIL (hub page) ================= */
.eds{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:26px}
.ed{display:flex;flex-direction:column;background:var(--forest-2);border:1px solid var(--on-forest-rule);
  overflow:hidden;transition:border-color .25s ease,transform .25s ease}
.ed:hover{border-color:var(--on-forest-rule-2);transform:translateY(-3px)}
.ed__media{position:relative;aspect-ratio:16/10;background-size:cover;background-position:50% 22%}
.ed__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,28,22,.92) 0%,rgba(8,28,22,.15) 62%,transparent 100%)}
.ed__code{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);
  background:rgba(8,28,22,.72);border:1px solid var(--on-forest-rule-2);padding:5px 10px}
.ed__status{position:absolute;top:14px;right:14px;z-index:2;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid;
  background:rgba(8,28,22,.72)}
.ed__status.live{color:var(--sage);border-color:rgba(127,176,162,.45)}
.ed__status.soon{color:var(--gold-bright);border-color:var(--on-forest-rule-2)}
.ed__body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1;gap:13px}
.ed__name{font-family:var(--serif);font-size:20px;color:var(--gold-bright);line-height:1.2}
.ed__role{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;line-height:1.6;color:var(--on-forest-muted)}
.ed__h{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.22;color:var(--cream)}
.ed__p{font-size:14px;line-height:1.65;color:var(--on-forest-body);flex:1}
.ed__go{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:8px;margin-top:4px}
.ed:hover .ed__go{color:var(--gold-bright)}
.ed--locked{opacity:.72}
.ed--locked:hover{transform:none}

/* format explainer: the five movements */
.mov{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--cream-line);border:1px solid var(--cream-line)}
.mov__cell{background:#FBF8F1;padding:26px 24px 28px}
.mov__n{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-deep);margin-bottom:13px}
.mov__h{font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.22;color:var(--ink);margin-bottom:10px}
.mov__p{font-size:13.5px;line-height:1.62;color:#3A3A3A}

/* ================= THE RECORD + cross-links ================= */
.rec__grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:start}
.rec__p{font-size:14px;line-height:1.75;color:var(--on-forest-body);margin-bottom:16px;max-width:68ch}
.rec__p strong{color:var(--cream);font-weight:500}
.rec__status{display:flex;flex-direction:column;gap:1px;background:var(--on-forest-rule);
  border:1px solid var(--on-forest-rule)}
.rec__row{background:var(--forest-2);padding:15px 18px;display:flex;justify-content:space-between;
  gap:16px;align-items:baseline;flex-wrap:wrap}
.rec__row-k{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-forest-muted)}
.rec__row-v{font-size:14px;color:var(--cream);text-align:right}
@media(max-width:900px){.rec__grid{grid-template-columns:1fr;gap:30px}}

.rush{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--on-forest-rule);border:1px solid var(--on-forest-rule)}
.rush__cell{background:var(--forest-2);padding:24px 22px 26px;display:flex;flex-direction:column;gap:11px;
  transition:background .22s}
.rush__cell:hover{background:var(--forest-3)}
.rush__k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.rush__h{font-family:var(--serif);font-size:19px;line-height:1.24;color:var(--cream)}
.rush__p{font-size:13.5px;line-height:1.6;color:var(--on-forest-body)}

/* call to sit for one */
.sit{background:var(--forest-2);border:1px solid var(--on-forest-rule-2);padding:40px 42px}
.sit__h{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3.2vw,34px);line-height:1.15;
  color:var(--cream);max-width:22ch;margin-bottom:16px}
.sit__p{font-size:15px;line-height:1.7;color:var(--on-forest-body);max-width:64ch;margin-bottom:26px}
.sit__links{display:flex;gap:13px;flex-wrap:wrap}
.sit__link{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--forest-deep);
  background:var(--gold);padding:11px 20px;border-radius:22px;transition:background .2s}
.sit__link:hover{background:var(--gold-bright)}
.sit__link.ghost{background:transparent;color:var(--on-forest-body);border:1px solid var(--on-forest-rule-2)}
.sit__link.ghost:hover{color:var(--gold);border-color:var(--gold);background:transparent}
@media(max-width:620px){.sit{padding:30px 24px}}

/* ============================ FOOTER ============================ */
.nhfoot{background:var(--forest-deep);border-top:1px solid var(--on-forest-rule);padding:52px 0 34px}
.nhfoot__wrap{max-width:var(--ar-wrap);margin:0 auto;padding:0 var(--ar-gut);display:flex;
  justify-content:space-between;align-items:flex-start;gap:30px;flex-wrap:wrap}
.nhfoot__mark{height:22px;margin-bottom:12px}
.nhfoot__tag{font-size:13px;color:var(--on-forest-muted);max-width:30ch}
.nhfoot__nav{display:flex;gap:20px;flex-wrap:wrap}
.nhfoot__nav a{font-family:var(--mono);font-size:12px;color:var(--on-forest-body);transition:color .25s}
.nhfoot__nav a:hover{color:var(--gold)}
.nhfoot__base{max-width:var(--ar-wrap);margin:34px auto 0;padding:20px var(--ar-gut) 0;
  border-top:1px solid var(--on-forest-rule);display:flex;justify-content:space-between;gap:16px;
  flex-wrap:wrap;font-family:var(--mono);font-size:11px;color:var(--on-forest-muted)}
@media(max-width:620px){.nhfoot__wrap,.nhfoot__base{padding-inline:22px}}

/* (superseded) ---- section lid ---------------------------------------------------------
   A cover plate over The Instruments, so the section opens on an image rather
   than straight into six tiles. Deliberately shallow: it is a lid, not a hero,
   and the tiles below are what the reader came for. */
.arsec__lid{margin:0 0 34px;position:relative;border:1px solid var(--on-forest-rule-2);
  border-radius:4px;overflow:hidden}
.arsec__lid-img{aspect-ratio:32/9;background-size:cover;background-position:center 55%;
  filter:saturate(.8) contrast(1.03)}
.arsec__lid-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,28,22,.42) 0%,rgba(8,28,22,.30) 55%,rgba(8,28,22,.88) 100%)}
.arsec__lid-cap{position:absolute;left:22px;bottom:16px;z-index:2;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.72);
  display:flex;align-items:center;gap:11px}
.arsec__lid-cap::before{content:"";width:22px;height:1px;background:var(--gold);flex:none}
@media(max-width:640px){.arsec__lid-img{aspect-ratio:16/9}.arsec__lid-cap{left:16px;font-size:9px}}


/* the cards carry their own ground, so lifting the plate costs no legibility */
#arc .arc__card{background:rgba(11,26,21,.94)}
#arc .arc__card--plain{text-shadow:0 2px 28px rgba(8,28,22,.96),0 1px 6px rgba(8,28,22,.9)}

/* ---- cover lid, ported verbatim from Case 06 ---- */
@keyframes wnlidHolo{0%,100%{opacity:0}50%{opacity:.92}}
.wnlid{position:relative;margin:clamp(60px,9vw,104px) 0 clamp(10px,2vw,20px)}
.wnlid--wide{max-width:1080px;margin-left:auto;margin-right:auto}
.wnlid__body{max-height:clamp(320px,44vh,404px);overflow:hidden;transition:max-height 1s cubic-bezier(.4,0,.2,1)}
.wnlid.is-open .wnlid__body{max-height:5000px}
.wnlid__cover{position:absolute;inset:0;z-index:6;border-radius:16px;overflow:hidden;cursor:pointer;display:flex;align-items:flex-end;border:1px solid var(--rule-2);transition:opacity .55s ease,visibility .55s,transform .5s ease}
.wnlid.is-open .wnlid__cover{opacity:0;visibility:hidden;transform:scale(1.02);pointer-events:none}
.wnlid__bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(.92) brightness(.62)}
.wnlid__holo{position:absolute;inset:0;background-size:cover;background-position:center;filter:saturate(1.06) brightness(.9);opacity:0;animation:wnlidHolo 8s ease-in-out infinite}
.wnlid__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,15,12,.1) 28%,rgba(6,15,12,.88))}
.wnlid__in{position:relative;z-index:2;padding:clamp(24px,3.2vw,40px);width:100%}
.wnlid__eb{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.wnlid__eb::before{content:"";width:24px;height:1px;background:var(--gold);opacity:.75}
.wnlid__h{font-family:"Playfair Display",Georgia,serif;font-weight:500;font-size:clamp(24px,3vw,36px);line-height:1.08;letter-spacing:-.015em;color:var(--cream);margin:0;max-width:22ch;text-shadow:0 2px 22px rgba(0,0,0,.45)}
.wnlid__cta{margin-top:20px;display:inline-flex;align-items:center;gap:9px;font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#0c2018;background:var(--gold-bright);border:none;border-radius:9px;padding:12px 20px;cursor:pointer;transition:background .25s,transform .2s}
.wnlid__cover:hover .wnlid__cta{background:var(--cream);transform:translateY(-1px)}
.wnlid__cta svg{width:15px;height:15px}
@keyframes wnlidHolo{0%,100%{opacity:0}50%{opacity:.92}}
.wnlid__body{position:relative}


/* ===== The Rushes, as screenshot tiles ===================================
   Three destinations, shown rather than described. A cross-reference that
   pictures where it sends you is far likelier to be followed than one that
   only names it. */
.rushes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.rush-tile{display:flex;flex-direction:column;background:var(--forest-2);
  border:1px solid var(--on-forest-rule);border-radius:4px;overflow:hidden;
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.rush-tile:hover{transform:translateY(-4px);border-color:var(--gold);
  box-shadow:0 22px 46px -26px rgba(0,0,0,.7)}
.rush-tile__shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--forest-deep)}
.rush-tile__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;
  filter:saturate(.9) brightness(.92);transition:filter .3s ease,transform 6s ease}
.rush-tile:hover .rush-tile__shot img{filter:none;transform:scale(1.03)}
.rush-tile__shot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(8,28,22,.72) 100%)}
.rush-tile__k{position:absolute;top:11px;left:11px;z-index:2;font-family:var(--mono);font-size:9px;
  letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
  background:rgba(8,28,22,.8);border:1px solid var(--on-forest-rule-2);color:var(--gold-bright)}
.rush-tile__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.rush-tile__h{font-family:var(--serif);font-size:19px;line-height:1.24;color:var(--cream)}
.rush-tile__p{font-size:13.5px;line-height:1.6;color:var(--on-forest-body);flex:1}
.rush-tile__go{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.rush-tile:hover .rush-tile__go{color:var(--gold-bright)}
@media(max-width:900px){.rushes{grid-template-columns:1fr;gap:16px}}

/* ===== The Verbatim on paper ============================================
   The transcript moves onto the same cream ground the analyst overview and
   the conclusions use, because it is the reading section of the page and it
   was fighting the instruments above it for attention. The film-roll motif
   stays, because it is what says "primary footage": the sprocket rail simply
   inverts to a paper punch. Every colour in here is restated for the light
   ground rather than inherited, since inheriting is what has broken this
   page's other light sections twice. */
.vb--paper{background:var(--cream);color:var(--ink)}
.vb--paper .arsec__eb-t{color:#8A5E18}
.vb--paper .arsec__eb::before{background:#8A5E18}
.vb--paper .arsec__h{color:var(--ink)}
.vb--paper .arsec__h .u-gold{color:#8A5E18}
.vb--paper .arsec__sf{color:#3A3F39}
.vb--paper .arsec__sf strong{color:var(--ink);font-weight:600}
.vb--paper .arsec__file{color:#63675F}
.vb--paper .arsec__file b{color:#8A5E18}

.vb--paper .vb__list{border-top:1px solid rgba(20,36,31,.16)}
.vb--paper .vb__item{border-bottom:1px solid rgba(20,36,31,.16)}
/* the sprocket rail, punched out of paper rather than lit on film */
.vb--paper .vb__item::before{border-right:1px solid rgba(20,36,31,.14);
  background-image:linear-gradient(180deg,rgba(20,36,31,.07) 0 9px,transparent 9px 22px)}
.vb--paper .vb__q-n{color:#8A5E18}
.vb--paper .vb__q-t{color:var(--ink)}
.vb--paper .vb__q:hover .vb__q-t{color:#8A5E18}
.vb--paper .vb__q-mark{color:#8B8F86}
.vb--paper .vb__item.is-open .vb__q-mark{color:#8A5E18}
.vb--paper .vb__a-k{color:#63675F}
.vb--paper .vb__a-t{color:var(--ink);border-left-color:#8A5E18}
.vb--paper .vb__a-note{color:#3A3F39}
.vb--paper .vb__a-note strong{color:var(--ink);font-weight:600}
.vb--paper .vb__a-note a,.vb--paper a{color:#8A5E18;border-bottom:1px solid rgba(138,94,24,.45)}
.vb--paper .vb__a-note a:hover,.vb--paper a:hover{color:#6E4A12}
.vb--paper .vb__btn{color:#4A4F47;border-color:rgba(20,36,31,.22)}
.vb--paper .vb__btn:hover{color:#8A5E18;border-color:#8A5E18}
.vb--paper .vb__scale-bar{background:rgba(20,36,31,.10)}
.vb--paper .vb__scale-fill{background:linear-gradient(90deg,#A8853A,#8A5E18)}
.vb--paper .vb__scale-ends{color:#63675F}
.vb--paper .phase{background:rgba(20,36,31,.14);border-color:rgba(20,36,31,.14)}
.vb--paper .phase__cell{background:#FBF8F1}
.vb--paper .phase__cell::before{opacity:.5}
.vb--paper .phase__n{color:#63675F}
.vb--paper .phase__h{color:var(--ink)}
.vb--paper .phase__p{color:#3A3F39}
.vb--paper .u-tag{border-color:rgba(20,36,31,.28)}
.vb--paper .u-tag--a{color:#8A5E18}
.vb--paper .u-tag--c{color:#9C3A22}
.vb--paper .u-tag--v{color:#2D6A4F}


/* ---- the exit marks -----------------------------------------------------
   Two exits on one method is the claim, so the two acquirers appear as marks
   on the frame that makes it rather than as another line of prose. */
.exitmarks{display:flex;align-items:center;gap:18px;margin-top:20px;padding-top:18px;
  border-top:1px solid var(--on-forest-rule)}
.exitmarks img{height:26px;width:auto;display:block;opacity:.9;
  filter:brightness(1.9) grayscale(.15);border-radius:2px}
.exitmarks .em__i{display:flex;flex-direction:column;gap:6px}
.exitmarks .em__k{font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-forest-muted)}

/* (superseded, shelf now lives in the arc) ---- the shelf ----------------------------------------------------------
   Four books in fifteen years is part of why he is worth asking, so it sits
   in the record rather than being asserted in the biography. */
.shelf{margin-top:26px;padding-top:22px;border-top:1px solid var(--on-forest-rule)}
.shelf__eb{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}
.shelf__eb::before{content:"";width:20px;height:1px;background:var(--gold)}
.shelf__img{width:100%;height:auto;display:block;border-radius:3px;
  border:1px solid var(--on-forest-rule-2);filter:saturate(.92)}
.shelf__cap{margin-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  line-height:1.7;color:var(--on-forest-muted)}

/* the shelf, inside an arc card rather than parked in the record */
.arc__shelf{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--on-forest-rule)}
.arc__shelf img{width:100%;height:auto;display:block;border-radius:3px;
  border:1px solid var(--on-forest-rule-2);filter:saturate(.95) brightness(1.04)}
.arc__shelf figcaption{margin-top:10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  line-height:1.7;color:var(--on-forest-muted)}

/* ---- plate treatment, both editions -------------------------------------
   Two failed attempts before this one, so the reasoning is written down.
   The arc veil existed to keep the cards legible over bright stock imagery.
   The cards now carry their own ground at 94 per cent opacity, so they are
   legible over anything and the veil is protecting nothing. It was only
   burying the plates: on the clear half of the frame just 8 per cent of
   pixels sat above luminance 40, which reads as a dark gradient rather than
   a photograph.
   The veil is now a light wash on the card side only, and the plates are
   lifted at the black point rather than multiplied. */
/* The lift is chosen per plate, not applied blanket. A commissioned plate at
   mean 25 needs a hard shadow lift; a bright still at mean 130 blows straight
   to 228 under the same filter, which is what washed out the exit frame. */
#arc .arc__layer{filter:brightness(1.28) contrast(.94) saturate(1.08)}
#arc .arc__layer--dark{filter:brightness(1.8) contrast(.85) saturate(1.14)}
#arc .arc__layer--mid{filter:brightness(1.24) contrast(.94) saturate(1.1)}
#arc .arc__layer--bright{filter:brightness(.82) contrast(1.06) saturate(.95)}
#arc .arc__veil{background:linear-gradient(90deg,rgba(8,28,22,.84) 0%,rgba(8,28,22,.24) 32%,rgba(8,28,22,0) 54%)}
#arc .arc__veil--right{background:linear-gradient(270deg,rgba(8,28,22,.84) 0%,rgba(8,28,22,.24) 32%,rgba(8,28,22,0) 54%)}
#arc .arc__card{background:rgba(11,26,21,.95);backdrop-filter:blur(6px)}
#arc .arc__card--plain{text-shadow:0 2px 30px rgba(8,28,22,.98),0 1px 6px rgba(8,28,22,.95)}


/* ===== DESIGN PASS, A Roll editions ======================================
   With the eyebrows gone the pages lost their vertical rhythm marker, so the
   spacing and hierarchy have to do that work instead. Headings get more room
   above them and less below, so a section reads as one block rather than a
   stack of parts. Measures are tightened: the standfirsts were running past
   80 characters, which is beyond comfortable for a single column.
   ======================================================================== */

/* section rhythm: more air between blocks, tighter inside them */
.arsec{padding-block:clamp(64px,9vw,116px)}
.arsec__head{margin-bottom:clamp(30px,4vw,46px);align-items:flex-end}
.arsec__h{max-width:18ch;letter-spacing:-.02em;line-height:1.06}
.arsec__sf{margin-top:18px;max-width:62ch;font-size:16.5px;line-height:1.68}

/* the slate: without its eyebrow the headline needs to start higher and the
   production record needs more separation from it */
.slate__in{padding-bottom:clamp(56px,7vw,84px)}
.slate__h{letter-spacing:-.028em;line-height:.98;max-width:16ch}
.slate__sf{margin-top:26px;max-width:56ch;font-size:clamp(15px,1.4vw,17.5px)}
.slate__rec{margin-top:44px;border-top-color:rgba(200,169,110,.28)}
.slate__rec-k{font-size:9.5px;letter-spacing:.16em}
.slate__rec-v{font-size:31px}

/* the arc cards carried the frame number in the eyebrow, so the number moves
   into the card as a quiet corner mark rather than disappearing */
.arc__card{padding:34px 36px 32px;border-left-width:2px}
.arc__card-h{font-size:30px;line-height:1.1;letter-spacing:-.018em;margin-bottom:16px}
.arc__card-p{font-size:15px;line-height:1.7}
.arc__card--plain .arc__card-h{font-size:clamp(34px,4.2vw,54px);line-height:1.02}
.arc__pull{font-size:22px;line-height:1.42}
.arc__intro-h{margin-bottom:26px;letter-spacing:-.022em}
.arc__intro-p{font-size:16px;max-width:58ch}

/* instruments: even tiles, calmer type, a clearer open affordance */
.inst__tile{padding:30px 28px 28px;gap:16px;min-height:246px}
.inst__tile-h{font-size:23px;line-height:1.16;letter-spacing:-.01em}
.inst__tile-fig{font-size:36px;letter-spacing:-.02em}
.inst__tile-open{opacity:.75;transition:opacity .2s ease,color .2s ease}
.inst__tile:hover .inst__tile-open{opacity:1}

/* verbatim on paper: longer measure was hurting it, and the questions needed
   to sit apart from the answers more clearly */
.vb__q{padding:28px 46px 28px 0}
.vb__q-t{max-width:46ch;line-height:1.28}
.vb__a{padding-bottom:34px}
.vb__a-t{max-width:58ch;font-size:clamp(17px,1.9vw,19.5px);line-height:1.62}
.vb__a-note{max-width:62ch;font-size:14.5px;line-height:1.72}

/* rushes: square the tiles up and give the caption room */
.rushes{gap:22px}
.rush-tile__body{padding:18px 20px 20px;gap:9px}
.rush-tile__h{font-size:20px;letter-spacing:-.008em}

/* the record reads as a colophon, so it should be quieter than the body */
.rec__p{font-size:14px;line-height:1.78;max-width:64ch}
.rec__row{padding:16px 18px}


/* ===== A Roll cover: editions rail, full bleed =============================
   The cover is now just the slate and the editions. With nothing else on the
   page the tiles have to carry it, so they go full width, side by side, and
   large enough that the portrait is the thing you meet first. */
.arsec--deep#editions,#editions.arsec{padding-block:clamp(48px,6vw,80px) clamp(64px,9vw,110px)}
#editions .arsec__wrap{max-width:1560px;padding-inline:clamp(20px,3vw,40px)}
.eds{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ed{border-radius:5px}
.ed__media{aspect-ratio:4/5;background-position:50% 18%}
.ed__media::after{background:linear-gradient(0deg,rgba(8,28,22,.94) 0%,rgba(8,28,22,.30) 52%,rgba(8,28,22,.10) 100%)}
.ed__code{font-size:9.5px;letter-spacing:.18em}
.ed__body{padding:26px 26px 30px;gap:14px}
.ed__name{font-size:26px;line-height:1.14;letter-spacing:-.015em}
.ed__role{font-size:10.5px;line-height:1.65}
.ed__h{font-size:24px;line-height:1.2;letter-spacing:-.012em}
.ed__p{font-size:14.5px;line-height:1.66}
.ed__go{font-size:11px;letter-spacing:.14em;margin-top:6px}
.ed:hover{transform:translateY(-5px)}

/* the upcoming card says one thing and stops */
.ed--upcoming{opacity:.62}
.ed--upcoming:hover{transform:none;opacity:.78}
.ed--upcoming .ed__media{aspect-ratio:4/5;filter:grayscale(.5)}
.ed--upcoming .ed__body{justify-content:flex-end}
.ed--upcoming .ed__h{font-family:var(--mono);font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--on-forest-muted)}
.ed--upcoming .ed__p{color:var(--on-forest-muted);font-size:13px}

@media(max-width:1000px){.eds{grid-template-columns:1fr 1fr}.ed--upcoming{grid-column:1 / -1}
  .ed--upcoming .ed__media{aspect-ratio:16/6}}
@media(max-width:620px){.eds{grid-template-columns:1fr}.ed--upcoming .ed__media{aspect-ratio:16/7}}

/* truly full bleed: the rail runs to the frame, not to a centred column */
#editions.arsec{padding-inline:0}
#editions .arsec__wrap{max-width:none;padding-inline:clamp(14px,1.8vw,28px)}
.eds__foot{margin-top:clamp(26px,3vw,40px);font-family:var(--mono);font-size:10.5px;
  letter-spacing:.06em;line-height:1.85;color:var(--on-forest-muted);max-width:74ch}
.eds__foot a{color:var(--gold);border-bottom:1px solid rgba(200,169,110,.35)}
.eds__foot a:hover{color:var(--gold-bright)}

/* the independent record set against a contributed weighting */
.ipanel__bench{margin-top:22px;padding-top:20px;border-top:1px solid var(--on-forest-rule)}
.ipanel__bench-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.ipanel__bench-k::before{content:"";width:20px;height:1px;background:var(--gold)}
.ipanel__bench-p{font-size:14px;line-height:1.72;color:var(--on-forest-body);margin-bottom:13px;max-width:62ch}
.ipanel__bench-p strong{color:var(--cream);font-weight:600}
.ipanel__bench-p em{font-style:italic;color:var(--cream)}
.ipanel__bench-src{margin-top:14px;padding-top:12px;border-top:1px solid rgba(244,239,230,.08);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;line-height:1.75;color:var(--on-forest-muted);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}

/* the next edition: named and dated rather than a blank placeholder, and it
   counts down to its own drop so the rail always has something moving on it */
.ed--next{opacity:.9}
.ed--next:hover{opacity:1;transform:translateY(-5px)}
.ed--next .ed__media{filter:grayscale(.35) brightness(.85)}
.ed--next:hover .ed__media{filter:grayscale(0) brightness(.95)}
.ed__status.soon{background:rgba(200,169,110,.16);border-color:rgba(200,169,110,.5);color:var(--gold-bright,#E4C98E)}
.ed__cd{display:inline-flex;gap:9px;align-items:baseline;margin-top:10px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--on-forest-muted)}
.ed__cd b{font-size:17px;font-weight:500;color:var(--cream);font-variant-numeric:tabular-nums}