/* highcountryhorses.com — Heather and moss
   ground  #EDE6D6  paper the whole site sits on
   ink     #211E1A  body and headline colour
   accent  #6B3FA0  heather — kickers, numerals, rules, links
   area    #3F6A1E  moss — section grounds, panels, filled bands
   muted   #6A6355  captions, credits, secondary meta            */

:root{
  --ground:#EDE6D6;
  --ground-2:#DED5C2;
  --ink:#211E1A;
  --accent:#6B3FA0;
  --accent-soft:#B79BD8;
  --area:#3F6A1E;
  --area-ink:#F3EEE1;
  --area-soft:#D3DCC2;
  --muted:#6A6355;
  --body:#423C31;
  --rule:rgba(33,30,26,.22);
  --rule-strong:rgba(33,30,26,.42);
  --serif:"Petrona",Georgia,"Times New Roman",serif;
  --sans:"Familjen Grotesk","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(18px,5vw,80px);
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the parked off-canvas drawer only exists at phone widths, so the clip has no business at desktop. */
@media (max-width:900px){html,body{overflow-x:clip}}
body{
  margin:0;background:var(--ground);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(--accent);text-decoration:none}
a:hover{color:var(--area);text-decoration:underline;text-underline-offset:3px}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.04}
p{margin:0}
ul,ol{margin:0;padding:0}
figure{margin:0}
table{border-collapse:collapse;width:100%}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--gut)}
.wrap-narrow{max-width:940px;margin:0 auto;padding-inline:var(--gut)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hr{height:1px;background:var(--rule);border:0;margin:0}
.icon{width:1.35em;height:1.35em;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:44px;height:44px}

/* ── masthead ─────────────────────────────────────────── */
.masthead{background:var(--ground);border-bottom:4px solid var(--accent)}
.masthead .top{border-top:1px solid var(--rule);display:flex;align-items:flex-end;justify-content:space-between;gap:28px;padding:26px 0 20px;flex-wrap:wrap}
.brand{display:flex;align-items:flex-start;gap:20px;color:var(--ink)}
.brand:hover{text-decoration:none;color:var(--ink)}
.brand svg{flex:none;color:var(--accent);height:clamp(32px,5.6vw,62px);width:auto;margin-top:3px}
.brand-name{font-size:clamp(34px,6.4vw,72px);font-weight:800;line-height:.86;letter-spacing:-.03em}
.brand-domain{display:block;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:lowercase;color:var(--muted);padding-top:10px}
.mast-aside{font-family:var(--sans);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:6px;padding-bottom:6px;margin-left:auto}
.mast-aside a{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.mast-aside span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* nav: four sections, each opening a second level. no gap between item and panel */
.nav{border-top:1px solid var(--rule);position:relative}
.nav-row{display:flex;gap:clamp(14px,2.6vw,40px);flex-wrap:nowrap;justify-content:space-between}
.nav-item{position:relative}
.nav-link{display:flex;align-items:center;gap:11px;padding:19px 0 17px;font-family:var(--sans);font-size:clamp(15px,1.45vw,19px);font-weight:600;color:var(--ink);border-bottom:3px solid transparent;white-space:nowrap}
.nav-link .num{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--accent)}
.nav-link .icon{width:27px;height:27px;stroke-width:1.7;color:var(--accent)}
.nav-item:hover .nav-link,.nav-item:focus-within .nav-link{border-bottom-color:var(--accent);text-decoration:none}
.nav-panel{
  position:absolute;top:100%;left:-22px;z-index:40;width:268px;max-width:88vw;
  background:var(--ink);color:var(--ground);padding:20px 24px 22px;
  box-shadow:0 24px 44px rgba(33,30,26,.42);
  opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .12s,transform .12s;
}
.nav-item:hover .nav-panel,.nav-item:focus-within .nav-panel{opacity:1;visibility:visible;transform:none}
.nav-item::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.nav-panel h3{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.22;padding-bottom:10px;border-bottom:1px solid rgba(237,230,214,.3)}
.nav-panel a{display:block;font-family:var(--sans);font-size:14px;line-height:1.35;color:var(--ground);padding:8px 0;border-bottom:1px solid rgba(237,230,214,.13)}
.nav-panel a:hover{color:#fff}
.nav-panel .all{border-bottom:0;color:var(--accent-soft);font-weight:600;letter-spacing:.05em;text-transform:uppercase;font-size:12px;padding-top:12px}
.nav-item:nth-last-child(-n+2) .nav-panel{left:auto;right:-22px}
.nav-mobile{display:none}
.nav-mobile summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:14px 0;display:flex;align-items:center;gap:10px;border-top:1px solid var(--rule)}
.nav-mobile summary::-webkit-details-marker{display:none}
.nav-mobile[open] summary .chev{transform:rotate(180deg)}
.nav-mobile .m-sec{padding:4px 0 14px}
.nav-mobile .m-sec > a{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:16px;color:var(--ink);padding:8px 0}
.nav-mobile .m-sec ul{list-style:none;padding-left:32px}
.nav-mobile .m-sec li a{display:block;font-family:var(--sans);font-size:15px;color:var(--body);padding:6px 0;border-bottom:1px solid var(--rule)}

/* ── bands ────────────────────────────────────────────── */
.band{padding-block:clamp(46px,7vw,86px)}
.band-tight{padding-block:clamp(30px,4vw,52px)}
.band-area{background:var(--area);color:var(--area-ink);position:relative;overflow:hidden}
.band-mark{position:absolute;right:24px;top:8%;width:clamp(220px,26vw,380px);height:auto;fill:none;stroke:var(--area-ink);stroke-width:2.2;stroke-linecap:round;opacity:.16;pointer-events:none}
.band-rule{display:flex;align-items:center;gap:14px;padding-bottom:22px;border-bottom:1px solid rgba(243,238,225,.32);margin-bottom:26px}
.nailrow{display:flex;gap:9px;align-items:center}
.nailrow i{width:7px;height:7px;border-radius:50%;background:var(--area-soft);opacity:.85}
.band-sig{font-size:clamp(24px,3.4vw,40px);line-height:1.14;font-style:italic;font-weight:400;color:var(--ground);padding-bottom:34px;max-width:26em}
.stack-links.numbered a{display:flex;align-items:baseline;gap:14px}
.stack-links.numbered a::before{content:"";flex:none;width:9px;height:9px;border-radius:50%;background:var(--area-soft);transform:translateY(-4px)}
.stack-links.numbered a > .sub{padding-left:0}
.band-area a{color:var(--area-ink)}
.band-area .kicker{color:var(--area-soft)}
.band-ground2{background:var(--ground-2)}
.band-ink{background:var(--ink);color:var(--ground)}

/* lead: full-bleed photograph with a paper plate hung off it */
.lead-shot{position:relative}
.lead-shot img{width:100%;height:clamp(420px,58vw,760px);object-fit:cover}
.lead-shot::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(20,16,10,.5) 0 44%,rgba(20,16,10,0) 68%)}
.lead-over{position:absolute;left:0;right:0;bottom:clamp(26px,4vw,56px);z-index:2}
.lead-plate{background:var(--ground);padding:clamp(24px,3.4vw,42px);box-shadow:-14px 14px 0 var(--area);max-width:640px}
.hero-credit{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--muted);max-width:56ch;padding:16px 0 0}
.lead-plate h1{font-size:clamp(28px,4.2vw,48px)}
.lead-plate .dek{font-size:clamp(17px,1.5vw,19px);line-height:1.5;color:var(--body);padding-top:16px}
.more{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-top:20px}

