/* ============================================================
   Public Square HQ — Writer's Corner
   Warm writerly editorial. Ink & manuscript cream.
   ============================================================ */

:root{
  --ink:#20242E;
  --paper:#F4EEE0;
  --card:#FCF8EE;
  --teal:#1F6F6B;
  --teal-deep:#175551;
  --amber:#C0873C;
  --amber-warm:#E0A85A;
  --body:#45463E;
  --body-strong:#2C2E28;
  --hair:rgba(32,36,46,.16);
  --hair-soft:rgba(32,36,46,.10);
  --paper-on-dark:rgba(244,238,224,.72);
  --paper-on-dark-soft:rgba(244,238,224,.5);

  --sans:'Space Grotesk',system-ui,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;

  --wrap:1240px;
  --gutter:clamp(20px,5vw,40px);
  --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.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;line-height:1.05;margin:0}
p{margin:0 0 1.1em}
::selection{background:var(--teal);color:var(--paper)}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gutter)}
.kicker{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.eyebrow{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.rule-h{border:0;border-top:2px solid var(--ink);margin:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-size:14px;font-weight:600;
  letter-spacing:.02em;padding:12px 20px;background:var(--ink);color:var(--paper);border:none;cursor:pointer;transition:background .15s}
.btn:hover{background:var(--teal);color:var(--paper)}
.btn-teal{background:var(--teal)}
.btn-teal:hover{background:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}

/* ============================================================
   HEADER + CSS-ONLY DROPDOWN NAV
   ============================================================ */
.site-header{position:sticky;top:0;z-index:200;background:var(--paper);border-bottom:2px solid var(--ink)}
.header-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;
  max-width:var(--wrap);margin:0 auto;padding:16px var(--gutter)}
.wordmark{display:flex;flex-direction:column;align-items:flex-start;gap:3px;color:var(--ink);flex-shrink:0}
.wordmark b{font-family:var(--sans);font-size:23px;font-weight:700;letter-spacing:-.02em;line-height:1}
.wordmark span{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);white-space:nowrap}

.nav-toggle,.nav-toggle-label{display:none}

.main-nav{display:flex;align-items:center}
.main-nav > ul{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.main-nav a[data-nav]{display:inline-flex;align-items:center;gap:5px;font-family:var(--sans);font-size:13px;font-weight:500;
  color:var(--ink);padding:10px 10px;letter-spacing:.005em;white-space:nowrap}
.main-nav a[data-nav]:hover{color:var(--teal)}
.has-sub > a[data-nav]::after{content:"";width:5px;height:5px;border-right:1.5px solid rgba(32,36,46,.38);border-bottom:1.5px solid rgba(32,36,46,.38);
  transform:translateY(-2px) rotate(45deg);display:inline-block;transition:transform .15s,border-color .15s}
.has-sub:hover > a[data-nav]::after,.has-sub:focus-within > a[data-nav]::after{border-color:var(--teal)}
.has-sub{position:relative}
.nav-sub{position:absolute;top:100%;left:0;min-width:300px;list-style:none;margin:0;padding:10px;
  background:var(--card);border:1.5px solid var(--ink);box-shadow:7px 7px 0 rgba(32,36,46,.12);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .14s,transform .14s;z-index:210}
/* hover-safety bridge: no dead gap between item and panel */
.has-sub::after{content:"";position:absolute;top:100%;left:0;width:100%;height:14px}
.has-sub:hover .nav-sub,.has-sub:focus-within .nav-sub{opacity:1;visibility:visible;transform:translateY(0)}
.has-sub:hover > a[data-nav]::after,.has-sub:focus-within > a[data-nav]::after{transform:translateY(1px) rotate(-135deg)}
.nav-sub-head{font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);padding:8px 12px 9px}
.nav-sub a{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);padding:9px 12px;border-top:1px solid var(--hair-soft)}
.nav-sub a:hover{background:var(--ink);color:var(--paper)}
.nav-cta{flex-shrink:0}

/* ============================================================
   HOMEPAGE
   ============================================================ */
.band{border-bottom:2px solid var(--ink)}
.band-pad{padding-block:clamp(40px,6vw,60px)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid var(--ink)}
.hero-text{padding:clamp(40px,6vw,64px) clamp(28px,4vw,56px) clamp(40px,6vw,64px) var(--gutter);
  display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--hair);min-width:0}
