globals.css

@import "tailwindcss";

/* =============================================================================
   MSAIL design tokens  ·  "Rectified Light"
   A white optical bench. SINGLE LIGHT THEME.

   The homepage's live rectified-flow figure supplies the page's saturated
   color; everything around it is navy ink on cool white. Depth comes from
   navy-tinted hairlines + layered navy-tinted shadows (never pure black),
   and liquid glass exists ONLY where the simulation shines through it
   (nav, canvas HUD chips, one hero pill). Interior surfaces are honest
   solids. Maize is a fill color, never thin text on white.

   Type: Satoshi, and only Satoshi (variable 300 to 900; headings 600, the
   wordmark at 900 wearing the sunset gradient).
   Edit DESIGN here; content lives in src/data.
   ============================================================================= */

@theme inline {
  --font-sans: var(--font-satoshi), ui-sans-serif, system-ui, -apple-system, sans-serif;
}

@theme {
  /* --- Grounds. Two planes only: white and one navy-tinted near-white. ---- */
  --color-page: #ffffff;
  --color-tile: #f5f7f9; /* ≈ color-mix(in srgb, #00274C 4%, white) */
  --color-well: #fcfdff; /* embedded figure / canvas wells */

  /* --- Michigan navy: the display ink AND the structural fill ------------- */
  --color-navy: #00274c;
  --color-navy-soft: #16395e; /* lifted navy: hover on navy fields */

  /* --- Michigan maize: fills only (1.57:1 on white — never thin text) ----- */
  --color-maize: #ffcb05;
  --color-maize-deep: #f0b400; /* maize hover/pressed */
  --color-gold-ink: #8a6d00; /* the rare gold-colored word (4.6:1 on white) */

  /* --- Ink scale on white -------------------------------------------------- */
  --color-ink: #1a2733; /* body text; #000 is banned */
  --color-ink-2: #5b6770; /* secondary */
  --color-ink-3: #8a94a0; /* captions, whispering */
  --color-on-navy: #eaf0f6;
  --color-on-navy-muted: #9db4cb;

  /* --- Lines: always navy-tinted, never neutral gray ----------------------- */
  --color-border: rgba(0, 39, 76, 0.1);
  --color-border-strong: rgba(0, 39, 76, 0.22);
  --color-border-on-navy: rgba(234, 240, 246, 0.16);

  /* --- Signals ------------------------------------------------------------- */
  --color-ring: #00274c;
  --color-selection-bg: #ffcb05;
  --color-selection-fg: #00274c;

  /* --- Type ramp. Tracking follows the measured Apple curve: positive at
         small sizes, crossing zero near 40px, negative at display sizes. --- */
  --text-meta: 0.8125rem; /* 13px — mono metadata, captions */
  --text-meta--line-height: 1.5;
  --text-meta--letter-spacing: 0.01em;

  --text-label: 0.9375rem; /* 15px — UI labels, nav */
  --text-label--line-height: 1.35;
  --text-label--font-weight: 500;
  --text-label--letter-spacing: 0.002em;

  --text-body: 1.0625rem; /* 17px — Satoshi body */
  --text-body--line-height: 1.47;
  --text-body--letter-spacing: -0.008em;

  --text-lead: 1.3125rem; /* 21px — page leads */
  --text-lead--line-height: 1.5;
  --text-lead--letter-spacing: -0.008em;

  --text-h4: 1.375rem; /* 22px — Satoshi 600 card/list titles */
  --text-h4--line-height: 1.25;
  --text-h4--font-weight: 600;
  --text-h4--letter-spacing: 0.005em;

  --text-h3: 1.75rem; /* 28px — serif 400 section heads */
  --text-h3--line-height: 1.2;
  --text-h3--font-weight: 600;
  --text-h3--letter-spacing: -0.008em;

  --text-h2: clamp(1.875rem, 3.2vw + 1rem, 2.5rem); /* 40px — serif 400 */
  --text-h2--line-height: 1.12;
  --text-h2--font-weight: 600;
  --text-h2--letter-spacing: -0.012em;

  --text-h1: clamp(2.375rem, 5.5vw, 3.5rem); /* serif 400 page titles */
  --text-h1--line-height: 1.08;
  --text-h1--font-weight: 600;
  --text-h1--letter-spacing: -0.018em;

  --text-display: clamp(2.75rem, 6.5vw, 4.75rem); /* homepage only */
  --text-display--line-height: 1.05;
  --text-display--font-weight: 600;
  --text-display--letter-spacing: -0.022em;

  /* --- Rhythm (8px base) --------------------------------------------------- */
  --spacing-gutter: 1.5rem;
  --spacing-section: 8rem;
  --spacing-section-sm: 4.5rem;

  --container-page: 72rem;
  --container-bleed: 88rem;
  --container-prose: 42rem;
  --max-width-prose: initial;

  /* --- Radius ramp: grows with element size -------------------------------- */
  --radius-sm: 6px; /* small controls */
  --radius-md: 10px; /* inputs, chips */
  --radius-lg: 18px; /* cards */
  --radius-xl: 28px; /* hero media, glass card */

  /* --- Shadows: 2–3 layers, blur ≈ 2× offset, navy-tinted, alpha ≤ .08 ---- */
  --shadow-card:
    0 1px 1px rgba(0, 39, 76, 0.02), 0 4px 8px rgba(0, 39, 76, 0.04),
    0 16px 32px rgba(0, 39, 76, 0.06);
  --shadow-pop:
    0 1px 1px rgba(0, 39, 76, 0.02), 0 4px 8px rgba(0, 39, 76, 0.04),
    0 16px 32px rgba(0, 39, 76, 0.06), 0 24px 48px rgba(0, 39, 76, 0.08);

  /* --- Motion: functional states only -------------------------------------- */
  --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* =============================================================================
   Base layer
   ============================================================================= */
@layer base {
  :root {
    color-scheme: light;
  }

  *,
  ::before,
  ::after {
    border-color: var(--color-border);
  }

  html {
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    scrollbar-gutter: stable;
    /* No elastic gap in Chromium: the root refuses to rubber-band at all. */
    overscroll-behavior: none;
    /* Engines that still bounce (Safari) reveal this: a real blue, not
       something that reads as white. */
    /* Every page now opens AND closes on the ink ground, so anything that
       peeks past the document edges (iOS rubber-band, which ignores
       overscroll-behavior) must be night, not day. */
    background-color: #04223f;
  }

  /* Rubber-band armor: fixed strips parked just beyond the viewport. When
     macOS elastic overscroll translates the page, these ride into view, so
     the bounce shows the theme's edge colors instead of the base color. */
  html::before,
  html::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 40vh;
    z-index: -2;
    pointer-events: none;
  }
  html::before {
    top: -40vh;
    background: linear-gradient(135deg, #06294d, #04223f 60%);
  }
  html::after {
    bottom: -40vh;
    background: linear-gradient(135deg, #03203f, #021833);
  }

  body {
    position: relative; /* anchors the ::before resin field to the document */
    overscroll-behavior: none;
    background-color: transparent;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--text-body);
    line-height: 1.47;
    letter-spacing: -0.008em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* The resin field: washes anchored to the DOCUMENT (they scroll away with
     the page, new ones surfacing as you go). Laid down the page at irregular
     intervals, alternating sides, with occasional hue swaps so no two screens
     repeat. Sections with their own background paint over it locally; pages
     shorter than the sequence simply crop it. */
  body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(860px 660px at 15% -60px, rgba(43, 108, 176, 0.75), transparent 64%),
      radial-gradient(820px 620px at 85% -40px, rgba(255, 203, 5, 0.8), transparent 62%),
      radial-gradient(1050px 560px at 50% -100px, rgba(63, 191, 212, 0.48), transparent 66%),
      radial-gradient(760px 640px at 4% 420px, rgba(169, 198, 232, 0.65), transparent 70%),
      radial-gradient(740px 620px at 96% 480px, rgba(242, 223, 160, 0.68), transparent 70%),
      radial-gradient(1080px 740px at 50% 420px, rgba(43, 108, 176, 0.45), transparent 70%),
      radial-gradient(860px 620px at 58% 620px, rgba(63, 191, 212, 0.3), transparent 70%),
      radial-gradient(840px 680px at 8% 1050px, rgba(63, 191, 212, 0.52), transparent 68%),
      radial-gradient(780px 640px at 94% 1200px, rgba(255, 203, 5, 0.58), transparent 66%),
      radial-gradient(860px 720px at 3% 1900px, rgba(43, 108, 176, 0.6), transparent 68%),
      radial-gradient(740px 620px at 97% 2150px, rgba(242, 223, 160, 0.62), transparent 70%),
      radial-gradient(820px 680px at 12% 2800px, rgba(255, 203, 5, 0.55), transparent 66%),
      radial-gradient(840px 680px at 90% 3100px, rgba(43, 108, 176, 0.58), transparent 68%),
      radial-gradient(780px 640px at 6% 3900px, rgba(63, 191, 212, 0.5), transparent 68%),
      radial-gradient(800px 660px at 94% 4200px, rgba(255, 203, 5, 0.6), transparent 66%),
      radial-gradient(860px 680px at 20% 4900px, rgba(169, 198, 232, 0.58), transparent 70%),
      radial-gradient(820px 660px at 80% 5300px, rgba(242, 223, 160, 0.65), transparent 68%),
      radial-gradient(760px 600px at 10% 5900px, rgba(43, 108, 176, 0.45), transparent 68%),
      radial-gradient(720px 580px at 88% 6300px, rgba(255, 203, 5, 0.5), transparent 66%),
      radial-gradient(800px 620px at 30% 6900px, rgba(63, 191, 212, 0.4), transparent 68%),
      linear-gradient(160deg, #dfe9f8 0%, #e9eef5 30%, #f2edda 68%, #f7ecca 100%);
  }

  ::selection {
    background-color: var(--color-selection-bg);
    color: var(--color-selection-fg);
  }

  :focus-visible {
    outline: 2px solid var(--color-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }

  /* On navy fields the navy focus ring is invisible; switch it to maize. */
  .navy-field :focus-visible,
  .ground-ink :focus-visible {
    outline-color: var(--color-maize);
  }

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

  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 39, 76, 0.28) transparent;
  }
  ::-webkit-scrollbar {
    width: 11px;
    height: 11px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 39, 76, 0.28);
    border-radius: 999px;
    border: 3px solid var(--color-page);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
}

/* =============================================================================
   Design-language utilities
   ============================================================================= */

/* Display voice: the same Satoshi as body, at heading weight — one voice
   site-wide. */
@utility font-display {
  font-family: var(--font-sans);
  font-weight: 600;
  font-synthesis: none;
}

/* A full navy color-block ("ink island"): the page's dark mass. */
@utility navy-field {
  background-color: var(--color-navy);
  color: var(--color-on-navy);
}

/* Centered measure + responsive gutters. */
@utility container-page {
  width: 100%;
  max-width: var(--container-page);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* Wider bleed frame for the hero + shell chrome. */
@utility container-bleed {
  width: 100%;
  max-width: var(--container-bleed);
  margin-inline: auto;
  padding-inline: var(--spacing-gutter);
}

/* =============================================================================
   Liquid glass. Budget (hard cap): the nav bar, the hero's secondary pill,
   and the simulation HUD chips/card. Interior surfaces stay solid.
   ============================================================================= */

/* The floating island nav: one glass capsule, detached from the page edges
   (the Dynamic Island grammar). The wet look is three layers: a nearly-clear
   fill with heavy saturation of whatever is behind it, a directional specular
   streak (::before, one implied light source), and a faint prismatic rim
   (::after) — refraction at the bezel, not frosted resin. */
.glass-island {
  position: relative;
  isolation: isolate;
  background: rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.06), 0 10px 30px rgba(0, 39, 76, 0.12),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -8px rgba(0, 39, 76, 0.18);
  transition:
    background-color 150ms linear,
    border-color 350ms ease,
    box-shadow 350ms ease;
}
.glass-island[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.14);
}
.glass-island::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(100deg, transparent 6%, rgba(255, 255, 255, 0.6) 16%, transparent 30%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 48%);
}
.glass-island::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(43, 108, 176, 0.35),
    rgba(123, 95, 214, 0.28) 30%,
    rgba(199, 93, 138, 0.26) 50%,
    rgba(232, 115, 78, 0.26) 66%,
    rgba(255, 203, 5, 0.32)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* Pill button material (the hero's secondary CTA). Same wet stack, smaller. */
.glass-pill {
  position: relative;
  isolation: isolate;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(16px) saturate(190%);
  backdrop-filter: blur(16px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.1), 0 6px 18px rgba(0, 39, 76, 0.1),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -5px 10px -6px rgba(0, 39, 76, 0.16);
  transition: background-color 120ms var(--ease-out);
}
.glass-pill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(43, 108, 176, 0.3),
    rgba(123, 95, 214, 0.24) 35%,
    rgba(232, 115, 78, 0.24) 68%,
    rgba(255, 203, 5, 0.28)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.glass-pill:hover {
  background: rgba(255, 255, 255, 0.18);
}
.glass-pill:active {
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.1), inset 0 1px 3px rgba(0, 39, 76, 0.1);
}

