/* ==========================================================================
   MUPSN design system
   --------------------------------------------------------------------------
   Palette is taken from the network's own mark: a deep ink navy and a warm
   academic gold, on warm paper rather than pure white. Light is the default;
   the dark theme redefines only the tokens, so every component below works in
   both without a single duplicated rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Brand */
  --navy-900: #0A1220;
  --navy-800: #101B2D;
  --navy-700: #16233A;
  --navy-600: #22344F;
  --gold-600: #B37F14;
  --gold-500: #D9A227;
  --gold-400: #E8B84B;
  --gold-100: #FBF1DC;

  /* Surfaces */
  --bg: #FAF9F6;
  --bg-alt: #F3F1EB;
  --surface: #FFFFFF;
  --surface-2: #F7F6F2;
  --surface-sunken: #EFEDE6;

  /* Ink */
  --ink: #101A2B;
  --ink-2: #33415A;
  --muted: #63718A;
  --faint: #8B98AC;

  /* Lines and accents */
  --line: #E4E1D8;
  --line-strong: #D2CEC2;
  --accent: var(--gold-500);
  --accent-ink: #2A1D02;
  --accent-soft: var(--gold-100);
  --link: #1B4D8F;

  /* Status */
  --ok: #1F7A55;
  --ok-soft: #E4F4EC;
  --warn: #A9720B;
  --warn-soft: #FDF3DE;
  --danger: #B3261E;
  --danger-soft: #FBE9E7;
  --info: #1B4D8F;
  --info-soft: #E7F0FB;

  /* Type */
  --font-display: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Scale — fluid between a 360px phone and a 1440px desktop */
  --step--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --step-0:  clamp(0.95rem, 0.91rem + 0.19vw, 1.05rem);
  --step-1:  clamp(1.13rem, 1.05rem + 0.34vw, 1.31rem);
  --step-2:  clamp(1.35rem, 1.21rem + 0.60vw, 1.69rem);
  --step-3:  clamp(1.62rem, 1.38rem + 1.00vw, 2.19rem);
  --step-4:  clamp(1.94rem, 1.55rem + 1.65vw, 2.84rem);
  --step-5:  clamp(2.33rem, 1.71rem + 2.60vw, 3.69rem);
  --step-6:  clamp(2.75rem, 1.79rem + 4.05vw, 4.80rem);

  /* Space */
  --gap-1: 0.375rem;
  --gap-2: 0.625rem;
  --gap-3: 1rem;
  --gap-4: 1.5rem;
  --gap-5: 2.25rem;
  --gap-6: 3.5rem;
  --gap-7: 5.5rem;
  --gap-8: 8rem;

  /* Shape */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Elevation — soft, warm and layered rather than a grey drop shadow */
  --shadow-1: 0 1px 2px rgba(16, 26, 43, .05), 0 2px 8px rgba(16, 26, 43, .04);
  --shadow-2: 0 2px 6px rgba(16, 26, 43, .06), 0 12px 28px rgba(16, 26, 43, .07);
  --shadow-3: 0 4px 12px rgba(16, 26, 43, .07), 0 28px 64px rgba(16, 26, 43, .12);
  --shadow-gold: 0 10px 30px rgba(217, 162, 39, .28);

  /* Motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t: 280ms;
  --t-slow: 620ms;

  --container: 1200px;
  --container-narrow: 780px;
  --header-h: 74px;
}

/* The dark palette. Written once and applied to both the explicit toggle and
   the system preference, so a viewer who has never touched the switch still
   gets the theme their device asked for. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #070C15;
    --bg-alt: #0B1220;
    --surface: #0F1826;
    --surface-2: #141F31;
    --surface-sunken: #0A111E;

    --ink: #EDF1F7;
    --ink-2: #C3CDDC;
    --muted: #93A1B6;
    --faint: #6B7A91;

    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .17);
    --accent: var(--gold-400);
    --accent-ink: #1A1204;
    --accent-soft: rgba(232, 184, 75, .14);
    --link: #7FB2F0;

    --ok: #4ADE9B;
    --ok-soft: rgba(74, 222, 155, .12);
    --warn: #F0C062;
    --warn-soft: rgba(240, 192, 98, .12);
    --danger: #F98B84;
    --danger-soft: rgba(249, 139, 132, .12);
    --info: #7FB2F0;
    --info-soft: rgba(127, 178, 240, .12);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 2px 6px rgba(0, 0, 0, .34), 0 14px 32px rgba(0, 0, 0, .42);
    --shadow-3: 0 4px 12px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .55);
    --shadow-gold: 0 10px 34px rgba(232, 184, 75, .18);
  }
}

[data-theme='dark'] {
  color-scheme: dark;
  --bg: #070C15;
  --bg-alt: #0B1220;
  --surface: #0F1826;
  --surface-2: #141F31;
  --surface-sunken: #0A111E;

  --ink: #EDF1F7;
  --ink-2: #C3CDDC;
  --muted: #93A1B6;
  --faint: #6B7A91;

  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --accent: var(--gold-400);
  --accent-ink: #1A1204;
  --accent-soft: rgba(232, 184, 75, .14);
  --link: #7FB2F0;

  --ok: #4ADE9B;
  --ok-soft: rgba(74, 222, 155, .12);
  --warn: #F0C062;
  --warn-soft: rgba(240, 192, 98, .12);
  --danger: #F98B84;
  --danger-soft: rgba(249, 139, 132, .12);
  --info: #7FB2F0;
  --info-soft: rgba(127, 178, 240, .12);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 2px 6px rgba(0, 0, 0, .34), 0 14px 32px rgba(0, 0, 0, .42);
  --shadow-3: 0 4px 12px rgba(0, 0, 0, .4), 0 30px 70px rgba(0, 0, 0, .55);
  --shadow-gold: 0 10px 34px rgba(232, 184, 75, .18);
}

[data-theme='light'] { color-scheme: light; }

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--announce-h, 0px) + 24px);
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
/* A card heading that has to be an h2 for the document outline, but should
   still look like the card heading it is. */