.hero-badges{display:flex;align-items:center;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.tag-solid{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--teal);color:var(--paper);padding:4px 9px}
.tag-muted{font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--body);opacity:.7}
.hero h1{font-size:clamp(34px,5vw,54px);margin-bottom:22px}
.hero .dek{font-size:clamp(19px,2.2vw,22px);line-height:1.5;color:var(--body);margin-bottom:26px;max-width:26em}
.hero-media{position:relative;min-height:340px}
.hero-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

.byline{display:flex;align-items:center;gap:12px;font-family:var(--sans);font-size:13.5px;color:var(--body)}
.byline .who{font-weight:600;color:var(--ink)}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--teal);color:var(--paper);
  display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:14px;flex-shrink:0}
.hero-cta{align-self:flex-start;margin-bottom:22px}

/* section head row */
.head-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;border-bottom:1px solid var(--ink);
  padding-bottom:14px;margin-bottom:30px}
.head-row .eyebrow{color:var(--ink)}
.head-row a{font-family:var(--sans);font-size:13px;font-weight:600}

/* even-height card grid */
.card-grid{display:grid;gap:0;border-left:1px solid var(--hair)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.post-card{display:flex;flex-direction:column;color:var(--ink);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.post-card:hover{background:var(--card);color:var(--ink)}
.post-card .thumb{aspect-ratio:3/2;overflow:hidden}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.post-card:hover .thumb img{transform:scale(1.03)}
.post-card .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.card-cat{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:11px}
.post-card h3{font-size:21px;line-height:1.16;margin-bottom:11px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.32em}
.post-card .card-dek{font-size:15.5px;line-height:1.5;color:var(--body);margin-bottom:16px;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card .meta{margin-top:auto;font-family:var(--sans);font-size:12.5px;color:var(--body)}

/* comparison table (signature) */
.cmp{border:2px solid var(--ink);overflow:hidden;box-shadow:0 26px 56px -30px rgba(32,36,46,.55)}
.cmp-head,.cmp-row{display:grid;grid-template-columns:1fr .8fr 1.4fr 1.4fr}
.cmp-head{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase}
.cmp-head div{padding:14px 20px}
.cmp-row{border-top:1px solid var(--hair);background:var(--card)}
.cmp-row:hover{background:var(--paper)}
.cmp-row .c-name{padding:20px;font-family:var(--sans);font-size:19px;font-weight:700;letter-spacing:-.01em}
.cmp-row .c-type{padding:20px;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--teal);align-self:center}
.cmp-row .c-best{padding:20px;font-size:17.5px;line-height:1.35;font-weight:600;align-self:center;font-family:var(--serif)}
.cmp-row .c-detail{padding:20px;font-size:15.5px;line-height:1.45;color:var(--body);align-self:center}

/* craft how-to */
.howto{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,4vw,56px);align-items:start}
.howto .figure-fixed{aspect-ratio:4/3;border:1px solid var(--ink);overflow:hidden}
.howto .figure-fixed img{width:100%;height:100%;object-fit:cover}
.step{display:grid;grid-template-columns:56px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--hair)}
.step .num{width:44px;height:44px;background:var(--teal);color:var(--paper);font-family:var(--sans);font-weight:700;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.step h3{font-size:21px;font-weight:600;margin-bottom:7px}
.step p{font-size:17px;line-height:1.55;color:var(--body);margin:0}

/* sections + toolkit */
.split-2{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(32px,4vw,56px)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.sec-card{display:flex;flex-direction:column;gap:8px;padding:22px 24px;color:var(--ink);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.sec-card:hover{background:var(--card);color:var(--ink)}
.sec-card .n{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--teal)}
.sec-card b{font-family:var(--sans);font-size:19px;font-weight:600;letter-spacing:-.015em}
.sec-card span.d{font-size:15px;line-height:1.45;color:var(--body)}
.toolkit-group + .toolkit-group{margin-top:22px}
.toolkit-group .g-head{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--hair)}
.toolkit-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.toolkit-group li{font-size:16.5px;line-height:1.4}
.toolkit-group li b{font-weight:600}
.toolkit-group li span{color:var(--body)}

/* ============================================================
   SUPPORTERS (tiered, native voice)
   ============================================================ */
.patrons{background:var(--ink);color:var(--paper)}
.patrons .wrap{padding-block:clamp(44px,6vw,60px)}
.patrons .p-head{max-width:44ch;margin-bottom:32px}
.patrons .kicker{color:var(--amber-warm)}
.patrons h2{color:var(--paper);font-size:clamp(28px,3.4vw,36px);margin:12px 0 10px}
.patrons .p-head p{color:var(--paper-on-dark);font-size:18px;margin:0}
.featured-patrons{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sponsor{display:flex;flex-direction:column;gap:12px;background:#171A22;border:1px solid rgba(244,238,224,.16);
  padding:22px;color:var(--paper)}
.sponsor:hover{border-color:var(--amber-warm);color:var(--paper)}
.sponsor img{width:100%;height:56px;object-fit:contain;object-position:left center;background:transparent}
.sponsor-blurb{font-family:var(--serif);font-size:15px;line-height:1.45;color:var(--paper-on-dark)}
.sponsor-blurb:empty{display:none}
.patrons-divider{margin:38px 0 24px;display:flex;align-items:center;gap:16px}
.patrons-divider .kicker{color:var(--paper-on-dark-soft)}
.patrons-divider .line{flex:1;height:1px;background:rgba(244,238,224,.16)}
.regular-patrons{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.regular-patrons .sponsor{background:transparent;border-color:rgba(244,238,224,.12);padding:16px}
.regular-patrons .sponsor img{height:38px}

/* newsletter */
.newsletter{background:var(--ink);color:var(--paper)}
.newsletter .inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,48px);align-items:center;
  padding:clamp(40px,6vw,56px) 0}
.newsletter .kicker{color:var(--amber-warm)}
.newsletter h2{color:var(--paper);font-size:clamp(28px,3.4vw,36px);margin:16px 0 14px;line-height:1.06}
.newsletter p{color:var(--paper-on-dark);font-size:18px;margin:0}
.nl-form{display:flex;border:1.5px solid rgba(244,238,224,.4)}
.nl-form input{flex:1;min-width:0;font-family:var(--sans);font-size:15px;padding:15px 18px;border:none;background:transparent;color:var(--paper)}
.nl-form input::placeholder{color:var(--paper-on-dark-soft)}
.nl-form button{font-family:var(--sans);font-size:14px;font-weight:600;background:var(--teal);color:var(--paper);border:none;padding:15px 24px;cursor:pointer}
.nl-form button:hover{background:var(--amber-warm);color:var(--ink)}
.nl-done{font-family:var(--sans);font-size:17px;font-weight:600;color:var(--amber-warm)}

/* footer */
.site-footer{border-top:2px solid var(--ink);background:var(--paper)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;padding:48px var(--gutter) 40px;max-width:var(--wrap);margin:0 auto}
.footer-grid .brand b{font-family:var(--sans);font-size:22px;font-weight:700;letter-spacing:-.02em;display:block;margin-bottom:8px}
.footer-grid .brand .tl{font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:16px}
.footer-grid .brand p{font-size:17px;line-height:1.55;color:var(--body);max-width:32ch;margin:0}
.footer-grid .fcol h4{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--body);margin-bottom:16px}
.footer-grid .fcol ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.footer-grid .fcol a{font-family:var(--sans);font-size:14px;color:var(--ink)}
.footer-grid .fcol a:hover{color:var(--teal)}
.footer-legal{border-top:1px solid var(--hair)}
.footer-legal .inner{max-width:var(--wrap);margin:0 auto;padding:18px var(--gutter);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--sans);font-size:12.5px;color:var(--body)}
.footer-legal .indie{font-style:italic;font-family:var(--serif);font-size:14px}

