/* ============================================================
   FedM8 AI — shared theme (single source of truth)
   Chrome matches fedm8.com: ink #060d18, brass #c4a35a / #e0c57a.
   Load this AFTER the page's inline <style> so shared rules win.
   The top bar is injected by assets/site-nav.js into #site-top.
   ============================================================ */

:root{
  --navy:#060d18; --navy-2:#0c1626; --navy-3:#162438;
  --gold:#c4a35a; --gold-light:#e0c57a; --gold-deep:#9a7a32;
  --surface:#fffffe; --page:#eef3f8;
  /* --muted was #848d9c (3.00:1 on --page #eef3f8). #4f5a6b clears WCAG AA 4.5:1 for body text. */
  --ink:#15181d; --ink-2:#4b5361; --muted:#4f5a6b;
  --line:#d9e0ea; --hairline:rgba(6,13,24,.09);
}

/* Always reserve the scrollbar gutter. Every .wrap on the site is a centered
   max-width block, so when a short page has no scrollbar and the next one does,
   the viewport narrows by the scrollbar width and every centered row — the top
   bar included — jumps sideways by half of it. Reserving the gutter on both
   short and tall pages pins the bar in place across navigation and across
   in-page height changes (tier tabs, wall copy, filters). */
html{scrollbar-gutter:stable}

body{font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
h1,h2{font-family:"Source Serif 4",Georgia,"Times New Roman",serif;letter-spacing:-.02em}

/* ---------- trust bar (above the header, same copy as fedm8.com) ---------- */
.site-trust{
  background:var(--navy);color:rgba(232,234,238,.72);
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  font-family:"DM Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
.site-trust .wrap{
  max-width:1080px;margin:0 auto;padding:9px 20px;
  display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
}
.site-trust b{color:#fff;font-weight:600}
.site-trust .ids{display:flex;gap:22px;flex-wrap:wrap}

/* ---------- the one top bar ---------- */
.site-top{background:var(--navy);color:#fff;position:relative;z-index:60;border-bottom:1px solid rgba(224,197,122,.12)}
.site-top .wrap{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:nowrap}
.site-top .brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.site-top .brand img,
.site-top .brand .mark{width:40px;height:40px;border-radius:1px;background:none;padding:0;flex:0 0 auto;display:block;object-fit:contain}
.site-top .brand .word{
  font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  font-size:26px;font-weight:600;color:#fff;letter-spacing:.06em;line-height:1;
}
.site-top .brand .word span{color:var(--gold-light)}
.site-top .brand .word em{
  font-style:normal;font-family:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:.48em;font-weight:650;letter-spacing:.14em;margin-left:.28em;
  color:var(--gold-light);vertical-align:3px;
}
.site-top nav{margin-left:auto;display:flex;align-items:center;gap:2px;flex-wrap:nowrap}
.site-top nav a{color:rgba(250,251,252,.82);font-size:13px;font-weight:500;letter-spacing:.04em;padding:7px 10px;border-radius:1px;text-decoration:none;background:none;border:none;white-space:nowrap}
.site-top nav a:hover{background:transparent;color:var(--gold-light);text-decoration:none}
.site-top nav a.on{background:rgba(255,255,255,.10);color:#fff}
.site-top nav a.login{color:rgba(250,251,252,.82)}
.site-top nav a.cta{background:var(--gold);color:var(--navy);font-weight:600;margin-left:8px;padding:10px 16px;letter-spacing:.06em}
.site-top nav a.cta:hover{background:var(--gold-light);color:var(--navy)}
.site-top .tier{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.1);padding:5px 10px;border-radius:999px;color:#e8eef6}
.site-top .back{color:#c9d4e2;font-size:13.5px;text-decoration:none;white-space:nowrap}
.site-top .back:hover{color:#fff}
.site-top .menu-toggle{
  display:none;margin-left:auto;background:none;border:none;font-size:22px;color:#fff;
  cursor:pointer;line-height:1;padding:4px 2px;
}

/* ---- uniformity hardening -------------------------------------------------
   Pages still carry legacy `header{}` / `header .wrap{}` / `nav{}` rules that
   used to style their own bars. These higher-specificity rules pin every
   visual property of the shared bar so the injected #site-top renders
   IDENTICALLY on every page regardless of page-local CSS. */
header.site-top{padding:0;margin:0;background:var(--navy);border:0;border-bottom:1px solid rgba(224,197,122,.12);box-shadow:none;position:relative;min-height:68px}
header.site-top .wrap{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:flex-start;gap:14px;flex-wrap:nowrap;width:auto}
header.site-top .brand{margin:0}
header.site-top nav{margin-left:auto;margin-right:0;display:flex;align-items:center;justify-content:flex-end;gap:2px;flex-wrap:nowrap;overflow:visible;background:none;border:0;padding:0}
header.site-top nav a{margin:0;background:none;border:0;transition:background-color .18s ease,color .18s ease}
header.site-top nav a.on{background:rgba(255,255,255,.10)}
header.site-top nav a.cta{background:var(--gold);margin-left:8px}
header.site-top nav a.cta:hover{background:var(--gold-light)}

/* Compact header + hamburger — fedm8.com uses 640px; AI has more links so
   the drawer starts a little earlier to avoid wrapping the seven-link row. */
@media (max-width:960px){
  header.site-top{min-height:60px}
  header.site-top .wrap,.site-top .wrap{padding:12px 16px;gap:10px;flex-wrap:nowrap}
  .site-top .menu-toggle,header.site-top .menu-toggle{display:block}
  .site-top nav,header.site-top nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--navy);flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:6px 20px 14px;border-bottom:1px solid rgba(224,197,122,.15);
    box-shadow:0 12px 28px rgba(6,13,24,.28);max-height:min(70dvh,420px);overflow-y:auto;
  }
  .site-top nav.open,header.site-top nav.open{display:flex}
  .site-top nav a,header.site-top nav a{padding:10px 0;font-size:13px;border-radius:0}
  .site-top nav a.cta,header.site-top nav a.cta{margin:8px 0 4px;text-align:center}
  .site-top .brand .word{font-size:22px}
}
@media (max-width:420px){
  .site-top .brand .word em{display:none}
}