/* Small chips sitting ON the simulation canvas (dataset switcher). */
.glass-chip {
  border-radius: 999px;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.002em;
  color: var(--color-navy);
  background: rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  backdrop-filter: blur(14px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.08), 0 4px 12px rgba(0, 39, 76, 0.07),
    inset 0 1px 1px rgba(255, 255, 255, 0.95),
    inset 0 -3px 6px -4px rgba(0, 39, 76, 0.14);
  transition: background-color 120ms var(--ease-out);
  cursor: pointer;
}
.glass-chip:hover {
  background: rgba(255, 255, 255, 0.78);
}
.glass-chip[aria-pressed="true"] {
  background: var(--color-navy);
  color: #fff;
  border-color: var(--color-navy);
}
/* The active chip carries the one maize mark in the HUD. */
.glass-chip[aria-pressed="true"]::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--color-maize);
  vertical-align: 0.06em;
}

/* The one glass card (hero HUD caption). */
.glass-card {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(26px) saturate(185%);
  backdrop-filter: blur(26px) saturate(185%);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 12px 40px rgba(0, 39, 76, 0.12), 0 2px 6px rgba(0, 39, 76, 0.06),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -8px rgba(0, 39, 76, 0.16);
}
.glass-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  background: linear-gradient(
    115deg,
    rgba(43, 108, 176, 0.28),
    rgba(123, 95, 214, 0.22) 34%,
    rgba(199, 93, 138, 0.2) 52%,
    rgba(255, 203, 5, 0.26) 70%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

/* The caption card's ink-ground cut: same glass, smoked. Declared after
   .glass-card so the shared class order settles the override. */
.glass-card-ink {
  background: rgba(2, 20, 40, 0.35);
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow:
    0 12px 40px rgba(0, 8, 18, 0.4), 0 2px 6px rgba(0, 8, 18, 0.2),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.28),
    inset 0 -8px 14px -8px rgba(0, 8, 18, 0.4);
  transition: background-color 250ms linear;
}
/* While the transport animates beneath it, the HUD's backdrop blur would
   re-rasterize every frame (~8fps of budget); it runs near-opaque instead
   and gets its glass back the moment the M lands. */