h2.card-title { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

ul, ol { padding: 0; list-style: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent); color: var(--accent-ink); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg-alt); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; border: 3px solid var(--bg-alt); }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }

.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: 12px; top: -80px; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: 12px 20px; border-radius: var(--r-sm); font-weight: 600;
  transition: top var(--t) var(--ease);
}
.skip-link:focus { top: 12px; }

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

.wrap {
  width: min(100% - 2.5rem, var(--container));
  margin-inline: auto;
}
.wrap-narrow { width: min(100% - 2.5rem, var(--container-narrow)); margin-inline: auto; }

.section { padding-block: var(--gap-7); position: relative; }
.section-sm { padding-block: var(--gap-6); }
.section-lg { padding-block: var(--gap-8); }
.section-alt { background: var(--bg-alt); }
.section-ink { background: var(--navy-800); color: #EDF1F7; }
.section-ink h1, .section-ink h2, .section-ink h3, .section-ink h4 { color: #FFF; }

.grid { display: grid; gap: var(--gap-4); }
.g-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.g-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 275px), 1fr)); }
.g-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 218px), 1fr)); }

.stack { display: flex; flex-direction: column; gap: var(--gap-3); }
.row { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3); flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   4. Type helpers
   -------------------------------------------------------------------------- */

.kicker {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-display);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent);
}
.kicker::before {
  content: ''; width: 26px; height: 2px; border-radius: 2px;
  background: currentColor; opacity: .65;
}
.kicker-plain::before { display: none; }

.display { font-size: var(--step-6); letter-spacing: -0.03em; line-height: 1.03; }
.lead { font-size: var(--step-1); color: var(--muted); line-height: 1.6; max-width: 62ch; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: var(--step--1); }
.center { text-align: center; }
.center .lead, .center .kicker { margin-inline: auto; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: -0.01em; }

