/* aragriculture.org — Dead Level register
   Palette roles: ground, ink, accent (muscadine), secondary (harvest gold) */

:root{
  --ground:#F1EFEA;      /* page ground */
  --ink:#16141B;         /* text ink */
  --accent:#5E2A78;      /* muscadine purple — bands, section grounds, links */
  --secondary:#C89400;   /* harvest gold — rules, sub-labels, numbers */
  --gold-lit:#E5B93C;    /* gold, legible on the accent ground */
  --wash:#E6E0EE;        /* accent tinted to a panel ground */
  --ink-soft:#4B4356;
  --muted:#685C77;
  --rule:#CFC9C0;
  --rule-soft:#DFDAD2;
  --dark:#231C2B;        /* logo boxes: light wordmarks need a dark ground */
  --f-display:'Epilogue',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-text:'Public Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.55;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}
img{max-width:100%;display:block;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em;margin:0}
p{margin:0 0 1.1em}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse;width:100%}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:1300px;margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.wrap-narrow{max-width:920px;margin:0 auto;padding-inline:clamp(18px,4vw,40px)}
.kicker{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.22em;text-transform:uppercase}
.sublabel{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.icon{width:1.1em;height:1.1em;flex:none;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- masthead + nav ---------- */
.masthead{background:var(--accent);color:#F5F1F8}
.masthead .wrap{display:grid;grid-template-columns:auto auto;justify-content:space-between;gap:12px clamp(16px,3vw,40px);align-items:start;padding-top:26px}
.brand{display:block;color:#fff}
.brand b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(28px,3.4vw,44px);line-height:.94;letter-spacing:-.035em}
.brand span{display:block;margin-top:7px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-lit)}
.strapline{max-width:430px;font-size:15.5px;line-height:1.5;color:#DCCFE6;padding-top:4px}
.masthead-meta{text-align:right;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lit);padding-top:6px;line-height:1.8;margin:0}
.masthead-meta em{display:block;font-style:normal;color:#C6B4D2}

.nav{border-top:1px solid rgba(245,241,248,.28);margin-top:20px}
.nav ul{display:flex;flex-wrap:wrap;list-style:none}
.nav a{display:flex;align-items:center;gap:11px;color:#DCCFE6;font-family:var(--f-display);font-weight:600;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:19px 20px 16px;border-bottom:3px solid transparent;min-height:52px}
.nav a:hover{background:rgba(245,241,248,.12);color:#fff}
.nav a[aria-current]{color:#fff;border-bottom-color:var(--gold-lit)}
.nav .to-index{margin-left:auto;color:var(--gold-lit)}
@media (max-width:1180px){.nav .to-index{margin-left:0}}
.nav .icon{width:22px;height:22px}

/* ---------- generic band furniture ---------- */
.band{padding:clamp(38px,5vw,60px) 0}
.band-accent{background:var(--accent);color:#F5F1F8}
.band-wash{background:var(--wash)}
.band-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;border-bottom:2px solid var(--ink);padding-bottom:11px;margin-bottom:26px}
.band-head h2{font-size:clamp(20px,2.2vw,26px)}
.band-head .kicker{color:var(--accent)}
.band-head p{margin:0;font-size:15.5px;color:var(--muted)}
.band-accent .band-head{border-bottom-color:rgba(245,241,248,.5)}
.band-accent .band-head .kicker{color:var(--gold-lit)}
.band-accent .band-head p{color:#CBBBD8}

/* ---------- homepage opener ---------- */
.opener{padding:clamp(34px,4.5vw,58px) 0 clamp(30px,4vw,46px)}
.opener-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(28px,4vw,64px);align-items:start}
.opener h1{font-size:clamp(30px,4.4vw,58px);font-weight:800;line-height:1.02;letter-spacing:-.032em}
.opener .deck{margin-top:20px;font-size:clamp(17px,1.5vw,20px);line-height:1.5;max-width:44em;color:#332E3B}
.signature{border-top:3px solid var(--secondary);padding-top:15px}
.signature p{font-size:16px;line-height:1.55;color:var(--ink-soft)}
.signature p:last-child{margin-bottom:0}

/* lead feature */
.lead-feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:end;margin-top:clamp(30px,4vw,48px)}
.lead-feature h2{font-size:clamp(24px,2.8vw,36px);line-height:1.1;margin-bottom:10px}
.lead-feature p{font-size:17px;line-height:1.55;color:var(--ink-soft)}
.metaline{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;letter-spacing:.05em;color:var(--muted);text-transform:uppercase}
.metaline b{font-weight:700;color:var(--accent)}
.metaline .sep{color:var(--rule)}

/* ---------- the register ---------- */
.reg-group + .reg-group{margin-top:30px}
.reg-grouphead{display:flex;align-items:center;gap:10px;padding-bottom:9px;border-bottom:1px solid rgba(245,241,248,.45)}
.reg-grouphead .icon{width:22px;height:22px;color:var(--gold-lit)}
.reg-grouphead h3{font-size:19px;color:#fff}
.reg-grouphead span{font-size:14.5px;color:#CBBBD8}
.reg-grouphead a{margin-left:auto;font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-lit);font-weight:700}
.reg-grouphead a:hover{color:#fff}
.reg-group{display:flex;flex-wrap:wrap;gap:3px}
.reg-grouphead{flex:1 1 100%;display:flex;align-items:center;gap:14px;padding-bottom:11px;border-bottom:1px solid rgba(245,241,248,.45)}
.reg-grouphead .icon{width:38px;height:38px;color:var(--gold-lit);stroke-width:1.25}
.reg-grouphead h3{font-size:clamp(26px,2.6vw,34px);color:#fff;letter-spacing:-.025em}
.reg-grouphead span{font-size:15px;color:#CBBBD8}
.reg-row{flex:1 1 236px;position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 18px 15px;background:rgba(22,20,27,.26);border-top:2px solid rgba(229,185,60,.55);color:#F5F1F8;transition:background .16s ease,border-top-color .16s ease}
.reg-row:hover{background:rgba(22,20,27,.44);border-top-color:var(--gold-lit)}
.reg-group .reg-row{max-width:calc((100% - 6px)/3)}
.reg-row::after{content:"\2192";position:absolute;right:16px;bottom:11px;font-size:15px;line-height:1;color:var(--gold-lit);opacity:.5;transition:opacity .16s ease,transform .16s ease}
.reg-row:hover::after{opacity:1;transform:translateX(3px)}
.reg-row:hover{background:rgba(245,241,248,.16)}
.reg-row .t{font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.2;letter-spacing:-.012em;display:block;color:#fff}
.reg-row .b{display:block;margin-top:7px;font-size:15px;line-height:1.45;color:#CBBBD8}
.reg-row .turns{order:-1;font-family:var(--f-display);font-weight:700;font-size:16px;line-height:1.2;letter-spacing:-.01em;color:var(--gold-lit);padding-bottom:10px;margin-bottom:3px;border-bottom:1px solid rgba(245,241,248,.2)}
.reg-row .read{margin-top:auto;padding-right:26px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#C9BBD6}
#register details.expander{flex:1 1 100%;display:block;border-top:0;margin-top:9px}
#register .reg-more{display:flex;flex-wrap:wrap;gap:3px;margin-top:3px}
#register details.expander:not([open]) .reg-more{display:none}

/* ---------- section cards ---------- */
.section-grid{display:flex;flex-wrap:wrap;border-top:1px solid var(--rule)}
.section-card{flex:1 1 172px;display:flex;flex-direction:column;padding:22px 22px 24px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);color:var(--ink)}
.section-card:hover{background:var(--wash)}
.section-card .icon{width:32px;height:32px;color:var(--accent);stroke-width:1.3}
.section-card h3{margin:14px 0 7px;font-size:22px}
.section-card p{font-size:15px;line-height:1.45;color:var(--ink-soft);margin-bottom:14px}
.section-card .n{margin-top:auto;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* ---------- cards row ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(20px,2.5vw,36px)}
.card{display:flex;flex-direction:column;color:var(--ink);height:100%}
.card .shot{aspect-ratio:8/5;overflow:hidden;border-top:2px solid var(--secondary)}
.card .shot img{width:100%;height:100%;object-fit:cover}
.card:hover .shot{border-top-color:var(--accent)}
.card .kicker{color:var(--accent);margin:13px 0 6px;display:flex;align-items:center;gap:7px}
.card .kicker .icon{width:16px;height:16px}
.card h3{font-size:21px;line-height:1.2;min-height:2.4em}
.card p{margin:7px 0 12px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.card .metaline{margin-top:auto;font-size:12px}

/* ---------- figures: three treatments ---------- */
figure{margin:0}
figcaption{font-size:15.5px;line-height:1.4}
.credit{display:block;margin-top:7px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* 1 · plate — photograph on a tinted mat under a gold rule, caption split */
.fig-plate .plate{border-top:2px solid var(--secondary);background:var(--wash);padding:clamp(14px,1.6vw,24px)}
.fig-plate img{width:100%;height:auto}
.fig-plate figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,190px);gap:8px 28px;border-top:1px solid var(--ink);padding-top:11px}
.fig-plate .cap{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.4vw,19px);line-height:1.35}
.fig-plate .credit{margin:0;text-align:right}

/* 2 · block — image with its caption in an accent block beside it */
.fig-block{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,260px);align-items:stretch}
.fig-block img{width:100%;height:100%;object-fit:cover}
.fig-block figcaption{background:var(--accent);color:#F5F1F8;padding:22px 22px 20px;display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.fig-block .cap{font-family:var(--f-display);font-weight:500;font-size:17.5px;line-height:1.35}
.fig-block .credit{color:#C6B4D2;margin:0}

/* 3 · keyline — card with a gold hairline, caption inside the frame */
.fig-key{border:1px solid var(--secondary);padding:13px 13px 0}
.fig-key img{width:100%;height:auto}
.fig-key figcaption{padding:12px 2px 14px}
.fig-key .cap{font-family:var(--f-display);font-weight:500;font-size:17px;line-height:1.35}

/* full-bleed band figure */
.fig-bleed{background:var(--wash);border-block:1px solid var(--ink)}
.fig-bleed img{width:100%;max-height:min(62vh,640px);object-fit:cover}
.fig-bleed figcaption{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,200px);gap:8px 28px;padding:12px 0 0}
.fig-bleed .cap{font-family:var(--f-display);font-weight:500;font-size:clamp(16px,1.5vw,20px);line-height:1.35}
.fig-bleed .credit{margin:0;text-align:right}
.fig-bleed .pad{padding-bottom:16px}

/* generic figure (styleguide component name) — plate treatment */
.article-figure{border-top:2px solid var(--secondary);background:var(--wash);padding:clamp(12px,1.4vw,20px)}
.article-figure img{width:100%;height:auto}
.article-figure figcaption{margin-top:12px;padding-top:11px;border-top:1px solid var(--ink);font-family:var(--f-display);font-weight:500;font-size:17px;line-height:1.35}

.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.gallery figure{display:flex;flex-direction:column}
.gallery img{aspect-ratio:8/5;object-fit:cover;width:100%}
.gallery figcaption{font-size:14px;line-height:1.4;padding-top:8px;border-top:1px solid var(--rule);margin-top:8px;color:var(--ink-soft)}

.map-figure .map-slot{aspect-ratio:16/9;background:var(--wash);border:1px solid var(--rule)}
.map-figure figcaption{padding-top:11px;border-top:1px solid var(--ink);margin-top:11px}

/* ---------- article ---------- */
.art-head{background:var(--wash);border-bottom:1px solid var(--ink);padding:clamp(28px,4vw,46px) 0 clamp(24px,3vw,36px)}
.art-head .eyebrow{display:flex;align-items:center;gap:9px;color:var(--accent);margin-bottom:16px}
.art-head .eyebrow .icon{width:20px;height:20px}
.art-head .eyebrow span{font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.art-head h1{font-size:clamp(30px,4.6vw,62px);font-weight:800;line-height:1;letter-spacing:-.035em;max-width:26em}
.art-head .lead{margin:20px 0 0;font-size:clamp(17px,1.6vw,21px);line-height:1.45;max-width:40em;color:#332E3B}
.art-head .metaline{margin-top:20px}
.turns-on{margin-top:24px;border-top:3px solid var(--secondary);padding-top:12px;display:flex;flex-wrap:wrap;gap:6px 26px;align-items:baseline}
.turns-on .lbl{font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--accent)}
.turns-on .val{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em}

.article-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,min(68ch,100%)) minmax(0,1fr);
  padding-block:clamp(28px,4vw,48px);
}
.article-body>*{grid-column:2;min-width:0}
.article-body>.wide{grid-column:1/-1;justify-self:center;width:min(100%,1020px)}
.article-body>.bleed{grid-column:1/-1;width:100%}
.article-body p{font-size:19px;line-height:1.62;margin:0 0 1.15em}
.article-body h2{font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:38px 0 14px;padding-top:16px;border-top:1px solid var(--rule);display:flex;gap:12px;align-items:baseline}
.article-body h2::before{content:"";flex:none;width:11px;height:11px;background:var(--secondary);transform:translateY(-2px)}
.article-body>figure{margin:26px 0 32px}
.article-body>.wide,.article-body>.bleed{margin:30px 0 36px}

.pullquote{margin:30px 0;border-top:2px solid var(--accent);border-bottom:1px solid var(--rule);padding:16px 0 18px}
.pullquote p{font-family:var(--f-display);font-weight:500;font-size:clamp(20px,2.1vw,26px)!important;line-height:1.28;margin:0;letter-spacing:-.015em}
.blockquote{margin:26px 0;padding-left:20px;border-left:3px solid var(--secondary)}
.blockquote p{font-size:19px;line-height:1.5;margin:0 0 8px}
.blockquote cite{font-style:normal;font-size:14.5px;color:var(--muted)}
.callout{margin:26px 0;background:var(--accent);color:#F5F1F8;padding:22px 24px}
.callout p{font-size:18px;line-height:1.5;margin:0}
.note{font-size:16px;line-height:1.5;color:var(--ink-soft);border-left:2px solid var(--rule);padding-left:14px}

/* notes-for-design material: full-width interruptions, never a side rail */
.notes-block{background:var(--wash);border-top:3px solid var(--secondary);padding:clamp(18px,2vw,26px) clamp(18px,2vw,28px)}
.notes-block .sublabel{display:block;margin-bottom:14px}
.notes-block ul{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2px 34px}
.notes-block li{padding:11px 0;border-top:1px solid #D2C9DE;font-size:16px;line-height:1.45;color:var(--ink-soft)}
.notes-block li b{display:block;font-family:var(--f-display);font-weight:700;font-size:16.5px;color:var(--ink);margin-bottom:2px}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--rule);border-block:1px solid var(--ink)}
.statblock{background:var(--ground);padding:18px 18px 20px;display:flex;flex-direction:column;gap:7px}
.stat-num{font-family:var(--f-display);font-weight:800;font-size:clamp(19px,2vw,25px);line-height:1.05;letter-spacing:-.025em;color:var(--accent)}
.stat-label{font-size:14.5px;line-height:1.4;color:var(--ink-soft)}

.datatable,.versus{font-size:16px}
.datatable caption,.versus caption{text-align:left;font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);padding-bottom:10px}
.datatable th,.versus th{text-align:left;font-family:var(--f-display);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);padding:0 18px 8px 0}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:12px 18px 12px 0;vertical-align:top;line-height:1.45;color:var(--ink-soft)}
.datatable td:first-child,.versus td:first-child{font-family:var(--f-display);font-weight:600;color:var(--ink);width:34%}
.versus td+td{width:33%}
.versus tbody tr:hover{background:var(--wash)}

.timeline{list-style:none}
.timeline li{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:6px 24px;padding:13px 0;border-top:1px solid var(--rule)}
.t-when{font-family:var(--f-display);font-weight:700;font-size:15px;color:var(--accent);line-height:1.35}
.t-what{font-size:16px;line-height:1.45;color:var(--ink-soft)}

.chart{margin:24px 0}
.chart svg{width:100%;height:auto;overflow:visible}
.chart.donut svg{max-width:260px}
.chart figcaption{padding-top:11px;margin-top:11px;border-top:1px solid var(--rule);color:var(--ink-soft);font-size:14.5px}
.chart .bar-lbl{font-family:var(--f-text);font-size:13px;fill:var(--ink)}
.chart .bar-val{font-family:var(--f-display);font-weight:700;font-size:13px;fill:var(--accent)}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart .bar{fill:var(--accent)}
.chart .bar-alt{fill:var(--secondary)}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:2.5}
.chart .line-dot{fill:var(--secondary)}
.chart .donut-track{fill:none;stroke:var(--rule);stroke-width:16}
.chart .donut-val{fill:none;stroke:var(--accent);stroke-width:16;stroke-linecap:butt}
.chart .donut-num{font-family:var(--f-display);font-weight:800;font-size:26px;fill:var(--ink)}

details.expander{border-top:1px solid var(--rule);margin-top:8px}
details.expander summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:9px;padding:14px 0;min-height:44px;font-family:var(--f-display);font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
details.expander summary::-webkit-details-marker{display:none}
details.expander summary::after{content:"+";margin-left:auto;font-size:18px}
details.expander[open] summary::after{content:"\2212"}
details.expander:not([open])>*:not(summary){display:none}
.band-accent details.expander{border-top-color:rgba(245,241,248,.3)}
.band-accent details.expander summary{color:var(--gold-lit);font-size:13px}

.sg-section{padding:clamp(30px,4vw,50px) 0;border-top:1px solid var(--ink)}
.sg-section h2{font-size:clamp(20px,2.2vw,27px);margin-bottom:6px}
.sg-section .note{margin:0 0 22px}
.sg-stack{display:grid;gap:26px}

.related-links,.cat-list{list-style:none}
.related-links li{border-top:1px solid var(--rule)}
.related-links a{display:flex;gap:11px;align-items:flex-start;padding:13px 0;color:var(--ink);font-size:17px;line-height:1.35;min-height:44px}
.related-links a:hover{color:var(--accent)}
.related-links .icon{width:18px;height:18px;margin-top:3px;color:var(--accent)}

.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) 240px 100px;gap:6px 24px;align-items:baseline;padding:20px 6px 20px 0;color:var(--ink)}
.cat-list a:hover{background:var(--wash)}
.cat-list .t{font-family:var(--f-display);font-weight:700;font-size:clamp(20px,2vw,25px);line-height:1.18;letter-spacing:-.018em}
.cat-list .b{display:block;margin-top:7px;font-size:16px;line-height:1.45;color:var(--ink-soft);max-width:64ch}
.cat-list .turns{font-size:16px;color:var(--accent);font-family:var(--f-display);font-weight:600}
.cat-list .read{font-size:14px;color:var(--muted);text-align:right}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.further-grid a{display:block;border:1px solid var(--rule);border-top:2px solid var(--accent);padding:16px 16px 18px;color:var(--ink);font-family:var(--f-display);font-weight:600;font-size:18px;line-height:1.25}
.further-grid a:hover{background:var(--wash)}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.profile-card{border-top:2px solid var(--secondary);background:var(--wash);padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;border-radius:50%}
.profile-card h3{font-size:19px}
.profile-card .p-role{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0}
.profile-card p{font-size:15.5px;line-height:1.45;color:var(--ink-soft);margin:0}
.profile-card .p-links a{font-size:15px}
.profile-card .p-attr{font-size:12.5px;color:var(--muted)}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.org-card{display:grid;grid-template-columns:56px minmax(0,1fr);gap:4px 14px;align-items:center;border:1px solid var(--rule);padding:14px;color:var(--ink)}
.org-card:hover{border-color:var(--accent)}
.org-logo{grid-row:span 2;width:56px;height:56px;object-fit:contain;background:var(--dark)}
.org-card.no-logo{grid-template-columns:minmax(0,1fr)}
.org-name{font-family:var(--f-display);font-weight:700;font-size:16.5px;align-self:end}
.org-host{font-size:13.5px;color:var(--muted);align-self:start}
.entity-ref{border-bottom:1px solid var(--secondary)}

/* ---------- supporters ---------- */
.supporters{background:var(--ground);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.sponsor-run{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:clamp(18px,2vw,30px)}
.sponsor-group{display:flex;flex-direction:column;gap:12px}
.sponsor-group .sublabel{padding-bottom:8px;border-bottom:1px solid var(--rule)}
.sponsor-tiles{display:flex;flex-wrap:wrap;gap:12px}
.sponsor{flex:0 0 224px;height:68px;padding:10px 12px;background:var(--dark);border:1px solid #33293E;display:flex;align-items:center;justify-content:center}
.sponsor:hover{border-color:var(--gold-lit)}
.sponsor.feat{border-color:var(--secondary)}
.sponsor img{max-height:44px;max-width:100%;width:auto;height:auto;object-fit:contain}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:#ADA5B8;padding:clamp(32px,4vw,48px) 0}
.foot-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;align-items:end}
.foot b{font-family:var(--f-display);font-weight:800;font-size:clamp(22px,2.4vw,30px);color:#F1EFEA;letter-spacing:-.03em;display:block}
.foot p{margin:10px 0 0;font-size:15px;line-height:1.5;max-width:46ch}
.foot ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot ul a{display:flex;align-items:center;gap:8px;color:#ADA5B8;font-size:12px;letter-spacing:.18em;text-transform:uppercase;min-height:44px}
.foot ul a:hover{color:var(--gold-lit)}
.foot .icon{width:16px;height:16px}

/* ---------- 404 ---------- */
.thin-page{padding:clamp(48px,8vw,110px) 0}
.thin-page h1{font-size:clamp(32px,5vw,58px);font-weight:800;letter-spacing:-.035em;line-height:1}
.thin-page p{margin-top:18px;font-size:19px;max-width:46ch;color:var(--ink-soft)}
.thin-page .back{display:inline-flex;align-items:center;gap:9px;margin-top:22px;font-family:var(--f-display);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--secondary);padding-bottom:5px;min-height:44px}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .cat-list a{grid-template-columns:minmax(0,1fr) 190px 84px}
}
@media (max-width:860px){
  .reg-group .reg-row{max-width:calc((100% - 3px)/2)}
  .opener-grid,.lead-feature,.foot-grid{grid-template-columns:minmax(0,1fr)}
  .fig-block{grid-template-columns:minmax(0,1fr)}
  .cat-list a{grid-template-columns:minmax(0,1fr);gap:7px}
  .cat-list .read{text-align:left}
  .fig-plate figcaption,.fig-bleed figcaption{grid-template-columns:minmax(0,1fr)}
  .fig-plate .credit,.fig-bleed .credit{text-align:left}
  .article-body p{font-size:18px}
  .card h3{min-height:0}
  .timeline li{grid-template-columns:minmax(0,1fr)}
  .datatable td:first-child,.versus td:first-child{width:auto}
}
@media (max-width:960px){
  .masthead .wrap{grid-template-columns:minmax(0,1fr)}
  .masthead-meta{text-align:left;padding-top:0}
  .strapline{max-width:60ch}
}
@media (max-width:660px){
  .reg-group .reg-row{max-width:none}
  body{font-size:16.5px}
  .nav a{padding:14px 13px 11px;font-size:14px}
  .nav .icon{width:19px;height:19px}
  .sponsor{flex:1 1 100%}
  .versus,.datatable{font-size:15px}
  .versus th,.versus td{padding-right:10px}
}
@media print{
  .nav,.supporters{display:none}
  body{background:#fff}
}

/* 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-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-tiles .sponsor.sponsor img{height:44px!important;display:block!important;width:100%!important}


/* 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.opener{padding-inline:clamp(18px,4vw,40px)}
  .wrap.band{padding-inline:clamp(18px,4vw,40px)}
}

/* op-nav-collapse: this nav printed 183px of stacked links at 390 before any content
   (6 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 "inset-box", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(18px,4vw,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 "display" technique and marked with the "bars" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-open{display:none}
@media (max-width:940px){
  .menu-open{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;border:1px solid currentColor;border-radius:2px;padding:10px 15px;margin-inline:clamp(18px,4vw,40px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-open-bars{width:15px;height:9px;flex:none;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;box-shadow:inset 0 3.5px 0 -1px currentColor}
  .nav{display:none}
  .menu-open-c:checked ~ .nav{display:block}
  .masthead:has(> .menu-open){display:flow-root}
  .menu-open:not(:has(~ .nav)){display:none}
}

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

}

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

/* op-article-width: the article column was capped at 707px (82 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "minmax(0px, 1fr) minmax(0px, min(68ch, 100%)) minmax(0px, 1fr)" (declared in .article-body) 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.wrap.article-body{grid-template-columns:minmax(0px, 1fr) min(875px, 100%) minmax(0px, 1fr)!important}
}
@media (min-width:1600px){
  div.wrap.article-body{grid-template-columns:minmax(0px, 1fr) min(clamp(875px, 60.764vw, 1050px), 100%) minmax(0px, 1fr)!important}
  div.wrap.article-body > :is(p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width: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-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:901px) and (max-width:1399px){
  div.band-head{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  div.card-grid{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  div.lead-feature{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  figure.fig-plate > figcaption, figure.fig-plate > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  section.wrap > div{padding-left:max(clamp(18px,4vw,40px), 18px);padding-right:max(clamp(18px,4vw,40px), 18px)}
  div.lead-feature figure.fig-plate > figcaption, div.lead-feature figure.fig-plate > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:0;padding-right:0}
  section.wrap > div figure.fig-plate > figcaption, section.wrap > div figure.fig-plate > :is(p,h2,h3,h4,ul,ol,[class*=cap],.credit,.chart-title,.chart-note){padding-left:0;padding-right:0}
}
/* op-tablet-gutter:end */
@media (min-width:660px) and (max-width:1279px){.sponsor-tiles.sponsor-tiles:has(> [data-partner]){display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(224px,calc(50% - 6px)),1fr))!important;column-gap:12px!important;row-gap:12px!important;justify-content:stretch!important;align-items:stretch!important}.sponsor-tiles.sponsor-tiles > [data-partner]{flex:none!important;width:auto!important;max-width:none!important;margin-left:0!important;margin-right:0!important}}