/* ============================================================
   ARTICLE / POST
   ============================================================ */
.post-hero{border-bottom:2px solid var(--ink)}
.post-hero .wrap{padding-block:clamp(40px,5vw,56px)}
.crumbs{font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--body);margin-bottom:26px}
.crumbs a{color:var(--teal);font-weight:600}
.crumbs .sep{opacity:.4;margin:0 8px}
.post-hero h1{font-size:clamp(32px,5vw,56px);max-width:18ch}
.post-hero .dek{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,24px);line-height:1.45;color:var(--body);margin:22px 0 30px;max-width:34ch}
.post-hero .byline{padding-top:24px;border-top:1px solid var(--hair)}
/* two-column hero: text left, image right */
.post-hero-split{border-bottom:none}
.post-hero-split .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,56px);align-items:stretch}
.post-hero-split .ph-text{display:flex;flex-direction:column;justify-content:center;min-width:0}
.post-hero-split .ph-media{display:flex;flex-direction:column;margin:0;min-width:0}
.post-hero-split .ph-media .frame{flex:1;min-height:380px;border:1px solid var(--ink);overflow:hidden}
.post-hero-split .ph-media img{width:100%;height:100%;object-fit:cover}
.post-hero-split .ph-media figcaption{font-family:var(--sans);font-size:12.5px;color:var(--body);margin-top:10px}
.avatar-lg{width:46px;height:46px;font-size:16px}
.post-lead-media{margin:clamp(32px,4vw,44px) auto clamp(36px,5vw,52px);max-width:1100px;padding-inline:var(--gutter)}
.post-lead-media figure{margin:0}
.post-lead-media .frame{aspect-ratio:21/9;border:1px solid var(--ink);overflow:hidden}
.post-lead-media img{width:100%;height:100%;object-fit:cover}
.post-lead-media figcaption{font-family:var(--sans);font-size:12.5px;color:var(--body);margin-top:10px}