/* A gold underline that draws itself when the heading scrolls into view. */
.mark {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% .28em;
  transition: background-size 900ms var(--ease-out) 200ms;
}
.is-visible .mark, .mark.is-visible { background-size: 100% .28em; }

.gradient-text {
  background: linear-gradient(102deg, var(--accent) 0%, var(--gold-400) 42%, var(--ink) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.section-head { max-width: 68ch; margin-bottom: var(--gap-5); }
.section-head .lead { margin-top: var(--gap-3); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-ink);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .92em 1.6em;
  font-family: var(--font-display);
  font-size: var(--step-0); font-weight: 600; line-height: 1;
  color: var(--btn-ink); background: var(--btn-bg);
  border: 1px solid transparent; border-radius: var(--r-pill);
  cursor: pointer; overflow: hidden; isolation: isolate;
  white-space: nowrap;
  transition: transform var(--t) var(--ease-spring), box-shadow var(--t) var(--ease),
              background-color var(--t) var(--ease), color var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
/* A light sweep that crosses the button on hover. */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .42) 50%, transparent 80%);
  transform: translateX(-110%);
  transition: transform 720ms var(--ease-out);
}
.btn:hover::after { transform: translateX(110%); }
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-gold); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled], .btn[aria-disabled='true'] { opacity: .5; pointer-events: none; }

.btn-ghost {
  --btn-bg: transparent; --btn-ink: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: var(--shadow-1); }

.btn-ink { --btn-bg: var(--navy-700); --btn-ink: #FFF; }
.btn-ink:hover { box-shadow: var(--shadow-3); }

.btn-light { --btn-bg: rgba(255, 255, 255, .1); --btn-ink: #FFF; border-color: rgba(255, 255, 255, .28); }
.btn-light:hover { --btn-bg: #FFF; --btn-ink: var(--navy-800); }

.btn-sm { padding: .68em 1.15em; font-size: var(--step--1); }
.btn-lg { padding: 1.06em 2em; font-size: var(--step-1); }
.btn-block { display: flex; width: 100%; }

.btn .ico { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover .ico-arrow { transform: translateX(3px); }
.ico-arrow { transition: transform var(--t) var(--ease-spring); }

/* Text link with an arrow that slides. */
.link-arrow {
  display: inline-flex; align-items: center; gap: .45em;
  font-weight: 600; color: var(--ink);
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
  transition: gap var(--t) var(--ease-spring), color var(--t) var(--ease);
}
.link-arrow:hover { gap: .85em; color: var(--accent); }

/* --------------------------------------------------------------------------
   6. Cards and surfaces
   -------------------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--gap-4);
  box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease-out), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease);
}
.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3);
  border-color: var(--line-strong);
}

/* Cursor-tracked highlight. `--mx`/`--my` are set from JS. */
.card-glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%),
              color-mix(in srgb, var(--accent) 15%, transparent), transparent 62%);
  opacity: 0; transition: opacity var(--t) var(--ease); pointer-events: none;
}
.card-glow:hover::before { opacity: 1; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
}

.chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .34em .8em;
  font-size: var(--step--1); font-weight: 500; line-height: 1.4;
  color: var(--ink-2); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: all var(--t) var(--ease);
}
.chip-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--gold-600); }
[data-theme='dark'] .chip-accent { color: var(--gold-400); }

.badge {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .28em .7em;
  font-family: var(--font-display);
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border-radius: var(--r-pill);
}
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-live { background: var(--danger-soft); color: var(--danger); }
.badge-live::before {
  content: ''; width: 7px; height: 7px; border-radius: 99px; background: currentColor;
  animation: pulse-dot 1.8s var(--ease) infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .35; transform: scale(.75); }
}

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.progress-bar {
  position: fixed; inset: 0 auto auto 0; z-index: 120;
  height: 3px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400), var(--gold-600));
  will-change: transform;
}

