/* ══ 1. FONTS ══
   Subset from the variable originals to Latin + punctuation, and the axes
   clipped to the range this design actually uses. 30 KB + 11 KB.
   font-display:swap so the article is readable before the face lands. */
@font-face{
  font-family:'Archivo Sub';
  src:url('fonts/archivo-subset.woff2') format('woff2');
  font-weight:700 900;   /* the file carries no lighter master */
  font-stretch:100% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Martian Sub';
  src:url('fonts/martianmono-subset.woff2') format('woff2');
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}

/* ══ 2. TOKENS ══
   Contrast is measured against --bg (#0B0B0A), the darker of the only two
   grounds text ever sits on, and re-measured after the palette was aligned to
   the brand pack's 04 COLOUR. Every value below that carries text clears
   4.5:1 on BOTH grounds:
     --ink   16.3 : 1     --prose 11.1 : 1
     --mut    7.8 : 1     --dim    5.5 : 1   --accent 5.8 : 1
   --faint is 3.7:1 and is therefore NEVER used for text — hairlines and
   dividers only. Audited: no rule in this file sets it as a colour on text.
   --rule-2 (BORDER, 1.7:1) is a hairline token and carries no text either. */
:root{
  --bg:#0B0B0A;
  --surface:#131210;
  --surface-2:#1A1815;
  --paper:#F4F2ED;        /* document scans sit on paper, not on the dark */
  --paper-ink:#1D1A14;

  --ink:#EDE9E1;
  --bone:#EDE9E1;        /* alias of --ink: --bone was used site-wide and never defined */
  --prose:#C8C2B6;        /* 04 COLOUR · BODY */
  --mut:#A8A29A;          /* 06 DARK · body on ground */
  --dim:#8C877C;
  --faint:#6E6A61;        /* 3.6:1 — hairlines and dividers only, never text */

  --rule:#26241F;
  --rule-2:#3A3730;       /* 04 COLOUR · BORDER */
  --accent:#FF4A0F;
  --accent-soft:rgba(255,74,15,.14);

  /* The three measures. Prose is the reading column; wide is what an exhibit
     or a pull quote breaks out to; bleed is the hero band. Holding exactly
     three widths is what gives a long article its rhythm — a page where
     everything is the same width reads as a wall.

     The prose column is centred inside the WIDE box, not inside the page, so
     its left edge lands on the headline's. Centring it on the page instead put
     body text 120px right of the h1 it belonged to, which is what made a
     correct 78-character measure read as cramped and badly set. */
  --col:1010px;
  --measure:1010px;
  --col-wide:1130px;
  --col-bleed:1360px;

  --mono:'Martian Sub',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display:'Archivo Sub',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --text:ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ══ 3. BASE ══ */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
html,body{max-width:100%;overflow-x:clip}
body{
  margin:0;background:var(--bg);color:var(--prose);
  font-family:var(--text);font-size:19px;line-height:1.7;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:1px}

h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:900;line-height:1.06;
  letter-spacing:-.02em;color:var(--ink);text-wrap:balance}

/* The mono voice: file numbers, dates, exhibit refs, section labels. Every
   piece of machine-ish metadata on this site speaks in it, nothing else does. */
/* Record identifiers - file numbers, FOI references, document checksums - are
   single unbreakable tokens. A 32-character md5 in a 375px column measured
   392px wide on /editorials/after-the-industry-leaves/ and the tail was CLIPPED
   by the page's overflow-x:clip, not scrolled to: the last characters of a
   checksum simply were not on the phone. On a site whose whole claim is that
   the reader can check the document, a half-printed checksum is a broken
   claim. Breaking inside the token is correct here and only here. */
/* Martian Mono runs much larger than Archivo at the same px — set inline in
   prose it reads as a size jump. 0.86em brings the x-heights level. */
.mono{font-family:var(--mono);overflow-wrap:break-word;font-size:.86em;
  letter-spacing:-.01em}
/* break-word, not anywhere: `anywhere` also feeds break opportunities into
   min-content sizing, which would let a flex or grid track collapse around a
   mono label that currently sets its own width. break-word only breaks a token
   that cannot fit a line on its own - the checksum - and changes nothing else. */
.kicker{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);display:block}
.kicker.quiet{color:var(--dim)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent);
  color:#0B0B0A;padding:12px 20px;font-family:var(--mono);font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.skip:focus{left:0}

.wrap{width:100%;max-width:var(--col-bleed);margin:0 auto;padding:0 clamp(20px,4%,56px)}

/* ── masthead ───────────────────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:80;background:rgba(11,11,10,.92);
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--rule)}
.masthead .wrap{display:flex;align-items:center;gap:20px;height:66px}
/* ── the mark, alone ──
   The bar carries the icon and nothing else. Design System 01 WORDMARK:
   "MINIMUM 140px WIDE. BELOW THAT USE THE SINGLE LINE OR THE MARK ALONE."
   A 66px bar cannot run a 140px wordmark, and of the two sanctioned
   reductions this is the one that puts no words in the bar. Setting the name
   in type beside the icon says the same thing twice — the redundancy that got
   the hero lockup cut.

   The tile is assets/mark-signal.webp — the pack's mark-signal.png resampled,
   nothing else. SIGNAL SKY is the "DEFAULT" colourway in 02 THE MARK. Nothing
   on this site draws, redraws, recolours or stands in for the mark.

   36px is a floor, not a preference. 02 AT SIZE: the far ridge drops at 32px
   and the range drops entirely below 24px — both describe a REDRAWN mark, and
   the pack ships one. 36px is inside the band where the delivered two-ridge
   artwork is the correct artwork. Nothing in the system supports going larger
   now that the bar has room, so it does not.

   The accessible name lives on the <a> (aria-label) and the <img> is alt=""
   aria-hidden, so the link still announces "Backcountry Coalition — editorials"
   with no visible text to carry it. */
.mark{display:flex;align-items:center;flex:0 0 auto}
.mark img{display:block;width:36px;height:36px;aspect-ratio:1/1;flex:0 0 auto}
.mark:hover img,.mark:focus-visible img{opacity:.82}

.mnav{margin-left:auto;display:flex;align-items:center;gap:26px}
.mnav a{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--prose);position:relative;padding:6px 0}
.mnav a:hover,.mnav a:focus-visible{color:var(--ink)}
.mnav a[aria-current="page"]{color:var(--ink)}
.mnav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;background:var(--accent)}

/* Reading progress. Sits on the masthead's own bottom edge, so it costs no
   layout and reads as part of the rule rather than as a bar stuck on top. */
.progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--accent);transition:width .08s linear}

/* ══ 5. THE FRONT DOOR (/editorials/) ══
   A two-part composition, not a stack. "Editorials" is one short word set at
   84px: left on its own it inked about 440px of a 1304px column and left a
   580px void to its right, which read as a broken page rather than a designed
   one. The standfirst now sits BESIDE the title and the block closes on the
   full-width bordered meta row -- the same shape .arthead uses on an editorial
   and on /about/ (kicker, title, deck, then a rule-bounded meta row that spans
   the measure and anchors the block).

   Placement is explicit so the markup keeps its reading order: title,
   standfirst, meta. Nothing here is re-ordered in the HTML.

   THE UNDERLINE. Every orange underline in this system is sized to the text it
   underlines and sits tight beneath it: .rally on an editorial's deck
   (width:max-content, 2px), and the masthead's current-page marker
   (::after pinned left:0 right:0 on the link, 2px). The front door did not
   follow it -- it shipped a free-standing <hr> of arbitrary length
   (clamp(160px,24vw,320px) = 320px) floating 26px under a word that inks about
   437px, so it underlined nothing and related to nothing. It is now a real
   underline on the h1 itself: width:max-content takes the word's own width,
   4px is the display-scale weight of the 2px used at body scale. The <hr> is
   gone from the markup rather than hidden here. */
.front{padding:76px 0 0;display:grid;align-items:start;
  grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);column-gap:64px}
.front h1{grid-column:1;grid-row:1;
  font-size:clamp(40px,6.4vw,84px);font-variation-settings:'wdth' 110;
  letter-spacing:-.035em;line-height:1;
  width:max-content;max-width:min(14ch,100%);
  border-bottom:4px solid var(--accent);padding-bottom:20px}

/* The hero lockup that used to sit here is deleted. The masthead already
   carries the mark; repeating it four times larger as the page's headline put
   brand furniture where the page's title belongs. A page says what it is, once.
   .foot .flock below hides the same lockup in any footer that still ships it. */
/* Fills the right half of the block, beside the title. The measure is capped in
   ch, not px: the column is fluid now, and 58ch holds the same ~78-character
   line the rest of the site is set to. The 9px top nudge optically levels the
   22px intro's first baseline with the 84px cap height -- grid start-alignment
   levels the BOXES, which at that size difference reads as the intro sitting
   high. */
.front .standfirst{grid-column:2;grid-row:1;
  max-width:58ch;margin:9px 0 0;font-size:22px;line-height:1.56;
  color:var(--mut);text-wrap:pretty}
.front .standfirst strong{color:var(--ink);font-weight:600}

/* Closes the block across the full measure. The contact address is pushed to
   the far edge exactly as .byline does with .share and .files-hd does with its
   count, so the rule under the masthead is bracketed rather than trailing off. */