/* article layout: generous asymmetric measure with breakout figures */
.article{max-width:1180px;margin:0 auto;padding-inline:var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);gap:clamp(36px,5vw,64px);align-items:start}
.article-body{max-width:var(--measure);font-size:20px;line-height:1.72;color:var(--body-strong)}
.article-body > p,.article-body > h2,.article-body > h3,.article-body > .lead,.article-body > ol,.article-body > ul{max-width:var(--measure)}
.article-body p{margin:0 0 1.3em}
.article-body a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.article-body h2{font-size:clamp(26px,3vw,32px);margin:1.7em 0 .5em;counter-increment:sec;position:relative}
.article-body.numbered h2::before{content:counter(sec,decimal-leading-zero);font-family:var(--sans);font-size:14px;font-weight:700;
  color:var(--teal);display:block;margin-bottom:.4em;letter-spacing:.1em}
.article-body h3{font-size:22px;margin:1.5em 0 .4em}
.article-body{counter-reset:sec}
.lead{font-family:var(--serif);font-size:clamp(21px,2.4vw,25px);line-height:1.5;color:var(--ink);margin-bottom:1.1em}
.dropcap::first-letter{font-family:var(--sans);font-weight:700;font-size:3.4em;line-height:.82;float:left;padding:6px 14px 0 0;color:var(--teal)}
.article-body ul,.article-body ol{margin:0 0 1.3em;padding-left:1.3em}
.article-body li{margin-bottom:.5em}

.article.solo{grid-template-columns:minmax(0,1fr);max-width:860px}
.article.solo .article-body{margin:0 auto}

/* aside rail: by-the-numbers */
.article-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:22px}
.bynumbers{border:1.5px solid var(--ink);background:var(--card)}
.bynumbers .bn-head{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);padding:14px 18px;border-bottom:1.5px solid var(--ink)}
.bn-item{padding:16px 18px;border-bottom:1px solid var(--hair)}
.bn-item:last-child{border-bottom:0}
.bn-num{font-family:var(--sans);font-size:32px;font-weight:700;color:var(--ink);line-height:1;display:block;letter-spacing:-.02em}
.bn-label{font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--body);margin-top:6px;display:block}
.aside-note{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--body);border-left:3px solid var(--teal);padding-left:14px}

/* ===== palette components ===== */
.pullquote{margin:1.8em 0;padding:0 0 0 28px;border-left:4px solid var(--ink)}
.pullquote p{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(24px,3vw,30px);line-height:1.3;color:var(--ink);margin:0}
.blockquote{margin:1.6em 0;padding:0 0 0 24px;border-left:3px solid var(--teal)}
.blockquote p{font-family:var(--serif);font-size:21px;line-height:1.5;color:var(--body-strong);margin:0 0 .4em}
.blockquote cite{font-family:var(--sans);font-size:13px;font-style:normal;color:var(--body)}
.callout{margin:1.6em 0;background:var(--card);border:1.5px solid var(--ink);border-left-width:5px;padding:20px 24px}
.callout p{margin:0;font-size:18px;line-height:1.55}
.callout p + p{margin-top:.6em}
.note{background:rgba(31,111,107,.08);border-left:3px solid var(--teal);padding:14px 18px;font-size:16.5px;line-height:1.55;color:var(--body-strong);margin:1.4em 0}
.note::before{content:"Note";display:block;font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin-bottom:5px}