/* one quiet line */
.signature{display:flex;align-items:flex-start;gap:26px}
.signature svg{flex:none;color:var(--area);margin-top:14px}
.signature p{font-size:clamp(21px,2.6vw,30px);line-height:1.3;font-style:italic}

/* section block on the homepage */
.sec-head{display:flex;align-items:flex-start;gap:16px}
.sec-head .n{font-size:clamp(46px,7vw,92px);font-weight:800;line-height:.78;color:var(--accent)}
.band-area .sec-head .n{color:var(--ground)}
.sec-head h2{font-size:clamp(28px,4vw,54px);max-width:14em}
.sec-blurb{font-size:19px;line-height:1.55;padding-top:18px;max-width:34em;color:var(--body)}
.band-area .sec-blurb{color:var(--area-soft)}
.split{display:grid;gap:clamp(28px,4vw,58px);align-items:start}
.split-58{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.split-even{grid-template-columns:minmax(0,1.45fr) 1px minmax(0,1fr)}
.vrule{background:var(--rule);width:1px;align-self:stretch}
.stack-links{display:flex;flex-direction:column}
.stack-links a{font-family:var(--serif);font-size:clamp(19px,2vw,25px);font-weight:700;line-height:1.18;color:var(--ink);padding:14px 0;border-top:1px solid var(--rule)}
.stack-links a:last-child{border-bottom:1px solid var(--rule)}
.band-area .stack-links a{color:var(--area-ink);border-color:rgba(243,238,225,.3)}
.stack-links .sub{display:block;font-family:var(--sans);font-size:15px;font-weight:400;line-height:1.4;color:var(--muted);padding-top:5px}
.band-area .stack-links .sub{color:var(--area-soft)}
.quiet-line{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;color:var(--ink)}
.quiet-line:hover{text-decoration:none}
.quiet-line .n{font-size:clamp(24px,3vw,32px);font-weight:800;color:var(--accent);line-height:1}
.quiet-line .t{font-size:clamp(24px,3.4vw,42px);font-weight:700;letter-spacing:-.02em;line-height:1.04}
.quiet-line .go{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── figure system: three treatments, one drawing system ── */
.fig-bleed img{width:100%;height:clamp(240px,38vw,460px);object-fit:cover}
.fig-bleed figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:14px var(--gut) 0}
.fig-mat{background:var(--ground-2);padding:20px;border:1px solid var(--rule-strong)}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{padding:18px 4px 4px}
.band-area .fig-mat{background:var(--area-ink);border-color:transparent}
.band-area .fig-mat figcaption{color:var(--body)}
.fig-inset{max-width:280px;border-left:4px solid var(--accent);padding-left:16px}
.fig-inset img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fig-inset figcaption{padding-top:11px}
.fig-chip{width:154px;flex:none;border:1px solid var(--rule-strong);position:relative}
.fig-chip img{width:100%;aspect-ratio:1/1;object-fit:cover}
.fig-chip .tag{position:absolute;top:-1px;left:-1px;background:var(--ink);color:var(--ground);font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 7px}
figcaption{font-family:var(--sans);font-size:15px;line-height:1.42;color:var(--ink)}
.band-area figcaption{color:var(--area-soft)}
.credit{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:6px}
.fig-bleed figcaption .credit{padding-top:0;white-space:nowrap;flex:none}
.band-area .credit{color:var(--area-soft);opacity:.8}

/* ── article ──────────────────────────────────────────── */
.art-head{padding-block:clamp(34px,4.5vw,56px) 0}
.art-kicker{display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#FBF8F1;padding:9px 16px 9px 13px;font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.art-kicker:hover{background:var(--area);color:#FBF8F1;text-decoration:none}
.art-kicker .icon{width:20px;height:20px;stroke-width:1.9}
.art-head h1{font-size:clamp(32px,5.4vw,68px);padding-top:16px;max-width:22em}
.art-meta{font-family:var(--sans);font-size:14px;letter-spacing:.04em;color:var(--muted);padding-top:18px}
.art-hero{padding-top:clamp(24px,3vw,40px)}
.art-hero img{width:100%;height:clamp(240px,44vw,540px);object-fit:cover}
.art-hero figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding-top:13px}
.art-hero figcaption .credit{padding-top:0;white-space:nowrap;flex:none}
.prose{max-width:var(--measure);font-size:19.5px;line-height:1.66;color:var(--ink)}
.prose > p + p{padding-top:20px}
.prose h2{font-size:clamp(24px,2.8vw,34px);padding:44px 0 4px;max-width:26em}
.prose h2 + p{padding-top:14px}
.prose a{border-bottom:1px solid var(--accent-soft)}
.prose a:hover{border-bottom-color:var(--area)}
.lead{font-family:var(--serif);font-size:clamp(20px,2.2vw,25px);line-height:1.44;color:var(--body);font-weight:400}
.art-body{padding-block:clamp(28px,3vw,40px) clamp(40px,6vw,72px)}
.art-body > *{margin-inline:auto;width:100%;max-width:var(--measure)}
.art-body > .full{max-width:1280px}
.art-body > .fig-bleed{max-width:none;margin-inline:0}
.art-figure{margin-block:36px}
.art-figure.mid{max-width:1080px}

/* notes-for-design material: interruptions, not a rail */
.notes-panel{background:var(--area);color:var(--area-ink);padding:clamp(24px,3vw,40px);margin-block:38px}
.notes-panel .kicker{color:var(--area-soft)}
.notes-panel h3{font-size:clamp(22px,2.4vw,30px);padding-top:8px}
.notes-panel-alt{background:var(--ground-2);color:var(--ink);border-top:4px solid var(--accent)}
.notes-panel-alt .kicker{color:var(--accent)}
.timeline{list-style:none;padding-top:22px;display:grid;gap:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr);gap:8px 24px;padding:13px 0;border-top:1px solid rgba(243,238,225,.28)}
.notes-panel-alt .timeline li{border-color:var(--rule)}
.timeline li:last-child{border-bottom:1px solid rgba(243,238,225,.28)}
.notes-panel-alt .timeline li:last-child{border-color:var(--rule)}
.t-when{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--area-soft)}
.notes-panel-alt .t-when{color:var(--accent)}
.t-what{font-size:17.5px;line-height:1.45}
.deflist{list-style:none;padding-top:20px;display:grid;gap:14px}
.deflist li{display:grid;gap:3px;padding-bottom:13px;border-bottom:1px solid rgba(243,238,225,.28)}
.notes-panel-alt .deflist li{border-color:var(--rule)}
.deflist .term{font-family:var(--sans);font-size:15.5px;font-weight:700;letter-spacing:.01em}
.deflist .def{font-size:17.5px;line-height:1.45}
.notes-panel .deflist .def{color:var(--area-soft)}
.notes-panel-alt .deflist .def{color:var(--body)}
.plainlist{list-style:none;padding-top:20px;display:grid;gap:11px}
.plainlist li{font-size:17.5px;line-height:1.45;padding-left:22px;position:relative}
.plainlist li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:2px;background:currentColor;opacity:.6}

