/* Scania — the Shore. Baltic blue ground, rapeseed gold accent, limestone ink. */
:root{
  --canvas:#0A1A21; --page:#10262F; --band:#1B3A4B; --ink:#EDE7DA; --gold:#D8A72A;
  --i90:rgba(237,231,218,.9); --i82:rgba(237,231,218,.82); --i78:rgba(237,231,218,.78);
  --i74:rgba(237,231,218,.74); --i70:rgba(237,231,218,.7); --i68:rgba(237,231,218,.68);
  --i62:rgba(237,231,218,.62); --i55:rgba(237,231,218,.55); --i50:rgba(237,231,218,.5);
  --i45:rgba(237,231,218,.45);
  --r35:rgba(237,231,218,.35); --r28:rgba(237,231,218,.28); --r25:rgba(237,231,218,.25);
  --r22:rgba(237,231,218,.22); --r20:rgba(237,231,218,.2); --r14:rgba(237,231,218,.14);
  --s07:rgba(237,231,218,.07); --s06:rgba(237,231,218,.06); --s05:rgba(237,231,218,.05);
  --gold16:rgba(216,167,42,.16); --gold10:rgba(216,167,42,.1);
  --sans:'Archivo',system-ui,sans-serif; --serif:'Source Serif 4',Georgia,serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --gut:clamp(20px,4vw,56px);
  --maxw:1480px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--serif);font-size:20px;line-height:1.75;font-synthesis-weight:none}
img{max-width:100%;display:block}
a{color:var(--ink);text-decoration:none}
a:hover{color:var(--gold)}
h1,h2,h3,h4,h5{font-family:var(--sans);font-weight:600;margin:0;text-wrap:pretty}
p{margin:0 0 24px}
hr{border:0;border-top:1px solid var(--r20);margin:0}
::selection{background:var(--gold);color:var(--page)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.kicker{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.kicker--mute{color:var(--i50)}
.mono{font-family:var(--mono);font-size:12.5px;color:var(--i62)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:8px;z-index:99;background:var(--gold);color:var(--page);padding:8px 14px;font-family:var(--sans);font-size:14px}

/* ---------- header + nav ---------- */
.site-header{position:relative;z-index:40;background:var(--page);border-bottom:1px solid var(--r22)}
.site-header--over{background:transparent;border-bottom:0}
@media (min-width:901px){.site-header--over{position:absolute;top:0;left:0;right:0}
.site-header--over ~ main .hero,.hero{padding-top:180px}}
.hdr-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:-.03em;font-size:30px;line-height:1;color:var(--ink)}
.site-header--over .hdr-inner{flex-direction:column;align-items:stretch;padding-block:24px 0}
.hdr-top{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.site-header--over .wordmark{font-size:clamp(42px,5.4vw,66px);letter-spacing:-.035em}
.tagline{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--i62);text-align:right;line-height:1.8;margin:6px 0 0}
.nav{font-family:var(--sans);font-weight:500;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.site-header--over .nav{margin-top:20px;padding-top:14px;border-top:1px solid var(--r22)}
.nav ul{list-style:none;margin:0;padding:0}
.nav > ul{display:flex;flex-wrap:wrap;gap:28px}
.nav > ul > li{position:relative}
.nav a{color:var(--ink);display:inline-block;padding:6px 0}
.nav a:hover,.nav a:focus-visible{color:var(--gold)}
.nav .is-active > a{color:var(--gold)}
.nav > ul > li:nth-last-child(-n+3) > .nav-sub{left:auto;right:-18px}
.nav-sub{position:absolute;top:100%;left:-18px;min-width:290px;background:var(--band);border:1px solid var(--r25);border-top:2px solid var(--gold);padding:10px 0;
  opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.nav .has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav .has-sub:hover > .nav-sub,.nav .has-sub:focus-within > .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav-sub li a{display:block;padding:9px 20px;font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;color:var(--i82);line-height:1.35}
.nav-sub li a:hover{background:var(--s07);color:var(--gold)}
.nav-sub .sub-head{display:block;padding:4px 20px 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--i45)}
.nav-toggle,.nav-toggle-label,.sub-toggle,.sub-caret{display:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(84vh,760px);display:flex;flex-direction:column;background:var(--canvas);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img{width:100%;height:100%;object-fit:cover}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,38,47,.9) 0%,rgba(16,38,47,.42) 30%,rgba(16,38,47,.34) 46%,rgba(16,38,47,.82) 74%,rgba(16,38,47,.96) 100%)}
.hero-body{position:relative;z-index:2;margin-top:auto;padding:120px 0 56px}
.hero-body .inner{max-width:900px;text-shadow:0 2px 22px rgba(6,18,24,.72),0 1px 3px rgba(6,18,24,.5)}
.hero h1,.hero-h{font-size:clamp(40px,6.4vw,74px);line-height:.98;letter-spacing:-.03em;font-weight:600;margin:0}
.hero .dek{font-size:clamp(18px,1.5vw,21px);line-height:1.55;color:var(--i82);margin:20px 0 0;max-width:60ch}