.versus,.datatable{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:16px}
.versus caption,.datatable caption{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);text-align:left;margin-bottom:10px}
.versus th,.versus td,.datatable th,.datatable td{border:1px solid var(--hair);padding:12px 14px;text-align:left;vertical-align:top;line-height:1.45}
.versus thead th,.datatable thead th{background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.06em}
.datatable tbody tr:nth-child(even){background:var(--card)}
.versus tbody th{background:var(--card);font-family:var(--sans);font-size:13px;width:26%}
.versus td strong{color:var(--teal)}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:1.6em 0}
.statblock{border:1.5px solid var(--ink);background:var(--card);padding:18px 20px}
.stat-num{font-family:var(--sans);font-size:34px;font-weight:700;color:var(--teal);line-height:1;display:block;letter-spacing:-.02em}
.stat-label{font-family:var(--sans);font-size:12.5px;line-height:1.35;color:var(--body);margin-top:8px;display:block}

.timeline{list-style:none;margin:1.6em 0;padding:0;border-left:2px solid var(--hair)}
.timeline li{position:relative;padding:0 0 22px 26px}
.timeline li::before{content:"";position:absolute;left:-7px;top:5px;width:12px;height:12px;border-radius:50%;background:var(--teal);border:2px solid var(--paper)}
.timeline .t-when{display:block;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin-bottom:3px}
.timeline .t-what{display:block;font-size:16.5px;line-height:1.5;color:var(--body)}

.chart{margin:1.8em 0}
.chart svg{width:100%;height:auto;display:block}
.chart figcaption{font-family:var(--sans);font-size:12.5px;color:var(--body);margin-top:10px}
.chart .axis{stroke:var(--hair);stroke-width:1}
.chart .bar-rect{fill:var(--teal)}
.chart .bar-rect.alt{fill:var(--amber)}
.chart .bar-label{font-family:var(--sans);font-size:11px;fill:var(--body)}
.chart .bar-val{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.chart .line-path{fill:none;stroke:var(--teal);stroke-width:2.5}
.chart .line-dot{fill:var(--teal)}
.chart .grid-line{stroke:var(--hair-soft);stroke-width:1}

.article-figure{margin:1.8em 0}
.article-figure img{width:100%;border:1px solid var(--hair)}
.article-figure figcaption{font-family:var(--sans);font-size:12.5px;color:var(--body);margin-top:10px}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:1.8em 0}
.gallery figure{margin:0}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--hair)}
.gallery figcaption{font-family:var(--sans);font-size:11.5px;color:var(--body);margin-top:6px}

.map-figure{margin:1.8em 0}
.map-figure .map-slot{aspect-ratio:16/10;background:var(--card);border:1.5px dashed var(--hair);display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:12px;color:var(--body)}
.map-figure figcaption{font-family:var(--sans);font-size:12.5px;color:var(--body);margin-top:10px}

.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:1.8em 0}
.profile-card{border:1.5px solid var(--ink);background:var(--card);padding:22px}
.profile-card .p-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;margin-bottom:12px}
.profile-card.no-photo::before{content:attr(data-mono);display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;border-radius:50%;background:var(--teal);color:var(--paper);font-family:var(--sans);font-weight:700;font-size:19px;margin-bottom:12px}
.profile-card h3{font-family:var(--sans);font-size:19px;margin-bottom:4px}
.profile-card .p-role{font-family:var(--sans);font-size:12.5px;letter-spacing:.04em;color:var(--teal);margin-bottom:10px}
.profile-card p{font-size:15.5px;line-height:1.5;color:var(--body);margin:0 0 .6em}
.profile-card .p-links a{font-family:var(--sans);font-size:13px;margin-right:12px}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:1.6em 0}
.org-card{display:flex;flex-direction:column;gap:4px;border:1.5px solid var(--ink);background:var(--card);padding:16px 18px;color:var(--ink)}
.org-card:hover{background:var(--paper)}
.org-card .org-logo{width:40px;height:40px;object-fit:contain;margin-bottom:6px}
.org-card.no-logo .org-name::before{content:"↗";color:var(--teal);margin-right:6px}
.org-card .org-name{font-family:var(--sans);font-size:16px;font-weight:600}
.org-card .org-host{font-family:var(--sans);font-size:12.5px;color:var(--body)}
.entity-ref{font-family:var(--sans);font-size:.94em;font-weight:600;white-space:nowrap}