.site-header {
  position: fixed; left: 0; right: 0; top: var(--announce-h, 0px); z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: transparent;
  transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease),
              border-color var(--t) var(--ease), height var(--t) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  height: 64px;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(16, 26, 43, .06);
}
.site-header .wrap { display: flex; align-items: center; gap: .65rem; width: min(100% - 2rem, 1440px); }

.brand { display: flex; align-items: center; gap: .7rem; flex: none; }
.brand img { height: 38px; width: auto; transition: height var(--t) var(--ease); }
.is-stuck .brand img { height: 32px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text b { font-family: var(--font-display); font-size: 1.16rem; letter-spacing: -.02em; }
.brand-text span { font-size: .615rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }

.nav { margin-left: auto; display: flex; align-items: center; gap: .15rem; }
.nav a {
  position: relative;
  padding: .5rem .62rem;
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  border-radius: var(--r-sm);
  transition: color var(--t) var(--ease), background-color var(--t) var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--ink); background: var(--surface-2); }
.nav a[aria-current='page'] { color: var(--ink); font-weight: 600; }
.nav a[aria-current='page']::after {
  content: ''; position: absolute; left: .62rem; right: .62rem; bottom: .26rem;
  height: 2px; border-radius: 2px; background: var(--accent);
}

.header-tools { display: flex; align-items: center; gap: .4rem; flex: none; }

.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  color: var(--ink-2);
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  transition: all var(--t) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); transform: translateY(-1px); }
.icon-btn svg { width: 18px; height: 18px; }

.kbd-hint {
  display: none; align-items: center; gap: .35rem;
  padding: .42rem .7rem .42rem .62rem;
  font-size: .8rem; color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill);
  transition: all var(--t) var(--ease);
}
.kbd-hint:hover { border-color: var(--accent); color: var(--ink); }
.kbd-hint kbd {
  font-family: var(--font-mono); font-size: .7rem;
  padding: .12em .4em; border-radius: 4px;
  background: var(--surface-sunken); border: 1px solid var(--line);
}
@media (min-width: 1500px) { .kbd-hint { display: inline-flex; } }

.burger { display: none; }

/* Between the drawer breakpoint and a wide desktop there is no room for the
   portal button in the bar; it stays available in the drawer and the palette. */
@media (min-width: 1280px) and (max-width: 1379px) {
  .nav > .nav-cta { display: none; }
}

