/* ============================================================
   CULPEPER — "Trailhead" design system
   Bold & outdoorsy · rugged, high-contrast · warm rustic
   Bitter (slab display) + Barlow (UI/body) · no JavaScript
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bitter:ital,wght@0,500;0,700;0,900;1,500&family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap');

:root{
  --ink:#1A1712;
  --ink-soft:#2A2419;
  --paper:#F0E9D8;
  --paper-2:#E7DCC5;
  --paper-3:#DFD3B9;
  --forest:#223A2C;
  --forest-2:#2E4B3A;
  --forest-line:rgba(240,233,216,.14);
  --ochre:#D08A2C;
  --ochre-deep:#B5721E;
  --gold:#E7A73D;
  --cream:#F4EED9;
  --muted:#6E6552;
  --muted-2:#8A8069;
  --muted-dark:#B9B29C;
  --line:#D9CDB8;
  --shadow:0 30px 70px rgba(26,23,18,.16);
  --shadow-lg:0 50px 110px rgba(26,23,18,.26);
  --wrap:1320px;
  --gut:clamp(20px,5vw,72px);
  --radius:8px;
  --sans:'Barlow',system-ui,sans-serif;
  --slab:'Bitter',Georgia,serif;
}

/* ---------- reset ---------- */
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:19px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
a{color:var(--ochre-deep);text-decoration:none;}
a:hover{color:var(--ink);}
strong{font-weight:700;}
::selection{background:var(--ochre);color:#211a10;}

/* ---------- layout helpers ---------- */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut);}
.wrap-wide{width:100%;max-width:1560px;margin:0 auto;padding-inline:var(--gut);}
.section{padding-block:clamp(56px,8vw,110px);}
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ochre-deep);margin:0 0 18px;
}
.on-dark .eyebrow,.eyebrow.gold{color:var(--gold);}
.slab{font-family:var(--slab);}

/* ---------- annotation: empty data-fill spots ---------- */
[data-fill]:empty{min-height:1.1em;}
span[data-fill]:empty,a[data-fill]:empty{display:inline-block;vertical-align:baseline;}
[data-fill]:empty::before{
  content:attr(data-fill);
  font-family:var(--sans);font-weight:500;font-style:italic;
  font-size:.62em;letter-spacing:.01em;line-height:1.3;
  text-transform:none;color:var(--ochre-deep);
  background:rgba(208,138,44,.10);
  border:1px dashed rgba(181,114,30,.55);
  border-radius:5px;padding:.18em .55em;
  white-space:normal;
}
.on-dark [data-fill]:empty::before{
  color:var(--gold);background:rgba(231,167,61,.12);
  border-color:rgba(231,167,61,.5);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--sans);font-weight:700;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;
  padding:16px 30px;border-radius:5px;border:2px solid transparent;
  cursor:pointer;transition:transform .15s ease,background .15s ease,color .15s ease;
  line-height:1;
}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--ochre);color:#211a10;}
.btn-primary:hover{background:var(--gold);color:#211a10;}
.btn-ghost{background:transparent;border-color:currentColor;color:var(--cream);}
.btn-ghost:hover{background:var(--cream);color:var(--ink);}
.btn-dark{background:var(--ink);color:var(--cream);}
.btn-dark:hover{background:var(--forest);color:var(--cream);}
.btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;}

/* ---------- site header / nav ---------- */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;}
.site-header.solid{position:relative;background:var(--ink);}
.nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:26px;
}
.brand{
  font-family:var(--slab);font-weight:900;font-size:26px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--cream);display:inline-flex;align-items:center;gap:12px;
}
.brand svg{width:26px;height:26px;stroke:var(--ochre);fill:none;stroke-width:2.2;}
.site-header.solid .brand,.nav-solid .brand{color:var(--cream);}
.nav-links{display:flex;gap:30px;list-style:none;padding:0;margin:0;align-items:center;flex-wrap:wrap;}
.nav-links a{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cream);opacity:.82;transition:opacity .15s;
}
.nav-links a:hover{opacity:1;color:var(--cream);}
.nav-cta{color:#211a10 !important;background:var(--ochre);opacity:1 !important;padding:11px 18px;border-radius:5px;}
.nav-cta:hover{background:var(--gold);}
/* mobile menu: CSS-only via checkbox */
.nav-toggle,.nav-check{display:none;}
.nav-toggle{
  width:46px;height:46px;border-radius:6px;border:2px solid rgba(240,233,216,.4);
  align-items:center;justify-content:center;cursor:pointer;color:var(--cream);
}
.nav-toggle svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2.4;}

