/* ============================================================================
   Team 195 The CyberKnights: design system

   The whole visual language comes from two artifacts the team already owns:

     THE PENNANT.  FRC pays out its wins in literal blue banners. So the banner
     is this site's counting unit: it marks section eyebrows, it flags the
     current nav item, and on the robot archive one pennant is drawn per banner
     actually won that season. Nothing else in the palette is allowed to be
     blue, which keeps the count readable at a glance.

     THE LEDGER.  Twenty-eight seasons, each with a name, a game, a rank and a
     win-loss-tie record. That is a real chronology, so the archive is set as a
     ledger against a rail, not as a card grid, and records are set in tabular
     figures so the columns line up down the page.

   Everything else stays quiet: near-black ground, one violet accent lifted from
   the CyberKnight Invitational mark, and the FIRST colors used ONLY where they
   carry meaning (blue = a banner, gold = a division win, red = the FIRST mark).

   Jost carries display type, Open Sans carries body copy, and data is set in
   the system monospace stack. That last one is a choice, not a shortcut: match
   records are data, the system stack renders them in tabular figures on every
   platform, and it costs no bytes under a CSP that forbids external fonts.
   ========================================================================== */

/* ---- Fonts (self-hosted; strict CSP, no external assets) ----------------- */
/* Both files are variable fonts, so one request covers the whole weight range
   the site uses. Declaring the range in font-weight is what lets the browser
   interpolate instead of synthesising a fake bold. */
@font-face {
  font-family: 'Jost';
  src: url('/assets/fonts/jost-latin.woff2') format('woff2');
  font-weight: 300 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Open Sans';
  src: url('/assets/fonts/open-sans-italic-latin.woff2') format('woff2');
  font-weight: 300 800; font-style: italic; font-display: swap;
}

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Ground: violet-shifted blacks, not neutral greys. The tint is subtle but it
     stops the accent from reading as a sticker dropped onto a gray page. */
  --ink-0: #0A0910;
  --ink-1: #12101C;
  --ink-2: #1A1728;
  --ink-3: #241F38;

  --line:   rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .20);
  --field-bg: rgba(255, 255, 255, .05);
  /* Form-control outline, kept distinct from --line-2 so inputs clear the WCAG
     1.4.11 3:1 non-text minimum without heavying every card border. */
  --field-border: rgba(255, 255, 255, .38);

  /* Brand violet, sampled from the CyberKnight Invitational mark. */
  --violet:      #7E48B3;
  --violet-lift: #B085E8;   /* 6.9:1 on --ink-0: safe for accent TEXT */
  --violet-deep: #4A2A6B;

  /* Ink */
  --white:  #FFFFFF;
  --steel:  #C6CCDA;
  --steel-2: #98A0B4;       /* 7.6:1 on --ink-0 */

  /* FIRST colors. SEMANTIC ONLY. A blue thing on this site is a banner. */
  --banner:     #0088CB;
  --division:   #FFCB05;
  --first-red:  #ED1C24;

  --ok:  #6FE0AE;
  --err: #FF9A94;

  /* Type */
  --font-display: 'Jost', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Open Sans', -apple-system, 'Segoe UI', Roboto, system-ui, sans-serif;
  --font-data:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Radii: shallow. A robot is machined, not rounded. */
  --r-sm: 3px; --r: 5px; --r-lg: 8px; --r-xl: 12px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .40);
  --shadow:    0 16px 38px -16px rgba(0, 0, 0, .70);
  --shadow-lg: 0 36px 70px -28px rgba(0, 0, 0, .80);

  --container: 1180px;
  --gap: clamp(1rem, 2.4vw, 1.6rem);
  --header-h: 4.5rem;
}

/* ---- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: #0A0910;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.55vw + 0.9rem, 1.05rem);
  line-height: 1.68;
  color: var(--steel);
  background: var(--ink-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--violet); color: #fff; }

img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:not(.btn):not(.nav-link):not(.plain):hover { color: var(--violet-lift); }

h1, h2, h3 {
  /* A long unbreakable token must wrap rather than widen the document; body's
     overflow-x:hidden hides that, it does not prevent it. */
  overflow-wrap: break-word;
  font-family: var(--font-display);
  color: var(--white);
  margin: 0 0 .5em;
  line-height: 1.12;
}
h1 { font-size: clamp(2.3rem, 5.6vw, 4rem);   font-weight: 300; letter-spacing: -.015em; }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.5rem); font-weight: 400; letter-spacing: -.01em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-weight: 500; }
h4 {
  font-family: var(--font-body); font-weight: 700; line-height: 1.25;
  color: var(--white); margin: 0 0 .5em; font-size: 1.02rem;
}
p { margin: 0 0 1rem; }
strong, b { font-weight: 700; color: var(--white); }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--violet); color: #fff; padding: .7rem 1.1rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; }