.related{border-top:2px solid var(--ink);margin-top:clamp(48px,6vw,64px)}
.related .wrap{padding-block:clamp(36px,5vw,48px)}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-left:1px solid var(--hair);list-style:none;margin:0;padding:0}
.related-links li{border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.further-grid a,.related-links a{display:block;height:100%;padding:22px 24px;color:var(--ink);border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.related-links li a{border:0}
.further-grid a:hover,.related-links a:hover{background:var(--card)}
.related-links .rl-cat{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);display:block;margin-bottom:10px}
.related-links .rl-title{font-family:var(--sans);font-size:20px;font-weight:600;line-height:1.16;letter-spacing:-.01em}

/* ============================================================
   CATEGORY / HUB / SIMPLE PAGES
   ============================================================ */
.page-mast{border-bottom:2px solid var(--ink)}
.page-mast .wrap{padding-block:clamp(40px,5vw,52px)}
.page-mast h1{font-size:clamp(40px,7vw,68px);line-height:.98;letter-spacing:-.035em}
.page-mast .mast-dek{font-size:clamp(19px,2.4vw,22px);line-height:1.5;color:var(--body);max-width:34ch;margin-top:18px}
.page-mast .mast-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:48px;align-items:end}
.page-mast .mast-meta{font-family:var(--sans);font-size:14px;letter-spacing:.1em;text-transform:uppercase;color:var(--body);text-align:right}

.cat-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.cat-list li{border-bottom:1px solid var(--hair)}
.cat-list a{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:baseline;padding:26px 4px;color:var(--ink)}
.cat-list a:hover{background:var(--card)}
.cat-list .cl-no{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--teal);font-variant-numeric:tabular-nums}
.cat-list .cl-main h3{font-size:clamp(22px,2.6vw,28px);font-weight:600;margin-bottom:8px;letter-spacing:-.015em}
.cat-list .cl-main p{font-size:17px;line-height:1.5;color:var(--body);margin:0;max-width:60ch}
.cat-list .cl-meta{font-family:var(--sans);font-size:12.5px;color:var(--body);white-space:nowrap;text-align:right}

.hub-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--hair);border-left:1px solid var(--hair)}
.hub-card{padding:32px 30px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);color:var(--ink);display:flex;flex-direction:column;gap:10px}
.hub-card:hover{background:var(--card);color:var(--ink)}
.hub-card .n{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--teal)}
.hub-card h2{font-size:26px}
.hub-card p{font-size:16.5px;line-height:1.5;color:var(--body);margin:0}
.hub-card .cnt{margin-top:auto;font-family:var(--sans);font-size:12.5px;color:var(--body)}

.prose-page{max-width:760px;margin:0 auto;padding:clamp(40px,5vw,56px) var(--gutter)}
.prose-page h1{font-size:clamp(34px,5vw,52px);margin-bottom:.5em}
.prose-page .lead{margin-bottom:1em}
.prose-page p{font-size:19px;line-height:1.7;color:var(--body-strong);margin:0 0 1.2em}
.prose-page h2{font-size:26px;margin:1.6em 0 .4em}
.contact-methods{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:12px}
.contact-methods li{display:flex;align-items:center;gap:14px;border:1.5px solid var(--ink);background:var(--card);padding:16px 18px}
.contact-methods svg{width:22px;height:22px;flex-shrink:0;color:var(--teal)}
.contact-methods b{font-family:var(--sans);font-size:14px}
.contact-methods span{font-size:16px;color:var(--body)}

