/* Limousine Network — San Marcos Grade
   ground #113B2B · ink #14261C · paper #F2F0E6 · gold #E9B824 · terracotta #c96442 */

:root{
  --ground:#113B2B;      /* saturated: site ground, masthead, panels */
  --ground-deep:#0C2C20;
  --moss:#3E6B54;        /* secondary: rules, quiet grounds */
  --gold:#E9B824;        /* saturated: accent, marks, figures */
  --terracotta:#c96442;  /* flag: figure rules, alerts, section 3 */
  --asphalt:#2B2E33;     /* dark neutral: map, logo tiles */
  --paper:#F2F0E6;       /* reading ground */
  --paper-2:#E7E3D5;
  --ink:#14261C;         /* ink on paper */
  --ink-soft:#4A5750;
  --ink-quiet:#5E6A63;
  --on-dark:#F2F0E6;
  --on-dark-soft:#CBD8CE;
  --on-dark-quiet:#9FB1A5;

  --sans:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --prose:72ch;
  --aside:0px;           /* margin-note / breakout shoulder, grows at wide breakpoints */
  --gut:24px;
  --body:19px;
  --para-gap:1.15em;
  --insert-gap:40px;     /* ARTICLE_RECHECK A2: ≥2× paragraph gap, ≥32px desktop */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 var(--body)/1.6 var(--serif);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:hover{color:var(--terracotta)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0 0 var(--para-gap)}
figure{margin:0}
table{border-collapse:collapse}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--gold);color:var(--ground-deep);padding:10px 14px;font:600 15px/1 var(--sans)}

/* ---------- icons: one system, 24 grid, 1.9 stroke, currentColor ---------- */
.ico{width:1.5em;height:1.5em;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.32em}
.ico-lg{width:2.5em;height:2.5em}
.chev{width:2.1em;height:1.05em;flex:none;stroke:currentColor;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;color:var(--gold)}

/* ---------- masthead ---------- */
.masthead{background:var(--ground);color:var(--on-dark)}
.mast-in{display:flex;align-items:center;gap:22px;padding:18px var(--gut);max-width:2400px;margin:0 auto}
.wordmark{display:flex;align-items:center;gap:18px;text-decoration:none;color:inherit}
.wordmark .name{font:800 clamp(30px,3.1vw,54px)/0.92 var(--sans);letter-spacing:-.035em}
.wordmark:hover{color:var(--gold)}
.nav-toggle{display:none}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:nowrap}
.nav a{
  display:flex;align-items:center;gap:7px;text-decoration:none;padding:9px 9px;
  font:600 12.5px/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark);white-space:nowrap
}
.nav a:hover,.nav a[aria-current]{background:var(--ground-deep);color:var(--gold)}
.subject-line{
  background:var(--ground-deep);color:var(--on-dark-soft);
  font:400 15px/1.5 var(--serif);padding:9px var(--gut)
}
.subject-line span{max-width:2400px;margin:0 auto;display:block}

/* ---------- page shell: three widths ---------- */
.band{padding:var(--gut) var(--gut)}
.wrap{max-width:1560px;margin:0 auto}
.wide{max-width:1180px;margin:0 auto}
.measure{max-width:var(--prose);margin:0 auto}
.kicker{
  display:inline-flex;align-items:center;gap:9px;
  font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--terracotta);
  margin:0 0 14px
}
.kicker--onDark{color:var(--gold)}
.rule-chev{display:flex;align-items:center;gap:14px;margin:0}
.rule-chev::after{content:"";flex:1;height:2px;background:var(--moss);opacity:.45}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ground-deep)}
.hero img{width:100%;height:clamp(420px,62vh,860px);object-fit:cover}
.hero-cap{
  position:absolute;left:0;right:0;bottom:0;padding:56px var(--gut) 26px;
  background:linear-gradient(to top,rgba(8,26,18,.94) 0%,rgba(8,26,18,.78) 45%,rgba(8,26,18,0) 100%);
  color:var(--on-dark)
}
.hero-cap .in{max-width:1560px;margin:0 auto}
.hero h1{font-size:clamp(34px,5.2vw,86px);line-height:0.98;max-width:26ch}
.hero .dek{font:400 clamp(17px,1.5vw,23px)/1.5 var(--serif);color:var(--on-dark-soft);max-width:60ch;margin:16px 0 0}
.credit{font:400 12px/1.4 var(--mono);color:var(--on-dark-quiet);letter-spacing:.02em}
.hero .credit{margin-top:14px}

/* ---------- section cards (image-led, deliberately unequal) ---------- */
.cards{display:grid;gap:26px;grid-template-columns:1fr}
.card{
  display:flex;flex-direction:column;background:var(--paper);text-decoration:none;color:inherit;
  border-top:3px solid var(--ground)
}
.card:hover{color:inherit}
.card .shot{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .shot img{transform:scale(1.03)}
.card .body{padding:18px 0 22px;display:flex;flex-direction:column;flex:1}
.card h3{font-size:26px;line-height:1.12;margin:0 0 8px}
.card:hover h3{color:var(--terracotta)}
.card .blurb{font:400 17px/1.5 var(--serif);color:var(--ink-soft);margin:0}
.card .meta{margin-top:auto;padding-top:14px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet);display:flex;align-items:center;gap:8px}
.card--lead .shot{aspect-ratio:16/9}
.card--lead h3{font-size:32px}

/* ---------- featured long piece ---------- */
.feature{background:var(--ground);color:var(--on-dark)}
.feature .inner{display:grid;gap:34px;grid-template-columns:1fr;max-width:1560px;margin:0 auto;padding:var(--gut)}
.feature h2{font-size:clamp(30px,3.4vw,54px);line-height:1.0}
.feature .dek{font:400 20px/1.55 var(--serif);color:var(--on-dark-soft)}
.feature .shot img{width:100%;aspect-ratio:16/10;object-fit:cover}
.pullquote{
  margin:var(--insert-gap) 0;padding:0 0 0 22px;border-left:4px solid var(--gold);
  font:400 italic clamp(21px,2vw,30px)/1.35 var(--serif)
}
.pullquote p{margin:0}
.feature .pullquote{border-left-color:var(--gold);color:var(--on-dark)}
.btn{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font:600 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;
  padding:14px 18px;background:var(--gold);color:var(--ground-deep)
}
.btn:hover{background:var(--on-dark);color:var(--ground-deep)}
.btn--ghost{background:none;color:var(--ground);box-shadow:inset 0 0 0 2px var(--ground)}
.btn--ghost:hover{background:var(--ground);color:var(--paper)}