/* ---- The pennant ---------------------------------------------------------
   One shape, three jobs: eyebrow marker, current-page flag, banner tally. The
   notch at the bottom is what makes it read as a hanging banner rather than a
   bookmark or a generic chip. */
.pennant {
  display: inline-block; flex: none;
  width: .58rem; height: 1rem;
  background: var(--banner);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.pennant--violet   { background: var(--violet); }
.pennant--division { background: var(--division); }
.pennant--sm { width: .44rem; height: .78rem; }

/* A row of pennants, one per banner won. */
.pennants { display: inline-flex; gap: .2rem; vertical-align: -.15em; }

/* ---- Layout helpers ------------------------------------------------------ */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.container-wide   { max-width: 1340px; }
.container-narrow { max-width: 760px; }

.section { padding-block: clamp(3.4rem, 7vw, 6rem); }
/* A page hero already carries its own bottom padding, so the first section
   after one would otherwise open with two stacked gaps and a suspiciously
   empty screen. */
.hero--page + .section, .hero--page + .section-sm { padding-top: clamp(1.8rem, 3.5vw, 3rem); }
.section-sm { padding-block: clamp(2.2rem, 4vw, 3.4rem); }
/* Alternating grounds. The site never flips to a light surface: a cream band
   would break the one thing the brand is sure about. */
.section--raise { background: var(--ink-1); }
.section--deep  { background: #06050A; }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-family: var(--font-body); font-weight: 700;
  font-size: .73rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--violet-lift);
  margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ""; flex: none;
  width: .44rem; height: .78rem;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.lede { font-size: clamp(1.06rem, 1.3vw, 1.22rem); color: var(--steel); max-width: 62ch; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }
.center .eyebrow { justify-content: center; }
.stack > * + * { margin-top: 1rem; }
.muted { color: var(--steel-2); }
.accent { color: var(--violet-lift); }

/* Data: records, counts, dates. Tabular figures so columns align down a list. */
.data {
  font-family: var(--font-data);
  font-variant-numeric: tabular-nums;
  font-size: .88em;
  letter-spacing: .01em;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-3); --btn-fg: var(--white); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-body); font-weight: 700; font-size: .88rem;
  letter-spacing: .07em; text-transform: uppercase;
  line-height: 1; text-align: center;
  padding: 1.05em 1.7em; border-radius: var(--r);
  background: var(--btn-bg); color: var(--btn-fg);
  border: 1.5px solid var(--btn-bd); cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { --btn-bg: var(--violet); }
.btn-primary:hover { --btn-bg: #8F55C8; color: #fff; }
.btn-ghost { --btn-bg: transparent; --btn-bd: var(--line-2); color: var(--white); }
.btn-ghost:hover { --btn-bd: var(--violet-lift); color: var(--violet-lift); }
.btn-lg { font-size: .95rem; padding: 1.15em 2.1em; }
.btn-sm { font-size: .78rem; padding: .7em 1.1em; }
.btn-block { display: flex; width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.center .btn-row { justify-content: center; }
/* An arrow that nudges: the only hover flourish on the site. */
.btn .arw { transition: transform .18s ease; }
.btn:hover .arw { transform: translateX(3px); }

/* ---- Cards --------------------------------------------------------------- */
.card {
  background: var(--ink-2); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(1.3rem, 2.4vw, 1.9rem);
}
.card--link { transition: border-color .2s ease, background-color .2s ease; }
a.card--link { color: inherit; display: block; }
a.card--link:hover { border-color: var(--violet); background: var(--ink-3); color: inherit; }

.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* Split: text beside a picture, reversing on request. */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; }
.split--wide-media { grid-template-columns: .9fr 1.1fr; }
.split__media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); }
@media (max-width: 860px) {
  .split, .split--wide-media { grid-template-columns: 1fr; }
  .split--flip .split__media { order: -1; }
}