/* components */
.pullquote{margin:38px 0;border-top:4px solid var(--accent);padding-top:22px}
.pullquote p{font-size:clamp(22px,2.6vw,30px);line-height:1.24;font-weight:700;letter-spacing:-.014em}
.blockquote{margin:32px 0;padding-left:24px;border-left:3px solid var(--area)}
.blockquote p{font-size:20px;line-height:1.5;font-style:italic}
.blockquote cite{display:block;font-family:var(--sans);font-size:14px;font-style:normal;color:var(--muted);padding-top:10px}
.callout{background:var(--ground-2);border-top:4px solid var(--area);padding:22px 24px;margin:32px 0}
.callout p{font-size:18.5px;line-height:1.5}
.note{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--body);background:rgba(107,63,160,.09);border-left:3px solid var(--accent);padding:14px 18px;margin:26px 0}
.datatable,.versus{font-family:var(--sans);font-size:15.5px;margin:30px 0}
.datatable th,.versus th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:left;padding:0 14px 10px 0;border-bottom:2px solid var(--ink);font-weight:700;vertical-align:bottom}
.datatable td,.versus td{padding:13px 14px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.datatable tbody tr td:first-child,.versus tbody tr td:first-child{font-weight:700}
.versus tbody tr td:first-child{font-family:var(--sans)}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;margin:30px 0;background:var(--rule)}
.statblock{background:var(--ground);padding:20px 18px;display:flex;flex-direction:column;gap:6px}
.notes-panel .statblock{background:rgba(0,0,0,.16)}
.stat-num{font-size:clamp(30px,4vw,44px);font-weight:800;line-height:1;color:var(--accent)}
.notes-panel .stat-num{color:var(--ground)}
.stat-label{font-family:var(--sans);font-size:14px;line-height:1.35;color:var(--muted)}
.notes-panel .stat-label{color:var(--area-soft)}
.chart{margin:30px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{padding-top:12px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:30px 0}
.gallery figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.gallery figcaption{padding-top:9px;font-size:14px}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(18px,2.4vw,32px)}
.card{display:flex;flex-direction:column;background:var(--ground);border-top:3px solid var(--accent);color:var(--ink);height:100%}
.card:hover{text-decoration:none}
.card:hover .c-title{color:var(--accent)}
.card img{width:100%;aspect-ratio:3/2;object-fit:cover}
.card-body{display:flex;flex-direction:column;gap:8px;padding:16px 0 18px;flex:1}
.c-title{font-size:21px;font-weight:700;line-height:1.16;min-height:2.32em}
.c-dek{font-family:var(--sans);font-size:15px;line-height:1.42;color:var(--body)}
.c-meta{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:auto;display:flex;align-items:center;gap:8px}
.cat-list{list-style:none;display:grid;gap:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:20px 0;color:var(--ink)}
.cat-list a:hover{text-decoration:none;background:rgba(107,63,160,.06)}
.cat-list .t{font-size:clamp(20px,2.2vw,27px);font-weight:700;line-height:1.16}
.cat-list a:hover .t{color:var(--accent)}
.cat-list .d{font-family:var(--sans);font-size:15.5px;line-height:1.45;color:var(--body);max-width:60ch}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:30px 0}
.profile-card{background:var(--ground-2);padding:20px;display:flex;flex-direction:column;gap:9px}
.profile-card .p-photo{width:76px;height:76px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:21px}
.p-role{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.profile-card p{font-size:16.5px;line-height:1.5;color:var(--body)}
.p-links,.p-attr{font-family:var(--sans);font-size:14px}
.p-attr{color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:28px 0}
.org-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px;align-items:center;background:var(--ground-2);padding:14px 16px;color:var(--ink)}
.org-card:hover{text-decoration:none;background:var(--accent);color:#fff}
.org-card:hover .org-host{color:rgba(255,255,255,.8)}
.org-logo{grid-row:span 2;width:44px;height:44px;object-fit:contain}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font-family:var(--sans);font-weight:700;font-size:16px;line-height:1.2}
.org-host{font-family:var(--sans);font-size:13px;color:var(--muted)}
.entity-ref{font-family:var(--sans);font-size:.94em;font-weight:600;white-space:nowrap}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--rule);margin:34px 0}
.further-grid a{background:var(--ground);padding:20px;font-size:20px;font-weight:700;line-height:1.18;color:var(--ink);display:flex;align-items:flex-start;gap:10px}
.further-grid a:hover{text-decoration:none;background:var(--area);color:var(--area-ink)}
.related-links{list-style:none;display:grid;gap:0}
.related-links li{border-top:1px solid var(--rule)}
.related-links li:last-child{border-bottom:1px solid var(--rule)}
.related-links a{display:flex;align-items:flex-start;gap:11px;padding:15px 0;font-size:19px;font-weight:700;line-height:1.2;color:var(--ink)}
.related-links a:hover{color:var(--accent);text-decoration:none}
.expander{margin-top:14px}
.expander summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);padding:12px 0}
.expander summary::-webkit-details-marker{display:none}

