/* Site header (nav) and footer, shared by every page. Markup: tools/site_nav.py.
   Each page defines the fonts (@font-face) and --display / --body; colours are set here
   so this file works on its own. Phone menu: <details>, no JavaScript needed. */
.s-head, .s-foot, .s-skip {
  --s-bg: #161616; --s-well: #101010; --s-line: #303030; --s-edge: #383838;
  --s-ink: #f1efe9; --s-soft: #d2cfc8; --s-muted: #a09d96;
  --s-gold: #f0c850; --s-gold-hover: #f5d57a; --s-on-gold: #1c1500;
  font-family: var(--body, "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif);
}
.s-head ul, .s-foot ul { list-style: none; margin: 0; padding: 0; }
.s-head li, .s-foot li { margin: 0; }
.s-head a, .s-foot a { text-decoration: none; }
.s-head :focus-visible, .s-foot :focus-visible { outline: 3px solid var(--s-gold); outline-offset: 3px; border-radius: 6px; }

.s-skip { position: absolute; left: 16px; top: -80px; z-index: 30; background: var(--s-gold); color: var(--s-on-gold); padding: 10px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.s-skip:focus { top: 12px; outline: 3px solid var(--s-ink); outline-offset: 2px; }

/* bar */
.s-head { position: sticky; top: 0; z-index: 20; background: rgba(22, 22, 22, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--s-line); line-height: 1.6; }
.s-bar { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; min-height: 64px; display: flex; align-items: center; gap: 12px; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
@media (min-width: 700px) { .s-bar { padding-inline: 40px; } }
.s-mark { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; min-height: 44px; white-space: nowrap; font-family: var(--display, "Arial Narrow", Impact, sans-serif); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s-ink); }
.s-mark:hover { color: var(--s-ink); }
.s-row { display: inline-flex; gap: 2px; }
.s-row svg { display: block; width: 12px; height: 12px; flex: none; color: var(--s-edge); }
.s-row svg:nth-child(-n+3) { color: var(--s-gold); }
.s-nav { display: flex; align-items: center; gap: 8px; }
.s-links { display: flex; align-items: center; gap: 2px; }
.s-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--s-soft); font-size: 15px; font-weight: 500; white-space: nowrap; }
.s-links a:hover { color: var(--s-ink); }
.s-links a[aria-current] { color: var(--s-ink); box-shadow: inset 0 -2px 0 var(--s-gold); border-radius: 0; }
.s-links .s-li-cta { margin-left: 8px; }
.s-links a.s-cta, .s-panel a.s-cta { justify-content: center; padding: 0 16px; border-radius: 12px; background: var(--s-gold); color: var(--s-on-gold); font-weight: 600; box-shadow: none; }
.s-links a.s-cta:hover { background: var(--s-gold-hover); color: var(--s-on-gold); }
.s-links a.s-cta[aria-current] { box-shadow: inset 0 0 0 2px var(--s-on-gold); }
.s-head a.s-cta:focus-visible { outline-color: var(--s-ink); }

/* phone menu: <details>; the panel overlays the page, so opening it moves nothing */
.s-menu { display: none; }
.s-menu > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 14px; border: 1px solid var(--s-edge); border-radius: 12px; color: var(--s-ink); font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; -webkit-user-select: none; user-select: none; }
.s-menu > summary::-webkit-details-marker { display: none; }
.s-menu > summary:hover { border-color: var(--s-muted); }
.s-menu[open] > summary { border-color: var(--s-gold); }
.s-burger { position: relative; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.s-burger::before, .s-burger::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; border-radius: 1px; }
.s-burger::before { top: -5px; }
.s-burger::after { top: 5px; }
.s-menu[open] .s-burger { background: transparent; }
.s-menu[open] .s-burger::before { top: 0; transform: rotate(45deg); }
.s-menu[open] .s-burger::after { top: 0; transform: rotate(-45deg); }
.s-panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 65px); max-height: calc(100dvh - 65px); overflow-y: auto; overscroll-behavior: contain; background: var(--s-bg); border-bottom: 1px solid var(--s-line); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55); padding: 8px max(16px, env(safe-area-inset-right)) 20px max(16px, env(safe-area-inset-left)); }
.s-panel ul { display: grid; gap: 2px; }
.s-panel a { display: flex; align-items: center; min-height: 52px; padding: 0 14px; border-radius: 12px; color: var(--s-ink); font-size: 18px; font-weight: 500; }
.s-panel a:hover { background: #1e1e1e; color: var(--s-ink); }
.s-panel a[aria-current] { background: #24211a; box-shadow: inset 3px 0 0 var(--s-gold); }
.s-panel a.s-cta { margin-top: 8px; }
.s-panel a.s-cta:hover { background: var(--s-gold-hover); color: var(--s-on-gold); }
.s-panel a.s-cta[aria-current] { box-shadow: inset 0 0 0 2px var(--s-on-gold); }
.s-more { margin: 16px 14px 4px; font-family: ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--s-muted); }

@media (max-width: 760px) {
  .s-links li:not(.s-li-cta) { display: none; }
  .s-links .s-li-cta { margin-left: 0; }
  .s-menu { display: block; }
}
/* narrow phones: the wordmark drops its star row so the bar fits (with the button and Menu) */
@media (max-width: 440px) {
  .s-bar { gap: 8px; }
  .s-row { display: none; }
  .s-mark { font-size: 22px; }
  .s-links a.s-cta { padding: 0 12px; }
  .s-menu > summary { padding: 0 12px; }
}
/* very narrow: Menu becomes an icon button (its name stays "Menu") */
@media (max-width: 345px) {
  .s-menu > summary { padding: 0; justify-content: center; width: 44px; gap: 0; }
  .s-menu-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* footer */
.s-foot { border-top: 1px solid var(--s-line); background: var(--s-well); color: var(--s-muted); font-size: 15px; line-height: 1.6; padding-block: 36px calc(36px + env(safe-area-inset-bottom)); }
.s-foot-in { box-sizing: border-box; width: 100%; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 40px; align-items: start; padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
@media (min-width: 700px) { .s-foot-in { padding-inline: 40px; } }
@media (max-width: 860px) { .s-foot-in { grid-template-columns: minmax(0, 1fr); } }
.s-notes p { margin: 0; overflow-wrap: anywhere; }
.s-notes p + p { margin-top: 6px; }
.s-notes a { color: var(--s-gold); text-decoration: underline; text-underline-offset: 3px; }
.s-foot-nav ul { display: flex; flex-wrap: wrap; gap: 0 22px; }
.s-foot-nav a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--s-gold); }
.s-foot-nav a:hover { color: var(--s-gold-hover); text-decoration: underline; text-underline-offset: 3px; }
.s-foot-nav a[aria-current] { color: var(--s-ink); }
.s-addr { color: var(--s-muted); }

@media (prefers-reduced-motion: no-preference) {
  .s-links a, .s-panel a, .s-menu > summary { transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; }
}