/* ---- Header / nav -------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(10, 9, 16, .88);
  backdrop-filter: saturate(1.3) blur(12px);
  -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--line);
  color: #fff;
}
.site-header__inner { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }

.brand { display: inline-flex; align-items: center; gap: .6rem; color: #fff; flex: none; }
.brand:hover { color: #fff; }
.brand__mark { width: 2.3rem; height: 2.3rem; flex: none; border-radius: var(--r-sm); }
.brand__word {
  display: flex; flex-direction: column; line-height: 1;
  font-family: var(--font-display);
}
.brand__word b { font-weight: 500; font-size: 1.06rem; letter-spacing: .14em; color: #fff; }
.brand__word span {
  font-weight: 300; font-size: .72rem; letter-spacing: .1em;
  color: var(--steel-2); margin-top: .22rem;
}
.brand:hover .brand__word span { color: var(--violet-lift); }

.nav { display: flex; align-items: center; gap: .05rem; margin-left: auto; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-weight: 600; font-size: .88rem; color: var(--steel);
  padding: .5rem .6rem; border-radius: var(--r-sm);
  transition: color .15s ease;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; }
/* Current page flies a pennant. Nothing else in the header is blue. */
.nav-link[aria-current="page"], .nav-item--here > .nav-link { color: #fff; }
.nav-link[aria-current="page"]::before,
.nav-item--here > .nav-link::before {
  content: ""; flex: none; width: .34rem; height: .6rem;
  background: var(--banner);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}
.nav-caret { width: .5rem; height: .5rem; flex: none; opacity: .6; }

/* Submenus open on hover AND on focus-within, so a keyboard reaches them with
   no JS and no aria-expanded state to keep in sync. */
.nav-sub {
  position: absolute; top: 100%; left: 0; min-width: 15rem;
  background: var(--ink-2); border: 1px solid var(--line-2);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: .4rem; margin: 0; list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.nav-item:hover > .nav-sub,
.nav-item:focus-within > .nav-sub {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s;
}
.nav-sub a {
  display: block; padding: .55rem .7rem; border-radius: var(--r-sm);
  font-size: .88rem; font-weight: 600; color: var(--steel);
}
.nav-sub a:hover { background: var(--ink-3); color: #fff; }
.nav-sub a[aria-current="page"] { color: var(--violet-lift); }

.nav__cta { margin-left: .5rem; }

.nav-toggle {
  display: none; margin-left: auto; width: 2.8rem; height: 2.8rem;
  border: 1px solid var(--line-2); background: transparent;
  border-radius: var(--r-sm); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 1.15rem; height: 2px; background: #fff;
  border-radius: 2px; position: relative; transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 1120px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0; flex-direction: column; align-items: stretch;
    gap: .1rem; margin: 0; padding: 1rem clamp(1.1rem, 4vw, 2rem) 1.6rem;
    background: var(--ink-1); border-bottom: 1px solid var(--line-2);
    box-shadow: var(--shadow-lg); transform: translateY(-140%); transition: transform .28s ease;
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { transform: translateY(0); }
  /* Keyboard fallback with no JS: focusing a link reveals the menu. */
  html:not(.js) .nav:focus-within { transform: translateY(0); }
  /* With JS active, take the closed menu out of the tab order so it matches
     aria-expanded="false". Visibility is delayed so the close still animates. */
  html.js .nav { visibility: hidden; transition: transform .28s ease, visibility 0s linear .28s; }
  html.js .nav[data-open="true"] { visibility: visible; transition: transform .28s ease, visibility 0s; }
  .nav-link { padding: .8rem .5rem; font-size: 1.02rem; }
  .nav-caret { display: none; }
  /* Off-canvas: children are always visible and indented, rather than a
     second tap target that has to be opened. */
  .nav-sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 .4rem .9rem; margin: 0 0 .3rem;
    border-left: 1px solid var(--line-2); border-radius: 0;
    transition: none;
  }
  .nav-sub a { padding: .6rem .5rem; }
  .nav__cta { margin: .8rem 0 0; }
  .nav .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ---- Announcement strip -------------------------------------------------- */
.announce {
  background: var(--violet-deep); color: #F2E9FB;
  text-align: center; font-weight: 600; font-size: .9rem;
  padding: .55rem 1rem; line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: #06050A; color: #fff; }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 9, 16, .74) 0%, rgba(10, 9, 16, .55) 45%, rgba(10, 9, 16, .96) 100%),
    linear-gradient(90deg, rgba(74, 42, 107, .40) 0%, transparent 60%);
}
.hero > .container { position: relative; z-index: 1; }
.hero--home { min-height: max(560px, calc(100svh - var(--chrome-h, 4.5rem))); display: grid; align-items: center; padding-block: clamp(3rem, 7vw, 5rem); }
.hero--page { padding-block: clamp(2.6rem, 5vw, 4.2rem); }
.hero h1, .hero h2 { color: #fff; }

/* The wordmark. Jost Light at display size, with the team number given its own
   line and optical size so "195" reads as the identifier it is in FRC. */
.wordmark { margin: 0 0 1.2rem; }
.wordmark__num {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(3.4rem, 11vw, 7.5rem); line-height: .9;
  letter-spacing: -.02em; color: #fff;
}
.wordmark__name {
  display: block; font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.2rem, 3.2vw, 2rem); letter-spacing: .16em;
  text-transform: uppercase; color: var(--violet-lift); margin-top: .5rem;
}

/* The record strip: derived from the archive, never typed. One line, mono,
   rule-separated. Deliberately NOT three big stat cards. */
.record-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.1rem; margin: 1.6rem 0 0; padding: 0; list-style: none;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: .82rem; letter-spacing: .04em; color: var(--steel-2);
  text-transform: uppercase;
}
.record-strip li { display: flex; align-items: baseline; gap: .45rem; }
.record-strip li + li { padding-left: 1.1rem; border-left: 1px solid var(--line-2); }
/* Once the strip wraps, the divider on the first item of a new line hangs in
   space with nothing to its left. Below this width the gap does the separating. */
@media (max-width: 700px) {
  .record-strip { gap: .45rem 1.3rem; }
  .record-strip li + li { padding-left: 0; border-left: 0; }
}
.record-strip b { color: #fff; font-weight: 600; font-size: 1.05rem; }

/* ---- Notice cards (scheduled home call-outs) ----------------------------- */
.notices { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: clamp(2rem, 4vw, 3rem); }
.notice {
  background: rgba(26, 23, 40, .82);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.notice h2 { font-size: 1.3rem; font-weight: 500; margin: 0; }
.notice p { margin: 0; color: var(--steel); font-size: .96rem; }
.notice .btn { align-self: flex-start; margin-top: .6rem; }

/* ---- The ledger (robot archive) ------------------------------------------
   A rail down the left with the year as the marker, banners flown beside it.
   Grid rather than flex so every year column lines up regardless of how long
   the robot name runs. */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger__row {
  display: grid;
  grid-template-columns: 5.5rem 1fr minmax(0, 22rem);
  gap: clamp(1rem, 3vw, 2.4rem);
  padding: clamp(1.6rem, 3vw, 2.4rem) 0;
  border-top: 1px solid var(--line);
}
.ledger__row:first-child { border-top: 0; }
.ledger__year {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.ledger__banners { display: flex; flex-wrap: wrap; gap: .2rem; margin-top: .7rem; min-height: 1rem; }
.ledger__nobanner { font-family: var(--font-data); font-size: .72rem; color: var(--steel-2); }
.ledger__name { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.3rem, 2.4vw, 1.75rem); color: #fff; margin: 0 0 .5rem; }
.ledger__meta {
  display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin: 0 0 1rem; padding: 0; list-style: none;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: .8rem; color: var(--steel-2);
}
.ledger__meta b { color: var(--steel); font-weight: 600; }
.ledger__media img { width: 100%; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--ink-1); }
@media (max-width: 900px) {
  .ledger__row { grid-template-columns: 4rem 1fr; }
  .ledger__media { grid-column: 1 / -1; max-width: 22rem; }
  .ledger__banners { flex-direction: row; }
}

/* Highlight bullets: a pennant-free list, because not every line is a win. */
.hl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.hl-list li { position: relative; padding-left: 1.15rem; font-size: .95rem; color: var(--steel); }
.hl-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .4rem; height: 1px; background: var(--violet-lift);
}

/* ---- Sponsors ------------------------------------------------------------ */
.sponsor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.sponsor {
  background: var(--ink-1); display: grid; place-items: center;
  padding: 1.8rem 1.4rem; min-height: 8.5rem;
  transition: background-color .2s ease;
}
a.sponsor:hover { background: var(--ink-3); }
/* Sponsor logos come as they come. Most are white-on-transparent and read on
   the dark tile; the few that are dark-on-transparent get a light panel, which
   is honest to the brand and beats recolouring somebody else's mark. */
.sponsor--light { background: #EDEDF3; }
a.sponsor--light:hover { background: #FFFFFF; }
.sponsor img { max-height: 3.4rem; width: auto; max-width: 100%; object-fit: contain; }
.sponsor__name {
  font-family: var(--font-display); font-weight: 400; font-size: 1rem;
  color: var(--steel); text-align: center; letter-spacing: .02em;
}
/* Supporters: names only, set as a dense column list rather than empty boxes. */
.supporters {
  columns: 3 15rem; column-gap: 2rem; list-style: none; margin: 0; padding: 0;
}
.supporters li {
  break-inside: avoid; padding: .4rem 0; font-size: .95rem;
  border-bottom: 1px solid var(--line); color: var(--steel);
}

/* ---- Media cards (video links; the CSP forbids embeds) ------------------- */
.media-card {
  display: flex; flex-direction: column; gap: .55rem;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 1.2rem 1.3rem 1.4rem; color: inherit;
  transition: border-color .2s ease, background-color .2s ease;
}
a.media-card:hover { border-color: var(--violet); background: var(--ink-3); color: inherit; }
.media-card__kind {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-data); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--violet-lift);
}
.media-card__kind::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: .5rem solid currentColor;
  border-top: .32rem solid transparent; border-bottom: .32rem solid transparent;
}
.media-card h3 { margin: 0; font-size: 1.1rem; }
.media-card p { margin: 0; font-size: .93rem; color: var(--steel-2); }
.media-card__meta { margin-top: auto; padding-top: .6rem; font-family: var(--font-data); font-size: .76rem; color: var(--steel-2); }

/* Document links (PDFs) get a page-corner glyph rather than a play triangle. */
.doc-card__kind::before {
  content: ""; width: .55rem; height: .7rem; flex: none;
  border: 1.5px solid currentColor; border-radius: 1px;
  clip-path: polygon(0 0, 65% 0, 100% 30%, 100% 100%, 0 100%);
  background: transparent;
}

/* ---- Forms --------------------------------------------------------------- */
.field { margin-bottom: 1rem; position: relative; }
.field label { display: block; font-weight: 700; font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--steel-2); margin-bottom: .45rem; }
.input, .textarea, .select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--white);
  padding: .8em 1em; background: var(--field-bg);
  border: 1px solid var(--field-border); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