.glass-card-ink[data-playing="true"] {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(3, 26, 50, 0.82);
}

/* Fallback ladder: no backdrop-filter → near-opaque; reduced transparency
   preference → same. */
@supports not (backdrop-filter: blur(1px)) {
  .glass-island,
  .glass-pill,
  .glass-chip,
  .glass-card {
    background: rgba(255, 255, 255, 0.94);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .glass-island,
  .glass-pill,
  .glass-chip,
  .glass-card {
    background: rgba(255, 255, 255, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* =============================================================================
   One-off devices, each allowed exactly once per page.
   ============================================================================= */

/* The wordmark's fill: the same sunset walk the Block M wears, clipped into
   the varsity letterforms. */
.wordmark-gradient {
  filter: drop-shadow(0 0.5px 1px rgba(0, 39, 76, 0.18));
  background-image: linear-gradient(
    90deg,
    #00274c,
    #154a86 18%,
    #2b6cb0 32%,
    #7b5fd6 45%,
    #c75d8a 55%,
    #e8734e 65%,
    #f0a000 80%,
    #ffcb05
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The glass cut of the wordmark: the sunset walk lightened toward frost,
   with a white top-light sheen clipped into the letterforms — quiet next to
   the saturated grain M, unmistakably the same colors. */
.wordmark-glass {
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.03) 52%, rgba(255, 255, 255, 0.1)),
    linear-gradient(
      90deg,
      #264767,
      #386598 18%,
      #4b82bc 32%,
      #8f77dc 45%,
      #cf759c 55%,
      #eb8869 65%,
      #f2ae26 80%,
      #ffd32a
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The shared specular streak is cut for the wide nav bar; on the much
   narrower hero island the same percentage stops paint a band as wide as the
   wordmark itself. This modifier pulls the highlight into a tighter sliver. */
.glass-island-tight {
  overflow: hidden; /* the blurred streak must not spill past the capsule */
}
.glass-island-tight::before {
  filter: blur(6px);
  background:
    linear-gradient(100deg, transparent 6%, rgba(255, 255, 255, 0.5) 15%, transparent 25%),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent 48%);
}

/* While the M is forming, every backdrop-filtered island over the hero
   canvas would re-rasterize its blur on each animation frame (two full blur
   passes per frame at phone DPR). They run near-opaque for those seconds;
   the engine restores the glass a beat after landing. */
html[data-m-forming="true"] .glass-island {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: rgba(4, 28, 54, 0.88);
}

/* On ink grounds the island glass runs quieter: white glare and white rim
   both read as smudges on navy, so the streak goes entirely and the sunset
   ::after edge draws the capsule alone. Applies to the nav while it floats
   over an ink band (data-ink) and to islands that live on ink. */
.glass-island[data-ink="true"],
.glass-island-ink {
  border-color: transparent;
  box-shadow:
    0 10px 30px rgba(0, 8, 18, 0.35),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.3),
    inset 0 -8px 14px -8px rgba(0, 8, 18, 0.3);
}
/* The nav crosses light and ink bands while scrolling, so its glare fades
   rather than snapping; the hero island lives on ink permanently and just
   drops its streak outright. */
.glass-island::before {
  transition: opacity 350ms ease;
}
.glass-island[data-ink="true"]::before {
  opacity: 0;
}
/* On ink the hero island carries no streak at all — its glare is the
   top-light inset on the rim alone, matching the CTA pills. */
.glass-island-ink::before {
  display: none;
}

/* The ink ground: the resin field's dark counterpart. Deep navy with the
   same sunset hues glowing faintly from the corners, so dark sections read
   as the same material after dusk, not a different site. */
.ground-ink {
  background-color: #03203f;
  background-image:
    radial-gradient(900px 620px at 12% -5%, rgba(43, 108, 176, 0.32), transparent 64%),
    radial-gradient(820px 560px at 88% 4%, rgba(123, 95, 214, 0.2), transparent 66%),
    radial-gradient(780px 560px at 86% 102%, rgba(240, 160, 0, 0.13), transparent 62%),
    radial-gradient(700px 520px at 5% 98%, rgba(199, 93, 138, 0.12), transparent 64%),
    linear-gradient(160deg, #06294d, #03203f 46%, #021833);
}

/* The wordmark's dark-ground cut: same sunset walk, frosted toward light so
   every letter clears the navy behind it. */
.wordmark-glass-dark {
  background-image:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.42),
      rgba(255, 255, 255, 0.08) 52%,
      rgba(255, 255, 255, 0.16)
    ),
    linear-gradient(
      90deg,
      #9db8d6,
      #7fa7d4 18%,
      #a9c6e8 32%,
      #c3aef2 45%,
      #eba9c8 55%,
      #f6b291 65%,
      #ffd022 80%,
      #ffcb05
    );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Headshot placeholder: the sunset as an avatar, initials on top. Swapped
   for real photos when the team confirms them. */
.avatar-fallback {
  background: linear-gradient(135deg, #154a86, #7b5fd6 40%, #c75d8a 58%, #e8734e 74%, #f0a000);
}

/* The alumni cut of the same avatar: identical walk, desaturated toward
   dust, like a print that has been on the wall a while. */
.avatar-fallback-alumni {
  background: linear-gradient(135deg, #5d769b, #9b8bc0 40%, #c99aa8 58%, #d9a98c 74%, #d8b878);
}

/* The mobile menu overlay wears the same ground as the page. */
.overlay-ground {
  background-color: #e9eef5;
  background-image: linear-gradient(160deg, #dfe9f8 0%, #e9eef5 30%, #f2edda 68%, #f7ecca 100%);
}

/* Every pill button on the site is glass; the tint carries the identity.
   Maize stays the primary action, navy the chrome action, clear the rest. */
.btn-glass {
  position: relative;
  isolation: isolate;
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.62);
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.08), 0 6px 18px rgba(0, 39, 76, 0.1),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.9),
    inset 0 -5px 10px -6px rgba(0, 39, 76, 0.16);
  transition: background-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out);
}
.btn-glass:active {
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.08), inset 0 1px 3px rgba(0, 39, 76, 0.12);
}
.btn-glass-maize {
  background: rgba(255, 203, 5, 0.55);
  color: var(--color-navy);
}
.btn-glass-maize:hover {
  background: rgba(255, 203, 5, 0.75);
}
/* On ink grounds the translucent maize muddies to olive over the navy behind
   it; the fill must run near-solid there. */
.ground-ink .btn-glass-maize {
  background: rgba(255, 203, 5, 0.88);
}
.ground-ink .btn-glass-maize:hover {
  background: rgba(255, 211, 42, 0.96);
}
/* The clear pill's white-wash fill goes muddy over navy: run it as a frost
   outline instead. */
.ground-ink .btn-glass-clear {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-on-navy);
  border-color: rgba(255, 255, 255, 0.38);
}
.ground-ink .btn-glass-clear:hover {
  background: rgba(255, 255, 255, 0.22);
}
/* The explainer as an ink bubble island: same quiet smoked glass as the
   other islands on the night stretch, frost text inside. No backdrop-filter:
   the ground behind it is flat navy (blur adds nothing), and blurring while
   the open/close height animates re-rasterizes the backdrop every frame —
   that was the whole lag. */
/* Compound selectors on purpose: these must beat the base .island-panel
   rules that are declared later in the file. */
.island-panel.island-panel-ink {
  /* Same frost-glass recipe as .ground-ink .btn-glass-clear, so the capsule
     and the CTA pills above it read as one material. */
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow:
    0 1px 2px rgba(0, 8, 18, 0.2), 0 10px 30px rgba(0, 8, 18, 0.3),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.35),
    inset 0 -8px 14px -8px rgba(0, 8, 18, 0.3);
}
.island-panel.island-panel-ink:not(.island-open):hover {
  background: rgba(255, 255, 255, 0.18);
}
/* Open, the panel floats OVER the dissolve and whatever daylight content
   sits beneath it, so the glass runs near-solid ink for legibility; the
   remaining translucency lets the dusk-to-day gradient tint it. */