/* ---------- generic band ---------- */
.band{padding-block:clamp(40px,5vw,64px)}
body{overflow-x:clip}
.band--blue{background:var(--band)}
.band--deep{background:var(--canvas)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--r25);margin-bottom:28px}
.sec-head h2,.sec-head h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;line-height:1.05}
.sec-meta{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--i50)}

/* ---------- cross-section ---------- */
.xsec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.xsec-top h2{font-size:clamp(30px,3.4vw,40px);letter-spacing:-.02em;line-height:1}
.xsec-top .dek{max-width:38ch;color:var(--i70);font-size:17px;line-height:1.55;margin:0}
.xsec-figure{position:relative;height:230px;border-bottom:1px solid var(--r35);margin-top:34px}
.terrain,.terrain-fill{position:absolute;inset:0;
  clip-path:polygon(0% 96%,8% 94%,14% 90%,22% 84%,34% 80%,42% 76%,50% 58%,58% 34%,66% 18%,72% 22%,78% 44%,84% 62%,92% 70%,100% 72%,100% 100%,0% 100%)}
.terrain{background:var(--s07)}
.terrain-fill{background:var(--gold16);-webkit-mask-image:linear-gradient(90deg,#000 0 var(--reveal,26%),transparent var(--reveal,26%) 100%);mask-image:linear-gradient(90deg,#000 0 var(--reveal,26%),transparent var(--reveal,26%) 100%)}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--gold);left:26%;transform:translateX(-1px)}
.playhead-label{position:absolute;top:-4px;left:26%;transform:translateX(-50%);font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
.xsec-corner{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--i50)}
.xsec-corner.bl{left:0;bottom:8px}
.xsec-corner.tr{right:0;top:8px}
input[type=range].scrub{width:100%;margin:16px 0 0;accent-color:var(--gold);cursor:ew-resize;height:24px}
.xsec-read{display:grid;grid-template-columns:1.15fr 1fr 1fr;margin-top:22px;border-top:1px solid var(--r25)}
.xsec-read > div{padding:22px 26px}
.xsec-read > div:first-child{padding-left:0}
.xsec-read > div + div{border-left:1px solid var(--r25)}
.xsec-read h3{font-size:clamp(22px,2.4vw,30px);letter-spacing:-.02em;margin-bottom:4px}
.xsec-sub{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0}
.xsec-lab{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--i50);margin:0 0 8px}
.xsec-read p.val{font-size:17px;line-height:1.5;color:var(--i90);margin:0}

/* ---------- map ---------- */
.map-shell{border:1px solid var(--r25);background:var(--canvas)}
.map-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--r22)}
.chip{display:inline-flex;align-items:center;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);background:transparent;border:1px solid var(--r28);padding:7px 14px;cursor:pointer;line-height:1;min-height:34px}
.chip:hover{border-color:var(--gold);color:var(--gold)}
.chip[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--page)}
.map-tools{margin-left:auto;display:flex;gap:6px}
.map-tools button{font-family:var(--mono);font-size:14px;width:30px;height:30px;background:transparent;border:1px solid var(--r28);color:var(--ink);cursor:pointer;line-height:1}
.map-tools button.wide{width:auto;padding:0 12px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.map-tools button:hover{border-color:var(--gold);color:var(--gold)}
.map-stage{position:relative;display:grid;grid-template-columns:1fr 320px}
.map-canvas{position:relative;min-height:520px;border-right:1px solid var(--r22);cursor:grab;touch-action:none;overflow:hidden}
.map-canvas.dragging{cursor:grabbing}
.map-canvas svg{display:block;width:100%;height:100%;position:absolute;inset:0}
.pin-dot{fill:var(--gold)}
.pin-hit{fill:transparent;cursor:pointer}
.pin-label{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:var(--ink);paint-order:stroke;stroke:rgba(10,26,33,.75);stroke-width:3px}
.pin g:hover .pin-label{fill:var(--gold)}
.map-note{position:absolute;left:14px;bottom:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--i45);pointer-events:none}
.map-aside{display:flex;flex-direction:column;min-height:0}
.map-detail{padding:20px 18px;border-bottom:1px solid var(--r22);background:var(--s07)}
.map-detail .kicker{margin-bottom:6px}
.map-detail h3{font-size:24px;line-height:1.12;letter-spacing:-.02em;margin-bottom:8px}
.map-detail .md-brief{font-size:16.5px;line-height:1.5;color:var(--i74);margin:0 0 12px}
.map-detail .md-links{margin:0 0 14px}
.map-detail .md-perma{display:flex;flex-direction:column;gap:4px;margin:0 0 14px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--i45)}
.map-detail .md-perma code{font-size:12.5px;color:var(--gold);letter-spacing:0}
.map-list a.is-current{background:var(--gold10);box-shadow:inset 2px 0 0 var(--gold)}
.pin g.is-dimmed{opacity:.42}
.pin g.is-selected .pin-dot,.pin g.is-selected circle{filter:drop-shadow(0 0 6px rgba(216,167,42,.9))}
.pin g.is-selected .pin-label{fill:var(--gold)}
.pin g:focus-within .pin-label{fill:var(--gold)}
.map-list{padding:6px 0;max-height:520px;overflow:auto}
.map-list a{display:flex;align-items:baseline;gap:10px;padding:11px 18px;border-bottom:1px solid var(--r14)}
.map-list a:hover{background:var(--s05)}
.map-list .nm{font-size:17px;line-height:1.3}
.map-list .tg{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--i45);white-space:nowrap}
.map-list a.is-off{display:none}

