/* ==========================================================================
   Jarhead Movie — "Burning Noon"
   Palette (each member has one job):
     --ground  #0A0908  cinema black — the page ground
     --paper   #E8DCC6  bleached sand — the ink on black, and the mat under figures
     --ember   #D8461B  saturated accent (hue ~14°) — accent rule, active nav, pull element
     --petrol  #1B6F6B  saturated secondary (hue ~178°) — one full section ground per page
     --muted   #8B8377  quiet type: credits, meta, hairlines
   The two saturated members sit ~164° apart in hue.
   ========================================================================== */

:root{
  --ground:#0A0908;
  --paper:#E8DCC6;
  --ink:#131110;
  --ember:#D8461B;
  --petrol:#1B6F6B;
  --muted:#8B8377;
  --body:#B4AC9E;
  --bright:#F2EEE7;
  --rule:#33302A;
  --rule-soft:#231F1B;

  --display:'Big Shoulders Display','Big Shoulders','Barlow Condensed',Helvetica,sans-serif;
  --cond:'Barlow Condensed',Helvetica,sans-serif;
  --text:'Chivo',Helvetica,Arial,sans-serif;

  /* width system — three visibly distinct widths + full bleed */
  --measure:68ch;          /* 1. prose */
  --wide:1080px;           /* 2. breakout: figures, panels, tables */
  --gutter:clamp(20px,4vw,64px);
  --body-size:18px;
  --article-size:19px;
  --art-shell:1080px;
  --annot:0px;
  --para-gap:22px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--body);
  font-family:var(--text);font-size:var(--body-size);line-height:1.62;
  overflow-x:hidden;text-wrap:pretty;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--paper);text-decoration:none}
a:hover{color:var(--ember)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:-.008em;line-height:.92;color:var(--paper)}
p{margin:0 0 var(--para-gap)}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- masthead: full-width black bar, mark + name left, nav right ---------- */
.mast{border-bottom:1px solid var(--rule);background:var(--ground)}
.mast-in{
  display:flex;align-items:center;gap:18px;
  padding:14px var(--gutter);
}
.mast-brand{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.mast-mark{color:var(--ember);flex:0 0 auto;display:flex;align-items:center}
.mast-mark svg{width:auto;height:clamp(23px,3.4vw,41px)}
.mast-name{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(30px,4.6vw,56px);line-height:.82;letter-spacing:-.015em;color:var(--paper);
}
.mast-name .em{color:var(--ember)}
.mast-nav{margin-left:auto;display:flex;align-items:center;gap:clamp(14px,2vw,34px)}
.mast-nav a{
  font-family:var(--cond);font-weight:600;font-size:13px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--paper);padding:6px 0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:7px;
}
.mast-nav a:hover{color:var(--paper);border-bottom-color:var(--ember)}
.mast-nav a[aria-current]{color:var(--ember)}
.mast-nav svg{width:15px;height:15px;flex:0 0 auto;opacity:.8}
.nav-toggle,.nav-open{display:none}

@media (max-width:1023px){
  .mast-in{flex-wrap:wrap;padding-block:12px}
  .mast-brand{flex-direction:column;align-items:flex-start;gap:4px}
  .nav-open{
    display:inline-flex;margin-left:auto;align-items:center;gap:9px;cursor:pointer;
    font-family:var(--cond);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--paper);
    border:1px solid var(--rule);padding:9px 13px;min-height:44px;
  }
  .nav-open span{display:block;width:20px;height:1.5px;background:var(--ember);box-shadow:0 5px 0 var(--ember),0 -5px 0 var(--ember)}
  .mast-nav{
    flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;margin:10px 0 0;display:none;
    border-top:1px solid var(--rule);
  }
  .nav-toggle:checked ~ .mast-nav{display:flex}
  .mast-nav a{padding:14px 0;border-bottom:1px solid var(--rule-soft);font-size:15px;min-height:44px}
}

/* ---------- bands ---------- */
.band{padding:clamp(48px,6vw,88px) var(--gutter)}
.band-tight{padding:clamp(28px,3vw,44px) var(--gutter)}
.shell{max-width:var(--wide);margin-inline:auto}
.kicker{
  font-family:var(--cond);font-weight:600;font-size:14px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ember);display:flex;align-items:center;gap:10px;margin-bottom:16px;
}
.kicker svg{width:18px;height:18px}
.rule-ember{border:0;border-top:2px solid var(--ember);width:88px;margin:0 0 24px}