/* ============================================================
   HOMEPAGE
   ============================================================ */

/* hero */
.hero{position:relative;min-height:82vh;display:flex;align-items:flex-end;color:var(--cream);}
.hero-media{position:absolute;inset:0;overflow:hidden;background:var(--forest);}
.hero-media img{width:100%;height:100%;object-fit:cover;}
.hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(15,22,16,.6) 0%,rgba(15,22,16,.15) 38%,rgba(15,22,16,.82) 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(48px,7vw,90px);padding-top:clamp(150px,18vw,220px);}
.hero h1{
  font-family:var(--slab);font-weight:900;text-transform:uppercase;
  font-size:clamp(46px,8.5vw,104px);line-height:.92;letter-spacing:-.01em;
  max-width:15ch;text-wrap:balance;
}
.hero .lede{
  font-size:clamp(19px,2.2vw,24px);font-weight:500;max-width:52ch;margin-top:22px;
  color:#EFE7D2;line-height:1.5;
}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px;}

/* stat strip */
.statstrip{background:var(--ink);color:var(--cream);}
.statstrip .grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);
  padding-block:clamp(44px,6vw,64px);
}
.statstrip .stat .num{
  font-family:var(--slab);font-weight:900;font-size:clamp(40px,5vw,58px);
  line-height:1;color:var(--ochre);
}
.statstrip .stat .lab{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--muted-dark);margin-top:12px;line-height:1.4;
}

/* host bar */
.hostbar{background:var(--paper);}
.hostbar .grid{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,40px);align-items:center;
  padding-block:clamp(48px,6vw,76px);
}
.hostbar .avatar{
  width:clamp(88px,10vw,120px);height:clamp(88px,10vw,120px);border-radius:50%;
  overflow:hidden;flex:0 0 auto;border:4px solid var(--ochre);background:var(--forest);
}
.hostbar .avatar img{width:100%;height:100%;object-fit:cover;}
.hostbar blockquote{
  font-family:var(--slab);font-weight:500;font-style:italic;
  font-size:clamp(22px,2.6vw,30px);line-height:1.42;color:var(--ink-soft);max-width:34ch;
}
.hostbar .sig{
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ochre-deep);margin-top:16px;font-style:normal;display:block;
}

/* section head */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap;}
.sec-head h2{
  font-family:var(--slab);font-weight:900;text-transform:uppercase;
  font-size:clamp(32px,4.6vw,54px);line-height:1;letter-spacing:-.005em;
}
.on-dark .sec-head h2,.on-dark h2{color:var(--cream);}
.sec-link{
  font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ochre-deep);white-space:nowrap;display:inline-flex;gap:8px;align-items:center;
}
.on-dark .sec-link{color:var(--gold);}
.sec-link:hover{color:var(--ink);}
.on-dark .sec-link:hover{color:var(--cream);}