/* ---------- vehicles strip ---------- */
.fleet{display:grid;gap:20px;grid-template-columns:1fr}
.fleet .unit{border-top:2px solid var(--ink);padding-top:14px}
.fleet svg{width:100%;height:auto;color:var(--ground);stroke:currentColor;fill:none;stroke-width:2;stroke-linejoin:round}
.fleet h3{font-size:21px;margin:12px 0 6px;display:flex;gap:10px;align-items:baseline}
.fleet p{font:400 16px/1.5 var(--serif);color:var(--ink-soft);margin:0}

/* ---------- data band ---------- */
.databand{background:var(--asphalt);color:var(--on-dark)}
.statrow{display:grid;gap:28px;grid-template-columns:1fr;max-width:1560px;margin:0 auto;padding:var(--gut)}
.statblock{border-top:3px solid var(--gold);padding-top:14px}
.stat-num{display:block;font:800 clamp(38px,4vw,62px)/1 var(--sans);letter-spacing:-.03em;color:var(--gold)}
.stat-label{display:block;font:400 17px/1.45 var(--serif);color:var(--on-dark-soft);margin-top:10px}
.stat-src{display:block;font:400 12px/1.4 var(--mono);color:var(--on-dark-quiet);margin-top:10px}
.databand--paper{background:var(--paper-2);color:var(--ink)}
.databand--paper .stat-num{color:var(--ground)}
.databand--paper .stat-label{color:var(--ink-soft)}
.databand--paper .stat-src{color:var(--ink-quiet)}

/* ---------- editorial grid ---------- */
.grid-ed{display:grid;gap:30px;grid-template-columns:1fr}
.ed{display:flex;flex-direction:column;text-decoration:none;color:inherit;height:100%}
.ed .shot{aspect-ratio:3/2;overflow:hidden;background:var(--paper-2)}
.ed .shot img{width:100%;height:100%;object-fit:cover}
.ed h3{font-size:22px;line-height:1.15;margin:14px 0 8px}
.ed:hover h3{color:var(--terracotta)}
.ed p{font:400 16px/1.5 var(--serif);color:var(--ink-soft);margin:0}
.ed .meta{margin-top:auto;padding-top:12px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}

/* ---------- map ---------- */
.map-figure{margin:var(--insert-gap) 0}
.map-frame{background:var(--asphalt);padding:14px}
.map-frame svg{width:100%;height:auto;display:block}
.map-figure figcaption{margin-top:12px}

/* ---------- figure system: three treatments ---------- */
.figcap{
  display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;
  font:400 17px/1.45 var(--serif);color:var(--ink-soft)
}
.figcap .credit{color:var(--ink-quiet);margin-left:auto;white-space:normal}
.figcap b{font-weight:600;color:var(--ink)}

/* (1) full-bleed, caption on a dark bar */
.fig-bleed{position:relative;margin:calc(var(--insert-gap) + 8px) 0}
.fig-bleed img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-bleed figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 24px 16px;
  background:linear-gradient(to top,rgba(8,26,18,.92),rgba(8,26,18,0));
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:baseline;
  font:400 17px/1.45 var(--serif);color:var(--on-dark)
}
.fig-bleed figcaption .credit{color:var(--on-dark-quiet);margin-left:auto}

/* (2) inset with terracotta rule, caption beside at its own height */
.fig-inset{display:grid;gap:18px;grid-template-columns:1fr;margin:var(--insert-gap) 0;border-left:4px solid var(--terracotta);padding-left:18px}
.fig-inset figcaption{align-self:start}
.fig-inset figcaption em{font-style:italic}

/* (3) half-width float, caption below, credit ranged right */
.fig-float{margin:8px 0 var(--insert-gap)}
.fig-float figcaption{margin-top:10px;font-size:16px}
.fig-float .credit{text-align:right}

/* ---------- article components ---------- */
.callout{
  margin:var(--insert-gap) 0;background:var(--ground);color:var(--on-dark);padding:24px 26px;
  border-top:4px solid var(--gold)
}
.callout p{margin:0;font:400 19px/1.55 var(--serif)}
.callout .kicker{color:var(--gold)}
.note{
  margin:var(--insert-gap) 0;padding:16px 18px;background:var(--paper-2);
  font:400 17px/1.55 var(--serif);color:var(--ink-soft);border-left:4px solid var(--moss)
}
.blockquote{margin:var(--insert-gap) 0;padding-left:22px;border-left:4px solid var(--moss)}
.blockquote p{font:400 italic 22px/1.4 var(--serif);margin:0 0 8px}
.blockquote cite{font:600 14px/1.4 var(--sans);font-style:normal;color:var(--ink-quiet);letter-spacing:.04em}
.lead{font:400 clamp(20px,2vw,26px)/1.5 var(--serif);color:var(--ink)}

.panel{margin:var(--insert-gap) 0;background:var(--paper-2);padding:24px}
.panel > h3{font-size:22px;margin:0 0 14px;display:flex;align-items:center;gap:10px}
.panel--dark{background:var(--ground);color:var(--on-dark)}
.panel--dark a{color:var(--gold)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.timeline li{display:grid;grid-template-columns:1fr;gap:2px 18px;padding-bottom:14px;border-bottom:1px solid rgba(20,38,28,.16)}
.timeline li:last-child{border-bottom:0;padding-bottom:0}
.t-when{font:600 14px/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--terracotta)}
.t-what{font:400 17px/1.5 var(--serif)}
.panel--dark .t-when{color:var(--gold)}
.panel--dark .timeline li{border-bottom-color:rgba(242,240,230,.18)}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.versus,.datatable{width:100%;min-width:min(560px,100%);font:400 17px/1.45 var(--serif)}
.versus th,.datatable th{
  text-align:left;font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;
  padding:10px 14px 10px 0;border-bottom:2px solid var(--ink);vertical-align:bottom
}
.versus td,.datatable td{padding:12px 14px 12px 0;border-bottom:1px solid rgba(20,38,28,.16);vertical-align:top}
.versus tbody th{border-bottom:1px solid rgba(20,38,28,.16);text-transform:none;letter-spacing:0;font-size:16px;padding-right:20px}
.panel--dark .versus th,.panel--dark .datatable th{border-bottom-color:var(--gold);color:var(--on-dark)}
.panel--dark .versus td,.panel--dark .datatable td,.panel--dark .versus tbody th{border-bottom-color:rgba(242,240,230,.18)}

