/* carzonespecials.com — Most of the money goes on the outside
   Palette: 5 members, each with a job.
   --ground  bone paper, the page                        #EDE6D7
   --ink     near-black warm, all body type              #181510
   --accent  oxide red, SATURATED — bands, numerals, one headline word, masthead
   --secondary cobalt, SATURATED — the other area colour, hue far from oxide
   --stone   warm mid, mats and panels                   #D3C9B4
   --quiet   secondary type                              #6B6152                */

:root{
  --ground:#EDE6D7;
  --ink:#181510;
  --accent:#B92D0C;
  --secondary:#22378F;
  --on-ink:#E8734F;
  --ink-rule:#342F26;
  --ink-text:#D8D0BF;
  --ink-quiet:#A79E8C;
  --stone:#D3C9B4;
  --panel:#E4DCCA;
  --quiet:#6B6152;
  --rule:#C6BBA6;
  --pale:#AFBEF7;
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:Spectral,Georgia,serif;
  --gut:clamp(20px,4vw,48px);
  --measure:70ch;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.62;
  -webkit-font-smoothing:antialiased;text-wrap:pretty;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--secondary)}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-0.03em;line-height:1.02;margin:0;overflow-wrap:break-word}
h1{font-size:clamp(38px,6.4vw,88px);font-weight:800}
h2{font-size:clamp(28px,3.6vw,50px);font-weight:800}
h3{font-size:clamp(21px,2.1vw,28px);font-weight:700;letter-spacing:-0.02em}
p{margin:0 0 1.15em}
::selection{background:var(--accent);color:var(--ground)}
:focus-visible{outline:3px solid var(--secondary);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--ground);padding:10px 14px;z-index:99}

.kicker{
  font-family:var(--display);font-size:11px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--accent);
  display:flex;align-items:center;gap:9px;
}
.kicker svg{width:18px;height:18px;flex:0 0 18px}
.kicker--quiet{color:var(--quiet)}
.kicker--cobalt{color:var(--secondary)}
.eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--quiet);margin:0 0 18px}
.wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gut)}
.band{padding-block:clamp(48px,6vw,92px)}
.band--rule{border-top:1.5px solid var(--ink)}

/* ── masthead ─────────────────────────────────────────────────────────── */
.strip{
  display:flex;justify-content:space-between;align-items:center;gap:16px;
  padding:9px var(--gut);border-bottom:1px solid var(--rule);
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--quiet);
}
.strip nav{display:flex;gap:18px;flex-wrap:wrap}
.strip a{color:var(--quiet)}
.strip a:hover{color:var(--ink)}

.masthead{display:flex;align-items:stretch;border-bottom:2px solid var(--ink)}
.brand{
  flex:0 0 clamp(300px,33%,470px);display:flex;gap:20px;align-items:flex-start;
  background:var(--accent);color:var(--ground);padding:34px var(--gut) 30px;min-width:0;
}
.brand > span{display:block;min-width:0}
.brand:hover{color:var(--ground)}
.brand svg{flex:0 0 auto;color:var(--ground);width:clamp(62px,6.6vw,90px);height:auto;margin-top:6px;align-self:flex-start}
.brand-word{display:block;font-family:var(--display);font-weight:800;line-height:.82;letter-spacing:-.035em;font-size:clamp(34px,4.4vw,58px)}
.brand-word span{color:transparent;-webkit-text-stroke:1.5px var(--ground)}
.brand-line{display:block;font-family:var(--body);font-style:italic;font-size:14px;line-height:1.4;margin-top:13px;max-width:26ch;letter-spacing:0}