.frontmeta{grid-column:1/-1;
  display:flex;flex-wrap:wrap;gap:14px 30px;align-items:center;
  margin:36px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.frontmeta a{color:var(--dim);border-bottom:1px solid var(--rule-2);padding-bottom:2px}
.frontmeta a:last-child{margin-left:auto}
.frontmeta a:hover,.frontmeta a:focus-visible{color:var(--accent);border-color:var(--accent)}

/* ── the list of editorials ─────────────────────────────────────────────── */
.files{margin:58px 0 0}
.files-hd{display:flex;align-items:baseline;gap:16px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.files-hd .r{margin-left:auto;color:var(--dim);letter-spacing:.14em}

/* The lead entry. With a single editorial on the page this is the whole list,
   so it has to carry the page on its own — hence the image band, the full
   deck and the read affordance. Rows below it are compact by comparison, and
   the difference is what tells you which one is new. */
.entry{display:block;border-bottom:1px solid var(--rule);padding:36px 0 40px;color:inherit}
.entry:hover,.entry:focus-visible{color:inherit}
.entry .band{display:block;border:1px solid var(--rule);background:var(--surface);
  aspect-ratio:40/21;overflow:hidden}
.entry .band img{width:100%;height:100%;object-fit:cover}
/* rail | text | image. The image is a column rather than a full-width band so
   that a list holding ONE article still fills its measure — a single lead over
   a 500px void is the failure mode this layout exists to avoid. */
.entry .grid{display:block}
.entry .rail{display:flex;gap:14px;align-items:baseline;margin:0 0 16px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.entry .rail .cat{display:inline;color:var(--accent);margin:0}
.entry h3{font-size:clamp(26px,2.45vw,34px);font-variation-settings:'wdth' 106;
  letter-spacing:-.025em;margin:0;text-wrap:balance}
.entry .deck{display:block;margin:15px 0 0;font-size:18px;line-height:1.62;color:var(--mut);
  text-wrap:pretty}
.entry .more{display:inline-flex;align-items:center;gap:10px;margin-top:22px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.entry .more i{display:block;width:26px;height:1px;background:var(--accent);
  transition:width .2s ease}
.entry:hover h3,.entry:focus-visible h3{color:var(--accent)}
.entry:hover .more i,.entry:focus-visible .more i{width:44px}
.entry.compact{padding:26px 0}
.entry.compact .grid{display:block}
/* Demoted rows carry their cover card too, but in a narrower column than the
   lead's 420px - the size difference is part of what says which one is new. */
.entry.compact .band{display:block}
.entry.compact h3{font-size:clamp(21px,2vw,25px)}
.entry.compact .deck{font-size:17px;margin-top:10px}

.entry:last-of-type{border-bottom:0}

/* ══ 6. AN EDITORIAL ══ */
.artwrap{padding:0 0 20px}

.arthead{max-width:var(--col-wide);margin:0 auto;padding:62px 0 0}
.arthead .kicker{margin-bottom:22px}
.arthead .kicker b{color:var(--accent);font-weight:500}
.arthead .kicker span{color:var(--dim)}
.arthead h1{font-size:clamp(33px,5.1vw,63px);font-variation-settings:'wdth' 108;
  letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.arthead .deck{margin:26px 0 0;max-width:var(--col);font-size:23px;line-height:1.55;
  color:var(--mut);text-wrap:pretty}

/* Byline. There is no personal byline anywhere on this site — the work is
   published by the coalition, and this block is the only place that is said. */
.byline{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;
  margin:38px 0 0;padding:18px 0;border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.byline .who{color:var(--ink);letter-spacing:.14em}
.byline .sep{color:var(--dim)}
.byline .share{margin-left:auto;display:flex;gap:18px}
.byline .share button,.byline .share a{background:none;border:0;padding:0;cursor:pointer;
  font:inherit;color:var(--dim);letter-spacing:.12em;text-transform:uppercase}
.byline .share button:hover,.byline .share a:hover,
.byline .share button:focus-visible,.byline .share a:focus-visible{color:var(--accent)}

/* hero band — the one element allowed the full bleed width */
.hero{max-width:var(--col-bleed);margin:44px auto 0}
.hero .frame{border:1px solid var(--rule);background:var(--surface);aspect-ratio:40/21;overflow:hidden}
.hero .frame img{width:100%;height:100%;object-fit:cover}
.hero figcaption{margin-top:14px;max-width:760px}

/* ── prose ──────────────────────────────────────────────────────────────── */
.prose{max-width:var(--col-wide);margin:0 auto;padding:54px 0 0}
/* Text stays at the reading measure; it is the BOX that widened, so the
   column now starts where the headline starts instead of floating in. */
.prose>p,.prose>ul,.prose>ol,.prose>.standfirst,.prose>.close{max-width:var(--measure)}
.prose>h3,.prose>hr{max-width:var(--col)}
.prose>p{margin:0 0 27px;font-size:21px;line-height:1.7;color:var(--prose);text-wrap:pretty}
.prose>p.lead{font-size:23px;line-height:1.56;color:var(--ink);letter-spacing:-.011em;
  margin-bottom:32px}
.prose>p strong{color:var(--ink);font-weight:650}
.prose>p em{color:var(--ink);font-style:italic}
.prose a{border-bottom:1px solid var(--accent-soft);transition:border-color .15s}
.prose a:hover{border-bottom-color:var(--accent)}

/* Section heads carry a numbered mono label. The number is the reader's
   position in a long piece — it is the cheapest orientation device there is,
   and it costs no chrome. */
.prose>h2{max-width:var(--col-wide);font-size:clamp(25px,2.7vw,33px);
  font-variation-settings:'wdth' 104;letter-spacing:-.025em;
  margin:60px 0 18px;padding-top:26px;border-top:1px solid var(--rule)}
.prose>h2 .secno{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.2em;color:var(--accent);margin-bottom:14px;text-transform:uppercase}
.prose>h3{font-size:20.5px;font-variation-settings:'wdth' 102;margin:42px 0 12px;
  letter-spacing:-.015em}

.prose ul,.prose ol{margin:0 0 27px;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:30px;margin:0 0 13px;font-size:20px;line-height:1.66}
.prose ul>li::before{content:"";position:absolute;left:4px;top:.72em;width:7px;height:1px;
  background:var(--accent)}
.prose ol{counter-reset:li}
.prose ol>li{counter-increment:li}
.prose ol>li::before{content:counter(li,decimal-leading-zero);position:absolute;left:0;top:.16em;
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--accent);letter-spacing:.06em}

.prose hr{border:0;border-top:1px solid var(--rule);margin:52px 0}

/* ── breakout components ────────────────────────────────────────────────── */
/* pull quote */
.pull{margin:56px 0;border-left:3px solid var(--accent);padding:4px 0 4px 30px}
.pull p{margin:0;font-family:var(--display);font-weight:800;
  font-variation-settings:'wdth' 103;font-size:clamp(23px,3.1vw,33px);line-height:1.2;
  letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.pull .src{margin:16px 0 0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.pull cite{margin:16px 0 0;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;color:var(--dim);text-transform:uppercase;font-style:normal;display:block}

/* Document exhibit — bar, document, caption. The three-part shape is carried
   over from the campaign site so a reader who arrives from there recognises
   it: a mono reference bar, the document itself on paper, and a plain-English
   reading of what it shows. */
.exhibit{margin:52px 0;border:1px solid var(--rule);background:var(--surface);overflow:hidden}
.exhibit .bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  padding:16px 22px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.exhibit .no{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.exhibit .ref{font-family:var(--mono);font-size:10.5px;font-weight:400;line-height:1.7;
  letter-spacing:.05em;color:var(--dim);margin:0}
.exhibit .srclink{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
/* The external-link mark is a rotated U+2191. The brand's font subset carries
   no north-east arrow, and borrowing one from a fallback face put a different
   weight and a different x-height next to the label. */
.exhibit .srclink::after{content:"\2191";display:inline-block;transform:rotate(45deg);
  margin-left:7px;font-size:11px;line-height:0}
.exhibit .srclink:hover,.exhibit .srclink:focus-visible{color:var(--accent)}
.exhibit .scan{background:var(--paper);padding:20px 22px;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:#C9C4B4 transparent}
.exhibit .scan::-webkit-scrollbar{height:6px}
.exhibit .scan::-webkit-scrollbar-thumb{background:#C9C4B4}
.exhibit .scan img{width:100%}
.exhibit .read{padding:22px}
.exhibit .read h4{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.exhibit .read p{margin:0;font-size:18px;line-height:1.62;color:var(--mut);text-wrap:pretty}
/* margin:0 above means a second paragraph butts straight onto the first and the
   break reads as a rendering fault rather than a new thought. */
.exhibit .read p + p{margin-top:13px}
.exhibit .read p strong{color:var(--ink);font-weight:650}

/* figure / photograph */
figure{margin:52px 0}
figure .frame{border:1px solid var(--rule);background:var(--surface);overflow:hidden}
figcaption{margin-top:14px;font-family:var(--mono);font-size:11px;font-weight:400;
  line-height:1.75;letter-spacing:.04em;color:var(--dim);text-wrap:pretty}
figcaption b{color:var(--mut);font-weight:500}

/* Captions INSIDE a bordered container. .exhibit and .srcdoc are boxes with
   overflow:hidden whose .bar is padded 16px 22px, but the caption only inherited
   the generic figcaption rule, so its text ran flush against the left and right
   borders while the header above it sat inset — the note read as if it had
   fallen out of the box. Same gutter as the bar, a rule to separate it from the
   document, and the mobile gutter matches the bar's mobile padding. */
.exhibit figcaption,.srcdoc figcaption{margin-top:0;padding:16px 22px;
  border-top:1px solid var(--rule);background:var(--surface)}
@media (max-width:640px){
  .exhibit figcaption,.srcdoc figcaption{padding:13px 16px}
}


/* aside / editor's note */
.note{margin:48px 0;border-left:3px solid var(--rule-2);padding:2px 0 2px 26px}
.note h4{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin:0 0 10px}
.note p{margin:0 0 12px;font-size:17.5px;line-height:1.65;color:var(--mut)}
.note p:last-child{margin-bottom:0}

/* key-figure row — for the numbers an editorial turns on */
.figures{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);margin:50px 0}
.figures div{background:var(--surface);padding:24px 22px}
.figures .k{margin:0;font-family:var(--mono);font-size:31px;font-weight:600;letter-spacing:-.03em;
  line-height:1;color:var(--ink)}
.figures .k.o{color:var(--accent)}
.figures .v{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--dim)}

/* Anything wider than the reading column is centred on it, so the optical
   centre of the article never moves as the width changes.
   ORDER IS LOAD-BEARING: this rule sits AFTER every component above because
   each of them sets `margin` shorthand, which resets margin-left. Declared
   earlier, .wide silently lost and every exhibit hung off the left edge. */
.wide{width:min(var(--col-wide),calc(100vw - 56px));margin-left:50%;transform:translateX(-50%)}

/* ── footnotes ──────────────────────────────────────────────────────────── */
sup.fn{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;
  vertical-align:super;line-height:0}
sup.fn a{color:var(--accent);border-bottom:0;padding:0 1px}
.sources{max-width:var(--col-wide);margin:70px auto 0;padding-top:30px;
  border-top:1px solid var(--rule)}
.sources h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.sources ol{margin:0;padding:0;list-style:none;counter-reset:src;max-width:var(--col)}
/* The house sources format prints the full URL as the link text. Left to wrap
   normally a long gov.bc.ca path is one unbreakable token: 26 of them ran up to
   235px past the column on a 375px screen. Break them anywhere. The return
   arrow gets a little air so it reads as a control, not punctuation. */
.sources .ext{overflow-wrap:anywhere;word-break:break-word}
.sources .backref{margin-right:7px;text-decoration:none}
.sources .backref+.backref{margin-left:-3px}
.sources li{counter-increment:src;position:relative;padding:0 0 15px 42px;margin:0 0 15px;
  border-bottom:1px solid var(--rule);font-size:16.5px;line-height:1.62;color:var(--mut)}
.sources li:last-child{border-bottom:0}
.sources li::before{content:counter(src,decimal-leading-zero);position:absolute;left:0;top:.28em;
  font-family:var(--mono);font-size:11px;font-weight:500;color:var(--dim);letter-spacing:.06em}
.sources li:target{background:var(--accent-soft)}
.sources .back{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);
  white-space:nowrap}
.sources .back::before{content:"\2191";margin-right:5px;display:inline-block}

/* ── end of article ─────────────────────────────────────────────────────── */
/* The end of an editorial answers one question — what now — and does not
   restate the publisher or the date. Both are in the byline at the top. */
.artend{max-width:var(--col-wide);margin:62px auto 0;padding-top:30px;
  border-top:3px solid var(--accent)}
.artend .back{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.artend .stamp{margin:20px 0 0;font-size:16px;line-height:1.6;color:var(--dim)}
.artend .stamp a{border-bottom:1px solid var(--accent-soft)}
.artend .stamp a:hover{border-bottom-color:var(--accent)}
.artend .back i{width:26px;height:1px;background:var(--accent);display:block;
  transition:width .2s ease}
.artend .back:hover i{width:44px}

/* ══ 7. FOOTER ══ */
.foot{margin-top:56px;border-top:1px solid var(--rule);background:var(--bg)}
.foot .wrap{padding-top:34px;padding-bottom:40px}
/* Any footer lockup still in the markup is suppressed here rather than being
   chased through three files — see the note where the hero lockup was cut. */
.foot .flock{display:none}
.footrow{display:flex;flex-wrap:wrap;gap:18px 34px;align-items:center;margin-top:0;
  padding-top:0;border-top:0;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}
.footrow a{color:var(--dim);border-bottom:1px solid var(--rule-2);padding-bottom:2px}
.footrow a:hover,.footrow a:focus-visible{color:var(--accent);border-color:var(--accent)}
.footrow .est{margin-left:auto;color:var(--dim);letter-spacing:.16em}

/* ══ 8. RESPONSIVE ══
   The whole design exists to be read on a phone — that is where a shared
   link is opened. Everything below is the phone layout; the desktop one is
   the variation. */
@media (max-width:1080px){
  :root{--col-wide:100%}
  .wide{width:100%;margin-left:0;transform:none}
}
@media (max-width:860px){
  /* The front block goes back to a stack: every child returns to auto
     placement, so the source order -- title, rule, standfirst, meta -- is the
     rendered order.
     Each child is named individually rather than caught with .front>*, which
     is a WEAKER selector (0,1,0) than the .front .standfirst (0,2,0) that
     placed it. A media query does not raise specificity, so the one-column
     rule silently lost and the phone kept rendering the desktop two-column
     split -- the title in a half-width column beside a 20-character measure. */
  .front{grid-template-columns:1fr;column-gap:0}
  .front h1,.front .standfirst,.front .frontmeta{
    grid-column:1;grid-row:auto}
  .front .standfirst{max-width:58ch;margin-top:30px}
  .frontmeta a:last-child{margin-left:0}

  .entry .grid{grid-template-columns:1fr;gap:20px}
  .entry.compact .grid{grid-template-columns:1fr}
  .entry .band{order:-1;aspect-ratio:40/21}
  .entry .rail{padding-top:0;display:flex;flex-wrap:wrap;gap:0 14px;align-items:baseline;
    line-height:1.7}
  .entry .rail .cat{margin-bottom:0}
  .figures{grid-template-columns:1fr}
}
@media (max-width:720px){
  body{font-size:18px}
  .wrap{padding:0 20px}
  .masthead .wrap{height:58px;gap:12px}
  .mnav{gap:16px}
  .mnav a{font-size:11px;letter-spacing:.1em}

  .front{padding:44px 0 0}
  .front .eyebrow{margin-bottom:20px;font-size:10px;letter-spacing:.16em}
  .front .standfirst{margin-top:34px;font-size:18.5px;line-height:1.6}
  .frontmeta{margin-top:28px;gap:10px 20px;font-size:9.5px;letter-spacing:.1em}
  .files{margin-top:52px}

  .entry{padding:26px 0}
  .entry .deck{font-size:17px}

  .arthead{padding-top:40px}
  .arthead .deck{font-size:19px;margin-top:20px}
  .byline{margin-top:28px;padding:16px 0;font-size:10px;letter-spacing:.1em;gap:8px 16px}
  .byline .share{margin-left:0;width:100%;gap:22px;padding-top:4px}
  .hero{margin-top:30px}
  .hero .frame{aspect-ratio:40/21}

  .prose{padding-top:36px}
  .prose>p{font-size:18px;line-height:1.68;margin-bottom:23px}
  .prose>p.lead{font-size:20.5px;line-height:1.5}
  .prose>h2{margin:44px 0 14px;padding-top:22px}
  .prose>h3{margin:32px 0 10px}
  .prose li{font-size:17.5px}

  .pull{margin:40px 0;padding-left:20px;border-left-width:3px}
  .pull .src{font-size:10px}

  .exhibit{margin:38px 0}
  .exhibit .bar{padding:13px 16px;gap:6px 12px}
  .exhibit .srclink{margin-left:0}
  .exhibit .scan{padding:12px}
  /* A document is unreadable if it is squeezed to 335px. Hold it at a legible
     width and let the reader pan — the bar says so, so it is not a surprise. */
  .exhibit .scan img{min-width:520px;width:520px;max-width:none}
  .exhibit .bar::after{content:"swipe the document \00BB";width:100%;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--dim)}
  .exhibit .read{padding:18px 16px}
  .exhibit .read p{font-size:17px}

  figure{margin:38px 0}
  .note{margin:36px 0;padding-left:18px}
  .sources{margin-top:52px}
  .sources li{font-size:15px;padding-left:36px}
  .artend{margin-top:50px}

  .foot{margin-top:64px}
  .foot .wrap{padding-top:28px;padding-bottom:34px}
  .footrow{gap:12px 20px;font-size:9.5px;letter-spacing:.1em}
  .footrow .est{margin-left:0;width:100%}
}
@media (max-width:400px){
  .mnav{gap:13px}
  .mnav a{font-size:10px;letter-spacing:.07em}
}

/* ══ 9. PRINT ══
   Journalists print. The page should come out as a document, not as a
   screenshot of a dark website. */
@media print{
  .masthead,.byline .share,.artend .back,.foot,.skip{display:none!important}
  html,body{background:#fff;color:#111;font-size:11pt}
  h1,h2,h3,h4,.prose>p strong{color:#000}
  .prose,.arthead,.sources,.artend{max-width:none}
  .exhibit,.note,figure .frame{border:1px solid #bbb;background:#fff;break-inside:avoid}
  .exhibit .bar{background:#f3f3f3}
  .exhibit .no,.exhibit .read h4,.kicker,.prose>h2 .secno{color:#111}
  .exhibit .ref,figcaption,.sources li{color:#444}
  .pull{border-left:3px solid #111}
  .pull p,.prose>p,.exhibit .read p,.note p{color:#111}
  a{color:#111;text-decoration:underline}
  .prose a::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
}

.entry .shot{display:block;margin:0 0 18px;overflow:hidden;border:1px solid var(--rule);border-radius:2px}
.entry .shot img{display:block;width:100%;height:auto;aspect-ratio:40/21}  /* the cards are 1200x630 = 40/21. 16/9 + cover centre-cropped 40px off
     each side and took the orange spine with it -- the one element meant
     to survive at thumbnail size. */

/* One layout: meta, image, then text. Stacked at every width -- it does
   not become side-by-side on a wide screen. */


/* The listing is a card grid, not a stack of billboards. A 1200px column with
   one full-width photograph per entry means one editorial per screen; nobody
   scrolls past the first. Three cards across fits the whole list above the
   fold and makes the images read as thumbnails, which is what they are. */
.files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 36px;
  align-items:stretch;margin-top:26px}
.files .files-hd{grid-column:1/-1}
.files .entry{display:flex;flex-direction:column;height:100%;padding:0;border:0}
.files .entry + .entry{border-top:0}
.files .entry h3{font-size:25px;line-height:1.18;margin:0}
.files .entry .deck{font-size:16.5px;line-height:1.58;margin:12px 0 0}
.files .entry .rail{margin:0 0 10px}
.files .entry .more{display:inline-flex;margin-top:12px;font-size:11px}

@media (max-width:760px){.files{grid-template-columns:1fr;gap:34px}}

/* Even columns. Titles and decks vary in length, so the cards are equal-height
   flex columns with the deck taking the slack -- every READ THIS EDITORIAL
   lands on the same baseline instead of floating wherever the prose ended. */
.files .entry .grid{display:flex;flex-direction:column;flex:1 1 auto}
.files .entry .grid > div:last-child{display:flex;flex-direction:column;flex:1 1 auto}
/* No min-height on the headline. It was reserving two lines so the decks in a
   row started at the same y, but a one-line headline then left a visible hole
   beneath it. The read-lines already align without it: .deck absorbs the
   remaining column height, so .more is pushed to the bottom of every card
   regardless of how long the headline runs. */
.files .entry .deck{flex:1 1 auto}
.files .entry .more{margin-top:16px;align-self:flex-start}

/* ══ 10. THE SHARE CARD DECK (card G-10) ══
   The end of every editorial carries that piece's own social slides — the six
   1080x1350 images in assets/social/<slug>/ — plus the controls to get them
   somewhere useful.

   WHAT THIS COMPONENT CANNOT DO, STATED ONCE SO NOBODY RE-LITIGATES IT:
   a web page cannot post a multi-image carousel to Instagram or Facebook.
   Instagram has no web share intent at all — a carousel needs the Graph API,
   a Business account, a long-lived token and a server. Facebook's sharer.php
   takes a URL and renders that page's single og:image, never a set. So there
   is deliberately no button here that claims to post. The primary control is
   navigator.share({files}), which on iOS Safari and Android Chrome opens the
   real share sheet with all six images attached and both apps as targets; it
   is feature-detected and stays HIDDEN where it would not work, rather than
   being shown and failing. Download-all and copy-caption are the desktop path.

   Progressive enhancement is the whole design: the track is a native
   scroll-snap overflow container, so it swipes on touch with no script at all,
   and every slide carries its own <a download>. The three buttons ship
   `hidden` and are unhidden one at a time by the script, each only if its own
   capability probe passed — a dead button is worse than no button. */
.cards{max-width:var(--col-wide);margin:66px auto 0;padding-top:30px;
  border-top:1px solid var(--rule)}
.cards h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.cards .lede{margin:0 0 22px;max-width:var(--col);font-size:16.5px;line-height:1.6;
  color:var(--mut)}
.cards .lede b{color:var(--ink);font-weight:600}

/* ── the track ───────────────────────────────────────────────────────────
   overflow-x lives HERE and nowhere above it, so the deck scrolls and the
   PAGE never does. --peek is what makes a touch user believe there is more:
   at one slide per view the next one is visibly cut off at the right edge. */
.deck{position:relative;--gap:14px}
/* The scroll container is a separate element from the list so that <ul>/<li>
   keeps its list semantics: a role="region" needed for the focusable scroller
   would otherwise have overwritten it. */
.deck .track{overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:thin;scrollbar-color:var(--rule-2) transparent}
.deck .track::-webkit-scrollbar{height:6px}
.deck .track::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:3px}
.deck .track::-webkit-scrollbar-track{background:transparent}
.deck .track:focus-visible{outline:2px solid var(--accent);outline-offset:6px}
.deck .slides{display:flex;gap:var(--gap);list-style:none;margin:0;padding:0 0 2px}
.deck .slides>li{flex:0 0 calc((100% - var(--gap)*2)/3);scroll-snap-align:start;margin:0}
.deck figure{margin:0}
.deck img{display:block;width:100%;height:auto;aspect-ratio:1080/1350;
  border:1px solid var(--rule);border-radius:2px;background:var(--surface)}
.deck figcaption{margin:8px 0 0;font-family:var(--mono);font-size:10px;
  letter-spacing:.12em;text-transform:uppercase}
.deck figcaption a{color:var(--dim);text-decoration:none}
.deck figcaption a:hover,.deck figcaption a:focus-visible{color:var(--accent)}

/* ── arrows. Pointer-only: a touch user swipes, and a button they cannot
      benefit from is just something in the way of the image. ─────────────── */
.deck .nav[hidden],.deck .pos[hidden]{display:none!important}

.deck .nav{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:760px){
  .deck .nav{display:grid;place-items:center;position:absolute;top:calc(50% - 22px);
    width:44px;height:44px;transform:translateY(-50%);z-index:2;
    background:rgba(11,11,10,.86);border:1px solid var(--rule-2);border-radius:50%;
    color:var(--ink);cursor:pointer;padding:0;
    backdrop-filter:saturate(140%) blur(6px)}
  .deck .nav:hover{border-color:var(--accent);color:var(--accent)}
  .deck .nav:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  .deck .nav[disabled]{opacity:.28;cursor:default;border-color:var(--rule)}
  .deck .nav[disabled]:hover{color:var(--ink)}
  .deck .prev{left:-8px}
  .deck .next{right:-8px}
  .deck .nav i{display:block;width:9px;height:9px;border-top:1.6px solid currentColor;
    border-right:1.6px solid currentColor}
  .deck .prev i{transform:rotate(-135deg);margin-left:3px}
  .deck .next i{transform:rotate(45deg);margin-right:3px}
}

/* ── position. Bars rather than dots: same mono-tick vocabulary as the
      reading-progress hairline on the masthead. ──────────────────────────── */
.deck .pos{display:flex;align-items:center;gap:14px;margin:16px 0 0}
.deck .pos .bars{display:flex;gap:5px;flex:0 0 auto}
.deck .pos .bars b{display:block;width:22px;height:3px;background:var(--rule-2);
  border-radius:2px;transition:background .18s}
.deck .pos .bars b.on{background:var(--accent)}
.deck .pos .count{font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--dim)}

/* ── the controls ────────────────────────────────────────────────────────
   Every control is named for what it does, because the alternative was tested
   on a Mac and failed: a generic "share" opened the OS share sheet — AirDrop,
   Notes, Messages — with no Facebook and no Instagram in it. It looked like a
   social share and was not one.

   So: the four platform controls are plain <a> elements carrying the ARTICLE
   URL to that platform's own share endpoint. They share the LINK, which
   unfurls with the editorial's og:image; they cannot carry the slides, and
   their labels do not suggest they can. Being anchors, they also work with
   JavaScript off. The native files path keeps its place but only where it is
   genuinely one tap — see the script. Instagram has no web endpoint at all,
   so its controls are Download slides and Copy caption, named as such. */
/* [hidden] must beat the display below. Setting display:inline-flex on these
   controls silently defeated the hidden attribute once already: with
   JavaScript off, all three script-only buttons rendered and did nothing —
   the precise failure this component exists to avoid. Same guard as .nav/.pos. */
.cardact button[hidden],.cardact a[hidden]{display:none!important}

.cardact{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.cardact button,.cardact a{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding:13px 18px;border-radius:2px;cursor:pointer;
  background:transparent;border:1px solid var(--rule-2);color:var(--ink);
  transition:border-color .16s,color .16s,background .16s}
.cardact button:hover,.cardact a:hover{border-color:var(--accent);color:var(--accent)}
.cardact button:focus-visible,.cardact a:focus-visible{outline:2px solid var(--accent);
  outline-offset:2px}
.cardact button[disabled]{opacity:.5;cursor:default}
.cardact .go{background:var(--accent);border-color:var(--accent);color:#0B0B0A}
.cardact .go:hover{background:#FF4A0F;border-color:#FF4A0F;color:#0B0B0A}
.cards .fine{margin:16px 0 0;max-width:var(--col);font-size:14.5px;line-height:1.62;
  color:var(--dim)}
.cards .fine b{color:var(--mut);font-weight:600}
.cards .note{margin:12px 0 0;max-width:var(--col);font-size:14.5px;line-height:1.6;
  color:var(--mut);border-left:2px solid var(--accent);padding-left:12px}

/* ── the caption. Open markup, not a script-built string: with JavaScript off
      it is still on the page and still selectable, which is the whole point of
      a fallback. pre-wrap means the source below must stay flush-left. ────── */
.capbox{margin:22px 0 0;max-width:var(--col);border:1px solid var(--rule);
  border-left:3px solid var(--accent);border-radius:2px;background:var(--surface)}
.capbox>summary{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  padding:13px 16px;cursor:pointer;list-style:none}
.capbox>summary::-webkit-details-marker{display:none}
.capbox>summary::before{content:"+";display:inline-block;width:14px;color:var(--accent)}
.capbox[open]>summary::before{content:"\2212"}
.capbox>summary:hover{color:var(--ink)}
.capbox>summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.capbox .captext{margin:0;padding:0 16px 16px;white-space:pre-wrap;
  font-size:15px;line-height:1.62;color:var(--prose);
  overflow-wrap:break-word}

@media (max-width:1000px){
  .deck .slides>li{flex:0 0 calc((100% - var(--gap))/2)}
}
@media (max-width:620px){
  .cards{margin-top:48px}
  /* One slide, with the next one cut off at the edge — the cut edge IS the
     affordance. 86% leaves 14% of the following slide showing. */
  .deck .slides>li{flex:0 0 86%}
  .cardact{gap:8px}
  .cardact button,.cardact a{flex:1 1 100%;text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .deck .track{scroll-behavior:auto}
  .deck .pos .bars b{transition:none}
}

@media print{
  .cards{display:none!important}
}

/* Icon-only share. The words were doing no work -- a Facebook glyph is read
   faster than "Share on Facebook" and the row stops dominating the deck.
   Accessible name lives on aria-label, so nothing is lost to a screen reader. */
.cardact .ic{width:38px;height:38px;padding:0;flex:0 0 auto;border-radius:2px}
.cardact .ic svg{display:block}
.cardact button:not(.ic){font-size:11px;padding:0 12px;height:38px}

/* Instagram leads the row: it is the platform these slides are made for, even
   though it is the one that cannot take a web post. The button does the only
   thing Instagram allows -- the six images, via the native sheet on a phone,
   a download on desktop. */
.cardact .ig{background:var(--accent);border-color:var(--accent);color:#0B0B0A}
.cardact .ig:hover{background:#FF4A0F;border-color:#FF4A0F;color:#0B0B0A}
.cardact .ic[hidden]{display:none!important}

/* Caption paragraphs need real separation — it is pasted into Instagram
   as written, and a wall of text is what people scroll past. */
.captext p{margin:0 0 1.05em}
.captext p:last-child{margin-bottom:0}

/* ── RP-01 · article standfirst, word-count tally, closing line ─────────────
   The tally's whole argument is the zeros, so the accent sits on the absent
   terms, not the present ones. Anything else buries the finding. */
.prose .standfirst{margin:0 0 32px;padding-left:20px;border-left:3px solid var(--accent);
  font-size:20.5px;line-height:1.6;color:var(--ink);text-wrap:pretty}
.prose .close{margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--rule);
  font-size:19px;line-height:1.62;color:var(--ink)}
.prose .close strong{color:var(--accent)}
.tally{width:100%;border-collapse:collapse;margin-top:4px;margin-bottom:22px;font-size:15.5px}  /* longhand: the margin shorthand resets .wide's margin-left:50% and throws the table off-page */
.tally th{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);text-align:left;padding:0 0 11px;
  border-bottom:1px solid var(--rule)}
.tally th:last-child{text-align:right}
.tally td{padding:9px 2px;border-bottom:1px solid var(--rule);color:var(--mut)}
.tally td.n{width:6em;text-align:right;font-family:var(--mono);font-weight:600;
  color:var(--mut)}
.tally tr.zero td{color:var(--ink);font-weight:500}
.tally tr.zero td.n{color:var(--accent);font-size:17px}
.tally tr.zero td:first-child{box-shadow:inset 3px 0 0 var(--accent);padding-left:12px}
.tally tr:last-child td{border-bottom:0}
@media(max-width:560px){.tally{font-size:14px}.tally td.n{width:4.5em}}

/* ── RP-01 · performance charts ────────────────────────────────────────────
   Inline SVG so the bars stay sharp at any width and pick up the theme
   tokens directly. The accent is reserved for the figures under this
   minister; reference values stay neutral. */
/* NEVER use the margin shorthand on a .wide component: it resets the
   margin-left:50% that .wide pairs with translateX(-50%), and the element
   is then dragged half its own width off the left of the page. */
.chartbox{margin-top:34px;margin-bottom:30px}
.chartbox h4{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent);margin:0 0 4px}
.chartbox .cap{margin:0 0 16px;font-size:16.5px;line-height:1.55;color:var(--mut);
  max-width:var(--measure)}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .cl{font-family:var(--mono);font-size:16px;fill:var(--mut)}
.chart .cv{font-family:var(--mono);font-size:19px;font-weight:600}
.chartbox .src{margin:12px 0 0;font-family:var(--mono);font-size:12px;line-height:1.6;
  letter-spacing:.05em;color:var(--dim)}
@media(max-width:620px){.chart .cl{font-size:19px}.chart .cv{font-size:24px}}
/* OAG-01 chart shapes: paired (request vs allocation), stacked (what the ask
   was for), funnel (the 6,640 crossing structures). .ck is a column key, .cs a
   label sitting inside a filled segment, .cg a legend/footnote row, .ca the
   accent tint shared by the allocation series. */
.chart .ck{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.17em;
  fill:var(--dim);text-transform:uppercase}
.chart .cs{font-family:var(--mono);font-size:17px;font-weight:600;fill:var(--ground)}
.chart .cg{font-family:var(--mono);font-size:13.5px;fill:var(--dim)}
.chart .ca{fill:var(--accent)}
@media(max-width:620px){
  .chart .ck{font-size:14px}
  .chart .cs{font-size:20px}
  .chart .cg{font-size:16px}
}

/* ── RP-01 · article hero portrait ─────────────────────────────────────────
   The source is a 480px official portrait, so it is shown at 420px and NOT
   stretched across the band — an upscaled face on an accountability page
   looks like a cheap edit. The band carries the weight; the photograph stays
   at a size it can hold.
   NEVER use the margin shorthand here: it resets .wide's margin-left:50% and
   the block gets dragged half its width off the page. */
.herofig{margin-top:38px;margin-bottom:6px;background:var(--surface);
  border:1px solid var(--rule);border-left:3px solid var(--accent);
  display:flex;align-items:stretch;gap:0;overflow:hidden}
.herofig .shot{position:relative;flex:0 0 420px;width:420px;aspect-ratio:1;background:#000}
.herofig .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 16%;
  filter:grayscale(1) contrast(1.12) brightness(.93);display:block}
.herofig .shot .tone{position:absolute;inset:0;background:var(--accent);
  mix-blend-mode:color;opacity:.28}
.herofig .shot .fade{position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(11,11,10,0) 55%,rgba(11,11,10,.92) 100%)}
.herofig .meta{flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:34px 38px}
.herofig .meta .nm{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,44px);
  line-height:1.02;letter-spacing:-.022em;color:var(--ink)}
.herofig .meta .ti{margin-top:12px;font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.17em;color:var(--accent);line-height:1.7}
.herofig .meta .cr{margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11.5px;line-height:1.65;color:var(--dim);max-width:46ch}
@media(max-width:720px){
  .herofig{display:block}
  .herofig .shot{width:100%;flex:none;aspect-ratio:4/3}
  .herofig .shot .fade{background:linear-gradient(to top,rgba(11,11,10,.9) 0%,rgba(11,11,10,0) 45%)}
  .herofig .meta{padding:24px 22px 28px}
}

/* ── RP-01 · the criticism dossier ─────────────────────────────────────────
   A dated record of who called this failing and when. It was a plain <ul>,
   which buried the single most damaging fact about it — that the entries come
   from five different directions. The rail, the date chips and the source tags
   carry that; the quotes get room to be read.
   No margin shorthand: it sits inside .wide. */
.dossier{margin-top:34px;margin-bottom:34px;position:relative;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.dossier .row{display:grid;grid-template-columns:184px 1fr;gap:0 30px;
  padding:26px 0;border-bottom:1px solid var(--rule);position:relative}
.dossier .row:last-child{border-bottom:0}
.dossier .when{position:relative;padding-left:22px}
.dossier .when::before{content:"";position:absolute;left:0;top:.42em;
  width:9px;height:9px;background:var(--accent);border-radius:50%}
.dossier .when::after{content:"";position:absolute;left:4px;top:1.5em;bottom:-26px;
  width:1px;background:var(--rule-2)}
.dossier .row:last-child .when::after{display:none}
.dossier .d{display:block;font-family:var(--mono);font-size:12.5px;font-weight:600;
  letter-spacing:.11em;color:var(--accent);line-height:1.5}
.dossier .tag{display:block;margin-top:9px;font-family:var(--mono);font-size:10.5px;
  font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--dim);
  line-height:1.6}
.dossier .what{min-width:0}
.dossier .what .who{display:block;font-family:var(--display);font-weight:800;
  font-size:20.5px;line-height:1.28;letter-spacing:-.014em;color:var(--ink)}
.dossier .what p{margin:10px 0 0;font-size:18px;line-height:1.62;color:var(--prose)}
.dossier .what q{quotes:"\201C" "\201D";font-style:italic;color:var(--ink)}
.dossier .what .said{margin-top:13px;padding-left:16px;border-left:2px solid var(--accent);
  font-size:18.5px;line-height:1.55;color:var(--ink);font-style:italic}
@media(max-width:720px){
  .dossier .row{grid-template-columns:1fr;gap:12px}
  .dossier .when::after{display:none}
  .dossier .what .who{font-size:19px}
}

/* ── RP-01 · article photography ───────────────────────────────────────────
   Real photographs of the subject, credited in the caption. No margin
   shorthand anywhere in here — it resets .wide's margin-left. */
.rphero{margin-top:36px;margin-bottom:10px;position:relative;overflow:hidden;
  border-left:3px solid var(--accent);background:#000}
.rphero img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover;
  object-position:50% 28%;filter:grayscale(.55) contrast(1.06) brightness(.86)}
.rphero .band{position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,11,10,.94) 0%,rgba(11,11,10,.35) 42%,rgba(11,11,10,0) 72%)}
.rphero .cap{position:absolute;left:30px;right:30px;bottom:24px}
.rphero .cap .nm{font-family:var(--display);font-weight:900;
  font-size:clamp(30px,4.3vw,54px);line-height:1;letter-spacing:-.025em;color:var(--ink)}
.rphero .cap .ti{margin-top:11px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.17em;color:var(--accent)}
.rphoto{margin-top:34px;margin-bottom:34px}
.rphoto img{width:100%;height:auto;display:block;border-left:3px solid var(--accent)}
.rphoto figcaption{margin-top:12px;font-family:var(--mono);font-size:12px;line-height:1.65;
  color:var(--dim)}
.rphoto figcaption b{color:var(--mut);font-weight:600}
.rprow{margin-top:34px;margin-bottom:34px;display:grid;grid-template-columns:1fr 1fr;
  gap:18px;align-items:start}
/* figure must be a flex column and the image must NOT be height:100%.
   With height:100% the image filled the grid row and the caption was laid out
   past the bottom of its own figure, overlapping the paragraph beneath it. */
.rprow figure{margin:0;display:flex;flex-direction:column;min-width:0}
.rprow img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;display:block;
  border-left:3px solid var(--accent)}
.rprow figcaption{margin-top:10px;font-family:var(--mono);font-size:11.5px;line-height:1.6;
  color:var(--dim)}
@media(max-width:620px){.rprow{grid-template-columns:1fr}.rphero .cap{left:18px;right:18px;bottom:16px}}

/* ── RP-01 · his own experience record ────────────────────────────────────
   Structured the way he publishes it himself: employer, total tenure, then the
   roles nested underneath with their durations. The durations are the argument
   — sixteen months of anything forestry, and seven months outside politics in
   a working life — so they get their own column and are never truncated.
   Longhand margins only: a shorthand resets .wide's margin-left. */
.cvrec{margin-top:24px;margin-bottom:26px}
.cvrec .org{margin-top:22px;padding-top:14px;border-top:1px solid var(--rule)}
.cvrec .org:first-child{margin-top:0;padding-top:0;border-top:0}
.cvrec .org>.h{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
.cvrec .org>.h b{font-size:17.5px;font-weight:650;color:var(--ink);letter-spacing:-.005em}
.cvrec .org>.h span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dim)}
.cvrec .role{display:grid;grid-template-columns:1fr auto;gap:2px 20px;
  margin-top:12px;padding-left:20px;position:relative}
.cvrec .role::before{content:"";position:absolute;left:4px;top:.55em;
  width:7px;height:7px;border-radius:50%;background:var(--rule-2)}
.cvrec .role .t{font-size:16.5px;line-height:1.45;color:var(--mut)}
.cvrec .role .w{font-family:var(--mono);font-size:12px;letter-spacing:.05em;color:var(--dim);
  white-space:nowrap;text-align:right;padding-top:3px}
.cvrec .role.f::before{background:var(--accent)}
.cvrec .role.f .t{color:var(--accent);font-weight:600}
.cvrec .role.f .w{color:var(--accent)}
.cvrec .role .n{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--dim)}
@media(max-width:620px){
  .cvrec .role{grid-template-columns:1fr;gap:3px}
  .cvrec .role .w{text-align:left;padding-top:0}
}

/* ── RP-01 · promise / outcome ledger, drawn rather than tabulated ─────── */
.verdictrows{margin-top:26px;margin-bottom:8px}
.vrow{display:grid;grid-template-columns:1fr 46px 1fr;gap:0 20px;align-items:center;
  padding:20px 0;border-bottom:1px solid var(--rule)}
.vrow:last-child{border-bottom:0}
.vrow .said{font-size:18px;line-height:1.5;color:var(--mut);font-style:italic}
.vrow .said b{font-style:normal;color:var(--ink);font-weight:600}
.vrow .x{justify-self:center;width:34px;height:34px;border-radius:50%;
  border:2px solid var(--accent);position:relative}
.vrow .x::before,.vrow .x::after{content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;background:var(--accent);transform-origin:center}
.vrow .x::before{transform:translate(-50%,-50%) rotate(45deg)}
.vrow .x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.vrow .got{font-size:18px;line-height:1.5;color:var(--ink);font-weight:600}
.vrow .got em{font-style:normal;color:var(--accent)}
@media(max-width:720px){
  .vrow{grid-template-columns:1fr;gap:10px;padding:18px 0}
  .vrow .x{justify-self:start;width:26px;height:26px}
  .vrow .x::before,.vrow .x::after{width:12px}
}


/* ── RP-01 QA · the deck arrows were painted over the card art ─────────────
   At 1280 the prev button spanned x67-111 while the first visible card began
   at x75 — 36px of artwork covered, including the first letter of a headline.
   Pull them outside the track. */
/* The card row is --col-wide (1130px). A 44px button needs ~54px of gutter to
   sit clear of it, so the buttons only fit OUTSIDE the cards once the viewport
   is at least 1130 + 108 + 56 = 1294px. Below that they are hidden rather than
   floated over the artwork: the track is a scroll-snap container that swipes,
   scrolls and takes arrow keys, so nothing becomes unreachable. */
@media (min-width:1300px){
  .deck .nav.prev{left:-54px}
  .deck .nav.next{right:-54px}
}
@media (max-width:1299px){
  .deck .nav{display:none!important}
}

/* QA · a lone separator could wrap to the end of a byline line, stranding
   150px of space after it at 390px. Hide it where the byline wraps. */
@media(max-width:620px){
  .byline .sep{display:none}
}

/* QA · at <=620px the label size was bumped inside a FIXED 350-unit gutter,
   leaving the longest label 18 units of clearance. The bar is painted after
   the text, so a collision would silently overpaint it. Keep the desktop size. */
@media(max-width:620px){
  .chart .cl{font-size:16px}
}


/* ── RP-01 · a scan that must never be upscaled ────────────────────────────
   The LinkedIn capture is 668px wide natively. `.exhibit .scan img{width:100%}`
   was stretching it to ~1085px inside the exhibit — a 1.6x upscale, and it
   looked exactly as soft as that sounds. Show it at its own size, centred, and
   let it shrink on small screens but never grow. */
.exhibit .scan.native{display:flex;justify-content:center;padding:26px 20px}
.exhibit .scan.native img{width:auto;max-width:min(100%,668px);height:auto;
  image-rendering:auto;box-shadow:0 1px 0 rgba(0,0,0,.25)}
@media(max-width:620px){
  .exhibit .scan.native{padding:14px 10px}
  .exhibit .scan.native img{min-width:0;width:auto;max-width:100%}
}


/* ── OAG-01: recommendation status table ─────────────────────────────────
   Nine rows, each a recommendation and whether the ministry has reported it
   complete. Distinct from .vrow, which is the said/happened shape. Margin is
   longhand: the shorthand resets .wide's margin-left:50% and throws a
   full-bleed block 565px off the left edge. */
.statuslist{margin-top:34px;margin-bottom:32px;border-top:1px solid var(--rule)}
.srow{display:grid;grid-template-columns:44px 1fr 168px;gap:0 18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid var(--rule)}
.srow .sn{font-family:var(--mono);font-size:13px;color:var(--dim);margin:0}
.srow .st{font-size:17.5px;line-height:1.52;color:var(--prose);margin:0}
.srow .st b{color:var(--bone);font-weight:600}
.srow .ss{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  text-align:right;font-weight:600;margin:0}
.srow .ss.done{color:var(--dim)}
.srow .ss.open{color:var(--accent)}
@media(max-width:620px){
  .srow{grid-template-columns:34px 1fr;gap:0 12px;padding:14px 0}
  .srow .st{font-size:18px}
  .srow .ss{grid-column:2;text-align:left;margin-top:7px}
}


/* ── Scrollable source document ──────────────────────────────────────────
   The whole primary source, page by page, inside the article. The reader
   should not have to take our word for a page number: the page is here.
   Pages are lazy so only what is scrolled into view is fetched.
   Margin is longhand — the shorthand resets .wide's margin-left:50%. */
.srcdoc{margin-top:52px;margin-bottom:52px;border:1px solid var(--rule);
  background:var(--surface);overflow:hidden}
.srcdoc .bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;
  padding:16px 22px;border-bottom:1px solid var(--rule);background:var(--surface-2)}
.srcdoc .no{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);white-space:nowrap}
.srcdoc .ref{font-family:var(--mono);font-size:10.5px;line-height:1.7;letter-spacing:.05em;
  color:var(--dim);margin:0;flex:1 1 320px}
.srcdoc .srclink{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--rule-2);
  padding-bottom:2px;white-space:nowrap}
.srcdoc .pages{max-height:min(76vh,760px);overflow-y:auto;overscroll-behavior:contain;
  background:#141311;padding:16px;scrollbar-width:thin;
  scrollbar-color:var(--rule-2) transparent}
.srcdoc .pages::-webkit-scrollbar{width:10px}
.srcdoc .pages::-webkit-scrollbar-thumb{background:var(--rule-2);border-radius:5px}
.srcdoc .pages img{display:block;width:100%;height:auto;margin:0 0 14px;
  border:1px solid var(--rule);background:#fff}
.srcdoc .pages img:last-child{margin-bottom:0}
.srcdoc .foot{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  padding:13px 22px;border-top:1px solid var(--rule);background:var(--surface-2);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--dim)}
.srcdoc .foot b{color:var(--bone);font-weight:600}
.srcdoc .foot a{color:var(--accent);border-bottom:1px solid var(--rule-2);padding-bottom:1px}
@media(max-width:620px){
  .srcdoc .pages{max-height:62vh;padding:10px}
  .srcdoc .ref{font-size:11.5px}
  .srcdoc .foot{font-size:12px}
}


/* ── CB-01: the reasons ledger ───────────────────────────────────────────
   One block per reason the ministry has given: who said it, what they said,
   and what in the record answers it. Margin longhand — the shorthand resets
   .wide's margin-left:50%. */
.ledger{margin-top:36px;margin-bottom:36px}
.lrow{border-top:1px solid var(--rule);padding:22px 0 20px}
.lrow:last-child{border-bottom:1px solid var(--rule)}
.lwho{margin:0 0 12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);line-height:1.6}
.lwho b{color:var(--accent);font-weight:600}
.lwho span{display:block;margin-top:4px;letter-spacing:.06em;text-transform:none;
  font-size:11.5px;color:var(--dim)}
.lsaid{margin:0 0 14px;font-size:19.5px;line-height:1.5;color:var(--bone);
  border-left:3px solid var(--rule-2);padding-left:18px}
.lkill{margin:0;font-size:16.5px;line-height:1.6;color:var(--prose);padding-left:21px}
.lkill span{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:7px}
.lkill b{color:var(--bone);font-weight:600}
@media(max-width:620px){
  .lsaid{font-size:20px;padding-left:14px}
  .lkill{font-size:17.5px;padding-left:17px}
}

/* ── CB-01: two-column comparison (one district, two roads) ──────────── */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:34px;margin-bottom:34px;
  border:1px solid var(--rule)}
.vs>div{padding:22px}
.vs>div+div{border-left:1px solid var(--rule)}
.vs h5{margin:0 0 4px;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--bone)}
.vs .sub{margin:0 0 16px;font-family:var(--mono);font-size:11px;color:var(--dim);
  letter-spacing:.05em}
.vs ul{margin:0;padding:0;list-style:none}
.vs li{font-size:16px;line-height:1.5;color:var(--prose);padding:8px 0 8px 26px;
  position:relative;border-top:1px solid var(--rule)}
.vs li:first-child{border-top:0}
.vs li::before{content:"";position:absolute;left:0;top:14px;width:12px;height:12px}
.vs .yes li::before{background:var(--rule-2)}
.vs .no li{color:var(--mut)}
.vs .no li::before{background:var(--accent)}
@media(max-width:700px){
  .vs{grid-template-columns:1fr}
  .vs>div+div{border-left:0;border-top:1px solid var(--rule)}
}

/* CB-01: the roads table carries a date under each road name */
.tally td b{color:var(--bone);font-weight:600}
.tally .q{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--dim)}
.tally td:nth-child(2){color:var(--prose)}
@media(max-width:620px){
  .tally,.tally tbody,.tally tr,.tally td,.tally th{display:block;width:auto}
  .tally th{display:none}
  .tally tr{border-bottom:1px solid var(--rule);padding:13px 0}
  .tally td{border:0;padding:0}
  .tally td:first-child{margin-bottom:6px;line-height:1.35}
  .tally td:nth-child(2),.tally td.n{display:inline;width:auto;text-align:left;
    font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;
    color:var(--dim)}
  .tally td:nth-child(2)::before{content:"P. "}
  .tally td.n::before{content:" \00b7 "}
  .tally td.n::after{content:"\00d7"}
  .tally tr.zero td.n{color:var(--accent);font-size:11px}
}

/* CB-01: two document pages side by side in one exhibit (cover + signatures). */
.exhibit .scan.pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.exhibit .scan.pair img{width:100%;min-width:0;max-width:none}
@media(max-width:700px){
  .exhibit .scan.pair{grid-template-columns:1fr;gap:12px;overflow-x:visible}
  .exhibit .scan.pair img{min-width:0;width:100%}
}

/* ── PX-01: proportion bar (how much of the road the prescription touches) ──
   .prop carries .wide — margin longhand only, never the shorthand.          */
.prop{margin-top:34px;margin-bottom:34px}
.pbar{display:flex;height:74px;border:1px solid var(--rule);overflow:hidden}
.pbar span{display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;padding:0 10px;min-width:0}
.pkeep{background:var(--panel);color:var(--bone);border-right:1px solid var(--rule)}
.pkill{background:var(--accent);color:#0B0B0A;letter-spacing:.04em;font-size:11px;
  white-space:nowrap;padding:0 10px;flex-basis:auto!important;flex-grow:0!important;
  flex-shrink:0!important}
.pcap{margin-top:14px;margin-bottom:0;font-size:16.5px;line-height:1.6;color:var(--prose)}
.pcap b{color:var(--accent);font-weight:600}
@media(max-width:620px){
  .pbar{height:60px}
  .pkeep{font-size:10px;letter-spacing:.06em}
  .pkill{font-size:10px}
  .pcap{font-size:17.5px}
}

/* ── PX-01: split ledger — identity in a rail, the substance beside it ──── */
.ledger.split .lrow{display:grid;grid-template-columns:232px 1fr;gap:30px;
  padding-top:26px;padding-bottom:24px}
.ledger.split .lwho{margin-bottom:10px;line-height:1.5}
.ledger.split .lwho b{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:6px}
.ledger.split .lwho span{margin-top:0;font-size:11px;line-height:1.7}
.lrole{margin:0;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1.7;
  border-top:1px solid var(--rule);padding-top:9px}
.ledger.split .lsaid{font-size:18px;margin-bottom:16px}
.ledger.split .lkill{padding-left:0}
@media(max-width:820px){
  .ledger.split .lrow{grid-template-columns:1fr;gap:16px}
  .lrole{border-top:0;padding-top:0}
}

/* ── PX-01: a command line, shown as a command line ─────────────────────── */
.cmd{margin-top:20px;margin-bottom:20px;background:var(--panel);
  border-left:3px solid var(--accent);padding:15px 18px;overflow-x:auto}
.cmd .mono{font-size:15px;color:var(--bone);letter-spacing:.01em;white-space:nowrap}
.cmd .mono::before{content:"$ ";color:var(--accent)}

/* PX-01: the un-redaction exhibits stack two scans in one frame */
#px-ex07 .scan img+img{margin-top:14px}

/* PX-01: the section table's prescription column is a sentence, not a figure —
   .tally td.n is 6em and right-aligned by default, which shreds it into a stack. */
#px-sections th:last-child,#px-sections td.n{width:auto;text-align:left;
  padding-left:26px;font-size:14px;letter-spacing:.04em;text-transform:none}
#px-sections tr.zero td.n{font-size:14px}
#px-sections td:first-child{width:11em}
#px-sections td:nth-child(2){width:7em}
@media(max-width:620px){
  #px-sections th:last-child,#px-sections td.n{padding-left:14px;font-size:13px}
  #px-sections td:first-child{width:8em}
  #px-sections td:nth-child(2){width:5em}
}

/* ── PX-01: the road drawn to scale ─────────────────────────────────────
   Replaces the proportion bar and the seven-row table it duplicated. The
   argument is the sliver: 115 m of 3,980 is 30 px of a 1,040 px road, and no
   sentence makes that land the way the drawing does.
   Carries .wide — margin longhand only, never the shorthand.               */
.roadmap{display:block;width:100%;height:auto;margin-top:34px;margin-bottom:30px}
.roadmap text{font-family:var(--mono);fill:var(--mut)}
.roadmap .hd{font-size:12px;font-weight:600;letter-spacing:.16em;fill:var(--bone)}
.roadmap .hd2{font-size:11px;letter-spacing:.1em;fill:var(--dim)}
.roadmap .stn{font-size:12.5px;letter-spacing:.04em;fill:var(--prose)}
.roadmap .len{font-size:12px;letter-spacing:.04em;fill:var(--dim)}
.roadmap .kill{font-size:12.5px;font-weight:600;letter-spacing:.11em;fill:var(--accent)}
.roadmap .keep{font-size:12.5px;font-weight:600;letter-spacing:.11em;fill:var(--bone)}
@media(max-width:620px){
  .roadmap .stn,.roadmap .len{font-size:15px}
  .roadmap .kill,.roadmap .keep{font-size:15px}
  .roadmap .hd{font-size:15px}
  .roadmap .hd2{display:none}
}

/* ── PX-01: a quote set as a quote ──────────────────────────────────────
   The site had no display-quote component — quoted matter only ever sat
   inside .exhibit .read or .lsaid. A report passage lifted into the prose was
   rendering as an ordinary paragraph with quote marks round it, which reads as
   prose and not as evidence. Accent rule, larger type, real air. */
.pullquote{margin-top:34px;margin-bottom:34px;padding:2px 0 2px 28px;
  border-left:3px solid var(--accent);
  font-size:24px;line-height:1.45;letter-spacing:-.012em;
  color:var(--bone);text-wrap:pretty}
.pullquote b,.pullquote strong{color:var(--accent);font-weight:650}
.pullquote em{font-style:italic}
/* A short one is the hammer — let it run bigger. */
.pullquote.short{font-size:30px;line-height:1.3;letter-spacing:-.022em}
@media(max-width:620px){
  .pullquote{font-size:21px;padding-left:18px}
  .pullquote.short{font-size:25px}
}

/* ── PX-01: file properties, set as properties ──────────────────────────
   These were inline .mono runs in a sentence. Long monospaced phrases inside
   prose break the line rhythm and orphan their tails ("(Windows)" on its own
   line). A two-column list is both more legible and reads as what it is. */
.props{display:grid;grid-template-columns:8.5em 1fr;gap:0;margin-top:24px;margin-bottom:26px;
  border-left:3px solid var(--rule-2);padding-left:22px}
.props dt{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);padding:7px 0;align-self:baseline}
.props dd{margin:0;font-family:var(--mono);font-size:14px;line-height:1.5;color:var(--prose);
  padding:7px 0;overflow-wrap:break-word}
.props dd b{color:var(--accent);font-weight:600}
@media(max-width:620px){
  .props{grid-template-columns:1fr;padding-left:16px}
  .props dt{padding-bottom:0}
  .props dd{padding-top:2px;padding-bottom:12px;font-size:15px}
}

/* ── PX-01: the note to the press ───────────────────────────────────────
   An invitation to verify, not a press release. Reads as a sidebar, sits
   below the argument and above the sources, and carries the firm's own
   published contact details so a reporter can check the story in one call.
   Carries .wide — margin longhand only.                                    */
.presscall{margin-top:44px;margin-bottom:40px;border:1px solid var(--rule);
  border-left:3px solid var(--accent);background:var(--panel);padding:28px 30px 26px}
.presscall h4{margin:0 0 14px;font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);line-height:1.7}
.presscall p{margin:0;font-size:17.5px;line-height:1.6;color:var(--prose);text-wrap:pretty}
.presscall .props{margin-top:20px;margin-bottom:22px;border-left-color:var(--accent)}
.presscall .props dd a{color:var(--bone);border-bottom:1px solid var(--rule-2)}
.presscall .props dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.presscall .asks{margin-top:4px}
.presscall .asks span{font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.presscall ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:q}
.presscall ol li{position:relative;counter-increment:q;padding:7px 0 7px 40px;
  font-size:17.5px;line-height:1.58;color:var(--bone)}
.presscall ol li::before{content:counter(q,decimal-leading-zero);position:absolute;left:0;top:9px;
  font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;color:var(--accent)}
.presscall .fine{margin-top:22px;padding-top:18px;border-top:1px solid var(--rule);
  font-size:15px;line-height:1.6;color:var(--dim)}
@media(max-width:620px){
  .presscall{padding:22px 18px}
  .presscall p,.presscall ol li{font-size:18px}
}


/* ── STAGED ENTRIES ───────────────────────────────────────────────────────
   An entry written and sitting in the right source position on /editorials/,
   whose article is not deployed yet. Linking to it would 404, so it is not
   rendered. To publish: delete the word  draft  from its class list, promote
   it to  class="entry" id="latest" , demote the one below it to
   class="entry compact" , bump the count in .files-hd, and add its <item> to
   /feed.xml and its <url> to /sitemap.xml. */
.entry.draft{display:none}
/* On localhost the staged entries are shown so they can be reviewed before they
   ship, with a badge so nobody mistakes one for a published piece. The class is
   set by a one-line script on the index; on backcountry.cx it is never set. */
html.localpreview .entry.draft{display:block}
html.localpreview .entry.draft .grid{position:relative}
html.localpreview .entry.draft .grid::before{content:"STAGED — NOT DEPLOYED";position:absolute;
  top:-10px;left:0;z-index:2;background:var(--accent);color:#0B0B0A;font-family:var(--mono);
  font-size:10px;font-weight:700;letter-spacing:.18em;padding:4px 10px}

/* Byline share icons. Small, dim, same hit area as the adjacent text links so
   the row reads as one bar. Lives here rather than inline on three pages: the
   icons shipped to all ten editorials but the rules only to three, so on the
   other seven the SVGs had no width and rendered at the browser default. */
.byline .share{align-items:center;gap:14px}
.byline .share .ic{display:inline-flex;align-items:center;color:var(--dim)}
.byline .share .ic svg{width:15px;height:15px;fill:currentColor;display:block}
.byline .share .ic:hover,.byline .share .ic:focus-visible{color:var(--accent)}
.byline .share .icsep{width:1px;height:13px;background:var(--rule-2);display:inline-block}

/* ═══════════════════════════════════════════════════════════════════════════
   Take-action CTA (bottom form). Lifted out of the ten editorials, which each
   carried an identical inline copy, so the listing page and /about/ can use it
   too. The editorials' own inline blocks still win the cascade and are byte-
   identical, so nothing moves on those pages; they can be stripped later.
   Deliberately NOT included: .prose{padding-top:0} and .byline{margin-bottom:0},
   which belong to the .actline top form and are specific to an article header.
   Geometry matches .cards and .sources exactly — same max-width, same zero
   side padding — so the copy lines up with the column above it.
   ═══════════════════════════════════════════════════════════════════════════ */
/* CTA:TOP inline bar. .actridge is position:absolute and was only ever contained
   by .actbox; the seven older editorials carry <aside class="actline"> with no
   .actline rule of their own, so the ridge escaped its box and washed the whole
   article. The rule lives here now so every page gets the containment. */
.actline{position:relative;overflow:hidden;display:flex;align-items:baseline;gap:18px;
  flex-wrap:wrap;margin:0 0 42px;padding:16px 0 18px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.actline .actridge{height:100%;opacity:.6}
.actline .actk,.actline a{position:relative;z-index:1}
.actline .actk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim)}
.actline-link{font-size:15px;font-weight:600;color:var(--accent);text-decoration:none;
  border-bottom:1px solid rgba(255,74,15,.42);padding-bottom:2px}
