/* Vero Record — shared stylesheet
   Design read: newspaper broadsheet, print-derived. Type-driven hierarchy,
   hairline rules, no radii, no shadows, no gradients except the hatch inside
   the illustrations. Reasons for each decision: DESIGN-NOTES.md */

:root{
  /* 2 core colours + neutrals. Green is the publication. Ochre is the dossier
     world only, so a reader always knows which of the two they are in. */
  --green:#0a7d43; --green-dk:#04492a; --green-mid:#066b39;
  --green-pale:#eff6f2; --green-ln:#c6ddd1;
  --ochre:#a8650c; --ochre-dk:#6f4207; --ochre-pale:#fbf7f1; --ochre-ln:#e6dccd;
  --ink:#101214; --body:#2c3235; --muted:#5c6560; --rule:#d8dcda; --hair:#e9ebea;
  --white:#fff; --band:#f6f8f7;
  /* text on the two dark grounds. Consolidated: the strip, the footer, the
     specimen notice and the vision page were each inventing their own grey. */
  --dk-hi:#e6f3ec; --dk-tx:#c9e2d5; --dk-mu:#9fc4ae; --dk-ac:#5fc38c;
  --ik-tx:#dfe3e1; --ik-mu:#b9c0bd; --ik-dm:#9aa3a0;
  /* a third colour exists only inside the evidence grading system */
  /* --b is a shade darker than --ochre: the badge sits on its own tint, and the
     brand ochre only clears AA against plain white. Large ochre surfaces keep --ochre. */
  --a:#0a7d43; --b:#8f560a; --c:#33488c;
  /* one more functional colour, used for exactly one thing: the newest reports */
  --red:#a4161a;
  --a-bg:rgba(10,125,67,.07); --b-bg:rgba(168,101,12,.07); --c-bg:rgba(51,72,140,.07);
  --hed:"Libre Franklin",Arial,Helvetica,sans-serif;
  --ser:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",Consolas,monospace;
  --gut:30px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--hed);
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;font-kerning:normal}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
p{text-wrap:pretty}
h1,h2,h3,h4{text-wrap:balance}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.wrap{max-width:1260px;margin:0 auto;padding:0 26px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:10px 16px;
  font-family:var(--mono);font-size:12px;z-index:9}
.skip:focus{left:12px;top:12px}

/* ═══ evidence grading: the identity motif, on every claim, everywhere ═══ */
.cls{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.06em;padding:2px 5px;border:1px solid currentColor;line-height:1.3;
  vertical-align:1px;font-variant-numeric:tabular-nums}
.cls.a{color:var(--a);background:var(--a-bg)}
.cls.b{color:var(--b);background:var(--b-bg)}
.cls.c{color:var(--c);background:var(--c-bg)}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.11em;text-transform:uppercase;color:var(--green)}
.tag::before{content:"";display:inline-block;width:6px;height:6px;background:currentColor;
  margin-right:7px;vertical-align:1px}
.tag.o{color:var(--ochre)}
.meta{font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.01em}
a.meta:hover{color:var(--green)}
/* marks the six reports that rest on retrieved documents, so a reader can tell
   them from the placeholder copy without reading the notice at the top */
.rep{display:inline-block;font-family:var(--mono);font-size:9px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;background:var(--green);
  color:#fff;margin-left:9px;vertical-align:2px}

/* Opinion carries serif headlines wherever it appears: a reader should know
   within one second that a page is argument rather than record. */
.article.opin h1{font-family:var(--ser);font-weight:600;letter-spacing:-.022em;line-height:1.1}
.article.opin .bd h2{font-family:var(--ser);font-weight:600;letter-spacing:-.01em}

/* ═══ illustrations ═══ */
.fig{display:block;position:relative}
.fig img{width:100%;min-width:0;height:auto;background:var(--green-pale)}
.fig .cr{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em;
  color:var(--muted);padding-top:6px;border-top:1px solid var(--hair);margin-top:7px;line-height:1.5}
.fig .cr b{color:var(--ink);font-weight:600;text-transform:uppercase;letter-spacing:.09em}
a.fig:hover img{outline:2px solid var(--green);outline-offset:-2px}

/* ═══ folio strip ═══ */
.strip{background:var(--green-dk);color:var(--dk-tx);font-size:11px;font-family:var(--mono);
  letter-spacing:.05em}
.strip .wrap{display:flex;justify-content:space-between;gap:16px;padding:7px 26px;flex-wrap:wrap}
.strip b{color:#fff;font-weight:600}

/* ═══ nameplate ═══ */
.mast{border-bottom:1px solid var(--rule);padding:22px 0 0}
.mast .wrap{text-align:center}
.plate{display:block}
/* the logo is 2.79:1, so a width of ~300px gives it the same optical presence
   the 86px wordmark had, without swallowing the page above the fold */
.plate img{width:clamp(188px,23vw,300px);height:auto;margin:0 auto}
/* Any masthead mark, whatever wrapper it is given, keeps its own proportions. The
   archive page once carried width/height attributes that did not match the file and
   squashed the logo; height:auto makes that impossible to repeat. */
.mast img,.logo img{height:auto}
.logo{display:block}
.logo img{width:clamp(188px,23vw,300px);margin:0 auto}
.mast .tl{font-family:var(--ser);font-style:italic;font-size:14px;color:var(--muted);
  margin:14px auto 0;padding-top:11px;border-top:1px solid var(--rule);max-width:660px;
  padding-bottom:15px}
@media(max-width:600px){.mast{padding-top:18px}.mast .tl{font-size:13px}}

/* ═══ navigation ═══ */
nav[aria-label="Sections"]{border-top:2px solid var(--ink);border-bottom:3px solid var(--green);background:var(--white);
  position:sticky;top:0;z-index:5}
nav[aria-label="Sections"] ul{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scrollbar-width:none}
nav[aria-label="Sections"] ul::-webkit-scrollbar{display:none}
nav[aria-label="Sections"] li{flex:0 0 auto}
nav[aria-label="Sections"] li + li{border-left:1px solid var(--hair)}
/* 14px padding puts the tap target at 46px, clear of the 44px floor */
nav[aria-label="Sections"] a{display:block;padding:14px 17px;color:var(--ink);font-size:11.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-3px}
nav[aria-label="Sections"] a:hover{color:var(--green);background:var(--green-pale)}
nav[aria-label="Sections"] a[aria-current]{color:var(--green);border-bottom-color:var(--green-dk)}
nav[aria-label="Sections"] a.dossier{color:var(--ochre)}
nav[aria-label="Sections"] a.dossier:hover{background:var(--ochre-pale)}
nav[aria-label="Sections"] a.dossier[aria-current]{border-bottom-color:var(--ochre)}

/* ═══ specimen notice ═══ */
.specimen{background:var(--ink);color:var(--ik-tx);font-family:var(--mono);font-size:10.5px;
  line-height:1.6;letter-spacing:.02em}
.specimen .wrap{padding:9px 26px}
.specimen b{color:#fff;letter-spacing:.11em}
.specimen a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* ═══ section rules ═══ */
.srule{display:flex;align-items:baseline;gap:16px;margin:38px 0 0;
  border-top:3px solid var(--ink);padding-top:9px}
.srule h2,.srule h3{font-size:12.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0;white-space:nowrap}
.srule .l{flex:1}
.srule a{font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap}
.srule a:hover{color:var(--green)}
.srule + *{margin-top:16px}
/* a long section label must wrap rather than push the page sideways (R-03) */
@media(max-width:760px){.srule{flex-wrap:wrap;gap:6px 14px}
  .srule h2,.srule h3{white-space:normal}
  .srule .l{display:none}}

/* ═══ story furniture ═══ */
.lead h1,.lead h2{font-size:clamp(28px,3.9vw,44px);font-weight:900;line-height:1.04;
  letter-spacing:-.033em;margin:11px 0 14px}
.lead .sf{font-family:var(--ser);font-size:18px;line-height:1.53;color:var(--body);margin:16px 0 14px}
.lead .bl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding-top:12px;
  border-top:1px solid var(--hair)}
.also{margin-top:26px}
.also h3{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 2px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.also ul{list-style:none;margin:0;padding:0}
.also li{padding:11px 0;border-bottom:1px solid var(--hair)}
.also li:last-child{border-bottom:0}
.also li a{font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.008em}
.also li a:hover{color:var(--green)}
.also .s{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:5px}
h2 a:hover,h3 a:hover,h1 a:hover{color:var(--green)}

.brief{padding:17px 0;border-bottom:1px solid var(--hair)}
.brief:first-of-type{padding-top:0}
.brief:last-child{border-bottom:0;padding-bottom:0}
.brief h3{font-size:17.5px;font-weight:700;line-height:1.24;margin:7px 0 7px;letter-spacing:-.014em}
.brief p{font-family:var(--ser);font-size:14.5px;line-height:1.5;color:var(--body);margin:0 0 8px}

.rail h3{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 4px;padding-bottom:9px;border-bottom:3px solid var(--ink)}
.rail ul{margin:0;padding:0}
.rail li{list-style:none;padding:12px 0;border-bottom:1px solid var(--hair);
  display:grid;grid-template-columns:26px 1fr;gap:11px}
.rail .n{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--green);
  font-variant-numeric:tabular-nums;padding-top:2px}
.rail .t{display:block;font-size:14.5px;font-weight:600;line-height:1.33;letter-spacing:-.008em}
.rail a.t:hover{color:var(--green)}
.rail .s{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:5px}

/* three illustrated items and a digest column. Equal thirds so the pictures
   share a baseline; the fourth column is a different kind of thing, which is
   what stops the row reading as a card grid. */
.teasers{display:grid;grid-template-columns:repeat(3,1fr) 1.04fr}
.teasers > article{padding:0 var(--gut) 4px 0;border-right:1px solid var(--hair)}
.teasers > *:last-child{border-right:0;padding-right:0}
.teasers h3{font-size:16.5px;font-weight:700;line-height:1.25;margin:11px 0 7px;letter-spacing:-.014em}
.teasers p{font-family:var(--ser);font-size:14px;color:var(--body);margin:0 0 8px;line-height:1.48}
.digest{padding-left:0}
.digest h3{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 2px;padding-bottom:9px;border-bottom:2px solid var(--ink)}
.digest ul{list-style:none;margin:0;padding:0}
.digest li{padding:12px 0;border-bottom:1px solid var(--hair)}
.digest li:last-child{border-bottom:0;padding-bottom:0}
.digest li a{display:block;font-size:14.5px;font-weight:600;line-height:1.32;letter-spacing:-.008em}
.digest li a:hover{color:var(--green)}
.digest .s{font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:5px}
@media(max-width:900px){.teasers{grid-template-columns:1fr 1fr;gap:0 var(--gut)}
  .teasers > *{border-right:0;padding-right:0;padding-bottom:22px}
  .digest{grid-column:1 / -1;border-top:1px solid var(--rule);padding-top:20px}}
@media(max-width:560px){.teasers{grid-template-columns:1fr}}

.wide{display:grid;grid-template-columns:132px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--hair)}
/* a docket number or a long file reference has no spaces to break at, and would
   otherwise size the column and push the whole page sideways */
.wide > *{min-width:0}
.wide .meta,.dline,.digest .s,.rail .s,.bl .meta,.notebox p,.brief .meta{overflow-wrap:anywhere}
.wide h3{font-size:17px;font-weight:700;line-height:1.25;margin:0 0 7px;letter-spacing:-.014em}
.wide p{font-family:var(--ser);font-size:14px;color:var(--body);margin:0 0 8px;line-height:1.48}
/* narrow variant for the split columns, where 132px would starve the text */
.wide.sm{grid-template-columns:94px 1fr;gap:16px;padding:16px 0}
.wide.sm h3{font-size:16px}
.wide.sm .tag{margin-bottom:5px}
@media(max-width:520px){.wide{grid-template-columns:88px 1fr;gap:14px}
  .wide.sm{grid-template-columns:76px 1fr;gap:13px}}

.listing{padding:15px 0;border-top:1px solid var(--hair)}
.listing h3{font-size:16.5px;font-weight:700;margin:0 0 6px;line-height:1.26;letter-spacing:-.014em}
.listing p{font-family:var(--ser);font-size:14px;color:var(--body);margin:0 0 7px;line-height:1.48}

.split{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:0}}