/* category cards (numbered) */
.cats{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,28px);}
.cat{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:340px;display:block;color:var(--cream);
}
.cat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
.cat::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,16,.12) 38%,rgba(15,22,16,.85));}
.cat:hover img{transform:scale(1.05);}
.cat .cat-body{position:absolute;left:30px;right:30px;bottom:28px;z-index:2;}
.cat .cat-num{font-family:var(--slab);font-weight:900;font-size:18px;color:var(--gold);}
.cat h3{font-family:var(--slab);font-weight:900;font-size:clamp(26px,3vw,36px);text-transform:uppercase;line-height:1;margin-top:6px;color:var(--cream);}
.cat p{font-size:16px;color:#EAE1CD;margin-top:8px;max-width:36ch;}

/* feed */
.feed-band{background:var(--paper-2);}
.feed{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,2.6vw,34px);align-items:start;}
.feed-col{display:grid;gap:clamp(20px,2.6vw,34px);}
.post-card{
  background:var(--paper);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow);display:flex;flex-direction:column;height:100%;
}
.post-card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--forest);}
.post-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.post-card:hover .media img{transform:scale(1.04);}
.post-card.feature .media{aspect-ratio:16/11;}
.post-card .body{padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:12px;flex:1;}
.badge{
  position:absolute;top:16px;left:16px;z-index:2;
  font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ochre);color:#211a10;padding:7px 12px;border-radius:4px;
}
.post-card h3{
  font-family:var(--slab);font-weight:700;line-height:1.08;color:var(--ink);
  font-size:clamp(22px,2.4vw,32px);
}
.post-card.feature h3{font-size:clamp(28px,3.4vw,44px);font-weight:900;}
.post-card .excerpt{font-size:17px;color:var(--muted);line-height:1.55;}
.post-card.feature .excerpt{font-size:19px;}
.meta{
  font-family:var(--sans);font-weight:600;font-size:15px;letter-spacing:.02em;
  color:var(--muted-2);margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px;
}
.meta .dot{width:4px;height:4px;border-radius:50%;background:var(--ochre);flex:0 0 auto;}
.meta .cat-tag{color:var(--ochre-deep);text-transform:uppercase;letter-spacing:.09em;font-weight:700;}

/* CSS-only "more posts" expander */
.more-feed{margin-top:clamp(20px,2.6vw,34px);}
.more-feed > summary{list-style:none;display:flex;justify-content:center;}
.more-feed > summary::-webkit-details-marker{display:none;}
.more-feed[open] > summary{display:none;}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,34px);margin-top:clamp(20px,2.6vw,34px);}

