/* ══════════════════════════════════════════════════════════
   Vardesyn — shared design tokens + cross-page chrome.
   Loaded before each page's inline <style>; pages keep their
   page-specific tokens (e.g. the Wall's stage colors) inline.
   ══════════════════════════════════════════════════════════ */

:root {
  --night: #070b12;
  --night-2: #0b111c;
  --mist: #9aa7ba;
  --snow: #e8edf4;
  --ember: #ff7a3c;
  --ember-deep: #d94f10;
  --hairline: rgba(154, 167, 186, 0.14);
}

/* ---------- a11y utilities ---------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px; top: -60px;
  z-index: 900;
  background: var(--ember);
  color: var(--night);
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ---------- mobile nav ---------- */
nav { position: relative; }

.nav-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  width: 42px; height: 42px;
  padding: 0;
  cursor: pointer;
  color: var(--mist);
  align-items: center;
  justify-content: center;
}
.nav-burger:hover, .nav-burger[aria-expanded="true"] { color: var(--ember); border-color: rgba(255, 122, 60, 0.35); }
.nav-burger svg { width: 20px; height: 20px; stroke: currentColor; }
.nav-burger .ic-close { display: none; }
.nav-burger[aria-expanded="true"] .ic-open { display: none; }
.nav-burger[aria-expanded="true"] .ic-close { display: block; }
.nav-burger:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }

@media (max-width: 900px) {
  .nav-burger { display: inline-flex; }

  /* the CTA folds into the menu panel; the burger owns the right edge */
  .nav-links a.cta { display: none; }

  .nav-links.open {
    position: absolute;
    top: calc(100% - 16px);
    right: 0;
    z-index: 800;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 220px;
    background: var(--night-2);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 20px 60px -18px rgba(0, 0, 0, 0.8);
  }
  /* the panel overrides each page's `display:none` on non-CTA links */
  .nav-links.open a:not(.cta) {
    display: block;
    padding: 12px 14px;
    border-radius: 9px;
  }
  .nav-links.open a:not(.cta):hover { background: rgba(154, 167, 186, 0.08); }
  .nav-links.open a.cta { display: block; text-align: center; margin-top: 8px; }
}