/* ============================================================
   THE POSITIVE DISPATCH — shared stylesheet
   Editorial front page + data cockpit. Newsprint / ink / red.
   ============================================================ */

/* ---- Fonts ---- */


/* ---- Tokens ---- */
:root{
  --paper:#FBFAF7;
  --paper-2:#F1EEE7;
  --paper-3:#EAE6DC;
  --ink:#14110E;
  --ink-soft:#39332B;
  --muted:#6B655C;
  --faint:#A39C90;
  --rule:#DDD8CE;
  --dark:#1C1712;         /* dark backing chip (sponsor logos, cockpit) */
  --accent:#C42A2A;
  --accent-2:#D9776F;
  --accent-3:#E0A39C;
  --accent-soft:#FBEEEC;
  --good:#1F7A5A;

  --serif:'Source Serif 4',Georgia,serif;
  --display:'Zilla Slab',Georgia,serif;
  --sans:'Public Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --maxw:1280px;
  --gutter:34px;
  --measure:70ch;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.08;margin:0;}
p{margin:0 0 1.1em;}
::selection{background:var(--accent);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}
.wrap-wide{max-width:1500px;margin:0 auto;padding:0 var(--gutter);}
.label{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.kicker{font-family:var(--mono);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}

/* skip link */
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;}
.skip:focus{left:8px;top:8px;}

/* ---- Annotation affordance: empty data-fill slots show their spec ---- */
[data-fill]:empty{outline:1px dashed rgba(196,42,42,.32);outline-offset:3px;min-height:.7em;border-radius:2px;}
[data-fill]:empty::before{
  content:attr(data-fill);
  font-family:var(--sans);font-style:italic;font-weight:400;
  font-size:12.5px;line-height:1.3;letter-spacing:0;text-transform:none;
  color:#BCA9A0;white-space:normal;display:inline-block;vertical-align:middle;
}

/* =========================================================
   MASTHEAD
   ========================================================= */
.masthead{border-bottom:3px double var(--ink);text-align:center;padding:26px var(--gutter) 16px;}
.masthead .note{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:9px;margin-bottom:14px;text-transform:uppercase;}
.masthead .note .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;animation:pulse 2.4s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.wordmark{font-family:var(--display);font-weight:700;font-size:clamp(38px,6vw,58px);letter-spacing:-.01em;line-height:.98;color:var(--ink);}
.wordmark b{color:var(--accent);font-weight:700;}
.tagline{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:8px;}

/* =========================================================
   NAV  (CSS-only submenus + mobile checkbox)
   ========================================================= */
.nav{border-bottom:1px solid var(--rule);position:relative;background:var(--paper);z-index:60;}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:flex;align-items:center;justify-content:center;gap:6px;min-height:52px;}
.nav-toggle{position:absolute;opacity:0;pointer-events:none;}
.nav-burger{display:none;}
.nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:2px;}
.nav > .nav-inner > ul > li{position:relative;}
.nav a[data-nav],.nav .browse{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--sans);font-weight:600;font-size:15px;
  padding:14px 16px;color:var(--ink);white-space:nowrap;
}
.nav a[data-nav]:hover,.nav .browse:hover{color:var(--accent);}
.nav .active > a[data-nav]{color:var(--accent);}
/* caret only when the item actually has children */
.has-sub:has(.nav-sub:not(:empty)) > a[data-nav]::after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);display:inline-block;margin-left:3px;
}
/* dropdown */
.nav-sub{
  list-style:none;margin:0;padding:8px 0;
  position:absolute;top:100%;left:50%;transform:translateX(-50%);
  min-width:230px;background:var(--paper);border:1px solid var(--ink);
  box-shadow:0 24px 48px -18px rgba(20,17,14,.4);
  display:none;flex-direction:column;z-index:80;
}
.nav-sub:empty{display:none !important;}          /* collapse empty */
.has-sub:hover > .nav-sub:not(:empty),
.has-sub:focus-within > .nav-sub:not(:empty){display:flex;}
.nav-sub li{width:100%;}
.nav-sub a{display:block;font-family:var(--sans);font-size:14.5px;padding:9px 20px;color:var(--ink-soft);}
.nav-sub a:hover{background:var(--paper-2);color:var(--accent);}
.nav .browse{border:1px solid var(--rule);border-radius:100px;padding:8px 16px;margin-left:8px;font-size:14px;}
.nav .browse:hover{border-color:var(--accent);}
.nav .browse svg{width:15px;height:15px;}

