/* wulik.com — Cold Water
   Palette: ground=paper, ink=ink, accent=blue, secondary=ember, secondary ground=panel */

:root{
  --paper:#EEF2F6;
  --panel:#DCE5EC;
  --ink:#0B1620;
  --mute:#5A6B78;
  --quiet:#7C8B98;
  --blue:#1450C8;
  --ember:#0E3C7A;
  --hair:rgba(11,22,32,.16);
  --hair-soft:rgba(11,22,32,.09);

  --prose:74ch;
  --wide:1060px;
  --body:17px;
  --gutter:22px;

  --serif:'Libre Caslon Display',Georgia,serif;
  --sans:'Public Sans',system-ui,-apple-system,sans-serif;
}

@media (min-width:900px){ :root{ --gutter:40px; --body:17.5px; } }
@media (min-width:1200px){ :root{ --prose:76ch; --wide:1140px; --body:18px; --gutter:56px; } }
@media (min-width:1600px){ :root{ --prose:78ch; --wide:1340px; --body:18.5px; --gutter:72px; } }
@media (min-width:2000px){ :root{ --prose:80ch; --wide:1420px; --body:19px; --gutter:80px; } }
@media (min-width:2400px){ :root{ --prose:82ch; --wide:1480px; --body:19.5px; --gutter:88px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:var(--body);line-height:1.65;
  font-weight:400;
}
img{max-width:100%;display:block}
p{text-wrap:pretty}
a{color:var(--blue);text-decoration:none}
a:hover{color:var(--ember)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;letter-spacing:-.012em;line-height:1.06;text-wrap:balance;margin:0}
table{border-collapse:collapse;width:100%}
figure{margin:0}
svg{display:block}

/* ---------- shared type helpers ---------- */
.kicker{font-family:var(--sans);font-size:.72rem;letter-spacing:.19em;text-transform:uppercase;color:var(--mute);font-weight:600}
.kicker a{color:inherit}
.kicker a:hover{color:var(--ember)}
.icon{width:1.15em;height:1.15em;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
.icon-lg{width:44px;height:44px;stroke-width:1.3}
.rule-braid{color:var(--blue);width:96px;height:30px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round}

/* ---------- widths ---------- */
.doc{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--gutter),1fr)
    [wide-start] minmax(0,calc((var(--wide) - var(--prose))/2))
    [prose-start] minmax(0,var(--prose)) [prose-end]
    minmax(0,calc((var(--wide) - var(--prose))/2)) [wide-end]
    minmax(var(--gutter),1fr) [full-end];
}
.doc > *{grid-column:prose-start/prose-end}
.doc > .wide{grid-column:wide-start/wide-end}
.doc > .full{grid-column:full-start/full-end}
.doc > .bleed-left{grid-column:full-start/prose-end}
.doc > .bleed-right{grid-column:prose-start/full-end}
@media (max-width:1099px){
  .doc{display:block;padding-left:var(--gutter);padding-right:var(--gutter)}
  .doc > *,.doc > .wide{grid-column:auto}
  .doc > .full,.doc > .bleed-left,.doc > .bleed-right{margin-left:calc(-1 * var(--gutter));margin-right:calc(-1 * var(--gutter))}
  .art-body{display:flex;flex-direction:column;gap:clamp(20px,3vw,32px)}
  .prose-page{display:flex;flex-direction:column;gap:clamp(18px,2.6vw,28px)}
  .art-body > p,.art-body > ul,.art-body > h3,.prose-page > p{max-width:74ch}
}
.shell{max-width:min(var(--wide),1480px);margin:0 auto;padding:0 var(--gutter)}
.shell-wide{max-width:min(calc(var(--wide) + 240px),1720px);margin:0 auto;padding:0 var(--gutter)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper)}
.masthead-in{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;padding:24px 0 18px}
@media (min-width:1024px){
  .masthead-in{display:block;text-align:center;padding:30px 0 0}
  .masthead-in > div:first-child{display:block;text-align:center}
}
.brand{display:inline-flex;align-items:center;gap:clamp(10px,1vw,16px);text-decoration:none;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand .braid{color:var(--blue);display:flex;align-items:center}
.mark{width:auto;height:clamp(30px,3.3vw,47px);stroke:currentColor;fill:none}
.wordmark{font-family:var(--serif);font-size:clamp(34px,4.6vw,64px);line-height:.82;letter-spacing:-.005em;text-transform:uppercase}
.wordmark .dotcom{color:var(--blue);font-family:var(--sans);font-weight:600;font-size:.28em;letter-spacing:.06em;vertical-align:1.1em;margin-left:.12em;text-transform:lowercase}
.standing{font-size:.86rem;color:var(--mute);max-width:40ch;margin:8px 0 0}

/* nav */
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,34px);flex-wrap:wrap;padding-bottom:6px}
@media (min-width:1024px){
  .masthead-in{padding-bottom:0}
  .nav{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-top:26px;justify-content:center;background:var(--ink);padding:0 var(--gutter);gap:clamp(16px,2.2vw,40px)}
  .nav .nav-link{color:#DCE6EF;padding:15px 0}
  .nav .nav-link:hover{color:#8FD8EC}
  .nav .nav-link[aria-current]{color:#8FD8EC}
  .nav .has-sub > .nav-link::after{opacity:.7}
  .subnav{background:var(--ink);border:1px solid rgba(238,242,246,.18);border-top:2px solid #8FD8EC;box-shadow:0 22px 50px -24px rgba(0,0,0,.7)}
  .subnav a{color:#DCE6EF;border-bottom:1px solid rgba(238,242,246,.12)}
  .subnav a:hover{color:#8FD8EC}
}
.nav-item{position:relative}
.nav-link{display:inline-flex;align-items:center;gap:7px;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink);padding:6px 0}
.nav-link:hover{color:var(--ember)}
.nav-link[aria-current]{color:var(--blue)}
.has-sub > .nav-link::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:2px}
.subnav{
  position:absolute;top:100%;left:-18px;min-width:216px;z-index:40;
  background:var(--paper);border:1px solid var(--hair);border-top:2px solid var(--blue);
  padding:14px 18px 16px;display:none;box-shadow:0 18px 44px -22px rgba(11,22,32,.5)
}
.nav-item.has-sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.nav-item.has-sub:hover .subnav,.nav-item.has-sub:focus-within .subnav{display:block}
.subnav a{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:.9rem;color:var(--ink);border-bottom:1px solid var(--hair-soft)}
.subnav a:last-child{border-bottom:0}
.subnav a:hover{color:var(--blue)}
.nav-toggle,.nav-toggle-label{display:none}

@media (max-width:1023px){
  .nav-toggle-label{display:inline-flex;align-items:center;gap:9px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;border:1px solid var(--hair);padding:9px 14px;min-height:44px}
  .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid var(--hair);margin-top:14px}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav-item{border-bottom:1px solid var(--hair-soft)}
  .nav-link{min-height:46px;padding:10px 0}
  .subnav{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:0 14px;border:0;padding:0 0 8px 26px;box-shadow:none;min-width:0}
  .subnav a{border-bottom:0;min-height:44px;align-items:center}
  .has-sub > .nav-link::after{display:none}
}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:var(--paper);margin-top:0}
.site-foot a{color:var(--paper)}
.site-foot a:hover{color:#8FB6FF}
.foot-in{display:grid;grid-template-columns:1fr;gap:36px;padding:56px 0 44px}
@media (min-width:900px){.foot-in{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:64px}}
.foot-brand{font-family:var(--serif);font-size:clamp(28px,2.7vw,46px);line-height:.85;letter-spacing:-.005em;text-transform:uppercase}
.foot-line{color:#9FB0BD;font-size:.92rem;margin:12px 0 0;max-width:none;white-space:nowrap}
@media (max-width:760px){.foot-line{white-space:normal}}
.foot-nav{display:grid;grid-template-columns:repeat(2,minmax(140px,auto));gap:2px 40px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
@media (min-width:1200px){.foot-nav{grid-template-columns:repeat(3,minmax(140px,auto))}}
@media (min-width:1600px){.foot-nav{grid-template-columns:repeat(4,minmax(150px,auto))}}

.foot-nav a{display:inline-flex;align-items:center;min-height:44px}
@media (min-width:900px){.foot-nav a{min-height:34px}}

/* ---------- lead band ---------- */
.lead-band{position:relative;background:var(--ink)}
.lead-band img{width:100%;height:clamp(360px,46vw,720px);object-fit:cover}
.lead-plate{background:var(--paper);border-top:3px solid var(--blue);padding:clamp(22px,2.4vw,44px) clamp(22px,3vw,60px) clamp(24px,2.6vw,46px)}
@media (min-width:1024px){
  .lead-band{display:grid;grid-template-columns:minmax(0,1fr) min(1720px,100%) minmax(0,1fr)}
  .lead-band .lead-media{grid-column:1/-1;grid-row:1}
  .lead-plate{grid-column:2;grid-row:1;align-self:end;justify-self:start;width:min(70%,1060px);margin:0}
}
.lead-plate > .kicker{display:inline-flex;align-items:center;gap:10px;background:var(--blue);color:#F2F6FF;font-size:.84rem;letter-spacing:.16em;font-weight:700;padding:10px 14px;line-height:1}
.lead-plate > .kicker .icon{width:1.5em;height:1.5em}
.lead-title{font-size:clamp(30px,4.4vw,74px);margin:14px 0 0;max-width:26ch}
.lead-dek{font-size:clamp(1.02rem,1.3vw,1.35rem);color:var(--mute);margin:16px 0 0;max-width:58ch;line-height:1.5}
.lead-more{display:inline-flex;align-items:center;gap:10px;margin-top:22px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;border-bottom:2px solid var(--blue);padding-bottom:5px}

/* ---------- bands ---------- */
.band{padding:clamp(54px,6vw,120px) 0;border-top:1px solid var(--hair)}
.band-tight{padding:clamp(34px,3.6vw,64px) 0;border-top:1px solid var(--hair)}
.band-panel{border-top:1px solid var(--hair)}
.sig + .band,.supporters + .band,.breaker + .band{border-top:0}
.band-panel{background:var(--panel)}
.band-ink{background:var(--ink);color:var(--paper);border-top:0}
.band-ink h2,.band-ink .band-title{color:var(--paper)}
.band-ink .band-sub,.band-ink .cat-brief{color:#A9BBC8}
.band-ink .band-eyebrow{border-bottom-color:rgba(238,242,246,.4)}
.band-ink .band-label{color:#DCE6EF}
.band-ink .band-rule{background:rgba(238,242,246,.4);opacity:1}
.band-ink .icon-md,.band-ink .icon-lg{color:#8FD8EC}
.band-ink .kicker{color:#8FA3B2}
.band-ink .fig-cap{color:var(--paper);border-top-color:rgba(238,242,246,.22)}
.band-ink .fig-credit{color:#8FA3B2}
.band-ink .map-head strong{color:var(--paper)}
.band-ink .map-head span{color:#8FA3B2}
.band-ink .map-legend{color:#A9BBC8}
.band-ink .map-legend .s{background:#8FD8EC}
.band-ink .map-legend .s.ind{background:#FFFFFF}
.band-ink .map-legend .s.land{background:transparent;border-color:#8FD8EC}
.band-ink .map-slot{border-color:rgba(238,242,246,.25)}
.band-ink .related-links li{border-top-color:rgba(238,242,246,.22)}
.band-ink .related-links a{color:var(--paper)}
.band-ink .related-links a:hover{color:#8FD8EC}
.band-head{display:block;margin-bottom:clamp(26px,3vw,52px);max-width:1720px}
.band-eyebrow{display:flex;align-items:center;gap:clamp(12px,1.2vw,20px);padding-bottom:16px;border-bottom:2px solid var(--ink);margin-bottom:clamp(20px,2vw,34px)}
.band-eyebrow .icon-md{width:30px;height:30px;stroke-width:1.5;color:var(--blue);flex:0 0 auto}
.band-eyebrow .band-num{background:var(--blue);color:#F2F6FF;font-family:var(--sans);font-weight:700;font-size:.86rem;letter-spacing:.08em;padding:7px 11px;line-height:1}
.band-label{font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--ink)}
.band-rule{flex:1 1 auto;height:2px;background:var(--ink);opacity:.14;min-width:24px}
.band-head .icon-lg{color:var(--blue)}
.band-title{font-size:clamp(26px,3.1vw,52px);max-width:34ch}
.band-sub{color:var(--mute);margin:12px 0 0;max-width:62ch}
.band-num{font-family:var(--sans);font-weight:700;font-size:clamp(26px,2.4vw,40px);color:var(--ember);letter-spacing:-.03em;line-height:1}

/* signature */
.sig{background:var(--blue);color:#EFF4FF}
.sig a{color:#EFF4FF}
.sig-in{display:grid;grid-template-columns:1fr;gap:0;max-width:min(1720px,100%);margin:0 auto;padding:0 var(--gutter)}
@media (min-width:820px){.sig-in{grid-template-columns:repeat(3,1fr)}}
.sig-cell{padding:clamp(30px,3.4vw,64px) clamp(22px,2.4vw,44px);border-top:1px solid rgba(239,244,255,.3);display:flex;flex-direction:column;gap:14px}
@media (min-width:820px){.sig-cell{border-top:0;border-left:1px solid rgba(239,244,255,.3)}.sig-cell:first-child{border-left:0;padding-left:0}.sig-cell:last-child{padding-right:0}}
.sig-kicker{font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600;opacity:.72}
.sig-mark{font-family:var(--serif);font-size:clamp(46px,6vw,110px);line-height:.86;letter-spacing:-.035em;display:block}
.sig-note{margin:0;font-size:.98rem;line-height:1.5;max-width:34ch;opacity:.9}
.sig-cell:hover .sig-mark{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

/* cards */
.cards{display:grid;gap:clamp(18px,2vw,34px);grid-template-columns:1fr}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.cards-4{grid-template-columns:repeat(4,1fr)}.cards-3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:2000px){.cards-4{grid-template-columns:repeat(4,1fr)}.cards-3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;height:100%;color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:14px 14px 0;transition:background .18s ease}
.card:hover{color:var(--ink);background:var(--panel)}
.card:hover .card-title{color:var(--blue)}
.card > .kicker{display:flex;align-items:center;gap:9px;padding-bottom:13px;font-size:.82rem;letter-spacing:.17em;color:var(--ink)}
.card > .kicker .icon{width:1.4em;height:1.4em;color:var(--blue)}
.card-media{aspect-ratio:8/5;overflow:hidden;background:var(--panel);position:relative}
.card-media img{width:100%;height:100%;object-fit:cover}
.card-media::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(11,22,32,.14)}
.card-body{display:flex;flex-direction:column;flex:1;padding:14px 0 18px}
.card-title{font-family:var(--serif);font-size:clamp(1.12rem,1.35vw,1.5rem);line-height:1.12;margin:8px 0 0;min-height:2.3em}
.card-dek{color:var(--mute);font-size:.94rem;margin:10px 0 0;line-height:1.5}
.card-foot{margin-top:auto;padding-top:14px;border-top:1px solid var(--hair);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:600}

/* split band header */
.band-head-split{display:grid;grid-template-columns:1fr;gap:18px clamp(24px,3vw,56px);border-top:2px solid var(--ink);padding-top:clamp(16px,1.6vw,26px)}
@media (min-width:900px){.band-head-split{grid-template-columns:minmax(104px,9%) minmax(0,1fr)}}
.bh-left{display:flex;flex-direction:row;align-items:center;gap:12px;color:var(--blue);flex-wrap:wrap}
@media (min-width:900px){.bh-left{flex-direction:column;align-items:flex-start;gap:10px}}
.bh-left .icon-lg{width:34px;height:34px;stroke-width:1.5}
.bh-num{font-family:var(--sans);font-weight:700;font-size:clamp(30px,3vw,46px);line-height:.9;letter-spacing:-.04em;color:var(--ink)}
.bh-label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.bh-right{display:flex;flex-direction:column;gap:14px}
@media (min-width:1100px){
  .bh-right{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:16px clamp(30px,3.4vw,72px);align-items:end}
  .bh-right .band-title{max-width:24ch}
  .bh-right .band-sub{max-width:52ch;align-self:end}
  .bh-right > .kicker{grid-column:2;margin-top:2px}
}
.bh-right .band-title{margin:0}
.bh-right .band-sub{margin:0}

.gwall-head{padding:0 clamp(16px,1.6vw,28px) clamp(22px,2.2vw,38px)}
.gwall-head .band-head{max-width:none;margin:0;display:grid;grid-template-columns:1fr;gap:16px;border-top:2px solid var(--ink);padding-top:clamp(16px,1.6vw,26px)}
@media (min-width:900px){.gwall-head .band-head{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:20px clamp(30px,3vw,64px)}}
.gwall-head .band-eyebrow{border:0;padding:0;margin:0 0 12px}
.gwall-head .band-title{font-size:clamp(24px,2.6vw,42px);max-width:30ch}
.gwall-head .gwall-more{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--blue);white-space:nowrap;padding-bottom:6px}

/* picture wall — full-bleed mosaic, no gaps, meta over the image */
.gwall{display:grid;grid-template-columns:1fr;gap:0;width:100%}
.gcard{position:relative;display:block;overflow:hidden;min-width:0;color:#F2F6FF;background:var(--ink);aspect-ratio:16/10}
.gcard:hover{color:#FFFFFF}
.gcard .ph{position:absolute;inset:0;display:block;overflow:hidden}
.gcard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gcard:hover .ph img{transform:scale(1.04)}
.gcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(11,22,32,.9) 0%,rgba(11,22,32,.45) 38%,rgba(11,22,32,0) 72%)}
.gc-kicker{max-width:calc(100% - 2*clamp(16px,1.6vw,28px));box-shadow:0 6px 20px -8px rgba(11,22,32,.8);position:relative;z-index:2;display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:#FFFFFF;background:var(--blue);padding:8px 12px;margin-bottom:12px}
.gc-kicker .icon{width:1.3em;height:1.3em}
.gc-title{overflow-wrap:anywhere;text-shadow:0 2px 18px rgba(11,22,32,.75),0 1px 3px rgba(11,22,32,.6);position:relative;z-index:2;font-family:var(--serif);font-size:clamp(1.1rem,1.5vw,1.7rem);line-height:1.14;margin-top:9px;max-width:26ch}
.gcard > .gc-kicker{margin-left:clamp(16px,1.6vw,28px)}
.gcard > .gc-title{padding-left:clamp(16px,1.6vw,28px);padding-right:clamp(16px,1.6vw,28px)}
.gcard > .gc-kicker{position:absolute;left:0;right:0;bottom:auto;top:auto}
.gcard{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:clamp(18px,1.8vw,30px)}
.gcard > .gc-kicker{position:relative}
@media (min-width:640px){.gwall{grid-template-columns:repeat(2,1fr)}.gcard{aspect-ratio:4/3}}
@media (min-width:1100px){
  .gwall{grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(560px,44vw,760px)}
  .gcard{aspect-ratio:auto;min-height:0}
  .gwall > :nth-child(1){grid-column:span 2;grid-row:span 2}
  .gwall > :nth-child(2){grid-column:span 2;grid-row:span 1}
  .gwall > :nth-child(1) .gc-title{font-size:clamp(1.5rem,2.1vw,2.4rem);max-width:22ch}
}

/* photograph inside a dark band */
.ink-fig{margin:clamp(20px,2.2vw,34px) 0 clamp(24px,2.4vw,38px)}
.ink-fig-kicker{display:block;font-size:.7rem;letter-spacing:.19em;text-transform:uppercase;font-weight:600;color:#8FD8EC;padding-bottom:11px}
.ink-fig figcaption{display:block;padding-top:12px}
.ink-fig .fig-cap{max-width:52ch;border-top:1px solid rgba(238,242,246,.22);padding-top:10px;font-size:.96rem}
.ink-fig .fig-credit{text-align:left;padding-top:8px;font-size:.66rem}
.ink-fig .ph{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:#16242F}
.ink-fig .ph img{width:100%;height:100%;object-fit:cover}
.ink-fig .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(238,242,246,.22)}

/* char band: one dominant picture, two compact rows */
.char-grid{display:grid;gap:clamp(18px,2vw,34px);grid-template-columns:1fr;align-items:stretch}
@media (min-width:900px){.char-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
.char-lead{display:block;color:var(--ink);background:var(--paper);border:1px solid var(--hair);padding:12px}
.char-lead:hover{background:#E6EDF4;color:var(--ink)}
.char-lead .ph{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--panel)}
.char-lead .ph img{width:100%;height:100%;object-fit:cover}
.char-lead .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(11,22,32,.16)}
.cl-body{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:13px 4px 3px}
.cl-title{font-family:var(--serif);font-size:clamp(1.25rem,1.7vw,1.85rem);line-height:1.12;max-width:30ch}
.char-lead:hover .cl-title{color:var(--blue)}
.cl-credit{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.char-rows{display:flex;flex-direction:column;border-top:1px solid var(--hair);height:100%}
.char-row{display:grid;grid-template-columns:clamp(104px,12vw,168px) minmax(0,1fr);gap:clamp(14px,1.4vw,24px);padding:16px 0;border-bottom:1px solid var(--hair);align-items:stretch;color:var(--ink);flex:1 1 0;min-height:120px}
.char-row:hover{color:var(--ink)}
.char-row:hover .cr-title{color:var(--blue)}
.char-row .ph{display:block;position:relative;height:100%;min-height:96px;overflow:hidden;background:var(--panel)}
.char-row .ph img{width:100%;height:100%;object-fit:cover}
.char-row .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(11,22,32,.16)}
.cr-body{display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0}
.cr-title{font-family:var(--serif);font-size:clamp(1.02rem,1.25vw,1.3rem);line-height:1.14}
.cr-brief{color:var(--mute);font-size:.86rem;line-height:1.45}

/* picture cards */
.char-band{background:var(--panel);border-top:1px solid var(--hair)}
.char-band .pcard{background:var(--paper);border-color:rgba(11,22,32,.2)}
.char-band .pcard:hover{background:#E6EDF4}
.pcard{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--hair);padding:12px;color:var(--ink);height:100%;transition:background .18s ease}
.pcard:hover{background:var(--panel);color:var(--ink)}
.pcard:hover .pcard-title{color:var(--blue)}
.pcard .ph{display:block;position:relative;aspect-ratio:8/5;overflow:hidden;background:var(--panel)}
.pcard .ph img{width:100%;height:100%;object-fit:cover}
.pcard .ph::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(11,22,32,.16)}
.pcard-body{display:flex;flex-direction:column;gap:9px;padding:14px 4px 4px}
.pcard-title{font-family:var(--serif);font-size:clamp(1.15rem,1.4vw,1.5rem);line-height:1.14;margin:0}
.pcard-brief{color:var(--mute);font-size:.94rem;line-height:1.5;margin:0}
.pcard-credit{display:block;margin-top:auto;padding-top:12px;border-top:1px solid var(--hair);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.pcard.lead .ph{aspect-ratio:8/5}
.pcard.lead .pcard-title{font-size:clamp(1.5rem,2.3vw,2.4rem)}
.pcard.lead .pcard-brief{font-size:1.02rem}
.trio{display:grid;gap:clamp(16px,1.8vw,30px);grid-template-columns:1fr}
@media (min-width:760px){.trio{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.trio{grid-template-columns:repeat(12,1fr)}.trio > :nth-child(1){grid-column:span 6;grid-row:span 2}.trio > :nth-child(2),.trio > :nth-child(3){grid-column:span 6}}

/* two-up feature */
.duo{display:grid;gap:clamp(22px,2.6vw,54px);grid-template-columns:1fr;align-items:start}
@media (min-width:1024px){.duo{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}}
.stackpair{display:grid;gap:clamp(20px,2.2vw,38px)}

/* quiet line */
.quiet-line{display:grid;gap:24px;align-items:center;grid-template-columns:1fr}
@media (min-width:900px){.quiet-line{grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,3vw,56px)}}
.quiet-line p{margin:0}
.ql-quote{font-family:var(--serif);font-size:clamp(1.5rem,2.9vw,3rem);line-height:1.14;max-width:42ch;border-left:4px solid var(--blue);padding-left:clamp(18px,2vw,34px)}
.ql-mark{width:clamp(110px,13vw,210px);color:var(--blue);flex:0 0 auto}
.band-panel .shell-wide{padding-top:clamp(46px,5vw,96px);padding-bottom:clamp(34px,3.6vw,64px)}

/* ---------- figures ---------- */
/* treatment 1: full-bleed band, caption row beneath */
.fig-bleed img{width:100%;height:clamp(280px,38vw,620px);object-fit:cover}
/* treatment 2: mat / card */
.fig-mat{background:var(--panel);padding:clamp(12px,1.1vw,22px);border:1px solid var(--hair)}
.fig-mat img{width:100%;aspect-ratio:8/5;object-fit:cover}
.fig-frame img,.fig-rule img{width:100%;aspect-ratio:8/5;object-fit:cover}
.fig-inset img{width:100%;aspect-ratio:1/1;object-fit:cover}
/* treatment 3: hairline offset frame */
.fig-frame img{outline:1px solid var(--hair);outline-offset:clamp(7px,.7vw,14px)}
/* treatment 4: rule keyed to accent */
.fig-rule img{border-bottom:3px solid var(--blue)}
/* treatment 5: inset in the column, prose wraps */
.fig-inset{float:right;width:min(44%,340px);margin:6px 0 18px clamp(18px,2vw,34px)}
@media (max-width:700px){.fig-inset{float:none;width:100%;margin:0 0 18px}}

.wrapfig::after{content:"";display:block;clear:both}
.wrapfig > p{margin:0;font-size:1.06em;line-height:1.72}
figcaption{display:grid;grid-template-columns:1fr;gap:6px;padding-top:12px}
@media (min-width:900px){
  figcaption{grid-template-columns:minmax(0,1fr) minmax(0,auto);gap:8px clamp(24px,3vw,56px);align-items:baseline}
  .fig-credit{text-align:right}
}
.fig-cap{font-size:1rem;line-height:1.45;max-width:76ch;margin:0;color:var(--ink);border-top:1px solid var(--hair);padding-top:10px}
.wide > figcaption .fig-cap,.full > figcaption .fig-cap,.bleed-left > figcaption .fig-cap,.bleed-right > figcaption .fig-cap{max-width:none}
.fig-credit{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet);margin:0;padding-top:10px}
.fig-bleed figcaption,.article-figure.full figcaption{max-width:min(1720px,100%);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.doc > .full > .map-figure > figcaption{max-width:min(1720px,100%);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}

/* ---------- article ---------- */
.art-head{padding-block:clamp(40px,5vw,96px) clamp(26px,3vw,48px)}
.art-kicker{display:flex;align-items:center;gap:10px;color:var(--blue)}
.art-title{font-size:clamp(34px,5.2vw,88px);margin:20px 0 0;max-width:none}
.art-standfirst{display:grid;grid-template-columns:1fr;gap:18px clamp(30px,3.4vw,72px);margin-top:clamp(20px,2.2vw,36px);border-top:2px solid var(--ink);padding-top:clamp(16px,1.6vw,26px)}
@media (min-width:1000px){.art-standfirst{grid-template-columns:minmax(0,1.75fr) minmax(190px,1fr);align-items:start}}
.art-standfirst .art-lead{margin:0;max-width:none}
.art-meta{margin:0;display:flex;flex-direction:column;gap:6px;font-family:var(--serif);font-size:clamp(1.05rem,1.2vw,1.3rem);line-height:1.2;color:var(--ink)}
.art-meta span{font-family:var(--sans);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--mute)}
.art-lead,.lead{font-size:clamp(1.12rem,1.6vw,1.65rem);line-height:1.42;color:var(--mute);margin:22px 0 0;max-width:78ch;font-weight:300}
.art-body{padding-bottom:clamp(48px,5vw,100px);row-gap:clamp(22px,2vw,34px)}
.art-body > p{margin:0;font-size:1.06em;line-height:1.72}
.art-body > h2{font-size:clamp(1.5rem,2.3vw,2.5rem);margin:clamp(24px,2.6vw,46px) 0 0;max-width:34ch}
.art-body > h2 + p{margin-top:-6px}
.art-body > h3{font-size:clamp(1.15rem,1.5vw,1.6rem);margin:14px 0 0}
.art-body > ul{margin:0;padding-left:1.3em}
.art-body > ul li{margin-bottom:8px}
.art-body > figure{margin:clamp(14px,1.8vw,32px) 0}
.art-body > figure + figure,.art-body > figure + .notes-panel,.art-body > .notes-panel + figure,.art-body > figure + .pullquote,.art-body > .pullquote + figure{margin-top:clamp(30px,3.4vw,58px)}
.art-body > .map-figure{margin:clamp(18px,2vw,36px) 0}

.pullquote{margin:clamp(14px,1.8vw,30px) 0;background:var(--blue);color:#F2F6FF;padding:clamp(24px,2.4vw,44px) clamp(24px,2.6vw,50px)}
.pullquote p{margin:0;font-family:var(--serif);font-size:clamp(1.3rem,2.1vw,2.2rem);line-height:1.2;max-width:36ch}
.blockquote{margin:clamp(14px,1.8vw,30px) 0;padding-left:clamp(18px,1.6vw,30px);border-left:3px solid var(--ember)}
.blockquote p{font-family:var(--serif);font-size:clamp(1.16rem,1.7vw,1.7rem);line-height:1.25;margin:0}
.blockquote cite{display:block;margin-top:12px;font-style:normal;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.callout{background:var(--panel);border-top:3px solid var(--ember);padding:clamp(20px,2vw,36px) clamp(20px,2.2vw,40px);margin:clamp(14px,1.8vw,30px) 0}
.callout p{margin:0}
.note{font-size:.94rem;color:var(--mute);border-left:2px solid var(--hair);padding-left:14px;margin:0}

/* notes-for-design material */
.notes-panel{margin:clamp(16px,2vw,34px) 0;background:var(--paper);border:1px solid var(--hair);border-top:3px solid var(--blue);padding:clamp(20px,2.2vw,40px) clamp(20px,2.4vw,44px)}
.notes-panel.alt{border-top-color:var(--ember);background:var(--panel)}
.notes-head{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.notes-head h3{font-family:var(--sans);font-weight:700;font-size:.8rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mute)}
.notes-panel > ul{margin:0;padding-left:1.2em}
.notes-panel > ul li{margin-bottom:9px;line-height:1.5}

.timeline{list-style:none;margin:0;padding:0;counter-reset:tl}
.timeline li{display:grid;grid-template-columns:1fr;gap:2px;padding:14px 0;border-top:1px solid var(--hair-soft)}
.timeline li:first-child{border-top:0;padding-top:0}
@media (min-width:760px){.timeline li{grid-template-columns:minmax(140px,26%) minmax(0,1fr);gap:8px clamp(18px,2vw,36px);align-items:baseline}}
.t-when{font-weight:700;font-size:.92rem;letter-spacing:.02em;color:var(--ember)}
.t-what{line-height:1.5}

.datatable{table-layout:fixed}
.datatable td{overflow-wrap:anywhere}
@media (max-width:640px){
  .datatable,.datatable tbody,.datatable tr,.datatable td,.datatable th{display:block;width:auto}
  .datatable tr{padding:12px 0;border-bottom:1px solid var(--hair-soft)}
  .datatable td{border-bottom:0;padding:2px 0}
  .datatable td:first-child{width:auto;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);font-weight:600}
  .versus,.versus tbody,.versus tr,.versus td{display:block;width:auto}
  .versus thead{display:none}
  .versus tr{padding:12px 0;border-bottom:1px solid var(--hair-soft)}
  .versus td{border-bottom:0;padding:2px 0}
}
.datatable th,.datatable td{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--hair-soft);vertical-align:top;line-height:1.45}
.notes-panel .datatable{table-layout:auto}
.notes-panel .datatable tr:last-child td{border-bottom:0}
.notes-panel .datatable td{padding:14px 0;line-height:1.5}
.notes-panel .datatable td:first-child{width:34%;padding-right:clamp(22px,2.4vw,52px);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.86rem;letter-spacing:.09em;text-transform:uppercase}
.notes-panel .datatable td:last-child{color:var(--ink);font-size:1.02rem}
@media (min-width:1000px){.notes-panel .datatable td:first-child{width:28%}}
.notes-panel .timeline li{padding:15px 0}
.notes-panel .timeline .t-when{font-size:.86rem;letter-spacing:.09em;text-transform:uppercase}
.datatable th{font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--hair)}
.datatable td:first-child{color:var(--mute);width:38%}
.datatable td:last-child{padding-right:0}
.versus th,.versus td{text-align:left;padding:12px 18px 12px 0;border-bottom:1px solid var(--hair-soft);line-height:1.45}
.versus thead th{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);font-family:var(--sans);font-weight:600}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--hair);margin:clamp(14px,1.8vw,30px) 0}
.statblock{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:8px}
.stat-num{font-family:var(--serif);font-size:clamp(1.9rem,2.8vw,3rem);line-height:.95;color:var(--blue)}
.stat-label{font-size:.86rem;color:var(--mute);line-height:1.4}

/* map */
.map-figure{margin:clamp(16px,2vw,34px) 0}
.map-slot{position:relative;background:var(--ink);border:1px solid var(--hair);aspect-ratio:1200/822}
.map-slot .map-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.map-pin{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;margin:0 -8px;color:#EAF2FA;font-size:.78rem;letter-spacing:.04em;white-space:nowrap;text-decoration:none}
.map-pin:hover{color:#FFB08A}
.map-pin .dot{width:10px;height:10px;border-radius:50%;background:#8FD8EC;box-shadow:0 0 0 3px rgba(143,216,236,.28);flex:0 0 auto}
.map-pin[href$="/guides/red-dog-zinc-mine/"] .dot{border-radius:2px;background:#FFFFFF;box-shadow:0 0 0 3px rgba(255,255,255,.24)}
.map-pin[href$="/guides/the-brooks-range/"] .dot{background:transparent;border:2px solid #8FD8EC;box-shadow:none}
.map-pin[href$="/guides/built-on-gravel/"] .dot{background:transparent;border:2px solid #8FD8EC;box-shadow:none}
.map-inset{position:absolute;right:12px;top:12px;width:clamp(120px,17%,210px);background:rgba(11,22,32,.82);border:1px solid rgba(143,216,236,.4);padding:8px 8px 6px;display:block}
.map-inset img{width:100%;display:block}
.map-inset-label{display:block;padding-top:5px;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:#8FD8EC;text-align:center}
@media (max-width:560px){.map-inset{width:88px;right:8px;top:8px}}
.map-head{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding-bottom:12px}
.map-head strong{font-family:var(--serif);font-weight:400;font-size:clamp(1.02rem,1.25vw,1.3rem)}
.map-head span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600}
.map-legend{display:flex;flex-wrap:wrap;gap:10px 28px;padding:14px 0 2px;font-size:.82rem;color:var(--mute)}
.map-legend .k{display:inline-flex;align-items:center;gap:9px}
.map-legend .s{width:10px;height:10px;border-radius:50%;background:var(--blue);flex:0 0 auto}
.map-legend .s.ind{border-radius:2px;background:var(--ink)}
.map-legend .s.land{background:transparent;border:2px solid var(--blue)}
.map-pin.flip{transform:translate(-100%,-50%);flex-direction:row-reverse}
.map-key{display:none}
@media (max-width:760px){
  .map-pin{min-height:0;padding:0;margin:0;pointer-events:none}
  .map-pin span.lbl{display:none}
  .map-pin .dot{width:19px;height:19px;box-shadow:0 0 0 2px rgba(11,22,32,.55);display:flex;align-items:center;justify-content:center;font-size:.62rem;font-weight:700;color:#0B1620;font-family:var(--sans);line-height:1}
  .map-pin[href$="/guides/the-brooks-range/"] .dot,.map-pin[href$="/guides/built-on-gravel/"] .dot{background:#0B1620;color:#8FD8EC}
  .map-slot{counter-reset:pin}
  .map-pin{counter-increment:pin}
  .map-pin .dot::before{content:counter(pin)}
  .map-key{display:grid;grid-template-columns:repeat(2,1fr);gap:2px 14px;counter-reset:key;list-style:none;margin:14px 0 0;padding:0}
  .map-key li{counter-increment:key;display:flex;align-items:center;gap:9px;min-height:44px;font-size:.9rem}
  .map-key li::before{content:counter(key);flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:#8FD8EC;color:#0B1620;font-family:var(--sans);font-weight:700;font-size:.68rem;display:flex;align-items:center;justify-content:center}
  .band-ink .map-key li{color:var(--paper)}
  .map-key a{color:inherit;border-bottom:1px solid currentColor;padding-bottom:1px}
  .map-legend{font-size:.78rem;gap:8px 18px}
  .map-legend .k:last-child{display:none}
}

/* section breaker */
.breaker{position:relative;border-top:4px solid var(--blue);border-bottom:4px solid var(--blue);background:var(--ink)}
.breaker img{width:100%;height:clamp(220px,30vw,480px);object-fit:cover;display:block}
.breaker-label{position:absolute;left:0;bottom:0;display:flex;background:var(--ink);color:var(--paper);padding:14px clamp(18px,2vw,34px);display:flex;align-items:center;gap:14px;max-width:min(100%,760px)}
.breaker-label .icon{color:#8FD8EC}
.breaker-label .bl-text{font-size:.86rem;line-height:1.4}
.breaker-label .bl-text a{color:#8FD8EC}
.breaker-num{font-family:var(--sans);font-weight:700;font-size:1.1rem;letter-spacing:-.03em;color:#8FD8EC}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(10px,1.2vw,20px);margin:clamp(16px,2vw,30px) 0}
.gallery figure img{aspect-ratio:16/10;object-fit:cover;width:100%}
.gallery figcaption{grid-template-columns:1fr;padding-top:8px}
.gallery .fig-cap{font-size:.86rem;border-top:0;padding-top:6px}

/* related / further */
.related-links,.cat-list{list-style:none;margin:0;padding:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links a{display:flex;align-items:baseline;gap:12px;padding:16px 0;color:var(--ink);font-family:var(--serif);font-size:clamp(1.06rem,1.3vw,1.4rem);line-height:1.2}
.related-links a:hover{color:var(--blue)}
.further-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair)}
@media (min-width:760px){.further-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}}
.further-grid a{background:var(--paper);padding:22px 22px 26px;color:var(--ink);display:flex;flex-direction:column;gap:10px}
.further-grid a:hover{background:var(--panel)}

.cat-list li{border-top:1px solid var(--hair)}
.cat-list li:last-child{border-bottom:1px solid var(--hair)}
.cat-item{display:grid;grid-template-columns:1fr;gap:6px;padding:22px 0;color:var(--ink)}
@media (min-width:900px){.cat-item{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:10px clamp(28px,3vw,64px);align-items:baseline}}
.cat-item:hover .cat-title{color:var(--blue)}
.cat-title{font-family:var(--serif);font-size:clamp(1.2rem,1.7vw,1.85rem);line-height:1.14;margin:0}
.cat-brief{color:var(--mute);font-size:.96rem;line-height:1.5;margin:0}

/* sections hub */
.hub{display:grid;grid-template-columns:1fr;gap:1px;background:var(--hair)}
@media (min-width:700px){.hub{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1200px){.hub{grid-template-columns:repeat(3,1fr)}}
@media (min-width:2000px){.hub{grid-template-columns:repeat(4,1fr)}}
.hub a{background:var(--paper);padding:26px 26px 30px;display:flex;flex-direction:column;gap:12px;color:var(--ink);min-height:100%}
.hub a:hover{background:var(--panel)}
.hub .icon-lg{color:var(--blue)}
.hub h3{font-size:clamp(1.1rem,1.35vw,1.5rem);line-height:1.14}
.hub p{margin:0;color:var(--mute);font-size:.92rem}
.hub .count{margin-top:auto;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:600}

/* archive register */
.register{width:100%;font-size:.98rem}
.register caption{text-align:left;font-family:var(--sans);font-weight:600;font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:var(--mute);padding:34px 0 10px}
.register th{text-align:left;font-family:var(--sans);font-weight:600;font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--hair);padding:0 18px 10px 0}
.register td{padding:14px 18px 14px 0;border-bottom:1px solid var(--hair-soft);vertical-align:top;line-height:1.4}
.register td:last-child{padding-right:0}
.register .r-title{font-family:var(--serif);font-size:1.1rem;line-height:1.18}
.register .r-brief{color:var(--mute);font-size:.9rem}
@media (max-width:700px){
  .register thead{display:none}
  .register td{display:block;border-bottom:0;padding:2px 0}
  .register tr{display:block;padding:16px 0;border-bottom:1px solid var(--hair-soft)}
}

/* ---------- supporters ---------- */
.supporters{background:var(--ink);color:var(--paper)}
.supporters-in{padding:clamp(38px,4vw,72px) 0 clamp(40px,4.4vw,78px)}
.sup-head{display:flex;flex-direction:column;gap:10px;margin-bottom:clamp(24px,2.6vw,44px);max-width:64ch}
.sup-head .kicker{color:#8FA3B2}
.sup-head{max-width:none}
.sup-head h2{color:var(--paper);font-size:clamp(1.2rem,1.75vw,1.9rem);max-width:none}
@media (min-width:1024px){.sup-head h2{white-space:nowrap}}
.sup-tier{display:grid;grid-template-columns:1fr;gap:0;background:transparent;border-top:1px solid rgba(238,242,246,.16);border-right:1px solid rgba(238,242,246,.16);margin-left:-1px;overflow:hidden}
@media (min-width:560px){.sup-tier{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.sup-tier{grid-template-columns:repeat(4,1fr)}}
.sup-roll{grid-template-columns:repeat(2,1fr)}
@media (min-width:560px){.sup-roll{grid-template-columns:repeat(2,1fr)}}
@media (min-width:900px){.sup-roll{grid-template-columns:repeat(4,1fr)}}
.sup-roll{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
.sponsor{background:var(--ink);color:var(--paper);min-height:96px;display:flex;align-items:center;padding:20px 22px;border-left:1px solid rgba(238,242,246,.16);border-bottom:1px solid rgba(238,242,246,.16)}
.sponsor:hover{background:#132330;color:#FFFFFF}
.sponsor-name{font-family:var(--serif);font-size:1.18rem;line-height:1.2;letter-spacing:-.005em}
.sup-roll .sponsor{min-height:70px;padding:14px 18px}
.sup-roll .sponsor-name{font-family:var(--sans);font-size:.9rem;font-weight:500;letter-spacing:.01em;color:#C9D6E1}
.sup-roll .sponsor:hover .sponsor-name{color:#FFFFFF}
.sup-split{margin:clamp(20px,2.2vw,38px) 0 14px;font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:#8FA3B2;font-weight:600}
@media (max-width:560px){
  .sup-tier,.sup-roll{grid-template-columns:1fr}
}

/* ---------- misc pages ---------- */
.page-head{padding-block:clamp(40px,5vw,90px) clamp(20px,2.4vw,40px)}
.page-title{font-size:clamp(32px,4.4vw,72px);max-width:28ch}
.prose-page{padding-bottom:clamp(50px,5vw,100px);row-gap:clamp(20px,2vw,32px)}
.prose-page > p{margin:0;font-size:1.04em;line-height:1.72}
.prose-page > h2{font-size:clamp(1.4rem,2vw,2.2rem);margin:clamp(18px,2vw,34px) 0 0}
.crumb{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);font-weight:600;padding-top:22px}
.crumb a{color:var(--mute)}
.crumb a:hover{color:var(--blue)}
.big-404{font-family:var(--serif);font-size:clamp(90px,18vw,300px);line-height:.8;color:var(--blue);letter-spacing:-.05em}

.emblem{color:var(--blue);width:100%;height:auto;stroke:currentColor;fill:none;stroke-width:1.3;stroke-linecap:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* styleguide only */
.sg-block{border-top:1px solid var(--hair);padding:34px 0}
.sg-label{font-size:.72rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ember);font-weight:700;margin-bottom:18px}
.sg-narrow{max-width:360px;border:1px dashed var(--hair);padding:14px;margin-top:20px}

/* ---------- per-section colour ---------- */
:root{
  --sec-water:#1450C8;
  --sec-char:#0E7C86;
  --sec-gravel:#7A5C2E;
  --sec-ice:#2E86C8;
  --sec-road:#C2410C;
  --sec-mine:#8A2E4D;
  --sec-port:#1F6E5A;
  --sec-permits:#5B4B9E;
  --sec-kivalina:#B5641A;
  --sec-motion:#A02020;
  --sec-overland:#2A6EA0;
  --sec-claims:#4A6B22;
}
.nav-link[href$="/category/water/"] .icon,.subnav a[href$="/category/water/"] .icon,.hub a[href$="/category/water/"] .icon-lg{color:var(--sec-water)}
body[data-sec="water"]{--blue:var(--sec-water)}
[data-sec-col="water"]{--blue:var(--sec-water)}
.nav-link[href$="/category/char/"] .icon,.subnav a[href$="/category/char/"] .icon,.hub a[href$="/category/char/"] .icon-lg{color:var(--sec-char)}
body[data-sec="char"]{--blue:var(--sec-char)}
[data-sec-col="char"]{--blue:var(--sec-char)}
.nav-link[href$="/category/gravel/"] .icon,.subnav a[href$="/category/gravel/"] .icon,.hub a[href$="/category/gravel/"] .icon-lg{color:var(--sec-gravel)}
body[data-sec="gravel"]{--blue:var(--sec-gravel)}
[data-sec-col="gravel"]{--blue:var(--sec-gravel)}
.nav-link[href$="/category/ice/"] .icon,.subnav a[href$="/category/ice/"] .icon,.hub a[href$="/category/ice/"] .icon-lg{color:var(--sec-ice)}
body[data-sec="ice"]{--blue:var(--sec-ice)}
[data-sec-col="ice"]{--blue:var(--sec-ice)}
.nav-link[href$="/category/road/"] .icon,.subnav a[href$="/category/road/"] .icon,.hub a[href$="/category/road/"] .icon-lg{color:var(--sec-road)}
body[data-sec="road"]{--blue:var(--sec-road)}
[data-sec-col="road"]{--blue:var(--sec-road)}
.nav-link[href$="/category/mine/"] .icon,.subnav a[href$="/category/mine/"] .icon,.hub a[href$="/category/mine/"] .icon-lg{color:var(--sec-mine)}
body[data-sec="mine"]{--blue:var(--sec-mine)}
[data-sec-col="mine"]{--blue:var(--sec-mine)}
.nav-link[href$="/category/port/"] .icon,.subnav a[href$="/category/port/"] .icon,.hub a[href$="/category/port/"] .icon-lg{color:var(--sec-port)}
body[data-sec="port"]{--blue:var(--sec-port)}
[data-sec-col="port"]{--blue:var(--sec-port)}
.nav-link[href$="/category/permits/"] .icon,.subnav a[href$="/category/permits/"] .icon,.hub a[href$="/category/permits/"] .icon-lg{color:var(--sec-permits)}
body[data-sec="permits"]{--blue:var(--sec-permits)}
[data-sec-col="permits"]{--blue:var(--sec-permits)}
.nav-link[href$="/category/kivalina/"] .icon,.subnav a[href$="/category/kivalina/"] .icon,.hub a[href$="/category/kivalina/"] .icon-lg{color:var(--sec-kivalina)}
body[data-sec="kivalina"]{--blue:var(--sec-kivalina)}
[data-sec-col="kivalina"]{--blue:var(--sec-kivalina)}
.nav-link[href$="/category/motion/"] .icon,.subnav a[href$="/category/motion/"] .icon,.hub a[href$="/category/motion/"] .icon-lg{color:var(--sec-motion)}
body[data-sec="motion"]{--blue:var(--sec-motion)}
[data-sec-col="motion"]{--blue:var(--sec-motion)}
.nav-link[href$="/category/overland/"] .icon,.subnav a[href$="/category/overland/"] .icon,.hub a[href$="/category/overland/"] .icon-lg{color:var(--sec-overland)}
body[data-sec="overland"]{--blue:var(--sec-overland)}
[data-sec-col="overland"]{--blue:var(--sec-overland)}
.nav-link[href$="/category/claims/"] .icon,.subnav a[href$="/category/claims/"] .icon,.hub a[href$="/category/claims/"] .icon-lg{color:var(--sec-claims)}
body[data-sec="claims"]{--blue:var(--sec-claims)}
[data-sec-col="claims"]{--blue:var(--sec-claims)}
@media (min-width:1024px){.nav .nav-link .icon,.subnav a .icon{filter:saturate(1.25) brightness(1.55)}}

/* 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}
.sup-head > .sponsor{flex:0 0 auto!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-blurb-size: the design never sized .sponsor-blurb, so it inherited body copy.
   Relative, so it still follows the design's scale. */
.sponsor .sponsor-blurb{font-size:.8em;line-height:1.45}
.sponsor .sp-brand{font-weight:700}

/* sp-blurb-contrast: the design never coloured .sponsor-blurb because its bar was
   marks-only; our copy would inherit the page's dark ink onto a dark tile. */
.sponsor .sponsor-blurb{color:rgba(255,255,255,.82)}
.sponsor .sponsor-name{color:rgba(255,255,255,.95)}

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
:has(> .sponsor.sponsor){align-items:stretch!important}
.sponsor.sponsor .sponsor-name{min-width:0!important;overflow-wrap:anywhere}
.sponsor.sponsor > img{flex:0 0 auto!important;align-self:center!important}
.sponsor.sponsor > .sponsor-txt,.sponsor.sponsor > span:not(.sponsor-name){flex:1 1 auto!important;min-width:0!important}
.sponsor.sponsor .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp: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}


/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   627px at 390, 8% of the whole page. Two columns bring it to
   314px (50% shorter). Checked before writing: no new overflow, smallest mark still
   Nonepx wide, longest blurb 1 lines, tile heights 46-64px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   Only the tier(s) that were one-per-row are touched (.sup-tier, .sup-tier.sup-roll), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sup-tier{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sup-tier > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier > * *{min-width:0!important;max-width:100%}
    .sup-tier img,.sup-tier svg{max-width:100%;height:auto}
  .sup-tier.sup-roll{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sup-tier.sup-roll > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-tier.sup-roll > * *{min-width:0!important;max-width:100%}
    .sup-tier.sup-roll img,.sup-tier.sup-roll svg{max-width:100%;height:auto}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; line-height: 1.06; text-wrap: balance; margin: 0px;}
.hub h2:where(.rt-h3){font-size: clamp(1.1rem, 1.35vw, 1.5rem); line-height: 1.14;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.char-lead > span.ph > img,
  a.char-row > span.ph > img,
  a.gcard > span.ph > img,
  div.full > figure.article-figure.fig-bleed > img,
  figure.article-figure.wide > div.fig-mat > img,
  figure.ink-fig > span.ph > img,
  section.band-panel > figure.breaker > img,
  section.lead-band > div.lead-media > img){height:auto}
/* op-img-dims:end */