/* ═══════════════════════════════════════════════════════════════════
   MUSE brand tokens

   Single source of truth for brand color and typography across every
   page in this site. All six pages link this file. Change a value here
   and it changes everywhere, so do not reintroduce raw hex literals
   into any page stylesheet.

   Approved alternates, swap in place if the brand ever moves:
     navy  #1C2448
     gold  #CAA861

   Retired on 2026-08-25, do not use again:
     cream #FBF7F1, ink #1A1814, gold #E8B86E, rust #B8732D,
     muted #3D362C, muted #3A3630, warm cream #F5EFE4,
     border #E8DDC8, muted #A89678, muted #8A8578,
     gold hovers #F5C77E and #F5C77A, and the Inter typeface.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* ─── Core palette ─────────────────────────────────────── */
  --cream:#F5F1E8;
  --navy:#1B2547;
  --gold:#C9A961;
  /* Darkened gold for text on light surfaces. Brand gold measures only
     2.0:1 on cream, which fails WCAG AA. This holds the same hue (41.5deg)
     and saturation (49.1%) at lower lightness, and measures 4.55:1 on
     cream and 5.13:1 on white, both AA pass. Never use it on navy, where
     it drops to 2.92:1. Gold as a fill or on dark stays --gold. */
  --gold-deep:#856A2D;
  --white:#FFFFFF;

  /* ─── RGB triplets ─────────────────────────────────────────
     Every translucent tone in the site is derived from these, so
     there is exactly one place a brand color is written down. */
  --cream-rgb:245,241,232;
  --navy-rgb:27,37,71;
  --gold-rgb:201,169,97;
  --gold-deep-rgb:133,106,45;

  /* ─── Named alpha steps ────────────────────────────────── */
  --navy-80:rgba(var(--navy-rgb),.80);
  --navy-64:rgba(var(--navy-rgb),.64);
  --navy-12:rgba(var(--navy-rgb),.12);
  --navy-08:rgba(var(--navy-rgb),.08);
  --cream-85:rgba(var(--cream-rgb),.85);
  --cream-65:rgba(var(--cream-rgb),.65);
  --cream-45:rgba(var(--cream-rgb),.45);
  --cream-14:rgba(var(--cream-rgb),.14);
  --gold-40:rgba(var(--gold-rgb),.40);
  --gold-28:rgba(var(--gold-rgb),.28);

  /* ─── Typography ───────────────────────────────────────────
     DM Sans is the body face on every page. Inter is retired. */
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;

  /* ─── Layout ───────────────────────────────────────────── */
  --maxw:1160px;
  --maxw-narrow:820px;
  --radius:20px;
  --radius-lg:24px;
}

/* ═══════════════════════════════════════════════════════════════════
   BASE

   Reset and root typography, shared by every page. Page level files
   override only what they genuinely differ on, which in practice is
   line-height and a couple of overflow rules.
   ═══════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--navy);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;display:block}

.serif{font-family:var(--font-display);font-feature-settings:'ss01','ss02'}

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

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}

/* ───── SHARED FOOTER BRAND ────────────────────────────────
   Used by index and the campaign pages. The legal pages have no such
   elements, so these rules are inert there. */
/* The brand lockup is a landscape image with its own cream ground, not an
   icon, so it is sized by width and carries no crop, padding or background.
   The cream plate reading against the navy footer is intended. */
.footer-logo{
  width:220px;
  max-width:62vw;
  height:auto;
  margin:0 auto 16px;
  display:block;
}
.footer-brand{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:500;
  font-style:italic;
  color:var(--cream);
  margin-bottom:12px;
}

/* ═══════════════════════════════════════════════════════════════════
   SITE NAV

   One component for all six pages. Two variants:
     .site-nav             solid navy bar, used on every page except index
     .site-nav--overlay    transparent, sits over the full height hero on
                           index so the 100vh hero is not pushed down

   Mobile behaviour is driven by muse-nav.js, which toggles .is-open on
   the nav and keeps aria-expanded in sync on the button.
   ═══════════════════════════════════════════════════════════════════ */

/* The bar stays put while the page scrolls. Sticky keeps it in normal flow,
   so the five solid-nav pages get no layout shift at all. The overlay variant
   has to be fixed instead: it must not occupy space above the full height
   hero, and sticky would push that hero down. */
