/* gatortailgating.com — "Lot Light" (Style A)
   Palette roles: ground(paper/shade) · ink · accent(cobalt) · secondary(lot yellow) · label(brass) */
:root{
  --paper:#F4EFE6;
  --shade:#EDE6D8;
  --ink:#1C1B19;
  --accent:#1F4EC9;      /* saturated · hue ~226 · links, drawn measure, a full band */
  --heat:#F2C014;        /* saturated · hue ~47  · fills, chips, heat/sun in drawings */
  --brass:#B8860B;       /* labels on light ground */
  --body:#2C2924;
  --quiet:#5C574E;
  --credit:#6E6A62;
  --rule:#D9D0BE;
  --slot-bg:#E3DCCE;
  --measure:68ch;
  --pad:clamp(16px,3vw,40px);
  --band:clamp(34px,5vw,72px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--body);
  font:400 17.5px/1.65 Rubik,system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--brass)}
h1,h2,h3,h4{font-family:Anton,Impact,"Haettenschweiler",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:-0.004em;color:var(--ink);margin:0}
svg{display:block}
.ico{width:22px;height:22px;flex:none;stroke:currentColor;stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.ico-lg{width:34px;height:34px}
.wrap{padding-inline:var(--pad);max-width:1480px;margin-inline:auto}
.band{padding-block:var(--band)}
.band-dark{background:var(--ink);color:#E7E1D6}
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--paper)}
.band-shade{background:var(--shade)}
.eyebrow{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:9px}
.band-dark .eyebrow{color:var(--heat)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--heat);color:var(--ink);padding:8px 12px;z-index:99}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--ink);background:var(--paper)}
@media (min-width:1081px){.masthead{position:sticky;top:0;z-index:40}}
.mast-bar{background:var(--ink);color:var(--paper);display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;padding:12px var(--pad)}
.wordmark{display:flex;align-items:center;gap:13px;color:var(--paper)}
.wordmark:hover{color:var(--heat)}
.wordmark:hover span{color:var(--paper);border-bottom-color:var(--paper)}
.wordmark span{font-family:Anton,Impact,sans-serif;font-size:clamp(21px,2.7vw,28px);
  letter-spacing:.05em;text-transform:uppercase;line-height:1;color:var(--heat);
  border-bottom:3px solid rgba(242,192,20,.35);padding-bottom:3px}
.mast-note{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#9A9484;
  margin-right:auto}
.mast-links{display:flex;gap:10px;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase}
.mast-links a{color:var(--paper);border:1px solid rgba(244,239,230,.35);padding:9px 13px;
  display:flex;align-items:center;min-height:40px;line-height:1}
.mast-links a:hover{color:var(--ink);background:var(--heat);border-color:var(--heat)}
.mast-links a:first-child{background:var(--heat);border-color:var(--heat);color:var(--ink);font-weight:500}
.mast-links a:first-child:hover{background:var(--paper);border-color:var(--paper)}
.sectionbar{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));row-gap:2px;
  padding:8px var(--pad) 14px}
.sectionbar a{color:var(--ink);display:flex;gap:10px;align-items:flex-start;
  padding:10px 20px;border-left:1px solid var(--rule);min-height:48px}
.sectionbar a:nth-child(4n+1){border-left:0;padding-left:0}
.sectionbar a:hover{color:var(--accent)}
.sb-no{font-family:Anton,sans-serif;font-size:12px;color:var(--brass);padding-top:3px}
.sb-t{display:block;font-size:15px;font-weight:500;line-height:1.25}
.sb-g{display:block;font-size:12.5px;color:var(--quiet);letter-spacing:.02em}
.sectionbar .ico{width:20px;height:20px;margin-top:2px;color:var(--ink)}

