/* ================= The Weeknight Table — shared styles ================= */


:root{
  --paper:#FCF7EE;
  --ink:#2E2A20;
  --body:#5A5646;
  --muted:#807A66;
  --olive:#5F6B39;
  --olive-hover:#4A5330;
  --terracotta:#C97B29;
  --season:#EDEEDF;
  --season-outline:#B7BD9A;
  --sponsor-bg:#F3ECDD;
  --card:#fff;
  --border:#EDE4D2;
  --border-2:#EAE0CC;
  --footer:#2E2A20;
  --footer-text:#CFC7B2;
  --footer-muted:#948D78;
  --footer-divider:#443F30;
  --serif:'Spectral',Georgia,serif;
  --sans:'IBM Plex Sans',system-ui,sans-serif;
  --wrap:1200px;
  --measure:70ch;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:18px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:var(--olive); text-decoration:none; }
a:hover{ color:var(--olive-hover); }
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:600; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:40px; }
.kicker{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--terracotta); }
.kicker--olive{ color:var(--olive); }

/* ---------- header ---------- */
.site-header{ border-bottom:1px solid var(--border-2); background:var(--paper); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:24px; padding-bottom:24px; }
.wordmark{ font-family:var(--serif); font-size:25px; font-weight:600; color:var(--ink); white-space:nowrap; }
.wordmark:hover{ color:var(--ink); }
.mainnav{ display:flex; gap:26px; flex-wrap:wrap; }
.mainnav a{ font-size:15.5px; font-weight:500; color:#54503F; }
.mainnav a:hover,.mainnav a[aria-current="page"]{ color:var(--olive); }
.header-tools{ display:flex; align-items:center; gap:16px; }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border:1px solid var(--border-2); border-radius:8px; background:var(--card); color:#54503F; cursor:pointer; }
.icon-btn:hover{ border-color:var(--olive); color:var(--olive); }
.btn{ display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; font-family:var(--sans); color:#fff; background:var(--olive); padding:11px 20px; border-radius:8px; border:none; cursor:pointer; }
.btn:hover{ background:var(--olive-hover); color:#fff; }
.btn--ghost{ background:transparent; color:var(--olive); border:1px solid var(--season-outline); }
.btn--ghost:hover{ background:transparent; border-color:var(--olive); color:var(--olive); }

/* mobile nav toggle */
.nav-toggle{ display:none; }
.menu-btn{ display:none; }

/* ---------- footer ---------- */
.site-footer{ background:var(--footer); color:var(--footer-text); margin-top:72px; box-shadow:inset 0 3px 0 var(--terracotta); }
.site-footer .wrap{ padding-top:56px; padding-bottom:44px; }
.footer-top{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:40px 56px; margin-bottom:40px; }
.footer-brand{ font-family:var(--serif); font-size:28px; font-weight:600; color:var(--paper); max-width:330px; line-height:1.1; }
.footer-brand p{ font-family:var(--sans); font-size:15px; line-height:1.55; color:var(--footer-muted); margin:20px 0 0; font-weight:400; }
.footer-brand p::before{ content:""; display:block; width:44px; height:3px; background:var(--terracotta); border-radius:2px; margin:0 0 18px; }
.footer-cols{ display:flex; gap:56px; flex-wrap:wrap; }
.footer-cols .col{ display:flex; flex-direction:column; gap:12px; }
.footer-cols .col-h{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--terracotta); font-family:var(--sans); font-weight:600; margin-bottom:2px; }
.footer-cols a{ color:var(--footer-text); font-size:15.5px; width:fit-content; transition:color .15s ease, transform .15s ease; }
.footer-cols a:hover{ color:#fff; transform:translateX(3px); }
.footer-legal{ border-top:1px solid var(--footer-divider); padding-top:24px; font-size:14px; color:var(--footer-muted); line-height:1.55; font-style:italic; font-family:var(--serif); letter-spacing:.005em; }

/* ---------- hero ---------- */
.hero{ border-bottom:1px solid var(--border-2); }
.hero-grid{ display:grid; grid-template-columns:1fr 1fr; max-width:var(--wrap); margin:0 auto; }
.hero-copy{ padding:72px 40px; display:flex; flex-direction:column; justify-content:center; }
.hero-copy .kicker{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; }
.hero-copy .kicker::before{ content:""; width:28px; height:2px; background:var(--terracotta); }
.hero h1{ font-size:clamp(40px,4.4vw,62px); line-height:1.02; margin:0 0 22px; }
.hero .dek{ font-size:21px; line-height:1.55; color:var(--body); margin:0 0 30px; max-width:30ch; }
.hero-cta{ display:flex; gap:18px; align-items:center; flex-wrap:wrap; }
.byline{ font-size:14.5px; color:var(--muted); }
.hero-media{ position:relative; min-height:520px; }
.hero-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------- section head ---------- */
.section{ padding-top:60px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:28px; }
.section-head h2{ font-size:32px; margin:0; }
.section-head .more-link{ font-size:14.5px; font-weight:600; }

/* ---------- recipe cards ---------- */
.card-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.card{ display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.card:hover{ color:inherit; }
.card .card-media{ aspect-ratio:16/10; overflow:hidden; }
.card .card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }
.card:hover .card-media img{ transform:scale(1.04); }
.card-body{ padding:20px 22px; display:flex; flex-direction:column; flex:1; }
.card .tag{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta); margin-bottom:9px; }
.card h3{ font-size:22px; line-height:1.16; margin:0 0 9px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.32em; }
.card .card-dek{ font-size:15px; line-height:1.5; color:var(--body); margin:0 0 16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.card .card-meta{ margin-top:auto; font-size:13.5px; color:var(--muted); }

/* ---------- season band (signature) ---------- */
.season-band{ background:var(--season); margin-top:60px; padding:60px 0; }
.season-band .band-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-bottom:14px; }
.season-band h2{ font-size:36px; margin:0; }
.season-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.season-tab{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:.02em; padding:10px 20px; border-radius:100px; background:transparent; color:var(--olive); border:1px solid var(--season-outline); cursor:pointer; }
.season-tab[aria-selected="true"]{ background:var(--olive); color:#fff; border-color:var(--olive); }
.season-note{ font-size:19px; color:#54503F; margin:0 0 26px; max-width:56ch; }
.produce-grid{ display:grid; grid-template-columns:repeat(6,1fr); gap:14px; }
.produce-card{ position:relative; aspect-ratio:3/4; border-radius:12px; overflow:hidden; border:1px solid var(--season-outline);
  display:flex; flex-direction:column; justify-content:flex-end; padding:14px 14px 15px; gap:3px;
  background-size:cover; background-position:center; }
.produce-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(20,14,9,.35),rgba(20,14,9,0) 62%); pointer-events:none; }
.produce-card .pc-name{ position:relative; z-index:1; font-family:var(--serif); font-size:19px; font-weight:600; line-height:1.12; color:#FBF6EC; text-shadow:0 1px 3px rgba(0,0,0,.4); }
.produce-card .pc-note{ position:relative; z-index:1; font-size:13px; color:rgba(251,246,236,.85); text-shadow:0 1px 2px rgba(0,0,0,.4); }
.season-panel[hidden]{ display:none; }

/* ---------- ingredient feature ---------- */
.feature{ display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; padding-top:64px; }
.feature h2{ font-size:44px; line-height:1.05; margin:14px 0 18px; }
.feature p{ font-size:18px; line-height:1.62; color:var(--body); margin:0 0 24px; }
.feature .feature-media{ aspect-ratio:5/4; border-radius:12px; overflow:hidden; }
.feature .feature-media img{ width:100%; height:100%; object-fit:cover; }
.link-underline{ font-size:15px; font-weight:600; color:var(--olive); border-bottom:2px solid var(--olive); padding-bottom:3px; }

/* ---------- supporters: "At the table" shelf ---------- */
.supporters{ margin-top:64px; background:var(--sponsor-bg); }
.supporters .wrap{ padding-top:44px; padding-bottom:48px; }
.supporters-head{ margin-bottom:22px; max-width:60ch; }
.supporters-head h2{ font-size:27px; margin:8px 0 6px; }
.supporters-head p{ font-size:15.5px; color:var(--muted); margin:0; }
/* one dark shelf bar; wordmarks sit on it like plates on a shelf — 4 per row → 3 rows */
.shelf{ background:#2E2A20; border-radius:14px; padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25); }
.sponsor{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; min-height:96px;
  padding:16px 18px; text-align:center; background:#37301f; border:1px solid #46402f; border-radius:10px; }
.sponsor:hover{ border-color:var(--terracotta); background:#3d3522; }
.sponsor img{ max-height:46px; max-width:100%; width:auto; object-fit:contain; opacity:1; }
.sponsor-blurb{ font-size:12.5px; color:var(--footer-muted); line-height:1.35; }
.sponsor-blurb:empty{ display:none; }

/* ================= ARTICLE ================= */
.post-hero{ position:relative; }
.post-hero .post-hero-media{ height:min(58vh,560px); overflow:hidden; }
.post-hero .post-hero-media img{ width:100%; height:100%; object-fit:cover; }
.post-hero-copy{ max-width:var(--wrap); margin:0 auto; padding:40px; }
.post-hero-copy .kicker{ margin-bottom:14px; display:block; }
.post-hero h1{ font-size:clamp(36px,4.6vw,60px); line-height:1.03; margin:0 0 16px; max-width:20ch; }
.post-hero .dek{ font-family:var(--serif); font-style:italic; font-size:23px; line-height:1.4; color:var(--body); margin:0 0 16px; max-width:34ch; }
.post-hero .byline{ font-size:15px; }

.post-body{ max-width:760px; margin:0 auto; padding:48px 40px 0; }
.post-body.wide{ max-width:900px; }
.article-body{ max-width:var(--measure); padding-inline:0; }
.article-body p{ font-size:19.5px; line-height:1.72; color:var(--body); margin:0 0 1.35em; }
.article-body h2{ font-size:30px; line-height:1.15; margin:1.8em 0 .5em; scroll-margin-top:20px; }
.article-body h2 .sec-no{ color:var(--terracotta); font-size:.62em; font-weight:600; margin-right:.5em; font-variant-numeric:tabular-nums; }
.article-body h3{ font-size:23px; margin:1.4em 0 .4em; }
.article-body > p:first-of-type::first-letter,.lead + p::first-letter{}
.article-body a{ border-bottom:1px solid rgba(95,107,57,.35); }
.article-body a:hover{ border-bottom-color:var(--olive); }
.article-body ul,.article-body ol{ font-size:19px; line-height:1.7; color:var(--body); padding-left:1.3em; margin:0 0 1.35em; }
.article-body li{ margin-bottom:.5em; }

/* drop-cap lead */
.lead{ font-family:var(--serif); font-size:26px; line-height:1.4; color:var(--ink); font-weight:400; margin:0 0 1.1em; }
.article-body p.lead{ font-family:var(--serif); font-size:27px; line-height:1.4; color:var(--ink); font-weight:400; }
.dropcap::first-letter{ float:left; font-family:var(--serif); font-weight:700; font-size:5.2em; line-height:.82; padding:6px 12px 0 0; color:var(--terracotta); }

/* pull-quote */
.pullquote{ margin:1.8em 0; padding:0 0 0 26px; border-left:4px solid var(--terracotta); }
.pullquote p{ font-family:var(--serif); font-size:28px; line-height:1.3; font-style:italic; color:var(--ink); margin:0; }

/* sourced blockquote */
.blockquote{ margin:1.8em 0; padding:22px 26px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.blockquote p{ font-family:var(--serif); font-size:21px; font-style:italic; margin:0 0 .5em; color:var(--ink); }
.blockquote cite{ font-style:normal; font-size:14.5px; color:var(--muted); }

/* callout */
.callout{ margin:1.8em 0; padding:22px 24px; background:#EDEEDF; border-radius:12px; border:1px solid var(--season-outline); }
.callout p{ font-size:18px; line-height:1.6; color:#3f4531; margin:0; }
.callout .callout-h{ display:block; font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); font-weight:600; margin-bottom:8px; }

/* note */
.note{ font-size:16.5px; line-height:1.55; color:var(--body); background:var(--sponsor-bg); border-radius:10px; padding:16px 18px; margin:1.6em 0; border-left:3px solid var(--terracotta); }
.note strong{ color:var(--ink); }

/* key-facts aside */
.key-facts{ margin:2em 0; background:#fff; border:1px solid var(--border); border-radius:14px; padding:24px 26px; }
.key-facts h3{ font-size:14px; letter-spacing:.1em; text-transform:uppercase; color:var(--olive); font-family:var(--sans); font-weight:600; margin:0 0 16px; }
.key-facts dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 18px; }
.key-facts dt{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); }
.key-facts dd{ margin:0; font-size:16px; color:var(--body); }

/* versus */
.versus{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:16.5px; background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.versus th,.versus td{ padding:14px 16px; text-align:left; border-bottom:1px solid var(--border); vertical-align:top; }
.versus thead th{ background:#EDEEDF; font-family:var(--serif); font-size:18px; }
.versus tbody th{ font-family:var(--sans); font-weight:600; color:var(--muted); font-size:14px; width:26%; }
.versus tr:last-child td,.versus tr:last-child th{ border-bottom:none; }

/* datatable */
.datatable{ width:100%; border-collapse:collapse; margin:1.8em 0; font-size:16.5px; }
.datatable caption{ text-align:left; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.datatable th,.datatable td{ padding:12px 14px; border-bottom:1px solid var(--border-2); text-align:left; }
.datatable thead th{ font-family:var(--sans); font-weight:600; font-size:13.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--olive); border-bottom:2px solid var(--olive); }
.datatable tbody tr:hover{ background:#fff; }
.datatable td.num{ font-variant-numeric:tabular-nums; }

/* statblocks */
.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:16px; margin:1.8em 0; }
.statblock{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 18px; text-align:center; }
.stat-num{ display:block; font-family:var(--serif); font-weight:700; font-size:40px; line-height:1; color:var(--terracotta); }
.stat-label{ display:block; font-size:13.5px; color:var(--muted); margin-top:8px; line-height:1.35; }

/* timeline */
.timeline{ list-style:none; margin:1.8em 0; padding:0; border-left:2px solid var(--season-outline); }
.timeline li{ position:relative; padding:0 0 22px 26px; }
.timeline li::before{ content:""; position:absolute; left:-7px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--olive); border:2px solid var(--paper); }
.timeline .t-when{ display:block; font-family:var(--sans); font-weight:600; font-size:14px; color:var(--olive); letter-spacing:.02em; }
.timeline .t-what{ display:block; font-size:17px; color:var(--body); margin-top:3px; }

/* charts */
.chart{ margin:1.8em 0; background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px 24px; }
.chart figcaption{ font-size:14px; color:var(--muted); margin-top:12px; }
.chart svg{ width:100%; height:auto; overflow:visible; }
.chart .bar-rect{ fill:var(--olive); }
.chart .bar-label{ font-family:var(--sans); font-size:13px; fill:var(--ink); }
.chart .bar-val{ font-family:var(--sans); font-size:12.5px; fill:var(--muted); font-variant-numeric:tabular-nums; }
.chart .axis{ stroke:var(--border-2); stroke-width:1; }
.chart .gridline{ stroke:#f0e9d9; stroke-width:1; }
.chart .line-path{ fill:none; stroke:var(--terracotta); stroke-width:2.5; }
.chart .line-dot{ fill:var(--terracotta); }

/* figures */
.article-figure{ margin:2em 0; }
.article-figure img{ width:100%; border-radius:12px; }
.article-figure figcaption{ font-size:14.5px; color:var(--muted); margin-top:10px; line-height:1.45; }
.article-figure.breakout{ width:min(1000px,92vw); margin-left:50%; transform:translateX(-50%); }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; margin:2em 0; }
.gallery figure{ margin:0; }
.gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; }
.gallery figcaption{ font-size:13.5px; color:var(--muted); margin-top:6px; }

/* map figure (frame only) */
.map-figure{ margin:2em 0; }
.map-figure .map-slot{ aspect-ratio:16/9; background:#EDEEDF; border:1px solid var(--season-outline); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; }
.map-figure figcaption{ font-size:14.5px; color:var(--muted); margin-top:10px; }

/* profile / org cards */
.profile-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:2em 0; }
.profile-card{ background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; }
.profile-card .p-photo{ width:64px; height:64px; border-radius:50%; object-fit:cover; margin-bottom:14px; }
.profile-card.no-photo::before{ content:""; display:block; width:64px; height:64px; border-radius:50%; background:#EDEEDF; margin-bottom:14px; }
.profile-card h3{ font-size:20px; margin:0 0 2px; }
.profile-card .p-role{ font-size:14px; color:var(--terracotta); font-weight:600; margin:0 0 10px; letter-spacing:.02em; }
.profile-card p{ font-size:15.5px; color:var(--body); margin:0 0 12px; line-height:1.55; }
.profile-card .p-links a,.p-attr{ font-size:14px; }
.org-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:2em 0; }
.org-card{ display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.org-card:hover{ border-color:var(--olive); }
.org-logo{ width:44px; height:44px; border-radius:10px; object-fit:cover; background:#EDEEDF; }
.org-card.no-logo .org-logo{ display:flex; }
.org-name{ font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); display:block; }
.org-host{ font-size:13.5px; color:var(--muted); }
.entity-ref{ font-weight:600; border-bottom:1px solid rgba(95,107,57,.35); }

/* related / further */
.related{ margin:2.5em 0 0; padding-top:24px; border-top:1px solid var(--border-2); }
.related h2{ font-size:22px; margin:0 0 16px; }
.related-links{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.related-links a{ display:flex; align-items:baseline; gap:10px; font-size:18px; font-family:var(--serif); font-weight:600; }
.related-links a::before{ content:"→"; color:var(--terracotta); }
.further-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:2em 0; }
.further-grid a{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px; font-family:var(--serif); font-weight:600; font-size:18px; }
.further-grid a:hover{ border-color:var(--olive); }

/* ---------- category / index pages ---------- */
.page-head{ background:var(--season); border-bottom:1px solid var(--season-outline); }
.page-head .wrap{ padding-top:56px; padding-bottom:48px; }
.page-head h1{ font-size:clamp(34px,4vw,52px); margin:12px 0 14px; }
.page-head .intro{ font-size:20px; color:var(--body); max-width:60ch; margin:0; line-height:1.55; }
.cat-list{ list-style:none; margin:40px 0 0; padding:0; display:grid; gap:0; }
.cat-list li{ border-bottom:1px solid var(--border-2); }
.cat-list a{ display:grid; grid-template-columns:120px 1fr auto; gap:24px; align-items:center; padding:24px 8px; color:inherit; }
.cat-list a:hover{ color:inherit; background:#fff; }
.cat-list .ci-media{ width:120px; aspect-ratio:4/3; border-radius:10px; overflow:hidden; }
.cat-list .ci-media img{ width:100%; height:100%; object-fit:cover; }
.cat-list h3{ font-size:24px; margin:0 0 6px; }
.cat-list .ci-dek{ font-size:16px; color:var(--body); margin:0; max-width:60ch; }
.cat-list .ci-meta{ font-size:13.5px; color:var(--muted); white-space:nowrap; }

/* CSS-only expander */
.more-toggle{ position:absolute; opacity:0; pointer-events:none; }
.more-hidden{ display:none; }
.more-toggle:checked ~ .more-hidden{ display:grid; }
.more-label{ display:inline-flex; align-items:center; gap:8px; margin-top:24px; cursor:pointer; font-weight:600; color:var(--olive); font-size:15.5px; }
.more-toggle:checked ~ .more-label{ display:none; }

/* simple content pages */
.prose{ max-width:70ch; margin:0 auto; padding:48px 40px; }
.prose h1{ font-size:clamp(34px,4vw,50px); margin:0 0 20px; }
.prose h2{ font-size:26px; margin:1.6em 0 .4em; }
.prose p{ font-size:19px; line-height:1.7; color:var(--body); margin:0 0 1.2em; }
.prose ul{ font-size:19px; line-height:1.7; color:var(--body); }
.contact-methods{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin:24px 0; }
.contact-card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:20px 22px; }
.contact-card svg{ width:26px; height:26px; color:var(--olive); margin-bottom:10px; }
.contact-card h3{ font-size:18px; margin:0 0 6px; }
.contact-card p{ font-size:15.5px; color:var(--body); margin:0; }

.err-wrap{ min-height:60vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:60px 40px; }
.err-wrap .code{ font-family:var(--serif); font-size:120px; line-height:1; color:var(--terracotta); font-weight:700; }
.err-wrap h1{ font-size:34px; margin:12px 0 10px; }
.err-wrap p{ font-size:19px; color:var(--body); margin:0 0 24px; }

/* styleguide helpers */
.sg-section{ padding:36px 0; border-bottom:1px solid var(--border-2); }
.sg-section > h2{ font-size:15px; letter-spacing:.1em; text-transform:uppercase; color:var(--terracotta); margin:0 0 20px; }
.sg-label{ font-size:13px; color:var(--muted); margin:24px 0 8px; font-weight:600; }

/* ================= responsive ================= */

/* --- collapse the inline nav into a menu below this width so the header never wraps --- */
@media (max-width:980px){
  .mainnav{
    position:absolute; left:0; right:0; top:100%; z-index:30;
    display:none; flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--border-2);
    box-shadow:0 18px 40px rgba(42,33,27,.12); padding:6px 0;
  }
  .site-header{ position:relative; }
  .mainnav.open{ display:flex; }
  .mainnav a{ padding:14px 40px; font-size:17px; border-bottom:1px solid var(--border); }
  .mainnav a:last-child{ border-bottom:none; }
  .menu-btn{ display:inline-flex; }
}

@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-media{ min-height:0; order:-1; aspect-ratio:16/10; }
  .hero-media img{ position:static; }
  .hero-copy{ padding:44px 40px; }
  .card-grid{ grid-template-columns:repeat(2,1fr); }
  .produce-grid{ grid-template-columns:repeat(3,1fr); }
  .feature{ grid-template-columns:1fr; gap:28px; }
  .feature .feature-media{ order:-1; }
  .shelf{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:640px){
  body{ font-size:17px; }
  .wrap{ padding-inline:20px; }
  .mainnav{ padding:6px 0; }
  .mainnav a{ padding:14px 20px; }
  .wordmark{ font-size:20px; }
  .header-tools{ gap:10px; }
  .btn{ padding:10px 15px; font-size:13.5px; }
  .card-grid{ grid-template-columns:1fr; }
  .card h3{ min-height:0; }
  .produce-grid{ grid-template-columns:repeat(2,1fr); }
  .season-band{ padding:44px 0; }
  .season-band h2{ font-size:29px; }
  .section{ padding-top:44px; }
  .section-head h2{ font-size:27px; }
  .feature h2{ font-size:33px; }

  .shelf{ grid-template-columns:repeat(2,1fr); }
  .sponsor{ min-height:84px; }

  .hero-copy{ padding:36px 20px; }
  .hero h1{ font-size:36px; }
  .hero .dek{ font-size:19px; max-width:none; }

  .post-hero .post-hero-media{ height:auto; aspect-ratio:4/3; }
  .post-hero-copy,.post-body,.prose{ padding-inline:20px; }
  .post-body{ padding-top:32px; }
  .post-hero-copy{ padding-top:28px; padding-bottom:8px; }
  .post-hero .dek{ font-size:20px; max-width:none; }
  .article-body p{ font-size:18px; line-height:1.68; }
  .article-body h2{ font-size:25px; }
  .article-body ul,.article-body ol{ font-size:17.5px; }
  .lead,.article-body p.lead{ font-size:21px; }
  .dropcap::first-letter{ font-size:4em; padding-right:9px; }
  .pullquote p{ font-size:22px; }

  /* tables: shrink so cells wrap instead of overflowing */
  .article-body .versus,.article-body .datatable{ font-size:14.5px; }
  .versus th,.versus td,.datatable th,.datatable td{ padding:10px 11px; }
  .versus tbody th{ width:30%; }
  .datatable caption{ font-size:12px; }

  .statrow{ grid-template-columns:1fr 1fr; gap:12px; }
  .stat-num{ font-size:34px; }

  .cat-list a{ grid-template-columns:1fr; gap:12px; padding:20px 4px; }
  .cat-list .ci-media{ width:100%; aspect-ratio:16/9; }
  .cat-list .ci-meta{ white-space:normal; }
  .cat-list h3{ font-size:22px; }

  .key-facts{ padding:20px 20px; }
  .key-facts dl{ grid-template-columns:1fr; gap:2px 0; }
  .key-facts dt{ margin-top:6px; }
  .key-facts dd{ margin-bottom:8px; }

  .footer-top{ flex-direction:column; gap:28px; }
  .footer-cols{ gap:28px 40px; }
  .article-figure.breakout{ width:100%; margin-left:0; transform:none; }
  .contact-methods{ grid-template-columns:1fr; }
}

@media (max-width:400px){
  .produce-grid{ grid-template-columns:repeat(2,1fr); }
  .statrow{ grid-template-columns:1fr; }
  .shelf{ grid-template-columns:1fr; }
}

/* sp-roll-normalize: a logo roll keeps object-fit and loses its geometry.
   It used to set width:auto, height:46px, max-width:172px and min-width:30px, which let
   every plate in the roll shrink-wrap its own artwork — evbb measured 62px next to 204px
   in the SAME ROW. The operator's rule is that the dark ground is unified whatever the
   logo's size, so the plate cannot be sized by the logo. Geometry belongs to Design. */
[class~="roll"] .sponsor img,[class*="roll-"] .sponsor img,[class*="-roll"] .sponsor img{object-fit:contain;background:transparent}

/* sp-final-fix: featured 3 (with text) + compact logo-only roll */
.shelf-featured{ background:#2E2A20; border-radius:14px; padding:14px; display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:12px; }
.shelf-roll{ background:#2E2A20; border-radius:14px; padding:12px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.shelf-roll .sponsor{ min-height:64px; }
.shelf-roll .sponsor-blurb{ display:none; }
.shelf-roll .sponsor img{ max-height:34px; object-position:center center; }
.shelf-featured .sponsor img{ object-position:center center; }

/* sp-final-fix-2: roll logos fill the full tile width (were ultra-small) */
.shelf-roll .sponsor{padding:14px 12px!important;min-height:72px;}
.shelf-roll .sponsor img{width:100%!important;max-width:100%!important;height:auto!important;max-height:50px!important;padding:0!important;object-fit:contain!important;object-position:center center!important}

/* sp-final-fix-3: EVEN rows — uniform tile height + height-capped logos */
.shelf-roll{grid-auto-rows:1fr!important;align-items:stretch!important;}
.shelf-roll .sponsor{height:100%!important;min-height:84px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;}
.shelf-roll .sponsor img{width:auto!important;max-width:86%!important;height:auto!important;max-height:44px!important;padding:0!important;object-fit:contain!important;object-position:center!important;}
/* sp-text-contrast: sponsor copy measured against its OWN ground as a WCAG contrast RATIO, not as a
   luminance subtraction. The subtraction passed capitanalatriste's blurbs at a 75-point gap
   while they sat at 2.8:1 and could not be read. Bar is 4.5:1 for body copy, 3:1 for large or
   bold; opacity is folded in, because it compounds down the tree and computed colour ignores
   it. The lift keeps Design's hue and saturation and moves lightness only, by the smallest
   step that clears the bar, so a warm blurb on near-black stays warm. Colour only — size,
   weight, family and spacing are exactly as delivered. */
.sponsor-blurb.sponsor-blurb{color:rgb(158,152,133)!important;opacity:1!important}

/* 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. */
.shelf.shelf-featured .sponsor.sponsor img{height:46px!important;display:block!important;width:100%!important}
.shelf.shelf-roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.shelf.shelf-roll .sponsor.sponsor img{height:38px!important;display:block!important;width:100%!important}

/* op-centre-roll-marks: operator: bottom row logos are not centred — measured 13px of space on
   the left against 47px on the right. The roll tier wraps its mark in an <a class="sp-logo">
   Design never styled, so inside the column-flex tile the anchor is a shrink-to-fit item sitting
   at its own width, not the tile's. Give the anchor and the mark the tile's width and the
   artwork centres itself with object-fit, whatever the wordmark's aspect. */
/* ⚠️ AN EARLIER PER-DOMAIN FIX IS IN THE WAY: `.shelf-roll .sponsor img` already pins
   width:auto!important;max-width:86%!important, which is where 207px in a 241px anchor comes
   from — and nothing gives the mark auto margins here, so it sat flush left. Beaten with a
   four-class selector rather than edited, so the earlier block stays intact. */
.shelf.shelf-roll .sponsor .sp-logo.sp-logo{display:block!important;width:100%!important}
.shelf.shelf-roll .sponsor.sponsor img{width:100%!important;max-width:100%!important;object-position:center center!important}

/* op-head-row-fit: header.site-header > div.wrap is a nowrap flex row holding a.wordmark 218px
   + div.header-tools 196px + 24px gap = 438px at a 390px viewport, so the tools hung out to
   right=458 and the page scrolled 97px sideways. The row is allowed to wrap at phone width:
   the tools drop to their own line under the wordmark, right-aligned as they already are. */
@media (max-width:640px){
  .site-header > .wrap{flex-wrap:wrap;row-gap:10px}
  .site-header .header-tools{margin-left:auto}
}

/* op-shelf-fit: the featured supporters shelf held three auto tracks that could not shrink
   below their content — measured 103 + 95 + 101 + 24px of gaps = 322px inside a 280px
   container at 320, which cut the third tile off and scrolled the page 37px sideways.
   One tile per row below 520px, so each keeps Design's full tile treatment at a readable
   width. Desktop stays three tracks of 356px. */
@media (max-width:520px){
  .shelf-featured{grid-template-columns:minmax(0,1fr)}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (phone: .shelf.shelf-featured 5 rows at 640). Operator: "we should probably limit that to display only 2" — held to two rows in that width band only; the copy stays in the markup. */
@media (max-width:640px){
  .shelf.shelf-featured .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;max-height:2lh!important;min-height:0!important;overflow:hidden!important}
}
/* op-blurb-two-rows:end */
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--serif); color: var(--ink); font-weight: 600;}
.cat-list h2:where(.rt-h3){font-size: 24px; margin: 0px 0px 6px;}
.contact-card h2:where(.rt-h3){font-size: 18px; margin: 0px 0px 6px;}
@media (max-width: 640px){.cat-list h2:where(.rt-h3){font-size: 22px;}}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.ci-media > img,
  a.card > div.card-media > img,
  div.feature > div.feature-media > img,
  div.hero-grid > div.hero-media > img,
  div.post-hero > div.post-hero-media > img){height:auto}
/* op-img-dims:end */