/* ═══ front page ═══ */
/* Two columns: the lead, and the rail beside it. A third column is added only
   when the front carries a middle block of briefs, which it does not today. */
.front{display:grid;grid-template-columns:minmax(0,1fr) 320px;padding-top:26px}
.front:has(> :nth-child(3)){grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 296px}
.front > *{padding:0 var(--gut)}
.front > *:first-child{padding-left:0}
.front > *:last-child{padding-right:0;border-left:1px solid var(--rule)}
.front > :nth-child(2):not(:last-child){border-left:1px solid var(--rule);border-right:1px solid var(--rule)}
@media(max-width:1020px){.front{grid-template-columns:minmax(0,1fr)}
  .front > *{padding:0 0 24px;border:0!important}
  .front > :nth-child(n+2){border-top:1px solid var(--rule)!important;padding-top:24px}}

/* ═══ section page head ═══ */
.shead{border-bottom:3px solid var(--ink);padding:30px 0 18px}
.shead h1{font-size:clamp(32px,4.8vw,52px);font-weight:900;letter-spacing:-.04em;
  margin:9px 0 10px;line-height:.98}
.shead p{font-family:var(--ser);font-size:17px;color:var(--body);margin:0;max-width:66ch;line-height:1.5}
.shead .cnt{font-family:var(--mono);font-size:10.5px;color:var(--muted);margin-top:13px;
  padding-top:11px;border-top:1px solid var(--hair)}

.pagegrid{display:grid;grid-template-columns:1fr 306px;gap:0 40px;padding-top:26px}
.pagegrid > aside{border-left:1px solid var(--rule);padding-left:40px}
@media(max-width:980px){.pagegrid{grid-template-columns:1fr}
  .pagegrid > aside{border-left:0;padding-left:0;border-top:3px solid var(--ink);
    padding-top:24px;margin-top:30px}}

.box{border-top:2px solid var(--ink);padding:14px 0 20px;margin-bottom:8px}
.box h3{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 11px}
.box p{font-family:var(--ser);font-size:14.5px;color:var(--body);margin:0 0 10px;line-height:1.52}
.box p:last-child{margin-bottom:0}
.box.o{border-top-color:var(--ochre);background:var(--ochre-pale);padding:14px 18px 18px;
  border-left:0}
.box .lst{font-family:var(--mono);font-size:11.5px;line-height:2;color:var(--body);margin:0}
.box ol{font-family:var(--ser);font-size:14px;color:var(--body);margin:0;padding-left:20px;line-height:1.52}
.box ol li{margin-bottom:7px}

/* ═══ article ═══ */
.artgrid{display:grid;grid-template-columns:minmax(0,732px) 306px;gap:0 46px;
  justify-content:center;padding:30px 0 10px}
.artgrid > aside{border-left:1px solid var(--rule);padding-left:40px}
/* A grid item defaults to min-width:auto, so it refuses to shrink below the widest
   thing inside it and pushes the whole article past the screen edge on a phone. Without
   this line the single-column rule below cannot take effect. */
.artgrid > *{min-width:0}
/* We print source URLs in full so a reader can retype them, and a long one is a single
   unbreakable word. On a phone that one word is wider than the screen and drags the
   article sideways, so links may break mid-token; prose still breaks only at words. */
.artgrid a[href^="http"],.notebox a,.bd a{overflow-wrap:anywhere}
.article,.bd,.notebox{overflow-wrap:break-word}
@media(max-width:1020px){.artgrid{grid-template-columns:1fr}
  .artgrid > aside{border-left:0;padding-left:0;border-top:3px solid var(--ink);
    padding-top:24px;margin-top:30px}}
/* a day in the archive: open the newest, keep the rest a line away */
.day{border-top:2px solid var(--ink)}
.day > summary{display:flex;align-items:baseline;gap:14px;cursor:pointer;
  padding:13px 2px;list-style:none;min-height:44px;box-sizing:border-box}
.day > summary::-webkit-details-marker{display:none}
.day > summary::before{content:"+";font-family:var(--mono);font-size:15px;
  font-weight:700;color:var(--green);width:13px;flex:0 0 auto;line-height:1.2}
.day[open] > summary::before{content:"\2212"}
.day > summary:hover .dd,.day > summary:focus-visible .dd{color:var(--green)}
.day .dd{font-size:17px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.day .dn{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  color:var(--muted);margin-left:auto;text-align:right}
.day .arcx{border-top:1px solid var(--rule);margin-bottom:24px}
@media(max-width:720px){
  .day > summary{gap:10px;padding:12px 2px}
  .day .dd{font-size:15.5px}
  .day .dn{font-size:9.5px}}

/* the archive index: one line a report, scannable by date */
.arcx{list-style:none;margin:0 0 38px;padding:0;border-top:1px solid var(--rule)}
.arcx li{display:grid;grid-template-columns:124px minmax(0,1fr) 44px;gap:0 20px;
  align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--hair)}