.menu{flex:1;display:flex;flex-direction:column;justify-content:flex-end;min-width:0}
.menu-bar{display:flex;align-items:stretch;flex:1;min-width:0}
.menu-item{position:relative;flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-left:1px solid var(--rule)}
.menu-item:first-child{border-left:0}
.menu-head{
  display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:space-between;
  gap:clamp(18px,2.4vw,34px);padding:clamp(24px,2.8vw,38px) clamp(16px,1.8vw,28px);
  font-family:var(--display);font-size:clamp(14px,1.45vw,18px);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;line-height:1.2;color:var(--ink);min-width:0;
  border-bottom:4px solid transparent;transition:background .18s ease,color .18s ease,border-color .18s ease;
}
.menu-head svg{width:clamp(38px,4.2vw,58px);height:auto;color:var(--accent);transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.menu-item:hover .menu-head,.menu-item:focus-within .menu-head{background:var(--panel);color:var(--accent);border-bottom-color:var(--accent)}
.menu-item:hover .menu-head svg,.menu-item:focus-within .menu-head svg{transform:translateY(-4px) scale(1.07)}

.menu-panel{
  position:absolute;left:-1px;top:100%;min-width:calc(100% + 2px);width:max-content;max-width:320px;
  background:var(--panel);border:1.5px solid var(--ink);border-top:0;
  opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .2s ease,transform .28s cubic-bezier(.2,.7,.3,1),visibility .2s;
  z-index:40;
}
.menu-item:hover .menu-panel,.menu-item:focus-within .menu-panel{opacity:1;visibility:visible;transform:translateY(0)}
.menu-panel::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.menu-panel ul{list-style:none;margin:0;padding:8px 0}
.menu-panel li{opacity:0;transform:translateY(-7px);transition:opacity .22s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.menu-item:hover .menu-panel li,.menu-item:focus-within .menu-panel li{opacity:1;transform:none}
.menu-panel li:nth-child(1){transition-delay:.05s}
.menu-panel li:nth-child(2){transition-delay:.09s}
.menu-panel li:nth-child(3){transition-delay:.13s}
.menu-panel li:nth-child(4){transition-delay:.17s}
.menu-panel li:nth-child(5){transition-delay:.21s}
.menu-panel li:nth-child(6){transition-delay:.25s}
.menu-panel a{display:block;padding:11px clamp(16px,1.6vw,22px);font-family:var(--display);font-size:16.5px;line-height:1.2;color:var(--ink)}
.menu-panel a:hover{background:var(--accent);color:var(--ground)}
.menu-panel .all a{
  margin-top:6px;border-top:1px solid var(--rule);padding-top:12px;
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--quiet);
}
.menu-panel .all a:hover{background:var(--ink);color:var(--ground)}
.menu details{display:none}

@media (prefers-reduced-motion:reduce){
  .menu-panel,.menu-panel li,.menu-head,.menu-head svg{transition:none}
  .menu-panel{transform:none}
  .menu-panel li{transform:none}
}

/* ── figure system: three treatments, one drawing system ──────────────── */
figure{margin:0}
figcaption{font-family:var(--body)}
.fig-k{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.fig-c{font-size:16.5px;line-height:1.45;margin:0}
.fig-cr{font-size:13px;line-height:1.4;color:var(--quiet);margin:7px 0 0;font-style:italic}

/* 1 — full-bleed band, caption on a plate that overlaps the image */
.fig-bleed{position:relative;background:var(--ink)}
.fig-bleed img{width:100%;height:clamp(320px,52vw,660px);object-fit:cover}
.fig-bleed figcaption{
  position:absolute;left:0;bottom:0;max-width:min(560px,86%);
  background:var(--ground);border-top:3px solid var(--accent);padding:18px 24px 16px;
}

/* 2 — mat: the photograph sits on a stone card inside an ink hairline */
.fig-mat{border:1.5px solid var(--ink);background:var(--panel);padding:10px}
.fig-mat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-mat figcaption{padding:13px 4px 2px}

/* 3 — inset: narrower, stepped out of the measure, cobalt rule on the caption */
.fig-inset{max-width:340px}
.fig-inset img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1.5px solid var(--ink)}
.fig-inset figcaption{border-left:3px solid var(--secondary);padding:4px 0 4px 13px;margin-top:12px}
.fig-inset .fig-k{color:var(--secondary)}

.article-figure{border:1.5px solid var(--ink);background:var(--panel);padding:12px;margin:44px 0}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{padding:13px 4px 2px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:30px 0}
.gallery figure{border:1.5px solid var(--ink);background:var(--panel);padding:8px}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{padding:9px 2px 0;font-size:14px;line-height:1.4}
.map-figure{border:1.5px solid var(--ink);padding:10px;background:var(--panel)}
.map-figure .map-slot{aspect-ratio:16/10;background:var(--stone)}

/* ── homepage bands ───────────────────────────────────────────────────── */
.opener{position:relative;border-bottom:1.5px solid var(--ink)}
.opener img{width:100%;height:clamp(420px,68vh,720px);object-fit:cover;display:block}
.opener-plate{
  position:absolute;left:0;bottom:0;max-width:min(880px,94%);
  background:var(--accent);color:var(--ground);padding:clamp(22px,3vw,38px) clamp(22px,3.4vw,46px);
}
.opener-plate h1{color:var(--ground)}
.opener-plate p{margin:16px 0 0;font-size:clamp(16px,1.5vw,21px);line-height:1.5;max-width:52ch}
.opener-plate .kicker{color:var(--ground);margin-bottom:14px}
.opener-cr{position:absolute;right:10px;top:10px;background:rgba(24,21,16,.72);color:#E9E2D6;font-family:var(--display);font-size:11px;padding:5px 9px}

.lead-piece{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:start}
.signature{font-family:var(--display);font-weight:800;letter-spacing:-.035em;line-height:1;font-size:clamp(32px,4.6vw,62px);margin:14px 0 22px}
.standfirst{font-size:clamp(18px,1.7vw,23px);line-height:1.5;color:#33301f;max-width:56ch}
.more{font-family:var(--display);font-size:16px;font-weight:700;border-bottom:2px solid var(--accent);padding-bottom:2px;display:inline-block}

.shout{background:var(--accent);color:var(--ground);padding-block:clamp(62px,8vw,126px);border-top:7px solid var(--ink);border-bottom:7px solid var(--ink);position:relative;overflow:hidden}
.shout .wrap{position:relative;z-index:1}
.shout-wheel{position:absolute;right:clamp(-120px,-4vw,-40px);top:50%;transform:translateY(-50%);width:min(460px,44vw);height:auto;color:rgba(237,230,215,.26);z-index:0;pointer-events:none}
.shout p{margin:0;font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.08;font-size:clamp(30px,4.7vw,66px);max-width:23ch}
.shout em{font-style:normal;color:var(--ink)}

.pair{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(28px,4vw,60px);align-items:start}
.pair-minor{padding-top:clamp(0px,3vw,64px)}

.sections-panel{background:var(--ink);color:var(--ink-text);padding-block:clamp(44px,5.5vw,84px)}
.sections-panel .eyebrow{color:#8F8676}
.sections-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.sections-list li{border-top:1px solid var(--ink-rule)}
.sections-list li:last-child{border-bottom:1px solid var(--ink-rule)}
.sections-list a{
  display:flex;align-items:center;gap:clamp(14px,2vw,30px);
  padding:clamp(16px,1.8vw,26px) 0;color:var(--ink-text);
}
.sections-list a:hover{color:var(--ground)}
.sections-list a:hover svg{color:var(--ground)}
.sections-list a:hover .s-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.sections-list svg{width:34px;height:34px;flex:0 0 34px;color:var(--on-ink)}
.s-no{font-family:var(--display);font-size:clamp(20px,2.4vw,34px);font-weight:800;color:var(--on-ink);flex:0 0 auto}
.s-name{font-family:var(--display);font-weight:700;letter-spacing:-.03em;line-height:1.05;font-size:clamp(21px,2.3vw,32px);flex:1 1 auto;min-width:0}
.s-blurb{font-size:15.5px;color:var(--ink-quiet);flex:0 0 24ch;line-height:1.4}


.run{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.run li{border-top:1px solid var(--rule)}
.run li:last-child{border-bottom:1px solid var(--rule)}
.run a{display:flex;gap:clamp(14px,2.4vw,36px);align-items:baseline;padding:22px 0;color:var(--ink)}
.run a:hover{color:var(--accent)}
.run-no{font-family:var(--display);font-size:14px;font-weight:700;color:var(--accent);flex:0 0 34px}
.run-title{font-family:var(--display);font-size:clamp(19px,1.9vw,26px);font-weight:700;letter-spacing:-.02em;flex:0 1 30ch;line-height:1.1}
.run-dek{font-size:16px;line-height:1.45;color:var(--quiet);flex:1 1 auto;margin:0}

/* ── article ──────────────────────────────────────────────────────────── */
.art-head{max-width:1120px;margin-inline:auto}
.art-head h1{margin:18px 0 22px}
.lead{font-size:clamp(19px,1.8vw,25px);line-height:1.46;font-weight:400;color:#33301f;max-width:60ch}
.prose{max-width:var(--measure);margin-inline:auto;font-size:19.5px;line-height:1.68;overflow-wrap:break-word}
.prose > .lifted,.prose > .article-figure,.prose > .pullquote,.prose > .callout,.prose > .blockquote{
  width:min(1120px,calc(100vw - 2 * var(--gut)));max-width:none;
  margin-left:50%;transform:translateX(-50%);
}
.prose h2{font-size:clamp(24px,2.6vw,34px);margin:44px 0 16px;letter-spacing:-.025em}
.prose h2::before{content:"";display:block;width:56px;height:3px;background:var(--accent);margin-bottom:14px}
.prose a{border-bottom:1px solid var(--stone)}
.prose a:hover{border-bottom-color:var(--secondary)}
.prose > :first-child{margin-top:0}

.pullquote{margin:44px 0;padding:0 0 0 32px;border-left:4px solid var(--accent)}
.pullquote p{margin:0;font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.16;font-size:clamp(24px,2.8vw,36px)}
.blockquote{margin:38px 0;padding:26px 30px;background:var(--panel);border-top:1.5px solid var(--ink)}
.blockquote p{margin:0 0 12px;font-size:20px;line-height:1.5}
.blockquote cite{font-family:var(--display);font-size:14px;font-style:normal;color:var(--quiet)}
.callout{margin:44px 0;background:var(--secondary);color:var(--ground);padding:clamp(22px,2.4vw,34px) clamp(24px,2.8vw,40px)}
.callout p{margin:0;font-size:19px;line-height:1.5}
.note{font-size:16px;line-height:1.5;color:var(--quiet);border-top:1px solid var(--rule);padding-top:12px}

/* notes-for-design material, lifted out of the flow as a full-width interruption */
.lifted{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:56px 0;padding:30px 0 10px}
.lifted-h{display:flex;align-items:baseline;gap:14px;margin-bottom:22px}
.lifted-h h3{font-size:clamp(19px,2vw,26px)}
.lifted-n{font-family:var(--display);font-size:13px;font-weight:700;color:var(--accent);flex:0 0 auto}
.lifted ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:0 clamp(30px,4vw,64px)}
.lifted li{padding:16px 0 19px;padding-right:clamp(0px,1.6vw,20px);border-top:1px solid var(--rule);font-size:17px;line-height:1.5;overflow-wrap:break-word;color:#2E2A20}
.lifted li strong{display:block;font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;line-height:1.35;color:var(--accent);margin-bottom:8px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:30px 0}
.statblock{border:1.5px solid var(--ink);padding:16px;background:var(--panel);display:flex;flex-direction:column;gap:6px}
.stat-num{font-family:var(--display);font-size:38px;font-weight:800;line-height:1;color:var(--accent)}
.stat-label{font-size:15px;line-height:1.35;color:var(--quiet)}

.versus,.datatable{width:100%;border-collapse:collapse;font-size:16.5px;margin:30px 0;border:1.5px solid var(--ink);font-family:var(--body)}
.versus th,.datatable th{background:var(--ink);color:var(--ground);font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;text-align:left;padding:11px 14px}
.versus td,.datatable td{padding:14px;border-top:1px solid var(--rule);vertical-align:top}
.versus tbody tr:nth-child(even),.datatable tbody tr:nth-child(even){background:var(--panel)}
.versus td:first-child{font-family:var(--display);font-weight:700}
.table-scroll{overflow-x:auto}

.timeline{list-style:none;margin:30px 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(140px,22ch) 1fr;gap:8px 24px;padding:14px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--display);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);line-height:1.3}
.t-what{font-size:16.5px;line-height:1.45}

.chart{margin:30px 0;border:1.5px solid var(--ink);background:var(--panel);padding:18px}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{margin-top:12px;font-size:14.5px;line-height:1.45;color:var(--quiet)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:30px 0}
.profile-card{border:1.5px solid var(--ink);background:var(--panel);padding:16px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--ink)}
.profile-card h3{font-size:21px}
.p-role{font-family:var(--display);font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent);margin:0}
.profile-card p{margin:0;font-size:16px;line-height:1.45}
.p-links{margin-top:auto!important;font-family:var(--display);font-size:14px}
.p-attr{font-size:13px;color:var(--quiet)}
.org-grid{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0}
.org-card{flex:0 0 240px;border:1.5px solid var(--ink);padding:12px;display:flex;flex-direction:column;gap:4px;color:var(--ink);background:var(--panel)}
.org-card:hover{border-color:var(--accent)}
.org-logo{height:30px;width:auto;object-fit:contain;margin-bottom:6px}
.org-name{font-family:var(--display);font-weight:700}
.org-host{font-size:13px;color:var(--quiet);word-break:break-word}
.entity-ref{font-family:var(--display);font-size:.94em;font-weight:600}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin:26px 0}
.further-grid a{border-top:3px solid var(--accent);padding:14px 0 0;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15;color:var(--ink);letter-spacing:-.02em}
.further-grid a:hover{color:var(--accent)}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.related-links a{display:block;border-top:3px solid var(--secondary);padding-top:13px;line-height:1.15;font-family:var(--display);font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink)}
.related-links a:hover{color:var(--secondary)}

