/* Step Up AVL — "The Broadsheet".
   Design system for the homepage, the four section pages, and the shared
   masthead/footer shell. Articles (files/) and the Desk (desk/) keep their own
   sheets for now and join this file in later phases.

   Colors are sampled from the Step Up AVL logo. Source of truth for the tokens
   and the section specs: _docs/design/broadsheet-2026-07/README.md */

:root {
  /* Main-site palette */
  --paper:        #F6F3EC;
  --ink:          #1D2B2D;
  --avl-green:    #2E7B6F;
  --deep-green:   #216F57;
  --bar-1:        #6ACCA6;
  --bar-2:        #35A076;
  --bar-3:        #216F57;
  --gold:         #DEB249;
  /* --gold is a dot/underline color; at 1.9:1 on paper it cannot carry text.
     Small gold LABELS use this instead (5.0:1). */
  --gold-text:    #7A5C14;

  /* Article reading mode (used from phase 3 on; declared here so the
     tokens live in one place) */
  --article-red:  #C04A33;
  --charcoal:     #26221E;
  --spruce:       #223B33;
  --callout-tint: #F1EAD9;
  --cta-cream:    #E9E2D4;

  /* Text */
  --body-text:    #2C3733;
  --text-secondary: #5C6B66;
  --text-tertiary:  #33403C;

  /* Rules, panels, cards */
  --hairline:   #CFD7D0;
  --panel-rule: #DDE3DC;
  --panel-bg:   #EAEFE9;
  --panel-bg-2: #EFF3EE;
  --card-bg:    #FCFBF4;

  /* Footer */
  --foot-body:  #A9B3AE;
  --foot-link:  #C9CFC9;
  --foot-label: #7E8B85;

  /* WNC Desk sub-brand */
  --desk-indigo: #2A265C;
  --desk-sheet:  #FBF8F1;
  --desk-panel:  #F0EBDE;
  --desk-label:  #2F4A57;   /* was #3D5B6A; the mono labels read washed out */
  --desk-ink:    #2A2620;
  --desk-meta:   #4E4940;   /* was #5B554A; Courier at label sizes reads faint */
  /* Courier New has no medium weight, so a mono label can only get darker, not
     heavier. This is the ink for mono metadata (datelines, dates, captions). */
  --desk-mono:   #3B372F;
  --desk-rule:   #E0D9C8;
  --signed:      #516B3C;
  --pending:     #B28340;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "Courier New", ui-monospace, SFMono-Regular, Menlo, monospace;

  --measure: 1140px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body-text);
  font-family: var(--serif);
  font-optical-sizing: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--avl-green); text-decoration: none; }
a:hover { color: var(--deep-green); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; z-index: 10;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------ trust strip */

.trust {
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.trust .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 9px; padding-bottom: 9px; flex-wrap: wrap;
}
.trust a { color: var(--avl-green); }
.trust-sep { color: var(--hairline); margin: 0 6px; }

/* ---------------------------------------------------------------- masthead */

.masthead .wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding-top: 26px;
  padding-bottom: 22px;
}

.mast-follow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.mast-follow .follow-label { display: block; margin-bottom: 9px; }
.mast-follow a {
  display: inline-flex; align-items: center; gap: 6px;
  margin-right: 14px; color: var(--avl-green);
  letter-spacing: 0.06em;
}
.mast-follow svg { width: 13px; height: 13px; flex: none; }

.brand-lockup {
  display: inline-flex; align-items: flex-end; gap: 14px;
  position: relative; color: var(--ink);
}
.brand-lockup:hover { color: var(--ink); }

.brand-mark { position: relative; width: 44px; height: 40px; flex: none; }
.brand-mark i {
  position: absolute; bottom: 0; width: 9px; display: block; border-radius: 0;
}
.brand-mark i:nth-child(1) { left: 0;  height: 18px; background: var(--bar-1); }
.brand-mark i:nth-child(2) { left: 12px; height: 28px; background: var(--bar-2); }
.brand-mark i:nth-child(3) { left: 24px; height: 40px; background: var(--bar-3); }
.brand-mark b {
  position: absolute; top: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold);
}

.wordmark {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 58px;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.wordmark .avl { color: var(--avl-green); }

.mast-action { justify-self: end; }

.btn-solid {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--avl-green); color: var(--paper);
  font-family: var(--sans); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 11px 18px; border-radius: 2px;
  transition: background 0.15s ease;
}
.btn-solid:hover { background: var(--deep-green); color: var(--paper); }

.btn-outline {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--avl-green); color: var(--avl-green);
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  padding: 7px 13px; border-radius: 2px;
  transition: background 0.15s ease, color 0.15s ease;
}
.btn-outline:hover { background: var(--avl-green); color: var(--paper); }

