/* Chamber of Shipping — Stations · P2 build */
:root{
  --paper:#ece9e2; --paper-2:#e3dfd5; --ink:#22303a; --ink-soft:#4a5a64; --mist:#6b7780;
  --steel:#2c4654; --steel-deep:#1c2a33; --oxide:#8f3a22; --oxide-deep:#7a2f1a; --amber:#e8a03c;
  --rule:rgba(34,48,58,.25); --rule-strong:rgba(34,48,58,.4);
  --stencil:'Allerta Stencil',sans-serif; --cond:'Barlow Condensed',sans-serif; --body:'Barlow',sans-serif;
  --measure:70ch;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);}
img{max-width:100%;display:block}
a{color:var(--oxide)}
a:hover{opacity:.85}
h1,h2,h3{text-wrap:pretty}
.wrap{max-width:1240px;margin:0 auto;padding-inline:24px}

/* ---------- header ---------- */
.masthead{background:var(--oxide);color:#f6f4ee;padding:16px 0}
.masthead .wrap{display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap}
.brand{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;text-decoration:none;color:#f6f4ee}
.brand:hover{opacity:1}
.brand-word{font:400 19px var(--stencil);letter-spacing:.08em}
.brand-line{font:400 13px var(--body);color:rgba(246,244,238,.75)}
.brand-slug{font:400 10.5px var(--stencil);letter-spacing:.18em;color:rgba(246,244,238,.7)}
.stations-nav{background:var(--steel);overflow-x:auto;scrollbar-width:none}
.stations-nav::-webkit-scrollbar{display:none}
.stations-nav .wrap{display:flex;gap:0;padding-inline:16px}
.stations-nav a{flex:none;text-decoration:none;padding:12px 20px;font:600 14px var(--cond);letter-spacing:.14em;color:#f6f4ee}
.stations-nav a.active{background:var(--paper);color:var(--steel)}
.stations-nav a:hover{opacity:1;background:rgba(246,244,238,.12)}
.stations-nav a.active:hover{background:var(--paper)}

/* ---------- shared furniture ---------- */
.kicker{display:flex;align-items:center;gap:14px;font:400 12px var(--stencil);letter-spacing:.22em;color:var(--oxide);margin:0 0 18px}
.kicker::after{content:"";flex:1;height:1px;background:var(--rule)}
.kicker.on-dark{color:var(--amber)}
.kicker.on-dark::after{background:rgba(246,244,238,.3)}
.section{padding:56px 0 64px}
.btn{display:inline-block;background:var(--oxide);color:#f6f4ee;text-decoration:none;font:600 15px var(--cond);letter-spacing:.12em;padding:12px 22px}
.btn:hover{background:var(--oxide-deep);opacity:1}

/* ---------- hero ---------- */
.hero{position:relative;min-height:560px;display:flex;align-items:flex-end;background:var(--steel-deep)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,30,38,.95) 0%,rgba(20,30,38,.5) 55%,rgba(20,30,38,.25) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;padding:170px 0 56px;color:#f6f4ee;text-shadow:0 1px 3px rgba(10,18,24,.55),0 2px 14px rgba(10,18,24,.45)}
.hero-tag{font:400 12px var(--stencil);letter-spacing:.24em;color:var(--amber);margin:0 0 14px}
.hero h1{margin:0;font:700 clamp(44px,7vw,92px)/0.96 var(--cond);text-transform:uppercase;letter-spacing:.01em;max-width:20ch}
.hero p{margin:18px 0 0;font:400 18px/1.6 var(--body);color:rgba(246,244,238,.88);max-width:56ch}
.hero .credit{position:absolute;right:16px;bottom:10px;font:400 10.5px var(--body);color:rgba(246,244,238,.45);z-index:1;margin:0}

/* ---------- stations band ---------- */
.stations-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.station-card{flex:1 1 220px;min-width:200px;background:var(--paper);padding:24px 22px 30px;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:var(--ink);border-top:6px solid var(--acc,var(--oxide))}
.station-card:hover{background:#f2efe8;opacity:1}
.station-no{font:400 11px var(--stencil);letter-spacing:.2em;color:var(--mist)}
.station-card h3{margin:0;font:700 30px/1 var(--cond);letter-spacing:.03em;color:var(--ink)}
.station-card p{margin:0;font:400 14.5px/1.55 var(--body);color:var(--ink-soft)}
.station-card .go{margin-top:auto;font:600 13px var(--cond);letter-spacing:.14em;color:var(--oxide)}

/* ---------- fact strip ---------- */
.factstrip{background:var(--steel-deep);color:#f6f4ee;padding:26px 0}
.factstrip .wrap{display:flex;gap:40px;align-items:baseline;flex-wrap:wrap}
.fact{flex:1 1 240px;min-width:220px}
.fact .f-num{display:block;font:700 34px/1.05 var(--cond);color:var(--amber)}
.fact .f-label{display:block;font:400 13.5px/1.5 var(--body);color:rgba(246,244,238,.75);margin-top:6px}

/* ---------- flagship ---------- */
.flagship{background:var(--steel);color:#f6f4ee}
.flagship-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:0;align-items:stretch}
.flagship-copy{padding:64px 48px 64px 0;display:flex;flex-direction:column;justify-content:center}
.flagship-copy .station-tag{font:400 12px var(--stencil);letter-spacing:.22em;color:var(--amber);margin:0 0 16px}
.flagship-copy h2{margin:0;font:700 clamp(36px,4.6vw,62px)/.98 var(--cond);text-transform:uppercase}
.flagship-copy .dek{margin:20px 0 0;font:400 17.5px/1.65 var(--body);color:rgba(246,244,238,.85);max-width:52ch}
.flagship-copy .meta{margin:18px 0 26px;font:400 13px var(--body);color:rgba(246,244,238,.6)}
.flagship-media{position:relative;min-height:440px}
.flagship-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- supporters / sponsors ---------- */
.supporters{background:var(--steel);color:#f6f4ee;border-top:1px solid rgba(246,244,238,.18);padding:44px 0 56px}
.supporters h2{margin:0 0 6px;font:700 30px/1.05 var(--cond);text-transform:uppercase;letter-spacing:.03em}
.supporters .supporters-note{margin:0 0 28px;font:400 15px/1.55 var(--body);color:rgba(246,244,238,.7);max-width:56ch}
.sponsor-tier{display:flex;flex-wrap:wrap;gap:14px}
.sponsor-tier--feat{margin-bottom:14px}
.sponsor-tier--feat .sponsor{flex:1 1 240px;min-width:220px}
.sponsor-tier--roll .sponsor{flex:1 1 190px;min-width:170px}
.sponsor{display:flex;align-items:center;justify-content:center;background:var(--steel-deep);border:1px solid rgba(246,244,238,.16);padding:16px 20px;min-height:76px;text-decoration:none}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain;opacity:.9}
.sponsor.feat{min-height:96px;padding:20px 26px}
.sponsor.feat img{max-height:56px}
.sponsor:hover{border-color:rgba(246,244,238,.4);opacity:1}
.sponsor-blurb{display:none}

/* ---------- map band ---------- */
.mapband{background:var(--paper)}
.map-frame{border:1px solid var(--rule-strong);background:#101d26}
.map-frame svg{display:block;width:100%;height:auto}
.map-pin{cursor:pointer}
.map-pin text{transition:fill .12s}
.map-pin:hover{opacity:1}
.map-pin:hover text{fill:#e8a03c;text-decoration:underline}
.map-pin:hover circle{stroke:#e8a03c}
.map-caption{margin:12px 0 0;font:400 13.5px/1.6 var(--body);color:var(--mist);max-width:none}
.map-slot{min-height:280px;border:1px dashed var(--rule-strong);display:flex;align-items:center;justify-content:center;font:400 14px var(--body);color:var(--mist);padding:20px;text-align:center}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#cbd4da;margin-top:0}
.footer-inner{padding:44px 0 52px;display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap}
.footer .brand-word{color:#f6f4ee}
.footer p{margin:12px 0 0;font:400 13px/1.7 var(--body);color:#93a1ab;max-width:52ch}
.footer-nav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 36px;text-align:left;padding-top:6px}
.footer-nav a{color:#e6ebee;text-decoration:none;font:600 14px var(--cond);letter-spacing:.12em}
.footer-nav a:hover{color:var(--amber);opacity:1}
.footer-domain{font:400 11px var(--stencil);letter-spacing:.16em;color:#7d8b95;margin-top:18px}

/* ---------- category page ---------- */
.station-plate{background:var(--acc,var(--oxide));color:#f6f4ee;padding:56px 0 60px}
.station-plate.light-ink{color:var(--ink)}
.station-plate .plate-no{font:400 12px var(--stencil);letter-spacing:.24em;opacity:.85;margin:0 0 14px}
.station-plate h1{margin:0;font:700 clamp(52px,9vw,120px)/.92 var(--cond);text-transform:uppercase}
.station-plate .plate-blurb{margin:18px 0 0;font:400 18px/1.6 var(--body);opacity:.92;max-width:58ch}
.cat-intro{padding:44px 0 0}
.cat-intro p{margin:0;font:400 18px/1.7 var(--body);color:var(--ink-soft);max-width:var(--measure)}
.cat-list{list-style:none;margin:36px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong)}
.cat-list li{background:var(--paper);display:flex}
.cat-list a{flex:1;display:flex;flex-direction:column;gap:10px;padding:26px 24px 30px;text-decoration:none;color:var(--ink)}
.cat-list a:hover{background:#f2efe8;opacity:1}
.cat-list .g-img{aspect-ratio:16/9;object-fit:cover;width:100%}
.cat-list h3{margin:0;font:700 26px/1.1 var(--cond);min-height:2.2em}
.cat-list .g-dek{margin:0;font:400 14.5px/1.55 var(--body);color:var(--ink-soft)}
.cat-list .g-meta{margin-top:auto;font:400 12.5px var(--body);color:var(--mist)}

/* ---------- article ---------- */
.article-head{padding:52px 0 8px}
.article-head .station-tag{display:flex;align-items:center;gap:14px;font:400 12px var(--stencil);letter-spacing:.22em;color:var(--acc,var(--oxide));margin:0 0 18px}
.article-head .station-tag::after{content:"";width:160px;height:2px;background:var(--acc,var(--oxide))}
.article-head h1{margin:0;font:700 clamp(40px,6vw,76px)/.98 var(--cond);text-transform:uppercase;max-width:22ch}
.article-head .lead{max-width:var(--measure)}
.article-head .meta{margin:18px 0 0;font:400 13.5px var(--body);color:var(--mist)}
.lead{font:400 21px/1.6 var(--body);color:var(--ink-soft);margin:22px 0 0}
.article-hero{margin:36px 0 0}
.article-hero img{width:100%;max-height:560px;object-fit:cover}
.article-body{padding:48px 0 8px}
.article-body .flow{max-width:var(--measure);margin:0 auto}
.article-body p{margin:0 0 26px;font:400 18.5px/1.78 var(--body);color:#33434f}
.article-body h2{margin:44px 0 20px;font:700 32px/1.1 var(--cond);letter-spacing:.02em;color:var(--ink);display:flex;align-items:baseline;gap:14px}
.article-body h2::before{content:"";width:26px;height:4px;background:var(--acc,var(--oxide));flex:none;align-self:center}
.article-body a{color:var(--oxide);text-decoration-color:rgba(143,58,34,.4)}

/* article interrupts */
.plate{background:var(--oxide);color:#f6f4ee;padding:30px 34px 34px;margin:38px 0}
.plate .p-kicker{font:400 11.5px var(--stencil);letter-spacing:.2em;color:var(--amber);margin:0 0 16px}
.plate dl{margin:0;display:grid;gap:12px}
.plate dt{font:600 17px var(--cond);letter-spacing:.06em;text-transform:uppercase}
.plate dd{margin:2px 0 0;font:400 14.5px/1.55 var(--body);color:rgba(246,244,238,.85)}
.specs{background:var(--steel);color:#f6f4ee;padding:30px 34px 34px;margin:38px 0}
.specs .p-kicker{font:400 11.5px var(--stencil);letter-spacing:.2em;color:var(--amber);margin:0 0 16px}
.specs ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.specs li{font:400 15px/1.55 var(--body);color:rgba(246,244,238,.88);padding-left:18px;position:relative}
.specs li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--amber)}
.specs strong,.plate strong{color:#fff}
.fullbleed-break{margin:48px 0;position:relative}
.fullbleed-break img{width:100%;max-height:460px;object-fit:cover}
.fullbleed-break figcaption{margin:10px 0 0;font:400 13px/1.6 var(--body);color:var(--mist);max-width:70ch}

/* related / leave-by */
.leaveby{background:var(--steel);color:#f6f4ee;padding:40px 0 48px;margin-top:56px}
.leaveby .related-links{list-style:none;margin:0;padding:0;display:flex;gap:14px 48px;flex-wrap:wrap}
.leaveby .related-links a{color:#f6f4ee;text-decoration:none;font:600 24px/1.2 var(--cond);letter-spacing:.02em}
.leaveby .related-links a:hover{color:var(--amber);opacity:1}
.leaveby .rl-tag{display:block;font:400 11px var(--stencil);letter-spacing:.2em;color:var(--amber);margin-bottom:4px}

/* ---------- styleguide components ---------- */
.pullquote{margin:38px 0;padding:0;border:0}
.pullquote p{margin:0;font:600 30px/1.35 var(--cond);color:var(--oxide);letter-spacing:.01em}
.blockquote{margin:38px 0;padding:22px 28px;background:var(--paper-2);border-left:4px solid var(--steel)}
.blockquote p{margin:0 0 10px;font:400 18px/1.65 var(--body);color:var(--ink)}
.blockquote cite{font:400 13.5px var(--body);color:var(--mist);font-style:normal}
.callout{background:var(--oxide);color:#f6f4ee;padding:24px 30px;margin:38px 0}
.callout p{margin:0;font:600 18px/1.55 var(--body);color:#f6f4ee}
.note{font:400 15px/1.6 var(--body);color:var(--mist);background:var(--paper-2);padding:14px 18px;margin:28px 0}
table.versus,table.datatable{width:100%;border-collapse:collapse;margin:38px 0;font:400 15px/1.5 var(--body)}
.versus th,.datatable th{font:600 15px var(--cond);letter-spacing:.08em;text-transform:uppercase;text-align:left;background:var(--steel);color:#f6f4ee;padding:10px 14px}
.versus td,.datatable td{padding:10px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
.versus tr td:first-child{font-weight:600}
.statrow{display:flex;gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong);margin:38px 0;flex-wrap:wrap}
.statblock{flex:1 1 160px;background:var(--paper);padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.stat-num{font:700 40px/1 var(--cond);color:var(--oxide)}
.stat-label{font:400 13.5px/1.45 var(--body);color:var(--ink-soft)}
.timeline{list-style:none;margin:38px 0;padding:0 0 0 22px;border-left:2px solid var(--oxide);display:grid;gap:20px}
.timeline li{position:relative}
.timeline li::before{content:"";position:absolute;left:-29px;top:.5em;width:12px;height:2px;background:var(--oxide)}
.t-when{display:block;font:600 16px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--oxide)}
.t-what{display:block;font:400 15.5px/1.55 var(--body);color:var(--ink-soft);margin-top:3px}
.chart{margin:38px 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin:10px 0 0;font:400 13px/1.6 var(--body);color:var(--mist)}
.article-figure{margin:38px 0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{margin:10px 0 0;font:400 13px/1.6 var(--body);color:var(--mist)}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:38px 0}
.gallery figure{margin:0}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{margin:8px 0 0;font:400 12.5px/1.5 var(--body);color:var(--mist)}
.map-figure{margin:38px 0}
.map-render{border:1px solid var(--rule-strong);background:#101d26}
.map-render svg{display:block;width:100%;height:auto}
.map-figure figcaption{margin:10px 0 0;font:400 13px/1.6 var(--body);color:var(--mist)}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:38px 0}
.profile-card{background:var(--paper-2);padding:22px 24px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.profile-card h3{margin:6px 0 0;font:700 22px/1.1 var(--cond)}
.profile-card .p-role{margin:0;font:400 13px var(--body);color:var(--oxide);letter-spacing:.04em}
.profile-card p{margin:0;font:400 14.5px/1.55 var(--body);color:var(--ink-soft)}
.profile-card .p-links a{font:600 13.5px var(--cond);letter-spacing:.08em}
.profile-card.no-photo .p-photo{display:none}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:38px 0}
.org-card{display:flex;flex-direction:column;gap:4px;background:var(--steel-deep);color:#f6f4ee;padding:16px 18px;text-decoration:none}
.org-card .org-logo{max-height:34px;width:auto;height:auto;object-fit:contain;align-self:flex-start;margin-bottom:8px}
.org-card .org-name{font:600 17px var(--cond);letter-spacing:.04em}
.org-card .org-host{font:400 12px var(--body);color:rgba(246,244,238,.6)}
.org-card.no-logo .org-logo{display:none}
.entity-ref{font-weight:600;text-decoration:none;border-bottom:1px solid rgba(143,58,34,.4)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule-strong);border:1px solid var(--rule-strong);margin:38px 0}
.further-grid a{background:var(--paper);padding:18px 20px;text-decoration:none;color:var(--ink);font:600 18px/1.25 var(--cond)}
.further-grid a:hover{background:#f2efe8;opacity:1}
.expander{margin:28px 0}
.expander>summary{cursor:pointer;font:600 15px var(--cond);letter-spacing:.1em;color:var(--oxide);list-style:none}
.expander>summary::before{content:"+ ";font-weight:700}
.expander[open]>summary::before{content:"− "}

/* ---------- browse all guides ---------- */
.browse-band{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:28px 48px;padding:34px 0 38px;border-top:1px solid var(--rule)}
.browse-band:first-child{border-top:0}
.browse-head h2{margin:8px 0 10px;font:700 34px/1 var(--cond);letter-spacing:.03em}
.browse-head h2 a{color:var(--ink);text-decoration:none;border-bottom:4px solid var(--acc,var(--oxide))}
.browse-head h2 a:hover{color:var(--acc,var(--oxide));opacity:1}
.browse-head p{margin:0;font:400 14.5px/1.55 var(--body);color:var(--ink-soft)}
.browse-list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.browse-list a{display:flex;align-items:baseline;justify-content:space-between;gap:18px;padding:12px 4px;text-decoration:none;border-bottom:1px solid var(--rule)}
.browse-list li:last-child a{border-bottom:0}
.browse-list a:hover{background:#f2efe8;opacity:1}
.bi-title{font:600 20px/1.25 var(--cond);color:var(--ink)}
.bi-meta{flex:none;font:400 12.5px var(--body);color:var(--mist)}
@media (max-width:760px){.browse-band{grid-template-columns:1fr;gap:14px}}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .flagship-grid{grid-template-columns:1fr}
  .flagship-copy{padding:44px 0 40px}
  .flagship-media{min-height:300px}
  .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .hero-inner{padding-top:120px}
}
@media (max-width:600px){
  table.versus,table.datatable{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.versus tbody,table.datatable tbody{min-width:520px;display:table;width:100%}
  table.versus thead,table.datatable thead{min-width:520px;display:table;width:100%}
  body{font-size:16px}
  .section{padding:40px 0 48px}
  .article-body p{font-size:17px}
  .sponsor-tier--feat .sponsor{flex:1 1 100%}
  .sponsor-tier--roll .sponsor{flex:1 1 160px;min-width:150px}
  .plate,.specs{padding:24px 20px 26px;margin-inline:0}
  .leaveby .related-links{flex-direction:column}
}


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

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

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


/* sp-roll-stack: the roll tier shows its copy under the mark, and the mark is legible.
   Design wrote the blurbs and then hid them — .sponsor-blurb{display:none} — leaving seven tiles
   that are a cramped logo and nothing else; my own injection had made that worse by pinning the
   mark to height:38px and width:117px. The tile becomes a column: mark on top at the 44px
   Design declared for this tier, copy beneath it. */
.sponsor-tier--roll .sponsor{flex-direction:column!important;align-items:center!important;gap:10px}
.sponsor-tier--roll .sponsor .sp-logo{display:flex!important;align-items:center;justify-content:center;width:100%}
.sponsor-tier--roll .sponsor .sponsor-blurb{display:block!important;text-align:center;margin-left:0!important}
/* ⚠️ MATCH THE OLD RULE'S SPECIFICITY OR IT KEEPS WINNING. The injection being corrected is
   .sponsor-tier.sponsor-tier--roll .sponsor.sponsor img — four classes. A rule written with
   .sponsor-tier--roll (three) lost to it even with !important, so the mark stayed pinned at
   117x38 while everything else about the tile changed. */
.sponsor-tier.sponsor-tier--roll .sponsor.sponsor img{height:auto!important;width:auto!important;
             max-width:100%!important;max-height:44px!important}

/* the roll's last wrapped row was stretching its two remaining tiles to 589px against 227px
   for the full rows — the same raggedness objected to on amonco and aosd. Tiles hold their
   basis; a short row leaves a gap. */
.sponsor-tier.sponsor-tier--roll > .sponsor{flex:0 1 190px!important}


/* op-wrap-gutter: these elements carry the build's own gutter class but their own
   rule sets a padding SHORTHAND, which resets left/right to 0 — every line of type
   then sits against the screen edge at phone width. Design's own token is restated
   for the inline axis, on the exact element that lost it. Measured, not guessed:
   each selector below had TEXT within 2px of a viewport edge at 390. */
@media (max-width:900px){
  .wrap.footer-inner{padding-inline:24px}
}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1340px of tier across
   7 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){
  .sponsor-tier.sponsor-tier--roll .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:72px!important;min-height:0!important;overflow:hidden!important}
}

/* op-article-width: the article column was capped at 672px (86 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .article-body .flow) 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){
  div.flow{--measure:min(82.874ch, 100%)!important}
}
@media (min-width:1600px){
  div.flow{--measure:min(clamp(82.874ch, 55.278vw, calc(82.874ch * 1.2)), 100%)!important}
  div.flow > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-tier.sponsor-tier--roll 6 rows at 1440). 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){
  .sponsor-tier.sponsor-tier--roll .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-hover-pad */
.browse-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */
/* op-heading-levels */
h2:where(.rt-h3){text-wrap: pretty;}
.station-card h2:where(.rt-h3){margin: 0px; font: 700 30px/1 var(--cond); letter-spacing: 0.03em; color: var(--ink);}
.cat-list h2:where(.rt-h3){margin: 0px; font: 700 26px/1.1 var(--cond); min-height: 2.2em;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1299px){
  div.wrap.footer-inner{padding-left:max(24px, 18px);padding-right:max(24px, 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.flagship-grid > div.flagship-media > img,
  figure.article-figure.article-hero > div.wrap > img,
  li > a > img.g-img,
  main > section.hero > img){height:auto}
/* op-img-dims:end */
@media (min-width:621px) and (max-width:1439px){.sponsor-tier--roll.sponsor-tier--roll:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))!important;gap:14px!important}.sponsor-tier--roll.sponsor-tier--roll > [data-partner]{width:auto!important;max-width:none!important;flex:none!important;margin:0!important}}