/* Mobile navigation */
@media (max-width: 1279px) {
  .nav {
    position: fixed; inset: 0 0 0 auto;
    width: min(88vw, 380px);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: .2rem;
    padding: calc(var(--header-h) + 1.5rem) 1.5rem 2rem;
    background: var(--surface);
    border-left: 1px solid var(--line);
    box-shadow: var(--shadow-3);
    transform: translateX(101%);
    transition: transform 420ms var(--ease-out);
    overflow-y: auto;
  }
  .nav.is-open { transform: translateX(0); }
  .nav a { padding: .9rem 1rem; font-size: 1.05rem; border-radius: var(--r-md); }
  .nav a[aria-current='page']::after { left: 1rem; right: auto; width: 20px; bottom: .62rem; }
  .nav .nav-cta { margin-top: .75rem; }
  .burger { display: inline-grid; }
  .nav-scrim {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(7, 12, 21, .5);
    backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none;
    transition: opacity var(--t) var(--ease);
  }
  .nav-scrim.is-open { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
}

/* Announcement strip. Fixed above the header, which is offset by its height
   (measured in app.js and published as --announce-h). */
.announce {
  position: fixed; inset: 0 0 auto; z-index: 101;
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  padding: .62rem 1.2rem;
  font-size: var(--step--1); font-weight: 500;
  color: #FFF;
  background: linear-gradient(100deg, var(--navy-800), var(--navy-600) 55%, var(--navy-800));
  overflow: hidden;
}
.announce::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(217, 162, 39, .3) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: announce-sheen 6s var(--ease) infinite;
}
@keyframes announce-sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.announce a { color: var(--gold-400); font-weight: 600; border-bottom: 1px solid currentColor; }
.announce .close { margin-left: .5rem; color: rgba(255, 255, 255, .6); }
.announce .close:hover { color: #FFF; }
/* Over a dark hero the header has no background of its own, so its contents
   are drawn light until it sticks and picks up the page surface. */
.site-header:not(.is-stuck) .brand-text b { color: #FFF; }
.site-header:not(.is-stuck) .brand-text span { color: rgba(255, 255, 255, .58); }
.site-header:not(.is-stuck) .nav > a { color: rgba(237, 241, 247, .84); }
.site-header:not(.is-stuck) .nav > a:hover { color: #FFF; background: rgba(255, 255, 255, .1); }
.site-header:not(.is-stuck) .nav > a[aria-current='page'] { color: #FFF; }
.site-header:not(.is-stuck) .icon-btn,
.site-header:not(.is-stuck) .kbd-hint {
  color: rgba(237, 241, 247, .84);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
}
.site-header:not(.is-stuck) .icon-btn:hover,
.site-header:not(.is-stuck) .kbd-hint:hover { color: #FFF; border-color: rgba(255, 255, 255, .35); }
.site-header:not(.is-stuck) .kbd-hint kbd { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .18); }

/* The mobile drawer is a real surface, so it always uses page colours. */
@media (max-width: 1279px) {
  .site-header:not(.is-stuck) .nav > a { color: var(--ink-2); }
  .site-header:not(.is-stuck) .nav > a:hover { color: var(--ink); background: var(--surface-2); }
  .site-header:not(.is-stuck) .nav > a[aria-current='page'] { color: var(--ink); }
}

/* --------------------------------------------------------------------------
   8. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: #C3CDDC;
  padding-block: var(--gap-6) var(--gap-4);
  position: relative; overflow: hidden;
}
.site-footer::before {
  content: ''; position: absolute; inset: -50% -10% auto;  height: 320px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(217, 162, 39, .16), transparent 70%);
  pointer-events: none;
}
.site-footer .f-head {
  color: #FFF; font-size: .78rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer a { color: #C3CDDC; transition: color var(--t) var(--ease); }
.site-footer a:hover { color: var(--gold-400); }
.footer-grid { display: grid; gap: var(--gap-5); grid-template-columns: 1.6fr repeat(3, 1fr); position: relative; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-links { display: flex; flex-direction: column; gap: .6rem; font-size: .94rem; }
.footer-bottom {
  margin-top: var(--gap-5); padding-top: var(--gap-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: var(--gap-3); justify-content: space-between;
  font-size: .85rem; color: #7D8CA3; position: relative;
}

/* --------------------------------------------------------------------------
   Studio credit
   The signature at the very foot of the site. It sits on its own line, below
   the network's own copyright, so it reads as authorship rather than as
   another footer link competing for attention.
   -------------------------------------------------------------------------- */

.footer-credit {
  position: relative;
  margin-top: var(--gap-4);
  padding: var(--gap-4) 0 var(--gap-2);
  border-top: 1px solid rgba(255, 255, 255, .07);
  display: flex; justify-content: center;
}

.credit {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: .5rem .7rem;
  text-align: center;
}

.credit-lead {
  font-size: .76rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  color: #6B7A91;
}

.credit-link {
  position: relative;
  display: inline-flex; align-items: center; gap: .65rem;
  padding-bottom: 5px;
  font-family: var(--font-display); font-size: 1.04rem; font-weight: 600;
  letter-spacing: -.005em;
}

/* The mark is fine gold line art. At this size it needs a frame to hold it:
   a warm inset tile that reads as a logo plate rather than a stray graphic. */
.credit-frame {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 6px;
  border-radius: 12px;
  background:
    radial-gradient(130% 130% at 28% 18%, rgba(217, 162, 39, .18), rgba(255, 255, 255, .02) 62%),
    rgba(255, 255, 255, .03);
  border: 1px solid rgba(217, 162, 39, .3);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 4px 14px rgba(0, 0, 0, .35);
  transition: transform 480ms var(--ease-spring), border-color var(--t) var(--ease),
              box-shadow var(--t) var(--ease);
}
.credit-frame img {
  width: 100%; height: auto;
  filter: drop-shadow(0 0 4px rgba(232, 184, 75, .55));
}

a.credit-link:hover .credit-frame,
a.credit-link:focus-visible .credit-frame {
  transform: translateY(-1px) rotate(-3deg);
  border-color: rgba(232, 184, 75, .6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 6px 20px rgba(217, 162, 39, .32);
}

/* A slow highlight crosses the name once every twelve seconds, so the signature
   has a little life without ever competing with the page above it. */
.credit-name {
  background-image: linear-gradient(100deg,
    #E4E9F1 0%, #E4E9F1 43%, var(--gold-400) 50%, #E4E9F1 57%, #E4E9F1 100%);
  background-size: 320% 100%;
  background-position: 130% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: credit-sheen 12s linear infinite;
}
@keyframes credit-sheen {
  0%, 66% { background-position: 130% 0; }
  90%, 100% { background-position: -40% 0; }
}

/* A hairline that draws under the name when the credit is a link. */
.credit-link::after {
  content: ''; position: absolute; left: calc(40px + .65rem); right: 0; bottom: 0;
  height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-600));
  transform: scaleX(0); transform-origin: left;
  transition: transform 440ms var(--ease-out);
}
a.credit-link:hover::after, a.credit-link:focus-visible::after { transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .credit-name { animation: none; background-image: none; color: #E4E9F1; }
}

@media (max-width: 560px) {
  .credit { flex-direction: column; gap: .55rem; }
  .credit-lead { font-size: .7rem; letter-spacing: .13em; }
}
.footer-brand img { height: 44px; filter: brightness(0) invert(1); opacity: .95; }

/* --------------------------------------------------------------------------
   9. Forms
   -------------------------------------------------------------------------- */

.field { display: flex; flex-direction: column; gap: .45rem; }
.field > label, .field-label {
  font-family: var(--font-display);
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--ink-2);
}
.field .hint { font-size: .82rem; color: var(--faint); line-height: 1.5; }
.field .err { font-size: .82rem; color: var(--danger); font-weight: 500; display: none; }
.field.has-error .err { display: block; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.req { color: var(--accent); margin-left: .15em; }

input[type='text'], input[type='email'], input[type='tel'], input[type='url'],
input[type='password'], input[type='date'], input[type='time'], input[type='number'],
input[type='search'], select, textarea {
  width: 100%;
  padding: .82rem 1rem;
  font-size: var(--step-0);
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease);
  appearance: none;
}
textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: var(--muted); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
input::placeholder, textarea::placeholder { color: var(--faint); }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2363718A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 17px;
  padding-right: 2.7rem;
}
[data-theme='dark'] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A1B6' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

.form-grid { display: grid; gap: var(--gap-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.form-grid .span-2 { grid-column: 1 / -1; }

/* Radio and checkbox cards — the primary choice control across the site. */
.choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.choice {
  position: relative;
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
  cursor: pointer;
  transition: all var(--t) var(--ease);
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice .dot {
  flex: none; width: 19px; height: 19px; margin-top: 2px;
  border: 2px solid var(--line-strong); border-radius: 50%;
  background: var(--surface);
  transition: all var(--t) var(--ease-spring);
  display: grid; place-items: center;
}
.choice .dot::after {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent-ink); transform: scale(0);
  transition: transform var(--t) var(--ease-spring);
}
.choice-check .dot { border-radius: 6px; }
.choice-check .dot::after { border-radius: 2px; }
.choice b { display: block; font-family: var(--font-display); font-size: .95rem; font-weight: 600; line-height: 1.3; }
.choice small { display: block; font-size: .8rem; color: var(--muted); margin-top: .15rem; line-height: 1.45; }
.choice:hover { border-color: var(--muted); transform: translateY(-1px); }
.choice:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.choice:has(input:checked) .dot { border-color: var(--accent); background: var(--accent); }
.choice:has(input:checked) .dot::after { transform: scale(1); }
.choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }

.switch { display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.switch input { position: absolute; opacity: 0; }
.switch .track {
  width: 46px; height: 26px; flex: none;
  background: var(--line-strong); border-radius: var(--r-pill);
  position: relative; transition: background-color var(--t) var(--ease);
}
.switch .track::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: #FFF;
  box-shadow: var(--shadow-1);
  transition: transform var(--t) var(--ease-spring);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked + .track::after { transform: translateX(20px); }
.switch input:focus-visible + .track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   10. Feedback: toasts, alerts, spinners
   -------------------------------------------------------------------------- */

.toast-stack {
  position: fixed; z-index: 300;
  right: 1.25rem; bottom: 1.25rem;
  display: flex; flex-direction: column; gap: .6rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .95rem 1.05rem;
  background: var(--surface);
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  animation: toast-in 460ms var(--ease-spring);
}
.toast.is-out { animation: toast-out 260ms var(--ease) forwards; }
.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--danger); }
.toast b { font-family: var(--font-display); font-size: .95rem; display: block; }
.toast p { font-size: .875rem; color: var(--muted); margin-top: .15rem; }
.toast .close { margin-left: auto; color: var(--faint); font-size: 1.1rem; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

.alert {
  display: flex; align-items: flex-start; gap: .8rem;
  padding: 1rem 1.15rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  font-size: .95rem; line-height: 1.6;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 2px; }
.alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 24%, transparent); color: var(--info); }
.alert-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.alert-ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 26%, transparent); color: var(--ok); }
.alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 26%, transparent); color: var(--danger); }
.alert b { font-weight: 600; }