.btn-desk {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--desk-indigo); color: var(--desk-sheet);
  border: 1px solid var(--desk-indigo);
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  padding: 7px 13px; border-radius: 2px;
}
.btn-desk:hover { background: #221E4C; color: var(--desk-sheet); }

/* -------------------------------------------------------------- nav rule */

.navrule {
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
}
.navrule .wrap {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 4px;
  padding-top: 11px; padding-bottom: 11px;
}
.navrule a {
  font-family: var(--sans); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); padding: 2px 0;
}
.navrule a:hover { color: var(--avl-green); }
.navrule a[aria-current="page"] {
  box-shadow: 0 5px 0 -3px var(--gold);
}
.navrule .dot { color: var(--hairline); margin: 0 14px; }

/* ------------------------------------------------- inner-page compact header */

/* The inner-page header sticks to the top on scroll. The trust strip above it
 * scrolls away; the 3px double rule moves onto the header itself so the rule
 * travels with it (the standalone .navrule-thin would otherwise slide under). */
.masthead.compact {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 3px double var(--ink);
}
.masthead.compact + .navrule-thin { display: none; }

.masthead.compact .wrap {
  grid-template-columns: auto 1fr;
  padding-top: 16px; padding-bottom: 14px;
}
.masthead.compact .brand-mark { width: 26px; height: 24px; }
.masthead.compact .brand-mark i { width: 5px; }
.masthead.compact .brand-mark i:nth-child(1) { height: 11px; }
.masthead.compact .brand-mark i:nth-child(2) { left: 7px; height: 17px; }
.masthead.compact .brand-mark i:nth-child(3) { left: 14px; height: 24px; }
.masthead.compact .brand-mark b { width: 6px; height: 6px; }
.masthead.compact .wordmark { font-size: 23px; }
.masthead.compact .inner-nav {
  justify-self: end;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.masthead.compact .inner-nav a {
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.masthead.compact .inner-nav a:hover { color: var(--avl-green); }
.masthead.compact .inner-nav a[aria-current="page"] {
  box-shadow: 0 5px 0 -3px var(--gold);
}
.masthead.compact .inner-nav .btn-solid { color: var(--paper); box-shadow: none; }


/* ------------------------------------------------------------ lead section */

.lead {
  display: grid; grid-template-columns: 1.9fr 1fr; gap: 34px;
  padding: 32px 0 34px;
  border-bottom: 1px solid var(--hairline);
}
.lead-main {
  padding-right: 34px;
  border-right: 1px solid var(--hairline);
}

.kicker {
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--avl-green); margin: 0 0 12px;
}

.lead-main h1 {
  font-family: var(--serif); font-weight: 600; font-size: 38px;
  line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ink); margin: 0 0 14px;
}
/* :not(.kicker) matters: a bare `.lead-main p` outranks `.kicker` and silently
 * blew the 11px kicker up to 18px. */
.lead-main > p:not(.kicker) { font-size: 18px; line-height: 1.55; margin: 0 0 18px; }
.lead-more {
  /* inline-block, not the inherited inline-flex: the flex `gap` would open a
     6px hole either side of the injected org count. */
  display: inline-block;
  font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0;
  padding: 10px 18px;
}

.lead-side { border-left: 4px solid var(--gold); padding-left: 18px; }
.lead-side p.lead-stat {
  font-family: var(--serif); font-weight: 700; font-size: 52px;
  line-height: 1; color: var(--deep-green); margin: 0;
}
.lead-side p { font-size: 16px; line-height: 1.5; margin: 10px 0 6px; }
.lead-side .lead-cta { display: inline-block; }
.lead-side p.lead-note {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.04em;
  color: var(--text-secondary); margin: 0 0 18px;
}
.lead-cta {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  color: var(--ink); border-bottom: 2px solid var(--gold); padding-bottom: 2px;
  letter-spacing: 0;
}
.lead-cta:hover { color: var(--deep-green); }

/* -------------------------------------------------------- section scaffolding */

.section { padding: 30px 0 34px; border-bottom: 1px solid var(--hairline); }
.section:last-of-type { border-bottom: 0; }

.section-label {
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary); margin: 0 0 14px;
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 18px;
}
.section-head h2 {
  font-family: var(--serif); font-weight: 600; font-size: 27px;
  color: var(--ink); margin: 0; letter-spacing: -0.01em;
}
.section-sub { font-size: 15px; color: var(--text-secondary); margin: 0; }

/* ------------------------------------------------------ organization spotlight */

