/* neozarrivants.com — "Where the Lines Fell"
   Palette: paper (ground) · ink · forest (accent, used as area) · saffron (secondary) · slate (quiet ink)
   Type: Bricolage Grotesque (labels, masthead) · Source Serif 4 (headlines, prose) */

:root{
  --paper:#F5F1E6;
  --paper-2:#EBE6D6;
  --ink:#191E19;
  --forest:#14543A;
  --forest-deep:#0E3E2B;
  --saffron:#E8A11B;
  --slate:#5C6359;
  --muted:#666B61;
  --hair:#C9C3B1;
  --paper-on-dark:#EDE9DC;

  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --serif:'Source Serif 4',Georgia,serif;

  --gutter:clamp(20px,4vw,56px);
  --measure:70ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:19px;line-height:1.62;
  text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--forest)}
a:hover{color:var(--saffron)}
h1,h2,h3,h4{font-weight:400;letter-spacing:-.012em;margin:0}
figure{margin:0}
ul,ol{margin:0}

.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--gutter)}
.measure{max-width:calc(var(--measure) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.breakout{max-width:1080px;margin-inline:auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.kicker--saffron{color:#9a6a08}
.label{font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.rule-hand{color:var(--forest);display:block}
.rule-hand svg{display:block;width:100%;height:12px}

/* ---------- masthead ---------- */
.masthead{padding:38px 0 22px}
.masthead-in{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:end}
.brand{display:flex;align-items:flex-start;gap:clamp(12px,1.4vw,20px);text-decoration:none;color:var(--ink)}
.brand > svg{flex:none;width:auto;height:clamp(27px,4.5vw,55px);margin-top:clamp(2px,.55vw,6px)}
.brand-name{font-family:var(--display);font-weight:800;font-size:clamp(38px,6.2vw,76px);line-height:.88;letter-spacing:-.035em}
.brand-rule{display:block;margin-top:7px;width:min(560px,90%);height:10px;color:var(--saffron)}
.standing{margin:14px 0 0;font-size:15.5px;color:var(--slate);max-width:none}
@media (min-width:761px){.standing{white-space:nowrap}}
.mainnav{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);gap:9px 30px;justify-content:end}
.mainnav a{display:flex;align-items:center;gap:9px;white-space:nowrap;text-decoration:none;color:var(--ink);
  font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.mainnav a:hover{color:var(--forest)}
.mainnav a.is-current{color:var(--forest)}
.mainnav svg{flex:none;color:var(--forest)}
.mainnav .quiet{color:var(--slate)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--forest);color:var(--paper);padding:8px 12px;z-index:9}

/* ---------- lead band ---------- */
.lead-band{position:relative;margin-top:12px}
.lead-shot{position:relative;width:100%;aspect-ratio:16/7.6;overflow:hidden;background:var(--forest)}
.lead-shot img{width:100%;height:100%;object-fit:cover;object-position:50% 74%}
.lead-head{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:end;padding-top:clamp(38px,6vw,74px)}
.lead-head h1{font-size:clamp(30px,3.7vw,52px);line-height:1.08;max-width:22ch}
.lead-head h1 a{color:inherit;text-decoration:none}
.lead-head h1 a:hover{color:var(--forest)}
.lead-dek{margin:0 0 6px;color:var(--slate);font-size:18px}
.more{display:inline-block;margin-top:18px;font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:.05em;
  color:var(--forest);text-decoration:none;border-bottom:2px solid var(--saffron);padding-bottom:3px}
.more:hover{color:var(--ink)}

/* ---------- bands ---------- */
.band{padding:clamp(46px,6vw,86px) 0 0}
.band-tint{background:var(--paper-2);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);margin-top:clamp(46px,6vw,80px);padding-bottom:clamp(46px,6vw,74px)}
.band-tint .datatable thead th{background:var(--ink)}
.band-tint .fig--bracket .fig-frame{background:var(--paper)}
.band-plate{background:var(--forest);color:var(--paper);margin-top:clamp(40px,5vw,64px);padding:clamp(38px,5vw,58px) 0}
.band-plate .signature{margin:0;font-size:clamp(22px,2.6vw,31px);line-height:1.34;max-width:34ch}
.band-plate .signature b{font-weight:600;color:var(--saffron)}
.statrow--plate{margin:clamp(26px,3vw,40px) 0 0;gap:clamp(20px,2.6vw,38px);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.statrow--plate .statblock{border-top:2px solid rgba(245,241,230,.4);padding-top:16px}
.statrow--plate .stat-num{color:var(--saffron);font-size:clamp(40px,4.6vw,62px)}
.statrow--plate .stat-label{color:#CFE0D4;font-size:16px;max-width:30ch}
.plate-note{margin:clamp(24px,3vw,34px) 0 0;font-size:17px;color:#CFE0D4;max-width:66ch}
.plate-note a{color:var(--paper);border-bottom:2px solid var(--saffron);text-decoration:none;padding-bottom:2px}
.plate-note a:hover{color:var(--saffron);border-color:var(--paper)}
.band-dark{background:var(--ink);color:var(--paper-on-dark)}

.two-up{display:grid;grid-template-columns:minmax(0,540px) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
.two-up--flip{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
.two-up h2{font-size:clamp(26px,2.9vw,42px);line-height:1.14;max-width:24ch}
.two-up h2 a{color:inherit;text-decoration:none}
.two-up h2 a:hover{color:var(--forest)}
.two-up p{color:var(--slate);max-width:58ch}

.wide-figure-note{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:clamp(24px,3vw,48px);margin-top:24px;align-items:start}

.wide-figure-note h2{font-size:clamp(24px,2.4vw,36px);line-height:1.16;max-width:26ch}

/* ---------- map band ---------- */
.map-band{background:var(--forest);color:var(--paper);border-top:6px solid var(--saffron);border-bottom:6px solid var(--saffron);margin-top:clamp(50px,6vw,84px);padding-bottom:clamp(44px,5.5vw,72px)}
.map-band .kicker{color:#CFE0D4}
.map-band .art-kicker .kicker{color:#CFE0D4}
.map-band h2{color:var(--paper)}
.map-band .map-holder{background:var(--forest-deep);border:1px solid rgba(245,241,230,.28)}
.map-band .map-figure figcaption{color:#CFE0D4;max-width:52ch}
.map-band .place-list{border-top:2px solid var(--saffron)}
.map-band .place{border-bottom:1px solid rgba(245,241,230,.22)}
.map-band .place a{color:var(--paper)}
.map-band .pl-top svg{color:var(--saffron)}
.map-band .pl-region{color:#C3D9CB}
.map-band .pl-fact{color:#CFE0D4}
.map-band .place.is-on{background:var(--forest-deep)}
.map-band .place.is-on a,.map-band .place.is-on .pl-fact{color:var(--paper)}
.map-band .place.is-on .pl-name{color:var(--saffron)}
.map-band .place:hover{background:rgba(245,241,230,.06)}
.map-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:clamp(24px,3vw,52px);align-items:start}
.map-band .map-col .map-figure{width:100%;margin:0}
.map-band .map-col .map-figure svg{height:auto;width:100%;max-height:none}
.map-band .map-col .map-holder{width:100%;margin:0}
.place-list{list-style:none;margin:0;padding:0;border-top:2px solid var(--ink)}
.place{border-bottom:1px solid var(--hair)}
.place a{display:grid;gap:5px;padding:13px 6px;text-decoration:none;color:var(--ink)}
.pl-top{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pl-top svg{color:var(--forest);align-self:center}
.pl-name{font-family:var(--display);font-size:16px;font-weight:600;letter-spacing:.01em}
.pl-region{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.pl-fact{font-size:15.5px;line-height:1.45;color:var(--slate);max-width:52ch}
.place.is-on{background:var(--forest)}
.place.is-on a,.place.is-on .pl-fact{color:var(--paper)}
.place.is-on .pl-region{color:var(--saffron)}
.place.is-on .pl-top svg{color:var(--saffron)}
.pin-g.is-on .m-pin{fill:var(--paper)}
.pin-g.is-on .m-pin-ring{opacity:1;stroke-width:4}
.pin-g.is-on .m-lab{fill:var(--saffron)}
.map-figure a{cursor:pointer}

/* ---------- section index band ---------- */
.sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:24px;background:var(--hair);border:1px solid var(--hair)}
@media (min-width:761px){.sec-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1181px){.sec-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.sec-card{display:grid;grid-template-rows:auto auto 1fr auto;gap:12px;padding:26px 18px 28px;background:var(--paper);text-decoration:none;color:var(--ink)}
.sec-card svg{width:48px;height:48px;stroke-width:1.35;color:var(--forest)}
.sec-card:hover{background:var(--forest);color:var(--paper)}
.sec-card:hover svg{color:var(--saffron)}
.sc-label{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--forest)}
.sec-card:hover .sc-label{color:var(--saffron)}
.sc-title{font-size:17.5px;line-height:1.26}
.sc-count{align-self:end;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sec-card:hover .sc-count{color:#9DBFAD}
.sec-card--all{background:var(--paper-2)}

.sections-band{padding:clamp(46px,6vw,80px) 0 0}
.sections-list{list-style:none;padding:0;margin:26px 0 0;border-top:2px solid var(--ink)}
.sections-list li{border-bottom:1px solid var(--hair)}
.sections-list .s-thumb{width:150px;height:100px;object-fit:cover;grid-column:2;grid-row:1}
.sections-list a > svg{grid-column:1;grid-row:1}
.sections-list a{display:grid;grid-template-columns:34px 150px minmax(0,1fr) auto;gap:18px;align-items:baseline;
  padding:20px 4px;text-decoration:none;color:var(--ink);align-items:center}
.sections-list a:hover{background:rgba(20,84,58,.055)}
.sections-list svg{color:var(--forest);align-self:center}
.sections-list .s-title{grid-column:3;grid-row:1;font-size:clamp(19px,1.7vw,25px);line-height:1.25}
.sections-list .s-count{grid-column:4;grid-row:1;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);white-space:nowrap}

/* ---------- figures ---------- */
.article-figure{margin:0}
.article-figure img{width:100%;height:auto}
figcaption{font-size:16px;line-height:1.45;color:var(--slate);max-width:74ch}
figcaption .fig-credit,.fig-credit{display:block;margin-top:6px;font-family:var(--display);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* treatment 1 — mat: photograph sits on a forest card */
.fig--mat{background:var(--forest);color:var(--paper);padding:0}
.fig--mat img{width:100%}
.fig--mat figcaption{padding:clamp(18px,2vw,26px) clamp(20px,2.4vw,34px) clamp(20px,2.2vw,30px);max-width:74ch}
.fig--mat figcaption{color:#DCE8DF}
.fig--mat .fig-credit{color:#B7D3C2}

/* treatment 2 — bracket: hairline frame with saffron corner marks */
.fig--bracket{position:relative}
.fig--bracket .fig-frame{position:relative;border:1px solid var(--hair);padding:clamp(10px,1.1vw,16px);background:var(--paper-2)}
.fig--bracket .fig-frame::before,.fig--bracket .fig-frame::after{content:"";position:absolute;width:26px;height:26px;border:2.5px solid var(--saffron)}
.fig--bracket .fig-frame::before{left:-8px;top:-8px;border-right:0;border-bottom:0}
.fig--bracket .fig-frame::after{right:-8px;bottom:-8px;border-left:0;border-top:0}
.fig--bracket figcaption{margin-top:clamp(14px,1.6vw,20px);padding-left:clamp(14px,1.5vw,20px);border-left:3px solid var(--saffron);max-width:74ch}

/* treatment 3 — bleed: image breaks the measure, caption offset beneath */
.fig--bleed{margin:clamp(34px,5vw,60px) 0}
.fig--bleed img{aspect-ratio:16/9;object-fit:cover}
.fig--bleed figcaption{margin:16px auto 0;padding-inline:var(--gutter);max-width:1080px}

/* treatment 4 — inset: small, sits in the column with a rule under it */
.fig--inset{float:left;width:320px;max-width:46%;margin:10px clamp(22px,2.6vw,38px) 24px 0;padding:0 0 14px;border-bottom:3px solid var(--forest);background:var(--paper-2);box-shadow:0 0 0 1px var(--hair)}
.fig--inset img{width:100%}
.fig--inset figcaption{padding:14px 16px 0;font-size:15px;line-height:1.42;max-width:none}
.fig--inset .fig-credit{margin-top:8px;font-size:10.5px;letter-spacing:.09em}
.article-body h2,.article-body .plate,.breakout{clear:both}
.fig--inset figcaption{font-size:15px}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.gallery figure{display:flex;flex-direction:column;gap:10px}
.gallery img{aspect-ratio:3/2;object-fit:cover}

/* ---------- prose components ---------- */
.article-body{padding-block:clamp(28px,4vw,44px)}
.article-body p{margin:0 0 1.15em}
.article-body h2{font-size:clamp(24px,2.4vw,34px);line-height:1.2;margin:1.7em 0 .55em}
.article-body h2 .h2-mark{display:block;width:52px;height:8px;color:var(--saffron);margin-bottom:14px}
.article-body a{text-underline-offset:3px}
.lead,p.lead{font-size:clamp(21px,2vw,25px);line-height:1.42;color:var(--ink);margin:0 0 1.1em}
.pullquote{margin:clamp(28px,4vw,44px) 0;padding-left:22px;border-left:4px solid var(--saffron)}
.pullquote p{margin:0;font-size:clamp(22px,2.3vw,29px);line-height:1.3;color:var(--forest)}
.blockquote{margin:28px 0;padding:20px 24px;background:var(--paper-2);border-top:2px solid var(--forest)}
.blockquote p{margin:0;font-size:20px}
.blockquote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.callout{background:var(--forest);color:var(--paper);padding:24px 26px;margin:28px 0}
.callout p{margin:0;font-size:20px}
.note{font-size:17px;color:var(--slate);border-top:1px solid var(--hair);padding-top:12px}

.plate{margin:clamp(34px,4.6vw,58px) 0;padding:clamp(24px,3vw,36px);background:var(--paper-2);border-top:3px solid var(--forest)}
.plate > .kicker{display:block;margin-bottom:6px}
.plate h3{font-size:clamp(20px,2vw,27px);line-height:1.2;margin-bottom:20px}
.plate--dark{background:var(--forest);color:var(--paper);border-top-color:var(--saffron)}
.plate--dark .kicker{color:var(--saffron)}

.timeline{list-style:none;padding:0;margin:0;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:210px minmax(0,1fr);gap:22px;padding:15px 0;border-top:1px solid var(--hair);align-items:baseline}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.04em;color:var(--forest);text-transform:uppercase}
.t-what{font-size:18px}
.plate--dark .timeline li{border-color:rgba(245,241,230,.28)}
.plate--dark .t-when{color:var(--saffron)}

.keylist{margin:0;display:grid;gap:0}
.keylist > div{display:grid;grid-template-columns:minmax(160px,270px) minmax(0,1fr);gap:22px;padding:14px 0;border-top:1px solid var(--hair)}
.keylist > div:first-child{border-top:0}
.keylist dt{font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.01em}
.keylist dd{margin:0;font-size:17.5px;color:var(--slate)}
.keylist--compact{margin:22px 0 4px}
.keylist--compact > div{grid-template-columns:minmax(150px,220px) minmax(0,1fr);gap:18px;padding:11px 0}
.keylist--compact dt{font-size:14.5px}
.keylist--compact dd{font-size:16px}
.kl-alt{color:var(--forest);font-weight:600}
.kl-alt::before{content:"\2192";color:var(--saffron);margin:0 6px 0 2px}
.plainlist{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.plainlist li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;font-size:18px}
.plainlist li::before{content:"";width:11px;height:11px;margin-top:.5em;background:var(--saffron)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;margin:30px 0}
.statblock{border-top:2px solid var(--ink);padding-top:14px}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(38px,4.4vw,58px);line-height:1;color:var(--forest)}
.stat-label{display:block;margin-top:8px;font-size:16px;color:var(--slate)}

.versus,.datatable{width:100%;border-collapse:collapse;margin:26px 0;font-size:17.5px}
.versus th,.versus td,.datatable th,.datatable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--hair);vertical-align:top}
.versus thead th,.datatable thead th{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--paper);background:var(--forest);border-bottom:0}
.versus tbody th{font-family:var(--display);font-size:14px;font-weight:600;width:34%}
.datatable tbody tr:hover{background:rgba(20,84,58,.05)}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

.chart{margin:30px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart .c-bar{fill:var(--forest)}
.chart .c-bar-alt{fill:var(--saffron)}
.chart .c-axis{stroke:var(--hair);stroke-width:1}
.chart .c-line{fill:none;stroke:var(--forest);stroke-width:2.5}
.chart .c-lab{font-family:var(--display);font-size:12px;fill:var(--slate)}
.chart .c-val{font-family:var(--display);font-size:12.5px;font-weight:600;fill:var(--ink)}

.map-figure{width:max-content;max-width:100%;margin-inline:auto}
.map-figure figcaption{width:min-content;min-width:100%;max-width:100%}
.map-figure .map-holder{background:var(--forest);padding:clamp(14px,2vw,22px);width:max-content;max-width:100%;margin-inline:auto}
.map-figure svg{width:auto;height:min(86vh,820px);max-width:100%;display:block;margin-inline:auto}
.map-figure .m-land{fill:none;stroke:var(--paper);stroke-width:2.4;stroke-linejoin:round}
.map-figure .m-fill{fill:rgba(245,241,230,.07)}
.map-figure .m-pin{fill:var(--saffron)}
.map-figure .m-pin-ring{fill:none;stroke:var(--saffron);stroke-width:2;opacity:.6}
.map-figure .m-lab{font-family:var(--display);font-size:29px;font-weight:600;fill:var(--paper)}
.map-figure a:hover .m-pin{fill:var(--paper)}
.map-figure a:hover .m-lab{fill:var(--saffron)}
.map-figure figcaption{margin-top:16px}

/* ---------- cards / references ---------- */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin:28px 0}
.profile-card{display:flex;flex-direction:column;gap:10px;background:var(--paper-2);padding:20px;border-top:3px solid var(--forest)}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover}
.profile-card h3{font-size:22px}
.profile-card .p-role{margin:0;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--forest)}
.profile-card p{margin:0;font-size:17px;color:var(--slate)}
.profile-card .p-links{margin-top:auto;font-size:16px}
.profile-card .p-attr{font-size:13px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:24px 0}
.org-card{display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:center;text-decoration:none;color:var(--ink);
  border:1px solid var(--hair);padding:12px 14px;background:var(--paper)}
.org-card:hover{border-color:var(--forest)}
.org-card .org-logo{width:52px;height:52px;object-fit:contain;background:var(--ink)}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{display:block;font-family:var(--display);font-size:16px;font-weight:600;line-height:1.25}
.org-host{display:block;font-size:13.5px;color:var(--muted)}
.entity-ref{white-space:nowrap;text-decoration:none;border-bottom:1px solid var(--saffron)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0;border-top:2px solid var(--ink);margin:34px 0 0}
.further-grid a{display:block;padding:18px 20px 20px 0;border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink);font-size:20px;line-height:1.24}
.further-grid a:hover{color:var(--forest)}
.related-links{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:0}
.related-links li{border-top:1px solid var(--hair)}
.related-links a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;align-items:baseline;padding:15px 0;text-decoration:none;color:var(--ink);font-size:19px;line-height:1.28}
.related-links svg{color:var(--forest);align-self:center}
.related-links a:hover{color:var(--forest)}

/* ---------- article furniture ---------- */
.related-block{margin-top:clamp(26px,3.5vw,40px);padding-top:clamp(28px,3.5vw,42px);border-top:1px solid var(--hair)}
.rel-head{font-size:clamp(22px,2.2vw,28px);line-height:1.2;margin:4px 0 0}
.rel-more{margin:26px 0 0}
.plate h3{margin-top:0}

.art-head{padding-top:clamp(26px,4vw,46px)}
.art-kicker{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.art-kicker a{text-decoration:none}
.art-kicker > svg{color:var(--paper);background:var(--forest);padding:6px;box-sizing:content-box;flex:none}
.art-kicker .kicker{font-size:13px;letter-spacing:.16em;color:var(--ink)}
.art-kicker::after{content:"";flex:1 1 auto;min-width:24px;height:2px;background:var(--saffron)}
.band-plate .art-kicker > svg,.supporters .art-kicker > svg{background:var(--saffron);color:var(--ink)}
.art-head h1{font-size:clamp(30px,4.2vw,56px);line-height:1.06;letter-spacing:-.018em}
.art-meta{margin:22px 0 0;padding-top:14px;border-top:1px solid var(--hair);font-family:var(--display);font-size:14px;
  font-weight:400;letter-spacing:.01em;color:var(--slate)}
.art-meta a{font-weight:600;color:var(--forest);text-decoration:none;border-bottom:1px solid var(--saffron);padding-bottom:2px}
.art-meta a:hover{color:var(--ink)}
.art-end{display:block;width:26px;height:26px;margin:clamp(34px,4vw,52px) auto 0;color:var(--saffron)}

/* ---------- category / archive ---------- */
.cat-head{padding:clamp(30px,4vw,54px) 0 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,60px);align-items:end}
.cat-head h1{font-size:clamp(28px,3.6vw,50px);line-height:1.08;max-width:24ch}
.cat-list{list-style:none;padding:0;margin:0;border-top:2px solid var(--ink)}
.cat-list li{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(16px,3vw,40px);padding:22px 0;text-decoration:none;color:var(--ink)}
.cat-list a:hover{background:rgba(20,84,58,.055)}
.cat-list .c-title{font-size:clamp(20px,2vw,27px);line-height:1.2}
.cat-list .c-dek{margin:0;font-size:16.5px;color:var(--slate)}
.archive-group{margin-top:clamp(34px,4vw,54px)}
.archive-group h2{font-size:clamp(20px,2vw,26px);line-height:1.2;margin-bottom:6px}

/* ---------- supporters ---------- */
.supporters{margin-top:clamp(52px,6vw,84px);background:var(--ink);color:var(--paper-on-dark);border-top:6px solid var(--saffron);padding:clamp(34px,4vw,52px) 0 clamp(34px,4vw,48px)}
.supporters .kicker{color:var(--saffron)}
.sup-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:clamp(20px,4vw,56px);align-items:end;margin-bottom:30px}
.sup-intro h2{font-family:var(--serif);font-size:clamp(24px,2.6vw,34px);line-height:1.16;margin-top:8px}
.sup-intro p{margin:0;font-size:16.5px;color:#A9B0A6}
.sup-groups{display:grid;gap:clamp(30px,3.4vw,46px)}
.sup-group{display:grid;gap:18px}
.sup-slots{display:grid;grid-template-columns:repeat(auto-fit,300px);gap:18px;justify-content:start}
.sup-group h3{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron);
  padding-bottom:14px;border-bottom:2px solid rgba(232,161,27,.45)}
.sup-group h3::before{content:"";width:9px;height:9px;background:var(--saffron);flex:none}
.sponsor{display:grid;align-content:start;gap:0;width:300px;max-width:100%;padding:16px;border:1px solid rgba(237,233,220,.22);text-decoration:none;color:var(--paper-on-dark)}
.sponsor:hover{border-color:var(--saffron);background:rgba(232,161,27,.06)}
.sponsor img{width:100%;height:52px;object-fit:contain;object-position:left center;background:#0E120E;padding:8px 12px}
.sponsor .sponsor-name{display:block;margin-top:14px;font-family:var(--display);font-size:15px;font-weight:600;letter-spacing:.02em}
.sponsor .sponsor-blurb{display:block;margin-top:6px;font-size:15px;line-height:1.4;color:#A9B0A6}

/* ---------- footer ---------- */
.site-foot{background:var(--forest);color:var(--paper);border-top:6px solid var(--saffron);padding:clamp(38px,4.5vw,56px) 0}
.foot-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:clamp(24px,4vw,56px);align-items:start}
.foot-brand{font-family:var(--display);font-weight:800;font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.site-foot p{margin:12px 0 0;font-size:17px;color:#CFE0D4;max-width:52ch}
.footnav{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.footnav a{color:var(--paper);text-decoration:none;padding-bottom:5px;border-bottom:1px solid rgba(245,241,230,.28);font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.footnav a:hover{color:var(--saffron);border-color:var(--saffron)}
.footnav a.quiet{color:#CFE0D4}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .lead-head,.two-up,.wide-figure-note,.cat-head,.foot-in,.sup-intro,.map-layout{grid-template-columns:minmax(0,1fr)}
  .place-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));column-gap:clamp(20px,3vw,40px);border-top:0}
  .place-list .place{border-top:1px solid rgba(245,241,230,.22);border-bottom:0}
  .map-band .place-list .place{border-top:1px solid rgba(245,241,230,.22)}
  .pl-fact{max-width:none}
  .lead-head{gap:22px}
  .wide-figure-note{gap:20px}
  .cat-list a{grid-template-columns:minmax(0,1fr);gap:8px}
  .keylist > div,.timeline li{grid-template-columns:minmax(0,1fr);gap:4px}
  .t-when{margin-bottom:2px}
}
@media (max-width:760px){
  body{font-size:18px}
  .masthead-in{grid-template-columns:minmax(0,1fr);gap:22px}
  .mainnav{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:1fr 1fr;gap:2px 18px;justify-content:start}
  .mainnav a{min-height:44px;padding:6px 0}
  .footnav{gap:2px 24px}
  .footnav a{display:flex;align-items:center;min-height:44px}
  .sections-list a,.cat-list a,.place a,.related-links a{min-height:48px}
  .map-figure .m-lab{display:none}
  .map-figure .m-pin{r:38}
  .map-figure .m-pin-ring{r:60;stroke-width:6}
  .brand svg{width:40px;height:46px}
  .sections-list a{grid-template-columns:26px minmax(0,1fr);row-gap:10px}
  .sections-list .s-thumb{grid-column:1/-1;grid-row:1;width:100%;height:180px}
  .sections-list a > svg{grid-column:1;grid-row:2}
  .sections-list .s-title{grid-column:2;grid-row:2}
  .sections-list .s-count{grid-column:2;grid-row:3}
  .sections-list .s-count{grid-column:2}
  .fig--inset{float:none;width:100%;max-width:100%;margin:10px 0 24px}
  .fig--inset figcaption{padding:14px 18px 0;font-size:16px}
  .fig--inset .fig-credit{font-size:12px}
  .versus tbody th{width:auto}
  .sup-slots{grid-template-columns:minmax(0,1fr)}
  .sponsor{width:100%}
  .pl-region{font-size:12px}
  .fig-credit,figcaption .fig-credit{font-size:12px}
  .sc-label,.sc-count,.label{font-size:12px}
  .place-list{grid-template-columns:minmax(0,1fr)}
  .art-head h1{letter-spacing:-.01em}
}
@media (min-width:1280px){
  body{font-size:20px}
  .fig--inset{width:380px}
  .fig--inset figcaption{font-size:16px;padding:16px 20px 0}
  .fig--bleed figcaption,.fig--mat figcaption,.fig--bracket figcaption{display:flex;gap:clamp(28px,3vw,64px);align-items:flex-start;justify-content:space-between;max-width:none}
  .fig--bleed figcaption > .fig-credit,.fig--mat figcaption > .fig-credit,.fig--bracket figcaption > .fig-credit{margin-top:2px;flex:0 1 auto;max-width:32ch;text-align:right}
  .fig--bleed figcaption{border-top:1px solid var(--hair);padding-top:16px}
  .fig--mat figcaption{border-top:1px solid rgba(245,241,230,.3)}
  .fig--bracket figcaption{padding-top:2px}
  .fig--bleed figcaption,.fig--bracket figcaption{font-size:17px}
  .fig--mat figcaption{font-size:17px}
  :root{--measure:80ch}
  .breakout{max-width:1180px}
  .art-head h1{font-size:clamp(44px,4.4vw,64px)}
  .lead,p.lead{font-size:clamp(23px,2.1vw,28px)}
  .article-body h2{font-size:clamp(28px,2.5vw,38px)}
  .fig--bleed figcaption{max-width:1180px}
}
@media (min-width:1700px){
  body{font-size:21px}
  :root{--measure:86ch}
  .breakout{max-width:1320px}
  .art-head h1{font-size:72px}
  .fig--bleed figcaption{max-width:1320px}
}
@media print{
  .mainnav,.supporters{display:none}
  body{background:#fff}
}

/* 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-group h3{flex-wrap:wrap!important}
.sup-group h3 > .sponsor{flex:1 1 var(--sp-min,220px)!important;min-width:min(220px,100%)!important}
.sponsor:not(.lead-line){grid-column:span 1!important;grid-row:span 1!important}

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

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

/* sp-tile-fit: a slot fills its track, keeps a symmetric inset, and cannot be inflated
   by one long line of our copy. */
.sponsor.sponsor{width:100%!important;box-sizing:border-box!important;align-self:stretch!important;align-items:center!important;height:auto!important;min-height:0!important;overflow:hidden}
: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-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.cat-head{padding-inline:var(--gutter)}
  .wrap.band{padding-inline:var(--gutter)}
}

/* op-nav-collapse: this nav printed 182px of stacked links at 390 before any content
   (7 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (20px measured) the button carries the build's
   gutter (clamp(20px,4vw,56px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (940px here), where the button appears and the nav starts closed.
   Folded with the "height-clip" technique and marked with the "chevron" icon — the mechanism
   is deliberately not identical across the fleet either. */
.index-toggle{display:none}
@media (max-width:940px){
  .index-toggle{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .index-toggle-bars{width:8px;height:8px;flex:none;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .mainnav{height:0;overflow:hidden;visibility:hidden;padding-block:0;margin-block:0;border-top-width:0;border-bottom-width:0}
  .index-toggle-c:checked ~ .mainnav{height:auto;overflow:visible;visibility:visible;padding-block:revert;margin-block:revert;border-top-width:revert;border-bottom-width:revert}
  .wrap.masthead-in:has(> .index-toggle){display:flow-root}
  .index-toggle:not(:has(~ .mainnav)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2205px at 390, 19% of the whole page. Two columns bring it to
   1649px (25% shorter). Checked before writing: no new overflow, smallest mark still
   131px wide, longest blurb 6 lines, tile heights 229-296px.
   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-slots), 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-slots{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .sup-slots > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-slots > * *{min-width:0!important;max-width:100%}
    .sup-slots img,.sup-slots svg{max-width:100%;height:auto}
}

/* op-odd-tier-lead: .sup-slots (3 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sup-slots:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-page-overflow: the page scrolled sideways at 320 — span reached
   323px in a 320px screen (+3px), inside
   a.brand. Remedy: let the row wrap. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  a.brand{flex-wrap:wrap!important}
  span{min-width:0!important;max-width:100%!important}
}

/* op-hover-pad */
.cat-list a{padding-left:clamp(12px,3.5vw,22px)!important;padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-hover-pad */
.sections-list a{padding-right:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px){
  div.wrap.band{padding-left:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1440px) / 2)));padding-right:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1440px) / 2)))}
  div.wrap.cat-head{padding-left:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1440px) / 2)));padding-right:max(0px, calc(max(var(--gutter), 18px) - max(0px, (100vw - 1440px) / 2)))}
}
@media (min-width:901px) and (max-width:1099px){
  div.wrap.cat-head > div{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
  div.wrap.cat-head div.wrap.cat-head > div{padding-left:0;padding-right:0}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article > figure.article-figure.fig--bleed > img,
  div > figure.article-figure.fig--mat > img,
  div.article-body.measure > figure.article-figure.fig--inset > img,
  div.breakout > figure.article-figure.fig--mat > img,
  figure.article-figure.fig--bracket > div.fig-frame > img,
  section.lead-band > div.lead-shot > img){height:auto}
/* op-img-dims:end */
@media (min-width:728px) and (max-width:1439px){.sup-slots.sup-slots:has(> [data-partner]){grid-template-columns:repeat(auto-fill,minmax(min(300px,calc(50% - 9px)),1fr))!important;justify-content:stretch!important}.sup-slots.sup-slots > [data-partner]{width:auto!important;max-width:none!important}}

/* op-entity-wrap: long reference links wrap like the text around them (nowrap ran them off phone screens) */
.entity-ref.entity-ref{white-space:normal!important}
@media (min-width:640px) and (max-width:659px){.sup-slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}@media (min-width:740px) and (max-width:1019px){.sup-slots:has(> [data-partner]) > [data-partner]:nth-child(odd of [data-partner]):nth-last-child(1 of [data-partner]){grid-column:1/-1!important;flex-basis:100%!important;max-width:none!important}}[data-partner] img{background:transparent!important}