/* =========================================================
   COCKPIT (data band)
   ========================================================= */
.cockpit{border-bottom:2px solid var(--ink);background:var(--paper);}
.cockpit-grid{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:1fr 1.4fr .95fr;}
.cockpit-cell{padding:26px 30px;}
.cockpit-cell + .cockpit-cell{border-left:1px solid var(--rule);}
.cockpit .big-stat{font-family:var(--display);font-weight:700;font-size:clamp(44px,4.4vw,60px);line-height:.9;}
.cockpit .big-stat sup{font-size:.4em;color:var(--accent);vertical-align:super;font-weight:700;}
.stat-lines{margin-top:20px;display:flex;flex-direction:column;gap:9px;font-family:var(--mono);font-size:13px;}
.stat-lines .row{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px dotted var(--paper-3);}
.stat-lines .row:last-child{border-bottom:0;}
.stat-lines .row .k{color:var(--muted);}
.stat-lines .row .v{font-weight:600;}
.stat-lines .row .v.down{color:var(--accent);}

/* map figure inside cockpit */
.cockpit .map-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px;}
.map-figure{margin:0;}
.map-figure svg{width:100%;height:auto;display:block;border:1px solid var(--ink);background:var(--paper-2);}
.map-figure figcaption{font-family:var(--sans);font-size:13px;color:var(--muted);margin-top:8px;line-height:1.4;}
.map-region{fill:var(--accent-3);stroke:var(--paper);stroke-width:1.5;transition:opacity .15s;}
.map-region.mid{fill:var(--accent-2);}
.map-region.high{fill:var(--accent);}
.map-region:hover{opacity:.75;cursor:pointer;}
.map-label{font-family:var(--mono);font-size:9px;fill:var(--ink);letter-spacing:.04em;}
.map-legend{display:flex;gap:16px;margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--muted);flex-wrap:wrap;}
.map-legend span{display:inline-flex;align-items:center;gap:6px;}
.map-legend i{width:11px;height:11px;display:inline-block;}

/* countdown + U=U */
.countdown{display:flex;gap:8px;margin-top:14px;}
.cd-box{flex:1;border:1px solid var(--rule);padding:9px 0;text-align:center;}
.cd-box .n{font-family:var(--display);font-weight:700;font-size:26px;line-height:1;}
.cd-box .u{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--faint);text-transform:uppercase;}
.uu{border:1px solid var(--accent);background:var(--accent-soft);padding:12px 14px;margin-top:14px;}
.uu b{font-family:var(--display);font-size:17px;color:var(--accent);}
.uu p{font-size:13.5px;color:var(--ink-soft);line-height:1.45;margin:3px 0 0;font-family:var(--sans);}

/* =========================================================
   LEAD FEATURE + STREAM
   ========================================================= */
.lead-feature{padding:38px 0 30px;border-bottom:1px solid var(--rule);}
.lead-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;}
.lead-feature h1{font-size:clamp(32px,4vw,46px);margin:12px 0 0;}
.lead-standfirst{font-size:20px;line-height:1.55;color:var(--ink-soft);margin:16px 0 0;max-width:var(--measure);}
.lead-meta{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin-top:16px;text-transform:uppercase;}
.lead-media img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);}

.divider{display:flex;align-items:center;gap:16px;padding:30px 0 20px;}
.divider::before,.divider::after{content:"";height:1px;flex:1;background:var(--ink);}
.divider span{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}