/* newsletter footer band */
.news{background:var(--forest);color:var(--cream);}
.news .grid{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;padding-block:clamp(52px,7vw,78px);}
.news h2{font-family:var(--slab);font-weight:900;text-transform:uppercase;font-size:clamp(30px,4vw,46px);line-height:1;color:var(--cream);}
.news p{color:#C7D2C4;margin-top:14px;font-size:18px;max-width:46ch;}
.news form{display:flex;gap:10px;flex-wrap:wrap;}
.field{
  flex:1;min-width:200px;background:var(--forest-2);border:1px solid rgba(240,233,216,.16);
  border-radius:5px;padding:16px 18px;color:var(--cream);font-family:var(--sans);font-size:16px;
}
.field::placeholder{color:#8fa393;}
.field:focus{outline:2px solid var(--ochre);border-color:transparent;}

/* ---------- SPONSORS / PARTNERS ---------- */
.partners{background:var(--ink);color:var(--cream);}
.partners .intro{max-width:60ch;}
.partners .intro p{color:var(--muted-dark);margin-top:14px;font-size:18px;}
/* Partner slots are WIDE WORDMARK plates — extreme horizontal logos (up to ~11:1).
   The logo sits on a light plate, height-constrained + object-fit:contain, so a very
   wide wordmark fills the plate width with NO dead vertical space. Never a tall box. */
.sponsor-wall{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(clamp(220px,26vw,300px),1fr));
  gap:clamp(12px,1.4vw,18px);margin-top:clamp(24px,3vw,40px);
}
/* priority: the first two partners get a wider (2-col) plate — wider, never taller */
.sponsor-wall .sponsor:nth-child(-n+2){grid-column:span 2;}
.sponsor{
  position:relative;display:flex;flex-direction:column;gap:10px;
  background:var(--forest-2);border:1px solid rgba(240,233,216,.1);
  border-radius:var(--radius);padding:30px 16px 16px;text-align:center;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;color:var(--cream);
}
.sponsor:hover{transform:translateY(-3px);border-color:var(--ochre);background:#33513e;}
.sponsor img{
  width:100%;height:64px;object-fit:contain;object-position:center;
  background:#161410;border:1px solid rgba(240,233,216,.08);
  border-radius:6px;padding:10px 18px;
}
.sponsor-wall .sponsor:nth-child(-n+2) img{height:92px;}
.sponsor-blurb{font-size:15px;line-height:1.45;color:var(--muted-dark);}
.sponsor-blurb:empty::before{
  content:"Partner blurb — one line (optional)";
  font-style:italic;color:rgba(185,178,156,.55);font-size:14px;
}
.sponsor::before{
  content:"Logo " attr(data-partner);
  position:absolute;top:9px;left:14px;font-size:12px;font-weight:700;letter-spacing:.1em;
  color:var(--gold);opacity:.75;text-transform:uppercase;
}
.partner-more{margin-top:22px;}
.partner-more > summary{list-style:none;display:inline-flex;cursor:pointer;}
.partner-more > summary::-webkit-details-marker{display:none;}
.partner-more[open] > summary{display:none;}

/* ---------- site footer ---------- */
.site-footer{background:#14110C;color:var(--muted-dark);padding-block:clamp(44px,6vw,64px);font-size:16px;}
.site-footer .grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:clamp(28px,4vw,56px);}
.site-footer .brand{color:var(--cream);margin-bottom:16px;display:inline-flex;}
.site-footer .grid > div:first-child p{max-width:42ch;line-height:1.6;}
.site-footer h4{font-family:var(--sans);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--cream);margin-bottom:16px;}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.site-footer a{color:var(--muted-dark);}
.site-footer a:hover{color:var(--ochre);}
.site-footer .fine{margin-top:clamp(30px,4vw,48px);padding-top:24px;border-top:1px solid rgba(240,233,216,.1);font-size:14px;color:#7d7663;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ============================================================
   CONTENT PAGES + ARTICLE
   ============================================================ */
.page-hero{background:var(--forest);color:var(--cream);}
.page-hero .inner{padding-block:clamp(90px,12vw,150px) clamp(40px,6vw,64px);}
.page-hero h1{font-family:var(--slab);font-weight:900;text-transform:uppercase;font-size:clamp(38px,6vw,76px);line-height:.95;letter-spacing:-.01em;max-width:18ch;}
.page-hero .kicker{color:var(--gold);}
.page-hero p{color:#C7D2C4;font-size:clamp(18px,2vw,22px);max-width:56ch;margin-top:18px;}

.article-hero{position:relative;min-height:60vh;display:flex;align-items:flex-end;color:var(--cream);}
.article-hero .media{position:absolute;inset:0;overflow:hidden;background:var(--forest);}
.article-hero .media img{width:100%;height:100%;object-fit:cover;}
.article-hero .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,16,.5),rgba(15,22,16,.35) 40%,rgba(15,22,16,.88));}
.article-hero .inner{position:relative;z-index:2;padding-block:clamp(140px,16vw,200px) clamp(40px,5vw,60px);}
.article-hero h1{font-family:var(--slab);font-weight:900;text-transform:uppercase;font-size:clamp(34px,5.4vw,72px);line-height:.96;max-width:20ch;}
.article-hero .meta{color:#E6DDC8;margin-top:20px;}
.article-hero .meta .cat-tag{color:var(--gold);}

/* the readable article column */
.prose{max-width:74ch;margin-inline:auto;font-size:20px;line-height:1.75;color:var(--ink-soft);}
.prose > *{margin-top:1.4em;}
.prose > *:first-child{margin-top:0;}
.prose h2{font-family:var(--slab);font-weight:900;font-size:clamp(28px,3.2vw,40px);line-height:1.08;color:var(--ink);margin-top:1.8em;text-transform:none;}
.prose h3{font-family:var(--slab);font-weight:700;font-size:clamp(23px,2.4vw,28px);line-height:1.15;color:var(--ink);margin-top:1.5em;}
.prose p{color:var(--ink-soft);}
.prose ul,.prose ol{padding-left:1.3em;display:grid;gap:.6em;}
.prose li{padding-left:.2em;}
.prose ul li::marker{color:var(--ochre);}
.prose a{color:var(--ochre-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:rgba(208,138,44,.4);}
.prose a:hover{color:var(--ink);text-decoration-color:var(--ochre);}
.prose img{border-radius:var(--radius);}

/* ============================================================
   COMPONENT VOCABULARY (PALETTE_SPEC) — used in articles + styleguide
   ============================================================ */

.lead{font-family:var(--slab);font-weight:500;font-size:clamp(22px,2.4vw,27px);line-height:1.5;color:var(--ink);}

.pullquote{border:0;padding:0;margin-block:1.6em;}
.pullquote p{
  font-family:var(--slab);font-weight:700;font-size:clamp(26px,3.4vw,40px);line-height:1.15;
  color:var(--forest);position:relative;padding-left:28px;border-left:6px solid var(--ochre);
}
.blockquote{margin-block:1.6em;padding:26px 30px;background:var(--paper-2);border-radius:var(--radius);border-left:6px solid var(--forest);}
.blockquote p{font-family:var(--slab);font-style:italic;font-size:clamp(19px,2.1vw,23px);line-height:1.5;color:var(--ink-soft);}
.blockquote cite{display:block;margin-top:14px;font-family:var(--sans);font-style:normal;font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre-deep);}

.callout{
  margin-block:1.6em;padding:26px 30px;border-radius:var(--radius);
  background:linear-gradient(180deg,#EFE0C4,#E8D6B4);border:1px solid rgba(181,114,30,.3);
  display:flex;gap:18px;align-items:flex-start;
}
.callout::before{
  content:"";flex:0 0 auto;width:26px;height:26px;margin-top:2px;
  background:var(--ochre-deep);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v6'/><path d='M12 16h.01'/><circle cx='12' cy='12' r='10'/></svg>") center/contain no-repeat;
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v6'/><path d='M12 16h.01'/><circle cx='12' cy='12' r='10'/></svg>") center/contain no-repeat;
}
.callout p{font-size:18px;font-weight:500;line-height:1.55;color:var(--ink-soft);margin:0;}

.note{
  font-size:17px;color:var(--muted);font-style:italic;
  padding:14px 18px;background:rgba(34,58,44,.06);border-radius:6px;border-left:4px solid var(--forest);
}

/* data / comparison */
.versus,.datatable{width:100%;border-collapse:collapse;margin-block:1.6em;font-size:17px;overflow:hidden;border-radius:var(--radius);}
.versus th,.datatable th{background:var(--forest);color:var(--cream);font-family:var(--sans);font-weight:700;letter-spacing:.04em;text-align:left;padding:14px 18px;font-size:15px;text-transform:uppercase;}
.versus td,.datatable td{padding:14px 18px;border-bottom:1px solid var(--line);vertical-align:top;background:var(--paper);}
.datatable tr:nth-child(even) td{background:var(--paper-2);}
.versus tbody tr td:first-child,.versus td:first-child{font-weight:700;color:var(--ink);}
.versus th:first-child{background:var(--ink);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-block:1.6em;}
.table-scroll table{margin-block:0;}

.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-block:1.6em;}
.statblock{background:var(--forest);color:var(--cream);border-radius:var(--radius);padding:26px 22px;text-align:left;}
.statblock .stat-num{display:block;font-family:var(--slab);font-weight:900;font-size:clamp(38px,5vw,52px);line-height:1;color:var(--gold);}
.statblock .stat-label{display:block;margin-top:12px;font-size:15px;line-height:1.45;color:var(--muted-dark);}

.timeline{list-style:none;padding:0;margin-block:1.6em;border-left:3px solid var(--ochre);}
.timeline li{position:relative;padding:0 0 26px 28px;}
.timeline li::before{content:"";position:absolute;left:-9px;top:4px;width:15px;height:15px;border-radius:50%;background:var(--ochre);border:3px solid var(--paper);}
.timeline li:last-child{padding-bottom:0;}
.t-when{display:block;font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ochre-deep);line-height:1.3;}
.t-what{display:block;margin-top:5px;font-size:18px;line-height:1.5;color:var(--ink-soft);}