.spinner {
  width: 18px; height: 18px; flex: none;
  border: 2.2px solid color-mix(in srgb, currentColor 28%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.is-loading { position: relative; pointer-events: none; }
.is-loading > * { opacity: .35; }

/* Skeleton placeholder while data loads */
.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-sunken) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
  border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.empty {
  padding: var(--gap-5) var(--gap-4);
  text-align: center;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--r-lg);
  color: var(--muted);
}
.empty svg { width: 40px; height: 40px; margin: 0 auto .8rem; color: var(--faint); }

/* --------------------------------------------------------------------------
   11. Scroll-reveal
   -------------------------------------------------------------------------- */

/* Without scripting the reveal never runs, so it must not hide anything.
   theme.js stamps `.js` on the root before first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 780ms var(--ease-out), transform 780ms var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.js [data-reveal='left']  { transform: translateX(-28px); }
.js [data-reveal='right'] { transform: translateX(28px); }
.js [data-reveal='scale'] { transform: scale(.94); }
.js [data-reveal='none']  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   12. Command palette
   -------------------------------------------------------------------------- */

.palette-scrim {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(7, 12, 21, .55);
  backdrop-filter: blur(6px);
  display: grid; place-items: start center;
  padding: clamp(1rem, 12vh, 9rem) 1rem 1rem;
  opacity: 0; pointer-events: none;
  transition: opacity var(--t) var(--ease);
}
.palette-scrim.is-open { opacity: 1; pointer-events: auto; }
.palette {
  width: min(100%, 620px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  transform: translateY(-14px) scale(.98);
  transition: transform 340ms var(--ease-spring);
}
.is-open .palette { transform: none; }
.palette-input {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid var(--line);
}
.palette-input svg { width: 19px; height: 19px; color: var(--faint); flex: none; }
.palette-input input {
  border: 0; padding: 0; background: none; font-size: 1.05rem;
}
.palette-input input:focus { box-shadow: none; }
.palette-results { max-height: min(52vh, 420px); overflow-y: auto; padding: .5rem; }
.palette-group {
  padding: .7rem .75rem .3rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--faint);
}
.palette-item {
  display: flex; align-items: center; gap: .8rem; width: 100%;
  padding: .68rem .75rem; text-align: left;
  border-radius: var(--r-sm);
  transition: background-color var(--t-fast) var(--ease);
}
.palette-item .pi-ico {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 9px;
  background: var(--surface-2); color: var(--muted);
}
.palette-item .pi-ico svg { width: 16px; height: 16px; }
.palette-item b { font-size: .95rem; font-weight: 600; display: block; }
.palette-item small { font-size: .8rem; color: var(--muted); }
.palette-item[aria-selected='true'] { background: var(--accent-soft); }
.palette-item[aria-selected='true'] .pi-ico { background: var(--accent); color: var(--accent-ink); }
.palette-foot {
  display: flex; gap: 1.1rem; padding: .7rem 1.15rem;
  border-top: 1px solid var(--line); background: var(--surface-2);
  font-size: .78rem; color: var(--muted);
}
.palette-foot kbd {
  font-family: var(--font-mono); font-size: .7rem;
  padding: .1em .4em; border-radius: 4px;
  background: var(--surface); border: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   13. Utility
   -------------------------------------------------------------------------- */

.hidden { display: none !important; }
.mt-1 { margin-top: var(--gap-1); } .mt-2 { margin-top: var(--gap-2); }
.mt-3 { margin-top: var(--gap-3); } .mt-4 { margin-top: var(--gap-4); }
.mt-5 { margin-top: var(--gap-5); } .mt-6 { margin-top: var(--gap-6); }
.mb-3 { margin-bottom: var(--gap-3); } .mb-4 { margin-bottom: var(--gap-4); }
.mb-5 { margin-bottom: var(--gap-5); }
.divider { height: 1px; background: var(--line); border: 0; margin-block: var(--gap-4); }

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* --------------------------------------------------------------------------
   14. Reduced motion — honour the system setting completely
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .mark { background-size: 100% .28em; }
}