.feed{display:grid;gap:30px 40px;}
.feed.cols-2{grid-template-columns:1.3fr 1fr;}
.feed.cols-3{grid-template-columns:repeat(3,1fr);}
.post{border-bottom:1px solid var(--rule);padding-bottom:22px;}
.post .kicker{margin-bottom:8px;display:block;}
.post h3{font-family:var(--display);font-weight:600;font-size:23px;line-height:1.14;}
.post.small h3{font-size:19px;}
.post p{font-size:16px;line-height:1.55;color:var(--ink-soft);margin:8px 0 0;}
.post .meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:10px;}
.post a.more{color:var(--accent);font-family:var(--sans);font-weight:600;font-size:14px;margin-top:10px;display:inline-block;}
.post img.thumb{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);margin-bottom:12px;}

/* inline data explainer card in stream */
.data-mini{display:flex;gap:16px;align-items:center;border-bottom:1px solid var(--rule);padding-bottom:22px;}
.data-mini .fig{flex:0 1 auto;min-width:0;text-align:center;padding-right:16px;border-right:1px solid var(--rule);}
.data-mini .fig .n{font-family:var(--display);font-weight:700;font-size:34px;color:var(--accent);line-height:.95;}
.data-mini .fig .u{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--faint);text-transform:uppercase;margin-top:3px;display:block;}