.error-page{min-height:56vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:80px var(--gutter);gap:18px}
.error-page .code{font-family:var(--sans);font-size:clamp(80px,16vw,150px);font-weight:700;color:var(--teal);line-height:.9;letter-spacing:-.04em}
.error-page h1{font-size:clamp(28px,4vw,40px)}
.error-page p{font-size:19px;color:var(--body);max-width:40ch}

/* styleguide */
.sg-section{border-top:1px solid var(--hair);padding:36px 0}
.sg-section > .sg-label{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal);margin-bottom:20px}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px}
.sg-swatch{border:1px solid var(--hair)}
.sg-swatch .chip{height:70px}
.sg-swatch .name{font-family:var(--sans);font-size:12px;padding:8px 10px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px){
  .article{grid-template-columns:1fr}
  .article-aside{position:static;flex-direction:row;flex-wrap:wrap}
  .article-aside .bynumbers{flex:1;min-width:240px}
  .bynumbers{display:flex;flex-wrap:wrap}
  .bynumbers .bn-head{flex-basis:100%}
  .bn-item{flex:1;min-width:130px;border-bottom:1px solid var(--hair)}
}
@media (max-width:880px){
  .post-hero-split .wrap{grid-template-columns:1fr;gap:24px}
  .post-hero-split .ph-media{order:-1}
  .post-hero-split .ph-media .frame{min-height:0;aspect-ratio:16/10}
  .hero{grid-template-columns:1fr}
  .hero-text{border-right:none;padding-right:var(--gutter)}
  .hero-media{min-height:280px;order:-1}
  .cols-4{grid-template-columns:1fr 1fr}
  .split-2{grid-template-columns:1fr}
  .howto{grid-template-columns:1fr}
  .newsletter .inner{grid-template-columns:1fr}
  .featured-patrons{grid-template-columns:repeat(3,1fr)}
  .regular-patrons{grid-template-columns:repeat(3,1fr)}
  .further-grid,.related-links{grid-template-columns:1fr 1fr}
  /* comparison stacks into labelled cards */
  .cmp-head{display:none}
  .cmp-row{grid-template-columns:1fr;padding:6px 0 16px}
  .cmp-row > div{padding:6px 20px !important}
  .cmp-row .c-name{padding-top:18px !important}
  .cmp-row .c-type::before,.cmp-row .c-best::before,.cmp-row .c-detail::before{
    content:attr(data-label);display:block;font-family:var(--sans);font-size:10px;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--teal);margin-bottom:3px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .page-mast .mast-grid{grid-template-columns:1fr;align-items:start;gap:22px}
  .page-mast .mast-meta{text-align:left}
  .hub-grid{grid-template-columns:1fr}
}