.island-panel.island-panel-ink.island-open {
  background: rgba(4, 30, 58, 0.9);
}
.island-panel-ink .island-trigger {
  color: var(--color-on-navy);
}

/* The night stretch dissolves instead of ending: its ink paint lives on a
   ::before whose mask fades out over the last stretch, letting the real
   resin field rise through — no faked seam color to mismatch. */
.ground-ink.ground-ink-fade {
  position: relative;
  isolation: isolate;
  background: none;
}
.ground-ink-fade::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #03203f;
  /* No bottom-corner washes on the fading variant: they tinted the ground
     behind the explainer capsule, and the dissolve reveals the real field's
     color anyway. Pure navy until the melt. */
  background-image:
    radial-gradient(900px 620px at 12% -5%, rgba(43, 108, 176, 0.32), transparent 64%),
    radial-gradient(820px 560px at 88% 4%, rgba(123, 95, 214, 0.2), transparent 66%),
    linear-gradient(160deg, #06294d, #03203f 46%, #021833);
  /* Smoothstep-eased dissolve: a linear alpha ramp reads as a hard-edged
     band; these stops approximate an S-curve so the ink thins impercept-
     ibly at first, lets go through the middle, and feathers out at the end.
     The span stays SHORTER than the padding below the explainer island, so
     the capsule always sits on solid ink. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 210px),
    rgba(0, 0, 0, 0.94) calc(100% - 175px),
    rgba(0, 0, 0, 0.78) calc(100% - 137px),
    rgba(0, 0, 0, 0.5) calc(100% - 98px),
    rgba(0, 0, 0, 0.22) calc(100% - 60px),
    rgba(0, 0, 0, 0.06) calc(100% - 26px),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 calc(100% - 210px),
    rgba(0, 0, 0, 0.94) calc(100% - 175px),
    rgba(0, 0, 0, 0.78) calc(100% - 137px),
    rgba(0, 0, 0, 0.5) calc(100% - 98px),
    rgba(0, 0, 0, 0.22) calc(100% - 60px),
    rgba(0, 0, 0, 0.06) calc(100% - 26px),
    transparent 100%
  );
}
.btn-glass-navy {
  background: rgba(0, 39, 76, 0.82);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.28);
}
.btn-glass-navy:hover {
  background: rgba(0, 39, 76, 0.92);
}
.btn-glass-clear {
  background: rgba(255, 255, 255, 0.34);
  color: var(--color-navy);
}
.btn-glass-clear:hover {
  background: rgba(255, 255, 255, 0.55);
}

/* The explainer island: a glass capsule that unfolds into the full
   walkthrough. Height animates via the 0fr -> 1fr grid trick; the corner
   radius relaxes from pill to panel as it opens. */
.island-panel {
  width: 100%;
  max-width: 46rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.34);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    0 1px 2px rgba(0, 39, 76, 0.06), 0 10px 30px rgba(0, 39, 76, 0.1),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
    inset 0 -8px 14px -8px rgba(0, 39, 76, 0.16);
  transform: translateZ(0);
  will-change: transform;
  transition: background-color 180ms var(--ease-out);
}
.island-panel.island-open {
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.5);
}
.island-trigger {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.75rem;
  border-radius: inherit;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-navy);
  cursor: pointer;
}
.island-chevron {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 300ms var(--ease-out);
}
.island-chevron-open {
  transform: rotate(180deg);
}
.island-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 300ms var(--ease-out);
}
.island-open .island-body {
  grid-template-rows: 1fr;
}
.island-inner {
  overflow: hidden;
  contain: content;
  /* The text lets go FASTER than the capsule collapses (and arrives a beat
     after it opens), so copy never lingers over a closing box. */
  opacity: 0;
  transition: opacity 150ms ease-out;
}
.island-open .island-inner {
  opacity: 1;
  transition: opacity 220ms ease-out 70ms;
}