/* CSS-only "read more" expander */
.more-toggle{position:absolute;opacity:0;pointer-events:none;}
.more-hidden{display:none;}
.more-toggle:checked ~ .more-hidden{display:grid;}
.more-toggle:checked ~ .more-btn{display:none;}
.more-btn{display:inline-flex;align-items:center;gap:8px;justify-self:start;cursor:pointer;font-family:var(--sans);font-weight:600;font-size:15px;color:var(--accent);border:1px solid var(--accent);border-radius:100px;padding:11px 22px;margin-top:26px;}
.more-btn:hover{background:var(--accent);color:#fff;}

/* =========================================================
   SPONSORS
   ========================================================= */
.sponsors{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:44px 0;}
.sponsors h2{font-family:var(--display);font-size:26px;text-align:center;}
.sponsors .sub{font-family:var(--sans);font-size:15px;color:var(--muted);text-align:center;margin:6px 0 28px;}
.sponsor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.sponsor-grid .sponsor:first-child{grid-column:span 2;}
.sponsor{display:flex;flex-direction:column;gap:10px;text-decoration:none;}
.sponsor img{width:100%;aspect-ratio:3.4/1;object-fit:contain;background:var(--dark);border:1px solid var(--ink);padding:16px 22px;border-radius:6px;transition:transform .15s;}
.sponsor:first-child img{aspect-ratio:5/1;}
.sponsor:hover img{transform:translateY(-2px);}
.sponsor-blurb{font-family:var(--sans);font-size:13.5px;color:var(--muted);line-height:1.45;}
.sponsor-blurb:empty{display:none;}

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer{background:var(--ink);color:#E9E3D8;padding:52px 0 30px;}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px;}
.site-footer .wordmark{color:#fff;font-size:30px;text-align:left;}
.site-footer .wordmark b{color:var(--accent-2);}
.site-footer p{color:#B8B0A2;font-family:var(--sans);font-size:14.5px;line-height:1.6;max-width:34ch;margin-top:12px;}
.foot-col h4{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#8C857A;margin-bottom:14px;}
.foot-col a{display:block;color:#E9E3D8;font-family:var(--sans);font-size:15px;padding:5px 0;}
.foot-col a:hover{color:var(--accent-3);}
.foot-bottom{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-family:var(--mono);font-size:12px;color:#8C857A;letter-spacing:.04em;}
.disclaimer{font-family:var(--sans);font-size:13px;color:#8C857A;max-width:80ch;margin-top:8px;line-height:1.5;}

/* =========================================================
   ARTICLE / PAGE BODY
   ========================================================= */
.page-hero{border-bottom:1px solid var(--rule);padding:40px 0 32px;}
.breadcrumb{font-family:var(--sans);font-size:14px;color:var(--muted);margin-bottom:16px;}
.breadcrumb a:hover{color:var(--accent);}
.breadcrumb .sep{color:var(--faint);margin:0 6px;}
.page-hero h1{font-size:clamp(34px,4.6vw,52px);max-width:20ch;}
.article-meta{font-family:var(--mono);font-size:13.5px;letter-spacing:.05em;color:var(--muted);margin-top:18px;text-transform:uppercase;}
.hero-media{margin-top:28px;}
.hero-media img{width:100%;aspect-ratio:21/9;object-fit:cover;border:1px solid var(--rule);}
.hero-media figcaption{font-family:var(--sans);font-size:13.5px;color:var(--muted);margin-top:8px;}

.article{padding:36px 0 20px;}
.article-body{max-width:var(--measure);margin:0 auto;font-size:20px;line-height:1.72;}
.article-body > h2{font-family:var(--display);font-size:30px;margin:1.5em 0 .5em;}
.article-body > h3{font-family:var(--display);font-size:23px;margin:1.4em 0 .4em;}
.article-body > p{margin:0 0 1.15em;}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.3em;}
.article-body li{margin-bottom:.6em;}
.article-body ul li::marker{color:var(--accent);}
.article-body strong{font-weight:700;}
.article-body em{font-style:italic;}

/* =========================================================
   PALETTE_SPEC COMPONENTS
   ========================================================= */
.lead{font-size:23px;line-height:1.5;color:var(--ink);font-weight:400;border-left:3px solid var(--accent);padding-left:20px;margin:0 0 1.3em;}

.pullquote{margin:1.6em 0;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:20px 0;}
.pullquote p{font-family:var(--display);font-weight:500;font-size:28px;line-height:1.22;margin:0;text-align:center;}

.blockquote{margin:1.6em 0;padding:4px 0 4px 24px;border-left:4px solid var(--accent-3);}
.blockquote p{font-size:21px;line-height:1.5;font-style:italic;margin:0 0 .4em;}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:15px;color:var(--muted);font-weight:600;}

.callout{background:var(--accent-soft);border:1px solid var(--accent);border-left-width:5px;padding:20px 24px;margin:1.6em 0;}
.callout p{font-family:var(--sans);font-size:18px;line-height:1.55;margin:0 0 .6em;color:var(--ink-soft);}
.callout p:last-child{margin:0;}

.note{font-family:var(--sans);font-size:16px;line-height:1.55;color:var(--muted);background:var(--paper-2);border-radius:8px;padding:14px 18px;margin:1.4em 0;position:relative;padding-left:44px;}
.note::before{content:"";position:absolute;left:16px;top:15px;width:16px;height:16px;border:2px solid var(--muted);border-radius:50%;}
.note::after{content:"i";position:absolute;left:22px;top:14px;font-family:var(--display);font-weight:700;font-size:13px;color:var(--muted);}

/* tables */
.versus,.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-family:var(--sans);font-size:16px;}
.versus th,.versus td,.datatable th,.datatable td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top;}
.versus thead th,.datatable thead th{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--ink);}
.datatable tbody tr:nth-child(even){background:var(--paper-2);}
.versus{table-layout:fixed;}
.versus tbody th{font-family:var(--display);font-weight:600;font-size:17px;width:34%;}
.versus td{width:33%;}
.versus .col-a{background:var(--accent-soft);}
.versus tbody td:first-of-type{border-left:1px solid var(--rule);}

/* statblocks */
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:1.6em 0;}
.statblock{background:var(--paper);padding:22px 20px;display:flex;flex-direction:column;gap:8px;}
.stat-num{font-family:var(--display);font-weight:700;font-size:40px;line-height:.95;color:var(--accent);}
.stat-label{font-family:var(--sans);font-size:14.5px;line-height:1.4;color:var(--ink-soft);}

/* timeline */
.timeline{list-style:none;margin:1.6em 0;padding:0;border-left:2px solid var(--rule);}
.timeline li{position:relative;padding:0 0 26px 28px;}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--accent);border:2px solid var(--paper);}
.t-when{display:block;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--accent);font-weight:600;margin-bottom:3px;}
.t-what{display:block;font-family:var(--serif);font-size:18px;line-height:1.45;}