.arcx li:hover{background:var(--green-pale)}
.arcx .s{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.arcx a{font-family:var(--ser);font-size:16.5px;line-height:1.34;font-weight:600;
  color:var(--ink);letter-spacing:-.008em}
.arcx a:hover,.arcx a:focus-visible{color:var(--green)}
.arcx .g{text-align:right}
@media(max-width:720px){
  .arcx li{grid-template-columns:minmax(0,1fr) 44px;padding:12px 2px}
  .arcx .s{grid-column:1/-1;margin-bottom:4px}
  .arcx a{font-size:15.5px}}

/* the rail travels with the reader: a story page runs to five thousand
   pixels and a rail that scrolls away is a rail nobody reads */
.artgrid > aside .stick{position:static}
@media(min-width:1021px) and (min-height:830px){
  .artgrid > aside .stick{position:sticky;top:16px}}
.rel{list-style:none;margin:0;padding:0}
.rel li{border-top:1px solid var(--hair);padding:11px 0}
.rel li:first-child{border-top:0;padding-top:0}
.rel li:last-child{padding-bottom:0}
.rel a{display:block;font-family:var(--ser);font-size:14.5px;line-height:1.34;
  font-weight:600;color:var(--ink);letter-spacing:-.005em}
.rel a:hover,.rel a:focus-visible{color:var(--green)}
.rel .meta{display:flex;gap:8px;align-items:center;margin-top:6px;font-size:10px}
.article h1{font-size:clamp(31px,4.4vw,48px);font-weight:900;line-height:1.02;
  letter-spacing:-.038em;margin:10px 0 16px}
.dek{font-family:var(--ser);font-size:19.5px;line-height:1.5;color:var(--body);margin:0 0 20px}
.byline{display:flex;gap:12px;flex-wrap:wrap;align-items:center;padding:12px 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);
  font-family:var(--mono);font-size:10.5px;color:var(--muted);letter-spacing:.03em}
.figure{margin:26px 0}
/* Without height:auto the width/height attributes on the img keep their pixel height
   while the width is squeezed to the column, which stretches the picture and lets any
   aspect-ratio below be ignored. This one line is what keeps article pictures in
   proportion; the ratios further down do nothing without it. */
.figure img{display:block;width:100%;height:auto;background:var(--green-pale)}
.figure figcaption{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  padding-top:8px;border-top:1px solid var(--hair);margin-top:8px;line-height:1.55}
.figure figcaption b{color:var(--ink);font-weight:600;text-transform:uppercase;letter-spacing:.09em;font-size:9.5px}
.bd p{font-family:var(--ser);font-size:17.5px;line-height:1.63;color:var(--ink);margin:0 0 18px}
.bd > p:first-of-type::first-letter{float:left;font-family:var(--hed);font-weight:900;
  font-size:66px;line-height:.80;padding:7px 11px 0 0;color:var(--ink)}
.bd h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin:32px 0 13px}
.bd blockquote{margin:26px 0;padding:4px 0 4px 22px;border-left:3px solid var(--green)}
.bd blockquote p{font-size:20px;font-style:italic;color:var(--body);margin:0;line-height:1.44}
.notebox{border-top:3px solid var(--ink);padding:15px 0 18px;margin:30px 0 0}
.notebox h3{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
.notebox p{font-family:var(--ser);font-size:14.5px;color:var(--body);margin:0 0 10px;line-height:1.55}
.notebox p:last-child{margin:0}

/* ═══ dossier world ═══ */
.dhead{background:var(--ochre-pale);border-bottom:3px solid var(--ochre);padding:34px 0 30px}
.dhead h1{font-size:clamp(34px,5.4vw,60px);font-weight:900;letter-spacing:-.045em;
  margin:9px 0 14px;line-height:.94}
.dhead p{font-family:var(--ser);font-size:17.5px;color:var(--body);margin:0;max-width:74ch;line-height:1.55}
.dhead .cnt{font-family:var(--mono);font-size:10.5px;color:var(--ochre-dk);margin-top:16px;
  padding-top:13px;border-top:1px solid var(--ochre-ln)}
.dh{display:grid;grid-template-columns:1fr 340px;gap:0 48px;align-items:start}
.dh > :last-child{border-left:1px solid var(--ochre-ln);padding-left:48px}
@media(max-width:940px){.dh{grid-template-columns:1fr}
  .dh > :last-child{border-left:0;padding-left:0;border-top:1px solid var(--ochre-ln);
    padding-top:22px;margin-top:24px}}
.dhx h2{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 2px;padding-bottom:9px;border-bottom:2px solid var(--ochre)}
.dhx ol{list-style:none;margin:0 0 16px;padding:0}
.dhx li{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--ochre-ln)}
.dhx .i{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--ochre);
  font-variant-numeric:tabular-nums}
.dhx li a{font-size:19px;font-weight:800;letter-spacing:-.025em}
.dhx li a:hover{color:var(--ochre)}
.dhx li b{font-family:var(--mono);font-size:9.5px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em}
.dhx p{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.75;margin:0;max-width:none}

/* three files as stacked full-width rows, not three equal cards */
.file{display:grid;grid-template-columns:186px 1fr 262px;gap:0 40px;
  padding:34px 0;border-bottom:1px solid var(--rule)}
.file:first-of-type{border-top:3px solid var(--ink)}
.file .idx{font-family:var(--mono);font-size:11px;color:var(--muted);line-height:1.95}
.file .idx .num{display:block;font-size:52px;font-weight:600;color:var(--ochre);
  opacity:.42;line-height:.9;margin-bottom:12px;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.file .dmark{width:132px;height:auto;margin:0 0 14px;border:1px solid var(--ochre-ln)}
@media(max-width:1020px){.file .dmark{display:none}}
.file h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;letter-spacing:-.04em;
  margin:9px 0 13px;line-height:1.02}
.file .sub{font-family:var(--ser);font-size:16.5px;color:var(--body);margin:0 0 18px;
  line-height:1.55;max-width:62ch}
.file .facts{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.95;
  border-top:2px solid var(--ink);padding-top:12px}
.file .facts b{color:var(--ink);font-weight:600}
@media(max-width:1020px){.file{grid-template-columns:1fr;gap:0}
  /* flex items default to min-width:auto, so the date line would not wrap */
  .file .idx{display:flex;align-items:baseline;gap:16px;margin-bottom:4px;flex-wrap:wrap}
  .file .idx > *{min-width:0}
  .file .idx .num{font-size:32px;margin:0}
  .file > div:last-child{margin-top:22px}}