/* ── supporters: woven groups, identical self-contained tiles ── */
.supporters{padding-block:clamp(26px,3vw,40px)}
.sup-head{display:flex;align-items:baseline;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.sup-head h2{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.sup-head p{font-family:var(--sans);font-size:13px;color:var(--muted)}
.sup-grid{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:16px;padding-top:20px}
.sponsor{display:flex;flex-direction:column;gap:12px;min-width:0;background:var(--ground-2);padding:14px;color:var(--ink)}
.sponsor:hover{text-decoration:none;background:var(--accent-soft)}
.sponsor img{width:100%;height:48px;max-height:48px;object-fit:contain;background:var(--ink);padding:8px 12px}
.sponsor-name{font-family:var(--sans);font-size:13.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sponsor-blurb{font-family:var(--sans);font-size:13.5px;line-height:1.4;color:var(--body)}
.sponsor.feat{background:var(--ink);color:var(--ground)}
.sponsor.feat .sponsor-blurb{color:var(--area-soft)}
.sponsor.feat img{background:#000}
.sponsor.feat:hover{background:var(--area);color:var(--area-ink)}

/* ── footer ───────────────────────────────────────────── */
.foot{background:var(--ink);color:var(--ground);padding-block:clamp(38px,5vw,60px)}
.foot a{color:var(--ground)}
.foot-top{display:grid;grid-template-columns:minmax(220px,0.9fr) minmax(0,2.8fr);gap:clamp(26px,3vw,48px);align-items:start}
.foot-name{font-size:clamp(26px,3.4vw,36px);font-weight:800;line-height:.94;letter-spacing:-.028em}
.foot-say{font-size:16.5px;line-height:1.5;color:#B5AE9E;padding-top:16px;max-width:34em}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 26px;align-content:start}
.foot-cols h3{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft);padding-bottom:9px;display:flex;align-items:center;gap:7px}
.foot-cols ul{list-style:none;display:grid;gap:14px}
.foot-cols li{font-size:13.5px;line-height:1.28}
.foot-cols li a{font-family:var(--sans);font-size:13.5px;line-height:1.28;display:block}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(237,230,214,.2);margin-top:34px;padding-top:20px;font-family:var(--sans);font-size:13px;color:#9A9384}
.foot-base a{color:#9A9384}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1000px){
  .split-58,.split-even{grid-template-columns:minmax(0,1fr)}
  .split-even .vrule{display:none}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  body{font-size:18px}
  .nav-row{display:none}
  .nav-mobile{display:block}
  .nav{border-top:0}
  .lead-over{position:static;bottom:auto}
  .lead-plate{margin-top:-46px;box-shadow:-10px 10px 0 var(--area);max-width:none}
  .lead-shot::after{display:none}
  .fig-bleed figcaption{flex-direction:column;gap:6px}
  .art-body > .art-figure.mid{max-width:100%}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .fig-inset{max-width:none}
  .prose{font-size:18.5px}
}
@media (max-width:720px){
  .sup-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}
@media (max-width:420px){
  .sponsor img{height:44px;max-height:44px}
}
@media print{.nav,.supporters,.foot{display:none}}

/* ── diptych band ─────────────────────────────────────── */
.diptych{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
.dip{position:relative;min-height:600px;display:flex}
.dip-photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dip-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(24,20,14,.2) 0 32%,rgba(24,20,14,.62) 62%,rgba(24,20,14,.9))}
.dip-over,.dip-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-self:flex-end;padding:clamp(28px,3.6vw,54px);width:100%}
.dip-over{color:#F6F2E7;text-shadow:0 2px 14px rgba(12,9,5,.75),0 1px 2px rgba(12,9,5,.55)}
.dip-over .dip-list li{border-color:rgba(246,242,231,.34)}
.dip-ink{background:var(--ink);color:var(--ground)}
.dip-n{font-size:clamp(38px,4.6vw,62px);font-weight:800;line-height:.8;color:var(--accent-soft)}
.dip-kick{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-soft);padding-top:16px}
.dip h2{font-size:clamp(30px,3.6vw,46px);padding-top:8px}
.dip-lead{font-size:17.5px;line-height:1.52;padding-top:14px;max-width:36em;color:rgba(246,242,231,.8)}
.dip-list{list-style:none;padding-top:22px;display:grid;gap:0}
.dip-list li{border-top:1px solid rgba(246,242,231,.24)}
.dip-list li:last-child{border-bottom:1px solid rgba(246,242,231,.24)}
.dip-list a{display:flex;align-items:baseline;gap:13px;padding:13px 0;font-size:20px;font-weight:700;line-height:1.2;color:#F6F2E7}
.dip-list a::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent-soft);transform:translateY(-4px)}
.dip-list a:hover{color:var(--accent-soft);text-decoration:none}
.dip .more{color:var(--accent-soft)}
.dip-plate{padding-top:24px}
.dip-plate img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid rgba(246,242,231,.28)}
.dip-plate figcaption{font-family:var(--sans);font-size:14.5px;line-height:1.45;color:rgba(246,242,231,.74);padding-top:11px;max-width:46ch}
/* ── footer sections ─────────────────────────────────── */
.foot-sec{display:grid;gap:4px;padding:14px 0;border-top:1px solid rgba(237,230,214,.2)}
.foot-sec:hover{text-decoration:none}
.fs-name{font-size:21px;font-weight:700;line-height:1.16}
.foot-sec:hover .fs-name{color:var(--accent-soft)}
.fs-full{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-soft)}
.fs-blurb{font-family:var(--sans);font-size:14px;line-height:1.4;color:#9A9384}
.foot-all{grid-column:1/-1;padding-top:22px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:900px){.diptych{grid-template-columns:minmax(0,1fr)}.dip{min-height:0}.dip-photo{min-height:520px}}

/* ── article figure sizing inside the reading column ── */
.art-body > .fig-inset{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start;max-width:var(--measure);border-left:0;padding-left:0;border-top:1px solid var(--rule);padding-top:22px}
.art-body > .fig-inset img{width:250px;aspect-ratio:1/1}
.art-body > .fig-inset figcaption{padding-top:0;font-size:16px;line-height:1.5;border-left:4px solid var(--accent);padding-left:16px}
.art-body > .fig-bleed{max-width:min(1120px,100%);width:100%;margin:38px 0}
.art-body > .fig-bleed img{height:clamp(260px,40vw,520px)}
.art-body > .art-figure.mid{max-width:min(1080px,100%)}
.art-body > .notes-panel{max-width:min(1120px,100%)}
@media (max-width:640px){
  .art-body > .fig-inset{grid-template-columns:minmax(0,1fr)}
  .art-body > .fig-inset img{width:100%}
  .art-body > .fig-inset figcaption{border-left:0;border-top:3px solid var(--accent);padding:12px 0 0}
}
.art-body > h2{margin-inline:0}

/* article inset: a plate on the accent ground, distinct from the mat */
.art-body > .fig-inset{grid-template-columns:280px minmax(0,1fr);gap:26px;background:var(--area);color:var(--area-ink);padding:22px;border-top:0;align-items:center;margin-block:34px}
.art-body > .fig-inset img{width:280px;aspect-ratio:4/5;object-fit:cover}
.art-body > .fig-inset figcaption{border-left:0;padding:0;color:var(--area-ink)}
.art-body > .fig-inset figcaption::before{content:"Figure";display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--area-soft);padding-bottom:12px}
.art-body > .fig-inset figcaption{font-family:var(--serif);font-size:21px;line-height:1.36}
.art-body > .fig-inset .credit{color:var(--area-soft);opacity:.85;padding-top:14px}
/* bleed caption aligns with the article column, not the viewport gutter */
.art-body > .fig-bleed figcaption{max-width:none;margin:0;padding:14px 0 0}
@media (max-width:640px){
  .art-body > .fig-inset{grid-template-columns:minmax(0,1fr);gap:18px}
  .art-hero figcaption{flex-direction:column;gap:6px}
  .art-body > .fig-inset img{width:100%;aspect-ratio:3/2}
}