.actline-link:hover,.actline-link:focus{color:#FF4A0F;border-color:#FF4A0F}
.actline-btn{margin-left:auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#120B07;border-radius:6px;padding:9px 16px;
  font:700 13px/1 var(--text);text-decoration:none;white-space:nowrap}
.actline-btn:hover,.actline-btn:focus{background:#FF4A0F;color:#120B07}
.actline-btn{margin-left:0}
.actline i{font-style:normal;margin-left:7px}

/* ── QUOTED SOURCE BLOCKS ──────────────────────────────────────────────────
   Was a bare left rule with the citation crammed above the quote in mono, which
   read as an unstyled blockquote and looked nothing like the document exhibits
   beside it. Same card as .exhibit now: a padded bar carrying the provenance,
   the quotation on the surface beneath it at reading size, and the accent spine
   kept so a quote still signals as a quote. One definition for the whole site;
   the per-article copies were deleted. */
.prose .qt{margin:44px 0;border:1px solid var(--rule);border-left:3px solid var(--accent);
  background:var(--surface);overflow:hidden}
.prose .qt h4{margin:0;padding:13px 24px;background:var(--surface-2);
  border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11.5px;
  font-weight:500;letter-spacing:.05em;text-transform:none;color:var(--dim);line-height:1.65}
.prose .qt p{margin:0;padding:0 26px;font-size:18.5px;line-height:1.62;color:var(--prose)}
.prose .qt p:first-of-type{padding-top:22px}
.prose .qt p:last-child{padding-bottom:24px}
.prose .qt p + p{padding-top:14px}
@media (max-width:640px){
  .prose .qt{margin:32px 0}
  .prose .qt h4{padding:11px 16px}
  .prose .qt p{padding-left:18px;padding-right:18px;font-size:17px}
}

.actbox{position:relative;max-width:var(--col-wide);margin:66px auto 0;padding:30px 0 26px;
  border-top:1px solid var(--rule);overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.actridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:78%;z-index:0;
  opacity:.75;pointer-events:none}
.actbox .actcopy,.actbox .actbtn{position:relative;z-index:1}
.actbox .actk{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent);margin:0 0 12px}
.actbox .acthl{color:var(--accent)}
.actbox .acth{font-family:var(--display);font-size:25px;line-height:1.2;letter-spacing:-.02em;
  font-weight:800;color:var(--ink);margin:0 0 10px;text-wrap:balance}
.actbox .actd{font-size:15.5px;line-height:1.62;color:var(--mut);margin:0;max-width:62ch}
.actbtn{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#120B07;
  border-radius:7px;padding:13px 22px;font:700 15px/1 var(--text);text-decoration:none;
  white-space:nowrap}
.actbtn:hover,.actbtn:focus{background:#FF4A0F;color:#120B07}
.actbtn i{font-style:normal}
@media (max-width:760px){
  .actbox{grid-template-columns:1fr;gap:22px}
  .actbox .acth{font-size:22px}
  .actbtn{justify-self:start}
}

/* Accent a single word inside a headline. Used first on the Sitkum h1
   and its listing entry, where 'already' carries the whole point. */
.hl{color:var(--accent)}

/* ═══════════════════════════════════════════════════════════════════════════
   <code> had no rule anywhere, so the UA default overflow-wrap:normal applied.
   File paths and BC Geographic Warehouse layer names are single unbreakable
   tokens — underscores and dots are not break opportunities — so one of them
   pushed who-are-cmh's body box to 611px against a 375px viewport.
   break-word, not anywhere: anywhere also feeds break opportunities into
   min-content sizing and can collapse a flex or grid track around a mono
   label, which is the same reason .mono above avoids it.
   ═══════════════════════════════════════════════════════════════════════════ */
code{overflow-wrap:break-word}