.select option { color: #16151d; background: #fff; }
.input::placeholder, .textarea::placeholder { color: var(--steel-2); opacity: 1; }
.input:focus, .textarea:focus, .select:focus {
  outline: none; border-color: var(--violet-lift);
  box-shadow: 0 0 0 3px rgba(176, 133, 232, .25);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible { outline: 3px solid var(--violet-lift); outline-offset: 1px; }
.textarea { min-height: 8rem; resize: vertical; }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--steel-2); margin: .7rem 0 0; }
.form-msg { margin-top: .8rem; font-weight: 600; min-height: 1.4em; }
.form-msg.is-ok  { color: var(--ok); }
.form-msg.is-err { color: var(--err); }

/* Inline "did you mean ...?" hint (site.js, non-blocking). It stays IN FLOW and
   its line is permanently reserved with min-height + visibility, so showing it
   never reflows the form and shoves the submit button out from under a click. */
.field-hint {
  margin: .3rem 0 0; font-size: .85rem; line-height: 1.35; color: var(--steel);
  min-height: 1.35em; visibility: hidden;
}
.field-hint.is-shown { visibility: visible; }
.field-hint .link-btn {
  background: none; border: 0; font: inherit; font-weight: 700;
  padding: .55em .15em; margin: -.55em 0;   /* a real tap target for the correction */
  color: var(--violet-lift); text-decoration: underline; cursor: pointer;
}