/* The "AVL Steps Up" banner is NOT on the Broadsheet homepage. The name now
 * lives only in the footer's "On the name" line and the colophon.
 * (was: the celebratory banner for the orgs that already have.
   Distinct from the "Step Up AVL" wordmark, which is the site's identity. */
.spotlight-head .eyebrow {
  font-family: var(--sans); font-weight: 600; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 18px;
}
.spotlight-duo {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 28px;
}
.spotlight-card {
  background: var(--card-bg);
  border: 1px solid var(--panel-rule);
  border-top: 3px solid var(--avl-green);
  padding: 18px 20px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.spotlight-card:hover {
  border-color: var(--avl-green);
  box-shadow: 0 8px 20px -14px rgba(29, 43, 45, 0.4);
}
.spotlight-card h3 {
  font-family: var(--serif); font-weight: 600; font-size: 24px;
  margin: 0 0 3px; letter-spacing: -0.01em;
}
.spotlight-card h3 a { color: var(--ink); }
.spotlight-card h3 a:hover { color: var(--deep-green); }
.spotlight-card .city {
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #4A5A54; margin-bottom: 10px;
}
.spotlight-card .lede { font-size: 16px; line-height: 1.5; margin: 0 0 9px; }

.duo-stats { font-family: var(--sans); font-size: 13px; color: var(--ink); margin: 0 0 4px; }
.duo-stats .bigstat strong {
  font-family: var(--serif); font-weight: 700; font-size: 17px; color: var(--deep-green);
}
.duo-stats .stat-sep { color: var(--text-secondary); margin: 0 8px; }

.org-note {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--text-secondary); margin: 0 0 18px;
}

.ctas { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; }
.ctas .btn.donate {
  background: var(--avl-green); color: var(--paper);
  padding: 8px 15px; border-radius: 2px;
}
.ctas .btn.donate:hover { background: var(--deep-green); color: var(--paper); }
.ctas .btn.volunteer {
  color: var(--avl-green); border: 1px solid var(--avl-green);
  padding: 7px 14px; border-radius: 2px;
}
.ctas .btn.volunteer:hover { background: var(--avl-green); color: var(--paper); }
.ctas .btn.learn {
  color: var(--ink); margin-left: 12px;
  border-bottom: 1px solid var(--gold); padding-bottom: 1px;
}
.ctas .btn.learn:hover { color: var(--deep-green); border-bottom: 2px solid var(--gold); }

/* --------------------------------------------- start here + WNC Desk teaser */

.home-duo {
  display: grid; grid-template-columns: 1fr 1.5fr; gap: 40px;
  padding: 30px 0 38px;
}

.start-cards { display: grid; gap: 14px; }
.start-card {
  background: var(--panel-bg-2);
  border: 1px solid #D5DCD4;
  border-top: 3px solid var(--avl-green);
  padding: 16px 18px;
  transition: border-color 0.15s ease;
}
.start-card:hover { border-color: var(--avl-green); }
.start-card .e {
  display: block; font-family: var(--sans); font-size: 10px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--avl-green); margin-bottom: 6px;
}
.start-card .t {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 18px;
  color: var(--ink); line-height: 1.25;
}
.start-card .c {
  display: block; font-family: var(--sans); font-size: 13px;
  color: var(--text-secondary); margin-top: 5px;
}

.desk-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
/* Shared by the Desk teaser and the Featured-reads strip: a 12px ink label with
 * an 11px muted caption under it. Both are Archivo; neither is a serif heading. */
.head-label {
  font-family: var(--sans); font-weight: 700; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}
.head-sub {
  font-family: var(--sans); font-size: 11px; line-height: 1.45;
  color: var(--text-secondary); margin: 3px 0 0;
}
.desk-cards { display: grid; gap: 12px; }
.desk-card {
  display: block; background: var(--card-bg);
  border: 1px solid var(--panel-rule);
  border-left: 3px solid var(--desk-indigo);
  padding: 13px 16px;
  transition: border-color 0.15s ease;
}
.desk-card:hover { border-color: var(--desk-indigo); }
.desk-card .jur {
  display: block; font-family: var(--sans); font-size: 9.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--desk-label);
}
.desk-card .h {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 17px;
  color: var(--ink); line-height: 1.25; margin-top: 3px;
}

/* ------------------------------------------------------------ featured reads */

.reads-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.read-card {
  display: block; background: var(--card-bg);
  border: 1px solid var(--panel-rule);
  border-top: 3px solid var(--avl-green);
  padding: 16px 18px 18px;
  transition: border-color 0.15s ease;
}
.read-card:hover { border-color: var(--avl-green); }
.read-card .rk {
  font-family: var(--sans); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--avl-green);
}
.read-card .rt {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 19px;
  color: var(--ink); line-height: 1.28; margin: 7px 0 8px;
}
.read-card .rd { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }

/* ------------------------------------------------------------------- footer */

.site-foot {
  background: var(--ink); color: var(--foot-body);
  margin-top: 48px; padding: 40px 0 30px;
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
}
.site-foot .wrap {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 34px;
}
.site-foot .wordmark { font-size: 26px; color: var(--paper); }
.site-foot .wordmark .avl { color: var(--bar-1); }
.site-foot .brand-lockup { color: var(--paper); margin-bottom: 12px; }
.site-foot .brand-mark { width: 24px; height: 22px; }
.site-foot .brand-mark i { width: 5px; }
.site-foot .brand-mark i:nth-child(1) { height: 10px; }
.site-foot .brand-mark i:nth-child(2) { left: 7px; height: 16px; }
.site-foot .brand-mark i:nth-child(3) { left: 14px; height: 22px; }
.site-foot .brand-mark b { width: 6px; height: 6px; }
.foot-col h3 {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--foot-body); font-weight: 600; margin: 0 0 12px;
}
.foot-col a { display: block; color: var(--foot-link); margin-bottom: 8px; }
.foot-col a:hover { color: var(--paper); }
.foot-col a.emph { font-weight: 600; color: var(--paper); }
.foot-disclaimer { margin: 0 0 6px; max-width: 42ch; }
.foot-legal { color: var(--foot-body); font-size: 12px; margin-top: 14px; }
.foot-soc { display: inline-flex; align-items: center; gap: 7px; }
.foot-soc svg { width: 13px; height: 13px; flex: none; }

/* --------------------------------------------------------- page head (inner) */

.page-head { padding: 34px 0 26px; border-bottom: 1px solid var(--ink); }
.page-head h1 {
  font-family: var(--serif); font-weight: 600; font-size: 42px;
  letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px;
}
.page-head .standfirst {
  font-size: 19px; font-style: italic; color: var(--text-secondary);
  margin: 0; max-width: 68ch; line-height: 1.5;
}

/* ------------------------------------------------ organizations page (rows) */

/* A decision-support directory (DELTA-v13): what have you got to give, then the
 * nine organizations under their cause and its headline figure, then guidance
 * rather than a dead end. No filter row; every org is on the page. */

.page-head h1 em { font-style: italic; font-weight: 500; color: var(--article-red); }

.give-strip {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  border: 1px solid var(--ink);
  margin: 26px 0 30px;
}
.give-cell { padding: 16px 20px; border-right: 1px solid var(--hairline); }
.give-cell:last-child { border-right: 0; }
.give-q {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  color: var(--ink); margin: 0 0 3px;
}
.give-q em { font-style: italic; color: var(--deep-green); }
.give-a {
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: var(--text-secondary); margin: 0;
}
.give-a a { font-weight: 600; }

.cause-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 8px;
  margin: 34px 0 2px;
}
.cause-head:first-child { margin-top: 0; }
.cause-kicker {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--article-red);
}
.cause-count { font-family: var(--serif); font-size: 22px; font-weight: 600; color: var(--ink); }
.cause-spacer { flex: 1; }
.cause-stat { font-family: var(--sans); font-size: 11px; color: var(--text-secondary); }

.org-row {
  display: grid; grid-template-columns: 1fr 250px; gap: 36px;
  padding: 22px 0;
  border-bottom: 1px solid var(--panel-rule);
}
.org-name { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.org-name h3 {
  font-family: var(--serif); font-weight: 600; font-size: 26px; margin: 0;
}
.org-name h3 a { color: var(--ink); }
.org-name h3 a:hover { color: var(--deep-green); }
.org-tag {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary);
}
.org-mission {
  font-size: 16px; line-height: 1.55; color: var(--body-text);
  margin: 8px 0 10px; max-width: 64ch;
}
.org-doing {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.5;
  color: var(--text-secondary); margin: 0;
}
.org-doing b { color: var(--text-tertiary); font-weight: 600; }

.org-rail {
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
}
.org-stat {
  font-family: var(--serif); font-size: 24px; font-weight: 700;
  color: var(--deep-green); line-height: 1.1; margin: 0 0 6px;
}
.org-stat span {
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  color: var(--text-secondary);
}
.org-rail .org-note { margin: 6px 0 0; }
.org-rail .ctas { gap: 8px; font-size: 12.5px; }
.org-rail .ctas .btn.donate,
.org-rail .ctas .btn.volunteer { padding: 8px 13px; }
.org-rail .ctas .btn.learn { margin-left: 0; padding: 8px 0; }