.art-body > .fig-inset{display:block;max-width:360px;margin:36px 0;background:none;padding:0;border:0}
.art-body > .fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover}
.art-body > .fig-inset figcaption{border-left:0;border-top:3px solid var(--area);padding:12px 0 0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.45}
.art-body > .fig-inset figcaption::before{content:none}
.art-body > .fig-inset .credit{color:var(--muted);opacity:1;padding-top:7px}
/* read-next */
.read-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2px;background:var(--rule);margin-top:16px}
.read-next li{border:0}
.read-next li:last-child{border:0}
.read-next a{display:flex;flex-direction:column;gap:0;background:var(--ground);padding:0 0 18px;height:100%}
.read-next a:hover{text-decoration:none}
.read-next img{width:100%;aspect-ratio:3/2;object-fit:cover}
.read-next .rl-sec{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding:14px 0 8px}
.read-next .rl-title{font-size:21px;font-weight:700;line-height:1.16;color:var(--ink)}
.read-next a:hover .rl-title{color:var(--accent)}
.read-next .rl-dek{font-family:var(--sans);font-size:14.5px;line-height:1.45;color:var(--body);padding-top:7px}
@media (max-width:640px){.art-body > .fig-inset{max-width:none}}

/* the small plate sits IN the column with prose wrapping beside it */
.art-body > .fig-inset{float:left;width:330px;max-width:46%;margin:10px 32px 24px 0;clear:left}
.art-body > h2,.art-body > .notes-panel,.art-body > .fig-bleed,.art-body > .art-figure.mid,.art-body > .pullquote{clear:both}
@media (max-width:640px){.art-body > .fig-inset{float:none;width:auto;max-width:none;margin:28px 0}}

