/* =============================================================
   AFF — shared site CHROME (header · mobile menu · footer)
   Wolverine-structure chrome for the 12 sub-pages, lifted from
   css/wolverine.css (the home source of truth).

   Loads AFTER /css/site.css. Two scoping rules keep it from
   fighting site.css page content:
   1. Tokens are declared on the chrome ROOTS (.site-header,
      .nav-overlay, .site-footer) — NOT :root — so values that
      differ from site.css (e.g. --radius-lg 20px vs 14px) never
      cascade onto page cards.
   2. The inner nav uses .site-nav (NOT .nav) because site.css's
      .nav is the OLD fixed header bar and would collide.
   Fonts ("Soehne") are already loaded by site.css @font-face —
   no @font-face needed here.
   Keep in sync with css/wolverine.css by hand.
   ============================================================= */

/* --- tokens scoped to the chrome roots (values match wolverine.css) --- */
.site-header,
.nav-overlay,
.site-footer{
  --ink:#111111; --bone:#FFFFFF; --sand:#E7E3DC;
  --flame:#FF8F1C; --flame-deep:#D76700; --ink-muted:#6B6B6B;
  --hairline-dark:rgba(255,255,255,.15); --hairline-light:rgba(0,0,0,.10);
  --radius-lg:20px; --radius-md:12px; --radius-sm:6px;
  --pad:48px; --max:1440px;
  --font-body:"Proxima Nova","Soehne",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono",Menlo,Monaco,Consolas,monospace;
  --fw-mid:500; --mono:.6875rem;
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* container used ONLY inside the chrome footer (scoped — no leak to page content) */
.site-footer .container{max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);}

/* ============================ HEADER ========================== */
.site-header{position:fixed; top:0; left:0; right:0; z-index:50; height:82px;
  display:flex; align-items:center; background:transparent;
  transition:transform .4s var(--ease-out), background .3s var(--ease-out);}
.site-header__inner{width:100%; max-width:var(--max); margin-inline:auto;
  padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:32px;}
.site-header.is-hidden{transform:translateY(-82px);}
/* is-solid: JS toggles it past the hero. --solid modifier: pages that open
   over LIGHT content pin the dark bar permanently (about, apply). */
.site-header.is-solid,
.site-header--solid{background:var(--ink);}

.site-header .brandmark img{height:34px; width:auto;}
.site-header .brandmark--wide{display:block;}
.site-header .brandmark--knot{display:none;}

.site-nav{display:flex; align-items:center; gap:28px;}
.site-nav a{font-size:16px; line-height:1.5; color:#fff;
  display:inline-flex; align-items:center; min-height:44px;
  transition:color .3s var(--ease-out);}
.site-nav a:hover{color:var(--flame);}

.nav-toggle{display:none; align-items:center; gap:8px; background:transparent;
  border:0; color:#fff; font-family:var(--font-body); font-size:15px;
  min-height:44px; padding:0 6px; cursor:pointer;}

/* ============================ MOBILE OVERLAY MENU ============= */
.nav-overlay{position:fixed; inset:0; z-index:60; background:var(--ink);
  display:flex; flex-direction:column; padding:24px var(--pad) 48px;
  transform:translateY(-100%); transition:transform .45s var(--ease-out);
  visibility:hidden;}
.nav-overlay.is-open{transform:none; visibility:visible;}
.nav-overlay__top{display:flex; justify-content:space-between; align-items:center;
  height:82px; margin-bottom:24px;}
.nav-overlay__top img{height:30px; width:auto;}
.nav-overlay a{color:#fff; font-size:33px; font-weight:400; padding:14px 0;
  border-bottom:1px solid var(--hairline-dark);}
.nav-overlay a:hover{color:var(--flame);}
.nav-close{background:transparent; border:0; color:#fff; font-size:15px;
  min-height:44px; cursor:pointer;}

/* ============================ FOOTER ========================== */
.site-footer{position:relative; z-index:3; margin-top:-20px;
  background:var(--ink); color:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  padding:64px 0 max(34px, env(safe-area-inset-bottom));}
.site-footer .footer-top{display:grid; grid-template-columns:auto 1fr; gap:48px; align-items:start;}
.site-footer .footer-logo img{height:72px; width:auto;}
.site-footer .footer-nav{display:flex; flex-direction:column;}
.site-footer .footer-nav a{font-size:33px; font-weight:400; line-height:1.05; color:#fff;
  padding:18px 0; border-bottom:1px solid var(--hairline-dark);
  display:flex; align-items:center;
  transition:opacity .3s var(--ease-out), color .3s var(--ease-out), padding-left .3s var(--ease-out);}
.site-footer .footer-nav a:first-child{border-top:1px solid var(--hairline-dark);}
.site-footer .footer-nav a:hover{opacity:.6; color:var(--flame); padding-left:10px;}

.site-footer .footer-mid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px;
  margin-top:56px;}
.site-footer .footer-desc{font-size:15px; line-height:1.5; color:rgba(255,255,255,.75); max-width:320px;}
.site-footer .footer-social{display:flex; flex-direction:column; gap:12px; margin-top:20px;}
.site-footer .footer-social a{display:inline-flex; align-items:center; gap:10px; font-size:15px;
  color:rgba(255,255,255,.85); min-height:44px;
  transition:color .3s var(--ease-out);}
.site-footer .footer-social a:hover{color:var(--flame);}
.site-footer .footer-social svg{width:18px; height:18px; flex:none;}
.site-footer .footer-col h3{font-family:var(--font-mono); font-size:var(--mono); font-weight:400;
  text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.5);
  margin-bottom:14px;}
.site-footer .footer-col ul{list-style:none; margin:0; padding:0;}
.site-footer .footer-col li{line-height:1.1;}
.site-footer .footer-col a{display:inline-flex; align-items:center; font-size:15px;
  color:rgba(255,255,255,.85); min-height:44px;
  transition:color .3s var(--ease-out);}
.site-footer .footer-col a:hover{color:var(--flame);}

.site-footer .footer-legal{display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:24px;
  border-top:1px solid var(--hairline-dark);
  font-family:var(--font-body); font-size:var(--mono); font-weight:var(--fw-mid);
  text-transform:uppercase;
  letter-spacing:.06em; color:rgba(255,255,255,.6);}
.site-footer .footer-legal__links{display:flex; gap:20px; flex-wrap:wrap;}
.site-footer .footer-legal a{color:rgba(255,255,255,.6); min-height:44px; display:inline-flex;
  align-items:center; transition:color .3s var(--ease-out);}
.site-footer .footer-legal a:hover{color:var(--flame);}

/* ============================ RESPONSIVE ====================== */
@media (max-width:960px){
  .site-footer .footer-mid{grid-template-columns:1fr 1fr; gap:32px;}
}

@media (max-width:768px){
  .site-header,
  .nav-overlay,
  .site-footer{--pad:20px;}

  .site-nav{display:none;}
  .nav-toggle{display:inline-flex;}
  .site-header .brandmark--wide{display:none;}
  .site-header .brandmark--knot{display:block;}
  .site-header .brandmark--knot img{height:30px;}

  .site-footer .footer-top{grid-template-columns:1fr; gap:32px;}
  .site-footer .footer-mid{grid-template-columns:1fr; gap:28px; margin-top:40px;}
  .site-footer .footer-nav a{font-size:28px; padding:16px 0;}
  .site-footer .footer-legal{gap:8px;}
}

/* ============================ REDUCED MOTION ================== */
@media (prefers-reduced-motion:reduce){
  .site-header,.nav-overlay{transition-duration:.001ms !important;}
}