.chart svg{width:100%;height:auto}
.chart figcaption{margin-top:10px;font:400 16px/1.45 var(--serif);color:var(--ink-soft)}

.gallery{display:grid;gap:14px;grid-template-columns:1fr;margin:var(--insert-gap) 0}
.gallery figcaption{margin-top:8px;font:400 15px/1.4 var(--serif);color:var(--ink-soft)}

.profile-grid{display:grid;gap:20px;grid-template-columns:1fr;margin:var(--insert-gap) 0}
.profile-card{background:var(--paper-2);padding:20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:4/3;object-fit:cover}
.profile-card h3{font-size:20px}
.p-role{font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracotta);margin:0}
.profile-card p{font:400 16px/1.5 var(--serif);margin:0}
.p-links a,.p-attr{font:400 15px/1.5 var(--sans)}
.p-attr{color:var(--ink-quiet)}
.profile-card.no-photo{border-left:4px solid var(--moss)}

.org-grid{display:grid;gap:12px;grid-template-columns:1fr;margin:var(--insert-gap) 0}
.org-card{
  display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;
  text-decoration:none;background:var(--paper-2);padding:14px 16px
}
.org-card .org-logo{grid-row:span 2;width:52px;height:52px;object-fit:contain}
.org-card.no-logo{grid-template-columns:1fr;border-left:4px solid var(--gold)}
.org-name{font:700 18px/1.2 var(--sans)}
.org-host{font:400 14px/1.2 var(--mono);color:var(--ink-quiet)}
.entity-ref{text-decoration:none;border-bottom:2px solid var(--gold);white-space:nowrap}

.further-grid{display:grid;gap:14px;grid-template-columns:1fr}
.further-grid a{
  text-decoration:none;background:var(--paper-2);padding:16px 18px;
  font:600 19px/1.3 var(--sans);display:flex;gap:12px;align-items:baseline
}
.further-grid a:hover{background:var(--ground);color:var(--paper)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.related-links li a{font:600 19px/1.35 var(--sans);text-decoration:none;display:flex;gap:12px;align-items:baseline}
.related-links:empty{display:none}

/* ---------- article page: centred measure, cargo on both shoulders ---------- */
.article-grid{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gut),1fr)
    [wide-start] minmax(0,var(--aside))
    [prose-start] minmax(0,var(--prose))
    [prose-end] minmax(0,var(--aside))
    [wide-end] minmax(var(--gut),1fr)
    [full-end];
  padding:0 0 20px;
}
.article-grid > *{grid-column:prose}
.article-grid > .breakout{grid-column:wide-start/wide-end}
.article-grid > .fullbleed{grid-column:full-start/full-end;max-width:100%}
.article-grid > .note-left{grid-column:prose}
.article-grid > .note-right{grid-column:prose}
.marginnote{
  font:400 16px/1.5 var(--serif);color:var(--ink-soft);
  border-top:2px solid var(--terracotta);padding-top:10px;margin:var(--insert-gap) 0
}
.marginnote .mn-label{display:block;font:600 12px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--terracotta);margin-bottom:6px}

.article-head{background:var(--ground);color:var(--on-dark);padding:34px var(--gut) 30px}
.article-head .in{max-width:1560px;margin:0 auto}
.article-head .kicker{color:var(--gold)}
.article-head h1{font-size:clamp(32px,4.4vw,68px);line-height:1.0;max-width:30ch}
.article-head .standfirst{font:400 clamp(19px,1.7vw,25px)/1.5 var(--serif);color:var(--on-dark-soft);max-width:62ch;margin:18px 0 0}
.article-head .fileline{
  margin-top:20px;display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;
  font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-quiet)
}
.article-body{padding-top:34px}
.article-body h2{font-size:clamp(24px,2.4vw,34px);line-height:1.1;margin:calc(var(--insert-gap) + 6px) 0 14px}
.article-body h2:first-child{margin-top:0}
.article-body p a{text-underline-offset:3px}
.endnote{
  margin:calc(var(--insert-gap) + 8px) 0 var(--insert-gap);background:var(--ground);color:var(--on-dark);
  padding:26px 28px;border-top:4px solid var(--terracotta)
}
.endnote h2{font-size:24px;margin:0 0 12px;color:var(--on-dark)}
.endnote p{margin:0;font:400 18px/1.55 var(--serif);color:var(--on-dark-soft)}
.article-foot{border-top:2px solid var(--ink);margin-top:var(--insert-gap);padding-top:26px}
.article-foot h2{font-size:22px;margin:0 0 16px}

/* ---------- category / hub ---------- */
.page-head{background:var(--ground);color:var(--on-dark);padding:38px var(--gut) 34px}
.page-head .in{max-width:1560px;margin:0 auto;display:grid;gap:26px}
.page-head h1{font-size:clamp(32px,4.4vw,62px);line-height:1.0}
.page-head .dek{font:400 clamp(18px,1.6vw,23px)/1.5 var(--serif);color:var(--on-dark-soft);max-width:62ch;margin:0}
.page-head .count{font:600 13px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px 18px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.crumbs a{text-decoration:none;color:var(--on-dark-quiet)}
.crumbs a:hover{color:var(--gold)}
.cat-list{list-style:none;margin:0;padding:0;display:grid;gap:34px}
.cat-list li{display:grid;gap:20px;grid-template-columns:1fr;align-items:start}
.cat-list .shot{aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.cat-list .shot img{width:100%;height:100%;object-fit:cover}
.cat-list h2{font-size:26px;line-height:1.14;margin:0 0 8px}
.cat-list h2 a{text-decoration:none}
.cat-list h2 a:hover{color:var(--terracotta)}
.cat-list p{font:400 17px/1.55 var(--serif);color:var(--ink-soft);margin:0}
.cat-list .meta{margin-top:10px;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}
.cat-list li.lead-entry .shot{aspect-ratio:16/9}
.cat-list li.lead-entry h2{font-size:34px}
.cat-list li.lead-entry p{font-size:19px}

.hub{display:grid;gap:26px;grid-template-columns:1fr}
.hub-card{display:flex;flex-direction:column;text-decoration:none;background:var(--paper-2)}
.hub-card .shot{aspect-ratio:16/9;overflow:hidden}
.hub-card .shot img{width:100%;height:100%;object-fit:cover}
.hub-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1;gap:8px}
.hub-card h2{font-size:26px;display:flex;align-items:center;gap:10px}
.hub-card:hover h2{color:var(--terracotta)}
.hub-card p{font:400 17px/1.5 var(--serif);color:var(--ink-soft);margin:0}
.hub-card .meta{margin-top:auto;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-quiet)}
.hub-card ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font:400 16px/1.4 var(--serif)}
.hub-card li{display:flex;gap:8px;align-items:baseline}