/* charts */
.chart{margin-block:1.6em;}
.chart svg{width:100%;height:auto;display:block;overflow:visible;}
.chart figcaption{margin-top:14px;font-size:15px;color:var(--muted);font-style:italic;text-align:center;}
.chart .bar-rect{fill:var(--ochre);}
.chart .bar-rect.alt{fill:var(--forest);}
.chart .axis{stroke:var(--line);stroke-width:1.5;}
.chart .grid-line{stroke:rgba(110,101,82,.18);stroke-width:1;}
.chart .lab{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--muted);}
.chart .val{font-family:var(--slab);font-size:14px;font-weight:700;fill:var(--ink);}
.chart .line-path{fill:none;stroke:var(--ochre);stroke-width:3;stroke-linejoin:round;stroke-linecap:round;}
.chart .line-dot{fill:var(--forest);}
.chart .donut-track{fill:none;stroke:var(--paper-3);stroke-width:22;}
.chart .donut-val{fill:none;stroke:var(--ochre);stroke-width:22;stroke-linecap:round;}

/* figures / media */
.article-figure{margin-block:1.8em;}
.article-figure img{width:100%;border-radius:var(--radius);}
.article-figure figcaption,.map-figure figcaption,.gallery figcaption{margin-top:12px;font-size:15px;color:var(--muted);font-style:italic;line-height:1.5;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-block:1.8em;}
.gallery figure{margin:0;}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:6px;}
.map-figure{margin-block:1.8em;}
.map-figure svg{width:100%;height:auto;background:var(--forest);border-radius:var(--radius);display:block;border:1px solid rgba(240,233,216,.1);}
.map-figure .map-land{fill:var(--forest-2);stroke:rgba(240,233,216,.15);stroke-width:1.5;}
.map-figure .map-pin{fill:var(--ochre);}
.map-figure .map-lab{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--cream);}