@media (max-width:1180px){
  /* MOBILE NAV — drawer engages before the horizontal nav overflows */
  .nav-toggle-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;font-weight:600;
    border:1.5px solid var(--ink);color:var(--ink);padding:9px 14px;cursor:pointer}
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--paper);border-left:2px solid var(--ink);
    transform:translateX(100%);transition:transform .22s;z-index:300;overflow-y:auto;padding:20px 22px 40px;display:block}
  .nav-toggle:checked ~ .main-nav{transform:translateX(0)}
  .nav-toggle:checked ~ .nav-scrim{opacity:1;visibility:visible}
  .nav-scrim{position:fixed;inset:0;background:rgba(32,36,46,.5);opacity:0;visibility:hidden;transition:opacity .22s;z-index:290}
  .main-nav > ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .main-nav .close-nav{display:flex;justify-content:flex-end;margin-bottom:8px}
  .main-nav .close-nav label{font-family:var(--sans);font-size:22px;line-height:1;cursor:pointer;padding:4px 8px}
  .has-sub{position:static}
  .main-nav a[data-nav]{font-size:18px;font-weight:600;padding:15px 0 7px;border-bottom:1px solid var(--hair)}
  .has-sub > a[data-nav]::after{margin-left:auto}
  .nav-sub{position:static;opacity:1;visibility:visible;transform:none;border:none;box-shadow:none;background:transparent;
    min-width:0;padding:4px 0 12px}
  .has-sub::after{display:none}
  .nav-sub-head{display:none}
  .nav-sub a{font-size:16px;color:var(--body);padding:7px 0;border:none}
  .nav-sub a:hover{background:transparent;color:var(--teal)}
  .nav-cta{margin-top:14px}
  .nav-cta .btn{width:100%;justify-content:center}
}
@media (max-width:560px){
  body{font-size:18px}
  .cols-4,.cols-3{grid-template-columns:1fr}
  .card-grid{border-left:none}
  .sec-grid{grid-template-columns:1fr}
  .featured-patrons{grid-template-columns:1fr}
  .regular-patrons{grid-template-columns:1fr 1fr}
  .further-grid,.related-links{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .step{grid-template-columns:44px 1fr;gap:16px}
  .cat-list a{grid-template-columns:auto 1fr;gap:14px}
  .cat-list .cl-meta{grid-column:2;text-align:left}
  .article-aside{flex-direction:column}
}
@media (min-width:1181px){
  .nav-scrim,.close-nav{display:none}
}

/* 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-blurb-link: money-link anchors in blurbs must inherit blurb colour (readable on dark OR light) */
.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. */
.regular-patrons .sponsor.sponsor img{box-sizing:border-box!important;padding:8px 12px!important;background:#121013!important;box-sizing:border-box!important}

/* op-marks-bigger-centred: operator asked for larger, centred logos. Design pinned the artwork
   with object-position:left center, so every wordmark sat against the left edge of a full-width
   plate, and both tiers were conservative — 56px featured, 38px regulars, in tiles with room.
   Centred in both axes and grown; the plate itself is unchanged. */
.featured-patrons .sponsor img{height:72px;object-position:center center}
.regular-patrons .sponsor img{height:52px;object-position:center center}

/* op-menu-selector: the burger could never open the drawer.
   DOM:  header.site-header > [ input.nav-toggle , div.header-bar > [ label.nav-toggle-label ,
         label.nav-scrim , nav.main-nav ] ]
   Design's rules target `.nav-toggle:checked ~ .main-nav` and `~ .nav-scrim`, but both live
   INSIDE .header-bar, not beside the input — so neither could match and the drawer stayed
   parked at translateX(100%). Restated through .header-bar; Design's declarations unchanged. */
@media (max-width:900px){
  .nav-toggle:checked ~ .header-bar .main-nav{transform:translateX(0)}
  .nav-toggle:checked ~ .header-bar .nav-scrim{opacity:1;visibility:visible}
}

/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 766px at 390, 8% of the whole page. Design's own
   good case (evbb) has no list at all: its footer links simply flow inline, 479px in total.
   Here the lists flow inline too,
   measured 766 -> 530px (31% shorter) with no new overflow. Both shapes were
   tried and the shorter one kept — two columns helps a wide group set and hurts a narrow one.
   Phone widths only; the desktop footer is untouched. */
@media (max-width:640px){
  footer ul,footer ol{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;column-gap:clamp(10px,2.78vw,40px)!important;row-gap:6px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1572px at 390, 16% of the whole page. Two columns bring it to
   1380px (12% shorter). Checked before writing: no new overflow, smallest mark still
   120px wide, longest blurb 7 lines, tile heights 174-250px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.featured-patrons), 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){
  .featured-patrons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:18px!important}
    .featured-patrons > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .featured-patrons > * *{min-width:0!important;max-width:100%}
    .featured-patrons img,.featured-patrons svg{max-width:100%;height:auto}
  .featured-patrons .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-blurb-rows: money blurbs ran to 7 rows at 390, 994px of tier across
   8 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){
  .regular-patrons .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;max-height:66px!important;min-height:0!important;overflow:hidden!important}
}

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

/* op-page-overflow: the page scrolled sideways at 320 — div reached
   361px in a 320px screen (+41px), inside
   div.inner. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.inner{grid-template-columns:minmax(0,1fr)!important}
  div{min-width:0!important;max-width:100%!important}
}

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .regular-patrons 5 rows at 1024). 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 (min-width:641px){
  .regular-patrons .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-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-heading-levels */
h2:where(.rt-h3){font-family: var(--sans); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0px;}
.cat-list .cl-main h2:where(.rt-h3){font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; margin-bottom: 8px; letter-spacing: -0.015em;}
/* op-heading-levels:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a.post-card > div.thumb > img,
  div > div.figure-fixed > img,
  figure.ph-media > div.frame > img,
  section.hero > div.hero-media > img){height:auto}
/* op-img-dims:end */