:root {
      --color-navy: #0c1b2e;
      --color-navy-2: #102540;
      --color-navy-3: #081421;
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
      --color-bg: #fafaf8;
      --color-bg-warm: #f2ede6;
      --color-text: #0c1b2e;
      --color-text-light: #ede8e0;
      --color-muted: #4e5c6c;
      --color-gold-ink: #7f6921;    /* gold-toned TEXT on light bg — 4.57:1 on warm */
      --color-gold-ink-lg: #a1852a; /* large display accents on light — 3.05:1 on warm */
      --color-rule: rgba(12, 27, 46, 0.1);
      --color-rule-gold: rgba(212, 175, 55, 0.25);
    }

    html, body { margin: 0; padding: 0; background: var(--color-navy); }
    body { font-family: "DM Sans", system-ui, sans-serif; color: var(--color-text); overflow-x: hidden; }
    .font-display { font-family: "Cormorant Garamond", Georgia, serif; }

    /* Lenis */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-stopped { overflow: hidden; }

    ::selection { background: var(--color-gold); color: var(--color-navy); }

    /* ── Type scale ── */
    .t-display   { font-size: clamp(2.6rem, 5.2vw, 4.5rem); line-height: 1.04; letter-spacing: -0.014em; }
    .t-display-sm{ font-size: clamp(2rem, 3.4vw, 3.25rem);  line-height: 1.12; letter-spacing: -0.01em; }
    .t-cta       { font-size: clamp(3.2rem, 7vw, 6rem);     line-height: 0.94; letter-spacing: -0.022em; }

    .eyebrow {
      font-family: "DM Sans", sans-serif;
      letter-spacing: 0.24em; text-transform: uppercase;
      font-size: 0.72rem; font-weight: 500;
    }
    .rule-gold { height: 1px; background: var(--color-rule-gold); }

    /* ── Line mask reveal ── */
    .line-mask { display: block; overflow: hidden; }
    .line-mask > * { display: block; will-change: transform; }

    /* ── Membership hero (solid navy per 4.3 wireframe, gold radial glow) ── */
    .membership-hero {
      background-color: var(--color-navy);
      background-image:
        radial-gradient(ellipse 70% 90% at 82% 8%, rgba(212,175,55,0.16) 0%, transparent 55%),
        radial-gradient(ellipse 90% 80% at 10% 100%, rgba(16,37,64,0.9) 0%, transparent 60%),
        linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-3) 100%);
    }
    .hero-grid {
      position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
      background-image:
        linear-gradient(rgba(212,175,55,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(212,175,55,0.05) 1px, transparent 1px);
      background-size: 64px 64px;
      -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 75%);
              mask-image: radial-gradient(ellipse 70% 70% at 50% 30%, #000 0%, transparent 75%);
    }
    .t-hero-fit { font-size: clamp(2.5rem, 6.4vw, 5.25rem); line-height: 1.02; letter-spacing: -0.015em; }
    @media (max-height: 720px) { .t-hero-fit { font-size: clamp(2.1rem, 5vw, 4.25rem); } }

    .hero-rule { width: 48px; height: 2px; background: var(--color-gold); margin: 1.1rem 0 1.6rem; }

    .ghost {
      position:absolute; pointer-events:none; user-select:none;
      font-family:"Cormorant Garamond", serif; font-weight:500;
      line-height:0.8; white-space:nowrap;
    }

    /* ── Buttons ── */
    .btn-gold {
      border-radius: 2px;
      background: var(--color-gold); color: var(--color-navy);
      transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
      box-shadow: 0 8px 24px -10px rgba(212,175,55,0.6);
    }
    .btn-gold:hover { background: var(--color-gold-light); transform: translateY(-3px); box-shadow:0 16px 34px -12px rgba(212,175,55,0.7); }
    .btn-outline {
      border-radius: 2px;
      border: 1px solid var(--color-rule-gold); color: var(--color-text-light);
      transition: border-color .3s ease, color .3s ease, transform .3s ease;
    }
    .btn-outline:hover { border-color: var(--color-gold); color: var(--color-gold); transform: translateY(-3px); }

    /* ── Benefit cards (Why Join grid) ── */
    .benefit-card {
      background:#fff; border:1px solid var(--color-rule); border-radius:20px;
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
      box-shadow:0 18px 40px -34px rgba(12,27,46,0.35);
    }
    .benefit-card:hover { transform:translateY(-6px); border-color:var(--color-rule-gold); box-shadow:0 32px 56px -36px rgba(12,27,46,0.45); }
    .benefit-icon {
      width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
      background:rgba(212,175,55,0.12); color:var(--color-gold);
      border:1px solid var(--color-rule-gold);
    }

    /* ── Membership price sheet ──
       Cristie's 2026-09-01 document gives each level 7–15 benefits. A 4-across
       card grid put Gold at roughly twice Non-Profit's height, so the levels run
       as full-width rows: a fixed rail carries name/price/CTA, the body carries
       the verbatim list in two columns once there is room for them. */
    .tier-sheet-list { display:grid; gap:1.25rem; }

    .tier-sheet {
      display:grid; gap:2rem 3rem;
      padding:clamp(1.75rem,3vw,2.75rem);
      background:rgba(255,255,255,0.82);
      transition:border-color .45s ease, box-shadow .45s ease;
    }
    .tier-sheet:hover { border-color:var(--color-rule-gold); box-shadow:0 34px 60px -44px rgba(12,27,46,0.45); }
    .tier-sheet.is-featured {
      border-color:var(--color-gold);
      background:linear-gradient(180deg,#fff 0%,#fffdf5 100%);
      box-shadow:0 26px 54px -34px rgba(212,175,55,0.42);
    }

    .tier-sheet__rail { display:flex; flex-direction:column; align-items:flex-start; }

    .tier-name {
      font-family:"Cormorant Garamond",serif; font-weight:400;
      font-size:clamp(2rem,3.2vw,2.75rem); line-height:1; color:var(--color-text);
    }
    .tier-price {
      margin-top:1rem;
      font-family:"Cormorant Garamond",serif; font-weight:400;
      font-size:clamp(2.75rem,4.4vw,3.75rem); line-height:1; color:var(--color-navy);
    }
    .tier-price .tier-price-note {
      display:block; font-family:"DM Sans",sans-serif; font-size:0.68rem;
      letter-spacing:0.14em; text-transform:uppercase; color:var(--color-muted);
      margin-top:0.55rem; font-weight:500;
    }
    .tier-fee {
      margin-top:0.9rem; font-size:0.85rem; line-height:1.4;
      color:var(--color-gold-ink); font-weight:500;
    }
    .tier-eligibility {
      margin-top:1rem; padding-top:1rem; border-top:1px solid var(--color-rule);
      font-size:0.9rem; line-height:1.55; color:var(--color-muted);
    }
    /* C18 — the rail now ends in a pair of actions rather than a single
       mailto. margin-top:auto moves from the button to the wrapper so the
       pair still pins to the bottom of the rail and the cards stay aligned. */
    .tier-ctas { margin-top:auto; display:flex; flex-direction:column; gap:0.6rem; align-self:stretch; }
    .tier-cta { padding:0.8rem 1.4rem; }
    .tier-cta--alt { padding-block:0.7rem; }
    /* On the light warm ground the outline button needs the navy ink and rule the
       tier cards used to set inline. */
    .tier-cta.btn-outline { color:var(--color-navy); border-color:var(--color-rule); }

    .tier-body-head {
      font-family:"DM Sans",sans-serif; font-size:0.68rem; font-weight:600;
      letter-spacing:0.16em; text-transform:uppercase; color:var(--color-muted);
      padding-bottom:0.9rem; margin-bottom:1.25rem;
      border-bottom:1px solid var(--color-rule-gold);
    }
    .tier-benefits { list-style:none; margin:0; padding:0; }
    .tier-feature {
      position:relative; padding-left:1.6rem; margin-bottom:0.85rem;
      font-size:0.95rem; color:#3a4a5c; line-height:1.5;
      break-inside:avoid;
    }
    .tier-feature:last-child { margin-bottom:0; }
    .tier-feature::before {
      content:"\2713"; position:absolute; left:0; top:0;
      color:var(--color-gold-ink); font-size:0.85rem; font-weight:700; line-height:1.6;
    }

    @media (min-width: 900px) {
      .tier-sheet { grid-template-columns:minmax(15rem,19rem) 1fr; }
    }
    @media (min-width: 1180px) {
      .tier-benefits { columns:2; column-gap:3rem; }
    }

    /* ── VSO free callout ── */
    .vso-callout {
      background:linear-gradient(120deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
      border:1px solid var(--color-rule-gold); border-radius:22px;
    }

    /* ── Testimonial invitation ── */
    /* D7 rebalance — two columns instead of a wide plate with an empty half.
       The mark is no longer a clipped background watermark: it sits in its own
       column as a display element, which is what stops the right side reading
       as unused width. overflow:hidden is gone with it, since nothing needs
       clipping any more. */
    .testimonial-invite {
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,0.62fr);
      align-items:center;
      gap:clamp(1.5rem,4vw,4rem);
      max-width:62rem;
      margin-inline:auto;
      border:1px solid var(--color-rule);
      background:var(--color-bg-warm);
      padding:clamp(2rem,4.5vw,3.75rem);
    }
    /* Explicit placement, both of them. The mark is first in the DOM and is
       pinned to column 2, which left auto-placement to push the body onto a
       second ROW rather than into column 1 — the panel was rendering stacked
       while claiming to be two columns. */
    .testimonial-invite__body { grid-column:1; grid-row:1; min-width:0; }
    .testimonial-invite__body h2 { margin:0; max-width:18ch; }
    .testimonial-invite__cta { display:inline-block; margin-top:clamp(1.5rem,2.5vw,2.25rem); }
    /* Cormorant sets the quote glyph high in its em box, so centring the BOX
       leaves the mark floating above the optical centre of its column. The
       translate pulls it back down to where the eye expects it. */
    .testimonial-invite__mark {
      grid-column:2; grid-row:1;
      justify-self:center; align-self:center;
      margin:0;
      color:rgba(161,133,42,0.20);
      font-family:"Cormorant Garamond",serif;
      font-size:clamp(9rem,16vw,15rem);
      line-height:0.56;
      transform:translateY(0.17em);
      pointer-events:none; user-select:none;
    }

    @media (max-width:767px) {
      .testimonial-invite { grid-template-columns:minmax(0,1fr); gap:0.5rem; text-align:left; }
      .testimonial-invite__mark { grid-column:1; grid-row:1; justify-self:start; align-self:start; font-size:clamp(5rem,20vw,7rem); transform:none; }
      .testimonial-invite__body { grid-row:2; }
      .testimonial-invite__cta { width:100%; text-align:center; }
    }

    /* ── Fine print ── */
    /* .fine-print / .fine-print__title removed with the Membership Terms box
       (C19) — nothing else on this page used them. */

    /* ── Nav (section-aware theme) ── */
    #site-header { transition: background .45s ease, backdrop-filter .45s ease, box-shadow .45s ease, border-color .45s ease; }
    #site-header .logo-text, #site-header .nav-link { transition: color .45s ease; }
    #site-header .logo-accent { color: var(--color-gold); font-style: italic; }

    #site-header.nav-dark { background: transparent; box-shadow: none; }
    #site-header.nav-dark .logo-text { color: #ffffff; }
    #site-header.nav-dark .nav-link { color: rgba(237,232,224,0.85); }

    #site-header.nav-light { background: rgba(250,250,248,0.96); backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(12,27,46,0.08), 0 4px 20px rgba(12,27,46,0.06); }
    #site-header.nav-light .logo-text { color: #0c1b2e; }
    #site-header.nav-light .nav-link { color: rgba(12,27,46,0.75); }

    .nav-link { position:relative; }
    .nav-link::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--color-gold); transition:width .35s ease; }
    .nav-link:hover::after { width:100%; }
    .nav-link.is-current::after { width:100%; }
    #site-header .nav-link:hover { color: var(--color-gold); }

    #membership-hero .line-mask, .hero-line-wrap { padding-top: 0.08em; padding-bottom: 0.18em; }

    .reveal, .reveal-stagger > * { will-change:transform, opacity; }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      * { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
      .line-mask > * { transform:none !important; }
    }