.org-closer {
  background: var(--panel-bg);
  border-top: 3px solid var(--avl-green);
  padding: 18px 22px;
  margin: 34px 0 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.closer-h { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); margin: 0 0 3px; }
.closer-p { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; color: var(--text-secondary); margin: 0; max-width: 70ch; }
.org-closer .btn-outline { font-size: 13px; padding: 9px 16px; white-space: nowrap; }

.empty { padding: 40px 0; color: var(--text-secondary); font-style: italic; }

/* ----------------------------------------------------------------- news page */

/* Story-clustered digest (design bundle, DELTA-v11): two densities, geography
 * demoted to a tag, and one Context link per cluster into our own explainer. */

.news-updated {
  font-family: var(--sans); font-size: 12px; color: var(--text-secondary);
  margin: 0 0 18px;
}
.news-empty { font-family: var(--sans); font-size: 12px; color: var(--text-secondary); }

/* ------- if you read one thing */

.news-picks {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 20px 0 22px;
  margin-bottom: 26px;
}
.picks-kicker {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--article-red); margin: 0 0 14px;
}
.picks-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
.pick { border-left: 3px solid var(--article-red); padding-left: 14px; }
.pick-h {
  display: block; font-family: var(--serif); font-size: 18px; font-weight: 600;
  line-height: 1.3; color: var(--ink); margin-bottom: 5px;
}
.pick-h:hover { color: var(--avl-green); }
.pick-ctx {
  font-family: var(--sans); font-size: 13px; line-height: 1.45;
  color: var(--text-secondary); margin: 0 0 6px;
}
.pick-meta {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-secondary); margin: 0;
}

/* ------- story clusters */

.news-clusters { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.cluster { margin-bottom: 30px; }
.cluster-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid var(--ink); padding-bottom: 7px; margin-bottom: 4px;
}
.cluster-name {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
}
.cluster-count { font-family: var(--sans); font-size: 10px; color: var(--text-secondary); }

.news-row { padding: 10px 0; border-bottom: 1px solid var(--panel-rule); }
.news-row.last { border-bottom: 0; }
.news-h {
  display: block; font-family: var(--serif); font-size: 15.5px;
  font-weight: 600; line-height: 1.35; color: var(--ink);
}
.news-h:hover { color: var(--avl-green); }
.news-meta {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-secondary); margin: 3px 0 0;
}
.news-meta .scope.local { color: var(--avl-green); }
.news-meta .scope.national { color: var(--text-secondary); }

.cluster-ctx {
  display: inline-block; font-family: var(--sans); font-size: 12.5px;
  font-weight: 600; color: var(--avl-green); padding-top: 10px;
}

/* ------- earlier coverage */

.earlier-toggle {
  display: block; margin: 0 auto; max-width: 360px; width: 100%;
  background: none; border: 1px solid var(--avl-green); border-radius: 2px;
  color: var(--avl-green); font-family: var(--sans); font-size: 13px;
  font-weight: 600; padding: 13px; cursor: pointer;
}
.earlier-toggle:hover { background: var(--panel-bg); }

.earlier-panel { border-top: 2px solid var(--ink); padding-top: 10px; }
.earlier-label {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-secondary); margin: 18px 0 4px;
}
.earlier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.earlier-row { padding: 9px 0; border-bottom: 1px solid var(--panel-rule); }
.earlier-row a {
  font-family: var(--serif); font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.earlier-row a:hover { color: var(--avl-green); }
.earlier-meta {
  font-family: var(--sans); font-size: 10px; text-transform: uppercase;
  color: var(--text-secondary);
}
.earlier-collapse {
  display: block; margin: 22px auto 0; background: none; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--avl-green);
}

/* --------------------------------------------------------------- issues page */

.learn-starts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px; padding: 28px 0;
}
.learn-start {
  display: block; background: var(--panel-bg-2);
  border: 1px solid #D5DCD4; border-top: 3px solid var(--avl-green);
  padding: 18px 20px; transition: border-color 0.15s ease;
}
.learn-start:hover { border-color: var(--avl-green); }
.ls-eyebrow {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--avl-green);
}
.ls-title {
  display: block; font-family: var(--serif); font-weight: 600; font-size: 20px;
  color: var(--ink); line-height: 1.25; margin: 7px 0 5px;
}
.ls-sub { display: block; font-family: var(--sans); font-size: 13px; color: var(--text-secondary); }