/* ---------- hero: the one-sheet at poster scale ---------- */
.hero{position:relative;background:var(--ground);padding:clamp(32px,4vw,64px) var(--gutter) clamp(40px,4vw,72px)}
.hero-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:start;max-width:1720px;margin-inline:auto}
.hero-poster{position:relative;background:#000;aspect-ratio:2/3}
.hero-poster img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-poster::before,.hero-poster::after{
  content:"";position:absolute;width:34px;height:34px;pointer-events:none;
  border:2px solid var(--ember);
}
.hero-poster::before{top:-14px;left:-14px;border-right:0;border-bottom:0}
.hero-poster::after{bottom:-14px;right:-14px;border-left:0;border-top:0}
.hero-title{
  font-size:clamp(46px,7.4vw,104px);line-height:.86;color:var(--paper);text-wrap:balance;margin-bottom:22px;
}
.hero-lede{font-size:clamp(17px,1.4vw,20px);color:var(--body);max-width:44ch;margin-bottom:28px}
.btn{
  display:inline-block;background:var(--ember);color:#0A0908;font-family:var(--cond);font-weight:700;
  font-size:17px;letter-spacing:.2em;text-transform:uppercase;padding:15px 28px;min-height:44px;
}
.btn:hover{background:var(--paper);color:var(--ink)}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(360px,44%)}
}
@media (min-width:1600px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 640px}
}
@media (min-width:1920px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 760px;max-width:1860px}
}
@media (min-width:2560px){
  .hero-grid{grid-template-columns:minmax(0,1fr) 900px;max-width:2300px}
  .hero-title{font-size:132px}
}

/* billing block — poster furniture */
.billing{
  font-family:var(--cond);font-weight:500;font-size:clamp(15px,1.15vw,20px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.55;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:22px 0;max-width:var(--wide);margin:0 auto;
}
.billing .q{color:#7A7261}

/* ---------- the opening statement ---------- */
.statement{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,64px);line-height:1.04;color:var(--paper);
  max-width:42ch;margin:0;
}
.statement em{color:var(--ember);font-style:normal}

/* ---------- numerals band (the signature device) ---------- */
.numerals{background:var(--paper);color:var(--ink)}
.num-grid{display:grid;gap:clamp(26px,3vw,0px);max-width:var(--wide);margin-inline:auto}
.num{padding:0}
.num b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(64px,7.4vw,140px);line-height:.78;color:var(--ink)}
.num.hot b{color:var(--ember)}
.num span{display:block;font-size:15px;line-height:1.5;color:#4A443A;margin-top:12px;max-width:34ch}
@media (min-width:768px){
  .num-grid{grid-template-columns:repeat(2,1fr);gap:36px 40px}
}
@media (min-width:1280px){
  .num-grid{grid-template-columns:repeat(4,1fr);gap:0}
  .num{padding-inline:34px;border-right:1px solid #C4B79C}
  .num:first-child{padding-left:0}
  .num:last-child{border-right:0;padding-right:0}
}

/* ---------- lead feature ---------- */
.lead-feature{display:grid;gap:clamp(24px,3vw,52px);align-items:center;max-width:1720px;margin-inline:auto}
.lead-feature .lf-media{position:relative}
.lead-feature h2{font-size:clamp(34px,4.4vw,68px);line-height:.94;margin-bottom:18px;text-wrap:balance}
.lead-feature .deck{font-size:clamp(17px,1.3vw,20px);color:var(--body);max-width:46ch;margin-bottom:22px}
@media (min-width:1024px){.lead-feature{grid-template-columns:minmax(0,60fr) minmax(280px,40fr)}}
@media (min-width:1920px){.lead-feature{max-width:1860px}}
@media (min-width:2560px){.lead-feature{max-width:2300px}}

/* ---------- three asymmetric section cards ---------- */
.cards{display:grid;gap:clamp(18px,2vw,28px);max-width:var(--wide);margin-inline:auto}
.card{
  display:flex;flex-direction:column;background:#121010;border:1px solid var(--rule);
  min-height:100%;
}
.card .c-media{aspect-ratio:21/9;overflow:hidden}
.card .c-media img{width:100%;height:100%;object-fit:cover}
.card .c-body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:clamp(21px,1.6vw,28px);line-height:.98;margin-bottom:8px;min-height:2em}
.card p{font-size:15px;line-height:1.5;color:var(--body);margin:0 0 14px}
.card .c-foot{
  margin-top:auto;font-family:var(--cond);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember);
}
.card:hover{border-color:var(--ember)}
@media (min-width:768px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1280px){
  /* asymmetric: the first card gets the room */
  .cards{grid-template-columns:1.45fr 1fr 1fr}
  .cards .card:first-child .c-media{aspect-ratio:16/10}
  .cards .card:first-child h3{font-size:clamp(26px,2vw,36px)}
}