/* the floated plate is a designed object */
.art-body > .fig-inset{background:var(--ground-2);border:1px solid var(--rule-strong);box-shadow:9px 9px 0 var(--area);padding:13px}
.art-body > .fig-inset img{aspect-ratio:4/3}
.art-body > .fig-inset figcaption{border-top:2px solid var(--accent);margin-top:12px;padding:11px 0 2px}
/* read-next: real padding inside each card, and air above the block */
.readnext-block{padding-top:40px;padding-bottom:70px}
.read-next{border-top:1px solid var(--rule)}
.read-next .rl-sec,.read-next .rl-title,.read-next .rl-dek{padding-left:18px;padding-right:18px}
.read-next a{padding-bottom:22px}
@media (max-width:640px){.art-body > .fig-inset{box-shadow:6px 6px 0 var(--area)}}
.read-next img + .rl-title{padding-top:16px}

/* read-next: real gaps, and only the title is bold */
.read-next{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:28px;background:none;padding-top:26px}
.read-next a{background:none;padding-bottom:0}
.read-next .rl-sec,.read-next .rl-title,.read-next .rl-dek{padding-left:0;padding-right:0}
.read-next .rl-dek{font-weight:400}
.read-next .rl-sec{font-weight:700}
.read-next img + .rl-title{padding-top:14px}
.read-next .rl-title{font-weight:700}