@media print {
  .site-header, .site-footer, .announce, .toast-stack, .palette-scrim,
  .progress-bar, .hero-canvas, .btn { display: none !important; }
  body { background: #FFF; color: #000; }
}

/* Nav label swap: the full phrase where there is room (the mobile drawer),
   a shorter one in the tight desktop bar. Declared here, after the mobile-nav
   block above, so source order rather than specificity decides. */
.nav .lbl-long { display: none; }
@media (max-width: 1279px) {
  .nav .lbl-long { display: inline; }
  .nav .lbl-short { display: none; }
}

/* --------------------------------------------------------------------------
   15. Narrow screens
   Grid children default to min-width:auto, so one long unbreakable button
   label can widen the whole track. These rules keep every column honest.
   -------------------------------------------------------------------------- */

.grid > *, .hero-inner > *, .wizard > * { min-width: 0; }

@media (max-width: 560px) {
  .btn { white-space: normal; text-align: center; }
  .btn-lg { font-size: var(--step-0); padding: .95em 1.45em; }
  .hero-actions .btn { width: 100%; }
}

@media (max-width: 520px) {
  .brand-text span { display: none; }
  .brand-text b { font-size: 1.24rem; }
}

@media (max-width: 640px) {
  .announce { padding: .5rem .9rem; gap: .5rem; font-size: .8rem; line-height: 1.45; }
  .announce a { white-space: nowrap; }
  .announce .close { margin-left: .25rem; }
}