/* ============================================================
   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.
   ============================================================ */


   @font-face {
    font-family: 'Bagnard';
    src: url('assets/Bagnard.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  
  :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-wordmark: 'Bagnard', Georgia, 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;
  }
  .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,
  body.page-about .nav-links a[data-nav="about"],
  body.page-people .nav-links a[data-nav="people"],
  body.page-commentary .nav-links a[data-nav="commentary"] {
    color: var(--iaf-type-on-dark);
    border-bottom-color: var(--iaf-accent);
  }
  @media (max-width: 700px) {
    /* Collapse the links into a dropdown panel under the bar. */
    .nav-links {
      display: none;
      position: absolute;
      top: 100%; left: 0; right: 0;
      flex-direction: column;
      gap: 0;
      background: var(--iaf-surface-dark);
      border-bottom: 0.5px solid rgba(244, 241, 234, 0.15);
      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
      padding: 8px 0;
      z-index: 99;
    }
    .nav-links.open { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a {
      display: block;
      padding: 14px 24px;
      font-size: 12px; letter-spacing: 0.16em;
      border-bottom: none;
    }
    .nav-links a:hover { color: var(--iaf-type-on-dark); }
    /* Active-page accent moves to a left bar in the dropdown. */
    .nav-links a.active,
    body.page-about .nav-links a[data-nav="about"],
    body.page-people .nav-links a[data-nav="people"],
    body.page-commentary .nav-links a[data-nav="commentary"] {
      border-bottom: none;
      box-shadow: inset 3px 0 0 var(--iaf-accent);
      color: var(--iaf-type-on-dark);
    }
  }

  .nav-subscribe {
    font-family: var(--font-mono);
    font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--color-white);
    background: var(--iaf-accent);
    text-decoration: none;
    padding: 9px 16px;
    font-weight: 500;
    transition: background 0.15s;
    white-space: nowrap;
    margin-left: auto;
  }
  .nav-subscribe:hover { background: var(--iaf-accent-hover); }
  @media (max-width: 700px) {
    .nav-subscribe { font-size: 10px; letter-spacing: 0.14em; padding: 7px 12px; }
  }

  /* ============ MOBILE NAV TOGGLE (hamburger) ============
     Hidden on desktop. At <=700px it appears at the left of the
     bar, the links collapse into a dropdown panel that opens on
     tap, and Subscribe stays visible at the right. */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 40px; height: 40px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-toggle-bar {
    display: block;
    width: 22px; height: 2px;
    background: var(--color-ink-6);
    margin: 0 auto;
    transition: transform 0.2s ease, opacity 0.2s ease, background 0.15s;
  }
  .nav-toggle:hover .nav-toggle-bar { background: var(--iaf-type-on-dark); }
  /* Open state: morph into an X */
  .nav-toggle.open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle.open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  @media (max-width: 700px) {
    .nav-toggle { display: flex; order: -1; }
  }
  
  
  /* ============ 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-wordmark);
    font-weight: 400;
    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;
  }

  .modal-fineprint {
    margin-top: 18px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-ink-5);
    line-height: 1.6;
  }
  .modal-fineprint a {
    color: var(--color-ink-5);
    text-decoration: underline;
    text-decoration-color: rgba(143, 138, 130, 0.4);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
  }
  .modal-fineprint a:hover {
    color: var(--iaf-accent);
    text-decoration-color: var(--iaf-accent);
  }

  @media (max-width: 600px) {
    .modal { padding: 32px 20px 24px; }
    .modal-title { font-size: 22px; }
  }


/* ============================================================
   PAGE HEADER
   The canonical opening pattern for every standalone page that
   is not the landing. Eyebrow + title + lede on a paper-green-1
   plate. Markup pattern:

     <header class="page-header">
       <div class="wrap">
         <div class="page-eyebrow">Eyebrow</div>
         <h1 class="page-title">Title</h1>
         <p class="page-lede">Optional lede.</p>
       </div>
     </header>
   ============================================================ */
.page-header {
  padding: 72px 0 56px;
  border-bottom: 0.5px solid var(--iaf-rule);
  background: var(--iaf-ground-card);
}
.page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--iaf-identity);
  margin-bottom: 20px;
}
.page-title {
  font-family: var(--font-serif);
  font-size: 72px; line-height: 1.0; font-weight: 400;
  font-variation-settings: 'opsz' 60;
  color: var(--iaf-type-primary);
  margin: 0 0 28px;
  letter-spacing: -0.02em;
  max-width: 1040px;
}
@media (max-width: 900px) { .page-title { font-size: 54px; } }
@media (max-width: 700px) { .page-title { font-size: 40px; } }
.page-lede {
  font-family: var(--font-serif);
  font-size: 20px; line-height: 1.5;
  color: var(--iaf-type-primary);
  max-width: 820px;
  font-variation-settings: 'opsz' 24;
  margin: 0;
}