/* mobile tap targets ≥44px */
@media (max-width:820px){
  .nav-mobile .m-sec > a{padding:12px 0;min-height:48px}
  .nav-mobile .m-sec li a{padding:12px 0;min-height:46px;display:flex;align-items:center}
  .nav-mobile summary{min-height:52px}
  .mast-aside a{padding:6px 0;min-height:24px}
  .related-links a,.cat-list a{min-height:48px}
}

@media (max-width:480px){
  .sup-grid{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}
}

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

/* sp-mark-pad: the mark keeps the height Design declared AND the inset Design drew.
   border-box stops width:100%+padding overflowing the tile; the box grows by the
   vertical padding and border so the artwork is not shrunk to pay for the inset. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;height:64px!important;max-height:64px!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-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-narrow{padding-inline:var(--gut)}
}

/* op-lead-plate-paint-order: operator — "some purple text overlap". At phone widths Design
   tucks the lead plate over the photograph with `.lead-plate{margin-top:-46px}`, but the plate
   is static and comes after the image in the DOM, so the two paint in different layers: the
   image (a replaced inline element) covers the plate's BACKGROUND, while the plate's own text
   paints above it. Measured at 520: plate 633..874 with the image ending at 679, so the
   kicker at 657..678 sat on bare photograph with no ground behind it.
   Making the plate a positioned element puts its background in the same stacking context as
   its text, so the whole card covers the last 46px of the photo — which is the tuck Design
   drew. At 1440 the margin is 0 and nothing moves. */