/* cards / references */
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-block:1.8em;}
.profile-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);}
.profile-card .p-photo{width:76px;height:76px;border-radius:50%;object-fit:cover;background:var(--forest);border:3px solid var(--ochre);margin-bottom:16px;}
.profile-card.no-photo::before{
  content:"";display:flex;width:76px;height:76px;border-radius:50%;margin-bottom:16px;
  background:var(--forest);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/></svg>") center/44px no-repeat, var(--forest);
          mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.5-7 8-7s8 3 8 7'/></svg>") center/44px no-repeat, var(--forest);
}
.profile-card.no-photo{position:relative;}
.profile-card h3{font-family:var(--slab);font-weight:900;font-size:22px;color:var(--ink);line-height:1.1;}
.profile-card .p-role{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.09em;text-transform:uppercase;color:var(--ochre-deep);margin-top:4px;}
.profile-card p{font-size:16px;color:var(--muted);margin-top:12px;line-height:1.55;}
.profile-card .p-links{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px 18px;}
.profile-card .p-links a{font-weight:700;font-size:14px;letter-spacing:.04em;text-transform:uppercase;color:var(--ochre-deep);}
.profile-card .p-attr{font-size:13px;color:var(--muted-2);font-style:italic;margin-top:12px;}

.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-block:1.8em;}
.org-card{display:flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;transition:border-color .15s,transform .15s;}
.org-card:hover{border-color:var(--ochre);transform:translateY(-2px);}
.org-logo{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--forest);flex:0 0 auto;}
.org-card.no-logo .org-logo{display:flex;align-items:center;justify-content:center;}
.org-name{display:block;font-family:var(--slab);font-weight:700;font-size:17px;color:var(--ink);line-height:1.1;}
.org-host{display:block;font-size:14px;color:var(--muted-2);margin-top:2px;}

.entity-ref{font-weight:700;color:var(--ochre-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(208,138,44,.35);text-decoration-thickness:2px;white-space:nowrap;}
.entity-ref:hover{color:var(--ink);text-decoration-color:var(--ochre);}

.further-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-block:1.8em;}
.further-grid a{display:block;background:var(--paper);border:1px solid var(--line);border-left:5px solid var(--ochre);border-radius:6px;padding:20px 22px;font-family:var(--slab);font-weight:700;font-size:19px;line-height:1.2;color:var(--ink);transition:transform .15s,border-color .15s;}
.further-grid a:hover{transform:translatey(-2px);border-left-color:var(--forest);color:var(--ochre-deep);}
.further-grid a::after{content:" →";color:var(--ochre-deep);}