/* ---------- hero ---------- */
.hero{background:var(--ink);position:relative}
.hero-frame{position:relative;height:min(74vh,720px);min-height:360px;background:var(--slot-bg)}
.hero-frame img{width:100%;height:100%;object-fit:cover}
.hero-corner{position:absolute;inset:0;pointer-events:none}
.hero-plate{position:relative;margin:-64px var(--pad) 0;max-width:840px;background:var(--paper);
  border-top:5px solid var(--heat);padding:clamp(20px,3vw,36px)}
.hero-plate h1{font-size:clamp(36px,6vw,84px);line-height:.94;margin:14px 0 0;text-wrap:balance}
.hero-plate p{font-size:19.5px;line-height:1.55;margin:16px 0 0;max-width:58ch;color:#3A362F;
  text-wrap:pretty}
.hero-credit{padding:12px var(--pad) 30px;font-size:13px;color:#8C877D;max-width:840px}

/* ---------- figures (three treatments + full-bleed) ---------- */
figure{margin:0}
.fig-mat{background:var(--ink);padding:clamp(12px,1.6vw,20px)}
.fig-mat .fig-img{background:var(--slot-bg)}
.fig-hair{border:1px solid var(--ink);padding:clamp(9px,1.2vw,14px);background:var(--shade)}
.fig-bare .fig-img{background:var(--slot-bg)}
.fig-img{position:relative;overflow:hidden}
.fig-img img{width:100%;height:100%;object-fit:cover}
.r-16-9{aspect-ratio:16/9}.r-8-5{aspect-ratio:8/5}.r-3-2{aspect-ratio:3/2}
.r-4-5{aspect-ratio:4/5}.r-1-1{aspect-ratio:1/1}.r-2-1{aspect-ratio:2/1}
figcaption{margin-top:12px;font-size:16.5px;line-height:1.45;color:var(--body)}
.cap-rule{padding-left:16px;border-left:2px solid var(--heat)}
.cap-num{display:grid;grid-template-columns:34px 1fr;gap:12px}
.cap-num .n{font-family:Anton,sans-serif;font-size:15px;color:var(--accent);padding-top:3px}
.cap-t{font-weight:500}
.credit{display:block;margin-top:7px;font-size:13px;color:var(--credit);font-weight:400}
.fig-chip{position:relative}
.fig-chip figcaption{position:absolute;left:0;bottom:0;transform:translateY(36%);
  background:var(--heat);color:var(--ink);padding:12px 18px;max-width:min(92%,420px);margin:0}
.fig-chip figcaption .credit{color:#5B4A08}
.fig-chip--ink figcaption{background:var(--ink);color:var(--paper)}
.fig-chip--ink figcaption .credit{color:#9A9484}

/* ---------- homepage bands ---------- */
.oneline{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.oneline .inner{display:flex;gap:clamp(16px,3vw,40px);align-items:flex-start}
.oneline p{font-family:Anton,Impact,sans-serif;text-transform:uppercase;
  font-size:clamp(23px,3.4vw,44px);line-height:1.12;margin:0;max-width:26ch;color:var(--ink)}
.oneline .ico{width:48px;height:48px;color:var(--accent);margin-top:6px}
.triptych{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:clamp(20px,3vw,40px)}
.triptych .stagger{padding-top:clamp(0px,4vw,56px)}
.plan-band{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(22px,4vw,56px);align-items:start}
.plan-stack{display:block}
.plan-stack .plan-copy h2{max-width:22ch}
.plan-stack .plan-copy p{max-width:60ch}
.plan-draw{margin-top:clamp(20px,2.6vw,34px);max-width:860px}
@media (min-width:900px){
  .plan-stack{display:grid;grid-template-columns:minmax(280px,.7fr) minmax(0,1.55fr);
    gap:clamp(26px,4vw,56px);align-items:center}
  .plan-stack .plan-copy h2{max-width:20ch}
  .plan-stack .plan-copy p{max-width:40ch}
  .plan-draw{margin-top:0;max-width:none}
}
.plan-draw svg{width:100%;height:auto}
.plan-band h2{font-size:clamp(26px,3.6vw,44px);line-height:1.05;margin:12px 0 0}
.plan-band p{margin:16px 0 0;max-width:46ch;color:#CFC8B9}
.plan-band svg{width:100%;height:auto;color:var(--paper)}
.accent-band{background:var(--accent);color:#EAF0FF}
.accent-band h2{color:#fff;font-size:clamp(24px,3.2vw,40px);line-height:1.06}
.accent-band .eyebrow{color:#FFE9A8}
.accent-band a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45)}
.accent-band a:hover{color:#FFE9A8}
.two-up{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(14px,2vw,26px)}
.lead-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(20px,3vw,44px);align-items:start}

/* ---------- section blocks / lists ---------- */
.sec-list{border-top:1px solid var(--rule)}
.sec-row{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.15fr);gap:18px;
  align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.sec-row:hover{background:var(--shade)}
.sec-row .ico{color:var(--ink);width:26px;height:26px}
.sec-row h3{font-size:clamp(18px,2vw,26px);line-height:1.05}
.sec-row .gloss{font-size:15.5px;color:var(--quiet)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:clamp(18px,2.4vw,32px)}
.card{display:flex;flex-direction:column;height:100%;color:var(--ink);
  border-top:3px solid var(--ink);padding-top:14px}
.card:hover{color:var(--accent)}
.card .fig-img{margin-bottom:12px}
.card h3{font-size:19px;line-height:1.15;min-height:2.3em}
.card p{font-size:15.5px;color:var(--quiet);margin:8px 0 0}
.card .kicker{margin-top:auto;padding-top:12px;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brass);display:flex;align-items:center;gap:8px}
.card .kicker .ico{width:18px;height:18px}
.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.cat-list li{border-bottom:1px solid var(--rule)}
.cat-list a{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(12px,2vw,28px);
  padding:16px 0;color:var(--ink);align-items:baseline;min-height:44px}
.cat-list a:hover{background:var(--shade);color:var(--accent)}
.cat-list .t{font-family:Anton,sans-serif;text-transform:uppercase;font-size:20px;line-height:1.1}
.cat-list .d{font-size:15.5px;color:var(--quiet)}

/* ---------- article ---------- */
.art-head{padding-top:clamp(22px,3.4vw,46px)}
.art-kicker{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}
.art-kicker a{color:var(--brass)}
.art-head h1{font-size:clamp(32px,5.4vw,74px);line-height:.96;margin:14px 0 0;text-wrap:balance;
  max-width:24ch}
.lead{font-size:20.5px;line-height:1.5;max-width:52ch;margin:18px 0 0;color:#3A362F;
  text-wrap:pretty;font-weight:400}
.art-meta{margin-top:16px;font-size:14px;color:var(--quiet);display:flex;flex-wrap:wrap;gap:8px 18px;
  border-top:1px solid var(--rule);padding-top:12px;max-width:52ch}
.prose{max-width:var(--measure);font-size:18px;line-height:1.68;color:#26241F}
.prose p{margin:0 0 20px}
.prose h2{font-size:clamp(21px,2.6vw,31px);line-height:1.12;margin:34px 0 12px}
.prose h3{font-size:19px;margin:26px 0 10px}
.prose ul,.prose ol{margin:0 0 20px;padding-left:22px}
.prose li{margin-bottom:8px}
.prose a{border-bottom:1px solid rgba(31,78,201,.35)}
.fig-inline{margin:6px 0 26px}
.fig-wide{margin:8px 0 30px}
.pullquote{margin:26px 0 30px;max-width:34ch;border-top:4px solid var(--heat);padding-top:14px}
.pullquote p{font-family:Anton,Impact,sans-serif;text-transform:uppercase;font-size:clamp(21px,2.6vw,32px);
  line-height:1.12;color:var(--ink);margin:0}
.blockquote{margin:26px 0;padding-left:20px;border-left:3px solid var(--accent);max-width:52ch}
.blockquote p{font-size:19px;line-height:1.5;margin:0}
.blockquote cite{display:block;margin-top:10px;font-size:14px;color:var(--quiet);font-style:normal}
.callout{margin:26px 0;background:var(--shade);border-top:4px solid var(--accent);
  padding:clamp(16px,2vw,24px);max-width:56ch}
.callout p{margin:0;font-size:17.5px}
.note{font-size:15.5px;color:var(--quiet);border-left:2px solid var(--rule);padding-left:14px;
  max-width:56ch}

/* notes-for-design bands */
.ledger{margin:34px 0 34px}
.ledger h2{font-size:clamp(20px,2.4vw,28px);margin:0 0 4px}
.ledger .eyebrow{margin-bottom:12px}
.ledger ol{list-style:none;margin:0;padding:0;counter-reset:led}
.ledger li{counter-increment:led;display:grid;grid-template-columns:46px minmax(0,1fr);
  gap:14px;padding:13px 0;border-top:1px solid rgba(230,225,214,.25);align-items:baseline}
.ledger li::before{content:counter(led,decimal-leading-zero);font-family:Anton,sans-serif;
  font-size:16px;color:var(--heat)}
.ledger li:last-child{border-bottom:1px solid rgba(230,225,214,.25)}
.ledger .lw{font-weight:500;color:var(--paper)}
.ledger .ld{color:#CFC8B9}
.panel{margin:32px 0;background:var(--shade);padding:clamp(16px,2.4vw,28px);
  border-top:5px solid var(--heat)}
.panel h2{font-size:clamp(19px,2.2vw,26px);margin:0 0 12px}
.panel ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 26px}
.panel li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:16.5px;line-height:1.45}
.panel li::before{content:"";width:9px;height:9px;background:var(--accent);margin-top:9px}
.panel li b{font-weight:600}
.related{border-top:1px solid var(--ink);margin-top:8px}
.related-links{list-style:none;margin:0;padding:0}
.related-links li{border-bottom:1px solid var(--rule)}
.related-links a{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1.2fr);gap:16px;
  padding:14px 0;color:var(--ink);align-items:baseline;min-height:44px}
.related-links a:hover{color:var(--accent)}
.related-links .t{font-family:Anton,sans-serif;text-transform:uppercase;font-size:19px}
.related-links .d{font-size:15px;color:var(--quiet)}
.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.further-grid a{display:block;border-top:3px solid var(--ink);padding-top:12px;color:var(--ink);
  font-family:Anton,sans-serif;text-transform:uppercase;font-size:18px;line-height:1.15}
.further-grid a:hover{color:var(--accent)}

/* data components */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:26px 0}
.statblock{border-top:3px solid var(--heat);padding-top:10px}
.stat-num{display:block;font-family:Anton,sans-serif;font-size:clamp(30px,4vw,46px);line-height:1;
  color:var(--ink)}
.stat-label{display:block;margin-top:6px;font-size:14.5px;color:var(--quiet)}
table{border-collapse:collapse;width:100%;font-size:16.5px}
.versus,.datatable{margin:26px 0;display:block;overflow-x:auto}
.versus table,.datatable table{min-width:520px}
.versus th,.datatable th{text-align:left;font-family:Anton,sans-serif;text-transform:uppercase;
  font-weight:400;font-size:15px;letter-spacing:.04em;color:var(--ink);
  border-bottom:2px solid var(--ink);padding:10px 12px 8px}
.versus td,.datatable td{border-bottom:1px solid var(--rule);padding:11px 12px;vertical-align:top}
.versus tbody tr:hover,.datatable tbody tr:hover{background:var(--shade)}
.timeline{list-style:none;margin:26px 0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,190px) minmax(0,1fr);gap:8px 20px;
  padding:13px 0;border-top:1px solid var(--rule)}
.timeline li:last-child{border-bottom:1px solid var(--rule)}
.t-when{font-family:Anton,sans-serif;text-transform:uppercase;font-size:16px;color:var(--accent);
  line-height:1.2}
.t-what{color:var(--body)}
.chart{margin:26px 0}
.chart svg{width:100%;height:auto;color:var(--ink)}
.chart figcaption{font-size:15px;color:var(--quiet);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:26px 0}

/* cards / references */
.profile-grid,.org-grid{display:grid;gap:16px;margin:26px 0;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.profile-card{border-top:3px solid var(--ink);padding-top:14px}
.profile-card .p-photo{width:84px;height:84px;object-fit:cover;background:var(--slot-bg);
  margin-bottom:12px}
.profile-card h3{font-size:19px}
.p-role{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin:6px 0 8px}
.profile-card p{font-size:16px;margin:0 0 8px}
.p-links a{font-size:15px}
.p-attr{font-size:13px;color:var(--credit)}
.org-card{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:center;
  border:1px solid var(--rule);padding:12px;color:var(--ink)}
.org-card:hover{border-color:var(--accent)}
.org-logo{width:56px;height:36px;object-fit:contain;background:var(--ink)}
.org-name{font-weight:600;font-size:16px;display:block}
.org-host{font-size:13.5px;color:var(--quiet)}
.entity-ref{white-space:nowrap}

/* ---------- supporters (12 slots, one block, vertical directory) ---------- */
.supporters{border-top:1px solid var(--rule)}
.supporters h2{font-size:clamp(22px,2.8vw,32px)}
.sponsor-list{margin-top:16px;border-top:1px solid var(--rule)}
.sponsor{display:grid;grid-template-columns:260px minmax(200px,1fr);gap:clamp(14px,2.4vw,34px);
  align-items:center;padding:16px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.sponsor:hover{background:var(--shade)}
.sponsor img{width:260px;height:72px;background:var(--ink);object-fit:contain;padding:12px 16px}
.sponsor-name{font-weight:600;font-size:16.5px;display:block}
.sponsor-blurb{display:block;font-size:15.5px;color:var(--quiet);margin-top:4px}
.supporters .foot{margin-top:14px;font-size:13.5px;color:var(--credit)}

/* ---------- footer ---------- */
.site-foot{background:var(--ink);color:#9A9484;padding:clamp(26px,4vw,52px) var(--pad);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px;font-size:14.5px}
.site-foot a{color:#CFC8B9;display:block;padding:4px 0}
.site-foot a:hover{color:var(--heat)}
.site-foot .fm{font-family:Anton,sans-serif;font-size:20px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper)}
.foot-cols{display:flex;flex-direction:column}

/* ---------- expander (CSS-only) ---------- */
.more{margin-top:12px}
.more>summary{cursor:pointer;font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);list-style:none;padding:10px 0;min-height:44px;display:flex;align-items:center;gap:8px}
.more>summary::-webkit-details-marker{display:none}
.more[open]>summary .lbl-c{display:inline}
.more[open]>summary .lbl-o{display:none}
.more>summary .lbl-c{display:none}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .sectionbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sectionbar a{border-left:0;padding-left:0;border-bottom:1px solid var(--rule)}
  .sectionbar a:nth-child(2n){padding-left:20px;border-left:1px solid var(--rule)}
  .two-up{grid-template-columns:1fr}
  .sponsor{grid-template-columns:240px minmax(200px,1fr)}
  .sponsor img{width:240px}
}
@media (max-width:720px){
  body{font-size:17px}
  .sectionbar{grid-template-columns:1fr}
  .sectionbar a,.sectionbar a:nth-child(2n){padding-left:0;border-left:0}
  .hero-frame{height:56vh;min-height:300px}
  .hero-plate{margin-top:-40px}
  .sec-row{grid-template-columns:30px minmax(0,1fr);row-gap:6px}
  .sec-row .gloss{grid-column:1/-1}
  .cat-list a,.related-links a{grid-template-columns:1fr;row-gap:6px}
  .related-links a{grid-template-columns:1fr}
  .fig-chip figcaption{position:static;transform:none;max-width:none;margin-top:12px}
  .timeline li{grid-template-columns:1fr}
  .sponsor{grid-template-columns:1fr;row-gap:12px}
  .sponsor img{width:100%;max-width:340px;height:64px}
  .prose{font-size:17.5px}
}
@media print{
  .masthead,.supporters,.site-foot{display:none}
  body{background:#fff}
}

/* ---------- styleguide / component extras ---------- */
.sponsor-txt{display:block;min-width:200px}
.sponsor img{max-height:72px}
.article-figure{margin:26px 0}
.article-figure img{width:100%;background:var(--slot-bg)}
.article-figure figcaption{margin-top:12px;padding-left:16px;border-left:2px solid var(--heat)}
.gallery figure img{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--slot-bg)}
.gallery figcaption{font-size:14.5px;margin-top:8px}
.profile-card.no-photo{border-top-color:var(--accent)}
.org-card.no-logo{grid-template-columns:1fr}
.sg-h{border-top:2px solid var(--ink);margin:44px 0 18px;padding-top:10px;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap}
.sg-h h2{font-size:clamp(20px,2.4vw,28px)}
.sg-h code{font-size:13px;color:var(--quiet);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.sg-note{font-size:14.5px;color:var(--quiet);max-width:70ch}
.swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.swatch b{display:block;height:74px;border:1px solid var(--rule)}
.swatch span{display:block;font-size:14px;margin-top:8px}
.swatch em{display:block;font-size:13px;color:var(--quiet);font-style:normal}
.iconrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:18px 0}
.iconrow div{display:flex;align-items:center;gap:10px;font-size:14.5px}

/* figure width instruments: full-wrap (default) · column · full-bleed · small inset */
.fig-col{max-width:calc(68ch + 2 * var(--pad))}
.fig-bleed{max-width:none;padding-inline:0}
.fig-bleed figcaption{padding-inline:var(--pad)}
.fig-inset{max-width:min(430px,100%)}
.fig-inset figcaption{font-size:15.5px}
@media (max-width:720px){.fig-inset{max-width:100%}}

/* eight-sections icon grid */
.sec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
.sec-cell{display:flex;flex-direction:column;gap:8px;background:var(--shade);color:var(--ink);
  padding:clamp(18px,2.2vw,26px) clamp(14px,1.8vw,20px);min-height:170px}
.sec-cell:hover{background:var(--paper);color:var(--accent)}
.sec-cell .sc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sec-cell .ico{width:54px;height:54px;stroke-width:1.25;color:var(--ink)}
.sec-cell:hover .ico{color:var(--accent)}
.sec-cell .sc-no{font-family:Anton,sans-serif;font-size:15px;letter-spacing:.06em;color:var(--brass)}
.sec-cell h3{font-size:16.5px;line-height:1.12;margin-top:4px}
.sec-cell .gloss{font-size:13.5px;line-height:1.4;color:var(--quiet);margin-top:auto}
@media (max-width:520px){.sec-cell{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px 14px}
 .sec-cell .sc-top{flex-direction:column;gap:4px}.sec-cell .ico{width:40px;height:40px}
 .sec-cell h3{flex:1 1 60%}.sec-cell .gloss{flex:1 1 100%;margin-top:0}}

/* ---------- article typography: numbered sections, numbered figures, opener ---------- */
article{counter-reset:sec fig}
.prose h2{border-top:1px solid var(--rule);padding-top:18px;margin-top:40px}
.prose h2::before{counter-increment:sec;content:"\00a7 " counter(sec,decimal-leading-zero);
  display:block;font-family:Rubik,sans-serif;font-weight:500;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--brass);margin-bottom:9px}
article .prose-open>h2:first-child{border-top:0;padding-top:0;margin-top:0}
article figcaption::before{counter-increment:fig;content:"Fig. " counter(fig,decimal-leading-zero);
  display:block;font-family:Rubik,sans-serif;font-weight:500;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass);margin-bottom:7px}
article .fig-chip figcaption::before{color:#5B4A08}
article .fig-chip--ink figcaption::before{color:var(--heat)}
.prose-open>p:first-of-type::first-letter{font-family:Anton,Impact,sans-serif;font-size:3.5em;
  line-height:.8;float:left;margin:6px 12px 0 0;color:var(--ink)}
.ledger-band+.wrap .prose>p:first-child{margin-top:0}
.panel h2{border-top:0}
.panel h2::before{content:none}

/* later-in-the-day plates */
.afterfire{margin-top:clamp(34px,4.4vw,60px)}
.afterfire h2{font-size:clamp(22px,2.8vw,34px);line-height:1.05;margin:10px 0 0;max-width:24ch}
.plate-list{list-style:none;margin:22px 0 0;padding:0;border-top:2px solid var(--ink)}
.plate-list li{border-bottom:1px solid var(--rule)}
.plate{display:grid;grid-template-columns:72px 128px minmax(0,1fr) 40px;gap:clamp(14px,2.4vw,30px);
  align-items:center;padding:18px 0;color:var(--ink)}
.plate:hover{color:var(--accent)}
.plate .pl-no{font-family:Anton,sans-serif;font-size:clamp(30px,4vw,46px);line-height:.9;color:var(--rule)}
.plate:hover .pl-no{color:var(--heat)}
.plate .pl-thumb{display:block;aspect-ratio:4/3;background:var(--slot-bg);overflow:hidden}
.plate .pl-thumb img{width:100%;height:100%;object-fit:cover}
.plate .pl-sec{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--brass)}
.plate .pl-sec .ico{width:17px;height:17px}
.plate .pl-t{display:block;font-family:Anton,sans-serif;text-transform:uppercase;
  font-size:clamp(19px,2.2vw,27px);line-height:1.06;margin-top:7px}
.plate .pl-d{display:block;font-size:15.5px;color:var(--quiet);margin-top:6px;max-width:62ch}
.plate .pl-go svg{width:26px;height:26px;color:var(--rule)}
.plate:hover .pl-go svg{color:var(--accent)}
@media (max-width:720px){
  .plate{grid-template-columns:52px minmax(0,1fr);gap:12px 14px}
  .plate .pl-thumb{grid-column:1/-1;aspect-ratio:16/9;order:3}
  .plate .pl-go{display:none}
}

/* ---------- mobile: drawings pan inside their own container ---------- */
@media (max-width:720px){
  .plan-band>div:last-child{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .plan-band>div:last-child>svg{min-width:660px}
  .plan-band>div:last-child::after{content:"Scroll sideways for the whole plan";display:block;
    margin-top:10px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#9A9484}
  .chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .chart svg{min-width:600px}
  .ledger li{grid-template-columns:34px minmax(0,1fr);gap:10px}
  .panel ul{grid-template-columns:1fr}
  .prose-open>p:first-of-type::first-letter{font-size:3.1em;margin-right:9px}
  .afterfire h2,.oneline p{text-wrap:balance}
  .hero-plate{margin-inline:12px}
  .mast-bar{gap:12px}
  .mast-note{display:none}
  .mast-links{margin-left:auto}
  .mast-links a{padding:9px 11px}
}
@media (max-width:400px){
  .mast-links a{padding:8px 9px;font-size:11.5px}
  .wordmark span{font-size:19px}
  .plate .pl-no{font-size:26px}
}

/* ---------- mobile tap targets ---------- */
@media (max-width:720px){
  .site-foot a{min-height:44px;display:flex;align-items:center}
  .art-kicker a,.plan-copy a,.wrap>p>a,.afterfire+p a{display:inline-flex;align-items:center;min-height:44px}
  .lead-row h2 a{display:inline-block;padding-block:6px;min-height:44px}
  .eyebrow a{display:inline-flex;align-items:center;min-height:44px}
  .wordmark{padding-block:6px}
  .card h3{min-height:0}
}

@media (min-width:900px){
  .plan-band:not(.plan-stack){grid-template-columns:minmax(280px,.85fr) minmax(0,1.45fr);align-items:center}
}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* 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-nav-row-align: the parts of each menu row sat at different heights — measured up to
   6px between the box centres of the number, the label and the count, because the row is
   `align-items:flex-start` with type at two sizes (and an icon, which baseline pushes
   lower still). Centred at phone widths only, where the nav is a stacked list; the desktop bar
   keeps Design's baseline. Type sizes, spacing, colour and order are untouched. */
@media (max-width:940px){
  .sectionbar a,.sectionbar li{align-items:center!important}
  .sectionbar a > *,.sectionbar li > *{margin-block:0!important}
}

/* op-nav-collapse: this nav printed 519px of stacked links at 390 before any content
   (8 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(16px,3vw,40px)) 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 "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.nav-fold{display:none}
@media (max-width:940px){
  .nav-fold{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(16px,3vw,40px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}
  .nav-fold::before,.nav-fold::after{content:"";flex:1 1 auto;height:1px;background:currentColor;opacity:.4}
  .nav-fold-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}
  .sectionbar{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .nav-fold-c:checked ~ .sectionbar{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .masthead:has(> .nav-fold){display:flow-root}
  .nav-fold:not(:has(~ .sectionbar)){display:none}
}

/* op-money-columns: the supporters block ran one tile per row — 12 tiles,
   2218px at 390, 20% of the whole page. Two columns bring it to
   1258px (43% shorter). Checked before writing: no new overflow, smallest mark still
   172px wide, longest blurb 3 lines, tile heights 199-217px.
   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 (.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:14px!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}
}

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   336px in a 320px screen (+16px), inside
   div.lead-row. Remedy: unpin the grid track. 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){
  div.lead-row{grid-template-columns:minmax(0,1fr)!important}
  div{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 777px (95 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){
  article div.prose{--measure:min(73.390ch, 100%)!important}
}
@media (min-width:1600px){
  article div.prose{--measure:min(clamp(73.390ch, 58.264vw, calc(73.390ch * 1.2)), 100%)!important}
  article div.prose > :is(p:not([class])){font-size:clamp(18px,1.2500vw,21.6px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (777px) and was left behind when the text went to 839px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1024px){
  div.art-head p.lead{max-width:min(731px, 100%)!important}
  p.art-meta{max-width:min(499px, 100%)!important}
}
@media (min-width:1600px){
  div.art-head p.lead{max-width:min(calc(clamp(731px, 50.764vw, 877px) + 0px), 100%)!important}
  p.art-meta{max-width:min(calc(clamp(499px, 34.653vw, 599px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* 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-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.card > div.fig-img.r-3-2 > img,
  a.plate > span.pl-thumb > img,
  div.fig-hair > div.fig-img.r-2-1 > img,
  div.fig-hair > div.fig-img.r-8-5 > img,
  div.fig-mat > div.fig-img.r-2-1 > img,
  div.fig-mat > div.fig-img.r-8-5 > img,
  figure > div.fig-img.r-4-5 > img,
  figure.fig-chip > div.fig-img.r-16-9 > img,
  figure.fig-chip.fig-chip--ink > div.fig-img.r-16-9 > img,
  section.hero > div.hero-frame > img){height:auto}
/* op-img-dims:end */
@media (min-width:780px){.sponsor-list:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,460px),1fr))!important;gap:var(--sp-gap,14px)!important;justify-content:start!important}.sponsor-list:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}@media (min-width:700px) and (max-width:739px){.sponsor-list:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--sp-gap,16px)!important}.sponsor-list:has(> [data-partner]) > [data-partner]{width:auto!important;min-width:0!important;margin-left:0!important;margin-right:0!important}}