.lf-search { padding-bottom: 14px; }
.lf-search input {
  width: 100%; font-family: var(--sans); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 2px; padding: 10px 12px;
}
.lf-search input:focus { outline: 2px solid var(--avl-green); outline-offset: 1px; }
.lf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.lf-label {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary); min-width: 60px;
}
.chip {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  background: none; border: 1px solid var(--hairline); border-radius: 2px;
  padding: 6px 12px; color: var(--ink); cursor: pointer;
}
.chip:hover { border-color: var(--avl-green); color: var(--avl-green); }
.chip.active { background: var(--avl-green); border-color: var(--avl-green); color: var(--paper); }
.chip-n { opacity: 0.7; margin-left: 4px; }
.lf-count {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary); margin: 8px 0 20px;
}

.resource-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px; padding-bottom: 20px;
}
.resource-card {
  background: var(--card-bg); border: 1px solid var(--panel-rule);
  border-top: 3px solid var(--avl-green);
  padding: 16px 18px 18px; cursor: pointer;
  transition: border-color 0.15s ease;
  display: flex; flex-direction: column;
}
.resource-card:hover { border-color: var(--avl-green); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rc-topics { display: flex; gap: 6px; }
.rc-topic {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.rc-format {
  font-family: var(--sans); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text);
}
.resource-card h3 { margin: 8px 0; }
.rc-title {
  font-family: var(--serif); font-weight: 600; font-size: 19px;
  color: var(--ink); line-height: 1.28;
}
.resource-card:hover .rc-title { color: var(--avl-green); }
.resource-card p { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 0 0 8px; }
.rc-snippet mark { background: var(--callout-tint); color: var(--ink); }
.rc-date {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-secondary); margin-bottom: 10px;
}
.rc-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: auto; padding-top: 8px;
}
.rc-open, .rc-pdf {
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--avl-green);
}

/* the collapsible library map keeps its own compact styling */
.learn-map { border: 1px solid var(--panel-rule); background: var(--card-bg); margin: 0 0 26px; }
.learn-map > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink);
}
.learn-map > summary::-webkit-details-marker { display: none; }
.learn-map .lm-count { margin-left: auto; letter-spacing: 0.04em; text-transform: none;
  font-weight: 400; color: var(--text-secondary); }
.learn-map .lm-chev { flex: none; transition: transform 0.2s; color: var(--text-secondary); }
.learn-map[open] > summary .lm-chev { transform: rotate(90deg); }
.learn-map[open] > summary { border-bottom: 1px solid var(--panel-rule); }
.lm-body { padding: 4px 14px 10px; }
.lm-branch { border-bottom: 1px solid var(--panel-rule); }
.lm-branch:last-child { border-bottom: 0; }
.lm-branch > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 11px 6px; font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink);
}
.lm-branch > summary::-webkit-details-marker { display: none; }
.lm-branch > summary:hover { color: var(--avl-green); }
.lm-dot { width: 10px; height: 10px; flex: none; }
.lm-btot { margin-left: auto; font-family: var(--sans); font-size: 12px;
  color: var(--text-secondary); font-weight: 400; }
.lm-bchev { flex: none; color: var(--text-secondary); transition: transform 0.2s; }
.lm-branch[open] > summary .lm-bchev { transform: rotate(90deg); }
.lm-sub {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-secondary); margin: 12px 0 4px 22px;
}
.lm-link {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 10px 6px 22px;
  border-left: 2px solid transparent; color: var(--ink);
}
.lm-link:hover, .lm-link:focus-visible {
  background: var(--panel-bg-2); color: var(--avl-green);
  border-left-color: var(--avl-green); outline: none;
}
.lm-name { font-size: 15px; line-height: 1.3; }
.lm-role { font-family: var(--sans); font-size: 12px; color: var(--text-secondary); }

.issue-groups {
  display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 8px 0 28px;
}

/* ---------------------------------------------------- quiz: test what you know */

/* v8 "feature box": a full-width newspaper panel between the org spotlight and
 * the Start here / WNC Desk row. Spec: DELTA-v8-quiz.md. */

.quiz { padding: 30px 0 34px; border-bottom: 1px solid var(--ink); }
.quiz-box { border: 1px solid var(--ink); background: var(--paper); }

/* ------- header band */

