/* Carib Pro — “Arc”
   PALETTE (3 named jobs + 2 saturated members, 47° apart in hue)
   --ground  #0F1512  basalt      : page ground
   --ink     #EFE9DC  bone        : type
   --accent  #E9C33C  sulphur     : saturated member 1 — bands, panels, pins, rules
   --flag    #B93A2B  cochineal   : saturated member 2 — hazard marks, figure bars, dates
   --panel   #161F1B  ash         : quiet secondary ground
*/
:root{
  --ground:#0F1512;
  --panel:#161F1B;
  --panel-2:#1D2723;
  --ink:#EFE9DC;
  --ink-quiet:rgba(239,233,220,.74);
  --ink-faint:rgba(239,233,220,.52);
  --accent:#E9C33C;
  --flag:#B93A2B;
  --rule:#36443E;

  --prose:68ch;
  --wide:100ch;
  --gutter:clamp(18px,4vw,56px);
  --shell:1560px;

  --fs-body:1.0625rem;   /* 17px */
  --fs-small:0.9375rem;  /* 15px */
  --lh-body:1.62;

  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,Segoe UI,sans-serif;
}

/* ——— real rules ABOVE the desktop cap: the page gains width, columns and type at each step ——— */
@media (min-width:1200px){
  :root{--prose:70ch;--wide:104ch;--shell:1680px;--fs-body:1.125rem;--fs-small:0.96875rem}
}
@media (min-width:1600px){
  :root{--prose:76ch;--wide:118ch;--shell:1900px;--fs-body:1.1875rem;--fs-small:1rem;--gutter:64px}
}
@media (min-width:2100px){
  :root{--prose:84ch;--wide:132ch;--shell:2320px;--fs-body:1.3125rem;--fs-small:1.0625rem;--gutter:88px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:var(--lh-body);
  font-weight:330;letter-spacing:.002em;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.02;margin:0}
::selection{background:var(--flag);color:var(--ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.shell{width:min(var(--shell),100% - var(--gutter)*2);margin-inline:auto}
.icon{width:1.5em;height:1.5em;flex:none;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:.45em;font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0}
.quiet{color:var(--ink-quiet)}

/* ============ MASTHEAD ============ */
.masthead{border-bottom:1px solid var(--rule)}
.masthead__inner{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(14px,2.4vw,48px);padding:clamp(14px,1.6vw,30px) 0 clamp(10px,1vw,18px)}
.wordmark{display:flex;align-items:center;gap:.5em;color:var(--ink)}
.wordmark:hover{text-decoration:none;color:var(--ink)}
.wordmark__type{font-family:var(--serif);font-size:clamp(38px,5.2vw,92px);line-height:.82;letter-spacing:-.02em;white-space:nowrap}
.wordmark__mark{width:clamp(44px,4.4vw,84px);height:auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.wordmark__mark .hot{stroke:var(--flag)}
.masthead__rule{display:block;width:100%;height:auto;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round}
.masthead__rule .faint{stroke:var(--rule)}
.nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:clamp(10px,1.4vw,30px);padding-bottom:.4em}
.nav a{display:flex;align-items:center;gap:.42em;color:var(--ink);font-size:var(--fs-small);font-weight:600;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.nav a:hover{color:var(--accent);text-decoration:none}
.nav a[aria-current="page"]{color:var(--accent);border-bottom:2px solid var(--accent)}
.nav .icon{width:1.05em;height:1.05em;color:var(--accent);stroke-width:1.7}
.nav a:hover .icon{color:var(--ink)}

/* ============ HOMEPAGE BANDS ============ */
.lead-band{position:relative;border-bottom:1px solid var(--rule);background:#0A0F0D}
.lead-band__img{width:100%;height:min(86vh,1000px);min-height:420px;object-fit:cover;opacity:.86}
.lead-band__plate{position:absolute;inset:auto 0 0 0;padding:clamp(30px,6vw,120px) 0 clamp(20px,2.4vw,52px);
  background:linear-gradient(to top,rgba(10,15,13,.97),rgba(10,15,13,.9) 42%,rgba(10,15,13,.55) 78%,rgba(10,15,13,0))}
.lead-band h1{font-size:clamp(38px,6.4vw,150px);line-height:.92;max-width:21ch;text-wrap:balance;
  text-shadow:0 2px 4px rgba(10,15,13,.55),0 8px 40px rgba(10,15,13,.8)}
.lead-band .deck{text-shadow:0 1px 3px rgba(10,15,13,.7);margin:clamp(14px,1.6vw,32px) 0 0;max-width:64ch;font-size:clamp(17px,1.35vw,26px);line-height:1.42;color:var(--ink-quiet)}
.lead-band .more{margin:clamp(14px,1.4vw,28px) 0 0;font-size:var(--fs-small);font-weight:600;letter-spacing:.14em;text-transform:uppercase}

.signature{background:var(--accent);color:var(--ground);border-bottom:1px solid var(--rule)}
.signature p{margin:0;padding:clamp(20px,2.6vw,64px) 0;font-family:var(--serif);font-size:clamp(26px,3.6vw,86px);line-height:1.02;letter-spacing:-.02em}
.signature .sep{color:rgba(15,21,18,.45)}

.device{border-bottom:1px solid var(--rule);padding:clamp(30px,4vw,110px) 0}
.device__head{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:clamp(16px,2vw,56px);align-items:end;margin-bottom:clamp(18px,2vw,48px)}
.device h2{font-size:clamp(26px,2.8vw,62px);max-width:26ch}
.device__svg{width:100%;height:auto;display:block;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round}
.device__svg .hot{stroke:var(--flag);stroke-width:2.4}
.device__svg .warm{stroke:var(--accent);stroke-width:2.6}
.device__svg .faint{stroke:var(--rule)}
.device__svg text{fill:var(--ink);stroke:none;font-family:var(--sans);font-size:22px;letter-spacing:2.4px}
.device__svg text.hot{fill:var(--flag)}
.device__svg text.warm{fill:var(--accent)}
.device__svg text.faint-t{fill:var(--ink-faint);font-size:20px}

.hub{border-bottom:1px solid var(--rule);padding:clamp(30px,4vw,96px) 0}
.hub h2{font-size:clamp(24px,2.4vw,52px);margin-bottom:clamp(16px,2vw,44px);max-width:30ch}
.hub__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.hub__list li{border-top:1px solid var(--rule)}
.hub__list{margin-inline:calc(-1 * clamp(10px,1.1vw,24px))}
.hub__list a{display:grid;grid-template-columns:auto minmax(0,22ch) minmax(0,1fr);gap:clamp(10px,1.6vw,40px);align-items:baseline;
  padding:clamp(12px,1.2vw,26px) clamp(10px,1.1vw,24px);color:var(--ink)}
.hub__list a:hover{text-decoration:none;background:var(--panel)}
.hub__list a:hover .hub__name{color:var(--accent)}
.hub__list .icon{width:1.7em;height:1.7em;align-self:center;color:var(--accent)}
.hub__name{font-family:var(--serif);font-size:clamp(20px,1.7vw,36px);line-height:1.05}
.hub__blurb{color:var(--ink-quiet);font-size:var(--fs-small)}
@media (max-width:700px){.hub__list a{grid-template-columns:auto minmax(0,1fr)}.hub__blurb{grid-column:2}}

/* ============ MAP ============ */
.map-figure{margin:0;border-bottom:1px solid var(--rule);padding:clamp(28px,3.6vw,96px) 0}
.map-figure__grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,2.1fr);align-content:start;gap:clamp(20px,3vw,72px);align-items:start}
@media (max-width:900px){.map-figure__grid{grid-template-columns:minmax(0,1fr)}}
.map-slot{width:100%}
.map-svg{width:100%;height:auto;display:block;background:#0A1210}
.map-svg .land{fill:#2E3E35;stroke:var(--ink);stroke-width:.8;vector-effect:non-scaling-stroke}
.map-svg .neighbour{fill:rgba(239,233,220,.07);stroke:none}
.map-svg .pin{stroke:var(--ground);stroke-width:1.4}
.map-svg .pin-label{fill:var(--ink);font-family:var(--sans);font-size:21px;font-weight:600;letter-spacing:.04em;stroke:none;paint-order:stroke;stroke:var(--ground);stroke-width:4px}
.map-figure h2{font-size:clamp(24px,2.6vw,56px);max-width:24ch;margin-bottom:.5em}

/* ============ FIGURE SYSTEM (one drawing system, four treatments) ============ */
figure{margin:0}
figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5em 1.5em;font-size:var(--fs-small);line-height:1.45;color:var(--ink-quiet);padding-top:.7em}
figcaption .cap{flex:1 1 24ch;min-width:0;max-width:86ch;margin:0}
figcaption .credit{flex:0 1 auto;margin:0 0 0 auto;font-size:.86em;letter-spacing:.06em;color:var(--ink-faint);text-align:left;max-width:56ch}
@media (max-width:640px){figcaption .credit{margin-left:0;text-align:left}}

/* 1 — full-bleed band */
.article-figure.bleed img{width:100%;height:clamp(320px,58vh,760px);object-fit:cover}
.article-figure.bleed figcaption{border-top:2px solid var(--accent);margin-top:0;padding-top:.8em}

/* 2 — mat: photograph sits on an ash panel with a sulphur head-rule */
.article-figure.mat{background:var(--panel);border-top:2px solid var(--accent);padding:clamp(12px,1.4vw,28px)}
.article-figure.mat img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.article-figure.mat figcaption{padding-top:.9em}

/* 3 — inset: column width, cochineal bar at the left, hanging caption */
.article-figure.inset{border-left:3px solid var(--flag);padding-left:clamp(12px,1.2vw,22px)}
.article-figure.inset img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}

/* 4 — plain in-column plate */
.article-figure.plate img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover}
.article-figure.plate figcaption{border-top:1px solid var(--rule);padding-top:.7em}

.gallery{display:grid;gap:clamp(12px,1.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.gallery img{height:auto;aspect-ratio:4/5;object-fit:cover;width:100%}

/* ============ ARTICLE ============ */
.article-head{border-bottom:1px solid var(--rule);padding:clamp(24px,3.4vw,88px) 0 clamp(18px,2.2vw,52px)}
.article-head .kicker{display:flex;align-items:center;gap:.5em;margin-bottom:clamp(12px,1.4vw,30px)}
.article-head h1{font-size:clamp(34px,5.4vw,124px);line-height:.94;max-width:22ch;text-wrap:balance}
.article-head .lead{margin:clamp(16px,1.8vw,40px) 0 0;max-width:70ch;font-size:clamp(18px,1.45vw,30px);line-height:1.4;color:var(--ink-quiet);font-weight:330}
.article-head .lead strong{font-weight:500;color:var(--ink)}

.article-body{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,calc((var(--wide) - var(--prose))/2))
    [prose-start] min(var(--prose),100% - var(--gutter)*2) [prose-end]
    minmax(0,calc((var(--wide) - var(--prose))/2)) [wide-end]
    minmax(var(--gutter),1fr) [full-end];
  padding:clamp(24px,3vw,80px) 0 clamp(30px,4vw,110px);
}
.article-body>*{grid-column:prose}
.article-body>.breakout{grid-column:wide-start/wide-end}
.article-body>.bleed{grid-column:full-start/full-end}
.article-body>p{margin:0 0 1.15em}
.article-body>h2{grid-column:wide-start/wide-end;font-size:clamp(24px,2.4vw,50px);margin:clamp(24px,2.6vw,64px) 0 .55em;max-width:30ch}
.article-body>h2::before{content:"";display:block;width:clamp(48px,6vw,140px);height:2px;background:var(--flag);margin-bottom:.5em}
.article-body>figure{margin:clamp(22px,2.6vw,60px) 0}
.article-body a{text-decoration:underline;text-decoration-color:rgba(233,195,60,.45);text-underline-offset:3px}

.lead{font-size:1.15em;line-height:1.45}
.pullquote{margin:clamp(24px,3vw,64px) 0;padding:0 0 0 clamp(16px,2vw,40px);border-left:3px solid var(--accent)}
.pullquote p{margin:0;font-family:var(--serif);font-size:clamp(24px,2.4vw,54px);line-height:1.1;color:var(--accent);max-width:34ch}
.blockquote{margin:clamp(20px,2.4vw,52px) 0;padding:clamp(14px,1.6vw,32px) clamp(16px,2vw,40px);background:var(--panel)}
.blockquote p{margin:0 0 .6em;font-family:var(--serif);font-size:clamp(20px,1.8vw,34px);line-height:1.16}
.blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:var(--fs-small);color:var(--ink-faint);letter-spacing:.06em}
.callout{background:var(--panel);border-top:2px solid var(--accent);padding:clamp(16px,1.8vw,36px)}
.callout p{margin:0;font-size:1.06em}
.note{color:var(--ink-quiet);font-size:var(--fs-small);border-left:2px solid var(--rule);padding-left:1em;margin:1.4em 0}

/* Notes-for-Design material — plates that break the measure */
.plate{background:var(--panel);padding:clamp(16px,2vw,44px);margin:clamp(24px,3vw,68px) 0}
.plate--flag{background:transparent;border-top:2px solid var(--flag);border-bottom:1px solid var(--rule)}
.plate__title{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 clamp(12px,1.2vw,26px)}

.timeline{list-style:none;margin:0;padding:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(9ch,20ch) minmax(0,1fr);gap:clamp(10px,1.6vw,36px);
  padding:clamp(10px,1vw,20px) 0;border-top:1px solid var(--rule)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--sans);font-weight:600;letter-spacing:.04em;color:var(--flag);font-size:var(--fs-small);text-transform:uppercase;line-height:1.35}
.t-what{color:var(--ink);line-height:1.5}
@media (max-width:620px){.timeline li{grid-template-columns:minmax(0,1fr);gap:.2em}}

table{border-collapse:collapse;width:100%;font-size:var(--fs-small)}
.datatable th,.versus th{text-align:left;font-family:var(--sans);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.82em;color:var(--ink-faint);padding:0 1.4em .6em 0;border-bottom:2px solid var(--rule)}
.datatable td,.versus td{padding:.75em 1.4em .75em 0;border-bottom:1px solid var(--rule);vertical-align:top;line-height:1.5}
.datatable td:first-child,.versus td:first-child{color:var(--accent);font-weight:500;padding-right:2em}
.versus td+td{border-left:1px solid var(--rule);padding-left:1.4em}

.statrow{display:grid;gap:clamp(12px,1.4vw,30px);grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.statblock{border-top:2px solid var(--flag);padding-top:.6em}
.stat-num{display:block;font-family:var(--serif);font-size:clamp(34px,3.4vw,72px);line-height:.94;color:var(--ink)}
.stat-label{display:block;font-size:var(--fs-small);color:var(--ink-quiet);margin-top:.35em;max-width:26ch}

.chart svg{width:100%;height:auto;display:block}
.chart .bar-rect{fill:var(--accent)}
.chart .bar-rect.alt{fill:var(--flag)}
.chart text{fill:var(--ink-quiet);font-family:var(--sans);font-size:15px}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart figcaption{border-top:1px solid var(--rule);margin-top:.6em}

/* cards / references */
.profile-grid,.org-grid{display:grid;gap:clamp(12px,1.4vw,28px);grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.profile-card{background:var(--panel);padding:clamp(14px,1.6vw,30px);display:flex;flex-direction:column;gap:.5em;border-top:2px solid var(--accent)}
.profile-card .p-photo{width:88px;height:88px;object-fit:cover;border-radius:50%}
.profile-card.no-photo::before{content:"";display:block;width:88px;height:88px;border:1px solid var(--rule);border-radius:50%}
.profile-card h3{font-size:clamp(20px,1.5vw,30px)}
.profile-card .p-role{margin:0;font-size:var(--fs-small);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.profile-card p{margin:0}
.profile-card .p-links,.profile-card .p-attr{font-size:var(--fs-small);color:var(--ink-faint);margin-top:auto}
.org-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:.9em;align-items:center;
  background:var(--panel);padding:.9em 1.1em;color:var(--ink)}
.org-card:hover{text-decoration:none;background:var(--panel-2)}
.org-logo{grid-row:1/3;width:52px;height:52px;object-fit:contain;background:#000;padding:4px}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-card.no-logo .org-name{grid-row:1}
.org-name{font-family:var(--serif);font-size:1.25em;line-height:1.1}
.org-host{font-size:var(--fs-small);color:var(--ink-faint);letter-spacing:.06em}
.entity-ref{white-space:nowrap}
.further-grid{display:grid;gap:clamp(10px,1.2vw,24px);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.further-grid a{display:block;background:var(--panel);padding:clamp(12px,1.2vw,24px);color:var(--ink);font-family:var(--serif);font-size:1.3em;line-height:1.12;border-top:2px solid var(--rule)}
.further-grid a:hover{text-decoration:none;border-top-color:var(--accent);color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:block;padding:.8em 0;font-family:var(--serif);font-size:clamp(19px,1.4vw,30px);line-height:1.12;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}

/* ============ CATEGORY + ARCHIVE ============ */
.cat-head{border-bottom:1px solid var(--rule);padding:clamp(24px,3.4vw,88px) 0 clamp(18px,2.2vw,48px)}
.cat-head h1{font-size:clamp(32px,5vw,112px);line-height:.94;max-width:22ch;text-wrap:balance}
.cat-head .lead{margin:clamp(14px,1.6vw,34px) 0 0;max-width:70ch;color:var(--ink-quiet);font-size:clamp(18px,1.35vw,28px);line-height:1.42}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list>li{border-top:1px solid var(--rule)}
.cat-list>li:first-child{border-top:0}
.cat-list a{display:grid;grid-template-columns:minmax(140px,22%) minmax(0,1fr);gap:clamp(14px,2vw,48px);
  padding:clamp(16px,1.8vw,44px) 0;color:var(--ink);align-items:start}
.cat-list a:hover{text-decoration:none}
.cat-list a:hover h2{color:var(--accent)}
.cat-list img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.cat-list h2{font-size:clamp(22px,2.1vw,44px);line-height:1.05;margin-bottom:.35em;max-width:28ch}
.cat-list p{margin:0;color:var(--ink-quiet);max-width:76ch}
@media (max-width:640px){.cat-list a{grid-template-columns:minmax(0,1fr)}}

.register{padding:clamp(24px,3vw,72px) 0}
.register h2{font-size:clamp(22px,2vw,42px);margin:clamp(24px,2.6vw,60px) 0 .6em;display:flex;align-items:center;gap:.5em}
.register h2 .icon{color:var(--accent)}
.register table{font-size:var(--fs-body)}
.register td{padding:.7em 1.4em .7em 0;border-bottom:1px solid var(--rule);vertical-align:top}
.register td:first-child{width:44%}
.register td a{font-family:var(--serif);font-size:1.2em;line-height:1.14}
.register td.brief{color:var(--ink-quiet);font-size:var(--fs-small)}
@media (max-width:700px){
  .register td{display:block;border-bottom:0;padding:0}
  .register tr{display:block;border-bottom:1px solid var(--rule)}
  .register td:first-child{width:auto}
  .register td a{display:block;min-height:46px;padding:.6em 0 .2em}
  .register td.brief{padding-bottom:.7em}
}

/* ============ SUPPORTERS — a directory strip in the footer's own furniture ============ */
.supporters{border-top:1px solid var(--rule);padding:clamp(24px,3vw,64px) 0 0}
.supporters__head{display:flex;flex-wrap:wrap;gap:.6em 2em;align-items:baseline;margin-bottom:clamp(14px,1.4vw,30px)}
.supporters__note{font-size:var(--fs-small);color:var(--ink-faint);margin:0}
.supporters__group{list-style:none;margin:0 0 clamp(18px,2vw,40px);padding:0}
.supporters__group li{border-top:1px solid var(--rule)}
.sponsor{display:grid;grid-template-columns:minmax(200px,26%) minmax(200px,1fr);gap:clamp(10px,1.6vw,40px);
  align-items:baseline;padding:clamp(10px,1vw,20px) 0;color:var(--ink)}
.sponsor:hover{text-decoration:none}
.sponsor:hover .sponsor-name{color:var(--accent)}
.sponsor-name{font-family:var(--serif);font-size:clamp(19px,1.5vw,32px);line-height:1.1}
.sponsor-blurb{font-size:var(--fs-small);color:var(--ink-quiet);line-height:1.5}
.supporters__group--roll .sponsor{grid-template-columns:minmax(0,1fr)}
.supporters__group--roll .sponsor-name{font-size:clamp(17px,1.1vw,22px)}
@media (max-width:640px){.sponsor{grid-template-columns:minmax(0,1fr);gap:.25em}}

/* ============ FOOTER ============ */
.footer{border-top:1px solid var(--rule);background:var(--panel);margin-top:0}
.footer__inner{display:grid;grid-template-columns:minmax(260px,1.05fr) minmax(0,2fr);gap:clamp(18px,2.4vw,64px);
  padding:clamp(24px,3vw,72px) 0 clamp(24px,3vw,64px)}
.footer h2{font-family:var(--serif);font-size:clamp(26px,2.4vw,52px);line-height:.9;margin-bottom:.4em}
.footer p{margin:0;color:var(--ink-quiet);font-size:var(--fs-small);max-width:52ch}
.footer nav{display:flex;flex-wrap:wrap;align-content:flex-start;gap:.9em clamp(20px,2.6vw,64px);font-size:var(--fs-small)}
@media (max-width:720px){.footer__inner{grid-template-columns:minmax(0,1fr)}}
.footer nav a{color:var(--ink-quiet)}
.footer nav a:hover{color:var(--accent)}

/* ============ 404 / ABOUT ============ */
.simple{padding:clamp(30px,5vw,140px) 0;display:grid;gap:clamp(16px,2vw,44px);
  grid-template-columns:minmax(0,1fr);max-width:var(--wide)}
.simple h1{font-size:clamp(34px,5vw,110px);line-height:.94;max-width:24ch}
.simple p{max-width:70ch;margin:0}

/* ============ STYLEGUIDE ONLY ============ */
.sg-section{border-top:1px solid var(--rule);padding:clamp(20px,2.4vw,56px) 0}
.sg-section>h2{font-size:clamp(22px,2vw,40px);margin-bottom:.6em}
.sg-narrow{max-width:360px;border:1px dashed var(--rule);padding:12px;margin-top:1.4em}

/* ——— map legend and the eight marked places ——— */
.map-legend{list-style:none;margin:clamp(16px,1.6vw,32px) 0 0;padding:0;display:grid;gap:.55em;font-size:var(--fs-small);color:var(--ink-quiet)}
.map-legend li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;align-items:center}
.key{width:14px;height:14px;display:block;border:1px solid var(--rule)}
.key--pin{border-radius:50%;background:var(--accent);border-color:var(--ground)}
.key--land{background:#2E3E35;border-color:rgba(239,233,220,.55)}
.key--nb{background:rgba(239,233,220,.07);border-color:transparent}
.map-places__title{margin:clamp(18px,1.8vw,36px) 0 .7em;color:var(--ink-faint)}
.map-places{list-style:none;margin:0;padding:0;display:grid;gap:.1em clamp(14px,1.6vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.map-places li{border-top:2px solid var(--c,var(--rule))}
.map-places a{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.5em;align-items:baseline;
  padding:.5em 0;color:var(--ink)}
.map-places__no{font-family:var(--sans);font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;color:var(--c,var(--accent))}
.map-places__name{font-family:var(--serif);font-size:1.15em;line-height:1.14}
.map-places a:hover{text-decoration:none}
.map-places a:hover .map-places__name{color:var(--c,var(--accent))}
.map-legend .key--pin{background:linear-gradient(90deg,oklch(0.860 0.150 95),oklch(0.670 0.170 32))}
@media (min-width:1600px){.map-places{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}}


/* ——— supporters: horizontal. constant-width tiles, prominence by class ——— */
.supporters__group--feat{display:grid;grid-template-columns:repeat(auto-fit,320px);gap:0 clamp(18px,2.2vw,56px);border-top:1px solid var(--rule)}
.supporters__group--feat li{border-top:0}
.supporters__group--feat .sponsor{display:block;padding:clamp(12px,1.2vw,24px) 0}
.supporters__group--feat .sponsor-name{display:block}
.supporters__group--feat .sponsor-blurb{display:block;margin-top:.35em;max-width:32ch}
.supporters__group--roll{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--rule)}
.supporters__group--roll li{border-top:0;border-left:1px solid var(--rule)}
.supporters__group--roll .sponsor{display:block;padding:.75em clamp(16px,1.8vw,40px)}
@media (max-width:760px){
  .supporters__group--feat{grid-template-columns:minmax(0,1fr)}
  .supporters__group--feat li{border-top:1px solid var(--rule)}
  .supporters__group--roll{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
  .supporters__group--roll li{border-left:0;border-top:1px solid var(--rule)}
  .supporters__group--roll .sponsor{padding-left:0}
}

/* ——— two seconds, deliberately unlike each other ——— */
.seconds{border-bottom:1px solid var(--rule);padding:clamp(30px,4vw,110px) 0 clamp(34px,4.4vw,120px);
  display:grid;gap:clamp(28px,3.4vw,96px);grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);align-items:start}
.second{display:block}
.second__frame{position:relative;margin:0}
.second__frame img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}
.second__frame--tall img{height:auto;aspect-ratio:4/5}
.second__no{position:absolute;top:clamp(-8px,-.4vw,0px);right:clamp(8px,1vw,24px);
  font-family:var(--serif);font-size:clamp(64px,8vw,190px);line-height:.8;color:transparent;
  -webkit-text-stroke:1.5px var(--accent);text-stroke:1.5px var(--accent);pointer-events:none}
/* lead: a sulphur plate carrying the type, overlapping the photograph */
.second--lead .second__plate{position:relative;z-index:1;background:var(--accent);color:var(--ground);
  padding:clamp(16px,2vw,44px) clamp(18px,2.2vw,52px) clamp(20px,2.2vw,48px);
  width:min(90%,84ch);margin-left:clamp(0px,3.4vw,80px);margin-top:clamp(-190px,-11vw,-56px);
  box-shadow:-14px -14px 0 0 rgba(10,15,13,.35)}
.second--lead .second__plate .kicker{color:rgba(15,21,18,.66)}
.second--lead h3{font-size:clamp(26px,2.6vw,60px);line-height:1.02;margin:.35em 0 .5em;max-width:26ch}
.second--lead h3 a{color:var(--ground)}
.second--lead h3 a:hover{color:#7A1A10;text-decoration:none}
.second--lead .second__plate p{margin:0;max-width:62ch;color:rgba(15,21,18,.82)}
.second__links{list-style:none;margin:clamp(14px,1.4vw,30px) 0 0;padding:0;display:grid;gap:0}
.second--lead .second__links li{border-top:1px solid rgba(15,21,18,.28)}
.second--lead .second__links a{display:block;padding:.55em 0;color:var(--ground);font-family:var(--serif);font-size:1.25em;line-height:1.15}
.second--lead .second__links a:hover{color:#7A1A10;text-decoration:none}
/* tall: type first on the ash panel, cochineal head-rule, photograph beneath */
.second--tall .second__head{position:relative;background:var(--panel);border-top:3px solid var(--flag);
  padding:clamp(14px,1.6vw,34px) clamp(14px,1.6vw,32px) clamp(16px,1.8vw,36px)}
.second--tall .second__no--inline{position:absolute;top:auto;bottom:clamp(-6px,-.4vw,0px);right:clamp(10px,1vw,22px);
  font-size:clamp(48px,4.4vw,110px);-webkit-text-stroke:1.2px rgba(185,58,43,.85);text-stroke:1.2px rgba(185,58,43,.85)}
.second--tall h3{font-size:clamp(22px,1.8vw,40px);line-height:1.04;margin:.4em 0 .45em;max-width:22ch}
.second--tall h3 a{color:var(--ink)}
.second--tall h3 a:hover{color:var(--accent);text-decoration:none}
.second--tall .second__head p{margin:0;color:var(--ink-quiet);max-width:44ch}
.second__links--quiet li{border-bottom:1px solid var(--rule)}
.second__links--quiet a{display:block;padding:.7em 0;color:var(--ink);font-family:var(--serif);font-size:clamp(18px,1.25vw,26px);line-height:1.14}
.second__links--quiet a:hover{color:var(--accent);text-decoration:none}
@media (max-width:940px){
  .seconds{grid-template-columns:minmax(0,1fr)}
  .second--lead .second__plate{width:calc(100% - 24px);margin-left:24px;margin-top:clamp(-120px,-14vw,-40px)}
}
@media (min-width:1600px){
  .seconds{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr)}
  .second--lead .second__frame img{height:auto;aspect-ratio:2/1}
}

/* ——— heads use the desktop width: title left, standfirst in a second column ——— */
@media (min-width:1000px){
  .article-head .shell,.cat-head .shell{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    column-gap:clamp(34px,4.2vw,120px);align-items:end}
  .article-head .kicker,.cat-head .kicker{grid-column:1/-1}
  .article-head h1{max-width:26ch;font-size:clamp(46px,5.8vw,132px)}
  .cat-head h1{max-width:26ch}
  .article-head .lead,.cat-head .lead{margin:0 0 .45em;max-width:52ch}
}
@media (min-width:1600px){
  .article-head .shell,.cat-head .shell{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
  .article-head .lead,.cat-head .lead{max-width:56ch}
}

/* ——— chronology plate, redrawn: a spine with markers, dates set as type ——— */
.plate--flag{background:var(--panel);border-top:3px solid var(--flag);border-bottom:0;
  padding:clamp(16px,2vw,44px) clamp(16px,2vw,44px) clamp(10px,1.2vw,26px)}
.plate--flag .plate__title{display:flex;align-items:center;gap:1em;color:var(--accent)}
.plate--flag .plate__title::after{content:"";flex:1 1 auto;height:1px;background:var(--rule)}
.plate--flag .timeline li{grid-template-columns:minmax(8ch,15ch) 26px minmax(0,1fr);
  gap:0 clamp(8px,1vw,20px);border-top:0;padding:clamp(10px,1vw,18px) 0;align-items:start}
.plate--flag .timeline li::before{content:"";grid-column:2;grid-row:1;align-self:stretch;min-height:1.6em;
  background:
    radial-gradient(circle 4.5px at 50% 12px, var(--flag) 0 4.5px, transparent 5.5px),
    linear-gradient(var(--rule),var(--rule)) center/1px 100% no-repeat}
.plate--flag .timeline li:first-child::before{background:
    radial-gradient(circle 4.5px at 50% 12px, var(--flag) 0 4.5px, transparent 5.5px),
    linear-gradient(var(--rule),var(--rule)) center 12px/1px 100% no-repeat}
.plate--flag .timeline li:last-child::before{background:
    radial-gradient(circle 4.5px at 50% 12px, var(--flag) 0 4.5px, transparent 5.5px),
    linear-gradient(var(--rule),var(--rule)) center top/1px 12px no-repeat}
.plate--flag .t-when{grid-column:1;grid-row:1;font-family:var(--serif);font-size:clamp(20px,1.6vw,34px);line-height:1.06;
  letter-spacing:-.01em;text-transform:none;color:var(--flag);padding-top:.05em}
.plate--flag .t-what{grid-column:3;grid-row:1;color:var(--ink);line-height:1.5;padding-top:.15em}
@media (max-width:620px){
  .plate--flag .t-when,.plate--flag .t-what{grid-column:1}
  .plate--flag .timeline li{grid-template-columns:minmax(0,1fr);gap:.2em;
    border-top:1px solid var(--rule);padding:.9em 0}
  .plate--flag .timeline li::before{display:none}
  .plate--flag .t-what{grid-row:2}
  .plate--flag .timeline li:first-child{border-top:0}
}

.map-figure figcaption{display:block}
.map-figure figcaption .credit{margin:.6em 0 0;text-align:left}

/* ——— mobile: the drawings keep their shape, the labels become type ——— */
.device__key{display:none}
@media (max-width:820px){
  .device__svg text{display:none}
  .device__key{display:grid;gap:.6em;list-style:none;margin:clamp(14px,3vw,24px) 0 0;padding:0;font-size:var(--fs-small);color:var(--ink-quiet)}
  .device__key li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;align-items:start}
  .dk{width:14px;height:3px;margin-top:.62em;display:block}
  .dk--hot{background:var(--flag)}
  .dk--warm{background:var(--accent)}
  .dk--faint{background:var(--rule)}
  .map-svg .pin-name{display:none}
  .map-svg .pin-label{font-size:44px;font-weight:700}
  .map-svg .pin{r:15}
}

/* ——— mobile: tap targets, and two columns where one wastes the width ——— */
@media (max-width:820px){
  .nav{width:100%;margin-left:0;gap:0;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50% - .5px,160px),1fr));
    border-top:1px solid var(--rule);padding-bottom:0}
  .nav a{min-height:46px;padding:.55em .2em;border-bottom:1px solid var(--rule)}
  .nav a[aria-current="page"]{border-bottom:2px solid var(--accent)}
  .wordmark{min-height:46px;align-items:center}
  .lead-band .more a{display:inline-block;padding:.55em 0;min-height:46px}
  .map-places a{min-height:46px;align-items:center}
  .second--tall h3 a{display:block;padding:.35em 0;min-height:46px}
  .footer__links{gap:0}
  .footer__links a{display:block;min-height:46px;padding:.75em 0;border-bottom:1px solid var(--rule);width:100%}
  .supporters__group--roll{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}
  .supporters__group--roll .sponsor{min-height:46px;display:flex;align-items:center}
  .second--lead .second__plate{width:calc(100% - 14px);margin-left:14px}
}

/* ——— laptop widths: the drawings are too small to carry their own labels ——— */
@media (max-width:1300px){
  .device__svg text{display:none}
  .device__key{display:grid;gap:.6em;list-style:none;margin:clamp(14px,2vw,26px) 0 0;padding:0;font-size:var(--fs-small);color:var(--ink-quiet)}
  .device__key li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.7em;align-items:start}
  .dk{width:14px;height:3px;margin-top:.62em;display:block}
  .dk--hot{background:var(--flag)}
  .dk--warm{background:var(--accent)}
  .dk--faint{background:var(--rule)}
  .map-svg .pin-name{display:none}
  .map-svg .pin-label{font-size:30px;font-weight:700}
  .map-svg .pin{r:11}
}
@media (min-width:1024px) and (max-width:1300px){
  .device__key{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(20px,2.4vw,52px)}
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain}

/* sp-contain-guard: sponsor logos are wordmarks — never object-fit:cover (crops).
   object-fit ONLY. This block used to also set width:auto, padding:4px 10px,
   max-width:calc(100% - 20px) and min/max-height, which overrode Design's own frame and
   let every plate shrink-wrap its logo — the recurring "inconsistent sizing" and
   "lacks padding". Geometry belongs to Design. */
.sponsor img,.sponsor-box img,.sp-logo img{object-fit:contain!important;display:block;margin-left:auto;margin-right:auto;align-self:center}

/* 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}
.supporters__head{flex-wrap:wrap!important}
.supporters__head > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.supporters__group--roll{flex-wrap:wrap!important}
.supporters__group--roll > .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-domain-override: per-domain, from work/css_override.css */
/* Design shipped the supporters as names + copy with no mark; the mark is added and drawn here.
   Featured: four across (auto-fit 320px wrapped 3+1). Roll: four equal columns, not content-width. */
.sponsor img{display:block;width:100%;height:60px;object-fit:contain;background:#121013;padding:8px 12px;box-sizing:border-box;border-radius:2px;margin-bottom:12px}
.supporters__group--feat{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.supporters__group--roll li{flex:1 1 200px;min-width:0}
.supporters__group--roll .sponsor{display:block!important;min-height:0!important}
@media (max-width:900px){.supporters__group--feat{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

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

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

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

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

/* 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__pin{cursor:pointer}
.mapkit__pin text{paint-order:stroke;stroke:#123A46;stroke-width:3px;stroke-linejoin:round}
.mapkit__pin:hover circle{r:9.1}
.mapkit__pin:hover text{font-weight:700}
/* MAPKIT_END */


/* sp-mark-panel (withdrawn): the page ground is already dark, so the mark needs no plate of its
   own. Design shipped these supporters as names + copy with no mark at all, so the mark's
   GEOMETRY still has to come from us — but the #121013 ground and its inset are dropped, and
   the mark gets the full height back instead of paying for padding. */
.sponsor img{background:transparent!important;padding:0!important;border-radius:0!important;
             height:60px!important;max-height:60px!important}

/* op-text-spill: the page scrolled sideways on phones because TEXT spilled out of boxes that
   themselves fit — which no element rect shows: nav.nav a (nowrap, "Cane & Banana" +20px). Each is released the way its box needs
   (a code block scrolls inside itself, nowrap copy may wrap, a squeezing row may wrap, a box
   wider than its column is held to it, a long word may break). Structural only — no spacing
   value of mine. Verified on every failing page with webfonts settled; desktop unchanged. */
@media (max-width:400px){
  nav.nav a{white-space:normal!important;overflow-wrap:anywhere!important}
}

/* op-odd-tier-lead: money_slots changed a tier's size — .supporters__group.supporters__group--roll (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){
  .supporters__group.supporters__group--roll: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 200px, min-width 0px), 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){
  ul.supporters__group.supporters__group--roll{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))!important}
}
/* op-grow-same-size:end */