.site-nav{
  position:sticky;
  top:0;
  z-index:20;
  background:var(--navy);
  border-bottom:1px solid var(--cream-14);
}
.site-nav--overlay{
  position:fixed;
  top:0;
  left:0;
  right:0;
  background:transparent;
  border-bottom:none;
}

/* Once the page has moved at all, the bar takes a solid ground. The overlay
   variant needs it to stay readable the moment the hero is no longer the
   thing behind it; the solid variant just gains a shadow so it reads as
   floating over the content rather than pasted on top of it.
   muse-nav.js adds is-scrolled past 8px of scroll. */
.site-nav.is-scrolled{box-shadow:0 6px 20px rgba(0,0,0,.18)}
.site-nav--overlay.is-scrolled{
  background:var(--navy);
  border-bottom:1px solid var(--cream-14);
}
@media(prefers-reduced-motion:no-preference){
  .site-nav{transition:background .25s ease,box-shadow .25s ease}
}

.site-nav__inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:16px 32px;
  display:flex;
  align-items:center;
  gap:24px;
}

/* brand */
.site-nav__brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  flex:none;
}
.site-nav__logo{
  height:36px;
  width:36px;
  border-radius:50%;
  display:block;
  flex:none;
}
.site-nav__word{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  font-style:italic;
  letter-spacing:.01em;
  color:var(--cream);
}

/* links */
.site-nav__links{
  display:flex;
  align-items:center;
  gap:26px;
  margin-left:auto;
}
.site-nav__links a:not(.site-nav__cta){
  color:var(--cream-85);
  text-decoration:none;
  font-size:14px;
  font-weight:500;
  letter-spacing:.01em;
  white-space:nowrap;
  padding:4px 0;
  border-bottom:1px solid transparent;
  transition:color .2s ease,border-color .2s ease;
}
.site-nav__links a:not(.site-nav__cta):hover{
  color:var(--cream);
  border-bottom-color:var(--gold);
}
.site-nav__links a:not(.site-nav__cta)[aria-current="page"]{
  color:var(--gold);
  border-bottom-color:var(--gold);
}

/* call to action, matching the button style used elsewhere on the site */
.site-nav__cta{
  display:inline-flex;
  align-items:center;
  padding:11px 22px;
  background:var(--gold);
  color:var(--navy);
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
  border-radius:100px;
  text-decoration:none;
  white-space:nowrap;
  flex:none;
  transition:background .25s ease,transform .25s ease;
}
.site-nav__cta:hover{
  background:var(--cream);
  transform:translateY(-1px);
}

/* mobile toggle, hidden on desktop */
.site-nav__toggle{
  display:none;
  margin-left:auto;
  width:42px;
  height:38px;
  padding:0;
  background:transparent;
  border:1px solid var(--cream-14);
  border-radius:9px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.site-nav__toggle span{
  display:block;
  width:18px;
  height:2px;
  border-radius:2px;
  background:var(--cream);
  transition:transform .25s ease,opacity .2s ease;
}

@media(max-width:900px){
  .site-nav__inner{padding:14px 20px;gap:14px}
  .site-nav__toggle{display:flex}

  /* the links and the cta collapse into a panel under the bar */
  .site-nav__links{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:8px 20px 18px;
    background:var(--navy);
    border-bottom:1px solid var(--cream-14);
  }
  .site-nav.is-open .site-nav__links{display:flex}
  .site-nav__links a:not(.site-nav__cta){
    padding:13px 0;
    font-size:15px;
    border-bottom:1px solid var(--cream-14);
  }
  .site-nav__links a:not(.site-nav__cta):last-of-type{border-bottom:none}
  .site-nav__links a:not(.site-nav__cta):hover,
  .site-nav__links a:not(.site-nav__cta)[aria-current="page"]{border-bottom-color:var(--cream-14)}
  .site-nav__links a:not(.site-nav__cta)[aria-current="page"]{color:var(--gold)}
  .site-nav__cta{
    margin-top:14px;
    justify-content:center;
  }
  /* the overlay variant needs a solid ground once the panel is open */
  .site-nav--overlay.is-open{background:var(--navy)}
  .site-nav.is-open .site-nav__toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .site-nav.is-open .site-nav__toggle span:nth-child(2){opacity:0}
  .site-nav.is-open .site-nav__toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
}

@media(max-width:420px){
  .site-nav__word{font-size:19px}
  .site-nav__logo{height:32px;width:32px}
}