.panel {
  background:
    radial-gradient(120% 130% at 100% 0%, rgba(126, 72, 179, .22), transparent 58%),
    var(--ink-2);
  border: 1px solid var(--line-2); border-radius: var(--r-xl);
  padding: clamp(1.5rem, 4vw, 2.8rem);
}

/* ---- Alerts -------------------------------------------------------------- */
.alert { padding: .9rem 1.1rem; border-radius: var(--r); font-weight: 600; border: 1px solid; }
.alert-ok  { background: rgba(111, 224, 174, .12); color: var(--ok);  border-color: rgba(111, 224, 174, .4); }
.alert-err { background: rgba(255, 154, 148, .12); color: var(--err); border-color: rgba(255, 154, 148, .4); }

/* ---- Lists, tables, FAQ -------------------------------------------------- */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
/* The tick is absolutely positioned, not a flex sibling: with display:flex on
   the li, any inline element inside the text (a link, a <b>) becomes its own
   flex item and the sentence renders as side-by-side columns. */
.checklist li { position: relative; padding-left: 2rem; }
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: .55rem; height: .95rem;
  background: var(--violet);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 70%, 0 100%);
}

.spec { width: 100%; border-collapse: collapse; }
.spec th, .spec td { text-align: left; padding: .75rem .3rem; border-bottom: 1px solid var(--line); vertical-align: baseline; }
.spec th { color: var(--steel-2); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; width: 40%; }
.spec td { font-weight: 600; color: var(--white); }
.table-scroll { overflow-x: auto; }