/* ---------- contact / forms ---------- */
.contact-methods{list-style:none;padding:0;margin:0;display:grid;gap:16px;}
.contact-methods li{display:flex;gap:16px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;}
.contact-methods .ic{flex:0 0 auto;width:44px;height:44px;border-radius:8px;background:var(--forest);display:flex;align-items:center;justify-content:center;}
.contact-methods .ic svg{width:22px;height:22px;stroke:var(--gold);fill:none;stroke-width:2;}
.contact-methods h3{font-family:var(--slab);font-weight:700;font-size:19px;color:var(--ink);}
.contact-methods p{font-size:16px;color:var(--muted);margin-top:3px;}
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,40px);box-shadow:var(--shadow);}
.form-row{display:grid;gap:8px;margin-bottom:20px;}
.form-row label{font-family:var(--sans);font-weight:700;font-size:15px;letter-spacing:.04em;color:var(--ink);}
.form-row input,.form-row textarea,.form-row select{
  font-family:var(--sans);font-size:17px;padding:14px 16px;border:1.5px solid var(--line);border-radius:6px;background:#FBF7EC;color:var(--ink);width:100%;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{outline:2px solid var(--ochre);border-color:transparent;}
.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;}

/* ---------- 404 ---------- */
.notfound{min-height:78vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--forest);color:var(--cream);padding:var(--gut);}
.notfound .code{font-family:var(--slab);font-weight:900;font-size:clamp(90px,20vw,220px);line-height:.9;color:var(--ochre);letter-spacing:-.02em;}
.notfound h1{font-family:var(--slab);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4vw,46px);margin-top:8px;color:var(--cream);}
.notfound p{font-size:19px;color:#C7D2C4;margin-top:14px;max-width:44ch;}
.notfound .btn{margin-top:30px;}

/* ---------- styleguide scaffold ---------- */
.sg-nav{position:sticky;top:0;z-index:30;background:var(--ink);color:var(--cream);padding:16px var(--gut);display:flex;gap:20px;flex-wrap:wrap;align-items:center;overflow-x:auto;}
.sg-nav a{font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-dark);white-space:nowrap;}
.sg-nav a:hover{color:var(--ochre);}
.sg-section{padding-block:clamp(40px,5vw,64px);border-bottom:1px solid var(--line);}
.sg-label{font-family:var(--sans);font-weight:700;font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--ochre-deep);margin-bottom:8px;}
.sg-section > h2{font-family:var(--slab);font-weight:900;font-size:clamp(26px,3vw,38px);color:var(--ink);margin-bottom:24px;text-transform:uppercase;}
.sg-swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.sw{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);font-size:13px;}
.sw .chip{height:74px;}
.sw .cap{padding:10px 12px;background:var(--paper);font-weight:600;color:var(--ink);}
.sw .cap small{display:block;color:var(--muted-2);font-weight:500;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  body{font-size:18px;}
  .feed{grid-template-columns:1fr;}
  .more-grid{grid-template-columns:repeat(2,1fr);}
  .site-footer .grid{grid-template-columns:1fr 1fr;}
  .form-grid-2{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);background:var(--ink);
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;
    padding:90px 28px 40px;transform:translateX(105%);transition:transform .28s ease;
    box-shadow:-20px 0 60px rgba(0,0,0,.4);z-index:40;
  }
  .nav-links a{font-size:19px;padding:10px 0;width:100%;}
  .nav-toggle{display:inline-flex;z-index:41;position:relative;}
  .nav-check:checked ~ .nav-links{transform:translateX(0);}
  .nav-check:checked ~ .nav-overlay{opacity:1;pointer-events:auto;}
  .nav-overlay{position:fixed;inset:0;background:rgba(15,15,10,.5);opacity:0;pointer-events:none;transition:opacity .28s;z-index:39;}
  .statstrip .grid{grid-template-columns:repeat(2,1fr);}
  .cats{grid-template-columns:1fr;}
  .news .grid{grid-template-columns:1fr;}
  .partners .sec-head,.news .grid{text-align:left;}
  .sponsor-wall .sponsor:nth-child(1),
  .sponsor-wall .sponsor:nth-child(2){grid-column:span 2;grid-row:auto;}
  .prose{font-size:19px;}
}
@media (max-width:560px){
  body{font-size:17px;}
  .hostbar .grid{grid-template-columns:1fr;text-align:left;}
  .more-grid{grid-template-columns:1fr;}
  .site-footer .grid{grid-template-columns:1fr;}
  .news form{flex-direction:column;}
  .field{min-width:0;}
  .sec-head{align-items:flex-start;}
  /* overlay text safety: category text always readable */
  .cat{min-height:280px;}
  .statrow{grid-template-columns:1fr 1fr;}
  .sponsor-hero{grid-template-columns:1fr 1fr;}
  .sponsor-wall{grid-template-columns:repeat(2,1fr);}
  .sponsor-wall .sponsor:nth-child(1),
  .sponsor-wall .sponsor:nth-child(2){grid-column:span 2;}
}
@media (max-width:380px){
  .statrow,.sponsor-hero{grid-template-columns:1fr;}
  .statstrip .grid{grid-template-columns:1fr;}
}

