/* Cry Wolf Movie — the picked direction, 1A "The Dark Room" (rebuilt from PICK_SOURCE) */
:root{
  --ground:#0C0C0E;   /* ground */
  --mat:#171719;      /* raised panel */
  --ink:#EDE7DA;      /* ink */
  --ink-2:#D6D1C7;
  --quiet:#8C8A85;
  --rule:#2A2A2E;
  --rule-2:#34343A;
  --crimson:#C0142B;  /* accent: active states, one pull-quote per page, the emblem band */
  --ember:#C96442;    /* secondary: 2016 */
  --prose:38rem;
  --wide:1180px;
  --body:18px;
  --pad:clamp(20px,4.4vw,56px);
  --display:"Anton",Impact,sans-serif;
  --statement:"Instrument Serif",Georgia,serif;
  --text:"Spectral",Georgia,serif;
  --label:"Karla",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--text);font-size:var(--body);line-height:1.68;text-wrap:pretty}
img{display:block;max-width:100%;height:auto}
a{color:var(--ink)}
a:hover{color:var(--crimson)}
h1,h2,h3{font-family:var(--display);font-weight:400;text-transform:uppercase;line-height:1.02;margin:0}
p{margin:0 0 22px}
.ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.emblem{fill:none;stroke:currentColor;stroke-width:16;stroke-linejoin:round}
.emblem--big{stroke-width:7}

/* ---- widths ---- */
.wrap{max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.band{border-bottom:1px solid var(--rule)}
.pad{padding-block:clamp(44px,5.6vw,88px)}
.pad-s{padding-block:clamp(32px,3.4vw,56px)}
.kick{font-family:var(--label);font-size:13px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#0C0C0E;background:var(--crimson);padding:6px 12px;display:inline-flex;align-items:center;gap:8px;margin-block:0 22px}
.kick--quiet{background:none;color:var(--quiet);padding:0}
.eyebrow{font-family:var(--label);font-size:13px;letter-spacing:.26em;text-transform:uppercase;color:var(--quiet);margin:0 0 18px}
.statement{font-family:var(--statement);font-style:italic;font-size:clamp(30px,4.2vw,62px);line-height:1.12;margin:0;max-width:36ch}

/* ---- masthead (as picked: crimson hairline, emblem + wordmark, one row of labels) ---- */
.mast{border-bottom:1px solid var(--rule)}
.mast .bar{height:4px;background:var(--crimson)}
.mast-in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:24px var(--pad) 20px}
.logo{display:flex;align-items:center;gap:20px;text-decoration:none;color:var(--ink)}
.logo svg{width:46px;height:46px;color:var(--crimson);flex:0 0 auto}
.logo b{display:block;font-family:var(--display);font-weight:400;font-size:clamp(30px,3vw,44px);line-height:.92;text-transform:uppercase}
.logo small{display:block;font-family:var(--label);font-size:12.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--quiet);margin-top:6px}
.nav{display:flex;flex-wrap:wrap;gap:clamp(12px,1.6vw,26px);font-family:var(--label);font-size:14px;font-weight:500;letter-spacing:.15em;text-transform:uppercase}
.nav a{display:inline-flex;align-items:center;gap:7px;text-decoration:none;padding:5px 0;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--rule-2)}
.nav a[aria-current]{color:var(--crimson);border-bottom-color:var(--crimson)}
.nav .quiet{color:var(--quiet)}
.mast-toggle,.mast-toggle-label{display:none}