/* The prismatic hairline under the hero — the second (and last) place the
   spectral ramp exists outside the simulation. */
.prism-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(
    90deg,
    transparent,
    #154a86 12%,
    #2b6cb0 28%,
    #7b5fd6 42%,
    #c75d8a 54%,
    #e8734e 66%,
    #f0a000 82%,
    transparent
  );
}

/* The simulation's t-scrubber. */
.flow-scrub {
  appearance: none;
  -webkit-appearance: none;
  height: 24px;
  background: transparent;
  cursor: pointer;
}
.flow-scrub::-webkit-slider-runnable-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(0, 39, 76, 0.18);
}
.flow-scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -6px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--color-navy);
  box-shadow: 0 1px 3px rgba(0, 39, 76, 0.25);
}
.flow-scrub::-moz-range-track {
  height: 2px;
  border-radius: 1px;
  background: rgba(0, 39, 76, 0.18);
}
.flow-scrub::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--color-navy);
  box-shadow: 0 1px 3px rgba(0, 39, 76, 0.25);
}
/* Ink-ground scrub: the navy track disappears on navy, so it goes frost. */
.flow-scrub-ink::-webkit-slider-runnable-track {
  background: rgba(234, 240, 246, 0.28);
}
.flow-scrub-ink::-moz-range-track {
  background: rgba(234, 240, 246, 0.28);
}

/* =============================================================================
   Reduced motion: collapse every transition/animation to an instant swap.
   (The FlowField engine separately renders its static final frame.)
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}