/* fix: the "feature first-2 larger" rule must apply to the PRIMARY wall only —
   inside the Show-more reveal every partner is a normal small wall item */
.partner-more .sponsor-wall .sponsor:nth-child(-n+2){grid-column:span 1;}
.partner-more .sponsor-wall .sponsor:nth-child(-n+2) img{height:64px;}

/* sponsor label = real brand name (not "Logo N") */
.sponsor::before{content:attr(data-brand)!important;}
/* host quote: use the empty right side for a locator map of the domain's place */
.hostbar .grid{grid-template-columns:auto minmax(0,1fr) clamp(380px,40vw,580px);}
.hostbar .locator-map{margin:0;border:1px solid var(--forest-line);border-radius:var(--radius);overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow-sm,0 8px 20px -12px rgba(26,23,18,.4));}
.hostbar .locator-map svg{display:block;width:100%;}
.hostbar .locator-map figcaption{font-size:13px;color:var(--muted-dark,#6b6250);padding:10px 14px;border-top:1px solid var(--forest-line);font-family:var(--ui,inherit);}
@media (max-width:900px){ .hostbar .grid{grid-template-columns:auto 1fr;} .hostbar .locator-map{grid-column:1 / -1;max-width:520px;margin-inline:auto;width:100%;} }

/* pipeline: sponsor link-treatment variety (footprint) */
.sponsor::before{content:none!important;}                 /* the variant controls any name text */
.sponsor .sp-name{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;font-family:inherit;letter-spacing:.01em;}
.sponsor .sp-name:hover{text-decoration:underline;text-underline-offset:3px;}
.sponsor .sp-name.bold{font-weight:700;}
.sponsor .sp-cta{display:inline-block;margin-top:8px;color:inherit;text-decoration:none;font-weight:600;opacity:.8;font-size:.9em;}
.sponsor .sp-cta:hover{text-decoration:underline;opacity:1;}

/* ===== pipeline mobile-gutter guard (finalize) — content never touches the screen edge ===== */
@media (max-width:680px){
  .wrap,.wrap-wide,.container,.hero-inner,.footer-inner,.footer-bottom,.article-inner,.climate-inner,.nav,
  [class$="-inner"],[class*="-inner "]{
    padding-left:max(18px,env(safe-area-inset-left,0px))!important;
    padding-right:max(18px,env(safe-area-inset-right,0px))!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. */
.sponsor-wall .sponsor.sponsor img{height:64px!important}

/* op-footer-compact: the footer printed 9 rows for 9 link(s) in
   2 list(s) — 757px at 390, 11% 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, and the group holder takes two columns,
   measured 757 -> 502px (34% 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,3.89vw,56px)!important;row-gap:8px!important}
  footer ul > li,footer ol > li{width:auto!important;flex:0 0 auto;max-width:100%}
  footer [class*=grid],footer [class*=index],footer [class*=cols]{grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px}
}

/* op-blurb-rows: money blurbs ran to 7 rows at 390, 1654px 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-wall .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}
  .sponsor-wall .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: .sponsor-wall (5 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-wall:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 836px (98 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through max-width 74ch (declared in .prose) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.prose{max-width:min(871px, 100%)!important}
}
@media (min-width:1600px){
  div.prose{max-width:min(clamp(871px, 60.486vw, 1045px), 100%)!important}
  div.prose > :is(p:not([class])), div.prose > :is(ol.timeline) > li{font-size:clamp(20px,1.3889vw,24.0px)!important}
}
/* op-article-width:end */

/* op-blurb-two-rows: money blurbs ran FIVE rows or more (desk: .sponsor-wall 5 rows at 768). 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){
  .sponsor-wall .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){margin: 0px;}
.contact-methods h2:where(.rt-h3){font-family: var(--slab); font-weight: 700; font-size: 19px; color: var(--ink);}
/* op-heading-levels:end */

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