/* ---- hero: the one-sheet at poster scale beside the opening column ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr);border-bottom:1px solid var(--rule)}
.hero .poster{background:none;align-self:start;aspect-ratio:580/859;min-height:0;overflow:hidden;padding:0}
.hero .poster img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero .col{padding:clamp(32px,4vw,68px) var(--pad) clamp(28px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between}
.hero h1{font-size:clamp(34px,4.4vw,72px);margin:0 0 26px}
.hero .dek{font-size:clamp(18px,1.4vw,21px);line-height:1.6;color:var(--ink-2);max-width:48ch}
.credits{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);font-family:var(--label);font-size:15.5px;line-height:1.85;color:var(--quiet)}
.credits b{color:var(--ink);font-weight:700}

/* ---- figures: three treatments, one drawing system ---- */
figure{margin:0}
.figcap{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:baseline;padding-top:12px}
.figcap .cap{font-family:var(--label);font-size:16.5px;line-height:1.55;flex:1 1 300px;min-width:0}
.figcap .cred{font-family:var(--label);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet);flex:0 1 auto;margin-left:auto}
/* 1 — full-bleed band with the caption set in the middle third */
.fig-bleed img{width:100%;height:clamp(260px,44vw,700px);object-fit:cover;background:#000}
.fig-bleed img.portrait{object-fit:contain;padding-block:12px}
.fig-bleed .under{display:grid;grid-template-columns:minmax(0,1fr);padding:16px var(--pad) 28px;max-width:1560px;margin-inline:auto}
.fig-bleed .under .figcap{padding-top:0}
/* 2 — mat: the photograph sits on a raised panel with an inset hairline, caption ruled in crimson */
.fig-mat{background:var(--mat);border:1px solid var(--rule);padding:16px}
.fig-mat img{width:100%;outline:1px solid rgba(237,231,218,.14);outline-offset:-1px}
.fig-mat .cap{border-left:2px solid var(--crimson);padding-left:14px}
/* 3 — inset: small, desaturated, breaks the column at large sizes */
.fig-inset{max-width:340px}
.fig-inset a{display:block}
.fig-inset img{width:100%;filter:saturate(.82)}
.fig-inset .figcap{border-top:1px solid var(--rule)}
.fig-inset .cred{margin-left:0;flex-basis:100%}
.svg-mark{background:#EDE7DA;object-fit:contain}
.fig-bleed img.svg-mark{height:clamp(180px,20vw,300px);padding:clamp(24px,4vw,72px)}
.poster-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:16px}
.poster-row a{display:block;text-decoration:none;color:var(--ink)}
.poster-row img{width:100%;aspect-ratio:2/3;height:auto;object-fit:cover;background:#08080A;border:1px solid var(--rule)}
.poster-row a:hover img{border-color:var(--crimson)}
.poster-row .nm{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(16px,1.2vw,21px);margin-top:12px}
.poster-row .sub{display:block;font-family:var(--label);font-size:13.5px;color:var(--quiet);margin-top:4px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.gallery img{width:100%;height:clamp(210px,22vw,320px);object-fit:contain;background:#08080A}
.map-figure .map-slot{aspect-ratio:16/9;background:var(--mat);border:1px dashed var(--rule)}

/* ---- the game band: unequal stills + the rules panel ---- */
.trio{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.trio .tall{position:relative;min-height:300px;background:#000}
.trio .tall img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.stack{display:grid;grid-template-rows:1fr 1fr;gap:20px}
.panel{border:1px solid var(--rule);padding:26px;font-family:var(--label)}
.panel ol{margin:0;padding-left:22px;font-size:16px;line-height:1.85;color:#CFCAC0}
.panel p{font-size:15px;line-height:1.7;color:var(--quiet);margin:22px 0 0}

/* ---- the fable band: crimson, once per site page ---- */
.fable{background:var(--crimson);color:#0C0C0E;padding:clamp(52px,7vw,116px) var(--pad);border-bottom:1px solid var(--rule)}
.fable-in{max-width:1560px;margin-inline:auto}
.fable-mark{font-family:var(--label);font-size:12.5px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;margin:0 0 26px;padding-bottom:14px;border-bottom:2px solid rgba(12,12,14,.35);display:inline-block}
.fable-line{font-family:var(--display);font-size:clamp(34px,6vw,104px);line-height:.98;text-transform:uppercase;margin:0 0 26px;max-width:24ch}
.fable-sub{font-family:var(--label);font-size:clamp(16px,1.3vw,19px);line-height:1.65;margin:0;max-width:62ch;color:#2A0A0F}
.fable-sub a{color:#0C0C0E;text-decoration:underline;text-underline-offset:3px}
.fable-sub a:hover{color:#FBE8E4}

/* ---- the emblem band: crimson, once per site page ---- */
.emblem-band{background:var(--crimson);color:#0C0C0E;padding:clamp(44px,6vw,92px) var(--pad);border-bottom:1px solid var(--rule)}
.emblem-band .in{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;max-width:1560px;margin-inline:auto}
.emblem-band svg{width:100%;max-width:360px;color:#0C0C0E}
.emblem-band .line{font-family:var(--display);font-size:clamp(30px,3.2vw,58px);line-height:1.06;text-transform:uppercase;margin:0 0 22px}
.emblem-band .sub{font-family:var(--label);font-size:18px;line-height:1.65;margin:0;max-width:58ch;color:#FBE8E4}

/* ---- cast strip ---- */
.cast-scroll{overflow-x:auto;padding:26px var(--pad) 8px}
.cast-row{display:flex;gap:18px;min-width:min-content}
.cast{flex:0 0 clamp(200px,18vw,280px);text-decoration:none;color:var(--ink)}
.cast img{width:100%;aspect-ratio:4/5;object-fit:cover;outline:1px solid var(--rule)}
.cast .nm{display:block;font-family:var(--display);text-transform:uppercase;font-size:clamp(19px,1.6vw,26px);margin-top:12px}
.cast .rl{display:block;font-family:var(--label);font-size:14.5px;color:var(--quiet);margin-top:4px}

/* ---- contact sheet ---- */
.sheet{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.sheet img{width:100%;height:clamp(150px,15vw,230px);object-fit:cover;background:#000}

/* ---- cards / lists ---- */
.cards{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{display:flex;flex-direction:column;background:var(--mat);border:1px solid var(--rule);text-decoration:none;color:var(--ink);height:100%}
.card:hover{border-color:var(--crimson)}
.card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card .body{padding:20px;display:flex;flex-direction:column;flex:1}
.card .sect{font-family:var(--label);font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--crimson);display:flex;align-items:center;gap:7px;margin-bottom:10px}
.card h3{font-size:clamp(20px,1.5vw,25px);min-height:2.1em}
.card p{font-family:var(--label);font-size:15.5px;line-height:1.6;color:var(--quiet);margin:12px 0 0}
.card .go{margin-top:auto;padding-top:16px;font-family:var(--label);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list a{display:block;padding:22px 0;text-decoration:none}
.cat-list h3{font-size:clamp(21px,1.8vw,30px)}
.cat-list p{font-family:var(--label);font-size:16px;color:var(--quiet);margin:8px 0 0;max-width:88ch}
.cat-list a:hover h3{color:var(--crimson)}
.related-links,.further-grid{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:0;padding:0;align-items:stretch}
.related-links li,.further-grid li{display:flex}
.related-links a,.further-grid a{flex:1}
.related-links a,.further-grid a{display:block;padding:18px;background:var(--mat);border:1px solid var(--rule);text-decoration:none;font-family:var(--label);font-size:17px;line-height:1.4}
.related-links a:hover,.further-grid a:hover{border-color:var(--crimson)}
.rl-thumbs a{padding:0;display:grid;grid-template-columns:96px minmax(0,1fr);align-items:stretch;gap:0}
.rl-thumbs img{width:96px;height:100%;min-height:88px;object-fit:cover;align-self:stretch}
.rl-thumbs span{padding:16px 18px;align-self:center}
.side-list{display:flex;flex-direction:column;gap:12px;font-family:var(--label);font-size:16px;line-height:1.5}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.profile-card{background:var(--mat);border:1px solid var(--rule);padding:18px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-size:23px}
.profile-card .p-role{font-family:var(--label);font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--crimson);margin:8px 0 12px}
.profile-card p{font-family:var(--label);font-size:15.5px;line-height:1.6;color:#CFCAC0}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.org-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--mat);border:1px solid var(--rule);text-decoration:none}
.org-logo{width:56px;height:40px;object-fit:contain;background:#000}
.org-name{display:block;font-family:var(--label);font-weight:700;font-size:16px}
.org-host{display:block;font-family:var(--label);font-size:13px;color:var(--quiet)}
.entity-ref{color:var(--crimson)}

/* ---- article components ---- */
.lead{font-size:clamp(20px,1.8vw,26px);line-height:1.5;color:var(--ink-2);margin-block:0 30px}
.article-body h2{font-size:clamp(25px,2.2vw,36px);margin-block:46px 16px}
.article-body h3{font-family:var(--label);font-weight:700;font-size:15px;letter-spacing:.2em;color:var(--quiet);margin-block:34px 10px}
.article-body a{color:var(--crimson);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-body a:hover{background:rgba(192,20,43,.14)}
.pullquote{margin-block:44px;padding-left:28px;border-left:3px solid var(--crimson)}
.pullquote p{font-family:var(--display);font-size:clamp(26px,2.6vw,40px);line-height:1.12;text-transform:uppercase;margin:0}
.blockquote{background:var(--mat);border:1px solid var(--rule);padding:22px 26px;margin-block:36px}
.blockquote p{font-family:var(--statement);font-size:22px;line-height:1.4;margin:0 0 10px}
.blockquote cite{font-family:var(--label);font-size:14px;font-style:normal;color:var(--quiet)}
.callout{background:var(--mat);border-top:3px solid var(--ember);padding:24px 26px;margin-block:36px}
.callout p{margin:0;font-size:19px;line-height:1.6}
.note{font-family:var(--label);font-size:16px;line-height:1.65;color:var(--quiet);border-left:2px solid var(--rule);padding-left:16px}
.notes{border:1px solid var(--rule);padding:24px 26px}
.notes h3{font-family:var(--label);font-weight:700;font-size:13.5px;letter-spacing:.22em;color:var(--ink);margin:0 0 14px;display:flex;align-items:center;gap:9px;text-transform:uppercase}
.notes ul{margin:0;padding-left:20px;font-family:var(--label);font-size:16px;line-height:1.75;color:#CFCAC0}
.bo-head{font-family:var(--label);font-weight:700;font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--quiet);margin:0 0 10px}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:14px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--label);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--crimson)}
.t-what{font-size:17px;line-height:1.6}
.statrow{display:flex;flex-wrap:wrap;gap:14px}
.statblock{flex:1 1 190px;background:var(--mat);border:1px solid var(--rule);padding:20px}
.stat-num{display:block;font-family:var(--display);font-size:42px;line-height:1;color:var(--crimson)}
.stat-label{display:block;font-family:var(--label);font-size:15px;line-height:1.45;color:var(--quiet);margin-top:8px}
.datatable,.versus{width:100%;border-collapse:collapse;font-family:var(--label);font-size:16px}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.datatable th,.datatable td,.versus th,.versus td{white-space:normal}
.datatable th,.datatable td,.versus th,.versus td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable th,.versus thead th{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet)}
.versus tbody th{font-weight:700;color:var(--ink);text-transform:none;letter-spacing:0;font-size:16px}
.chart svg{width:100%;height:auto}

/* ---- section-break rule: the emblem, once ---- */
.emblem-rule{display:flex;align-items:center;gap:22px;padding:10px var(--pad) 0}
.emblem-rule span{flex:1;height:1px;background:var(--rule)}
.emblem-rule svg{width:34px;height:34px;color:var(--crimson);flex:0 0 auto}

/* ---- supporters: constant logo box, mosaic driven by a movable class ---- */
.sup-grid{--cols:1;--sup-gap:16px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--sup-gap)}
@media (min-width:620px){.sup-grid{--cols:3}}
@media (min-width:1560px){.sup-grid{--cols:3}}
.sponsor{grid-column:span 1;display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--mat);border:1px solid var(--rule);text-decoration:none;color:var(--ink)}
.sponsor:hover{border-color:var(--crimson)}
.sponsor img{width:min(216px,100%);height:44px;max-height:44px;object-fit:contain;object-position:left center;background:#07070A;padding:6px 10px}
.sponsor .sponsor-name{font-family:var(--label);font-weight:700;font-size:15.5px;line-height:1.3}
.sponsor .sponsor-blurb{font-family:var(--label);font-size:14.5px;line-height:1.5;color:var(--quiet);display:block}
.sponsor.feat{border-color:var(--rule-2);background:#1B1B1F}
.sponsor--wide{grid-column:span 2}
.sup-group{font-family:var(--label);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--quiet);margin:0 0 12px}

/* ---- footer ---- */
.foot{padding:clamp(32px,3.4vw,56px) var(--pad);display:grid;gap:22px;border-top:1px solid var(--rule)}
.foot .top{display:flex;flex-wrap:wrap;gap:18px 40px;align-items:baseline;justify-content:space-between}
.foot .nm{font-family:var(--display);font-size:28px;text-transform:uppercase}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--label);font-size:13.5px;letter-spacing:.16em;text-transform:uppercase}
.foot nav a{text-decoration:none;color:var(--quiet)}
.foot nav a:hover{color:var(--crimson)}
.foot .line{font-family:var(--label);font-size:16px;color:var(--quiet);max-width:72ch;margin:0}

/* ---- article page frame ---- */
.art-head{padding:clamp(40px,5vw,76px) var(--pad) 0}
.head-in{max-width:var(--prose);margin-inline:auto}
article .fig-bleed{margin-top:clamp(22px,3vw,48px)}
.art-title{font-size:clamp(34px,5vw,76px);margin-block:0 24px}
.art-body{padding-inline:var(--pad)}
.art-body>*{max-width:var(--prose);margin-inline:auto}
.art-body>.fig-mat,.art-body>.fig-inset,.art-body>.fig-bleed,.art-body>.notes,.art-body>.breakout,.art-body>.pullquote,.art-body>.blockquote,.art-body>.callout{margin-block:clamp(24px,3.4vw,52px)}
.art-body>.fig-mat{padding:16px}
.art-body>.notes{padding:24px 26px}
.art-body>.breakout{max-width:var(--prose)}
.art-body>.fig-bleed{max-width:none;margin-inline:calc(-1 * var(--pad))}
.art-body>.fig-inset{max-width:min(340px,100%);margin-inline:0}

@media (min-width:720px){
  .trio{grid-template-columns:1.5fr 1fr 1fr}
  .timeline li{grid-template-columns:minmax(150px,.32fr) minmax(0,1fr);gap:20px}
  .fig-bleed .under{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)}
  .fig-bleed .under .figcap{grid-column:2}
}
@media (min-width:900px){
  .hero{grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr)}
  .hero .col{border-left:1px solid var(--rule)}
  .emblem-band .in{grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr)}
}
@media (min-width:1000px){ :root{--body:18.5px;--wide:1240px} }
@media (min-width:1200px){
  :root{--body:19px;--wide:1360px;--prose:40rem}
}
/* large desktop: the article becomes a two-column editorial, figures move outboard */
@media (min-width:1560px){
  :root{--body:20px;--wide:1520px;--prose:44rem;--art-cols:minmax(0,1fr) minmax(0,var(--prose)) minmax(0,1fr)}
  .art-body{display:grid;grid-template-columns:var(--art-cols);column-gap:clamp(28px,3vw,64px);padding-inline:var(--pad)}
  .art-body>*{grid-column:2;max-width:none;margin-inline:0;padding-inline:0}
  .art-body>.fig-mat{padding:16px}
  .art-body>.notes{padding:24px 26px}
  .art-body>.blockquote{padding:22px 26px}
  .art-body>.callout{padding:24px 26px}
  .art-body>.pullquote{padding-left:28px}
  .art-head{display:grid;grid-template-columns:var(--art-cols);column-gap:clamp(28px,3vw,64px);max-width:none;margin-inline:0}
  .art-head>*{grid-column:2;max-width:none;margin-inline:0}
  .head-in{max-width:none;margin-inline:0}
  .art-body>.fig-inset,.art-body>.notes,.art-body>.aside-note{grid-column:3;max-width:none;align-self:start}
  .art-body>.breakout{grid-column:2 / span 2}
  .art-body>.fig-bleed{grid-column:1 / -1;margin-inline:calc(-1 * var(--pad))}
  .sheet{grid-template-columns:repeat(4,minmax(0,1fr))}
}
/* very large display */
@media (min-width:2000px){
  :root{--body:21px;--wide:1800px;--prose:48rem;--art-cols:minmax(0,1fr) minmax(0,var(--prose)) minmax(0,1.1fr)}
  .hero .poster img{object-position:50% 50%}
  .fig-bleed img{height:min(64vh,860px)}
  .gallery img{height:380px}
  .sponsor{padding:20px}
}
@media (max-width:999px){
  .mast-in{align-items:flex-start}
  .mast-toggle-label{display:inline-flex;align-items:center;gap:9px;font-family:var(--label);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--quiet);cursor:pointer;padding:6px 0}
  .nav{display:none;width:100%;flex-direction:column;gap:0;border-top:1px solid var(--rule);margin-top:10px}
  .nav a{width:100%;padding:12px 0;border-bottom:1px solid var(--rule)}
  .mast-toggle:checked ~ .nav{display:flex}
  .sup-grid{--cols:1}
  .sponsor--wide{grid-column:span 1}
  .figcap .cred{margin-left:0;flex-basis:100%}
  .fig-inset{max-width:none}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}
.sponsor:not(.lead-line){flex-basis:var(--sp-tile,232px)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

/* sp-blurb-stack: a slot holding BOTH a mark and our copy stacks them —
   a fixed-height row clips the mark once the copy is un-hidden. */
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)){flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:auto!important;min-height:0!important;overflow:visible!important;gap:8px}
.sponsor:has(> img):has(> .sponsor-blurb:not(:empty)) > img{align-self:flex-start}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
.sponsor.sponsor{justify-content:center!important}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0!important}
/* the mobile un-clamp is retired: the operator asked for "2-3 rows max" on phones, which is
   what the desktop rule above already does — so mobile simply keeps it. */
@media (max-width:640px){.sponsor.sponsor .sponsor-blurb{-webkit-line-clamp:3!important;display:-webkit-box!important;-webkit-box-orient:vertical!important;overflow:hidden!important}}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* pipeline: one brand treatment per tile — the name reads at the blurb's own size */
.sponsor .sp-brand{font:inherit!important;font-weight:700!important;letter-spacing:inherit!important;text-transform:none!important;color:inherit!important;display:inline!important;}


/* sp-mark-size: the marks were capped at 216px wide and 44px tall in a 16px-padded tile with
   room to spare. Raised to 288px / 60px — the artwork still fits inside the tile with its
   padding intact, and object-fit:contain means nothing is cropped. */
.sponsor img{width:min(288px,100%)!important;height:60px!important;max-height:60px!important}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   1438px at 390, 13% of the whole page. Two columns bring it to
   1031px (28% shorter). Checked before writing: no new overflow, smallest mark still
   133px wide, longest blurb 1 lines, tile heights 146-211px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sup-grid), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-grid > * *{min-width:0!important;max-width:100%}
    .sup-grid img,.sup-grid svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sup-grid (9 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-hover-pad */
.article-body a{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.02; margin: 0px;}
.card h2:where(.rt-h3){font-size: clamp(20px, 1.5vw, 25px); min-height: 2.1em;}
/* op-heading-levels:end */
@media (min-width:700px) and (max-width:1100px){.sup-grid{--cols:2}.sup-grid > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important}}[data-partner] img{background:transparent!important}