.quiz-band {
  border-bottom: 3px double var(--ink);
  padding: 22px 30px 18px;
  text-align: center;
}
.quiz-crest {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-bottom: 12px;
}
.quiz-crest .rule { flex: 1; max-width: 120px; height: 1px; background: var(--hairline); }
.quiz-mark { position: relative; width: 26px; height: 24px; flex: none; }
.quiz-mark i { position: absolute; bottom: 0; width: 5px; }
.quiz-mark i:nth-child(1) { left: 0;  height: 11px; background: var(--bar-1); }
.quiz-mark i:nth-child(2) { left: 7px; height: 17px; background: var(--bar-2); }
.quiz-mark i:nth-child(3) { left: 14px; height: 24px; background: var(--bar-3); }
.quiz-mark b {
  position: absolute; top: 0; right: -2px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.quiz-band h2 {
  font-family: var(--serif); font-weight: 600; font-size: 32px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 8px;
}
.quiz-band h2 em { font-style: italic; font-weight: 500; color: var(--article-red); }
.quiz-band p {
  font-family: var(--serif); font-style: italic; font-size: 16px;
  color: var(--text-secondary); margin: 0;
}

/* ------- body: 2 columns */

.quiz-body { display: grid; grid-template-columns: 1fr 340px; }
.quiz-ask { padding: 26px 34px 30px; border-right: 1px solid var(--hairline); }
.quiz-side {
  background: var(--card-bg); padding: 26px 30px 30px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}

.quiz-eyebrow {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--avl-green);
  margin: 0 0 12px;
}
.quiz-q {
  font-family: var(--serif); font-weight: 500; font-size: 25px; line-height: 1.25;
  color: var(--ink); margin: 0 0 22px; text-wrap: pretty;
}

/* ------- guessing state */

.quiz-slider { width: 100%; margin: 6px 0 8px; accent-color: var(--avl-green); }
.quiz-range-lbls {
  display: flex; justify-content: space-between;
  font-family: var(--sans); font-size: 11.5px; color: var(--text-secondary);
}
.quiz-readout {
  font-family: var(--serif); color: var(--deep-green); text-align: center;
  line-height: 1.05;
}
.quiz-readout .qr-pre { font-size: 22px; }
.quiz-readout .qr-num { font-size: 52px; font-weight: 700; }
.quiz-readout .qr-suf { font-size: 18px; }
.quiz-readout-lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--avl-green);
  text-align: center; max-width: 200px; margin: 12px auto 0;
  padding-bottom: 8px; border-bottom: 2px solid var(--gold);
}

/* ------- revealed state: guess vs. real, on one scale */

.quiz-bars { margin: 4px 0 0; }
.quiz-bar + .quiz-bar { margin-top: 18px; }
.quiz-bar-top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}
.quiz-bar-lbl {
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-secondary);
}
.quiz-bar-val { font-family: var(--sans); font-weight: 700; color: var(--text-tertiary); }
.quiz-bar-track { height: 16px; background: var(--panel-bg); }
.quiz-bar-fill { height: 100%; background: #8C9B93; }
.quiz-bar.real .quiz-bar-lbl { font-weight: 700; color: var(--article-red); }
.quiz-bar.real .quiz-bar-val {
  font-family: var(--serif); font-weight: 700; font-size: 16px; color: var(--article-red);
}
.quiz-bar.real .quiz-bar-fill { background: var(--article-red); }
.quiz-verdict {
  font-family: var(--serif); font-style: italic; font-size: 15.5px;
  color: var(--text-tertiary); margin: 20px 0 0;
}

/* ------- flip cards (no slider): the answer carries the reveal */

.quiz-answer {
  font-family: var(--serif); font-weight: 700; font-size: 44px; line-height: 1;
  color: var(--article-red); margin: 0;
}

/* ------- side column, revealed */

.quiz-note { font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--body-text); margin: 0; }
.quiz-source { font-family: var(--sans); font-size: 10.5px; line-height: 1.5; color: var(--text-secondary); margin: 12px 0 0; }
.quiz-story { font-family: var(--sans); font-size: 12px; font-weight: 600; display: inline-block; margin-top: 10px; }

/* ------- buttons */

.quiz-reveal, .quiz-next {
  font-family: var(--sans); font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 2px; padding: 14px; width: 100%;
}
.quiz-reveal { background: var(--avl-green); color: var(--paper); border: 0; }
.quiz-reveal:hover { background: var(--deep-green); }
.quiz-next {
  background: none; color: var(--avl-green); border: 1px solid var(--avl-green);
}
.quiz-next:hover { background: var(--panel-bg); }