.pill{display:inline-block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;padding:3px 8px;color:#fff}
.pill.pub{background:var(--ochre)}
.pill.wip{background:transparent;color:var(--muted);border:1px solid var(--rule)}
.evrow{display:flex;height:9px;margin:13px 0 8px}
.evkey{font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.8}
.btn{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;padding:14px 22px;
  background:var(--ochre);color:#fff;border:1px solid var(--ochre)}
.btn:hover{background:var(--ochre-dk);border-color:var(--ochre-dk)}
.btn.g{background:var(--green);border-color:var(--green)}
.btn.g:hover{background:var(--green-dk);border-color:var(--green-dk)}
.btn.q{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.q:hover{background:var(--ink);color:#fff}

.dbody{display:grid;grid-template-columns:minmax(0,1fr) 306px;gap:0 46px;padding:32px 0 8px}
.dbody > aside{border-left:1px solid var(--rule);padding-left:40px}
@media(max-width:1020px){.dbody{grid-template-columns:1fr}
  .dbody > aside{border-left:0;padding-left:0;border-top:3px solid var(--ink);padding-top:24px;margin-top:30px}}
.dbody h2{font-size:21px;font-weight:800;letter-spacing:-.022em;margin:34px 0 14px;
  padding-bottom:9px;border-bottom:2px solid var(--ink)}
.dbody h2:first-child{margin-top:0}
.dbody p{font-family:var(--ser);font-size:17.5px;line-height:1.62;color:var(--ink);margin:0 0 16px}
.dbody ol,.dbody ul{font-family:var(--ser);font-size:17px;line-height:1.6;color:var(--ink);
  margin:0 0 16px;padding-left:24px}
.dbody li{margin-bottom:10px}
.dbody li::marker{font-family:var(--mono);font-size:13px;color:var(--muted)}

/* ═══ bands ═══ */
.band{background:var(--band);border-top:1px solid var(--rule);margin-top:40px;padding:32px 0 36px}
.band.o{background:var(--ochre-pale);border-top:3px solid var(--ochre)}
.band.plain{background:var(--white);border-top:0;margin-top:0;padding:0}
.mgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1.35fr;border-top:2px solid var(--ink)}
.mgrid > div{padding:20px var(--gut) 20px 0;border-right:1px solid var(--rule)}
.mgrid > div:last-child{border-right:0;padding-right:0}
.mgrid h3{font-size:14px;font-weight:800;margin:0 0 9px;display:flex;gap:9px;align-items:center;
  letter-spacing:-.01em}
.mgrid p{font-family:var(--ser);font-size:14.5px;color:var(--body);margin:0;line-height:1.52}
@media(max-width:900px){.mgrid{grid-template-columns:1fr}
  .mgrid > div{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .mgrid > div:last-child{border-bottom:0}}

.promo{display:grid;grid-template-columns:1fr 360px;gap:44px;align-items:start}
@media(max-width:820px){.promo{grid-template-columns:1fr;gap:26px}}
.promo h2{font-size:clamp(26px,3.2vw,38px);font-weight:900;letter-spacing:-.04em;
  margin:9px 0 14px;line-height:1.02}
.promo p{font-family:var(--ser);font-size:16.5px;color:var(--body);margin:0 0 20px;
  max-width:68ch;line-height:1.55}
.promo ol{list-style:none;margin:0;padding:0;border-top:2px solid var(--ochre)}
.promo ol li{border-bottom:1px solid var(--ochre-ln);padding:14px 0;
  display:grid;grid-template-columns:24px 1fr auto;gap:12px;align-items:baseline}
.promo ol .fi{font-family:var(--mono);font-size:11px;color:var(--ochre);font-weight:600}
.promo ol .fn{font-size:17px;font-weight:800;letter-spacing:-.02em}
.promo ol a.fn:hover{color:var(--ochre)}
.promo ol .fs{font-family:var(--mono);font-size:9.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.09em}

/* ═══ footer ═══ */
footer{background:var(--green-dk);color:var(--dk-tx);padding:36px 0 42px;font-size:13.5px}
.fmast{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:18px;margin-bottom:26px}
.fmast .flogo{width:150px;height:auto}
.fmast span.meta{color:var(--dk-mu)}
.fg{display:grid;grid-template-columns:1.9fr 1fr 1fr;gap:40px}
@media(max-width:820px){.fg{grid-template-columns:1fr;gap:28px}}
footer h3{font-size:10.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  color:#fff;margin:0 0 11px}
footer p{margin:0 0 10px;line-height:1.62;max-width:54ch}
footer a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.35)}
footer a:hover{color:#fff;text-decoration-color:#fff}
footer .yor{font-family:var(--ser);font-style:italic;font-size:16.5px;color:#fff;margin-top:16px}
footer .fl{display:flex;flex-direction:column;gap:7px;font-size:13px}

/* ═══ in-page reader for the dossier PDF ═══
   The file is served from the page itself: no download, no registration, and
   the contents list is the file's own outline rather than one we retyped. */
.readbar{background:var(--ochre-pale);border-top:1px solid var(--ochre-ln);
  border-bottom:3px solid var(--ochre);padding:22px 0}
.readbar .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.readbar h1{font-size:clamp(26px,3.6vw,40px);font-weight:900;letter-spacing:-.04em;
  margin:0 0 9px;line-height:1}
.readbar .rmeta{font-family:var(--mono);font-size:10.5px;color:var(--ochre-dk);margin:0;line-height:1.8}
.racts{display:flex;gap:9px;flex-wrap:wrap}

.reader{display:grid;grid-template-columns:308px 1fr;gap:0 32px;padding:24px 0 0;align-items:start}
/* grid items default to min-width:auto, so a long section title would size the
   column to its own length and push the page sideways */
.reader > *{min-width:0}
.toc .tt{min-width:0;overflow-wrap:anywhere}
@media(max-width:980px){.reader{grid-template-columns:1fr;gap:0}}

.toc{border-top:3px solid var(--ink);padding-top:12px}
.toc h2{font-size:11.5px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin:0 0 8px}
.tocnote{font-family:var(--mono);font-size:10px;color:var(--muted);line-height:1.7;margin:0 0 10px}
.toc ul{list-style:none;margin:0;padding:0;max-height:74vh;overflow-y:auto;
  border-top:1px solid var(--hair)}
@media(max-width:980px){.toc ul{max-height:340px}}
.toc li{border-bottom:1px solid var(--hair)}
.toc button{display:grid;grid-template-columns:34px 1fr;border-left:3px solid transparent;gap:10px;width:100%;text-align:left;
  background:none;border:0;padding:10px 6px 10px 0;cursor:pointer;font-family:inherit;color:inherit}
.toc button:hover{background:var(--ochre-pale)}
.toc button[aria-current]{background:var(--ochre-pale);border-left:3px solid var(--ochre);padding-left:0}
.toc .pg{font-family:var(--mono);font-size:10.5px;color:var(--ochre);font-variant-numeric:tabular-nums;
  padding-top:2px}
.toc .tt{font-size:13.5px;font-weight:600;line-height:1.34;letter-spacing:-.008em}
.toc .tt em{display:block;font-family:var(--ser);font-style:normal;font-size:12.5px;
  font-weight:400;color:var(--muted);line-height:1.42;margin-top:3px}

.frame{border:1px solid var(--rule);background:var(--band)}
.frame iframe{display:block;width:100%;height:min(84vh,1180px);min-height:560px;border:0;background:#525659}
.fallback{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.7;
  margin:0;padding:10px 14px;border-top:1px solid var(--rule);background:var(--white)}
.fallback a{color:var(--ochre);text-decoration:underline;text-underline-offset:3px}

/* the published file shows its real cover; the unopened files show a symbol */
.file .cover{width:132px;height:auto;margin:0 0 14px;border:1px solid var(--ochre-ln)}
@media(max-width:1020px){.file .cover{display:none}}
.coverbox{display:block;width:100%;height:auto;border:1px solid var(--ochre-ln);margin:0 0 14px}

/* ═══ print ═══
   A publication about documents should produce a decent one. Chrome that only
   works on screen comes off, links in the body reveal where they point, and
   nothing is allowed to break across a page in the middle of a claim. */
@media print{
  .strip,nav[aria-label="Sections"],.specimen,.skip,.racts,.toc,.fallback,
  .also,.digest,.rail,footer .fl{display:none!important}
  body{font-size:10.5pt;color:#000;background:#fff}
  .wrap{max-width:none;padding:0}
  .mast{border-bottom:2pt solid #000;padding-top:0}
  .plate img{width:150pt}
  a{color:#000;text-decoration:none}
  .bd a[href^="http"]::after,.dbody a[href^="http"]::after{content:" <" attr(href) ">";
    font-family:var(--mono);font-size:8pt;word-break:break-all}
  .pagegrid,.artgrid,.dbody,.front,.reader,.split,.teasers,.mgrid,.fg,.promo,.dh{
    display:block!important}
  .day > summary::before{display:none}
  .day > summary{padding:8pt 0 4pt}
  .day::details-content{content-visibility:visible!important;display:block!important}
  .day > *:not(summary){display:block!important}
  .figure img{max-height:92mm;object-fit:cover;object-position:center}
  .figure{break-inside:avoid}
  .pagegrid > aside,.artgrid > aside,.dbody > aside{border:0;padding:0;margin-top:12pt}
  .artgrid > aside .stick{position:static}
  .frame iframe{display:none}
  .cls,.tag,.rep,.pill{border-color:#000;color:#000;background:none}
  .evrow{border:1pt solid #000}
  article,.box,.notebox,.file,blockquote,figure{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .fig img,.file .cover,.coverbox{max-width:220pt}
  footer{background:none;color:#000;border-top:2pt solid #000;padding:10pt 0 0}
  footer h3,footer p{color:#000}
  .article .bd p{orphans:3;widows:3}
}

/* ═══ vision ═══
   A manifesto is a different kind of page from a report, so it gets a different
   rhythm: two full-bleed statements in the publication's green, and between
   them numbered arguments that each end in a receipt pointing at the place on
   this site where the claim is already met. Same tokens throughout. */
.vhero{background:var(--green-dk);color:#fff;padding:64px 0 60px;
  border-bottom:4px solid var(--green)}
.vhk{display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dk-ac)}
.vhero h1{font-size:clamp(34px,5.6vw,68px);font-weight:900;letter-spacing:-.045em;
  line-height:1.02;margin:16px 0 26px;max-width:19ch}
.vhero .vlede{font-family:var(--ser);font-size:clamp(18px,2.1vw,24px);line-height:1.5;
  color:var(--dk-hi);margin:0 0 18px;max-width:62ch}
.vhero .vsub{font-family:var(--ser);font-size:17px;line-height:1.55;color:var(--dk-mu);
  margin:0;max-width:62ch;padding-top:18px;border-top:1px solid rgba(255,255,255,.2)}

.vstat{background:var(--band);border-bottom:1px solid var(--rule)}
.vstat .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.vstat div{padding:20px 18px 20px 0;border-right:1px solid var(--rule)}
.vstat div:last-child{border-right:0;padding-right:0}
.vstat b{display:block;font-size:34px;font-weight:900;letter-spacing:-.045em;
  color:var(--green);line-height:1;font-variant-numeric:tabular-nums}
.vstat span{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);
  line-height:1.6;margin-top:8px}
@media(max-width:980px){.vstat .wrap{grid-template-columns:repeat(3,1fr)}
  .vstat div:nth-child(3n){border-right:0}
  .vstat div{padding-right:18px}}
@media(max-width:560px){.vstat .wrap{grid-template-columns:repeat(2,1fr)}
  .vstat div:nth-child(3n){border-right:1px solid var(--rule)}
  .vstat div:nth-child(2n){border-right:0}}

.vsec{display:grid;grid-template-columns:190px 1fr;gap:0 40px;padding:46px 0;
  border-bottom:1px solid var(--rule)}
.vsec:last-of-type{border-bottom:0}
.vsec > *{min-width:0}
.vn{position:sticky;top:74px;align-self:start}
.vn > span:first-child{display:block;font-family:var(--mono);font-size:46px;font-weight:600;
  color:var(--green);opacity:.32;line-height:.9;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;margin-bottom:12px}
.vk{display:block;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.vbody h2{font-size:clamp(24px,3.1vw,36px);font-weight:900;letter-spacing:-.038em;
  line-height:1.08;margin:0 0 22px;max-width:29ch}
.vbody p{font-family:var(--ser);font-size:17.5px;line-height:1.62;color:var(--ink);
  margin:0 0 16px;max-width:70ch}
.receipt{font-family:var(--hed)!important;font-size:14px!important;line-height:1.6!important;
  color:var(--body)!important;background:var(--green-pale);border-left:3px solid var(--green);
  padding:13px 17px;margin:22px 0 0!important;max-width:70ch}
.receipt b{display:block;font-family:var(--mono);font-size:9.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green);margin-bottom:5px}
.receipt a{color:var(--green);text-decoration:underline;text-underline-offset:3px}
@media(max-width:900px){.vsec{grid-template-columns:1fr;gap:0;padding:34px 0}
  .vn{position:static;display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
  .vn > span:first-child{font-size:28px;margin:0}}

.vdist{background:var(--ink);color:#fff;padding:56px 0}
.vdh{max-width:74ch;margin-bottom:34px}
.vdh h2{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.035em;
  line-height:1.1;margin:14px 0 16px}
.vdh p{font-family:var(--ser);font-size:17px;line-height:1.6;color:var(--ik-mu);margin:0}
/* held to a tight measure so the pivot sits between the two terms and they
   still read as a pair rather than as two separate columns */
.vpairs{list-style:none;margin:0;padding:0;max-width:880px;
  border-top:1px solid rgba(255,255,255,.22)}
.vpairs li{display:grid;grid-template-columns:1fr 92px 1fr;gap:18px;align-items:baseline;
  padding:15px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.vpairs .na{font-size:19px;font-weight:700;letter-spacing:-.02em;text-align:right;color:var(--ik-dm)}
.vpairs .ne{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dk-ac);text-align:center}
.vpairs .nb{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#fff}
@media(max-width:700px){.vpairs li{grid-template-columns:1fr;gap:3px;padding:13px 0}
  .vpairs .na{text-align:left}.vpairs .ne{text-align:left}}
.vdf{font-family:var(--ser);font-size:17.5px;line-height:1.6;color:var(--ik-tx);
  margin:30px 0 0;max-width:74ch;padding-top:22px;border-top:2px solid var(--green)}

.vclose{background:var(--green-dk);color:#fff;padding:60px 0 64px;border-top:4px solid var(--green)}
.vc1{font-family:var(--ser);font-size:clamp(18px,2.1vw,23px);line-height:1.55;
  color:var(--dk-hi);margin:0 0 30px;max-width:64ch}
.vc2{font-size:clamp(24px,3.4vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.12;
  margin:0 0 40px;max-width:22ch}
.vsig{display:flex;align-items:center;gap:34px;flex-wrap:wrap;
  padding:28px 0;border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22)}
.vsig img{width:186px;height:auto}
.vtag{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--dk-mu);
  line-height:2;margin:0}
.vtag b{color:#fff;font-weight:600}
.vyor{font-family:var(--ser);font-style:italic;font-size:19px;color:#fff;margin:0 0 0 auto}
@media(max-width:640px){.vyor{margin:0}}
.vcta{display:flex;gap:11px;flex-wrap:wrap;margin:32px 0 0}
.vcta .btn{background:var(--green);border-color:var(--green)}
.vcta .btn:hover{background:#fff;border-color:#fff;color:var(--green-dk)}
.vcta .vq{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.vcta .vq:hover{background:#fff;color:var(--green-dk);border-color:#fff}

/* ═══ dates ═══
   Every item carries the day it happened, visibly and machine-readably. A dated
   report can be checked against the day it describes; an undated one cannot. */
.dline{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 6px;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.dline time{color:var(--ink)}
/* today's reports carry the signal in the date itself, in the same red the
   ticker uses, rather than in a second badge */
.dline.new time{color:var(--red)}
.dline .dsec{color:var(--green)}
.dline .dsec::before{content:"·";margin-right:9px;color:var(--rule)}
.wide .dline,.teasers .dline{margin-bottom:5px}
.lead .dline{font-size:11.5px;margin-bottom:10px}

/* ═══ photograph proportions ═══
   Free-licensed photographs arrive in whatever shape their author took them.
   A portrait at full column width swallows the page, so photographs are cropped
   to news proportions with the crop biased upward, where faces and buildings
   are. Drawings keep their own geometry: they were made to fit. */
.fig img[src*="photos/"],.figure img[src*="photos/"]{object-fit:cover;object-position:center 24%}
.lead .fig img[src*="photos/"]{aspect-ratio:3/2}
.teasers .fig img[src*="photos/"]{aspect-ratio:16/9}
.wide .fig img[src*="photos/"]{aspect-ratio:1/1}
.figure img[src*="photos/"]{aspect-ratio:3/2}
.brief .fig img[src*="photos/"]{aspect-ratio:16/9}

/* ═══ the section index ═══
   One report a row. Their pictures arrive in every shape - a square portrait, a wide
   budget table - and left alone a near-square portrait takes a whole phone screen per
   card. The same proportions as the front page apply, so the list stays scannable. */
/* The picture is sized by narrowing the column, never by capping its height: a
   max-height fights the aspect-ratio, widens the crop to a letterbox strip and
   takes the top off every face. Width sets the size, the ratio keeps the shape. */
.seclist{display:grid;gap:40px;margin:40px 0;max-width:620px}
.seclist .fig img{aspect-ratio:16/9;object-fit:cover;object-position:center 24%}
.seclist .fig img[src*="evidence/"]{aspect-ratio:16/10;object-position:top}
@media(max-width:600px){.seclist{gap:30px}}

/* ═══ document figures and the lightbox ═══
   A scanned page is evidence, and evidence has to be readable. At column width it is
   not, and the files run from square to four times taller than wide, so a story with
   two of them lurches. Every document figure therefore sits in a box of one proportion,
   showing its top, and opens full size on click. The whole file is one click away, so
   cropping the preview costs the reader nothing. */
.figure--doc .figure__open{display:block;width:100%;padding:0;border:0;background:none;
  position:relative;cursor:zoom-in;line-height:0}
.figure--doc .figure__open img{width:100%;height:auto;aspect-ratio:16/10;
  object-fit:cover;object-position:top;background:var(--green-pale);
  border:1px solid var(--rule)}
.figure--doc .figure__open:hover img{border-color:var(--green)}
.figure--doc .figure__open:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.figure__hint{position:absolute;right:8px;bottom:8px;font-family:var(--mono);
  font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;line-height:1;
  color:#fff;background:rgba(4,73,42,.9);padding:6px 9px;border-radius:2px}
.figure--doc .figure__open:hover .figure__hint{background:var(--green)}

html.lb-open{overflow:hidden}
.lb{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:#15181a}
.lb[hidden]{display:none}
.lb-bar{flex:0 0 auto;display:flex;justify-content:flex-end;gap:6px;
  padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.12)}
.lb-b{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#dfe6e2;background:rgba(255,255,255,.08);
  border:0;border-radius:2px;padding:10px 14px;cursor:pointer}
.lb-b:hover{background:rgba(255,255,255,.18);color:#fff}
.lb-b:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.lb-stage{flex:1 1 auto;overflow:auto;overscroll-behavior:contain;
  display:flex;align-items:center;justify-content:center;padding:18px;cursor:zoom-in}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;background:#fff}
/* Centring a picture wider than its scroll box starts the reader in the middle of the
   table, with the row labels off to the left. Zoomed, it begins at the left edge. */
.lb-stage.is-zoomed{align-items:flex-start;justify-content:flex-start;cursor:zoom-out}
.lb-stage.is-zoomed img{max-width:none;max-height:none;width:auto}
.lb-cap{flex:0 0 auto;margin:0;padding:12px 18px 16px;font-family:var(--mono);
  font-size:10.5px;line-height:1.55;color:#98a29d;text-align:center;
  border-top:1px solid rgba(255,255,255,.12)}
@media(max-width:700px){
  .lb-stage{padding:10px}
  .lb-cap{font-size:9.5px;padding:10px 12px 14px}
}

/* ═══ document proportions ═══
   A full-page capture of a government site can be four times taller than it is
   wide. At full column width such an image stretches its card down the page and
   the story beside it loses its shape. On a card the capture is a thumbnail, so
   it is capped and anchored to its top, where the masthead and the headline are;
   the story page below shows the same file whole and unclipped, because there it
   is evidence and has to be readable. Short documents are left alone. */
.fig img[src*="evidence/"]{object-fit:cover;object-position:top;max-height:440px}
.lead .fig img[src*="evidence/"]{max-height:520px}
.teasers .fig img[src*="evidence/"]{max-height:300px}
.brief .fig img[src*="evidence/"]{max-height:260px}

/* ═══ the latest line ═══
   One line, not a block. A breaking strip that takes seven rows pushes the
   paper down the page and reads as a widget; a newspaper puts the newest
   headlines on a single rule under the masthead and moves on. */
.ticker{border-bottom:1px solid var(--rule);background:var(--white)}
.ticker .wrap{display:flex;align-items:stretch;gap:0;padding:0 26px}
.tlab{flex:0 0 auto;display:flex;align-items:center;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:0 13px;margin-right:2px}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;
  overflow-x:auto;scrollbar-width:none;flex:1}
.ticker ul::-webkit-scrollbar{display:none}
.ticker li{flex:0 0 auto;display:flex;align-items:center;gap:9px;white-space:nowrap;
  padding:11px 18px;border-right:1px solid var(--hair)}
.ticker li:last-child{border-right:0}
.ticker time{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red)}
.ticker li a{font-size:13.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.ticker li time{display:flex;align-items:center;padding-left:20px}
.ticker li time + a{padding-left:9px}
.ticker li a:hover{color:var(--red)}
@media(max-width:760px){.ticker .wrap{padding:0 0 0 0}
  .tlab{padding:0 11px}.ticker li{padding:10px 14px}}

/* ═══ the latest line ═══
   One line under the masthead, running continuously. The animation moves a
   transform and nothing else, so the compositor handles it on the GPU and the
   main thread stays free: no layout, no paint, no jank on a long page. The list
   is emitted twice and the first copy translates by exactly its own width, so
   the loop closes on itself instead of snapping back. */
.ticker{display:flex;align-items:stretch;border-bottom:1px solid var(--rule);
  background:var(--white);overflow:hidden}
.tlab{flex:0 0 auto;display:flex;align-items:center;background:var(--red);color:#fff;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;padding:0 14px;position:relative;z-index:2}
.track{display:flex;flex:1;min-width:0;overflow:hidden}
.run{display:flex;flex:0 0 auto;list-style:none;margin:0;padding:0;
  animation:tick var(--tick,80s) linear infinite;will-change:transform}
@keyframes tick{from{transform:translate3d(0,0,0)}to{transform:translate3d(-100%,0,0)}}
.ticker:hover .run,.ticker:focus-within .run{animation-play-state:paused}
/* the row is the hit area: a 20px line of text is below the 44px floor */
.ticker li{flex:0 0 auto;display:flex;align-items:stretch;gap:0;white-space:nowrap;
  border-right:1px solid var(--hair)}
.ticker li a{display:flex;align-items:center;gap:9px;padding:14px 20px}
.ticker time{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red)}
.ticker li a{font-size:13.5px;font-weight:600;letter-spacing:-.008em;color:var(--ink)}
.ticker li time{display:flex;align-items:center;padding-left:20px}
.ticker li time + a{padding-left:9px}
.ticker li a:hover,.ticker li a:focus-visible{color:var(--red)}
/* a reader who has asked for less motion gets a static, scrollable strip */
@media(prefers-reduced-motion:reduce){
  .run{animation:none}
  .track{overflow-x:auto;scrollbar-width:none}
  .track::-webkit-scrollbar{display:none}
  .run[aria-hidden="true"]{display:none}
}
@media(max-width:760px){.tlab{padding:0 11px}.ticker li{padding:10px 15px}}

/* ═══ what we did ourselves ═══
   Every report says what this publication added that the source reporting did
   not have: a sum checked, a register queried, an absence counted. Where it
   says we added nothing, that is the honest answer and it is printed too. */
.ownwork{border-top:3px solid var(--green);background:var(--green-pale);
  padding:16px 20px 18px;margin:30px 0 0}
.ownwork h3{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  margin:0 0 10px;color:var(--green-dk)}
.ownwork p{font-family:var(--ser);font-size:15.5px;line-height:1.55;color:var(--ink);margin:0}
@media print{.ownwork{background:none;border-top:2pt solid #000}}

/* ── Archive ───────────────────────────────────────────────────────────────
   A reference room, not a feed. The month is the spine, the search reads the
   whole of every piece, and the filters are plain buttons so the page needs no
   framework and works with the keyboard. */
.arc-head{max-width:64ch;padding:38px 0 0}
.arc-head h1{font-family:var(--hed);font-size:clamp(34px,5vw,48px);font-weight:800;
  letter-spacing:-.028em;line-height:1.04;margin:0 0 14px;color:var(--ink)}
.arc-sub{font-family:var(--ser);font-size:17px;line-height:1.55;color:var(--body);margin:0}

.arc-tools{position:sticky;top:0;z-index:20;background:var(--white);
  border-bottom:1px solid var(--rule);margin:30px 0 0;padding:18px 0 14px}
.arc-sbox{position:relative}
.arc-sbox input{width:100%;box-sizing:border-box;font-family:var(--hed);font-size:17px;
  padding:14px 44px 14px 16px;border:1.5px solid var(--rule);border-radius:2px;
  background:var(--white);color:var(--ink);-webkit-appearance:none;appearance:none}
.arc-sbox input::placeholder{color:var(--muted)}
.arc-sbox input:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.arc-sbox input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(10,125,67,.13)}
.arc-sbox input::-webkit-search-cancel-button{display:none}
.arc-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:none;cursor:pointer;
  font-size:22px;line-height:1;color:var(--muted);border-radius:2px}
.arc-clear:hover{color:var(--ink);background:var(--band)}

.arc-filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin:12px 0 0}
.arc-f{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:8px 13px;min-height:34px;cursor:pointer;
  border:1px solid var(--rule);background:var(--white);color:var(--muted);border-radius:2px}
.arc-f:hover{border-color:var(--green-ln);color:var(--ink)}
.arc-f:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.arc-f.is-on{background:var(--green-dk);border-color:var(--green-dk);color:#fff}
.arc-fsep{width:1px;height:20px;background:var(--rule);margin:0 4px}
.arc-count{font-family:var(--mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin:11px 0 0}

.arc-month{margin:34px 0 0}
.arc-mh{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 4px;padding:0 0 9px;
  border-bottom:1px solid var(--rule)}
.arc-list{list-style:none;margin:0;padding:0}
.arc-item{border-bottom:1px solid var(--hair)}
.arc-a{display:block;padding:17px 0;text-decoration:none;color:inherit}
.arc-a:hover .arc-h,.arc-a:focus-visible .arc-h{color:var(--green)}
.arc-a:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.arc-meta{display:flex;align-items:center;gap:11px;margin:0 0 5px;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.arc-sec{color:var(--green)}
.arc-g{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;font-size:9px;color:#fff}
.arc-gA{background:var(--a)}.arc-gB{background:var(--b)}.arc-gC{background:var(--c)}
.arc-h{display:block;font-family:var(--hed);font-size:19px;font-weight:700;
  letter-spacing:-.018em;line-height:1.28;color:var(--ink);margin:0 0 5px;
  transition:color .12s}
.arc-b{display:block;font-family:var(--ser);font-size:15px;line-height:1.5;
  color:var(--body);max-width:78ch}
.arc-none{font-family:var(--ser);font-size:16px;line-height:1.6;color:var(--body);
  padding:44px 0;max-width:60ch}
.arc-none code{font-family:var(--mono);font-size:13px;background:var(--band);
  padding:2px 5px;border-radius:2px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}
@media(max-width:620px){
  .arc-tools{position:static}
  .arc-h{font-size:17px}
  .arc-b{font-size:14.5px}
}

/* ── Footer ────────────────────────────────────────────────────────────────
   Three columns of links that all go somewhere. No social placeholders, no
   Privacy and Terms pointing at "#": a dead link in the footer is the fastest
   way to tell a reader the rest of the page is decoration too. */
.foot{background:var(--green-dk);color:var(--dk-tx);margin:70px 0 0;padding:46px 0 26px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:34px;padding:0 0 32px;border-bottom:1px solid rgba(255,255,255,.16)}
.foot h4{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:#fff;margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0 0 9px}
.foot a{color:var(--dk-tx);text-decoration:none;font-size:14px;
  border-bottom:1px solid transparent;transition:border-color .12s,color .12s}
.foot a:hover,.foot a:focus-visible{color:var(--dk-hi);border-bottom-color:var(--dk-ac)}
.foot-note{padding:28px 0;border-bottom:1px solid rgba(255,255,255,.16);max-width:76ch}
.foot-note p{font-family:var(--ser);font-size:14px;line-height:1.6;margin:0 0 11px}
.foot-note strong{color:#fff}
.foot-dim{color:var(--dk-mu);font-size:13px!important}
.foot-dim strong{color:var(--dk-tx)}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;
  padding:22px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dk-mu)}

/* ── Footer ────────────────────────────────────────────────────────────────
   One footer for the whole site, built by footer.js. Every link goes somewhere
   real; the icons are inline SVG so nothing is fetched from anywhere. */
.vfoot{background:#fff;color:var(--body);margin:76px 0 0;
  border-top:2px solid var(--green);font-family:var(--hed)}
.vfoot-in{max-width:1200px;margin:0 auto;padding:0 var(--gut)}

.vfoot-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);
  gap:48px;padding:52px 0 40px}
.vfoot-word{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:var(--ink);margin:0 0 12px}
.vfoot-word img{display:block;width:140px;height:auto}
.vfoot-word span{display:block;font-size:12px;font-weight:600;letter-spacing:.42em;
  color:var(--green);margin:6px 0 0}
.vfoot-line{font-family:var(--ser);font-size:14.5px;line-height:1.5;
  color:var(--muted);margin:0 0 22px;max-width:30ch}
.vfoot-line b{color:var(--ink);font-weight:600}

.vfoot-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.vfoot-social a{display:inline-flex;align-items:center;gap:8px;
  min-height:38px;padding:0 13px;border:1px solid var(--rule);
  border-radius:2px;color:var(--ink);text-decoration:none;
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;transition:border-color .14s,color .14s}
.vfoot-social a:hover,.vfoot-social a:focus-visible{color:var(--green-dk);border-color:var(--green)}
.vfoot-social svg{flex:0 0 auto}
/* Social icons in their own brand colours: they read better on the white footer. */
.vfoot-social a[href*="x.com"] svg{color:#000}
.vfoot-social a[href*="reddit.com"] svg{color:#ff4500}
.vfoot-social a[href*="rss"] svg,.vfoot-social a[href$=".xml"] svg{color:#f26522}


.vfoot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:30px}
.vfoot-cols h4{font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;
  padding:0 0 9px;border-bottom:1px solid var(--hair)}
.vfoot-cols ul{list-style:none;margin:0;padding:0}
.vfoot-cols li{margin:0 0 10px}
.vfoot-cols a{color:var(--body);text-decoration:none;font-size:14px;
  border-bottom:1px solid transparent;transition:color .14s,border-color .14s}
.vfoot-cols a:hover,.vfoot-cols a:focus-visible{color:var(--green-dk);border-bottom-color:var(--green)}
.vfoot-tip{font-family:var(--ser);font-size:12.5px;line-height:1.5;
  color:var(--muted);margin:14px 0 0}

.vfoot-mid{border-top:1px solid var(--hair);padding:26px 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:26px 48px}
.vfoot-mid p{font-family:var(--ser);font-size:13.5px;line-height:1.62;margin:0;max-width:62ch}
.vfoot-mid b{color:var(--ink);font-weight:600}
.vfoot-dim{color:var(--muted);font-size:12.5px!important}
.vfoot-dim b{color:var(--body)}

.vfoot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
  border-top:1px solid var(--hair);padding:20px 0 26px;
  font-family:var(--mono);font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted)}

.vfoot a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(max-width:840px){
  .vfoot-top{grid-template-columns:1fr;gap:38px;padding:40px 0 30px}
}

/* ── Dossier viewer ────────────────────────────────────────────────────────
   Pictures of pages, not a document. Chrome is deliberately thin: a bar at the
   top, a rail of thumbnails when asked for, and otherwise nothing between the
   reader and the page. */
.vw{position:fixed;inset:0;display:flex;flex-direction:column;background:#22262a}
.vw-bar{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  padding:0 12px;height:54px;background:#15181a;color:#dfe6e2;
  border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:3}
.vw-bar a.back{display:flex;align-items:center;gap:8px;color:#dfe6e2;
  text-decoration:none;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:10px 8px;border-radius:2px}
.vw-bar a.back:hover{color:#fff;background:rgba(255,255,255,.07)}
.vw-ttl{flex:1 1 auto;min-width:0;font-family:var(--hed);font-size:13.5px;
  font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;color:#fff}
.vw-grp{display:flex;align-items:center;gap:4px;flex:0 0 auto}
.vw-b{display:inline-flex;align-items:center;justify-content:center;
  min-width:38px;height:38px;padding:0 10px;border:0;border-radius:2px;
  background:rgba(255,255,255,.07);color:#dfe6e2;cursor:pointer;
  font-family:var(--mono);font-size:15px;line-height:1}
.vw-b:hover:not(:disabled){background:rgba(255,255,255,.16);color:#fff}
.vw-b:disabled{opacity:.3;cursor:default}
.vw-b[aria-expanded="true"]{background:var(--green);color:#fff}
.vw-jump{display:flex;align-items:center;gap:6px;font-family:var(--mono);
  font-size:11px;color:#98a29d}
.vw-jump input{width:62px;height:38px;text-align:center;border-radius:2px;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);color:#fff;
  font-family:var(--mono);font-size:13px;-moz-appearance:textfield}
.vw-jump input::-webkit-outer-spin-button,
.vw-jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vw-jump input:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.vw-count{font-family:var(--mono);font-size:11px;color:#98a29d;
  min-width:78px;text-align:right;font-variant-numeric:tabular-nums}

.vw-read{position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--green);transition:width .18s ease-out}

.vw-body{flex:1 1 auto;display:flex;min-height:0}

/* the rail */
.vw-rail{flex:0 0 0;width:0;overflow:hidden;background:#15181a;
  border-right:1px solid rgba(255,255,255,.1);transition:width .16s ease-out}
.vw-rail.open{width:168px}
.vw-strip{height:100%;overflow-y:auto;overscroll-behavior:contain;
  padding:12px 10px 40px;display:grid;gap:10px;scrollbar-width:thin}
.th{display:block;width:100%;padding:0;border:1px solid transparent;
  background:none;cursor:pointer;position:relative;border-radius:2px;line-height:0}
.th img{width:100%;height:auto;display:block;background:#2c3237;border-radius:1px}
.th span{position:absolute;right:4px;bottom:4px;font-family:var(--mono);
  font-size:9px;line-height:1;padding:3px 5px;border-radius:2px;
  background:rgba(0,0,0,.72);color:#cfd8d3}
.th:hover{border-color:rgba(255,255,255,.3)}
.th[aria-current]{border-color:var(--green);box-shadow:0 0 0 2px rgba(10,125,67,.45)}
.th:focus-visible{outline:2px solid var(--green);outline-offset:2px}

/* the pages */
.vw-stage{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  scroll-behavior:smooth;padding:22px 16px 80px;--ratio:0.707}
@media(prefers-reduced-motion:reduce){.vw-stage{scroll-behavior:auto}}
.pg{position:relative;margin:0 auto 22px;max-width:min(1100px,100%);
  background:#fff;box-shadow:0 2px 14px rgba(0,0,0,.34);border-radius:1px}
.pg img{display:block;width:100%;height:auto;aspect-ratio:var(--ratio);
  background:#fff;-webkit-user-select:none;user-select:none;
  -webkit-user-drag:none;pointer-events:none}
.pg figcaption{position:absolute;right:-1px;bottom:-1px;
  font-family:var(--mono);font-size:9.5px;line-height:1;padding:4px 7px;
  background:rgba(21,24,26,.82);color:#cfd8d3;border-radius:2px 0 0 0}
.pg.fail{min-height:220px;display:flex;align-items:center;justify-content:center}
.pg.fail::after{content:"This page did not load. Scroll away and back.";
  font-family:var(--ser);font-size:14px;color:#6d7570}

.vw-note{max-width:1100px;margin:0 auto;padding:6px 2px 30px;
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:#6f7a75;text-align:center}

@media(max-width:860px){
  .vw-bar{height:50px;gap:6px;padding:0 8px}
  .vw-ttl{display:none}
  .vw-jump span{display:none}
  .vw-rail{position:absolute;top:50px;bottom:0;left:0;z-index:2;
    box-shadow:8px 0 26px rgba(0,0,0,.4)}
  .vw-rail.open{width:150px}
  .vw-stage{padding:12px 8px 70px}
  .pg{margin-bottom:14px}
  .vw-count{min-width:66px}
}

/* ── Viewer: toolbar groups, zoom, single page, page grid ─────────────────── */
.vw-mid{flex:1 1 auto;justify-content:center}
.vw-right{flex:0 0 auto}
.vw-zoom{font-family:var(--mono);font-size:10.5px;color:#98a29d;min-width:44px;
  text-align:center;font-variant-numeric:tabular-nums}
.vw-b[aria-pressed="true"]{background:var(--green);color:#fff}

/* zoom scales the page column, not the image, so the picture stays sharp */
.vw-stage{--zoom:1}
.pg{max-width:min(calc(1100px * var(--zoom)),100%)}

/* one page at a time: the stage holds a single figure, centred */
.vw.single .vw-stage{display:flex;align-items:flex-start;justify-content:center;
  padding-top:18px}
.vw.single .pg{margin-bottom:0}

/* the page grid */
.vw-gridwrap{position:fixed;inset:0;z-index:20;display:none;
  background:rgba(8,10,11,.86);padding:26px 18px}
.vw-gridwrap.open{display:flex;align-items:center;justify-content:center}
.vw-gridbox{width:100%;max-width:1180px;max-height:100%;display:flex;
  flex-direction:column;background:#15181a;border:1px solid rgba(255,255,255,.12);
  border-radius:3px;overflow:hidden}
.vw-gridbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 12px 12px 18px;border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:#dfe6e2}
.vw-grid{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;padding:16px;
  display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.gt{display:block;padding:0;border:1px solid transparent;background:none;
  cursor:pointer;position:relative;border-radius:2px;line-height:0}
.gt img{width:100%;height:auto;display:block;background:#2c3237;border-radius:1px}
.gt span{position:absolute;right:4px;bottom:4px;font-family:var(--mono);font-size:9px;
  line-height:1;padding:3px 5px;border-radius:2px;background:rgba(0,0,0,.74);color:#cfd8d3}
.gt:hover{border-color:rgba(255,255,255,.34)}
.gt[aria-current]{border-color:var(--green);box-shadow:0 0 0 2px rgba(10,125,67,.5)}
.gt:focus-visible{outline:2px solid var(--green);outline-offset:2px}

@media(max-width:860px){
  .vw-mid{order:3;flex:1 1 100%}
  .vw-bar{flex-wrap:wrap;height:auto;padding:6px 8px;gap:4px}
  .vw-right .vw-zoom{display:none}
  .vw-grid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;padding:10px}
  .vw-gridwrap{padding:10px}
  .pg{max-width:min(calc(100% * var(--zoom)),100%)}
}

/* ── Viewer on a phone ─────────────────────────────────────────────────────
   An A4 page across 390px puts the body text at about four pixels. Fitting the
   page to the screen is therefore the one thing not to do: the reader opens at
   a readable size and pans, the way every document reader on a phone works.
   That needs the stage to scroll sideways as well as down, and the page to be
   allowed to grow past the viewport - both of which the desktop rules blocked. */
@media(max-width:860px){
  /* one row, not two: the bar was eating a fifth of the screen */
  .vw-bar{flex-wrap:nowrap;height:48px;padding:0 6px;gap:3px;overflow:hidden}
  .vw-bar a.back{padding:10px 6px;font-size:0}
  .vw-bar a.back::before{content:"\2190";font-size:15px}
  .vw-mid{order:0;flex:1 1 auto;gap:2px;justify-content:flex-end}
  .vw-b{min-width:34px;height:34px;padding:0 7px;font-size:14px}
  .vw-jump input{width:50px;height:34px;font-size:12px}
  .vw-count{min-width:0;font-size:10px;padding-left:2px}
  .vw-right{gap:2px}

  /* the page may be wider than the screen, and the stage pans to it */
  .vw-stage{overflow:auto;-webkit-overflow-scrolling:touch;
    touch-action:pan-x pan-y pinch-zoom;padding:10px 0 60px}
  .pg{max-width:none;width:calc(100% * var(--zoom));margin:0 auto 12px}
  .vw.single .vw-stage{display:block}
  .vw.single .pg{margin-bottom:0}
}

/* Search tab: magnifier instead of the word */
nav a .navsearch{display:block;margin:-1px 0}

/* Cards: every cover sits in the same 16:9 frame whatever its source size, so a tall
   document or portrait can never stretch a card row. Top-anchored: faces and
   document headers stay in view. */
.fig img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center top}

/* Top strip: plain sans instead of the monospace, as owner asked 1 Oct. */
.strip{font-family:var(--hed);font-size:12px;letter-spacing:.02em}
.strip b{font-weight:600}

/* Share bar on report pages (built by folio.js). */
.sharebar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 18px}
.sharelbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-right:4px}
.sharebtn{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--hed);color:var(--ink);background:#fff;border:1px solid var(--rule);border-radius:3px;padding:9px 12px;cursor:pointer}
.sharebtn:hover,.sharebtn:focus-visible{border-color:var(--green);color:var(--green)}
.s-whatsapp svg{color:#1f9d55}.s-instagram svg{color:#c13584}
.sharenote{font-family:var(--mono);font-size:11px;color:var(--green);flex-basis:100%}
.sharenote:empty{display:none}
@media print{.sharebar{display:none}}

/* Share control beside the section line above the headline. */
.haskick{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sharetop{position:relative;margin-left:auto}
.sharetopbtn{display:inline-flex;align-items:center;gap:8px;font:600 14px/1 var(--hed);color:var(--ink);background:none;border:0;padding:6px 2px;cursor:pointer}
.sharetopbtn:hover,.sharetopbtn:focus-visible,.sharetopbtn[aria-expanded="true"]{color:var(--green)}
.sharepanel{position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:max-content;max-width:min(92vw,520px);margin:0;padding:12px;background:#fff;border:1px solid var(--rule);box-shadow:0 8px 24px rgba(0,0,0,.12);border-radius:4px}
.sharepanel[hidden]{display:none}
.sharepanel .sharelbl{display:none}
@media print{.sharetop{display:none}}

/* Launch entry to File 01 on the front page: one quiet line, one button. */
.launchbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:22px 0 4px;padding:12px 16px;
  border:1px solid var(--rule);border-left:4px solid var(--ochre-dk,#9a5b13);background:#fff;color:var(--ink);text-decoration:none}
.launchbar .lb-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ochre-dk,#9a5b13)}
.launchbar .lb-t{font-family:var(--hed);font-weight:800;font-size:18px;letter-spacing:-.01em}
.launchbar .lb-d{font-family:var(--ser);font-size:15px;color:var(--body)}
.launchbar .lb-b{margin-left:auto;font:600 13px/1 var(--hed);color:#fff;background:var(--green-dk);padding:10px 14px;border-radius:2px;white-space:nowrap}
.launchbar:hover .lb-b,.launchbar:focus-visible .lb-b{background:var(--green)}
@media(max-width:600px){.launchbar .lb-b{margin-left:0}}
@media print{.launchbar{display:none}}