/* ---------- cards ---------- */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:32px}
.card{display:flex;flex-direction:column;background:var(--s05);border:1px solid var(--r14);height:100%}
.card:hover{border-color:var(--gold)}
.card-media{aspect-ratio:16/10;overflow:hidden;background:var(--canvas)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.03)}
.card-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{font-size:24px;line-height:1.12;letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card p{font-size:16.5px;line-height:1.5;color:var(--i74);margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .card-meta{margin-top:auto;padding-top:12px;border-top:1px solid var(--r14);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--i55);display:flex;gap:14px;flex-wrap:wrap}

/* feature split */
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center}
.split-media{aspect-ratio:4/3;overflow:hidden}
.split-media img{width:100%;height:100%;object-fit:cover}
.split h2{font-size:clamp(30px,3.8vw,46px);line-height:1;letter-spacing:-.025em}
.split .dek{font-size:19px;line-height:1.6;color:var(--i82);margin:18px 0 0}
.factrow{display:flex;gap:26px;flex-wrap:wrap;margin-top:24px;padding-top:16px;border-top:1px solid var(--r25);font-family:var(--mono);font-size:12.5px;color:var(--i62)}

/* ---------- sponsors ---------- */
.supporters .sup-head{max-width:60ch}
.sup-featured{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:28px}
.sponsor{display:flex;flex-direction:column;gap:12px;padding:18px;background:var(--canvas);border:1px solid var(--r14)}
.sponsor:hover{border-color:var(--gold)}
.sponsor img{width:100%;height:64px;object-fit:contain;background:#0E2029}
.sponsor-blurb{font-family:var(--serif);font-size:15.5px;line-height:1.45;color:var(--i70);min-height:2.9em}
.sup-roll{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.sup-roll .sponsor{padding:10px;gap:6px;background:transparent;border-color:var(--r14)}
.sup-roll .sponsor img{height:40px}
.sup-roll .sponsor-blurb{font-size:13px;min-height:0;color:var(--i55)}

/* ---------- season almanac ---------- */
.alm-scroll{margin-top:30px;overflow-x:auto}
.alm-grid{min-width:560px;display:flex;flex-direction:column;gap:4px}
.alm-row{display:grid;grid-template-columns:92px repeat(12,1fr);gap:4px;align-items:center}
.alm-hab{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--i62)}
.alm-m{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--i55);background:transparent;border:0;border-bottom:1px solid var(--r20);padding:8px 0;cursor:pointer}
.alm-m:hover{color:var(--gold)}
.alm-m[aria-pressed="true"]{color:var(--page);background:var(--gold);border-bottom-color:var(--gold)}
.alm-cell{height:30px;border:1px solid var(--r14);background:transparent;cursor:pointer;padding:0}
.alm-cell.lv1{background:rgba(216,167,42,.18)}
.alm-cell.lv2{background:rgba(216,167,42,.42)}
.alm-cell.lv3{background:rgba(216,167,42,.72)}
.alm-cell:hover{border-color:var(--gold)}
.alm-cell.is-col{box-shadow:inset 0 0 0 1px var(--gold)}
.alm-read{margin-top:26px;border-top:1px solid var(--r25)}
.alm-panel-head{display:flex;align-items:baseline;gap:24px;flex-wrap:wrap;padding:20px 0 16px}
.alm-panel-head h3{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.alm-arrivals{margin:0;font-size:17px;color:var(--i82)}
.alm-arrivals .xsec-lab{display:inline-block;margin:0 10px 0 0}
.alm-arrivals em{font-style:normal;color:var(--i55);font-family:var(--mono);font-size:12.5px}
.alm-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--r22)}
.alm-col{padding:18px 22px}
.alm-col:first-child{padding-left:0}
.alm-col + .alm-col{border-left:1px solid var(--r22)}
.alm-col ul{list-style:none;margin:0;padding:0}
.alm-col li{display:flex;flex-direction:column;padding:7px 0;border-bottom:1px dotted var(--r22);font-size:17px;line-height:1.3}
.alm-col li:last-child{border-bottom:0}
.alm-col li em{font-style:normal;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--i50);margin-top:2px}
.alm-none{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--i45)}
.alm-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--r14);color:var(--i55)}
.alm-foot a{color:var(--gold)}
@media (max-width:900px){
  .alm-cols{grid-template-columns:1fr 1fr}
  .alm-col{padding:16px 16px 16px 0}
  .alm-col:nth-child(3),.alm-col:nth-child(4){border-top:1px solid var(--r22)}
  .alm-col:nth-child(3){border-left:0}
}
@media (max-width:620px){
  .alm-cols{grid-template-columns:1fr}
  .alm-col{padding:14px 0;border-left:0!important;border-top:1px solid var(--r22)}
  .alm-col:first-child{border-top:0}
}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--r20);background:var(--page);padding:40px 0 48px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px}
.foot-grid h4{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.foot-grid ul{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:15px;line-height:2}
.disclaimer{font-size:15px;line-height:1.6;color:var(--i62);max-width:38ch;margin:10px 0 0}
.foot-rule{margin-top:34px;padding-top:16px;border-top:1px solid var(--r14);font-family:var(--mono);font-size:11.5px;color:var(--i45);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ---------- page headers (category / static) ---------- */
.page-head{padding-block:clamp(36px,5vw,60px) 36px;border-bottom:1px solid var(--r22)}
.page-head-grid{display:grid;grid-template-columns:1fr 400px;gap:56px}
.page-head h1{font-size:clamp(46px,8vw,96px);line-height:.88;letter-spacing:-.04em;font-weight:700}
.page-head .dek{font-size:clamp(19px,1.6vw,22px);line-height:1.5;color:var(--i82);max-width:50ch;margin:20px 0 0}
.rail{border-left:1px solid var(--r25);padding-left:26px;font-family:var(--mono);font-size:13px;line-height:2;color:var(--i68)}
.rail h2{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.rail ul{list-style:none;margin:0;padding:0}

/* index rows */
.cat-list{list-style:none;margin:0;padding:0}
.cat-list > li{border-bottom:1px solid var(--r20)}
.cat-list a.row{display:grid;grid-template-columns:300px 1fr auto;gap:32px;align-items:center;padding:22px 0}
.cat-list a.row:hover{background:var(--s05)}
.cat-list .row-media{aspect-ratio:16/10;overflow:hidden}
.cat-list .row-media img{width:100%;height:100%;object-fit:cover}
.cat-list h3{font-size:clamp(24px,2.6vw,34px);line-height:1.05;letter-spacing:-.025em}
.cat-list p{font-size:17.5px;line-height:1.55;color:var(--i74);margin:8px 0 0;max-width:56ch}
.cat-list .row-meta{font-family:var(--mono);font-size:12px;color:var(--i50);text-align:right;white-space:nowrap}

/* ---------- article ---------- */
.article-hero{position:relative;height:clamp(320px,52vh,560px);background:var(--canvas)}
.article-hero img{width:100%;height:100%;object-fit:cover}
.article-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,38,47,.55),rgba(16,38,47,.15) 45%,rgba(16,38,47,.85))}
.article-intro{padding-block:clamp(32px,4.5vw,56px) 0}
.article-intro h1{font-size:clamp(38px,6.2vw,82px);line-height:.95;letter-spacing:-.035em;max-width:20ch}
.article-intro .dek{font-family:var(--serif);font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--i82);max-width:48ch;margin:24px 0 0}
.article-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding-top:14px;border-top:1px solid var(--r25);font-family:var(--mono);font-size:12.5px;color:var(--i62)}
.article-shell{display:grid;grid-template-columns:minmax(0,1fr);padding-block:clamp(30px,4vw,52px)}
.article-body{max-width:74ch;margin-left:clamp(0px,12vw,220px);padding-inline:0}
.article-body p{font-size:20px;line-height:1.75;color:var(--i90)}
.article-body > h2{position:relative;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em;line-height:1.15;margin:52px 0 18px}
.article-body > h2 .sec-n{position:absolute;left:-96px;top:.35em;font-family:var(--mono);font-size:13px;letter-spacing:.14em;color:var(--gold)}
.article-body > h3{font-size:24px;margin:36px 0 12px}
.lead{font-size:clamp(21px,2vw,25px);line-height:1.5;color:var(--i90);margin-bottom:32px}
.dropcap::first-letter{float:left;font-family:var(--sans);font-weight:700;font-size:4.6em;line-height:.78;padding:.06em .12em 0 0;color:var(--gold)}
.breakout{margin-left:clamp(0px,-12vw,0px)}
@media (min-width:1100px){.breakout{margin-left:-220px;max-width:calc(74ch + 220px)}}

