/*
 * Shared chrome: the header, the footer and the tokens both depend on.
 *
 * Every public page loads this, so the navigation is one file rather than five
 * copies drifting apart. Page-specific styles stay in their own page.
 */

:root {
  --bg: #e9edf2; --bg2: #dfe4ec; --panel: #f7f9fc; --ink: #17202f; --muted: #5c6779;
  --hair: rgba(20, 30, 48, .14); --grid: rgba(20, 30, 48, .06); --brass: #a9741f;
  --axis: #2b9a54; --wall: #c14e28; --glass: #12879a; --dim: #3a5f96;
  --shadow: rgba(20, 30, 48, .16);
  --head-h: 62px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #090d16; --bg2: #0c1120; --panel: #10182a; --ink: #e7eef9; --muted: #8b98af;
    --hair: rgba(210, 224, 245, .16); --grid: rgba(210, 224, 245, .055); --brass: #d6a457;
    --axis: #58d888; --wall: #ec7d4d; --glass: #3ccbd9; --dim: #6f92cc;
    --shadow: rgba(0, 0, 0, .5);
  }
}
:root[data-theme=dark] {
  --bg: #090d16; --bg2: #0c1120; --panel: #10182a; --ink: #e7eef9; --muted: #8b98af;
  --hair: rgba(210, 224, 245, .16); --grid: rgba(210, 224, 245, .055); --brass: #d6a457;
  --axis: #58d888; --wall: #ec7d4d; --glass: #3ccbd9; --dim: #6f92cc; --shadow: rgba(0, 0, 0, .5);
}
:root[data-theme=light] {
  --bg: #e9edf2; --bg2: #dfe4ec; --panel: #f7f9fc; --ink: #17202f; --muted: #5c6779;
  --hair: rgba(20, 30, 48, .14); --grid: rgba(20, 30, 48, .06); --brass: #a9741f;
  --axis: #2b9a54; --wall: #c14e28; --glass: #12879a; --dim: #3a5f96; --shadow: rgba(20, 30, 48, .16);
}

/* ── header ──────────────────────────────────────────────────────────────── */
.site-head {
  position: sticky; top: 0; z-index: 60;
  backdrop-filter: blur(12px) saturate(1.3);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
/* The rule under the header appears only once the page has moved, so the top of
   the page reads as one surface rather than a bar stuck onto it. */
.site-head.stuck {
  border-bottom-color: var(--hair);
  box-shadow: 0 10px 30px -24px var(--shadow);
}
.head-in {
  max-width: 1120px; margin: 0 auto; padding: 0 24px;
  height: var(--head-h); display: flex; align-items: center; gap: 18px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none }
.logo-mark { width: 27px; height: 27px; border-radius: 7px; display: block; flex: none }
.logo-word { font-weight: 800; font-size: 17.5px; letter-spacing: -.01em }
.logo-word b { color: var(--brass); font-weight: 800 }

.head-nav { display: flex; align-items: center; gap: 2px; margin-left: 8px }
.head-nav a {
  position: relative; color: var(--muted); text-decoration: none;
  font-size: 13.5px; font-weight: 500; padding: 8px 11px; border-radius: 8px;
  transition: color .18s ease;
}
.head-nav a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 1.5px;
  background: var(--brass); transform: scaleX(0); transform-origin: left;
  transition: transform .22s cubic-bezier(.3, .9, .3, 1);
}
.head-nav a:hover { color: var(--ink) }
.head-nav a:hover::after, .head-nav a[aria-current=page]::after { transform: scaleX(1) }
.head-nav a[aria-current=page] { color: var(--ink); font-weight: 650 }

.head-act { display: flex; align-items: center; gap: 8px; margin-left: auto }
.head-act select, .tbtn {
  font: inherit; font-size: 13px; background: transparent; color: var(--muted);
  border: 1px solid var(--hair); border-radius: 9px; padding: 6px 9px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.head-act select:hover, .tbtn:hover { color: var(--ink); border-color: var(--brass) }
.tbtn { width: 34px; height: 34px; display: grid; place-items: center; padding: 0 }
.head-cta {
  font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap;
  background: var(--brass); color: #1a1204; padding: 9px 15px; border-radius: 9px;
  box-shadow: 0 8px 22px -12px var(--brass); transition: transform .14s ease;
}
.head-cta:hover { transform: translateY(-1px) }
.logo:focus-visible, .head-nav a:focus-visible, .head-cta:focus-visible,
.tbtn:focus-visible, .burger:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px }

/* ── mobile ──────────────────────────────────────────────────────────────── */
.burger {
  display: none; width: 34px; height: 34px; padding: 0; cursor: pointer;
  background: transparent; border: 1px solid var(--hair); border-radius: 9px;
  place-items: center; color: var(--ink);
}
.burger span, .burger span::before, .burger span::after {
  content: ""; display: block; width: 15px; height: 1.6px; background: currentColor;
  border-radius: 2px; transition: transform .25s ease, opacity .2s ease;
}
.burger span::before { transform: translateY(-5px) }
.burger span::after { transform: translateY(3.4px) }
.burger[aria-expanded=true] span { background: transparent }
.burger[aria-expanded=true] span::before { transform: rotate(45deg) }
.burger[aria-expanded=true] span::after { transform: rotate(-45deg) translateY(-1.6px) }

@media (max-width: 860px) {
  .burger { display: grid }
  .head-nav {
    position: fixed; inset: var(--head-h) 0 auto 0; margin: 0; flex-direction: column;
    align-items: stretch; gap: 0; padding: 10px 18px 18px;
    background: var(--bg); border-bottom: 1px solid var(--hair);
    box-shadow: 0 24px 40px -30px var(--shadow);
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .22s ease, opacity .18s ease;
  }
  .head-nav.open { transform: none; opacity: 1; pointer-events: auto }
  .head-nav a { padding: 13px 4px; font-size: 15.5px; border-bottom: 1px solid var(--hair) }
  .head-nav a::after { display: none }
  .head-nav a:last-child { border-bottom: 0 }
  .head-cta { display: none }
}
@media (prefers-reduced-motion: reduce) {
  .site-head, .head-nav, .head-nav a::after, .head-cta, .burger span,
  .burger span::before, .burger span::after { transition: none }
}

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-foot { border-top: 1px solid var(--hair); margin-top: 56px; padding: 30px 0 46px }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; display: grid; gap: 22px }
.foot-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px }
@media (max-width: 760px) { .foot-cols { grid-template-columns: 1fr 1fr } }
.foot-cols h4 {
  margin: 0 0 10px; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); font-weight: 700;
}
.foot-cols a { display: block; color: var(--muted); text-decoration: none; font-size: 13.5px; padding: 3px 0 }
.foot-cols a:hover { color: var(--brass) }
.foot-blurb { color: var(--muted); font-size: 13px; max-width: 34ch; margin: 10px 0 0; line-height: 1.6 }
.foot-base {
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  border-top: 1px solid var(--hair); padding-top: 18px; color: var(--muted); font-size: 12.5px;
}