/* ⚠️ scoped to phone widths on the operator's instruction: "We basically want to
     desktop grid design to stay as-is ... We are strictly re-working how mobile is
     displaying." the plate only overlaps the photo below 900, where Design pulls it up by -46px. */
@media (max-width:900px){.lead-plate{position:relative;z-index:1}}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1979px at 390, 24% of the whole page. Two columns bring it to
   1559px (21% shorter). Checked before writing: no new overflow, smallest mark still
   138px wide, longest blurb 3 lines, tile heights 165-185px.
   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.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sup-grid), 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-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:16px!important}
    .sup-grid > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sup-grid > * *{min-width:0!important;max-width:100%}
    .sup-grid img,.sup-grid svg{max-width:100%;height:auto}
  .sup-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sup-grid (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-grid:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-edge-gutter: copy sat against the screen edge at phone width — p.kicker, div.wrap-narrow > h1, p.lead — with no gutter at all
   (86 runs of text measured within 2px of the glass; 86 remain, in full-bleed
   elements that are set to the edge deliberately).
   ⚠️ THE 18px IS NOT MINE: it is the gutter this build already uses on its own full-width
   containers at the same width, taken as the median of them. Only the columns that TOUCH are
   padded — operator, on kaanet: "Only items needed padding are the ones touching edges of
   browsers ... Not globally." Phone widths only. */
@media (max-width:390px){
  p.kicker{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.wrap-narrow > h1{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  p.lead{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.prose > p{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
  div.prose > h2{padding-left:18px!important;padding-right:18px!important;box-sizing:border-box!important}
}

/* op-hover-pad */
.cat-list a{padding-left: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:681px) and (max-width:999px){
  div.prose{padding-left:max(var(--gut), 18px);padding-right:max(var(--gut), 18px)}
  div.wrap-narrow{padding-left:max(var(--gut), 18px) !important;padding-right:max(var(--gut), 18px) !important}
  div.wrap-narrow div.prose{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(div > figure.article-figure.fig-mat > img,
  div.art-body.prose > figure.art-figure.article-figure.fig-inset > img,
  div.art-body.prose > figure.art-figure.article-figure.fig-mat > img,
  div.art-body.prose > figure.fig-bleed > img,
  div.card-grid > a.card > img,
  div.dip-inner > figure.dip-plate > img,
  div.wrap > figure.art-hero > img,
  li > a > img,
  main > section.lead-shot > img,
  section > figure.fig-bleed > img,
  section.diptych > div.dip.dip-photo > img){height:auto}
/* op-img-dims:end */