.faq { display: grid; gap: .6rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink-2); }
.faq summary {
  cursor: pointer; padding: 1rem 1.2rem; font-weight: 600; color: var(--white);
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--violet-lift); font-weight: 400; font-size: 1.5rem; line-height: 1; }
/* Multiplication sign, not a dash: U+2013 is a banned character (see CLAUDE.md)
   and a CSS escape still renders one to the visitor. */
.faq details[open] summary::after { content: "\00d7"; }
.faq details > div { padding: 0 1.2rem 1.1rem; color: var(--steel); max-width: 72ch; }
.faq details > div > :last-child { margin-bottom: 0; }

/* ---- Prose --------------------------------------------------------------- */
.prose { max-width: 72ch; }
.prose h2 { margin-top: 2.4rem; }
.prose h3 { margin-top: 1.7rem; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li { margin-bottom: .45rem; }
.prose a { color: var(--violet-lift); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer {
  background: #06050A; color: var(--steel-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.8rem, 5vw, 4rem) 2rem;
}
.site-footer a { color: var(--steel); }
.site-footer a:hover { color: var(--violet-lift); }
.footer-top { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; }
.footer-brand .brand { color: #fff; }
.footer-brand p { color: var(--steel-2); max-width: 34ch; margin-top: 1rem; font-size: .92rem; }
.footer-addr { font-style: normal; font-size: .9rem; color: var(--steel-2); margin-top: .8rem; line-height: 1.6; }
.footer-col h2 {
  font-family: var(--font-body); font-size: .72rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--steel-2); margin: 0 0 .9rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-col a { font-weight: 500; font-size: .92rem; }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
  margin-top: 2.8rem; padding-top: 1.5rem; border-top: 1px solid var(--line);
  font-size: .85rem;
}
.footer-social { display: flex; gap: .5rem; }
.footer-social a {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem;
  border: 1px solid var(--line-2); border-radius: var(--r);
}
.footer-social a:hover { border-color: var(--violet-lift); }
.footer-social svg { width: 1.15rem; height: 1.15rem; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-top { grid-template-columns: 1fr; } .supporters { columns: 1; } }

/* ---- Utilities ----------------------------------------------------------- */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.6rem}.mt-4{margin-top:2.6rem}
.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.6rem}
.hide{display:none!important}
.flow > * + * { margin-top: clamp(2.4rem, 5vw, 4rem); }
.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;
}

/* ---- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .card--link, .media-card, .sponsor { transition: none; }
  .btn:active { transform: none; }
}

/* Once a CTA pair wraps, keep the buttons equal width instead of two staggered
   pills of different lengths. */
@media (max-width: 480px) {
  .hero .btn-row, .center .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn-row .btn, .center .btn-row .btn { width: 100%; }
}

/* The home hero asks for one screenful, but the header AND the announcement
   strip sit above it, and the strip wraps to two lines on a phone. site.js
   measures the real chrome height into --chrome-h so the hero subtracts the
   truth rather than a hardcoded value. */