/* ============================================================
   SUBSCRIBE BAND
   Used at the bottom of pages to drive newsletter subscriptions.
   Canonical version (formerly inline in commentary.html).
   ============================================================ */
.subscribe-band {
  background: var(--iaf-surface-dark);
  color: var(--iaf-type-on-dark);
  padding: 64px 0;
}
.subscribe-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) { .subscribe-inner { grid-template-columns: 1fr; gap: 32px; } }
.subscribe-band .sub-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--iaf-type-on-dark);
  opacity: 0.68;
  margin-bottom: 16px;
}
.subscribe-band h2 {
  font-family: var(--font-serif);
  font-size: 44px; line-height: 1.05; font-weight: 400;
  font-variation-settings: 'opsz' 44;
  color: var(--iaf-type-on-dark);
  margin: 0 0 18px;
  letter-spacing: -0.01em;
}
@media (max-width: 700px) { .subscribe-band h2 { font-size: 32px; } }
.subscribe-band p {
  font-family: var(--font-serif);
  font-size: 17px; line-height: 1.55;
  color: var(--color-ink-6);
  margin: 0;
}
.sub-cta {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--iaf-accent);
  color: var(--color-white);
  padding: 18px 28px;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  font-weight: 500;
  transition: background 0.15s;
}
.sub-cta:hover { background: var(--iaf-accent-hover); }
.sub-cta svg { width: 14px; height: 14px; }
.sub-secondary {
  display: block;
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-ink-5);
}


/* ============================================================
   SECTION GRID
   Canonical light-ground "labeled grid" section: an eyebrow +
   header, then an N-column grid of labeled text cells on a
   paper-green ground. The shared shape behind the homepage
   "how we work" strip and the About modes grid. Column count is
   set per-instance with a modifier (.cols-2, .cols-3, .cols-4);
   default is 3.

   Markup pattern:
     <section class="section-grid">
       <div class="wrap">
         <div class="section-grid-head">
           <div class="eyebrow-red">Eyebrow</div>
           <h2>Header</h2>
         </div>
         <div class="section-grid-cells cols-3">
           <div class="section-grid-cell">
             <div class="sgc-num">01</div>
             <h3>Cell title</h3>
             <p>Cell body.</p>
             <div class="sgc-footnote">Optional footnote</div>
           </div>
           ...
         </div>
         <div class="section-grid-link"><a href="/about">Link &rarr;</a></div>
       </div>
     </section>

   This is NOT the component for dark stat strips (North Star) or
   the two-column contrast grid; those keep their own treatments.
   ============================================================ */
.section-grid {
  background: var(--iaf-ground);
  border-bottom: 0.5px solid var(--iaf-rule);
  padding: 88px 0;
}
.section-grid-head {
  max-width: 860px;
  margin: 0 auto 48px;
}
.section-grid-head .eyebrow-red {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--iaf-identity);
  margin-bottom: 16px;
}
.section-grid-head h2 {
  font-family: var(--font-serif);
  font-size: 42px; line-height: 1.1; font-weight: 400;
  font-variation-settings: 'opsz' 44;
  color: var(--iaf-type-primary);
  margin: 0;
  letter-spacing: -0.015em;
}
@media (max-width: 700px) { .section-grid-head h2 { font-size: 30px; } }
.section-grid-cells {
  display: grid;
  gap: 0;
  border-top: 0.5px solid var(--iaf-rule);
  border-left: 0.5px solid var(--iaf-rule);
}
.section-grid-cells.cols-2 { grid-template-columns: repeat(2, 1fr); }
.section-grid-cells.cols-3 { grid-template-columns: repeat(3, 1fr); }
.section-grid-cells.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .section-grid-cells.cols-2,
  .section-grid-cells.cols-3,
  .section-grid-cells.cols-4 { grid-template-columns: 1fr; }
}
.section-grid-cell {
  padding: 36px 32px;
  border-right: 0.5px solid var(--iaf-rule);
  border-bottom: 0.5px solid var(--iaf-rule);
  background: var(--iaf-ground-card);
}
.section-grid-cell .sgc-num {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.2em;
  color: var(--iaf-identity);
  margin-bottom: 16px;
}
.section-grid-cell h3 {
  font-family: var(--font-serif);
  font-size: 26px; line-height: 1.15; font-weight: 400;
  font-variation-settings: 'opsz' 28;
  color: var(--iaf-type-primary);
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.section-grid-cell p {
  font-family: var(--font-serif);
  font-size: 16px; line-height: 1.55;
  color: var(--iaf-type-primary);
  margin: 0;
}
.section-grid-cell .sgc-footnote {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--iaf-type-muted);
  padding-top: 16px;
  margin-top: 16px;
  border-top: 0.5px solid var(--iaf-rule);
}
.section-grid-link {
  margin-top: 36px;
}
.section-grid-link a {
  font-family: var(--font-mono);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--iaf-type-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--iaf-identity);
  padding-bottom: 4px;
  transition: color 0.15s;
}
.section-grid-link a:hover { color: var(--iaf-identity); }