/* charts */
.chart{margin:1.6em 0;border:1px solid var(--rule);background:#fff;padding:20px;}
.chart svg{width:100%;height:auto;overflow:visible;}
.chart figcaption{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:14px;line-height:1.45;}
.chart .bar-rect{fill:var(--accent);}
.chart .bar-rect.dim{fill:var(--accent-3);}
.chart .bar-rect.dark{fill:var(--ink);}
.chart .axis{stroke:var(--rule);stroke-width:1;}
.chart .grid{stroke:var(--paper-3);stroke-width:1;}
.chart .lbl{font-family:var(--mono);font-size:11px;fill:var(--muted);}
.chart .val{font-family:var(--mono);font-size:11px;fill:var(--ink);font-weight:600;}
.chart .line-path{fill:none;stroke:var(--accent);stroke-width:2.5;}
.chart .line-dot{fill:var(--accent);}
.chart .line-area{fill:var(--accent);opacity:.08;}
.chart .donut-track{fill:none;stroke:var(--paper-3);}
.chart .donut-val{fill:none;stroke:var(--accent);stroke-linecap:butt;}
.chart .donut-center{font-family:var(--display);font-weight:700;fill:var(--ink);}

/* figures / gallery */
.article-figure{margin:1.8em 0;}
.article-figure img{width:100%;border:1px solid var(--rule);}
.article-figure figcaption,.gallery figcaption{font-family:var(--sans);font-size:14px;color:var(--muted);margin-top:8px;line-height:1.4;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:1.8em 0;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);}

/* cards */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:1.6em 0;}
.profile-card{border:1px solid var(--rule);background:#fff;padding:22px;}
.profile-card .p-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;background:var(--paper-3);margin-bottom:14px;}
.profile-card.no-photo::before{content:"";display:block;width:64px;height:64px;border-radius:50%;background:var(--dark);margin-bottom:14px;}
.profile-card h3{font-family:var(--display);font-size:20px;}
.profile-card .p-role{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:4px 0 10px;}
.profile-card p{font-size:16px;line-height:1.5;color:var(--ink-soft);}
.profile-card .p-links a{color:var(--accent);font-family:var(--sans);font-weight:600;font-size:14.5px;margin-right:14px;}
.profile-card .p-attr{font-family:var(--sans);font-size:12.5px;color:var(--faint);margin-top:10px;}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:1.6em 0;}
.org-card{display:flex;align-items:center;gap:14px;border:1px solid var(--rule);background:#fff;padding:14px 16px;}
.org-card:hover{border-color:var(--accent);}
.org-logo{width:52px;height:52px;object-fit:contain;background:var(--dark);border-radius:6px;padding:8px;flex:0 0 auto;}
.org-card.no-logo{padding-left:16px;}
.org-card.no-logo::before{content:"";width:52px;height:52px;border-radius:6px;background:var(--dark);flex:0 0 auto;}
.org-name{font-family:var(--display);font-weight:600;font-size:17px;display:block;}
.org-host{font-family:var(--mono);font-size:12.5px;color:var(--muted);}
.org-card > span{display:flex;flex-direction:column;gap:2px;min-width:0;}
.org-name,.org-host{overflow:hidden;text-overflow:ellipsis;}

.entity-ref{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-3);}
.entity-ref:hover{background:var(--accent-soft);}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:1.6em 0;}
.further-grid a{border:1px solid var(--rule);background:#fff;padding:18px 20px;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;display:flex;align-items:center;justify-content:space-between;gap:12px;}
.further-grid a::after{content:"→";color:var(--accent);}
.further-grid a:hover{border-color:var(--accent);background:var(--accent-soft);}

/* related-links (article end) — collapses when empty */
.related{border-top:2px solid var(--ink);margin-top:44px;padding-top:26px;}
.related > h2{font-family:var(--display);font-size:24px;margin-bottom:18px;}
.related-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.related-links:empty{display:none;}
.related:has(.related-links:empty){display:none;}   /* whole block collapses */
.related-links li a{display:flex;flex-direction:column;gap:6px;border:1px solid var(--rule);background:#fff;padding:16px 18px;height:100%;}
.related-links li a:hover{border-color:var(--accent);background:var(--accent-soft);}
.related-links .rl-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.related-links .rl-title{font-family:var(--display);font-weight:600;font-size:18px;line-height:1.2;}

/* =========================================================
   CATEGORY (archive) TEMPLATE
   ========================================================= */
.cat-intro{max-width:var(--measure);font-size:20px;line-height:1.6;color:var(--ink-soft);}
.cat-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:26px 0 4px;padding-top:20px;border-top:1px solid var(--rule);}
.cat-toolbar .label{margin-right:4px;}
.chip{font-family:var(--sans);font-size:14px;font-weight:600;color:var(--ink-soft);border:1px solid var(--rule);border-radius:100px;padding:7px 15px;}
.chip.on,.chip:hover{border-color:var(--accent);color:var(--accent);}
.cat-list{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 30px;}
.cat-list:empty::after{content:"Posts in this section will appear here.";grid-column:1/-1;font-family:var(--sans);color:var(--muted);padding:30px 0;}
.cat-list > li{border-bottom:1px solid var(--rule);padding-bottom:20px;}
.cat-list a{display:block;}
.cat-list img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule);margin-bottom:12px;}
.cat-list .cl-kicker{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.cat-list h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.16;margin:7px 0 6px;}
.cat-list p{font-family:var(--serif);font-size:16px;line-height:1.5;color:var(--ink-soft);margin:0;}
.cat-list .meta{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:9px;}