/* ---------- palette components ---------- */
.pullquote{margin:36px 0;padding:24px 28px;background:var(--gold10);border-left:3px solid var(--gold)}
.pullquote p{font-size:24px;line-height:1.42;margin:0;color:var(--ink)}
.blockquote{margin:34px 0;padding:0 0 0 24px;border-left:1px solid var(--r35)}
.blockquote p{font-size:21px;line-height:1.55;font-style:italic;margin:0 0 10px}
.blockquote cite{font-family:var(--mono);font-size:12.5px;font-style:normal;color:var(--i55)}
.callout{margin:34px 0;padding:24px 28px;background:var(--s07);border:1px solid var(--r22);border-top:2px solid var(--gold)}
.callout p{margin:0;font-size:19px;line-height:1.6;color:var(--i90)}
.note{margin:28px 0;padding:14px 0 14px 18px;border-left:2px solid var(--r35);font-family:var(--mono);font-size:14px;line-height:1.7;color:var(--i68)}
.keyfacts{margin:38px 0;border:1px solid var(--r22);background:var(--s05)}
.keyfacts h3{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding:14px 22px;border-bottom:1px solid var(--r22);margin:0}
.keyfacts dl{display:grid;grid-template-columns:minmax(140px,auto) 1fr;margin:0}
.keyfacts dt{font-family:var(--sans);font-weight:600;font-size:15.5px;padding:12px 18px 12px 22px;border-bottom:1px solid var(--r14);color:var(--ink)}
.keyfacts dd{margin:0;padding:12px 22px 12px 18px;border-bottom:1px solid var(--r14);font-size:16.5px;line-height:1.5;color:var(--i74)}
.keyfacts dt:last-of-type,.keyfacts dl > dd:last-child{border-bottom:0}
.versus,.datatable{width:100%;border-collapse:collapse;margin:34px 0;font-size:16.5px}
.versus caption,.datatable caption{caption-side:top;text-align:left;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);padding-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--r14);line-height:1.45}
.versus thead th,.datatable thead th{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--i62);border-bottom:1px solid var(--r35)}
.versus tbody th{font-family:var(--mono);font-size:13px;color:var(--i62);font-weight:400;width:20%}
.datatable tbody tr:hover,.versus tbody tr:hover{background:var(--s05)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:34px 0}
.statblock{border:1px solid var(--r22);padding:20px;background:var(--s05);display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--sans);font-weight:700;font-size:clamp(30px,3.4vw,42px);line-height:1;letter-spacing:-.03em;color:var(--gold)}
.stat-label{font-size:15.5px;line-height:1.4;color:var(--i74)}
.timeline{list-style:none;margin:34px 0;padding:0;border-left:1px solid var(--r25)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-4.5px;top:9px;width:8px;height:8px;background:var(--gold);border-radius:50%}
.t-when{display:block;font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);line-height:1.5}
.t-what{display:block;font-size:17.5px;line-height:1.5;color:var(--i82)}
.chart{margin:34px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .bar-rect{fill:var(--gold16);stroke:var(--gold);stroke-width:1}
.chart .bar-label{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--i62)}
.chart .bar-val{font-family:var(--mono);font-size:12px;fill:var(--gold)}
.chart .axis{stroke:var(--r25)}
.chart .line-path{fill:none;stroke:var(--gold);stroke-width:2}
.chart .line-area{fill:var(--gold16)}
.chart .dot{fill:var(--gold)}
.chart figcaption,.article-figure figcaption,.map-figure figcaption{font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--i55);margin-top:10px}
.article-figure{margin:36px 0}
.article-figure img{width:100%}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:36px 0}
.gallery figure{margin:0}
.map-figure{margin:36px 0;border:1px solid var(--r22);background:var(--canvas);padding:0}
.map-figure .map-slot{aspect-ratio:16/9;position:relative}
.map-figure .map-slot svg{position:absolute;inset:0;width:100%;height:100%}
.map-figure figcaption{padding:12px 16px;margin:0;border-top:1px solid var(--r14)}
.map-figure.is-empty .map-slot{display:grid;place-items:center;background:repeating-linear-gradient(135deg,var(--s05) 0 12px,transparent 12px 24px)}
.map-figure.is-empty .map-slot::after{content:attr(data-map-place);font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--i45);padding:0 20px;text-align:center}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:34px 0}
.profile-card{border:1px solid var(--r22);padding:20px;background:var(--s05)}
.profile-card h3{font-size:21px;margin-bottom:4px}
.p-role{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.profile-card p{font-size:16px;line-height:1.55;color:var(--i74);margin:0 0 10px}
.p-photo{width:100%;aspect-ratio:3/2;object-fit:cover;margin-bottom:14px}
.p-links a,.entity-ref{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.06em;color:var(--gold);border-bottom:1px solid rgba(216,167,42,.4)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:34px 0}
.org-card{display:flex;flex-direction:column;gap:6px;border:1px solid var(--r22);padding:16px;background:var(--s05)}
.org-card:hover{border-color:var(--gold)}
.org-logo{height:32px;width:auto;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--sans);font-weight:600;font-size:17px}
.org-host{font-family:var(--mono);font-size:12px;color:var(--i55)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:20px 0 0}
.further-grid a{border:1px solid var(--r22);padding:16px 18px;font-family:var(--sans);font-weight:600;font-size:17px;line-height:1.3}
.further-grid a:hover{border-color:var(--gold)}
.related{margin-top:56px;padding-top:24px;border-top:1px solid var(--r25)}
.related h2{font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.related-links{list-style:none;margin:0;padding:0;display:grid;gap:0}
.related-links li{border-bottom:1px solid var(--r14)}
.related-links a{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:14px 0;font-family:var(--sans);font-weight:600;font-size:19px}
.related-links .rl-cat{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--i45)}

