/* BSA base: tokens, type, buttons, nav. See DESIGN.md. */

@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-300.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "General Sans"; src: url("../fonts/general-sans-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --navy: #1B4F8A;
  --navy-deep: #153F6F;
  --coral: #F08A8A;
  --white: #FFFFFF;
  --mist: #F8F8FB;
  --blush: #F6ECF2;
  --seafoam: #A3E7E2;
  --rose: #EEC3CF;
  --ink: #16283F;
  --ink-muted: #4A5B72;
  --hairline: rgba(27, 79, 138, 0.16); /* derived navy tint for 1px rules */

  --sans: "General Sans", "Helvetica Neue", Helvetica, sans-serif;
  /* Type: General Sans 500 headlines, 300 large light text, 400 body (DESIGN.md section 3) */
  --w-head: 500;
  --w-lede: 300;
  --track-hero: -0.03em;
  --track-h2: -0.025em;
  --lh-hero: 1.03;

  --fs-hero: 2.75rem;      /* 44px mobile */
  --fs-lede: 1.1875rem;    /* 19px mobile, 24px desktop */
  --fs-h2: 2.125rem;       /* 34px mobile, 56px desktop */
  --fs-body: 1.0625rem;    /* 17px mobile, 18px desktop */
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;   /* 13px small labels */

  --margin: 16px;
  --gutter: 16px;
  --maxw: 1344px;
  --nav-h: 60px;
  --nav-gap: 12px;
}

@media (min-width: 768px) {
  :root { --margin: 32px; --gutter: 24px; }
}
@media (min-width: 1024px) {
  :root {
    --fs-lede: 1.5rem;
    --fs-h2: 3.5rem;
    --fs-body: 1.125rem;
    --margin: 48px;
    --nav-h: 72px;
    --nav-gap: 16px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-kerning: normal;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
p { text-wrap: pretty; } /* no single word left alone on a last line */
a { color: var(--navy); text-decoration-line: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 0.22em; }

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

.skip {
  position: absolute; left: var(--margin); top: -100px; z-index: 100;
  background: var(--navy); color: var(--white); padding: 12px 16px; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--maxw) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }

/* Type */
.display {
  font-weight: var(--w-head);
  font-size: var(--fs-hero);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-hero);
  color: var(--navy);
  text-wrap: balance;
}
.h2 {
  font-weight: var(--w-head);
  font-size: var(--fs-h2);
  line-height: 1.04;
  letter-spacing: var(--track-h2);
  color: var(--navy);
}
.lede {
  font-weight: var(--w-lede);
  font-size: var(--fs-lede);
  line-height: 1.4;
  color: var(--ink);
  max-width: 34ch;
}
.body { max-width: 68ch; }
.small { font-size: var(--fs-small); color: var(--ink-muted); max-width: 68ch; }
/* Small labels (committee numbers, credits): General Sans, the site's one typeface */
.label {
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
  color: var(--ink-muted);
}

/* Buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  border: 2px solid var(--navy); border-radius: 2px;
  font: 400 1rem/1 var(--sans);
  text-decoration: none; white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn--primary { background: var(--navy); color: var(--white); }
.btn--primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); }
/* Solid, never see-through: contour lines run behind buttons */
.btn--secondary { background: var(--bg, var(--white)); color: var(--navy); }
.btn--secondary:hover { border-color: var(--navy-deep); color: var(--navy-deep); background: color-mix(in srgb, var(--navy) 6%, var(--bg, var(--white))); }

/* Navigation: a floating white bar with breathing room above it. It shows over the hero and
   whenever the reader scrolls up, and slides away when they scroll down (hero.js sets
   .nav--hidden). Without JavaScript it simply stays put. */
.nav {
  position: fixed; top: var(--nav-gap); left: 0; right: 0; z-index: 20;
  width: min(calc(100% - 2 * var(--margin)), var(--maxw)); margin-inline: auto;
  height: var(--nav-h);
  background: var(--white); /* solid: contour lines run behind it */
  border: 1px solid var(--hairline); border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav--hidden { transform: translateY(calc(-100% - var(--nav-gap) - 8px)); }
.nav .wrap { height: 100%; max-width: none; padding-inline: 16px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo { display: block; flex: none; line-height: 0; }
.nav__logo img { height: 32px; width: auto; }
.nav__links { display: none; }
.nav__menu {
  font: 400 1rem/1 var(--sans); color: var(--navy);
  background: var(--white); border: 2px solid var(--navy); border-radius: 2px;
  min-height: 44px; padding: 10px 16px; cursor: pointer;
}
.nav__panel {
  position: absolute; top: calc(100% + 8px); left: -1px; right: -1px;
  background: var(--white); border: 1px solid var(--hairline); border-radius: 2px;
  padding: 8px 16px 24px;
}
.nav__panel[hidden] { display: none; }
.nav__panel ul { list-style: none; margin: 0 0 16px; padding: 0; }
.nav__panel a:not(.btn) { display: block; padding: 12px 0; font-size: 1.25rem; font-weight: 300; text-decoration: none; color: var(--navy); }

@media (min-width: 1024px) {
  .nav .wrap { padding-inline: 24px; }
  .nav__logo img { height: 40px; }
  .nav__menu, .nav__panel { display: none !important; }
  .nav__links { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
  .nav__links a:not(.btn) {
    font-size: 1rem; color: var(--navy); text-decoration-color: transparent;
    transition: text-decoration-color 0.2s ease;
  }
  .nav__links a:not(.btn):hover { text-decoration-color: var(--coral); }
  .nav__links .btn { min-height: 44px; padding: 10px 18px; }
}

/* Pause control for the contour drift: a bare pause sign in the header (depths.js shows it and
   swaps it for a play sign). Hidden without motion. */
.motion-toggle {
  display: none; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 2px; background: none; color: var(--navy); cursor: pointer;
}
.motion-toggle.is-live { display: grid; }
.motion-toggle:hover { color: var(--navy-deep); background: color-mix(in srgb, var(--navy) 8%, var(--white)); }
.motion-toggle svg { fill: currentColor; }
.motion-toggle .icon-play { display: none; }
.motion-toggle.is-paused .icon-play { display: block; }
.motion-toggle.is-paused .icon-pause { display: none; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none !important; } }
.nav nav { display: flex; align-items: center; gap: 8px; }
/* The narrowest phones (under 360px): tighter spacing so the logo, pause and Menu fit on one line */
@media (max-width: 359px) {
  .nav .wrap { padding-inline: 12px; gap: 12px; }
  .nav__logo img { height: 28px; }
  .nav__menu { padding-inline: 12px; }
}
@media (min-width: 1024px) { .nav nav { gap: 24px; } }

/* Intro (first visit only; html.intro is set by the inline head script) */
.intro { display: none; }
html.has-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 50;
  background: var(--navy); color: var(--seafoam);
  overflow: hidden;
}
.intro__field { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro__field .rim { color: var(--rose); }
.intro__logo { position: relative; width: min(64vw, 360px); height: auto; }

/* Headline reveal: text is visible unless JS has marked it for reveal */
.reveal-line { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.reveal-line > span { display: block; }
.reveal-pending .reveal-line > span { transform: translateY(105%); }

@media (prefers-reduced-motion: reduce) {
  html.has-intro .intro { display: none; }
  .reveal-pending .reveal-line > span { transform: none; }
  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}