.cat-list{list-style:none;margin:0;padding: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:34px minmax(0,26ch) 1fr;gap:clamp(12px,2vw,32px);align-items:baseline;padding:20px 0;color:var(--ink)}
.cat-list a:hover{color:var(--accent)}
.cat-list .n{font-family:var(--display);font-size:14px;font-weight:700;color:var(--accent)}
.cat-list .t{font-family:var(--display);font-size:clamp(18px,1.8vw,24px);font-weight:700;letter-spacing:-.02em;line-height:1.12}
.cat-list .d{font-size:16px;line-height:1.45;color:var(--quiet)}

/* CSS-only expander for long lists */
.expander{margin-top:14px}
.expander summary{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);cursor:pointer;padding:12px 0;border-top:1px solid var(--rule)}
.expander[open] summary{color:var(--quiet)}

/* ── supporters: a directory strip, footer furniture ─────────────────── */
.supporters{background:var(--ink);color:var(--ground);padding-block:clamp(32px,3.6vw,52px);border-top:2px solid var(--accent)}
.supporters .eyebrow{color:#8F8676}
.sup-head{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:baseline;margin-bottom:8px}
.sup-head h2{font-size:clamp(24px,2.6vw,34px)}
.sup-head p{margin:0;font-size:16px;color:#A79E8C;max-width:46ch}
.sup-group{margin-top:24px}
.sup-group .sponsor-list{border-bottom:1px solid var(--ink-rule)}
.sup-group > span{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8F8676;display:block;margin-bottom:4px}
.sponsor-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));grid-auto-rows:minmax(146px,auto);gap:0 clamp(24px,3.4vw,56px);align-content:start}
.sponsor{display:flex;flex-direction:column;padding:16px 16px 22px;margin-inline:-16px;border-top:1px solid var(--ink-rule);color:var(--ground)}