.register{width:100%;font:400 17px/1.45 var(--serif)}
.register th{text-align:left;font:600 13px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:10px 16px 10px 0;border-bottom:2px solid var(--ink)}
.register td{padding:14px 16px 14px 0;border-bottom:1px solid rgba(20,38,28,.16);vertical-align:top}
.register td a{text-decoration:none;font:600 19px/1.3 var(--sans)}
.register td a:hover{color:var(--terracotta)}
.register .rsec{font:600 13px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-quiet);white-space:nowrap}

/* ---------- supporters: footer furniture, uneven mosaic, marks only ---------- */
.supporters{background:var(--ground-deep);color:var(--on-dark);padding:30px var(--gut)}
.supporters .in{max-width:1560px;margin:0 auto}
.sup-head{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;margin-bottom:18px}
.sup-head h2{font:600 13px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.sup-head p{margin:0;font:400 15px/1.4 var(--serif);color:var(--on-dark-quiet)}
.sup-group{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.sup-group:last-child{margin-bottom:0}
.sponsor{
  flex:0 0 232px;height:76px;background:var(--asphalt);
  display:flex;align-items:center;justify-content:center;padding:14px 18px;text-decoration:none
}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor:hover{background:#3A3F46}
.sponsor.feat{flex:0 0 232px;height:104px}
.sponsor.feat img{max-height:60px}

/* ---------- footer ---------- */
.footer{background:var(--ground);color:var(--on-dark);padding:34px var(--gut) 44px}
.footer .in{max-width:1560px;margin:0 auto;display:grid;gap:26px}
.footer .name{font:800 30px/1 var(--sans);letter-spacing:-.03em;display:flex;align-items:center;gap:14px}
.footer .subject{font:400 17px/1.55 var(--serif);color:var(--on-dark-soft);max-width:52ch;margin:0}
.footer nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 26px}
.footer nav a{
  text-decoration:none;font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-soft);display:flex;align-items:center;gap:8px
}
.footer nav a:hover{color:var(--gold)}

/* ================= breakpoints ================= */
@media (min-width:700px){
  :root{--gut:34px;--body:19px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .fleet{grid-template-columns:repeat(2,1fr)}
  .statrow{grid-template-columns:repeat(2,1fr)}
  .grid-ed{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .profile-grid{grid-template-columns:repeat(2,1fr)}
  .org-grid{grid-template-columns:repeat(2,1fr)}
  .further-grid{grid-template-columns:repeat(2,1fr)}
  .hub{grid-template-columns:repeat(2,1fr)}
  .fig-inset{grid-template-columns:1.45fr 1fr}
  .cat-list li{grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:26px}
  .cat-list li.lead-entry{grid-template-columns:minmax(0,1fr)}
  .timeline li{grid-template-columns:minmax(0,190px) minmax(0,1fr)}
  .feature .inner{grid-template-columns:1.15fr 1fr;align-items:center}
  .page-head .in{grid-template-columns:1.4fr 1fr;align-items:end}
  .footer .in{grid-template-columns:1fr auto;align-items:start}
}
@media (min-width:1000px){
  :root{--gut:44px;--body:20px}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards .card--lead{grid-column:span 3}
  .fleet{grid-template-columns:repeat(4,1fr)}
  .statrow{grid-template-columns:repeat(4,1fr)}
  .grid-ed{grid-template-columns:repeat(3,1fr)}
  .hub{grid-template-columns:repeat(3,1fr)}
  .cat-list li.lead-entry{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);align-items:center}
  .fig-float{max-width:52%;float:right;margin:6px 0 24px 32px}
  .article-body::after{content:"";display:block;clear:both}
}
/* large desktop: shoulders open, notes leave the column */
@media (min-width:1200px){
  :root{--aside:210px;--prose:70ch;--insert-gap:48px}
  .article-grid > .note-right{grid-column:prose-end/wide-end;padding-left:26px}
  .article-grid > .note-left{grid-column:wide-start/prose-start;padding-right:26px;text-align:right}
  .article-grid > .note-left .marginnote{border-top-color:var(--moss)}
  .cards .card--lead{grid-column:span 2}
  .cards{grid-template-columns:repeat(3,1fr)}
}
/* 1600: everything gains real width and a step of type */
@media (min-width:1200px){
  .nav a{font-size:13px;letter-spacing:.13em;padding:9px 12px;gap:8px}
  .nav ul{gap:4px}
}
@media (min-width:1600px){
  :root{--gut:60px;--body:21px;--aside:300px;--prose:74ch;--insert-gap:56px}
  .wrap{max-width:1860px}
  .wide{max-width:1360px}
  .grid-ed{grid-template-columns:repeat(4,1fr)}
  .hub{grid-template-columns:repeat(5,1fr)}
  .cat-list li{grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:36px}
  .sponsor{flex:0 0 268px;height:84px}
  .sponsor.feat{flex:0 0 268px;height:118px}
  .article-head .in,.page-head .in,.footer .in,.hero-cap .in,.feature .inner,.statrow,.supporters .in{max-width:1860px}
}
/* very large display: the deck on section cards is allowed to run longer */
@media (min-width:2000px){
  :root{--gut:76px;--body:22px;--aside:380px;--prose:78ch}
  .wrap{max-width:2200px}
  .wide{max-width:1560px}
  .cards{grid-template-columns:repeat(4,1fr)}
  .cards .card--lead{grid-column:span 2}
  .hub-card .deck{display:block}
  .fleet{grid-template-columns:repeat(4,1fr)}
}
@media (min-width:2560px){
  :root{--gut:96px;--body:23px;--aside:440px;--prose:82ch}
  .wrap{max-width:2560px}
  .wide{max-width:1760px}
  .grid-ed{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:999px){
  .hub-card .deck{display:block}
}
/* narrow: nav collapses to a CSS-only toggle */
@media (max-width:520px){
  .wordmark{gap:12px}
  .wordmark .name{font-size:25px;line-height:1.04;max-width:6.5em}
  .wordmark .chev{width:1.6em;height:.8em}
}
@media (max-width:860px){
  .nav-toggle{display:block;margin-left:auto;background:none;border:2px solid rgba(242,240,230,.5);color:var(--on-dark);
    font:600 12px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;padding:11px 13px;cursor:pointer}
  .nav{flex:0 0 100%;margin-left:0;display:none}
  .nav ul{flex-direction:column;gap:2px;flex-wrap:wrap}
  .nav a{padding:13px 12px}
  .nav-cb:checked ~ .nav{display:block}
  .mast-in{flex-wrap:wrap;gap:14px}
  .fig-float{float:none;max-width:100%;margin:6px 0 var(--insert-gap)}
  .marginnote{margin:24px 0}
  :root{--insert-gap:28px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}

/* plain bulleted notes inside a panel */
.plainlist{margin:0;padding-left:1.15em;font:400 17px/1.55 var(--serif)}
.plainlist li{margin-bottom:.55em}
.plainlist li:last-child{margin-bottom:0}
.panel--dark .plainlist{color:var(--on-dark-soft)}

/* (4) gallery pair: two plates on a mat, captions under each */
.gallery{background:var(--paper-2);padding:16px}
.gallery figure{display:flex;flex-direction:column;gap:10px}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery .figcap{font-size:16px}
.gallery .figcap .credit{font-size:11.5px}

/* narrow-screen guards: no long token may push the page sideways */
h1,h2,h3,.wordmark .name,.stat-num,.card h3,.ed h3,.cat-list h2,.further-grid a,.related-links li a{overflow-wrap:break-word}
.credit,.org-host{overflow-wrap:anywhere}
@media (max-width:520px){
  :root{--body:18px}
  .statrow{padding:20px}
  .hero h1{font-size:32px}
  .article-head h1{font-size:30px}
}

@media (max-width:1000px){
  .sup-group{gap:12px}
  .sponsor,.sponsor.feat{flex:0 0 calc(50% - 6px)}
}
@media (max-width:430px){
  .sponsor,.sponsor.feat{flex:0 0 100%}
}

/* masthead lockup: route-shield mark, the domain set under the name */
.wordmark .mark{width:44px;height:38px;flex:none;color:var(--gold)}
.wordmark .lockup{display:flex;flex-direction:column;gap:6px;min-width:0}
.wordmark .name b{color:var(--gold);font-weight:800}
.wordmark .domain{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-quiet)}
.wordmark:hover{color:inherit}
.wordmark:hover .name b{color:var(--on-dark)}
.wordmark:hover .domain{color:var(--gold)}

/* hero headline: sits on photography, so it carries a real shadow */
.hero h1{text-shadow:0 2px 5px rgba(6,20,14,.65),0 14px 44px rgba(6,20,14,.8)}
.hero .dek{text-shadow:0 1px 4px rgba(6,20,14,.7)}

/* section cards: mat, hairline, scrim, and a lead card that runs image-beside-text */
.card{background:var(--paper);padding-bottom:2px}
.card .shot{position:relative;outline:1px solid rgba(20,38,28,.18);outline-offset:-1px;filter:saturate(.94) contrast(1.05)}
.card .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,59,43,.5),rgba(17,59,43,0) 58%);transition:background .4s ease}
.card:hover .shot::after{background:linear-gradient(to top,rgba(201,100,66,.52),rgba(17,59,43,.05) 62%)}
.card .body{padding:16px 0 20px}
.card h3{padding-top:12px;border-top:3px solid var(--gold)}
@media (min-width:1000px){
  .card--lead{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:center}
  .card--lead .shot{aspect-ratio:4/3}
  .card--lead .body{padding:0 0 4px}
}
@media (max-width:520px){
  .wordmark .mark{width:34px;height:29px}
  .wordmark .domain{font-size:9.5px;letter-spacing:.12em}
}

