/* ══════════════════════════════════════════════════════════════════════════
   shared.css — the site chrome. ONE source for six surfaces.

   Extracted 2026-08-19 (design-system pass 1 of 3). Before this file the six
   hand-written surfaces each carried their own copy: 126,459 bytes of inline
   CSS, 41 rules byte-identical on all six, and the duplication had already
   drifted once (index carried a 40th token the others did not).

   ⚠ WHO CONSUMES THIS, AND WHY THE TWO MECHANISMS DIFFER:
     · public/*.html  <link rel="stylesheet" href="/styles/shared.css">
       They are hand-written HTML shipped byte-for-byte and can import nothing.
       A second <link> is not a new mechanism — they already link Google Fonts —
       and none of them is the landing page.
     · index.astro / events.astro  import ...?raw  +  <style is:inline set:html>
       index.astro's style block MUST stay is:inline: `is:global` was tried and
       shipped the homepage with 0 bytes inline plus a render-blocking <link>,
       measured, on the landing page. `?raw` keeps assembly ours instead of the
       bundler's, so the CSS stays inline and still has ONE source.

   ⚠ ORDER. These rules were HOISTED above each page's own CSS, which is not
   order-neutral at equal specificity. That reorder was not assumed safe — it
   was proved by a computed-style differential over 6 pages x {1280, 375,
   drawer-open}, positive control first. Any rule the differential flagged
   would have moved back into its page fragment.

   ⚠ NOT IN HERE, DELIBERATELY: :root's --fs-pull (pledge only, its sole
   pull-quote lives there) and the rules that differ across surfaces —
   .hero, .hero::before, .hero .h1, .section and .hero__subhead are DIFFERENT
   COMPONENTS sharing a name, not drift. See the naming-collision queue item in
   playbook STATE.md; pass 3 resolves the rest.

   ⚠ THE .faq-* THIRD OF THAT COLLISION IS RESOLVED (2026-08-28) — philanthropy's
   card FAQ moved in here under .faq-card* names, and index.astro keeps .faq-*
   for its own bordered-row component. That is why this file owns a FAQ
   component and index.astro still declares one: they are two components, now
   with two names. See the FAQ CARDS block below.

   Gate 6 in scripts/prepare-feeds.mjs asserts no surface re-declares anything
   in here. Edit this file, not the six.
   ══════════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════
       DESIGN TOKENS — single source of truth
    ════════════════════════════════════════ */:root {
      /* Palette — PINE / VOLT. Swapped 2026-08-04 (rebrand step 6) from the
         warm terracotta/cream/dusk set. Targets from playbook BRAND.md §4.
         --c-terracotta / -d / -d-rgb were DELETED here: after the accent
         aliases below became literals, nothing referenced them.

         
         --c-text is pine. A value swap was chosen over a rename because a
         rename touches every usage (~300) and would have mixed a mechanical
         change into a visible one. Rename is queued as its own zero-pixel
         step — same defect .com carries on --sand (BRAND.md §3). */
      --c-paper:        #FAFAF7;   /* was cream #FBF7EE — page background    */
      --c-surface:      #F3F7EB;   /* was sand #F5EFE0 — subtle surface step */
      --c-surface-d:    #E0EDD2;   /* was sand-d #EDE5D0 — distinct panel    */
      --c-ground:       #081C15;   /* was dusk #1A2744 — sections, footer,
                                      nav, dark hero                          */
      --c-card:         #1B4332;   /* was dusk-m #22306B — raised panel on
                                      ground. 1.60:1 vs ground, up from 1.20  */
      --c-border:       #C8DDB4;   /* was ghost #EAD4C0 — borders and rules  */
      --c-border-l:     #DDE7CC;   /* was ghost-l #F2E4D6 — light border/tint*/
      --c-text:         #1B4332;   /* was ink #1C1008 — headings AND body.
                                      ink-m collapsed into this at the rename */
      --c-text-l:       #2D6A4F;   /* was ink-l #6B4A38 — captions/labels    */

      /* RGB triplets — ONLY for rgba() alpha use. Each MUST stay in sync with
         its hex above; a palette change updates BOTH lines. Added 2026-08-04
         (rebrand step 2) so no translucency carries a raw literal.
         ⚠ IF A HEX MOVES WITHOUT ITS TRIPLET, translucency silently drifts
         away from the solids. Was five triplets; the dusk-rgb and ink-l-rgb
         pair were deleted at the 2026-08-06 rename, zero
         references between them. These three all have live callers. */
      --c-paper-rgb:    250,250,247;  /* keep in sync with --c-paper  #FAFAF7 */
      --c-border-rgb:   200,221,180;  /* keep in sync with --c-border #C8DDB4 */
      --c-text-rgb:     27,67,50;     /* keep in sync with --c-text   #1B4332 */

      /* ── TEXT ON THE DARK GROUND (added 2026-08-05) ──────────────────
         BRAND.md §4 assumed accent text always sits on a LIGHT surface.
         It does not: the footer mark, the hero eyebrow, the stats label and
         the whole nav sit on --c-ground. Pine on ground is 1.60:1 — invisible.
         This family is the answer, defined once.
         ⚠ ALL THREE ARE DARK-SURFACE ONLY. On paper they measure 1.17, 1.39
         and 1.10 — unusable by design. Never put them on a light ground. */
      --c-on-ground:    #E0EDD2;   /* pine-mist — body-weight text on dark.
                                      14.50:1 on ground, 9.08:1 on card      */
      --c-on-ground-m:  #C8DDB4;   /* pine-tint — muted labels + eyebrows.
                                      12.18:1 on ground                      */
      --c-on-ground-hi: #D8FF00;   /* volt — brand marks and ACTIVE states on
                                      dark only. 15.35:1 on ground. Kept
                                      separate from --c-accent-fill so that
                                      token stays background-only.           */

      /* ── ACCENT SPLIT (rebrand step 3, 2026-08-04) ──────────────────
         One accent value does two jobs today. It cannot after the rebrand:
         a fill and the text on it must diverge. These five names record the
         ROLE so step 6 is a value change, not 87 judgment calls. All 87 accent
         declarations are now assigned — nav and wordmark included (ruled 2026-08-04).
         SWAPPED TO LITERALS AT STEP 6 (2026-08-04). Fill and text have now
         genuinely diverged — that divergence is the whole reason the split
         exists. VOLT IS A FILL, NEVER TEXT ON LIGHT (BRAND.md §1 doctrine:
         volt measures ~1.1:1 on any light surface). */
      --c-accent-fill:   #D8FF00;   /* volt. DARK TEXT ONLY.
                                       pine on volt = 9.61:1                   */
      --c-accent-fill-h: #C2E600;   /* deeper volt, hover.
                                       pine on it = 7.71:1                     */
      --c-accent-text:   #1B4332;   /* pine. Accent text and borders.
                                       On paper = 10.59:1                      */
      --c-accent-text-d: #2D6A4F;   /* pine-light. Darker accent TEXT
                                       used STATICALLY for contrast, not a
                                       hover state (.onramp-tag, .pform-error).
                                       On paper = 6.11:1                       */

      /* Watermarks drawn ON the accent fill (.cta__ghost, .prog-card--featured
         .prog-num). FILL family — ruled 2026-08-04: their colour follows the
         fill they sit on, not the body text. STEP 6 -> pine 27,67,50, giving
         pine-on-volt. Triplet form because both are used at low alpha.
         De-aliased at step 6: had it kept following --c-terracotta-d-rgb it
         would now be volt-on-volt, i.e. invisible. */
      --c-accent-on-fill-rgb: 27,67,50;   /* pine #1B4332 */

      /* Type scale */
      --fs-10: 10px;
      --fs-12: 12px;
      --fs-13: 13px;
      --fs-15: 15px;
      --fs-17: 17px;
      --fs-22: 22px;
      --fs-h2: clamp(26px, 3.6vw, 42px);
      --fs-h1: clamp(38px, 5.5vw, 68px);

      /* Spacing — 8px base grid */
      --s-1: 8px;
      --s-2: 16px;
      --s-3: 24px;
      --s-4: 32px;
      --s-5: 40px;
      --s-6: 48px;
      --s-8: 64px;
      --s-10: 80px;
      --s-14: 112px;

      /* Layout */
      /* ⚠ CAPS TOKENS LIVE HERE NOW, not in chrome.css. They were news-only while
         Bebas was news-only; pass 2 puts Bebas on every heading sitewide, so the
         four hand-written pages need them too. */
      --lh-caps:      0.95;
      --ls-caps:      0.01em;
      --max-w: 1080px;
      --gutter: 40px;
    }

    /* ════════════════════════════════════════
       RESET & BASE
    ════════════════════════════════════════ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

    body {
      font-family: 'DM Sans', system-ui, sans-serif;
      font-size: var(--fs-15);
      line-height: 1.7;
      color: var(--c-text);
      background: var(--c-paper);
      overflow-x: hidden;
    }
    a   { color: inherit; }

    /* ⚠ DOCUMENT STRUCTURE IS BEBAS. COMPONENT LABELS ARE EB GARAMOND.
       That is the whole system, and it is worth stating because the exceptions
       otherwise read as drift. h1/h2/h3 — the document's own outline — take
       Bebas. Named component titles (.prog-title, .principle__title,
       .news-card__title, .onramp-name, .pform-success__title) and voice
       elements (.callout, blockquote, .pledge-*, .footer__tagline, .nav__mark)
       keep EB Garamond by DECLARING it themselves, so they are immune to this
       rule and stay that way on purpose.

       Founder ruling 2026-08-19, reversing the earlier sans-for-scanning /
       serif-for-reading split. Bebas has no lowercase glyphs, so every heading
       renders as caps regardless of the source text — that is the change, and
       it is intended. line-height drops 1.12 -> 0.95 because caps have no
       descenders and the old leading left them floating. */
    h1, h2, h3 {
      font-family: 'Bebas Neue', Impact, sans-serif;
      font-weight: 400;
      line-height: var(--lh-caps);
      letter-spacing: var(--ls-caps);
    }

    .h1 {
      font-size: var(--fs-h1);
      color: var(--c-paper);
    }

    /* ════════════════════════════════════════
       NAV
    ════════════════════════════════════════ */
    .nav {
      background: var(--c-ground);
      padding: 0 var(--gutter);
      position: sticky;
      top: 0;
      z-index: 200;
    }
    .nav__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
    }
    .nav__logo {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
    }
    .nav__mark {
      width: 32px; height: 32px;
      background: var(--c-accent-fill);
      display: flex; align-items: center; justify-content: center;
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 14px; font-weight: 700;
      color: var(--c-text);
    }
    .nav__name {
      font-size: var(--fs-13);
      font-weight: 500;
      color: var(--c-on-ground);
    }
    .nav__links {
      display: flex;
      align-items: center;
      gap: 28px;
      list-style: none;
    }
    .nav__links a {
      font-size: var(--fs-13);
      font-weight: 400;
      color: var(--c-on-ground);
      text-decoration: none;
      transition: color 0.15s;
    }
    .nav__links a:hover { color: var(--c-on-ground-hi); }

    /* ════════════════════════════════════════
       HAMBURGER MENU
    ════════════════════════════════════════ */
    .nav__hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 4px;
    }
    .nav__hamburger span {
      display: block;
      width: 22px;
      height: 2px;
      background: var(--c-on-ground);
      transition: transform 0.2s, opacity 0.2s;
    }
    .nav__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .nav__hamburger.is-open span:nth-child(2) { opacity: 0; }
    .nav__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .nav__drawer {
      display: none;
      position: fixed;
      top: 60px; left: 0; right: 0;
      background: var(--c-ground);
      border-bottom: 1px solid rgba(var(--c-border-rgb),0.14);
      padding: 24px var(--gutter);
      z-index: 199;
      flex-direction: column;
      gap: 0;
    }
    .nav__drawer.is-open { display: flex; }
    .nav__drawer a {
      font-size: 15px;
      font-weight: 400;
      color: var(--c-on-ground);
      text-decoration: none;
      padding: 14px 0;
      border-bottom: 1px solid rgba(var(--c-border-rgb),0.14);
      transition: color 0.15s;
    }
    .nav__drawer a:last-child { border-bottom: none; }
    .nav__drawer a:hover { color: var(--c-on-ground-hi); }
    .hero__inner {
      max-width: var(--max-w);
      margin: 0 auto;
      position: relative; z-index: 2;
    }

    /* ════════════════════════════════════════
       FOOTER
    ════════════════════════════════════════ */
    .footer {
      background: var(--c-ground);
      padding: 56px var(--gutter) 36px;
    }
    .footer__inner { max-width: var(--max-w); margin: 0 auto; }
    .footer__top {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: var(--s-8);
      padding-bottom: var(--s-6);
      border-bottom: 1px solid rgba(var(--c-border-rgb),0.08);
      margin-bottom: var(--s-3);
    }
    .footer__mark {
      font-size: var(--fs-10);
      font-weight: 500;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--c-on-ground-hi);
      margin-bottom: 10px;
    }
    .footer__name {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: 20px; font-weight: 700;
      color: var(--c-paper);
      margin-bottom: 10px;
    }
    .footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
    .footer__links a {
      font-size: 13px;
      font-weight: 300;
      color: var(--c-on-ground);
      text-decoration: none;
      transition: color 0.15s;
    }
    .footer__links a:hover { color: var(--c-paper); }
    /* ⚠ ORPHANED ON PURPOSE — ZERO CONSUMERS AS OF 2026-08-26. Read this before
       putting an address back in the footer.

       RULING 2026-08-26: THE ERC IS A VENUE, NOT AICV'S ADDRESS. AICV is a
       fiscally sponsored project of Desert Community Foundation and does not
       publish a street address. The footer address shipped earlier the same day
       and was reversed within it — so a future pass will find this rule, find no
       markup using it, and read that as a bug. It is not. Restoring the li
       reverses a decision rather than fixing a drift.

       The rule is KEPT rather than deleted so this note has somewhere to live,
       and because the venue address is still legitimately carried by the two
       @graph location nodes and llms.txt, which are a SEPARATE ruling and were
       deliberately left alone. If that ruling later removes those too, delete
       this rule with them.

       What it did while it had a consumer: matched .footer__links a on size,
       weight and colour so the address read as part of that list; line-height
       was the only non-copied value, for the column's sole two-line item. */
    .footer__addr {
      font-size: 13px;
      font-weight: 300;
      color: var(--c-on-ground);
      line-height: 1.6;
    }
    .footer__bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .footer__copy {
      font-size: var(--fs-12);
      font-weight: 300;
      color: var(--c-on-ground-m);
    }
    .footer__tagline {
      font-family: 'EB Garamond', Georgia, serif;
      font-size: var(--fs-13);
      font-style: italic;
      color: var(--c-on-ground-m);
    }

    /* ════════════════════════════════════════
       FAQ CARDS — icon-led disclosure list
    ════════════════════════════════════════ */
    /* ⚠ RENAMED ON PROMOTION (2026-08-28), and the rename IS the point.
       In philanthropy.html these were .faq-list / .faq-item / .faq-q /
       .faq-q__icon / .faq-q__txt / .faq-q__plus / .faq-a. Those names are ALSO
       index.astro's, for a different component — bordered rows, no icon, a
       ::after "+". Promoting under the shared names would have hoisted this
       card treatment above the homepage's own CSS, and every property
       index.astro does not re-declare wins.

       That was MEASURED on the built artifact before this landed: the
       homepage's fourteen entries gained a paper background, a full 1px
       border, a 6px radius, a flex summary padded 24px/32px, and +40.2px of
       height each — +563px on the section, with index.astro untouched.

       ⚠ GATE 6 WOULD NOT HAVE CAUGHT IT. It forbids re-declaring a rule
       IDENTICALLY; these differ, so the duplication test passes and the
       restyle ships silently. The only rule it did catch was
       .faq-q::-webkit-details-marker, byte-identical on both surfaces — the
       symptom, not the defect.

       This is the rename playbook STATE.md rules is step one of design-system
       pass 3, scoped to the .faq-* third of the collision. Do not "tidy" these
       back to .faq-*.

       Consumers: public/philanthropy.html (7 cards), src/pages/faq.astro (14). */
    .faq-cards { margin-top: var(--s-6); display: flex; flex-direction: column; gap: var(--s-2); }
    .faq-card { background: var(--c-paper); border: 1px solid var(--c-border); border-radius: 6px; }
    .faq-card__q {
      display: flex; align-items: flex-start; gap: var(--s-2);
      padding: var(--s-3) var(--s-4);
      cursor: pointer; list-style: none;
      /* Bebas — document structure (a question heading), not a component label.
         See the system note on h1,h2,h3 above. */
      font-family: 'Bebas Neue', Impact, sans-serif; font-size: var(--fs-17); font-weight: 400;
      color: var(--c-text); line-height: 1.3;
    }
    .faq-card__q::-webkit-details-marker { display: none; }
    .faq-card__icon { width: 19px; height: 19px; flex-shrink: 0; color: var(--c-accent-text); margin-top: 4px; }
    .faq-card__txt { flex: 1; }
    .faq-card__plus { flex-shrink: 0; color: var(--c-accent-text); font-size: 22px; line-height: 1.1; transition: transform 0.2s; }
    .faq-card[open] .faq-card__plus { transform: rotate(45deg); }
    .faq-card__a {
      padding: 0 var(--s-4) var(--s-4) calc(var(--s-4) + 19px + var(--s-2));
      font-size: var(--fs-15); font-weight: 300; color: var(--c-text); line-height: 1.75;
    }

    /* ════════════════════════════════════════
       RESPONSIVE
    ════════════════════════════════════════ */@media (max-width: 960px) {
      .nav__links { display: none; }
      .nav__hamburger { display: flex; }
    }@media (max-width: 860px) {
      :root { --gutter: 28px; }
      .footer__top    { grid-template-columns: 1fr; gap: var(--s-5); }
      .footer__bottom { flex-direction: column; gap: 8px; text-align: center; }
    }@media (max-width: 640px) {
      :root { --gutter: 20px; }
    }