/* ============================================================
   IndustriousAF — Shared Stylesheet (V6.4)
   ============================================================
   Single source of truth for design tokens, site navigation,
   footer, and subscribe modal. Imported by index.html,
   people.html, and commentary.html.

   Page-specific styles remain in each page's inline <style>
   block to keep per-page CSS co-located with its markup.

   ============================================================
   TOKEN ARCHITECTURE (V6.4)
   ============================================================

   Two layers:

   LAYER 1 — Raw palette
     Hex values. Never reference these directly in components.
     Named by what they are (--color-teal, --color-cream).

   LAYER 2 — Semantic tokens
     Reference Layer 1. Named by the role they play
     (--iaf-identity, --iaf-accent, --iaf-ground).
     Components reference ONLY these.

   To change the brand color: edit Layer 1. Everything inherits.
   To change a specific role (e.g., "eyebrow color"): edit Layer 2.
   ============================================================ */


   :root {

    /* ============ LAYER 1 · RAW PALETTE ============ */
  
    /* Typography */
    --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
    --font-sans:    'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono:    'IBM Plex Mono', 'Courier New', monospace;
    --font-stencil: 'Stardos Stencil', 'Impact', sans-serif;
  
    /* Brand colors */
    --color-teal:           #1F4E52;
    --color-teal-dark:      #163C40;
    --color-terracotta:     #D06B45;
    --color-terracotta-dark:#B85734;
  
    /* Pillar colors */
    --color-oxblood:        #5C2A2F;
    --color-oxblood-tint:   #E8DCD8;
    --color-oxblood-ink:    #3D1A1D;
    --color-slate:          #2E3847;
    --color-slate-tint:     #DEE1E6;
    --color-slate-ink:      #1A1F28;
    --color-brass:          #8B7437;
    --color-brass-tint:     #EEE7D0;
    --color-brass-ink:      #5C4D24;
  
    /* Neutrals · grounds */
    --color-paper-green:   #DCE4D5;
    --color-paper-green-1: #E4EADD;
    --color-paper-green-2: #CAD3C0;
    --color-cream:         #F4F1EA;
    --color-white:         #FFFFFF;
  
    /* Neutrals · ink ramp */
    --color-ink-0: #252322;
    --color-ink-1: #2E2B2A;
    --color-ink-2: #3A3735;
    --color-ink-3: #4F4B47;
    --color-ink-4: #6E6962;
    --color-ink-5: #8F8A82;
    --color-ink-6: #B0ACA5;
  
    /* Rules */
    --color-rule:      #B8C0B0;
    --color-rule-soft: #CFD5C5;
  
    /* Status */
    --color-success: #2A6B3A;
    --color-warning: #8B7437;
    --color-danger:  #8B3A24;
  
  
    /* ============ LAYER 2 · SEMANTIC TOKENS ============ */
  
    /* Brand identity */
    --iaf-identity:         var(--color-teal);             /* primary brand color — hero plates, eyebrows on light, nav active, link hovers */
    --iaf-identity-hover:   var(--color-teal-dark);
    --iaf-accent:           var(--color-terracotta);       /* disciplined accent — wordmark AF/USA, CTA, badges, overscroll, hero bar */
    --iaf-accent-hover:     var(--color-terracotta-dark);
  
    /* Grounds (page-level background surfaces) */
    --iaf-ground:           var(--color-paper-green);      /* main page background */
    --iaf-ground-card:      var(--color-paper-green-1);    /* lighter card surface on ground */
    --iaf-ground-deep:      var(--color-paper-green-2);    /* darker tint for accents */
  
    /* Surfaces (section-level dark treatments) */
    --iaf-surface-dark:     var(--color-ink-0);            /* subscribe bands, CTA bands, dark sections */
    --iaf-surface-dark-2:   var(--color-ink-1);            /* slightly lighter dark surface — CTA list items */
  
    /* Type */
    --iaf-type-primary:     var(--color-ink-1);            /* body text on ground */
    --iaf-type-secondary:   var(--color-ink-3);            /* secondary text */
    --iaf-type-muted:       var(--color-ink-4);            /* eyebrows, meta text */
    --iaf-type-on-dark:     var(--color-cream);            /* type on teal plates, charcoal surfaces */
  
    /* Rules & borders */
    --iaf-rule:             var(--color-rule);
    --iaf-rule-soft:        var(--color-rule-soft);
  
    /* Pillars */
    --iaf-workforce:        var(--color-oxblood);
    --iaf-workforce-tint:   var(--color-oxblood-tint);
    --iaf-workforce-ink:    var(--color-oxblood-ink);
    --iaf-institutions:     var(--color-slate);
    --iaf-institutions-tint:var(--color-slate-tint);
    --iaf-institutions-ink: var(--color-slate-ink);
    --iaf-alliances:        var(--color-brass);
    --iaf-alliances-tint:   var(--color-brass-tint);
    --iaf-alliances-ink:    var(--color-brass-ink);
  
    /* Status */
    --iaf-success: var(--color-success);
    --iaf-warning: var(--color-warning);
    --iaf-danger:  var(--color-danger);
  }
  
  
  /* ============ RESET + BASE ============ */
  * { box-sizing: border-box; }
  
  html {
    scroll-behavior: smooth;
    background: var(--iaf-accent);   /* overscroll fill — the hidden surprise */
  }
  
  body {
    margin: 0; padding: 0;
    background: var(--iaf-accent);   /* Safari overscroll fallback; sections paint their own backgrounds on top */
    color: var(--iaf-type-primary);
    font-family: var(--font-serif);
    font-size: 17px; line-height: 1.6;
    font-variation-settings: 'opsz' 20;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
  }
  
  a { color: inherit; }
  
  
  /* ============ LAYOUT WRAPPERS ============ */
  .wrap { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
  .wrap-narrow { max-width: 860px; margin: 0 auto; padding: 0 48px; }
  @media (max-width: 700px) { .wrap, .wrap-narrow { padding: 0 24px; } }
  
  
  /* ============ SITE NAV ============
     Nav logo is hidden by default; fades in when the hero
     scrolls out of view. Each page must add body.hero-scrolled
     via its own JS observer (see per-page scripts). Pages
     without a hero (e.g. People, Commentary) can either:
       (a) show the logo at all times by adding
           <body class="hero-scrolled">, or
       (b) leave it hidden for consistency with index.html.
     ============================================================ */
  .site-nav {
    background: var(--iaf-surface-dark);
    border-bottom: 0.5px solid rgba(244, 241, 234, 0.15);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .nav-inner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 48px;
    max-width: 1320px; margin: 0 auto;
    gap: 32px;
  }
  @media (max-width: 700px) { .nav-inner { padding: 14px 24px; gap: 16px; } }
  
  .nav-logo {
    text-decoration: none;
    display: inline-block;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-2px);
    transition: opacity 0.28s ease, transform 0.28s ease;
  }
  body.hero-scrolled .nav-logo,
  body.show-nav-logo .nav-logo {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  
  .nav-links {
    display: flex; gap: 28px;
    list-style: none; margin: 0; padding: 0;
    margin-left: auto;
  }
  .nav-links a {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-ink-6); text-decoration: none;
    padding: 6px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
  }
  .nav-links a:hover { color: var(--iaf-type-on-dark); }
  .nav-links a.active { color: var(--iaf-type-on-dark); border-bottom-color: var(--iaf-accent); }
  @media (max-width: 700px) {
    .nav-links { gap: 18px; }
    .nav-links a { font-size: 10px; letter-spacing: 0.14em; }
  }
  
  
  /* ============ MINI LOGO (nav wordmark) — V6.3 teal plate + drop shadow ============ */
  .iaf-logo {
    display: inline-block;
    background: var(--iaf-identity);
    padding: 8px 12px 7px;
    position: relative;
    box-shadow:
      0 0 0 1px var(--iaf-identity),
      0 0 0 2px var(--iaf-type-on-dark),
      0 0 0 3.5px var(--iaf-identity),
      0 0 0 4.5px var(--iaf-type-on-dark),
      4px 5px 14px rgba(0, 0, 0, 0.22),
      1px 2px 5px rgba(0, 0, 0, 0.18);
  }
  .iaf-logo-line {
    font-family: var(--font-stencil);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: 0;
    display: block;
    text-align: center;
    white-space: nowrap;
    font-size: 16px;
  }
  .iaf-logo-line + .iaf-logo-line { margin-top: 1px; }
  .iaf-logo .cream { color: var(--iaf-type-on-dark); }
  .iaf-logo .accent { color: var(--iaf-accent); }
  @media (max-width: 700px) {
    .iaf-logo { padding: 6px 10px 5px; }
    .iaf-logo-line { font-size: 13px; }
  }
  
  
  /* ============ SITE FOOTER ============ */
  .site-footer {
    background: var(--iaf-ground-card);
    border-top: 0.5px solid var(--iaf-rule);
    padding: 48px 0 32px;
    padding-top: 96px;
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--iaf-type-muted);
  }
  .footer-inner {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
  }
  .footer-inner a { color: var(--iaf-type-secondary); text-decoration: none; }
  .footer-inner a:hover { color: var(--iaf-identity); }
  .footer-left span { color: var(--color-ink-5); }
  .footer-right { display: flex; gap: 28px; flex-wrap: wrap; }
  
  
  /* ============ SUBSCRIBE MODAL ============ */
  .modal-bg {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(37, 35, 34, 0.82);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .modal-bg.active { display: flex; }
  
  .modal {
    background: var(--iaf-surface-dark);
    border: 1px solid var(--iaf-accent);
    max-width: 560px;
    width: 100%;
    padding: 40px 32px 32px;
    position: relative;
    color: var(--iaf-type-on-dark);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  }
  
  .modal-close {
    position: absolute;
    top: 12px; right: 16px;
    background: none;
    border: none;
    color: var(--iaf-type-on-dark);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.15s;
  }
  .modal-close:hover { color: var(--iaf-accent); }
  
  .modal-eyebrow {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--iaf-accent);
    margin-bottom: 14px;
  }
  
  .modal-title {
    font-family: var(--font-serif);
    font-size: 28px;
    line-height: 1.15;
    font-weight: 400;
    font-variation-settings: 'opsz' 32;
    color: var(--iaf-type-on-dark);
    margin: 0 0 22px;
    letter-spacing: -0.01em;
  }
  
  #beehiivEmbed { display: block; }
  #beehiivEmbed iframe {
    width: 100% !important;
    height: 180px !important;
    border: 0 !important;
    display: block !important;
    background: transparent;
  }
  
  @media (max-width: 600px) {
    .modal { padding: 32px 20px 24px; }
    .modal-title { font-size: 22px; }
  }