/* cc-7 · the figures carry the band; labels step back */
.databand .stat-num{font-size:clamp(46px,5.4vw,86px);letter-spacing:-.045em}
.databand .stat-label{font-size:16px;line-height:1.4;color:var(--on-dark-soft);margin-top:12px}
.databand .stat-src{font:600 11px/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;margin-top:12px}
.databand .statblock{border-top-width:4px}

/* cc-8 · editorial grid figures get the card treatment */
.ed .shot{position:relative;outline:1px solid rgba(20,38,28,.18);outline-offset:-1px;filter:saturate(.94) contrast(1.05)}
.ed .shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,59,43,.45),rgba(17,59,43,0) 60%);transition:background .4s ease}
.ed:hover .shot::after{background:linear-gradient(to top,rgba(201,100,66,.5),rgba(17,59,43,.05) 64%)}
.ed h3{padding-top:12px;border-top:3px solid var(--ground);font-size:24px}
.ed .meta{padding-top:10px}

/* cc-9 · the map frame is no longer a tall panel */
.map-frame{padding:10px}
.map-frame svg{max-height:min(52vh,520px)}

/* cc-12 · supporter groups fill the row: four across, never an orphan */
@media (max-width:1000px){
  .sponsor,.sponsor.feat{flex:0 0 calc(25% - 9px)}
  .sponsor{height:70px}.sponsor.feat{height:92px}
  .sponsor img{max-height:38px}.sponsor.feat img{max-height:50px}
}
@media (max-width:700px){
  .sponsor,.sponsor.feat{flex:0 0 calc(50% - 6px)}
  .sponsor{height:74px}.sponsor.feat{height:96px}
}
@media (max-width:430px){ .sponsor,.sponsor.feat{flex:0 0 100%} }

