: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; }

    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.22em; text-transform: uppercase;
      font-size: 0.78rem; font-weight: 500;
    }
    .rule-gold { height: 1px; background: var(--color-rule-gold); }

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

    .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 { 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: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); }

    /* ══════════════════════════════════════════════════════════
       1. HERO — centered, cursor spotlight
       ══════════════════════════════════════════════════════════ */
    .resources-hero {
      position:relative; background-color:var(--color-navy);
      background-image:linear-gradient(165deg, var(--color-navy) 0%, var(--color-navy-3) 100%);
    }
    .resources-hero .spotlight {
      position:absolute; inset:0; pointer-events:none; z-index:0;
      background:radial-gradient(420px circle at var(--mx,50%) var(--my,32%), rgba(212,175,55,0.15), transparent 62%);
      transition:background .18s ease-out;
    }
    .resources-hero .hero-grid {
      position:absolute; inset:0; pointer-events:none; z-index:0; 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:72px 72px;
      -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 0%, transparent 78%);
              mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 0%, transparent 78%);
    }
    .t-hero-fit { font-size:clamp(2.75rem, 7vw, 5.5rem); line-height:0.98; letter-spacing:-0.02em; }
    @media (max-height:760px) { .t-hero-fit { font-size:clamp(2.4rem, 5.6vw, 4.5rem); } }
    .hero-rule { width:48px; height:2px; background:var(--color-gold); margin:1.1rem auto 1.6rem; }

    .pill {
      display:inline-flex; align-items:center; gap:0.55rem;
      border:1px solid var(--color-rule-gold); border-radius:999px;
      padding:0.4rem 0.95rem; font-size:0.72rem; letter-spacing:0.16em;
      text-transform:uppercase; color:var(--color-text-light);
    }
    .pill .dot { width:7px; height:7px; border-radius:50%; background:var(--color-gold); }

    /* ══════════════════════════════════════════════════════════
       2. BENTO GRID — resource tiles
       ══════════════════════════════════════════════════════════ */
    .bento { display:grid; grid-template-columns:1fr; gap:1.25rem; }
    @media (min-width:768px) {
      .bento { grid-template-columns:repeat(6, 1fr); grid-auto-rows:minmax(200px, auto); }
      .bento .b-feature { grid-column:span 4; grid-row:span 2; }
      .bento .b-2       { grid-column:span 2; }
      .bento .b-3       { grid-column:span 3; }
    }

    .rcard {
      position:relative; overflow:hidden; border-radius:24px;
      padding:2.1rem; display:flex; flex-direction:column; justify-content:space-between;
      border:1px solid var(--color-rule); background:#fff;
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease, border-color .45s ease;
      box-shadow:0 20px 44px -38px rgba(12,27,46,0.4);
      min-height:210px;
    }
    .rcard:hover { transform:translateY(-6px); border-color:var(--color-rule-gold); box-shadow:0 40px 70px -40px rgba(12,27,46,0.5); }
    /* dark feature tile */
    .rcard.is-dark {
      background:linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-2) 100%);
      border-color:var(--color-rule-gold); color:var(--color-text-light);
    }
    .rcard.is-dark:hover { box-shadow:0 44px 90px -44px rgba(212,175,55,0.4); }
    .rcard .r-glow {
      position:absolute; inset:0; pointer-events:none; opacity:0.6;
      background:radial-gradient(circle at 82% 18%, rgba(212,175,55,0.18) 0%, transparent 55%);
    }
    .r-inner { position:relative; z-index:1; transition:transform .25s ease-out; }

    .r-icon { width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
      background:rgba(212,175,55,0.12); color:var(--color-gold); border:1px solid var(--color-rule-gold); }
    .rcard.is-dark .r-icon { background:rgba(212,175,55,0.14); }

    .r-title { font-family:"Cormorant Garamond", serif; font-weight:400; line-height:1.02; }
    .rcard .r-title { font-size:1.9rem; color:var(--color-text); }
    .rcard.is-dark .r-title { color:var(--color-text-light); font-size:clamp(2.2rem,3vw,3rem); }
    .rcard .r-desc { color:var(--color-muted); }
    .rcard.is-dark .r-desc { color:rgba(237,232,224,0.7); }

    .r-download {
      display:inline-flex; align-items:center; gap:0.5rem; margin-top:1.6rem;
      font-size:0.82rem; font-weight:500; letter-spacing:0.04em; color:var(--color-navy);
    }
    .rcard.is-dark .r-download { color:var(--color-gold); }
    .r-download .arrow { transition:transform .3s ease; }
    .rcard:hover .r-download .arrow { transform:translateY(3px); }
    .r-download .tag {
      font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
      color:var(--color-muted); border:1px solid var(--color-rule); border-radius:999px;
      padding:0.15rem 0.5rem; margin-left:0.35rem;
    }
    .rcard.is-dark .r-download .tag { color:rgba(237,232,224,0.6); border-color:rgba(237,232,224,0.2); }

    /* ── 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); }

    #resources-hero .line-mask, .hero-line-wrap { padding-top:0.08em; padding-bottom:0.18em; }
    .reveal, .reveal-stagger > * { will-change:transform, opacity; }

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

/* North Texas Field Journal hero */
.resources-hero.field-hero {
  min-height: clamp(42rem, 82vh, 56rem);
  background-image: none;
}
.resources-hero.field-hero::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(8,20,33,.97) 0%, rgba(12,27,46,.9) 46%, rgba(12,27,46,.24) 76%),
    linear-gradient(180deg, rgba(8,20,33,.42), transparent 45%, rgba(8,20,33,.94));
}
.resources-hero > .spotlight,
.resources-hero > .hero-grid,
.resources-hero > .ghost { display: none; }
.resources-hero .field-hero__image { object-position: center 48%; filter: saturate(.62) contrast(1.08); }
.resources-hero .field-hero__content { text-align: left; align-items: flex-start; }
.resources-hero .t-hero-fit { max-width: 12ch !important; margin-inline: 0; font-size: clamp(3.8rem, 7vw, 6.5rem); line-height: .88; letter-spacing: -.025em; }
.resources-hero .hero-sub { margin-inline: 0; color: rgba(237,232,224,.84) !important; }
.resources-hero .hero-cta { justify-content: flex-start; }

@media (max-width: 767px) {
  .resources-hero .field-hero__image { object-position: 62% 44%; }
}

    /* 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;
    }