/* =========================================================
   CONTACT FORM
   ========================================================= */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:48px;align-items:start;}
.contact-methods{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;}
.contact-methods li{display:flex;gap:16px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--rule);}
.contact-methods svg{width:24px;height:24px;stroke:var(--accent);flex:0 0 auto;margin-top:2px;}
.contact-methods .m-label{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);display:block;}
.contact-methods .m-value{font-family:var(--display);font-size:19px;}
.form-field{margin-bottom:18px;}
.form-field label{display:block;font-family:var(--sans);font-weight:600;font-size:14.5px;margin-bottom:7px;}
.form-field label .req{color:var(--accent);}
.form-field input,.form-field textarea{width:100%;font-family:var(--serif);font-size:17px;padding:13px 15px;border:1px solid var(--rule);background:#fff;color:var(--ink);}
.form-field input:focus,.form-field textarea:focus{outline:2px solid var(--accent);border-color:var(--accent);}
.form-field textarea{min-height:150px;resize:vertical;}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:16px;background:var(--accent);color:#fff;border:0;border-radius:6px;padding:14px 28px;cursor:pointer;}
.btn:hover{background:#a31f1f;}

/* =========================================================
   404
   ========================================================= */
.err{text-align:center;padding:90px var(--gutter);}
.err .code{font-family:var(--display);font-weight:700;font-size:clamp(90px,16vw,180px);line-height:.9;color:var(--accent);}
.err h1{font-size:clamp(28px,4vw,42px);margin-top:10px;}
.err p{font-family:var(--sans);font-size:18px;color:var(--muted);max-width:44ch;margin:16px auto 26px;}

/* generic section heading */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;}
.section-head h2{font-size:26px;}
.section-head .see-all{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--accent);white-space:nowrap;}
.pad{padding:40px 0;}
.pad-sm{padding:28px 0;}