/* the section bar is its own full-width row under the wordmark: one row, always */
.mast-in{flex-wrap:wrap;align-items:center;padding-bottom:0}
.wordmark{flex:0 0 auto}
.wordmark .name{white-space:nowrap}
.nav{flex:0 0 100%;margin-left:0;margin-top:14px;border-top:1px solid rgba(242,240,230,.2)}
.nav ul{flex-wrap:nowrap;justify-content:space-between;gap:4px;width:100%}
.nav a{padding:13px 6px;font-size:12.5px;letter-spacing:.09em}
.nav li{min-width:0}
@media (min-width:1200px){
  .nav a{padding:14px 10px;font-size:13px;letter-spacing:.12em}
  .nav ul{justify-content:flex-start;gap:10px}
}
@media (min-width:1600px){ .nav ul{gap:20px} }
@media (max-width:860px){
  .nav{border-top:0;margin-top:0}
  .nav ul{justify-content:flex-start;width:auto}
  .wordmark .name{white-space:normal}
}

.ed .shot{aspect-ratio:3/2}
.ed--wide{grid-column:span 2}
.ed--wide .shot{aspect-ratio:2.7/1}
.ed--wide h3{font-size:28px}
@media (max-width:699px){ .ed--wide{grid-column:span 1} .ed--wide .shot{aspect-ratio:3/2} }

/* fleet: proportional dimension diagrams, drawn in the bracket vocabulary */
.fleet .unit{border-top:2px solid var(--ink);padding-top:16px}
.fleet svg{width:100%;height:auto;color:var(--ground);stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:miter}
.fleet .unit:hover svg{color:var(--terracotta)}

/* card and feature photographs sit on a mat with a hairline — visible formatting */
.card .shot{display:block;padding:7px;background:var(--ground);outline:1px solid rgba(233,184,36,.45);outline-offset:-1px}
.card .shot img{filter:contrast(1.06) saturate(.88)}
.card:hover .shot{background:var(--terracotta)}
.feature .shot{padding:9px;background:var(--ground-deep);outline:1px solid rgba(233,184,36,.5);outline-offset:-1px}
.feature .shot img{filter:contrast(1.06) saturate(.9)}
.ed .shot{padding:6px;background:var(--paper-2);outline:1px solid rgba(20,38,28,.25);outline-offset:-1px}

/* ================= detailing pass ================= */
html{font-optical-sizing:auto}
::selection{background:var(--gold);color:var(--ground-deep)}
.stat-num,.spec b,.register td,.datatable td,.timeline .t-when{font-variant-numeric:tabular-nums}

/* kickers hang off a gold rule */
.kicker{position:relative;align-items:center}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;flex:none;opacity:.9}
.article-head .kicker::before,.page-head .kicker::before{background:var(--gold)}

/* band headings: hairline above, tighter display tracking */
.band + .band{border-top:1px solid rgba(20,38,28,.14)}
.rule-chev{letter-spacing:-.03em}
.rule-chev::after{height:1px;background:var(--ink);opacity:.22}

/* section cards: numbered, matted, with an arrow that moves */
.cards{counter-reset:card}
.card{counter-increment:card;position:relative}
.card h3{position:relative}
.card h3::before{
  content:counter(card,decimal-leading-zero);
  display:block;font:800 13px/1 var(--sans);letter-spacing:.16em;color:var(--terracotta);margin-bottom:8px
}
.card .meta{border-top:1px solid rgba(20,38,28,.16);margin-top:14px}
.card .meta::after{content:"→";margin-left:auto;transition:transform .3s ease;display:inline-block}
.card:hover .meta::after{transform:translateX(5px);color:var(--terracotta)}
.card .shot{overflow:hidden}

/* feature band: hanging quote, ruled kicker */
.feature .pullquote{position:relative;padding-left:30px}
.feature .pullquote::before{
  content:"\201C";position:absolute;left:-6px;top:-.18em;
  font:800 3.2em/1 var(--serif);color:var(--gold);opacity:.85
}

/* fleet: spec figure, hairline columns */
.fleet .spec{display:flex;flex-direction:column;gap:5px;margin-bottom:16px}
.fleet .spec b{font:800 30px/1 var(--sans);letter-spacing:-.03em;color:var(--gold);-webkit-text-stroke:0}
.fleet .spec i{font:600 11px/1.3 var(--mono);font-style:normal;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-quiet)}
.fleet .unit h3{font-size:20px;letter-spacing:-.01em}
@media (min-width:1000px){
  .fleet{gap:0}
  .fleet .unit{padding:16px 26px 0 0}
  .fleet .unit + .unit{border-left:1px solid rgba(20,38,28,.16);padding-left:26px}
}

/* data band: ruled columns, mono sources */
@media (min-width:700px){
  .databand .statrow{gap:0 0}
  .databand .statblock{padding:14px 26px 22px 0}
  .databand .statblock + .statblock{border-left:1px solid rgba(242,240,230,.16);padding-left:26px}
}

/* prose links carry a gold underline instead of browser default */
.article-body p a,.lead a,.card .blurb a{
  text-decoration:none;box-shadow:inset 0 -2px 0 var(--gold);padding-bottom:1px
}
.article-body p a:hover{box-shadow:inset 0 -2em 0 var(--gold);color:var(--ground-deep)}

/* a restrained drop cap opens each piece */
.article-body > p:first-of-type::first-letter{
  float:left;font:800 3.5em/.78 var(--sans);color:var(--ground);
  margin:.06em .09em 0 0;letter-spacing:-.04em
}

/* footer: ruled three-column furniture */
.footer .in{gap:30px}
.footer nav ul{gap:12px 30px}
.footer nav a{padding-bottom:3px;border-bottom:1px solid rgba(242,240,230,.14)}
.footer .name{letter-spacing:-.035em}

/* map caption sits in a ruled two-column grid */
.map-figure figcaption{border-top:1px solid rgba(20,38,28,.2);padding-top:12px}

.feature h2{margin-bottom:16px}
.feature .dek{margin:0 0 4px}
.feature .shot figcaption{padding:14px 4px 2px}
.fleet .unit h3 a{text-decoration:none}

/* ---- ink-side variants: gold and terracotta are dark-ground colours ----
   #A2401B measures 5.55:1 on the cream ground; --ground measures 13.9:1.
   The saturated #E9B824 / #c96442 stay for dark grounds, rules and fills. */