/* prose helpers */
.prose-wide{max-width:74ch}
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:30px}
.hub-card{border:1px solid var(--r22);padding:24px;background:var(--s05);display:flex;flex-direction:column;gap:10px}
.hub-card:hover{border-color:var(--gold)}
.hub-card h2{font-size:28px;letter-spacing:-.02em}
.hub-card p{font-size:16.5px;color:var(--i74);margin:0}
.hub-card ul{list-style:none;margin:6px 0 0;padding:0;font-family:var(--mono);font-size:13px;line-height:1.9;color:var(--i62)}

/* collapsible */
.more-toggle{display:none}
.more-toggle:checked ~ .more-items{display:grid}
.more-items{display:none}
.more-label{display:inline-block;margin-top:22px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--r28);padding:10px 18px;cursor:pointer}
.more-label:hover{border-color:var(--gold)}
.more-toggle:checked ~ .more-label{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .map-stage{grid-template-columns:1fr}
  .map-canvas{border-right:0;border-bottom:1px solid var(--r22);min-height:440px}
  .map-list{max-height:none}
  .map-detail{border-bottom:1px solid var(--r22)}
  .page-head-grid{grid-template-columns:1fr;gap:28px}
  .rail{border-left:0;border-top:1px solid var(--r25);padding-left:0;padding-top:18px}
  .article-body{margin-left:0}
  .article-body > h2 .sec-n{position:static;display:block;margin-bottom:6px}
  .breakout{margin-left:0;max-width:100%}
}
@media (max-width:900px){
  body{font-size:18px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:24px}
  .xsec-read{grid-template-columns:1fr}
  .xsec-read > div{padding:18px 0}
  .xsec-read > div + div{border-left:0;border-top:1px solid var(--r22)}
  .sup-featured{grid-template-columns:repeat(2,1fr)}
  .sup-roll{grid-template-columns:repeat(3,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr}
  .cat-list a.row{grid-template-columns:1fr;gap:14px}
  .cat-list .row-meta{text-align:left}
  .article-body p{font-size:18.5px}
  .keyfacts dl{grid-template-columns:1fr}
  .keyfacts dt{padding-bottom:0;border-bottom:0}
  .keyfacts dd{padding-top:4px;padding-left:22px}
  /* mobile nav */
  .nav-toggle-label{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1px solid var(--r28);padding:0 16px;min-height:44px;width:max-content;align-self:flex-start;cursor:pointer}
  .site-header--over .hdr-inner{position:relative}
  .site-header--over .nav-toggle-label{position:absolute;top:14px;right:var(--gut)}
  .site-header--over .hdr-top{padding-right:104px}
  .site-header .hdr-inner{flex-direction:column;align-items:stretch}
  .hdr-top{align-items:center}
  .nav{display:none;padding-bottom:18px}
  .nav-toggle:checked ~ .nav{display:block}
  .nav > ul{flex-direction:column;gap:0}
  .nav > ul > li{border-top:1px solid var(--r14)}
  .nav > ul > li > a{padding:12px 0;display:block}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:0;background:transparent;padding:0 0 10px;min-width:0;display:none}
  .sub-toggle:checked ~ .nav-sub{display:block}
  .nav > ul > li.has-sub{position:relative}
  .sub-caret{display:block;position:absolute;right:-6px;top:6px;width:44px;height:44px;cursor:pointer}
  .sub-caret::before,.sub-caret::after{content:"";position:absolute;left:14px;top:21px;width:16px;height:1.5px;background:var(--gold)}
  .sub-caret::after{transform:rotate(90deg);transition:transform .15s ease}
  .sub-toggle:checked ~ .sub-caret::after{transform:rotate(0deg)}
  .nav-sub .sub-head{display:none}
  .nav-sub li a{display:flex;align-items:center;min-height:44px;padding:8px 0 8px 16px;border-left:1px solid var(--r22);font-size:16px;line-height:1.35}
  .nav > ul > li > a{padding:13px 44px 13px 0}
  .site-header--over .hdr-top{display:block;padding-right:104px}
  .site-header--over .wordmark{display:block}
  .tagline{text-align:left;margin:12px 0 0;font-size:11.5px;line-height:1.7}
  .site-header--over .hdr-inner{padding-top:16px}
}
@media (max-width:620px){
  .grid3,.grid2{grid-template-columns:1fr}
  .sup-featured,.sup-roll{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr}
  .hero{min-height:0}
  .site-header--over .hdr-top{padding-right:104px}
  .map-bar .chip{flex:1 1 42%;justify-content:center;min-height:44px}
  .map-tools{width:100%;margin-left:0;justify-content:space-between;padding-top:2px}
  .map-tools button{height:44px;min-width:44px}
  .map-tools button.wide{flex:1;margin-left:6px}
  .hero-body{padding:160px 0 40px}
  .statrow{grid-template-columns:1fr}
  .article-body{padding-inline:0}
  .pullquote,.callout{padding:18px 20px}
  .pullquote p{font-size:20px}
  .chart.donut{display:block!important}
  .versus,.datatable{font-size:15px;display:block;max-width:100%;overflow-x:auto}
  .datatable tbody th,.versus tbody th{min-width:110px}
  .versus th,.versus td,.datatable th,.datatable td{padding:10px 8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!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-roll-size: roll logos were capped at 40px in a 4-col grid — too small to read. */
.sup-roll .sponsor img{height:58px}
.sup-roll .sponsor{padding:14px}

/* sp-logo-floor: raise undersized sponsor logos without shrinking any Design set larger */
.sponsor img{min-height:56px;object-position:center}

/* 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-featured .sponsor.sponsor img{box-sizing:border-box!important;padding:10px 17px!important}
.sup-roll .sponsor.sponsor img{box-sizing:border-box!important;padding:9px 15px!important}

/* op-no-mark-ground: operator: remove the extra background colour. The mark carried a #0E2029
   plate a step off the tile, reading as a box around every wordmark. Fill only — geometry, inset
   and centring unchanged. */
.sponsor img,.sponsor-box img,.sp-logo img{background:transparent!important}

/* op-mobile-scroller: div.alm-grid carries min-width:560px inside div.alm-scroll — again a
   container named for scrolling that was not scrolling. It scrolls and is capped to its column. */
@media (max-width:640px){
  .alm-scroll{overflow-x:auto!important;max-width:100%!important;-webkit-overflow-scrolling:touch}
}
/* ⚠️ THE PREVIOUS BLOCK DID NOTHING ON ITS OWN. A flex or grid item defaults to min-width:auto,
   which means it cannot shrink below its content's min-content width — so the scroll container
   kept being stretched to the child's own min-width (640px / 1400px / 560px) and overflow-x:auto
   had nothing to scroll. min-width:0 has to travel up the chain from the scroller to its
   formatting context, which is what actually lets the container narrow to the column. */
@media (max-width:640px){
  .plan-scroll,.alm-scroll,.waterband__fig,.map-figure,pre.tok,
  .plan-scroll *,.alm-scroll > *,
  figure,section,article,main,div[class*="scroll"],div[class*="pair"],div[class*="band"]{min-width:0!important}
  img,svg,table,pre,code,figure{max-width:100%!important}
}

/* op-footer-compact: the footer printed 4 rows for 4 link(s) in
   1 list(s) — 738px at 390, 6% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too, and the group holder takes two columns,
   measured 738 -> 459px (38% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:min(2.08vw,30px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:24px}
}

/* op-blurb-rows: money blurbs ran to 7 rows at 390, 1152px of tier across
   10 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sup-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:69px!important;min-height:0!important;overflow:hidden!important}
  .sup-roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:57px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 740px (84 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  article div.article-body{max-width:min(901px, 100%)!important}
}
@media (min-width:1600px){
  article div.article-body{max-width:min(clamp(901px, 62.569vw, 1081px), 100%)!important}
  article div.article-body > :is(p.lead, p.dropcap, p:not([class])), article div.article-body > :is(ol.timeline) > li{font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sup-featured 5 rows at 1024). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (min-width:641px){
  .sup-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.card-media > img,
  a.row > span.row-media > img,
  article > div.article-hero > img,
  div.split > div.split-media > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */