/* Telemark North America — "The Skin Track"
   Palette, 5 members with named jobs:
   --ground  cold snow grey .... page ground
   --ink     near-black ......... all type
   --area    glacier teal ....... masthead, panels, footer (real area)
   --accent  magenta ........... rules, plate numerals, lead plate (real area)
   --secondary terracotta ...... The Boot section, second saturated hue
   Support: --paper (figure mats), --mid (image ground), --ink-quiet (credits) */

:root{
  --ground:#E4E7EA;
  --paper:#FFFFFF;
  --ink:#10161A;
  --ink-quiet:#4A5257;
  --area:#0C3F48;
  --area-deep:#082C33;
  --accent:#C9126F;
  --accent-lift:#FF8CBF;      /* magenta lightened, for pale grounds only */
  --on-area:#EFA98A;          /* warm accent for type on teal — the pink fights it */
  --secondary:#D97757;
  --mid:#C9CDD0;
  --hair:rgba(16,22,26,.22);

  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --text:Chivo,"Helvetica Neue",system-ui,sans-serif;

  --body:17px;
  --prose:72ch;
  --gut:0px;
  --shell:100%;
  --pgap:1.05em;
  --band:56px;
  --side:20px;
}
@media (min-width:640px){ :root{ --body:18px; --side:28px; --band:64px } }
@media (min-width:900px){ :root{ --body:19px; --gut:80px; --shell:1180px; --side:36px; --band:76px } }
@media (min-width:1200px){ :root{ --body:20px; --gut:150px; --shell:1400px; --side:48px; --band:88px } }
@media (min-width:1600px){ :root{ --body:21px; --gut:300px; --shell:1720px; --side:56px; --band:104px } }
@media (min-width:2000px){ :root{ --body:22px; --gut:340px; --shell:2040px; --side:64px; --band:120px } }
@media (min-width:2400px){ :root{ --body:23px; --gut:380px; --shell:2320px; --side:72px } }

*{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.62;
  text-wrap:pretty;
}
img,svg{max-width:100%}
img{display:block; height:auto}
a{color:var(--area); text-decoration:none; text-underline-offset:3px}
a:hover{color:var(--accent); text-decoration:underline}
h1,h2,h3,h4{font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.012em; margin:0}
p{margin:0}
p+p{margin-top:var(--pgap)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ── shell ───────────────────────────────────────────── */
.shell{max-width:var(--shell); margin:0 auto; padding-inline:var(--side)}
.band{padding-block:var(--band)}
.kicker{font-size:clamp(12px,.62em,15px); font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent)}
.kicker.on-dark{color:var(--on-area)}
.eyebrow{display:flex; align-items:center; gap:12px}
.eyebrow svg{width:22px;height:22px;flex:none}
/* section icons are two-toned: the primary form takes the context colour,
   the secondary detail is always the teal */
svg .i2{stroke:var(--area)}
svg .i2f{fill:var(--area); stroke:none}
.mast svg .i2,.foot svg .i2,.colophon svg .i2,.callout svg .i2{stroke:var(--on-area)}
.mast svg .i2f,.foot svg .i2f,.colophon svg .i2f,.callout svg .i2f{fill:var(--on-area)}
.rule-accent{height:4px;background:var(--accent);width:120px}

/* ── masthead ────────────────────────────────────────── */
.mast{background:var(--area); color:#fff}
.mast a{color:#fff}
.mast a:hover{color:var(--on-area); text-decoration:none}
.mast-in{max-width:var(--shell); margin:0 auto; padding:22px var(--side) 20px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap}
/* the mark stretches to the lockup's own height rather than carrying a fixed size */
.wordmark{--wm:clamp(28px,4.4vw,34px); display:flex; align-items:flex-end; gap:15px; flex:none}
.wordmark .mark{flex:none; display:block; color:var(--on-area);
  width:calc(var(--wm) * 1.60 + 6px); height:calc(var(--wm) * 1.60 + 6px)}
.wordmark .mark svg{width:100%; height:100%; display:block}
.wordmark .mark .trk{stroke:#fff}
.wordmark .wm{font-family:var(--display); font-size:var(--wm); line-height:.86;
  text-transform:uppercase; white-space:nowrap; display:block;
  border-bottom:3px solid var(--secondary); padding-bottom:5px}
/* two-line lockup: the short line is tracked out to sit flush with the long one */
/* the top line is reversed out of a warm bar — the lockup's own device */
.wordmark .wm b{display:block; width:100%; box-sizing:border-box; font-weight:700; font-size:.545em;
  letter-spacing:.26em; background:var(--on-area); color:var(--area);
  padding:.16em .12em .12em .24em; margin-bottom:.10em}
.wordmark .wm i{display:block; font-style:normal; font-weight:800; color:#fff; letter-spacing:.012em}
.mast.hero-mast .wordmark{--wm:clamp(34px,6vw,72px)}

.nav{display:flex; flex-direction:column; align-items:flex-end; gap:11px; padding-bottom:4px}
.nav-row{display:flex; flex-wrap:wrap; gap:8px 28px; justify-content:flex-end;
  font-size:17px; font-weight:900; letter-spacing:.1em; text-transform:uppercase}
.nav-row>a{border-bottom:3px solid transparent; padding-bottom:3px}
.nav-row>a:hover{border-bottom-color:var(--on-area); text-decoration:none}
.nav-row.sub{font-size:12.5px; font-weight:600; letter-spacing:.12em; color:rgba(255,255,255,.62); gap:8px 20px}
.nav-row.sub a{color:rgba(255,255,255,.86)}
.nav-row a[aria-current]{color:var(--on-area); border-bottom:3px solid var(--on-area); padding-bottom:3px}
.nav-row.sub a[aria-current]{color:var(--on-area); border-bottom:2px solid var(--on-area)}
.nav-toggle,.nav-cb{display:none}
@media (max-width:899px){
  .mast-in{align-items:center; padding-block:16px}
  .mast.hero-mast .wordmark{--wm:clamp(26px,7vw,40px)}
  .nav{width:100%; align-items:stretch; order:3; gap:0}
  .nav-toggle{display:flex; align-items:center; gap:10px; cursor:pointer;
    font-size:13px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    padding:12px 0; border-top:1px solid rgba(255,255,255,.28); color:#fff}
  .nav-toggle svg{width:34px;height:24px;color:var(--accent-lift)}
  .nav-row{display:none; flex-direction:column; align-items:stretch; gap:0; font-size:16px}
  .nav-row a{padding:11px 0; border-top:1px solid rgba(255,255,255,.14)}
  .nav-row.sub{padding-left:20px}
  .nav-cb:checked ~ .nav-row{display:flex}
}

/* ── homepage lead ───────────────────────────────────── */
.lead-shot{position:relative; background:var(--mid)}
.lead-shot>img{width:100%; aspect-ratio:8/5; object-fit:cover; max-height:min(86vh,900px)}
.lead-over{display:flex; flex-direction:column; align-items:flex-start}
.lead-plate{background:var(--accent); color:#fff; padding:26px 30px 24px; max-width:100%}
.lead-plate h1{font-size:clamp(32px,5.6vw,88px); line-height:.88; letter-spacing:.006em; margin-top:12px}
.plate-line{margin:0; color:#fff; background:var(--ink);
  padding:16px var(--side) 18px; font-size:clamp(15px,.82em,19px); line-height:1.42}
@media (min-width:900px){
  /* the plate is an overlay on the photograph, never a band beneath a strip of it */
  .lead-over{position:absolute; left:0; right:0; bottom:0;
    background:linear-gradient(to top, rgba(8,18,22,.88) 0%, rgba(8,18,22,.5) 52%, rgba(8,18,22,0) 100%)}
  .lead-plate{max-width:min(64%,720px); padding:28px 36px 26px}
  .plate-line{background:transparent; padding:18px 40px 28px; max-width:62ch}
}
.declare{max-width:var(--shell); margin:0 auto; padding:16px var(--side) 0}
.credit-line{margin:0; font-size:clamp(13px,.66em,15px); color:var(--ink-quiet)}

/* ── switchback divider ──────────────────────────────── */
.switchback{color:var(--area); display:block; padding:var(--band) var(--side) 0;
  max-width:var(--shell); margin:0 auto}
.switchback svg{display:block;width:100%;height:44px}
@media (min-width:1200px){ .switchback svg{height:52px} }

/* ── featured split panel ────────────────────────────── */
.feature{background:var(--paper); display:grid; grid-template-columns:1fr}
@media (min-width:900px){ .feature{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} }
.feature-shot{position:relative; background:var(--mid); min-height:280px}
.feature-shot::after{content:""; position:absolute; inset:18px; border:2px solid rgba(255,255,255,.6);
  pointer-events:none}
.feature-shot::before{content:""; position:absolute; left:0; top:0; width:96px; height:14px;
  background:var(--accent); z-index:1}
.feature-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){ .feature-shot{min-height:0} .feature-shot img{position:static;aspect-ratio:8/5} }
.feature-text{padding:clamp(28px,4vw,60px); display:flex; flex-direction:column; justify-content:center; gap:18px}
.feature-text h2{font-size:clamp(26px,3.3vw,50px); line-height:1.0}
.feature-text p{font-size:1.02em}
.more{align-self:flex-start; font-size:.74em; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; border-bottom:3px solid var(--accent); padding-bottom:4px; color:var(--ink)}
.more:hover{color:var(--accent); text-decoration:none}

/* ── section sampler: deliberately unequal ───────────── */
.sampler{display:grid; gap:34px; grid-template-columns:1fr}
@media (min-width:900px){
  .sampler{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr); gap:40px}
  /* the lead card spans two rows and its photograph absorbs the span;
     the last card runs wide across the foot so neither column is left short */
  .samp.big{grid-row:span 2}
  .samp.big img{flex:1 1 auto; aspect-ratio:auto; min-height:300px; object-fit:cover}
  .sampler>.samp:last-child{grid-column:1/-1}
  .sampler>.samp:last-child img{aspect-ratio:21/9}
}
@media (min-width:1600px){
  .sampler{grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); gap:48px}
  .samp.big img{min-height:360px}
  .sampler>.samp:last-child{grid-column:2/-1}
  .sampler>.samp:last-child img{aspect-ratio:16/6}
}
.samp{display:flex; flex-direction:column; gap:0; color:var(--ink);
  background:var(--paper); padding:16px}
.samp:hover{text-decoration:none; color:var(--ink)}
.samp:hover h3{color:var(--accent)}
.samp>.kicker{display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:12px;
  border-top:3px solid var(--accent); letter-spacing:.2em}
.samp>.kicker svg{width:20px; height:20px; flex:none}
.samp h3{margin-top:11px}
.samp p{margin-top:9px}
.samp img{width:100%; aspect-ratio:8/5; object-fit:cover; background:var(--mid)}
.samp.big img{aspect-ratio:16/9}
.samp h3{font-size:clamp(21px,1.9vw,30px); line-height:1.06}
.samp.big h3{font-size:clamp(26px,3vw,44px)}
.samp p{font-size:.86em; line-height:1.5}
.samp.big p{font-size:.96em}

/* ── section index (icons) ───────────────────────────── */
.sec-index{display:grid; gap:30px 40px; grid-template-columns:1fr}
@media (min-width:640px){ .sec-index{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1200px){ .sec-index{grid-template-columns:repeat(3,minmax(0,1fr))} }
.sec-card{display:flex; flex-direction:column; gap:18px; align-items:flex-start;
  padding-top:22px; border-top:2px solid var(--ink)}
.sec-card svg{width:84px;height:84px;flex:none;color:var(--accent)}
.sec-card svg path,.sec-card svg circle{stroke-width:1.25}
.sec-card svg .i2f{stroke-width:0}
.sec-card:hover svg{color:var(--area)}
@media (min-width:1600px){ .sec-card svg{width:104px;height:104px} }
.sec-card h3{font-size:1.25em; line-height:1.05}
.sec-card p{font-size:.86em; line-height:1.5; margin-top:9px; color:var(--ink-quiet); max-width:42ch}
.sec-card .n{font-family:var(--display); color:var(--accent); font-size:.8em}

/* ── quiet line band ─────────────────────────────────── */
.quiet{background:var(--paper); position:relative; padding:clamp(44px,6vw,80px) clamp(28px,5vw,80px)}
.quiet .fact{display:block; text-align:center; margin-bottom:18px}
.quiet p{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(25px,3.6vw,56px); line-height:1.06; text-align:center; max-width:26ch; margin-inline:auto}
.corner{position:absolute; width:26px; height:26px; color:var(--accent)}
.corner.tl{top:14px;left:14px} .corner.br{bottom:14px;right:14px}

/* ── supporters colophon ─────────────────────────────── */
.colophon{background:var(--area-deep); color:#fff}
.colophon a{color:#fff}
.colophon h2{font-size:1.5em}
.colo-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 22px; margin-bottom:8px}
.colo-note{font-size:.76em; color:rgba(255,255,255,.72); max-width:64ch}
.colo-run{display:grid; grid-template-columns:1fr; gap:36px 48px; margin-top:30px}
@media (min-width:980px){
  /* three equal groups across the full measure; every .sponsor spans its group,
     so all nine slots stay the same width at every width */
  .colo-run{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
}
.colo-group{min-width:0}
.colo-label{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--on-area); padding-bottom:10px; border-bottom:2px solid rgba(255,255,255,.3); margin-bottom:6px}
.sponsor{display:block; flex:0 0 auto; width:100%; padding:16px 0;
  border-top:1px solid rgba(255,255,255,.16)}
.colo-group .sponsor:first-of-type{border-top:0}
.sponsor:hover{text-decoration:none}
.sponsor-name{display:block; font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.2em; line-height:1.1; letter-spacing:.014em}
.sponsor:hover .sponsor-name{color:var(--on-area)}
.sponsor-blurb{display:block; margin-top:7px; font-size:.76em; line-height:1.45;
  color:rgba(255,255,255,.78); min-width:200px}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ── footer ──────────────────────────────────────────── */
.foot{background:var(--area); color:#fff}
.foot a{color:rgba(255,255,255,.88)}
.foot-in{max-width:var(--shell); margin:0 auto; padding:clamp(34px,4vw,52px) var(--side);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:34px 60px; align-items:flex-start}
.standing{font-size:.86em; color:rgba(255,255,255,.86); max-width:52ch; margin-top:14px}
.foot-nav{display:flex; flex-wrap:wrap; gap:10px 26px; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase}

/* ── article ─────────────────────────────────────────── */
.ahead{max-width:var(--shell); margin:0 auto; padding:clamp(30px,4vw,56px) var(--side) 0}
.ahead h1{font-size:clamp(32px,5.6vw,86px); line-height:.95; margin-top:16px; max-width:26ch}
.crumb{display:flex; align-items:center; gap:11px; font-size:13px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent)}
.crumb svg{width:24px;height:24px;flex:none}
.crumb a{color:var(--accent)}
.lead{font-size:1.24em; line-height:1.44; margin-top:22px; max-width:60ch}
.ameta{margin-top:20px; padding-top:14px; border-top:2px solid var(--ink);
  font-size:.72em; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-quiet);
  display:flex; flex-wrap:wrap; gap:6px 20px}

.abody{max-width:var(--shell); margin:0 auto; padding-block:clamp(30px,3.4vw,52px);
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--side),1fr)
    [wide-start] minmax(0,var(--gut))
    [prose-start] minmax(0,var(--prose))
    [prose-end] minmax(0,var(--gut))
    [wide-end] minmax(var(--side),1fr) [full-end];
}
.abody>*{grid-column:prose}
.abody>.wide{grid-column:wide}
.abody>.bleed{grid-column:full}
.abody>h2{font-size:clamp(24px,2.8vw,44px); line-height:1.04; margin-top:1.9em}
.abody>h2:first-child{margin-top:0}
.abody>h2+p{margin-top:.7em}
.abody>p{max-width:74ch}
.abody>*+*{margin-top:var(--pgap)}
.abody a{color:var(--area); text-decoration:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:2px}
.abody a:hover{color:var(--accent)}

/* insertions — every one keeps ≥2× the paragraph gap on both sides */
.abody>.ins{margin-top:clamp(24px,2.6em,68px); margin-bottom:clamp(24px,2.6em,68px)}
.abody>.ins+*{margin-top:0}

/* ── figures: three treatments, one drawing system ───── */
.article-figure{margin:0; background:transparent}
.article-figure img{width:100%; aspect-ratio:8/5; object-fit:cover; background:var(--mid)}
.article-figure figcaption{display:flex; flex-wrap:wrap; gap:4px 18px; align-items:baseline;
  margin-top:12px; padding-top:11px; border-top:3px solid var(--accent);
  font-size:clamp(15px,.8em,17px); line-height:1.45}
.article-figure figcaption .cap{flex:1 1 22ch; min-width:min(100%,22ch); margin:0}
.article-figure figcaption .cred{flex:0 1 auto; font-size:.84em; color:var(--ink-quiet); margin:0}
/* 1 · mat */
.fig-mat{background:var(--paper); padding:16px}
.fig-mat figcaption{border-top-width:2px; margin-top:14px}
/* 2 · full-bleed band, caption ranged under the left of the plate */
.fig-bleed img{aspect-ratio:16/7; max-height:min(72vh,820px)}
.fig-bleed figcaption{max-width:calc(var(--prose) + var(--gut)); padding-inline:var(--side)}
@media (min-width:900px){ .fig-bleed figcaption{padding-inline:0; margin-left:calc(var(--gut) + var(--side))} }
/* 3 · inset — a small landscape figure in flow, a portrait margin figure once
   there is a margin to put it in (the 4:5 crop belongs to the narrow column only) */
.fig-inset img{aspect-ratio:4/3}
.fig-inset figcaption{border-top-width:2px; font-size:15px}
@media (min-width:900px){
  .abody>.fig-inset{max-width:min(64%,520px)}
}
@media (min-width:1600px){
  .abody>.fig-inset{grid-column:prose; float:right; clear:right; max-width:none;
    width:calc(var(--gut) - 40px); margin-right:calc(-1 * (var(--gut) - 16px)); margin-left:36px}
  .fig-inset img{aspect-ratio:4/5}
}
.gallery{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.gallery figure{margin:0}
.gallery img{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--mid)}
.gallery figcaption{margin-top:9px; font-size:15px; line-height:1.4}
.gallery figcaption .cred{display:block; margin-top:5px; font-size:.86em; color:var(--ink-quiet)}
.gallery.two{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.gallery.two img{aspect-ratio:8/5}

/* ── text components ─────────────────────────────────── */
.pullquote{margin:0; border-top:4px solid var(--accent); border-bottom:1px solid var(--hair); padding:22px 0}
.pullquote p{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:clamp(23px,2.3vw,38px);
  line-height:1.08; margin:0}
.blockquote{margin:0; background:var(--paper); padding:24px 28px; border-left:0}
.blockquote p{font-size:1.05em; line-height:1.5}
.blockquote cite{display:block; margin-top:12px; font-size:.76em; font-style:normal;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-quiet)}
.callout{background:var(--area); color:#fff; padding:clamp(22px,2.4vw,34px)}
.callout h3{font-size:1.22em; color:#fff; margin-bottom:14px}
.callout p{font-size:.94em}
.callout a{color:var(--on-area); text-decoration-color:var(--on-area)}
.callout ul{margin:0; padding-left:1.15em; display:grid; gap:10px; font-size:.92em; line-height:1.5}
.callout li::marker{color:var(--on-area)}
.note{font-size:.86em; line-height:1.5; color:var(--ink-quiet);
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); padding:14px 0}
.sidenote{background:var(--paper); padding:18px 20px}
.sidenote h3{font-size:.9em; letter-spacing:.1em; color:var(--accent); margin-bottom:10px}
.sidenote ul{margin:0; padding-left:1.1em; display:grid; gap:8px; font-size:.8em; line-height:1.45}
@media (min-width:1600px){
  .abody>.sidenote{grid-column:prose; float:right; clear:right;
    width:calc(var(--gut) - 40px); margin-right:calc(-1 * (var(--gut) - 16px));
    margin-left:36px; margin-top:.4em; margin-bottom:1.4em}
}

/* ── data components ─────────────────────────────────── */
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.versus,table.datatable{width:100%; min-width:min(560px,100%); border-collapse:collapse;
  background:var(--paper); font-size:.9em}
table.versus th,table.versus td,table.datatable th,table.datatable td{
  text-align:left; padding:13px 16px; border-bottom:1px solid var(--hair); vertical-align:top}
table.versus thead th,table.datatable thead th{font-family:var(--display); text-transform:uppercase;
  font-size:1.1em; font-weight:700; border-bottom:2px solid var(--ink)}
table.versus tbody th,table.datatable tbody th{font-weight:700; color:var(--ink-quiet);
  font-size:.92em; width:34%}
table.versus caption,table.datatable caption{text-align:left; font-size:.78em; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); padding-bottom:10px}

.statrow{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); background:none}
.statblock{box-shadow:0 0 0 1px var(--hair)}
.statblock{background:var(--paper); padding:22px 20px; display:flex; flex-direction:column; gap:6px}
.stat-num{font-family:var(--display); font-size:clamp(30px,3.2vw,50px); line-height:.9; color:var(--accent)}
.stat-label{font-size:.78em; line-height:1.4; color:var(--ink-quiet)}

.timeline{list-style:none; margin:0; padding:0; background:var(--paper)}
.timeline li{display:grid; grid-template-columns:1fr; gap:4px 24px; padding:16px 20px;
  border-top:1px solid var(--hair)}
.timeline li:first-child{border-top:0}
@media (min-width:640px){ .timeline li{grid-template-columns:minmax(120px,26%) 1fr; align-items:baseline} }
.t-when{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.08em; line-height:1.1; color:var(--accent)}
.t-what{font-size:.92em; line-height:1.5}

.chart{margin:0; background:var(--paper); padding:20px}
.chart svg{width:100%; height:auto; overflow:visible}
.chart figcaption{margin-top:14px; font-size:15px; line-height:1.45; color:var(--ink-quiet)}
.chart .bar-lab{font:600 20px/1 var(--text); fill:var(--ink)}
.chart .bar-val{font:700 20px/1 var(--text); fill:var(--accent)}
@media (min-width:700px){
  .chart .bar-lab{font-size:13px}
  .chart .bar-val{font-size:13px}
}

/* ── map ─────────────────────────────────────────────── */
.map-figure{margin:0 auto; background:var(--area-deep); padding:clamp(16px,2vw,26px);
  max-width:1040px}
.map-figure svg{display:block; width:100%; height:auto; max-height:min(46vh,380px);
  background:var(--area-deep)}
.map-figure .m-land{fill:#14434C; stroke:rgba(241,236,226,.28); stroke-width:1}
.map-figure .m-pin{fill:var(--secondary); stroke:#F1ECE2; stroke-width:3}
/* below 900px a 1200-unit viewBox renders labels at ~4px, so the map keeps the
   pins and hands the naming to a legend instead */
.map-figure .m-pin{r:13}
.m-legend{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:10px 28px;
  grid-template-columns:1fr; color:#fff; font-size:clamp(15px,.8em,17px); line-height:1.4}
.m-legend li{display:flex; gap:11px; align-items:baseline;
  border-top:1px solid rgba(241,236,226,.22); padding-top:9px}
.m-legend li::before{content:""; width:10px; height:10px; flex:none; border-radius:50%;
  background:var(--secondary); transform:translateY(-2px)}
@media (min-width:520px){ .m-legend{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:900px){
  .map-figure .m-pin{r:11}
}
.map-figure figcaption{display:flex; flex-wrap:wrap; gap:6px 20px; align-items:baseline;
  margin-top:16px; padding-top:12px; border-top:3px solid var(--on-area);
  color:#fff; font-size:clamp(15px,.8em,17px); line-height:1.45}
.map-figure figcaption .cred{font-size:.82em; color:rgba(255,255,255,.66)}
.map-slot{min-height:320px; background:var(--area)}

/* ── cards / references ──────────────────────────────── */
.profile-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{background:var(--paper); padding:22px; display:flex; flex-direction:column; gap:8px}
.profile-card .p-photo{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--mid); margin-bottom:6px}
.profile-card h3{font-size:1.16em; line-height:1.08}
.profile-card .p-role{font-size:.76em; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.profile-card p{font-size:.86em; line-height:1.5}
.profile-card .p-links{font-size:.8em; display:flex; flex-wrap:wrap; gap:6px 16px}
.profile-card .p-attr{font-size:.72em; color:var(--ink-quiet); margin-top:auto; padding-top:8px}
.profile-card.no-photo{border-top:4px solid var(--accent)}

.org-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.org-card{background:var(--paper); padding:18px; display:flex; flex-direction:column; gap:8px;
  min-height:120px}
.org-card:hover{text-decoration:none; outline:2px solid var(--accent)}
.org-logo{max-height:40px; width:auto; max-width:100%; object-fit:contain; align-self:flex-start}
.org-name{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.14em; line-height:1.08; color:var(--ink)}
.org-host{font-size:.74em; letter-spacing:.1em; color:var(--ink-quiet); margin-top:auto}
.org-card.no-logo .org-name{border-top:3px solid var(--accent); padding-top:10px}

a.entity-ref{white-space:normal; font-weight:600}

.further-grid{display:grid; gap:1px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  background:none}
.further-grid a{box-shadow:0 0 0 1px var(--hair)}
.further-grid a,.abody .further-grid a{background:var(--paper); padding:20px; display:flex;
  flex-direction:column; gap:8px; text-decoration:none;
  font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:1.12em; line-height:1.1; color:var(--ink)}
.abody .further-grid a:hover{text-decoration:none}
.further-grid a:hover{text-decoration:none; background:var(--area); color:#fff}
.further-grid a span{font-family:var(--text); text-transform:none; font-size:.62em;
  font-weight:400; line-height:1.45; color:var(--ink-quiet)}
.further-grid a:hover span{color:rgba(255,255,255,.8)}
.endnote{border-top:2px solid var(--ink); padding-top:16px}
.endnote h2{font-size:1.3em; margin-bottom:16px}

/* ── category / section pages ────────────────────────── */
.sec-hero{position:relative; background:var(--mid)}
.sec-hero img{width:100%; aspect-ratio:16/6; object-fit:cover; max-height:min(52vh,560px)}
.sec-intro{display:grid; gap:26px 64px; grid-template-columns:1fr; align-items:end}
@media (min-width:1200px){ .sec-intro{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.sec-intro h1{font-size:clamp(32px,5vw,74px); line-height:.96; margin-top:14px}
.sec-intro .blurb{font-size:1.1em; line-height:1.5}
.sec-count{margin-top:14px; font-size:.76em; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-quiet)}

.entry-lead{background:var(--paper); display:grid; grid-template-columns:1fr}
@media (min-width:900px){ .entry-lead{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} }
.entry-lead .shot{position:relative; background:var(--mid); min-height:260px}
.entry-lead .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:899px){ .entry-lead .shot{min-height:0} .entry-lead .shot img{position:static;aspect-ratio:8/5} }
.entry-lead .txt{padding:clamp(26px,3.6vw,52px); display:flex; flex-direction:column;
  justify-content:center; gap:16px}
.entry-lead h2{font-size:clamp(24px,3vw,46px); line-height:1.0}

.entries{display:grid; gap:48px; margin-top:48px}
.entry{background:var(--paper); padding:20px; display:grid; gap:22px; grid-template-columns:1fr;
  align-items:center}
@media (min-width:768px){
  .entry{grid-template-columns:minmax(0,42%) minmax(0,1fr); gap:34px}
  .entry.flip{grid-template-columns:minmax(0,1fr) minmax(0,42%)}
  .entry.flip .e-shot{order:2}
  .entry .e-txt{padding-inline:6px 14px}
  .entry.flip .e-txt{padding-inline:14px 6px}
}
@media (min-width:1600px){ .entries{gap:56px} .entry{padding:24px} }
.entry img{width:100%; aspect-ratio:8/5; object-fit:cover; background:var(--mid)}
.entry h3{font-size:clamp(21px,2.1vw,34px); line-height:1.04}
.entry p{font-size:.9em; line-height:1.55; margin-top:12px; max-width:72ch}
.entry .e-kick{font-size:12.5px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:9px}
.entry .e-kick svg{width:20px;height:20px}
.entry .more{margin-top:16px}

/* ── archive ─────────────────────────────────────────── */
.arch-group{margin-top:var(--band)}
.arch-head{display:flex; align-items:center; gap:14px; padding-bottom:14px; border-bottom:2px solid var(--ink)}
.arch-head svg{width:30px;height:30px;color:var(--accent);flex:none}
.arch-head h2{font-size:1.5em}
.arch-list{list-style:none; margin:0; padding:0; display:grid; gap:1px; background:none;
  grid-template-columns:1fr}
.arch-list li{box-shadow:0 0 0 1px var(--hair)}
@media (min-width:900px){ .arch-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1600px){ .arch-list{grid-template-columns:repeat(3,minmax(0,1fr))} }
.arch-list li{background:var(--ground)}
.arch-list li:empty{box-shadow:none}
.arch-list a{display:flex; gap:16px; padding:16px; align-items:center; color:var(--ink)}
.arch-list a:hover{text-decoration:none; background:var(--paper)}
.arch-list img{width:104px; aspect-ratio:8/5; object-fit:cover; flex:none; background:var(--mid)}
.arch-list b{font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:1.06em; line-height:1.1}
.cat-list{list-style:none;margin:0;padding:0}

/* ── simple page ─────────────────────────────────────── */
.page-body{max-width:var(--shell); margin:0 auto; padding:clamp(30px,4vw,60px) var(--side)}
.page-body h1{font-size:clamp(32px,5vw,72px); line-height:.96}
.page-body .prose{max-width:70ch; margin-top:24px; display:grid; gap:var(--pgap)}
.big404{font-family:var(--display); font-size:clamp(90px,20vw,300px); line-height:.8; color:var(--accent)}

/* ── styleguide only ─────────────────────────────────── */
.sg-sec{border-top:2px solid var(--ink); padding-top:20px; margin-top:var(--band)}
.sg-sec>h2{font-size:1.45em}
.sg-note{font-size:.78em; color:var(--ink-quiet); margin-top:6px}
.sg-demo{margin-top:26px; display:grid; gap:26px}
.sg-narrow{max-width:360px; border:1px dashed var(--accent); padding:12px; overflow-x:auto}

/* 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-mark-panel: Design set no ground on the mark, so light and dark logos cannot
   both read against the page. Give every mark the same dark plate and an inset — and
   GROW the box by that inset so the artwork keeps the size Design chose. */
.sponsor img,.sponsor-box img,.sp-logo img{background:#121013!important;padding:8px 12px!important;box-sizing:border-box!important;height:60px!important;max-height:60px!important;width:100%!important;max-width:min(100%,640px)!important;margin-left:auto!important;margin-right:auto!important;object-fit:contain!important;border-radius:2px}

/* 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{padding:16px 16px!important}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name):not(.sponsor-box):not(.sp-logo):not(.sponsor__logo){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}

/* 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;}

/* MAPKIT_BEGIN — injected real geodata; pins are links */
.map-slot{padding:0;background:none!important;border:0!important;display:flex;align-items:center;justify-content:center;min-height:0!important}
.map-slot>svg.mapkit{width:100%!important;max-width:100%;height:auto;max-height:none;margin:0 auto}
.map-slot{width:100%}
.map-slot{aspect-ratio:auto!important;height:auto!important}
.map-slot::after,.map-slot::before{content:none!important;display:none!important}
.map-figure figcaption{}
.mapkit-panels{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:16px;width:100%}
.mapkit-panels>svg.mapkit{width:100%;height:auto;display:block}
@media (max-width:700px){.mapkit-panels{grid-template-columns:minmax(0,1fr)}}
.mapkit__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#0D1417;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */

/* op-mark-padding: operator: more padding for the logos. Our own sp-mark-frame block gives the
   plate 8px/12px of inset at 60px tall, so the artwork ran close to the edges. The inset goes to
   13px/20px and the plate grows with it, which keeps the artwork the size it is now instead of
   shrinking it into the same box. */
/* ⚠️ max-height:60px!important in the sp-mark block caps the height whatever this says, so the
   plate stayed 60px and only the inset grew — which shrinks the artwork instead of giving it
   room. Release the cap with the height. */
.colo-group .sponsor.sponsor img{height:70px!important;max-height:none!important;padding:13px 20px!important;box-sizing:border-box!important}
@media (min-width:700px) and (max-width:1100px){.colo-group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.colo-group > [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}