/* North Texas Field Journal hero */
.membership-hero.field-hero {
  min-height: clamp(42rem, 84vh, 58rem);
  background-image: none;
}
.membership-hero.field-hero::before {
  background:
    linear-gradient(90deg, rgba(8,20,33,.97) 0%, rgba(12,27,46,.9) 45%, rgba(12,27,46,.22) 76%),
    linear-gradient(180deg, rgba(8,20,33,.42), transparent 45%, rgba(8,20,33,.92));
}
.membership-hero > .hero-grid,
.membership-hero > .ghost { display: none; }
.membership-hero .field-hero__image { object-position: 58% 42%; }
.membership-hero .field-hero__content > div { max-width: 49rem !important; }
.membership-hero .t-hero-fit { font-size: clamp(3.8rem, 7vw, 6.5rem); line-height: .88; letter-spacing: -.025em; }
.membership-hero .hero-sub { color: rgba(237,232,224,.82) !important; }

@media (max-width: 767px) {
  .membership-hero .field-hero__image { object-position: 60% 28%; }
}

    /* dark mode, scrolled - navy backdrop so page content never collides with nav links */
    #site-header.nav-dark.nav-scrolled {
      background: rgba(12,27,46,0.90);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 1px 0 rgba(212,175,55,0.14), 0 8px 24px rgba(8,20,33,0.35);
    }
/* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm. Any gold TEXT sitting on a
       light section therefore fails AA. These rules swap it for the ink
       golds inside light sections only; gold on navy is untouched.
       Attribute selector catches opacity variants (text-gold/70 etc).      */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"] { color: var(--color-gold-ink); }

    /* Large display accents clear AA at 3:1, so they keep more chroma. */
    .bg-bg      .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg   .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg   .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg       .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }

    /* ══ WCAG AA contrast guard (Phase 3.6) ══════════════════════════════
       Gold is a DARK-background colour: 8.24:1 on navy, but only 2.01:1 on
       --color-bg and 1.81:1 on --color-bg-warm, so gold TEXT on any light
       section fails AA. Rather than chase every call site, we redefine the
       gold custom properties *inside* light sections — every var(--color-gold)
       consumer below them inherits the AA-safe tone automatically.
       #a1852a = 3.05:1 on warm (clears the 3:1 bar for large text + UI).     */
    .bg-bg, .bg-bg-warm, .bg-white {
      --color-gold: #7f6921;
      --color-gold-light: #6d5a1c;
    }

    /* Dark cards nested inside a light section keep the real gold. */
    .bg-navy, .bg-navy-2, .bg-navy-3, .rcard.is-dark, [data-theme="dark"] {
      --color-gold: #d4af37;
      --color-gold-light: #e8c84a;
    }

    /* Small gold text on light needs the full 4.5:1, not just 3:1. */
    .bg-bg      [class*="text-gold"],
    .bg-bg-warm [class*="text-gold"],
    .bg-white   [class*="text-gold"],
    .bg-bg .eyebrow, .bg-bg-warm .eyebrow { color: var(--color-gold-ink); }

    /* …but large display accents keep the richer tone. */
    .bg-bg .t-hero [class*="text-gold"], .bg-bg-warm .t-hero [class*="text-gold"],
    .bg-bg .t-mission [class*="text-gold"], .bg-bg-warm .t-mission [class*="text-gold"],
    .bg-bg .t-display [class*="text-gold"], .bg-bg-warm .t-display [class*="text-gold"],
    .bg-bg .t-display-sm [class*="text-gold"], .bg-bg-warm .t-display-sm [class*="text-gold"],
    .bg-bg .t-cta [class*="text-gold"], .bg-bg-warm .t-cta [class*="text-gold"] { color: var(--color-gold-ink-lg); }