/* ---------- quiet line ---------- */
.quiet{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(26px,3.4vw,54px);line-height:1.06;color:var(--paper);
  text-align:center;max-width:24ch;margin-inline:auto;
}

/* ---------- petrol panel (the one section ground) ---------- */
.petrol{background:var(--petrol);color:#E8F1F0}
.petrol h2,.petrol h3{color:#F1F8F7}
.petrol .kicker{color:#A9D6D2}
.petrol p{color:#CDE4E2}
.petrol a{color:#F1F8F7;border-bottom:1px solid #7FC0BB}
.petrol a:hover{color:#fff;border-bottom-color:#fff}

/* ---------- contact sheet ---------- */
.sheet{display:grid;gap:12px;max-width:var(--wide);margin-inline:auto;grid-template-columns:repeat(2,1fr)}
@media (min-width:768px){.sheet{grid-template-columns:repeat(4,1fr)}}
@media (min-width:2560px){.sheet{grid-template-columns:repeat(6,1fr)}}
.frame{display:flex;flex-direction:column;background:#121010;border:1px solid var(--rule)}
.frame .f-media{position:relative;display:block;overflow:hidden}
.frame img{aspect-ratio:3/2;object-fit:cover;width:100%}
.frame .fno{
  position:absolute;top:6px;left:9px;pointer-events:none;
  font-family:var(--display);font-weight:900;font-size:26px;color:var(--ember);
  text-shadow:0 1px 6px rgba(0,0,0,.85);
}
.frame .f-sec{
  font-family:var(--cond);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);padding:11px 12px 0;
}
.frame .f-title{
  font-family:var(--text);font-weight:700;font-size:14px;line-height:1.32;letter-spacing:-.005em;
  color:var(--paper);padding:6px 10px 12px;
}
@media (min-width:768px){.frame .f-title{font-size:16px;line-height:1.35;padding:6px 12px 14px}}
@media (max-width:520px){.frame .f-sec{font-size:11px;letter-spacing:.18em;padding:9px 10px 0}}
.frame:hover{border-color:var(--ember)}
.frame:hover .f-title{color:var(--ember)}

/* ---------- teaser pair ---------- */
.pair{display:grid;gap:clamp(18px,2.4vw,36px);max-width:860px;margin-inline:auto}
@media (min-width:768px){.pair{grid-template-columns:1fr 1fr}}
.pair a{display:flex;flex-direction:column;background:#121010;border:1px solid var(--rule)}
.pair a:hover{border-color:var(--ember)}
.pair .t-media{display:block;aspect-ratio:16/10;overflow:hidden}
.pair .t-media img{width:100%;height:100%;object-fit:cover}
.pair .t-body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.pair h3{font-size:clamp(20px,1.5vw,26px);line-height:1;margin:0 0 8px}
.pair p{font-size:15px;line-height:1.5;color:var(--body);margin:0 0 14px}
.pair .c-foot{margin-top:auto;font-family:var(--cond);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.pair a:hover h3{color:var(--ember)}

/* ==========================================================================
   FIGURE SYSTEM — three treatments, one drawing system
   (1) .fig-plate  sand mat + inset hairline, caption below
   (2) .fig-bleed  full-bleed band, caption offset into the left third
   (3) .fig-frame  contact-sheet cell with its number in the corner
   plus .fig-inset — a smaller figure sitting in the column
   Captions are sized by the CAPTION, never by the image or the prose measure.
   ========================================================================== */
figure{margin:0}
.cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;
  max-width:64ch;margin-top:14px;
}
.cap .c-text{font-size:16px;line-height:1.5;color:var(--body);flex:1 1 34ch;min-width:0}
.cap .c-credit{
  font-family:var(--cond);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:#6E675C;flex:0 1 auto;
}
@media (min-width:1280px){
  .cap{max-width:none;flex-wrap:nowrap}
  .cap .c-text{flex:0 1 auto;max-width:70ch}
  .cap .c-credit{margin-left:auto;padding-left:24px;white-space:nowrap}
}

.fig-plate{background:var(--paper);padding:18px 18px 20px;margin-block:clamp(48px,4.5vw,64px)}
.fig-plate img{box-shadow:0 0 0 1px rgba(19,17,16,.35)}
.fig-plate .cap .c-text{color:#3B362D}
.fig-plate .cap .c-credit{color:#7A7261}

.fig-bleed{
  width:100vw;margin-left:calc(50% - 50vw);margin-block:clamp(48px,4.5vw,72px);
  max-width:100%;
}
.fig-bleed img{width:100%;max-height:82vh;object-fit:cover}
.fig-bleed .cap{padding-inline:var(--gutter);max-width:min(560px,90vw);margin-top:16px}
@media (min-width:1280px){.fig-bleed .cap{max-width:760px;flex-wrap:wrap}
 .fig-bleed .cap .c-credit{margin-left:0;padding-left:0}}

.fig-frame{
  position:relative;border:1px solid var(--rule);background:#111;padding:10px;
  margin-block:clamp(48px,4.5vw,60px);
}
.fig-frame img{width:100%}
.fig-frame .fno{
  position:absolute;top:14px;left:18px;font-family:var(--display);font-weight:900;font-size:34px;
  color:var(--ember);text-shadow:0 1px 8px rgba(0,0,0,.8);pointer-events:none;
}
.fig-frame .cap{padding:0 6px}

.fig-inset{margin-block:clamp(48px,4vw,56px)}
@media (min-width:1024px){
  .fig-inset{float:left;width:300px;margin:6px 34px 26px 0}
  .fig-inset .cap{max-width:300px;flex-wrap:wrap}
  .fig-inset .cap .c-text{font-size:15px;flex-basis:100%}
  .fig-inset .cap .c-credit{margin-left:0;padding-left:0;white-space:normal}
}

/* ==========================================================================
   ARTICLE
   ========================================================================== */
.art-head{padding:clamp(36px,4.4vw,72px) var(--gutter) clamp(20px,2.4vw,34px)}
.art-head-in{max-width:var(--wide);margin-inline:auto}
.art-head h1{font-size:clamp(38px,6vw,104px);line-height:.88;margin-bottom:20px;text-wrap:balance;max-width:24ch}
.standfirst{
  font-size:clamp(19px,1.7vw,26px);line-height:1.42;color:var(--paper);max-width:40ch;margin:0;
}
.art-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:24px;
  font-family:var(--cond);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
}
.art-meta .sec{color:var(--ember);display:inline-flex;align-items:center;gap:8px}
.art-meta svg{width:17px;height:17px}

.art-shell{padding:0 var(--gutter) clamp(56px,6vw,96px)}
.art-body{max-width:var(--art-shell);margin-inline:auto;position:relative}
.art-body>*{max-width:var(--measure)}
.art-body{--measure:68ch}
@media (min-width:1024px){
  /* prose measure centred inside the shell */
  .art-body>p,.art-body>h2,.art-body>h3,.art-body>ul,.art-body>ol,.art-body>.lead,.art-body>.note{
    margin-left:auto;margin-right:auto;
  }
}
.art-body p{font-size:var(--article-size);line-height:1.72;color:#CFC7B8}
.art-body>h2{
  font-size:clamp(26px,2.6vw,40px);line-height:1;margin:clamp(40px,4vw,60px) auto 20px;
  padding-top:18px;border-top:1px solid var(--rule);clear:both;
}
.art-body>h3{font-size:clamp(21px,1.8vw,28px);margin:36px auto 14px;clear:both}
.art-body a{color:var(--paper);border-bottom:1px solid var(--ember)}
.art-body a:hover{color:var(--ember)}
.art-body>figure,.art-body>.annot,.art-body>.pullquote,.art-body>.datatable-wrap,.art-body>.statrow,.art-body>.timeline{
  max-width:none;
}
.art-body>.fig-plate,.art-body>.fig-frame,.art-body>.fig-bleed,
.art-body>.datatable-wrap,.art-body>.statrow,.art-body>.timeline,
.art-body>.callout,.art-body>.blockquote{clear:both}
.art-body ul,.art-body ol{padding-left:1.2em;margin:0 auto var(--para-gap)}
.art-body li{margin-bottom:9px}

.lead{font-size:clamp(19px,1.5vw,23px);line-height:1.52;color:var(--paper);font-weight:400}

/* pull quote — a lifted line, ember rule, breaking the measure */
.pullquote{
  margin:clamp(48px,4.5vw,64px) 0;padding:0 0 0 26px;border-left:3px solid var(--ember);
  max-width:32ch;clear:both;
}
.pullquote p{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:clamp(24px,2.4vw,38px);line-height:1.04;color:var(--paper);margin:0;
}
.blockquote{margin:clamp(48px,4vw,56px) 0;padding:22px 26px;background:#141211;border-left:3px solid var(--petrol);max-width:52ch}
.blockquote p{margin:0 0 10px;font-size:19px;color:var(--paper)}
.blockquote cite{font-family:var(--cond);font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-style:normal}
.callout{
  margin:clamp(48px,4vw,56px) 0;padding:22px 24px;background:#141211;border:1px solid var(--rule);
  border-top:2px solid var(--ember);max-width:56ch;
}
.callout p{margin:0;font-size:18px;color:var(--paper)}
.note{font-size:16px;color:var(--muted);border-left:1px solid var(--rule);padding-left:18px}

/* the Notes-for-Design material: breakout panels; a right-hand annotation
   column above 1600px, where they float clear of the prose */
.annot{
  margin:clamp(48px,4.5vw,64px) 0;padding:26px 26px 28px;background:#141211;
  border:1px solid var(--rule);border-top:2px solid var(--ember);clear:both;
  display:grid;grid-template-columns:minmax(0,1fr);gap:26px 44px;align-items:start;
}
.annot>figure{grid-column:1/-1;margin:0 0 4px}
.annot figure img{max-width:min(760px,100%)}
.annot .ag{min-width:0}
.annot h4{
  font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ember);margin-bottom:16px;
}
.annot ul{list-style:none;padding:0;margin:0}
.annot li{
  font-size:16px;line-height:1.55;color:var(--body);padding:11px 0;border-top:1px solid var(--rule-soft);
}
.annot li:first-child{border-top:0;padding-top:0}
.annot li b{color:var(--paper);font-weight:700}
.annot p{font-size:16px;color:var(--body);margin:0 0 12px}
@media (min-width:1024px){
  .annot{grid-template-columns:repeat(auto-fit,minmax(260px,440px));justify-content:start}
  .annot.one-col{grid-template-columns:minmax(0,620px)}
}

/* statblocks */
.statrow{display:grid;gap:16px;margin:clamp(48px,4vw,56px) 0;grid-template-columns:repeat(2,1fr);clear:both}
@media (min-width:768px){.statrow{grid-template-columns:repeat(4,1fr)}}
.statblock{border-top:2px solid var(--ember);padding-top:12px}
.stat-num{display:block;font-family:var(--display);font-weight:900;font-size:clamp(34px,3.4vw,56px);line-height:.85;color:var(--paper)}
.stat-label{display:block;font-size:14px;line-height:1.45;color:var(--muted);margin-top:8px}

/* timeline */
.timeline{list-style:none;padding:0;margin:clamp(48px,4vw,56px) 0;clear:both}
.timeline li{display:grid;gap:4px 26px;padding:16px 0;border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.t-what{font-size:17px;color:var(--body)}
@media (min-width:768px){.timeline li{grid-template-columns:minmax(140px,26ch) minmax(0,1fr)}}

/* tables */
.datatable-wrap{overflow-x:auto;margin:clamp(48px,4vw,56px) 0;clear:both;-webkit-overflow-scrolling:touch}
table.datatable,table.versus{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.datatable th,.versus th{
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ember);text-align:left;padding:12px 16px;border-bottom:1px solid var(--rule);
}
.datatable td,.versus td{padding:13px 16px;border-bottom:1px solid var(--rule-soft);color:var(--body);vertical-align:top}
.versus td:first-child{color:var(--paper);font-weight:700}

/* end furniture */
/* ONE container for the whole article foot: the --wide cap lives here, so every
   child starts from the same left edge by construction rather than by matching
   widths. Children are then free to be as wide as their content needs. */
.art-body>.art-end{max-width:var(--wide);margin-inline:auto}
.art-end{clear:both;padding-top:clamp(48px,4.5vw,72px)}
.art-end>.annot,.art-end>figure{margin-top:0;margin-bottom:clamp(48px,4.5vw,64px)}
.art-end>.annot{width:fit-content;max-width:100%;margin-inline:0}
/* the closing plate shares the related block's container, so both start on the
   same left edge; the picture itself is capped so it is not a second hero */
/* DEFINITE width, not fit-content: the image's own min(760px,100%) cap is
   treated as auto while the figure's intrinsic width is measured, so
   max-content resolved to the image's full 1600px intrinsic size and the
   remainder shipped as painted mat. 760 image + 36 plate padding. */
.art-end>figure{float:none;width:min(796px,100%);max-width:100%;margin-inline:0}
.art-end>figure img{max-width:min(760px,100%);max-height:60vh;object-fit:cover}
.art-end>figure .cap{max-width:760px}
.art-end>.fig-inset .cap{max-width:64ch}
.related{max-width:var(--wide);margin-inline:auto;border-top:1px solid var(--rule);padding-top:26px}
.related h2{font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.24em;color:var(--muted);margin-bottom:22px}
ul.related-links{list-style:none;padding:0;margin:0;display:grid;gap:20px}
@media (min-width:768px){ul.related-links{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
ul.related-links a{display:flex;flex-direction:column;gap:10px;height:100%}
ul.related-links img{aspect-ratio:16/10;object-fit:cover;width:100%}
ul.related-links .r-title{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;color:var(--paper)}
ul.related-links .r-sec{font-family:var(--cond);font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
ul.related-links a:hover .r-title{color:var(--ember)}

/* ---------- above the desktop cap: the page gains, not the margin ---------- */
@media (min-width:1280px){
  :root{--wide:1180px;--art-shell:1180px}
}
/* Above the desktop cap the reading column stays CENTRED and the gutter it is
   centred in becomes the annotation column: shell = measure + 2 x --gut2, and a
   floated panel is exactly --gut2 minus its 40px margin, so it lands in the
   gutter without ever intruding on the measure. */
@media (min-width:1600px){
  :root{--wide:1400px;--body-size:19px;--article-size:20px;--para-gap:24px;--gut2:360px}
  /* the gutter is fixed by construction and the measure takes what is left,
     so a floated panel can never land inside the prose however the shell is
     clamped: clearance is always >= its 40px margin */
  .art-body{--measure:76ch;max-width:100%}
  .art-body>p,.art-body>h2,.art-body>h3,.art-body>ul,.art-body>ol,.art-body>.lead,.art-body>.note{
    max-width:min(calc(100% - 2 * var(--gut2)),var(--measure));
  }
  /* Only SHORT things go in the gutter. The notes panel is too tall to float
     without stranding the prose beside it, so above the cap it becomes the
     full-shell breakout width and lays its groups out in columns. */
  .art-body>.pullquote,.art-body>.fig-inset{
    float:right;width:calc(var(--gut2) - 40px);margin:18px 0 44px 40px;clear:right;
  }
  .art-body>.annot{
    float:none;width:auto;clear:both;
    grid-template-columns:repeat(auto-fit,minmax(300px,460px));justify-content:start;
    padding:30px 34px 34px;gap:30px 52px;
  }
  .art-body>.pullquote{border-left:0;border-top:2px solid var(--ember);padding:20px 0 0;max-width:none}
  .art-body>.fig-inset .cap{max-width:100%}
  .art-head h1{font-size:clamp(96px,6.6vw,124px)}
}
@media (min-width:1920px){
  :root{--wide:1620px;--article-size:20px;--gut2:400px}
  .art-body{--measure:80ch;max-width:100%}
}
@media (min-width:2560px){
  :root{--wide:2100px;--article-size:21px;--body-size:20px;--gutter:96px;--gut2:520px}
  .art-body{--measure:88ch;max-width:100%}
}

/* ==========================================================================
   CATEGORY / SECTION PAGE
   ========================================================================== */
.sec-open{position:relative}
.sec-open img{width:100vw;margin-left:calc(50% - 50vw);height:clamp(240px,38vw,600px);object-fit:cover}
.sec-intro{padding:clamp(32px,4vw,56px) var(--gutter) clamp(24px,3vw,40px)}
.sec-intro-in{max-width:var(--wide);margin-inline:auto;display:grid;gap:clamp(18px,3vw,56px);align-items:end}
.sec-intro h1{font-size:clamp(36px,5.4vw,92px);line-height:.9;text-wrap:balance}
.sec-intro .blurb{font-size:clamp(17px,1.4vw,21px);color:var(--body);max-width:46ch;margin:0}
.sec-intro .count{font-family:var(--cond);font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-top:14px}
@media (min-width:1024px){.sec-intro-in{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}}

.entries{padding:0 var(--gutter) clamp(56px,6vw,96px)}
.entries-in{max-width:var(--wide);margin-inline:auto;display:flex;flex-direction:column;gap:clamp(28px,3.4vw,56px)}
.entry{
  display:grid;gap:clamp(18px,2.4vw,44px);align-items:center;
  border-top:1px solid var(--rule);padding-top:clamp(28px,3vw,44px);
}
.entry .e-media{overflow:hidden;background:#111}
.entry .e-media img{aspect-ratio:16/10;object-fit:cover;width:100%}
.entry h2{font-size:clamp(24px,2.4vw,42px);line-height:.98;margin-bottom:12px;text-wrap:balance}
.entry p{font-size:17px;color:var(--body);margin:0 0 14px;max-width:60ch}
.entry .e-no{font-family:var(--display);font-weight:900;font-size:44px;line-height:.8;color:var(--muted);margin-bottom:10px}
.entry .e-go{font-family:var(--cond);font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--ember)}
.entry:hover h2{color:var(--ember)}
.entry.lead-entry{border-top:0;background:#121010;border:1px solid var(--rule);padding:clamp(20px,2.4vw,34px)}
.entry.lead-entry .e-no{color:var(--ember);font-size:72px}
@media (min-width:900px){
  .entry{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .entry.flip .e-media{order:2}
  .entry.lead-entry{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .entry.lead-entry .e-media img{aspect-ratio:4/3}
}
@media (min-width:1600px){
  .entry{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px}
}

.sec-jump{padding:0 var(--gutter) clamp(48px,5vw,80px)}
.sec-jump-in{max-width:var(--wide);margin-inline:auto;border-top:1px solid var(--rule);padding-top:26px;display:flex;flex-wrap:wrap;gap:14px 30px}
.sec-jump a{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--cond);font-weight:600;font-size:15px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--paper);min-height:44px;
}
.sec-jump svg{width:18px;height:18px;color:var(--ember)}
.sec-jump a:hover{color:var(--ember)}

/* archive register */
.register{width:100%;border-collapse:collapse;font-size:16px;min-width:640px}
.register th{
  font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--rule);
}
.register td{padding:15px 18px 15px 0;border-bottom:1px solid var(--rule-soft);vertical-align:top}
.register td:first-child{width:64px;font-family:var(--display);font-weight:900;font-size:24px;color:var(--muted);line-height:1}
.register .r-t{font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:22px;line-height:1;color:var(--paper)}
.register tr:hover .r-t{color:var(--ember)}
.register .r-s{font-family:var(--cond);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);white-space:nowrap}

/* ==========================================================================
   SUPPORTERS — a directory strip above the footer. Homepage only.
   Vertical list, hairline rules, logo only. Constant tile width, never grows.
   ========================================================================== */
.supporters{background:#0D0C0B;border-top:1px solid var(--rule);padding:clamp(36px,4vw,56px) var(--gutter)}
.supporters-in{max-width:var(--wide);margin-inline:auto}
.supporters h2{
  font-family:var(--cond);font-weight:700;font-size:14px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px;
}
.supporters .s-note{font-size:15px;color:#7A7261;margin:0 0 20px}
/* Every row must be fully covered by cells, or a per-row rule cannot span it:
   the last slot stretches to the end of its row, so there is never a partially
   filled row and each item's border-top reads as one continuous hairline. */
/* A vertical directory: ONE entry per row at every width. There is no
   partially-filled final row, so each entry's border-top spans the block by
   construction — no positional selector is needed, and slots can be reordered,
   added or deleted in the HTML with no CSS change. */
.sponsor-list{display:grid;grid-template-columns:1fr;gap:0;border-bottom:1px solid var(--rule)}
/* The TRACK fills the width; the logo BOX stays a constant 300x52 with
   object-fit:contain, so every mark from 1.4:1 to 14:1 renders identically
   however many slots the block holds. */
.sponsor{
  display:flex;align-items:center;justify-content:flex-start;
  position:relative;padding:14px 0;border-top:1px solid var(--rule);
}
/* the rule is drawn per tile and the gaps are kept tight, so a row of
   constant-width tiles still reads as a ruled directory at any slot count */
/* ONE box size for the whole block: the mark scales down inside it, so a
   1.4:1 and a 14:1 wordmark occupy the same tile. */
.sponsor img{
  flex:0 0 auto;width:300px;height:52px;max-height:52px;max-width:100%;
  object-fit:contain;object-position:left center;
  background:#17140F;padding:8px 14px;
}
.sponsor:hover img{background:#221D16}

@media (min-width:1600px){.sponsor img{height:56px;max-height:56px}}

/* ---------- footer ---------- */
.foot{background:var(--ground);border-top:1px solid var(--rule);padding:clamp(40px,4vw,60px) var(--gutter)}
.foot-in{max-width:var(--wide);margin-inline:auto;display:grid;gap:clamp(24px,3vw,64px)}
.foot-name{font-family:var(--display);font-weight:900;text-transform:uppercase;font-size:clamp(34px,3.4vw,52px);line-height:.85;color:var(--paper)}
.foot-line{font-size:16px;color:var(--muted);max-width:52ch;margin:14px 0 0}
.foot-nav{display:flex;flex-wrap:wrap;gap:10px 30px;align-content:start;max-width:560px}
.foot-nav a{font-family:var(--cond);font-size:15px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:9px;min-height:44px}
@media (min-width:768px){.foot-nav a{min-height:34px}}
.foot-nav a:hover{color:var(--ember)}
.foot-nav svg{width:16px;height:16px}
@media (min-width:768px){
  .foot-in{grid-template-columns:minmax(0,1fr) auto}
  .foot-nav{justify-content:flex-end}
}

/* ---------- simple prose pages (about / contact / 404) ---------- */
.page-shell{padding:clamp(40px,5vw,80px) var(--gutter) clamp(56px,6vw,96px)}
.page-in{max-width:var(--wide);margin-inline:auto}
.page-in h1{font-size:clamp(38px,5.4vw,84px);line-height:.9;margin-bottom:24px;max-width:24ch}
.page-in p{font-size:var(--article-size);line-height:1.7;color:#CFC7B8;max-width:68ch}
.page-in a{border-bottom:1px solid var(--ember)}

/* ---------- styleguide only ---------- */
.sg-block{border-top:1px solid var(--rule);padding:32px 0}
.sg-block>h2{font-family:var(--cond);font-weight:700;font-size:13px;letter-spacing:.24em;color:var(--ember);margin-bottom:20px}
.gallery{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery img{aspect-ratio:3/2;object-fit:cover;width:100%}
.profile-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{background:#141211;border:1px solid var(--rule);padding:20px;display:flex;flex-direction:column}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;width:88px;margin-bottom:14px}
.profile-card h3{font-size:24px;line-height:1;margin-bottom:6px}
.profile-card .p-role{font-family:var(--cond);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--ember);margin-bottom:12px}
.profile-card p{font-size:16px;color:var(--body)}
.profile-card .p-links{margin-top:auto}
.org-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.org-card{display:flex;align-items:center;gap:14px;background:#17140F;border:1px solid var(--rule);padding:12px 14px;min-width:0}
.org-card .org-logo{width:120px;height:34px;object-fit:contain;object-position:left center;flex:0 0 auto}
.org-card .org-name{font-family:var(--cond);font-weight:600;font-size:15px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper);min-width:0;overflow-wrap:anywhere}
.org-card .org-host{font-size:13px;color:var(--muted);margin-left:auto;white-space:nowrap}
.entity-ref{border-bottom:1px solid var(--ember)}
.further-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.further-grid a{display:block;background:#141211;border:1px solid var(--rule);padding:18px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:20px;line-height:1;color:var(--paper)}
.further-grid a:hover{border-color:var(--ember);color:var(--ember)}
.chart svg{width:100%;height:auto}
.chart figcaption{font-size:15px;color:var(--muted);margin-top:12px}
.map-figure .map-slot{border:1px solid var(--rule);background:#141211;aspect-ratio:16/9}

/* 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-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* 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{padding:14px 14px!important}
.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:5;-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}


/* sp-list-cols: the ledger holds more than one brand to a row.
   Design shipped .sponsor-list as grid-template-columns:1fr — nine rows, each a 1180px line
   carrying one 300px mark, which is what the operator called weird. Three across above 1000px,
   two to 1000, Design's single file on a phone. */
@media (min-width:1000px){ .sponsor-list{grid-template-columns:repeat(3,minmax(0,1fr))!important} }
@media (min-width:640px) and (max-width:999px){ .sponsor-list{grid-template-columns:repeat(2,minmax(0,1fr))!important} }

/* sp-plate-off: no second dark behind the mark. Design paints the mark #17140F while the section
   it sits in is #0D0C0B — two near-identical darks, which reads as a stray panel rather than as
   framing. The padding goes with it, since it only existed to inset the mark from that plate. */
.sponsor-list .sponsor.sponsor img{background:transparent!important;padding:0!important}

/* op-money-columns: the supporters block ran one tile per row — 9 tiles,
   730px at 390, 9% of the whole page. Two columns bring it to
   292px (60% shorter). Checked before writing: no new overflow, smallest mark still
   139px wide, longest blurb 0 lines, tile heights 52-66px.
   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 (.sponsor-list), 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){
  .sponsor-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-list > * *{min-width:0!important;max-width:100%}
    .sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}

}

/* op-odd-tier-lead: .sponsor-list (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){
  .sponsor-list:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}