@media (max-width: 760px) {
  .quiz-body { grid-template-columns: 1fr; }
  .quiz-ask { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 22px 20px 26px; }
  .quiz-side { padding: 22px 20px 26px; }
  .quiz-band { padding: 20px 18px 16px; }
  .quiz-band h2 { font-size: 26px; }
  .quiz-q { font-size: 21px; }
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .lead { grid-template-columns: 1fr; }
  .lead-main { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 28px 0; }
  .lead-side { padding: 28px 0 28px 20px; }
  .home-duo { grid-template-columns: 1fr; gap: 30px; }
  .picks-grid { grid-template-columns: 1fr; gap: 20px; }
  .news-clusters { grid-template-columns: 1fr; }
  .earlier-grid { grid-template-columns: 1fr; }
  .issue-groups { grid-template-columns: 1fr; }
  .site-foot .wrap { grid-template-columns: 1fr 1fr; }
  .give-strip { grid-template-columns: 1fr; }
  .give-cell { border-right: 0; border-bottom: 1px solid var(--hairline); }
  .give-cell:last-child { border-bottom: 0; }
  .org-row { grid-template-columns: 1fr; gap: 18px; }
  .org-rail { border-left: 0; border-top: 3px solid var(--gold); padding: 14px 0 0; }
}

@media (max-width: 760px) {
  .wrap { padding: 0 18px; }
  .masthead .wrap { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .mast-action { justify-self: start; }
  .wordmark { font-size: 42px; }
  .navrule .wrap { gap: 10px 0; }
  .navrule .dot { margin: 0 8px; }
  .page-head h1 { font-size: 33px; }
  .lead-main h1 { font-size: 30px; }
  .site-foot .wrap { grid-template-columns: 1fr; gap: 26px; }
  /* The brand and the nav stack here, so the row gap and padding are what make a
   * sticky header tall. Trim both. */
  .masthead.compact .wrap {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 12px;
    padding-bottom: 10px;
  }
  /* Four labels on one line at 375px: tighten the gap and the tracking. */
  .masthead.compact .inner-nav { justify-self: start; gap: 11px; }
  .masthead.compact .inner-nav a { letter-spacing: 0.07em; }
  /* The filled "Use my research" button wrapped the inner nav onto a second row,
   * which made a sticky header a third of a phone screen tall. Drop it here: the
   * footer's Explore column carries the link on every page, and every article
   * already offers the research block below its CTA. */
  .masthead.compact .inner-nav .btn-solid { display: none; }
}

/* The trust strip's two links wrap mid-phrase on a phone, which reads as one
 * ragged sentence. Stack every item on its own line instead, and drop the
 * mid-dots that separated them. The bare "An independent project" text node
 * becomes an anonymous flex item, so it takes the first line on its own. */
@media (max-width: 760px) {
  .trust { font-size: 10px; letter-spacing: 0.1em; }
  .trust .wrap { flex-direction: column; align-items: flex-start; gap: 5px; }
  .trust .wrap > div:first-child {
    display: flex; flex-direction: column; align-items: flex-start; gap: 5px;
  }
  .trust .wrap > div:first-child .trust-sep { display: none; }
}

/* --------------------------------------------- homepage research tail (mobile) */

/* Desktop keeps the masthead button; this block only exists for phones. */
.research-tail { display: none; }

/* ------------------------------------------------- mobile legibility floor */

/* The Broadsheet's labels are small caps at 9.5-11px with wide tracking. That
 * reads on a desktop sheet and goes faint on a phone. Below 760px every label
 * comes up to at least 11.5px and the tracking eases; nothing else moves. */
@media (max-width: 760px) {
  /* The masthead's filled button wrapped the homepage header; the link moves to
     the tail of the page, below Featured reads. */
  .mast-action { display: none; }
  .research-tail {
    display: block;
    text-align: center;
    border-top: 1px solid var(--hairline);
    padding: 26px 0 34px;
  }
  .research-tail .cap {
    font-family: var(--sans);
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0 0 14px;
  }

  .trust { font-size: 11px; letter-spacing: 0.08em; }
  .start-card .e { font-size: 11.5px; letter-spacing: 0.08em; }
  .pick-meta, .cluster-count, .news-meta, .earlier-meta { font-size: 11.5px; letter-spacing: 0.03em; }
  .picks-kicker { font-size: 12px; }
  .ls-eyebrow { font-size: 11.5px; letter-spacing: 0.08em; }
  .lf-label, .lm-sub { font-size: 11.5px; }
  .rc-topic, .rc-format { font-size: 11px; letter-spacing: 0.08em; }
  .rc-date { font-size: 11.5px; }
  .lead-side p.lead-note { font-size: 11.5px; }
  .org-note { font-size: 11.5px; letter-spacing: 0.03em; }
  .org-tag { font-size: 11.5px; letter-spacing: 0.06em; }
  .head-sub { font-size: 12px; }
  .desk-card .jur { font-size: 11px; letter-spacing: 0.1em; }
  .read-card .rk { font-size: 11px; letter-spacing: 0.1em; }
  .cause-stat { font-size: 12px; }
  .follow-label, .reads-count { font-size: 12px; }
  .foot-col h3 { font-size: 11.5px; }
  .foot-legal { font-size: 12.5px; }
}