.sponsor:hover{color:var(--ground);background:#241F17}
.sponsor img{
  width:100%;max-width:none;height:48px;max-height:48px;
  object-fit:contain;object-position:left center;
  background:#0F0D0A;border:1px solid #342F26;padding:6px 10px;
}
.sponsor-name{font-family:var(--display);font-size:16px;font-weight:700;display:block;margin-top:14px;letter-spacing:-.01em;line-height:1.2}
.sponsor-blurb{display:block;margin-top:7px;min-width:200px;font-size:15px;line-height:1.45;color:var(--ink-quiet)}
.sponsor.feat img{border-color:var(--accent)}
.sponsor.feat .sponsor-name{color:#F6EFE3}

/* ── footer ───────────────────────────────────────────────────────────── */
.foot{background:var(--ink);color:#B6AD9B;padding-block:clamp(34px,4vw,56px);border-top:1px solid #342F26}
.foot-top{display:flex;flex-wrap:wrap;gap:12px clamp(28px,4vw,60px);align-items:baseline;margin-bottom:24px}
.foot-top p{margin:0;font-size:16px;max-width:44ch}
.foot-nav{display:flex;flex-wrap:wrap;border-top:1px solid var(--ink-rule)}
.foot-nav a{flex:1 1 200px;display:block;padding:15px 14px 15px 0;font-family:var(--display);font-size:15px;font-weight:700;line-height:1.2;color:var(--ink-text);border-bottom:1px solid var(--ink-rule)}
.foot-nav a:hover{color:var(--on-ink)}
.foot-min{display:flex;flex-wrap:wrap;gap:20px;margin-top:20px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.foot-min a{color:#8F8676}
.foot-min a:hover{color:var(--ink-text)}
.foot-word{font-family:var(--display);font-size:30px;font-weight:800;line-height:.9;letter-spacing:-.03em;color:var(--ground)}
.foot-word span{color:transparent;-webkit-text-stroke:1.4px var(--accent)}

.foot-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:24px}
.foot-cols h3{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:#8F8676;margin-bottom:10px}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;line-height:1.25}
.foot-cols a{display:block;color:#D8D0BF;font-family:var(--display);font-size:14.5px;line-height:1.25}
.foot-cols a:hover{color:var(--accent)}

/* ── responsive ───────────────────────────────────────────────────────── */
@media (max-width:1060px){
  .lead-piece,.pair{grid-template-columns:1fr}
  .pair-minor{padding-top:0}
  .fig-inset{max-width:none}
  .foot-grid{grid-template-columns:1fr}
}
@media (max-width:1100px){
  .masthead{flex-direction:column;border-bottom-width:1.5px}
  .brand{flex:0 0 auto;width:100%;padding-block:26px}
  .menu{flex:0 0 auto}
  .menu{padding:0;flex-direction:column;gap:0}
  .menu-bar{display:none}
  .menu-col{display:none}
  .menu details{display:block;border-bottom:1px solid var(--rule)}
  .menu details summary{
    display:flex;align-items:center;gap:10px;cursor:pointer;
    font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.04em;
    text-transform:uppercase;padding:15px var(--gut);
  }
  .menu details summary svg{width:18px;height:18px;flex:0 0 18px}
  .menu details[open] summary{color:var(--accent)}
  .menu details ul{list-style:none;margin:0;padding:0 var(--gut) 16px;display:flex;flex-direction:column;gap:11px}
  .menu details a{font-family:var(--display);font-size:16px;color:var(--ink);line-height:1.25}
  .sections-list a{flex-wrap:wrap}
  .s-blurb{flex:1 1 100%}
  .run a{flex-wrap:wrap}
  .run-title{flex:1 1 100%}
  .cat-list a{grid-template-columns:28px 1fr}
  .cat-list .d{grid-column:2}
  .timeline li{grid-template-columns:1fr}
  .opener-plate{position:static;max-width:none}
  .opener-cr{position:static;display:inline-block;margin:6px var(--gut)}
  .fig-bleed figcaption{position:static;max-width:none;border-top-width:3px}
}
@media (max-width:560px){
  body{font-size:18px}
  .prose{font-size:18.5px}
  .sponsor img{width:100%;height:52px}
  .lifted ul{grid-template-columns:1fr}
  .lifted{margin:36px 0;padding:22px 0 4px}
  .pullquote{margin:32px 0;padding-left:18px;border-left-width:3px}
  .blockquote{padding:20px}
  .article-figure{margin:30px 0;padding:8px}
  .fig-bleed figcaption{padding:16px var(--gut) 14px}
  .art-head h1{letter-spacing:-.02em}
  .trio-card h3{min-height:0}
  .prose h2{margin:34px 0 14px}
  .further-grid,.related-links{grid-template-columns:1fr}
  .foot-nav a{flex:1 1 100%}
  .duo-plate{margin-inline:14px}
  .opener img{height:clamp(300px,58vh,420px)}
}
@media print{
  .strip,.menu,.supporters{display:none}
  body{background:#fff}
}

/* ── flagship band ─────────────────────────────────────────────── */
.flagship{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.flagship-in{display:grid;grid-template-columns:1.02fr .98fr;padding:0;max-width:none}
.flagship-txt{position:relative;background:var(--panel);border-right:1.5px solid var(--ink);padding:clamp(28px,3.6vw,56px) clamp(24px,3.2vw,52px)}
.flag-no{position:absolute;right:18px;top:8px;font-family:var(--display);font-weight:800;line-height:.8;font-size:clamp(64px,7.6vw,124px);color:transparent;-webkit-text-stroke:1.5px var(--stone)}
.signature em{font-style:normal;color:var(--accent)}
.flag-draw{margin:26px 0 22px;color:var(--accent)}
.flag-draw svg{width:100%;max-width:360px;height:auto}
.flagship-fig{position:relative;min-height:420px}
.flagship-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.flagship-fig figcaption{position:absolute;left:0;bottom:0;max-width:min(92%,520px);background:var(--ground);border-top:3px solid var(--accent);padding:16px 20px 14px}

/* ── duo band ──────────────────────────────────────────────────── */
.duo{display:grid;grid-template-columns:1.5fr 1fr;border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink)}
.duo-major{position:relative;border-right:1.5px solid var(--ink);background:var(--ink)}
.duo-major img{width:100%;height:clamp(340px,42vw,540px);object-fit:cover;display:block}
.duo-plate{position:relative;background:var(--ground);border-top:3px solid var(--accent);padding:clamp(20px,2.6vw,36px);margin:clamp(-90px,-7vw,-56px) clamp(18px,2.6vw,40px) 0}

.duo-minor{background:var(--ink);color:var(--ink-text);padding:clamp(24px,3vw,44px)}
.duo-minor h3{color:var(--ground);margin:12px 0 14px}
.duo-minor .kicker{color:var(--on-ink)}
.duo-minor .more{color:var(--on-ink);border-bottom-color:var(--on-ink)}
.duo-no{display:block;font-family:var(--display);font-weight:800;line-height:.85;font-size:clamp(46px,5vw,86px);color:transparent;-webkit-text-stroke:1.5px #6E6556;margin-bottom:14px}
.duo-minor .fig-inset img{border-color:#4A4335}
.duo-minor .fig-inset figcaption{border-left-color:var(--on-ink)}
.duo-minor .fig-inset .fig-k{color:var(--on-ink)}
.duo-minor .fig-cr{color:#8F8676}

/* ── trio: three seconds, even height ──────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(20px,2.6vw,38px)}
.trio-card{display:flex;flex-direction:column;color:var(--ink);border-top:3px solid var(--accent);padding:19px 0 6px}
.trio-no{font-family:var(--display);font-size:13px;font-weight:700;color:var(--accent);letter-spacing:.1em}
.trio-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1.5px solid var(--ink);margin:16px 0 20px}
.trio-card h3{font-size:clamp(20px,1.9vw,25px);line-height:1.12;min-height:2.24em}
.trio-card p{margin:14px 0 0;font-size:16px;line-height:1.45;color:var(--quiet)}
.trio-card:hover h3{color:var(--accent)}

@media (max-width:1060px){
  .flagship-in,.duo{grid-template-columns:1fr}
  .flagship-txt{border-right:0;border-bottom:1.5px solid var(--ink)}
  .duo-major{border-right:0;border-bottom:1.5px solid var(--ink)}
  .flagship-fig{min-height:320px}
  .flagship-fig img{position:static;height:clamp(280px,52vw,420px)}
  .flagship-fig figcaption{position:static;max-width:none}
}

/* 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:62px!important;max-height:62px!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}


/* sp-plate-strip: the dark panel here is DESIGN'S OWN (background:#0F0D0A with a #342F26
   border), sitting inside a .supporters band Design already fills with var(--ink). The operator
   asked for it to go on this build: a dark box inside a dark band reads as a mistake rather than
   as framing. Design's mark height stands — my sp-mark-pad had pushed 48px to 62px to pay for
   padding that is no longer there. */
.sponsor img{background:transparent!important;border:0!important;padding:0!important;
             height:48px!important;max-height:48px!important}


/* op-nav-collapse: this nav printed 461px of stacked links at 390 before any content
   (40 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 "rule-flank", 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 (0px measured) the button carries the build's
   gutter (clamp(20px,4vw,48px)) 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 (860px here), where the button appears and the nav starts closed.
   Folded with the "display" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:860px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:auto;border:0;padding:10px 0;letter-spacing:.18em;margin-inline:clamp(20px,4vw,48px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .menu-switch::before,.menu-switch::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .menu-switch-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .menu{display:none}
  .menu-switch-c:checked ~ .menu{display:flex}
  .masthead:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .menu)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   2072px at 390, 24% of the whole page. Two columns bring it to
   1432px (31% shorter). Checked before writing: no new overflow, smallest mark still
   136px wide, longest blurb 3 lines, tile heights 188-211px.
   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 (.sponsor-list), 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){
  .sponsor-list{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:min(3.4vw,49px)!important}
    .sponsor-list > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-list > * *{min-width:0!important;max-width:100%}
    .sponsor-list img,.sponsor-list svg{max-width:100%;height:auto}
  .sponsor-list .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

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

/* op-article-width: the article column was capped at 683px (80 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through Design's own measure --measure (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.prose{--measure:min(89.026ch, 100%)!important}
}
@media (min-width:1600px){
  div.prose{--measure:min(clamp(89.026ch, 60.278vw, calc(89.026ch * 1.2)), 100%)!important}
  div.prose > :is(p:not([class])){font-size:clamp(19.5px,1.3542vw,23.4px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(aside.duo-minor > figure.fig-inset > img,
  div.flagship-in > figure.flagship-fig > img,
  div.prose > figure.article-figure > img,
  div.trio > a.trio-card > img,
  main > figure.fig-bleed > img,
  main > section.opener > img,
  section.duo > article.duo-major > img){height:auto}
/* op-img-dims:end */