/* styleguide helpers */
.sg-section{padding:36px 0;border-bottom:1px solid var(--rule);}
.sg-section > h2{font-family:var(--display);font-size:15px;font-family:var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:22px;}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;}
.sw{border:1px solid var(--rule);}
.sw .chip-c{height:64px;}
.sw .meta{padding:8px 10px;font-family:var(--mono);font-size:11.5px;}
.sw .meta b{display:block;font-family:var(--sans);font-size:13px;text-transform:none;letter-spacing:0;}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  :root{--gutter:22px;}
  body{font-size:18px;}
  .cockpit-grid{grid-template-columns:1fr;}
  .cockpit-cell + .cockpit-cell{border-left:0;border-top:1px solid var(--rule);}
  .lead-grid{grid-template-columns:1fr;gap:26px;}
  .lead-media{order:-1;}
  .feed.cols-2,.feed.cols-3{grid-template-columns:1fr 1fr;}
  .cat-list{grid-template-columns:1fr 1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .contact-grid{grid-template-columns:1fr;gap:30px;}
  .sponsor-grid{grid-template-columns:repeat(3,1fr);}
  .gallery{grid-template-columns:1fr 1fr;}

  /* mobile nav */
  .nav-inner{justify-content:space-between;flex-wrap:wrap;min-height:56px;}
  .nav-burger{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-family:var(--sans);font-weight:700;font-size:15px;padding:10px 4px;margin-left:auto;}
  .nav-burger svg{width:22px;height:22px;}
  .nav > .nav-inner > ul{display:none;flex-direction:column;width:100%;align-items:stretch;gap:0;}
  .nav-toggle:checked ~ ul{display:flex;}
  .nav > .nav-inner > ul > li{border-top:1px solid var(--rule);}
  .nav a[data-nav]{padding:15px 6px;justify-content:space-between;width:100%;}
  .nav-sub{position:static;transform:none;border:0;box-shadow:none;padding:0 0 8px;min-width:0;background:var(--paper-2);}
  .has-sub:hover > .nav-sub:not(:empty),.has-sub:focus-within > .nav-sub:not(:empty){display:flex;}
  .nav-sub a{padding-left:22px;}
  .nav .browse{margin:10px 6px;justify-content:center;}
}
@media (max-width:560px){
  :root{--gutter:18px;}
  body{font-size:17px;}
  .article-body{font-size:18px;}
  .lead-standfirst{font-size:18px;}
  .feed.cols-2,.feed.cols-3,.cat-list,.gallery,.foot-grid{grid-template-columns:1fr;}
  .sponsor-grid{grid-template-columns:1fr 1fr;}
  .sponsor-grid .sponsor:first-child{grid-column:span 2;}
  .divider span{font-size:10.5px;letter-spacing:.12em;white-space:normal;text-align:center;}
  .pullquote p{font-size:22px;}
  .lead{font-size:20px;}
  .data-mini{flex-direction:column;align-items:flex-start;gap:12px;}
  .data-mini .fig{border-right:0;padding-right:0;border-bottom:1px solid var(--rule);padding-bottom:10px;text-align:left;}
  .foot-bottom{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}
.sponsor a.sp-logo{display:contents;}   /* logo link is layout-transparent so Design's img sizing still applies */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px;}
.sponsor-blurb a:hover{opacity:.8;}
.sponsor .sp-domain{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;opacity:.75;font-size:.9em;letter-spacing:.02em;}
.sponsor .sp-domain:hover{text-decoration:underline;opacity:1;}

/* pipeline fix: Design hid only :empty nav-sub; filled dropdowns must also collapse by default */
.nav .has-sub > .nav-sub{display:none;}
.nav .has-sub:hover > .nav-sub:not(:empty),
.nav .has-sub:focus-within > .nav-sub:not(:empty){display:flex;}

/* 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-grid .sponsor.sponsor img{height:76px!important;display:block!important;width:346px!important;max-width:100%!important;flex:none!important}

/* op-blurb-rows: money blurbs ran to 5 rows at 390, 1066px of tier across
   11 tiles. Operator: blurbs should show "2-3 rows max" on mobile —
   a blurb that long eats the screen and, in a two-column grid, rewraps into more height than
   the columns save. Held to three rows at phone width; the copy stays in the markup and
   desktop is untouched. Only the tier(s) measured past three rows are clamped. */
@media (max-width:640px){
  .sponsor-grid .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:60px!important;min-height:0!important;overflow:hidden!important}
}
/* op-heading-levels */
h2:where(.rt-h3){font-family: var(--display); font-weight: 700; line-height: 1.08; margin: 0px;}
.post h2:where(.rt-h3){font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1.14;}
.post.small h2:where(.rt-h3){font-size: 19px;}
.cat-list h2:where(.rt-h3){font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.16; margin: 7px 0px 6px;}
/* op-heading-levels:end */

/* op-tablet-gutter — text never sits on the screen edge between the mobile guard and the max-width */
@media (min-width:681px) and (max-width:899px){
  div.article-body{padding-left:max(var(--gutter), 18px);padding-right:max(var(--gutter), 18px)}
}
/* op-tablet-gutter:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(div.article-body > figure.article-figure > img,
  div.cols-3.feed > article.post.small > img.thumb,
  div.wrap-wide > figure.hero-media > img){height:auto}
/* op-img-dims:end */