/* Large custom-class accents (all >=2.6rem) clear 3:1 with the richer tone. */
    .bg-bg .mission-word.key-word, .bg-bg-warm .mission-word.key-word,
    .bg-bg .tm-quote,   .bg-bg-warm .tm-quote { color: var(--color-gold-ink-lg); }
/* ══ Keyboard accessibility (Phase 3.6) ══════════════════════════════
       Four of the six page bundles previously defined no focus styles at
       all, so keyboard users had no visible indication of position. The
       ring is gold on dark and ink on light so it stays visible on every
       section background this theme alternates between.                  */
    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 2px solid var(--color-gold);
      outline-offset: 3px;
      border-radius: 1px;
    }
    .bg-bg a:focus-visible, .bg-bg-warm a:focus-visible, .bg-white a:focus-visible,
    .bg-bg button:focus-visible, .bg-bg-warm button:focus-visible {
      outline-color: var(--color-text);
    }

    /* Never remove the ring for keyboard users, even if a component resets it. */
    :focus-visible { outline-style: solid; }

    /* Skip link — first tab stop, visually hidden until focused. */
    .skip-link {
      position: absolute; left: 1rem; top: -3rem; z-index: 300;
      background: var(--color-gold); color: var(--color-navy);
      padding: 0.7rem 1.15rem; font-weight: 500; font-size: 0.9rem;
      border-radius: 2px; transition: top .18s ease;
    }
    .skip-link:focus { top: 1rem; }

    /* Touch targets — WCAG 2.5.5. Inline .eyebrow links rendered at 11px
       gave a 14px-tall hit area; pad them to a thumb-friendly 44px without
       changing how they look. */
    a.eyebrow, .eyebrow a {
      display: inline-flex; align-items: center;
      min-height: 44px;
    }
/* Footer + mobile-menu link hit areas (WCAG 2.5.5). These render at
       ~18px tall; padding brings them to 44px without shifting the layout
       they sit in, since they are stacked in flex columns already. */
    footer nav a, footer ul a, #mobile-menu a {
      display: inline-flex; align-items: center; min-height: 44px;
    }

/* C17 — "WAY TOO MUCH SPACE AGAIN". #who closed with a standard bottom pad
   and an inner mb-24, then #tiers opened with another standard top pad:
   roughly 288px of near-identical cream before the price sheet, plus the
   heading's own mb-14 under that. Both sides of the join come in. */
#tiers.sec-std { padding-top: clamp(3rem, 6.5vh, 4.5rem); }
#who.sec-std { padding-bottom: clamp(2.5rem, 6vh, 4rem); }

/* D7 — the testimonial block sat under two stacked standard section pads, the
   same join C16 and C17 fixed elsewhere on this page. Both sides come in. */
#testimonials.sec-std { padding-top: clamp(2.75rem, 6vh, 4rem); }
#tiers.sec-std { padding-bottom: clamp(2.75rem, 6vh, 4rem); }