:root{--terracotta-ink:#A2401B}
.fleet .spec b{color:var(--ground)}
.kicker{color:var(--terracotta-ink)}
.card h3::before{color:var(--terracotta-ink)}
.card:hover h3,.ed:hover h3,.cat-list h2 a:hover,.card:hover .meta::after{color:var(--terracotta-ink)}
a:hover{color:var(--terracotta-ink)}
.panel .t-when,.timeline .t-when{color:var(--terracotta-ink)}
.panel--dark .t-when{color:var(--gold)}
.p-role,.marginnote .mn-label{color:var(--terracotta-ink)}
.article-head .kicker,.page-head .kicker,.kicker--onDark,.feature .kicker{color:var(--gold)}
.databand .kicker{color:var(--gold)}

/* the shield scales to the full height of the title lockup */
.wordmark{align-items:stretch}
.wordmark .mark{align-self:stretch;height:auto;width:auto;aspect-ratio:74/64;flex:none}
@media (max-width:520px){ .wordmark .mark{aspect-ratio:74/64;height:auto;width:auto} }

/* nav a step larger, still one row */
.nav a{font-size:13.5px;letter-spacing:.1em;padding:14px 7px}
.nav .ico{width:1.35em;height:1.35em}
@media (min-width:1200px){ .nav a{font-size:14.5px;letter-spacing:.12em;padding:15px 11px} }
@media (min-width:1600px){ .nav a{font-size:15px} }

/* the shield is sized from the title's own type size, not from the flex line */
.wordmark{align-items:center;font-size:clamp(30px,3.1vw,54px)}
.wordmark .name{font-size:1em}
.wordmark .mark{align-self:auto;height:1.42em;width:auto;aspect-ratio:74/64;flex:none}
.wordmark .domain{font-size:11px}
@media (max-width:520px){
  .wordmark{font-size:25px}
  .wordmark .mark{height:1.5em}
  .wordmark .domain{font-size:9.5px}
}

/* fleet: a spec strip, no pictogram */
.fleet .unit{display:flex;flex-direction:column}
.fleet .spec{margin-bottom:14px}
.fleet .spec b{font-size:clamp(34px,3.4vw,50px);line-height:.95;letter-spacing:-.045em}
.fleet .spec i{color:var(--ink-soft)}
.fleet .unit h3{margin:0 0 8px;padding-top:14px;border-top:1px solid rgba(20,38,28,.2)}

/* cc-4 · the four numbers are the band */
.databand .statblock{border-top:4px solid var(--gold);padding-top:18px}
.databand .stat-num{
  display:block;font-size:clamp(54px,6.2vw,104px);line-height:.92;letter-spacing:-.05em;
  padding-bottom:14px;border-bottom:2px solid rgba(233,184,36,.32)
}
.databand .stat-label{font-size:17px;margin-top:14px;color:var(--on-dark)}
.databand .stat-src{color:var(--on-dark-quiet)}
.databand{padding:14px 0 22px}

/* stat tracks may go below min-content; the longest figure adapts instead of pushing the grid */
.statrow{grid-template-columns:minmax(0,1fr)}
@media (min-width:700px){ .statrow{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1000px){ .statrow{grid-template-columns:repeat(4,minmax(0,1fr))} }
.databand .stat-num{
  font-size:clamp(40px,4.4vw,88px);overflow-wrap:anywhere;hyphens:none;
  max-width:100%
}
.databand .statblock{min-width:0}

/* the figure sits in a shared-height box, so labels and sources align across the four columns */
.databand .stat-num{
  display:flex;align-items:flex-end;height:clamp(56px,5.6vw,112px);
  padding-bottom:14px;border-bottom:2px solid rgba(233,184,36,.32);box-sizing:border-box
}
/* a docket number is a different class of value: mono, smaller, never broken */
.databand .stat-num--code{
  font:800 clamp(26px,2.4vw,44px)/1 var(--mono);letter-spacing:.01em;
  overflow-wrap:normal;word-break:keep-all
}

.statrow{align-items:stretch}
.databand .statblock{display:flex;flex-direction:column}
.databand .stat-src{margin-top:auto;padding-top:14px}

/* credits on the lighter gallery mat need the stronger ink and a notch of size */
.gallery .figcap .credit{color:var(--ink-soft);font-size:12.5px}
.gallery .figcap{font-size:16.5px}
.panel .figcap .credit,.note .credit{color:var(--ink-soft)}

/* the caption bar is near-solid across the whole text area, fading only at its top edge */
.fig-bleed figcaption{
  background:linear-gradient(to top,rgba(8,26,18,.95) 0%,rgba(8,26,18,.94) 82%,rgba(8,26,18,0) 100%);
  padding:34px 24px 18px
}
.fig-bleed figcaption .credit{color:var(--on-dark-soft)}
.hero-cap{background:linear-gradient(to top,rgba(8,26,18,.95) 0%,rgba(8,26,18,.88) 62%,rgba(8,26,18,0) 100%)}

@media (min-width:1000px){ .gallery--three{grid-template-columns:repeat(3,minmax(0,1fr))} }

@media (min-width:700px){ .gallery--three{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} }

/* .endnote is a dark ground too — it takes the same overrides as .panel--dark */
.endnote .t-when{color:var(--gold)}
.endnote .timeline li{border-bottom-color:rgba(242,240,230,.18)}
.endnote .datatable td,.endnote .datatable th,.endnote .versus td,.endnote .versus th,.endnote .versus tbody th{
  border-bottom-color:rgba(242,240,230,.22)
}
.endnote .datatable th,.endnote .versus th{color:var(--on-dark);border-bottom-color:var(--gold)}
.endnote .plainlist,.endnote .t-what,.endnote .datatable td,.endnote .versus td{color:var(--on-dark-soft)}
.endnote h3{color:var(--on-dark)}
.endnote a{color:var(--gold)}
.endnote .tablewrap{margin-top:4px}

/* the map fills its frame: no capped height leaving the mat visible either side */
.map-frame{background:#0B0F12;padding:0;line-height:0}
.map-frame svg{width:100%;height:auto;max-height:none;display:block}
.map-figure{border:1px solid rgba(20,38,28,.25)}

/* mobile: the map keeps a legible scale and pans inside its own frame */
.map-frame{overflow-x:auto;-webkit-overflow-scrolling:touch}
.map-frame svg{min-width:860px}
@media (min-width:940px){ .map-frame svg{min-width:0} }
@media (max-width:939px){
  .map-figure{position:relative}
  .map-figure::after{
    content:"";position:absolute;top:0;right:0;width:34px;height:100%;pointer-events:none;
    background:linear-gradient(to left,rgba(11,15,18,.85),rgba(11,15,18,0))
  }
}

/* the scroll hint belongs to the scroller, not to the figure (it was covering the caption) */
.map-figure::after{content:none}
.map-frame{position:relative}
@media (max-width:939px){
  .map-frame::after{
    content:"";position:sticky;float:right;top:0;right:0;width:34px;height:100%;
    margin-left:-34px;pointer-events:none;
    background:linear-gradient(to left,rgba(11,15,18,.85),rgba(11,15,18,0))
  }
}

/* supporter tiles: four across only where each box clears ~196px, otherwise two */
@media (max-width:1000px){
  .sponsor,.sponsor.feat{flex:0 0 calc(50% - 6px)}
  .sponsor{height:78px}.sponsor.feat{height:100px}
  .sponsor img{max-height:44px}.sponsor.feat img{max-height:56px}
}
@media (min-width:820px) and (max-width:1000px){
  .sponsor,.sponsor.feat{flex:0 0 calc(50% - 6px)}
}
@media (max-width:430px){ .sponsor,.sponsor.feat{flex:0 0 100%} }

/* buttons clear the 44px hit target on phones */
@media (max-width:520px){ .btn{padding:16px 18px} }

/* four-across tiles keep ≥200px of usable width inside the padding */
@media (min-width:1001px){
  .sponsor,.sponsor.feat{flex:0 0 252px}
  .sponsor{height:80px}.sponsor.feat{height:108px}
}
@media (min-width:1600px){
  .sponsor,.sponsor.feat{flex:0 0 288px}
  .sponsor{height:86px}.sponsor.feat{height:120px}
}

/* the pan cue is a local background on the scroller: it paints at real height and
   disappears once the reader reaches the end of the scroll */
.map-frame::after{content:none}
@media (max-width:1000px){
  .map-frame{
    background-image:linear-gradient(to left,rgba(11,15,18,.92),rgba(11,15,18,0));
    background-repeat:no-repeat;background-position:right center;background-size:36px 100%;
    background-attachment:local
  }
}
/* the SVG only forces its own width where the frame is genuinely narrower than 860px */
.map-frame svg{min-width:0}
@media (max-width:1000px){ .map-frame svg{min-width:860px} }

/* below 820px the frame is narrow enough to need the fixed scale; above it the map simply fits */
@media (min-width:820px){
  .map-frame svg{min-width:0}
  .map-frame{background-image:none}
}

/* two-up holds until the container genuinely fits four 252px tiles (4×252 + 3×12 = 1044px) */
@media (min-width:1001px) and (max-width:1149px){
  .sponsor,.sponsor.feat{flex:0 0 calc(50% - 6px)}
  .sponsor{height:84px}.sponsor.feat{height:110px}
  .sponsor img{max-height:46px}.sponsor.feat img{max-height:58px}
}
@media (min-width:1150px){
  .sponsor,.sponsor.feat{flex:0 0 252px}
  .sponsor{height:80px}.sponsor.feat{height:108px}
}
@media (min-width:1600px){
  .sponsor,.sponsor.feat{flex:0 0 288px}
  .sponsor{height:86px}.sponsor.feat{height:120px}
}

/* one-up until each box clears the 160px mobile floor (two-up reaches it at ~471px) */
@media (max-width:470px){ .sponsor,.sponsor.feat{flex:0 0 100%} }

/* the hero scrim is near-solid across its whole text block, like the figure captions */
.hero-cap{
  background:linear-gradient(to top,rgba(8,26,18,.96) 0%,rgba(8,26,18,.92) 82%,rgba(8,26,18,0) 100%);
  padding-top:64px
}
.hero-cap .kicker{text-shadow:0 2px 5px rgba(6,20,14,.75)}
.hero-cap .credit{text-shadow:0 1px 4px rgba(6,20,14,.7)}

/* fade only across the empty top of the caption box, solid behind every line of text */
.hero-cap{background:linear-gradient(to top,rgba(8,26,18,.96) 0%,rgba(8,26,18,.94) 94%,rgba(8,26,18,0) 100%)}
.hero-cap .kicker,.hero-cap .credit{text-shadow:0 2px 5px rgba(6,20,14,.8)}

/* the photograph gets room above the caption block; the scrim stays solid behind the type */
.hero img{height:clamp(560px,82vh,1040px)}
.hero-cap{padding:40px var(--gut) 26px}
.hero .dek{max-width:52ch}
@media (max-width:520px){ .hero img{height:clamp(460px,72vh,720px)} .hero-cap{padding:28px var(--gut) 20px} }

/* 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}
.sup-head{flex-wrap:wrap!important}
.sup-head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sup-group{flex-wrap:wrap!important}
.sup-group > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!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-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* 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: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-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sup-group .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}

/* op-money-columns: the supporters block ran one tile per row — 8 tiles,
   648px at 390, 7% of the whole page. Two columns bring it to
   312px (52% shorter). Checked before writing: no new overflow, smallest mark still
   127px wide, longest blurb 0 lines, tile heights 72-72px.
   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.
   Only the tier(s) that were one-per-row are touched (.sup-group), 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-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:12px!important}
    .sup-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-group > * *{min-width:0!important;max-width:100%}
    .sup-group img,.sup-group svg{max-width:100%;height:auto}
}

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > span.shot > img,
  a.card.card--lead > span.shot > img,
  a.ed > span.shot > img,
  a.ed.ed--wide > span.shot > img,
  a.hub-card > span.shot > img,
  div.article-body.article-grid > figure.breakout.fig-inset > img,
  div.article-body.article-grid > figure.fig-bleed.fullbleed > img,
  div.breakout.gallery > figure > img,
  div.breakout.gallery.gallery--three > figure > img,
  div.inner > figure.shot > img,
  li > a.shot > img,
  li.lead-entry > a.shot > img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */

/* op-odd-tier-lead: money_slots changed a tier's size — .sup-group (5 tiles) now show an ODD count on phones, so the lead tile takes the whole row (operator: "the 1st item in such rows to be 100% width, then split"). Parity-guarded: it steps aside again when the count is even. */
@media (max-width:640px){
  .sup-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-grow-same-size: an added partner would have wrapped onto a new row ALONE and stretched across the grid (flex rows that grow). Same minimum (basis 220px, min-width min(220px, 100%)), same columns at every width, a short row keeps its siblings' size — applied at the moment of adding, as the operator chose (2026-09-23). Phones keep their own rules. */
@media (min-width:641px){
  div.sup-group:nth-of-type(3){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))!important}
}
/* op-grow-same-size:end */