/* ============================================================
   S3 Elite AI design system
   Dark, electric, AI-forward. Brand: icy-blue star on deep navy.
   ============================================================ */

:root {
  --bg: #010210;
  --bg-2: #030921;
  --panel: rgba(8, 14, 64, 0.62);
  --panel-solid: #0a1040;
  --line: rgba(0, 127, 235, 0.22);
  --ice: #d9f6f6;
  --text: #e9f9fb;
  --text-dim: #b3d6dd;
  --blue: #007feb;
  --cyan: #00afcc;
  --purple: #00afcc;
  --violet: #36e0c9;
  --magenta: #4feedb;
  --grad: linear-gradient(100deg, #1a53f0 0%, #007feb 42%, #00afcc 78%, #36e0c9 100%);
  /* Same brand ramp minus the deep blue stop, which no text colour can
     meet AA against. Use this anywhere small text sits on the gradient. */
  --grad-cta: linear-gradient(100deg, #007feb 0%, #00afcc 55%, #36e0c9 100%);
  --grad-ink: #04121b;
  /* Radius scale: sm for controls, md for icons and panels, lg for cards. */
  --radius-sm: 0.625rem;
  --radius-md: 0.875rem;
  --radius: 1.125rem;
  --maxw: 1180px;
  --nav-h: 76px;
  --font-head: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
  --font-body: "Inter", "Helvetica Neue", system-ui, sans-serif;

  /* Reader text scale. 1 = site default. Set by the accessibility widget
     to 1, 1.15, 1.3 or 1.5. Every rem value scales from the root font
     size below; the vw terms inside font-size clamps are multiplied by
     this same factor so fluid headings scale with the rest of the type. */
  --ts: 1;

  /* Spacing scale, ratio roughly 1.6, all rem so it tracks the reader
     text scale. Use these instead of ad-hoc margins and padding. */
  --space-2xs: 0.4rem;
  --space-xs: 0.8rem;
  --space-sm: 1.3rem;
  --space-md: 2.1rem;
  --space-lg: 3.4rem;
  --grid-gap: var(--space-sm);   /* one gap for every card grid */
  --card-pad: 1.7rem;            /* one internal padding for every card type */
  --section-pad: clamp(3.4rem, 8vh, 5.5rem);  /* one band height for every section */
}

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

html { font-size: calc(100% * var(--ts)); }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ---------- shooting-star cursor (desktop pointers only) ---------- */
@media (pointer: fine) {
  body { cursor: url("/assets/img/cursor-star.png") 11 15, auto; }
  a, button, .btn, select, summary, [role="button"] { cursor: url("/assets/img/cursor-star.png") 11 15, pointer; }
  html.cursor-down, html.cursor-down * { cursor: url("/assets/img/cursor-star-click.png") 11 15, auto !important; }
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- galaxy backdrop: nebula + starfield ----------
   Colors sampled from the original site's nebula wave artwork:
   near-black indigo space, deep electric blue, magenta-violet glow. */
body::before {
  content: "";
  position: fixed; inset: -8%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1050px 760px at 85% -8%, rgba(4, 0, 196, 0.30), transparent 62%),
    radial-gradient(920px 700px at -10% 24%, rgba(4, 0, 196, 0.34), transparent 60%),
    radial-gradient(760px 600px at 106% 64%, rgba(54, 224, 201, 0.07), transparent 62%),
    radial-gradient(940px 760px at 28% 114%, rgba(0, 6, 115, 0.38), transparent 64%),
    radial-gradient(620px 500px at 48% 34%, rgba(0, 127, 235, 0.12), transparent 70%),
    radial-gradient(480px 400px at 62% 42%, rgba(120, 235, 220, 0.04), transparent 72%);
  animation: nebula-breathe 44s ease-in-out infinite alternate;
}
@keyframes nebula-breathe {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-1.5%, 1.2%, 0) scale(1.05); }
  100% { transform: translate3d(1.5%, -1.2%, 0) scale(1.08); }
}

/* ---------- soft drifting color blurs (elements injected by main.js) ----------
   Rendered at 1/3 size with 1/3 blur, scaled 3x via transform: identical look,
   ~9x less raster/GPU cost. */
.color-blurs {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden;
}
.blur-blob {
  position: absolute; border-radius: 50%;
  filter: blur(26px);
  will-change: transform;
}
.blur-blob--violet {
  width: 19.4vmax; height: 19.4vmax;
  left: calc(14vw - 9.7vmax); top: calc(22vh - 9.7vmax);
  background: radial-gradient(circle, rgba(4, 0, 196, 0.32), rgba(4, 0, 196, 0.10) 55%, transparent 72%);
  animation: blob-a 46s ease-in-out infinite alternate;
}
.blur-blob--blue {
  width: 18vmax; height: 18vmax;
  left: calc(88vw - 9vmax); top: calc(88vh - 9vmax);
  background: radial-gradient(circle, rgba(0, 60, 190, 0.30), rgba(0, 60, 190, 0.10) 55%, transparent 72%);
  animation: blob-b 58s ease-in-out infinite alternate;
}
.blur-blob--cyan {
  width: 12.7vmax; height: 12.7vmax;
  left: calc(94vw - 6.35vmax); top: calc(42vh - 6.35vmax);
  background: radial-gradient(circle, rgba(54, 224, 201, 0.14), rgba(54, 224, 201, 0.05) 55%, transparent 72%);
  animation: blob-c 41s ease-in-out infinite alternate;
}
.blur-blob--magenta {
  width: 14.7vmax; height: 14.7vmax;
  left: calc(30vw - 7.35vmax); top: calc(96vh - 7.35vmax);
  background: radial-gradient(circle, rgba(0, 6, 115, 0.34), rgba(0, 6, 115, 0.11) 55%, transparent 72%);
  animation: blob-b 63s ease-in-out infinite alternate-reverse;
}
.blur-blob--indigo {
  width: 16.7vmax; height: 16.7vmax;
  left: calc(52vw - 8.35vmax); top: calc(55vh - 8.35vmax);
  background: radial-gradient(circle, rgba(0, 92, 212, 0.26), rgba(0, 92, 212, 0.08) 55%, transparent 72%);
  animation: blob-c 52s ease-in-out infinite alternate-reverse;
}
.blur-blob--pink {
  width: 10vmax; height: 10vmax;
  left: calc(40vw - 5vmax); top: calc(2vh - 5vmax);
  background: radial-gradient(circle, rgba(140, 240, 225, 0.08), rgba(110, 230, 215, 0.03) 55%, transparent 72%);
  animation: blob-a 37s ease-in-out infinite alternate-reverse;
}
@keyframes blob-a {
  from { transform: translate3d(0, 0, 0) scale(3); }
  to   { transform: translate3d(9vw, 7vh, 0) scale(3.54); }
}
@keyframes blob-b {
  from { transform: translate3d(0, 0, 0) scale(3.3); }
  to   { transform: translate3d(-8vw, -6vh, 0) scale(2.82); }
}
@keyframes blob-c {
  from { transform: translate3d(0, 0, 0) scale(2.88); }
  to   { transform: translate3d(-6vw, 8vh, 0) scale(3.42); }
}

/* Milky-Way band, galactic core and star dust (elements injected by main.js) */
.galaxy {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.star-dust {
  position: absolute; inset: -214px;
  will-change: transform;
  background-image:
    radial-gradient(0.9px 0.9px at 31px 47px, rgba(255, 255, 255, 0.74), transparent 100%),
    radial-gradient(0.8px 0.8px at 89px 12px, rgba(200, 248, 255, 0.54), transparent 100%),
    radial-gradient(1px 1px at 142px 83px, rgba(220, 250, 255, 0.68), transparent 100%),
    radial-gradient(0.7px 0.7px at 57px 129px, rgba(255, 255, 255, 0.47), transparent 100%),
    radial-gradient(0.9px 0.9px at 173px 158px, rgba(180, 238, 255, 0.61), transparent 100%),
    radial-gradient(0.7px 0.7px at 116px 191px, rgba(255, 255, 255, 0.41), transparent 100%),
    radial-gradient(0.8px 0.8px at 201px 36px, rgba(190, 245, 255, 0.54), transparent 100%),
    radial-gradient(0.9px 0.9px at 12px 176px, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(0.7px 0.7px at 68px 74px, rgba(210, 248, 255, 0.45), transparent 100%),
    radial-gradient(1px 1px at 187px 118px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(0.8px 0.8px at 133px 22px, rgba(190, 240, 255, 0.5), transparent 100%),
    radial-gradient(0.7px 0.7px at 38px 205px, rgba(255, 255, 255, 0.42), transparent 100%),
    radial-gradient(0.9px 0.9px at 156px 203px, rgba(210, 250, 255, 0.5), transparent 100%);
  background-size: 214px 214px;
  animation: dust-drift 220s linear infinite;
}
@keyframes dust-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(214px, -214px, 0); }
}

body::after {
  content: "";
  position: fixed; inset: -310px; z-index: -1; pointer-events: none;
  will-change: transform, opacity;
  background-image:
    radial-gradient(4.5px 4.5px at 22px 34px, rgba(255, 255, 255, 0.95) 0%, rgba(190, 248, 255, 0.4) 36%, rgba(190, 248, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3.5px 3.5px at 128px 92px, rgba(214, 253, 255, 0.95) 0%, rgba(150, 245, 255, 0.4) 36%, rgba(150, 245, 255, 0.12) 58%, transparent 78%),
    radial-gradient(5px 5px at 218px 156px, rgba(185, 244, 255, 0.95) 0%, rgba(120, 230, 250, 0.4) 36%, rgba(120, 230, 250, 0.12) 58%, transparent 78%),
    radial-gradient(3px 3px at 66px 184px, rgba(255, 255, 255, 0.95) 0%, rgba(200, 248, 255, 0.4) 36%, rgba(200, 248, 255, 0.12) 58%, transparent 78%),
    radial-gradient(4px 4px at 174px 226px, rgba(170, 252, 255, 0.95) 0%, rgba(120, 244, 255, 0.4) 36%, rgba(120, 244, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3px 3px at 250px 58px, rgba(220, 250, 255, 0.95) 0%, rgba(150, 235, 250, 0.4) 36%, rgba(150, 235, 250, 0.12) 58%, transparent 78%),
    radial-gradient(4.5px 4.5px at 94px 274px, rgba(255, 255, 255, 0.95) 0%, rgba(185, 247, 255, 0.4) 36%, rgba(185, 247, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3px 3px at 288px 210px, rgba(185, 246, 255, 0.95) 0%, rgba(140, 235, 250, 0.4) 36%, rgba(140, 235, 250, 0.12) 58%, transparent 78%),
    radial-gradient(3px 3px at 45px 248px, rgba(255, 255, 255, 0.95) 0%, rgba(190, 244, 255, 0.4) 36%, rgba(190, 244, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3.5px 3.5px at 152px 18px, rgba(200, 248, 255, 0.95) 0%, rgba(150, 240, 255, 0.4) 36%, rgba(150, 240, 255, 0.12) 58%, transparent 78%),
    radial-gradient(2.6px 2.6px at 262px 122px, rgba(255, 255, 255, 0.95) 0%, rgba(200, 246, 255, 0.4) 36%, rgba(200, 246, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3.2px 3.2px at 12px 130px, rgba(190, 244, 255, 0.95) 0%, rgba(140, 236, 255, 0.4) 36%, rgba(140, 236, 255, 0.12) 58%, transparent 78%),
    radial-gradient(2.8px 2.8px at 198px 296px, rgba(255, 255, 255, 0.95) 0%, rgba(190, 245, 255, 0.4) 36%, rgba(190, 245, 255, 0.12) 58%, transparent 78%),
    radial-gradient(3.8px 3.8px at 306px 44px, rgba(170, 248, 255, 0.95) 0%, rgba(120, 240, 255, 0.4) 36%, rgba(120, 240, 255, 0.12) 58%, transparent 78%);
  background-size: 310px 310px;
  animation:
    star-drift 140s linear infinite,
    twinkle 7s ease-in-out infinite alternate;
}
@keyframes star-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-310px, 310px, 0); }
}
@keyframes twinkle {
  from { opacity: 0.55; }
  to   { opacity: 1; }
}

/* ---------- shooting stars ---------- */
.shooting-stars {
  position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
}
.shooting-star {
  position: absolute;
  width: 150px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #ffffff, rgba(190, 247, 255, 0.55) 30%, transparent);
  filter: drop-shadow(0 0 6px rgba(200, 248, 255, 0.9));
  opacity: 0;
  animation: shoot var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
}
.shooting-star--purple {
  background: linear-gradient(90deg, #ecfcff, rgba(90, 228, 250, 0.7) 25%, rgba(63, 192, 214, 0.35) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(105, 230, 250, 0.95));
}
.shooting-star--pink {
  background: linear-gradient(90deg, #f0fdff, rgba(120, 235, 246, 0.7) 25%, rgba(63, 201, 217, 0.35) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(130, 236, 246, 0.95));
}
.shooting-star--blue {
  background: linear-gradient(90deg, #edfeff, rgba(100, 246, 255, 0.75) 25%, rgba(58, 242, 255, 0.38) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(110, 246, 255, 0.95));
}
@keyframes shoot {
  0%    { opacity: 0; transform: translate3d(0, 0, 0) rotate(var(--angle, -35deg)); }
  0.4%  { opacity: 1; }
  2.8%  { opacity: 0; transform: translate3d(var(--tx, -52vw), var(--ty, 36vw), 0) rotate(var(--angle, -35deg)); }
  100%  { opacity: 0; transform: translate3d(var(--tx, -52vw), var(--ty, 36vw), 0) rotate(var(--angle, -35deg)); }
}

/* ---------- featured event ---------- */
.event-card {
  position: relative;
  border-radius: calc(var(--radius) + 2px);
  padding: 2px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 20px 60px rgba(12, 53, 60, 0.6), 0 0 42px rgba(63, 192, 214, 0.22);
}
.event-card::before,
.event-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
}
.event-card::before {
  background: linear-gradient(120deg, #55fffc, #3fc0d6 45%, #3fc9d9);
}
.event-card::after {
  background: linear-gradient(300deg, #3fc9d9, #3af2ff 55%, #55fffc);
  opacity: 0;
  animation: border-fade 7s ease-in-out infinite alternate;
}
@keyframes border-fade {
  to { opacity: 1; }
}
.event-card-inner {
  position: relative; z-index: 1;
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(63, 192, 214, 0.16), transparent 60%),
    #041318;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: grid;
  gap: clamp(1.6rem, 4vw, 2.8rem);
  align-items: center;
}
@media (min-width: 960px) { .event-card-inner { grid-template-columns: 1.05fr 0.95fr; } }
.event-flyer {
  display: block; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(3, 20, 22, 0.6);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-flyer:hover { transform: translateY(-5px) scale(1.012); box-shadow: 0 26px 60px rgba(3, 20, 22, 0.75), 0 0 34px rgba(63, 192, 214, 0.25); }
.event-flyer img { width: 100%; height: auto; display: block; }
.event-details h2 { font-size: clamp(1.45rem, calc(3vw * var(--ts)), 2.05rem); }
.event-details .eyebrow {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--magenta);
  margin-bottom: var(--space-xs);
}
.event-facts { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.65rem; }
.event-facts li { display: flex; align-items: flex-start; gap: 0.7rem; color: var(--text-dim); }
.event-facts svg { width: 20px; height: 20px; flex: none; color: var(--cyan); margin-top: 0.22em; }
.event-learn { color: var(--text-dim); font-size: 0.99rem; margin-bottom: 1.6rem; }
.event-learn strong { color: var(--text); }

::selection { background: rgba(58, 242, 255, 0.45); }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  letter-spacing: 0.01em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, calc(5.4vw * var(--ts)), 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, calc(3.6vw * var(--ts)), 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, calc(2.2vw * var(--ts)), 1.45rem); font-weight: 600; }
p { margin: 0 0 1.1em; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--cyan); text-underline-offset: 3px; }
a:hover { color: #7fffff; }

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

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--blue); color: #ffffff; padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }

/* Centred single-column text. Caps the measure so paragraphs do not run
   the full width of a large monitor. */
.prose { max-width: 68ch; margin-inline: auto; }

/* ---------- gradient text ---------- */
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- nav ---------- */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  background: rgba(2, 16, 20, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(2, 16, 20, 0.88);
  border-bottom-color: var(--line);
}
.site-nav .wrap {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.brand {
  display: flex; align-items: center; gap: 0.7rem;
  text-decoration: none; color: var(--text);
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem;
  letter-spacing: 0.04em;
}
.brand img { width: auto; height: 44px; filter: drop-shadow(0 0 10px rgba(63, 192, 214, 0.6)); }
.brand .brand-sub { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.18em; color: var(--text-dim); text-transform: uppercase; }

.nav-links { display: flex; align-items: center; gap: 0.4rem; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  position: relative;
  display: block; padding: 0.55rem 0.95rem;
  color: var(--text-dim); text-decoration: none; font-weight: 500; font-size: 0.98rem;
  border-radius: var(--radius-sm);
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links a:hover { color: var(--text); background: rgba(58, 242, 255, 0.12); }
.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.95rem; right: 0.95rem; bottom: 0.25rem;
  height: 2px; border-radius: 2px; background: var(--grad);
}
.nav-cta {
  margin-left: 0.5rem;
}

.theme-toggle {
  background: rgba(58, 242, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--text); cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.theme-toggle:hover { background: rgba(63, 192, 214, 0.22); transform: rotate(15deg); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
@media (max-width: 880px) {
  .nav-theme { display: flex; justify-content: flex-start; padding: 0.5rem 1rem; }
}

.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 0.5rem 0.65rem; cursor: pointer;
}
.nav-toggle .bar {
  display: block; width: 22px; height: 2px; background: var(--text);
  margin: 5px 0; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0.2rem;
    background: rgba(2, 16, 20, 0.97);
    border-bottom: 1px solid var(--line);
    padding: 0.8rem 1.2rem 1.2rem;
    /* With the reader panel open at 150% the menu is taller than the
       viewport, so let it scroll rather than putting Reset out of reach. */
    max-height: calc(100vh - var(--nav-h));
    overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s;
  }
  .nav-links.open { transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; }
  .nav-links a { padding: 0.85rem 1rem; font-size: 1.05rem; }
  .nav-cta { margin: 0.5rem 0 0; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.85rem 1.7rem;
  border-radius: 999px;
  font-family: var(--font-head); font-weight: 600; font-size: 1rem;
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}
.btn-primary {
  background: var(--grad-cta); color: var(--grad-ink);
  box-shadow: 0 6px 26px rgba(63, 192, 214, 0.42);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 34px rgba(63, 192, 214, 0.6); color: var(--grad-ink); }
.btn-ghost {
  background: rgba(58, 242, 255, 0.08); color: var(--text);
  box-shadow: inset 0 0 0 1px rgba(120, 221, 235, 0.35);
}
.btn-ghost:hover { background: rgba(58, 242, 255, 0.18); transform: translateY(-2px); color: #ffffff; }
.btn-sm { padding: 0.55rem 1.15rem; font-size: 0.92rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: calc(var(--nav-h) + clamp(4rem, 10vh, 7rem)) 0 clamp(4rem, 9vh, 6.5rem);
  overflow: hidden;
  isolation: isolate;
}
.hero-inner { position: relative; z-index: 3; max-width: 860px; }
.hero .kicker {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-head); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--cyan);
  border: 1px solid rgba(85, 255, 252, 0.35);
  background: rgba(85, 255, 252, 0.08);
  padding: 0.45rem 1rem; border-radius: 999px; margin-bottom: 1.5rem;
}
.hero .kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 12px var(--cyan);
  animation: pulse-dot 2.4s ease-in-out infinite;
}
@keyframes pulse-dot { 50% { opacity: 0.35; } }
.hero p.lede { font-size: clamp(1.08rem, calc(2vw * var(--ts)), 1.3rem); color: var(--text-dim); max-width: 72ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.hero-actions .btn { padding: 0.7rem 1.35rem; font-size: 0.94rem; }

.orb {
  position: absolute; border-radius: 50%; filter: blur(52px); z-index: 0;
  opacity: 0.5; pointer-events: none;
}
.orb-1 { width: 560px; height: 560px; top: -160px; right: -120px;
  background: radial-gradient(circle, rgba(60, 201, 225, 0.6), rgba(58, 242, 255, 0.28) 45%, transparent 68%);
  animation: drift1 16s ease-in-out infinite alternate; }
.orb-2 { width: 500px; height: 500px; bottom: -180px; left: -140px;
  background: radial-gradient(circle, rgba(43, 192, 214, 0.55), rgba(63, 201, 217, 0.16) 50%, transparent 68%);
  animation: drift2 19s ease-in-out infinite alternate; }
.orb-3 { width: 380px; height: 380px; top: 30%; left: 38%;
  background: radial-gradient(circle, rgba(58, 242, 255, 0.32), transparent 65%);
  animation: drift1 22s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(-60px, 50px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(70px, -40px) scale(1.08); } }

.hero-star {
  position: absolute; z-index: 0; right: -4%; top: 12%;
  width: min(46vw, 560px); opacity: 0.16; pointer-events: none;
  filter: drop-shadow(0 0 40px rgba(63, 192, 214, 0.45));
}

.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 920px) { .hero-grid { grid-template-columns: 1.1fr 0.9fr; } }
.hero-logo { display: flex; justify-content: center; }
.hero-logo img {
  width: min(100%, 540px);
  filter: drop-shadow(0 0 30px rgba(63, 192, 214, 0.55)) drop-shadow(0 0 90px rgba(58, 242, 255, 0.35));
  animation: logo-float 7s ease-in-out infinite;
}
@keyframes logo-float { 50% { transform: translateY(-14px); } }

/* mobile: logo leads the page */
@media (max-width: 919px) {
  .hero { padding-top: calc(var(--nav-h) + 1.6rem); }
  .hero-grid { gap: 1.4rem; }
  .hero-logo { order: -1; }
  .hero-logo img { width: min(90vw, 560px); }
  /* logo already announces the brand, so drop the redundant pill (home hero only) */
  .hero-grid .kicker { display: none; }
  /* centered, evenly wrapped hero text beneath the centered logo */
  .hero-grid .hero-inner { text-align: center; }
  .hero-grid .hero-inner h1 { font-size: clamp(1.75rem, calc(7.4vw * var(--ts)), 2.4rem); }
  .hero-grid .lede { margin-inline: auto; }
  .hero-grid .hero-actions { justify-content: center; }
}

/* ---------- sections ---------- */
.section { position: relative; padding: var(--section-pad) 0; }
.section-alt {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(63, 192, 214, 0.12), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, rgba(58, 242, 255, 0.10), transparent 60%),
    rgba(10, 35, 42, 0.55);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head { max-width: 70ch; margin-bottom: clamp(1.8rem, 4vh, 3rem); }
.section-head h1, .section-head h2 { margin-bottom: 0.35em; }
.section-head .eyebrow {
  font-family: var(--font-head); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--cyan);
  margin-bottom: var(--space-xs);
}
.section-head p { color: var(--text-dim); }

/* ---------- cards ---------- */
.grid { display: grid; gap: var(--grid-gap); }
/* Three-up card rows switch to flex so an odd count centers its remainder:
   5 cards read as 3 over 2, with the 2 sharing the same column width. The
   max-width caps per breakpoint keep every card the width of a full-row
   card, so remainder cards never stretch to fill the leftover space. */
.grid-3 { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); }
.grid-3 > * { flex: 1 1 min(100%, 17.5rem); max-width: 100%; }
@media (min-width: 640px) {
  .grid-3 > * { max-width: calc((100% - var(--grid-gap)) / 2); }
}
@media (min-width: 960px) {
  .grid-3 > * { max-width: calc((100% - 2 * var(--grid-gap)) / 3); }
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-pad);
  backdrop-filter: blur(8px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad); opacity: 0; transition: opacity 0.3s ease;
}
.card:hover { transform: translateY(-4px); border-color: rgba(63, 192, 214, 0.5); box-shadow: 0 14px 34px rgba(12, 53, 60, 0.5), 0 0 24px rgba(63, 192, 214, 0.1); }
.card:hover::before { opacity: 1; }
/* Cards also carry .reveal, whose 0.7s entrance transition would override
   the hover speed. Scoping the fast transition to the hover state keeps the
   entrance animation as it was and the hover response under 200ms. */
.card:hover, .team-card:hover, .program:hover, .post-card:hover {
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
/* Hover lift is decorative; stand still when the OS asks for less motion. */
@media (prefers-reduced-motion: reduce) {
  .card:hover, .team-card:hover, .program:hover, .post-card:hover { transform: none; }
}
.card h3 { margin-bottom: 0.5rem; }
.card p { color: var(--text-dim); margin-bottom: 1.1em; }
.card p:last-child { margin-bottom: 0; }

.card-icon {
  width: 52px; height: 52px; border-radius: var(--radius-md);
  display: grid; place-items: center; margin-bottom: var(--space-sm);
  background: rgba(63, 192, 214, 0.14);
  border: 1px solid rgba(63, 192, 214, 0.35);
  color: var(--cyan);
}
.card-icon svg { width: 26px; height: 26px; }

/* ---------- split layout ---------- */
.split { display: grid; gap: clamp(1.8rem, 5vw, 4rem); align-items: center; }
@media (min-width: 920px) { .split { grid-template-columns: 1fr 1fr; } }
.split .media { position: relative; }
.split .media img {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: 0 24px 60px rgba(3, 20, 22, 0.7);
}
.media-glow::after {
  content: ""; position: absolute; inset: -8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, rgba(63, 192, 214, 0.32), rgba(58, 242, 255, 0.18) 55%, transparent 72%);
  filter: blur(30px);
}

/* ---------- team ---------- */
.team-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.team-card:hover { transform: translateY(-4px); border-color: rgba(63, 192, 214, 0.5); box-shadow: 0 14px 34px rgba(12, 53, 60, 0.5), 0 0 24px rgba(63, 192, 214, 0.1); }
.team-photo { position: relative; aspect-ratio: 4 / 4.4; overflow: hidden; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.6s ease; }
.team-card:hover .team-photo img { transform: scale(1.045); }
.team-photo::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(to top, rgba(6, 21, 23, 0.92), transparent);
}
.team-meta { position: absolute; left: 1.3rem; right: 1.3rem; bottom: 1.1rem; z-index: 2; }
.team-meta .role {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan); margin: 0 0 0.2rem;
}
.team-meta h3 { margin: 0; font-size: 1.5rem; color: #f2feff; }
.team-body { padding: var(--card-pad); }
/* The parent rule assumes a one-paragraph bio. Alyssa's runs to three,
   so paragraphs keep their margin and the last one zeroes it. Single
   paragraph bios render identically either way. */
.team-body p { color: var(--text-dim); margin-bottom: 1.1em; }
.team-body p:last-child { margin-bottom: 0; }



/* ---------- services ---------- */
.program {
  display: grid; gap: 1.6rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--card-pad);
  margin-bottom: 1.6rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.program:hover { transform: translateY(-4px); border-color: rgba(63, 192, 214, 0.5); box-shadow: 0 14px 34px rgba(12, 53, 60, 0.5), 0 0 24px rgba(63, 192, 214, 0.1); }
@media (min-width: 880px) { .program { grid-template-columns: 64px 1fr; } }
.program-num {
  font-family: var(--font-head); font-size: 2rem; font-weight: 700; line-height: 1.1;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.program h3 { font-size: clamp(1.3rem, calc(2.4vw * var(--ts)), 1.7rem); }
.program .label {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cyan);
  display: block; margin: 1.2rem 0 0.35rem;
}
.program p { color: var(--text-dim); margin-bottom: 0; }
.note {
  border-left: 3px solid var(--purple);
  background: rgba(63, 192, 214, 0.08);
  border-radius: 0 12px 12px 0;
  padding: 0.9rem 1.2rem; margin-top: 1.2rem;
  color: var(--text-dim); font-size: 0.98rem;
}

/* ---------- blog ---------- */
.post-card {
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden; text-decoration: none; color: var(--text);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.post-card:hover { transform: translateY(-4px); border-color: rgba(63, 192, 214, 0.5); box-shadow: 0 14px 34px rgba(12, 53, 60, 0.5), 0 0 24px rgba(63, 192, 214, 0.1); color: var(--text); }
.post-thumb { aspect-ratio: 16 / 9; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.post-card:hover .post-thumb img { transform: scale(1.05); }
.post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: 0.5rem; }
.post-body h3 { margin: 0; font-size: 1.22rem; }
.post-body .date { font-size: 0.86rem; color: var(--text-dim); letter-spacing: 0.06em; }
.post-body .readmore { margin-top: 0.4rem; font-weight: 600; color: var(--cyan); font-size: 0.95rem; }

.article { max-width: 72ch; }
.article-hero { border-radius: var(--radius); border: 1px solid var(--line); margin-bottom: 2.2rem; box-shadow: 0 24px 60px rgba(3, 20, 22, 0.7); }
.comic-panel {
  width: 100%;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  margin: 1.6rem 0 2.1rem;
  box-shadow: 0 18px 44px rgba(10, 39, 50, 0.55), 0 0 26px rgba(63, 192, 214, 0.10);
}
.article h2 { margin: 2.4rem 0 0.7rem; font-size: clamp(1.35rem, calc(2.6vw * var(--ts)), 1.75rem); }
.article h3 { margin: 1.8rem 0 0.5rem; }
.article p, .article li { color: var(--text-dim); }
/* The contact email is a long unbreakable token; let it wrap on narrow
   screens and at the larger reader text sizes. */
.article a { overflow-wrap: anywhere; }
.article li { margin-bottom: 0.55rem; }
.article strong { color: var(--text); }
.article .prompt-block {
  background: rgba(85, 255, 252, 0.07);
  border: 1px solid rgba(85, 255, 252, 0.25);
  border-radius: var(--radius-md); padding: 1.2rem 1.4rem; margin: 1.4rem 0;
  font-size: 0.99rem;
}
.breadcrumb { font-size: 0.9rem; color: var(--text-dim); margin-bottom: 1.6rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--line); }
.breadcrumb a { color: var(--text-dim); text-decoration: none; }
.breadcrumb a:hover { color: var(--cyan); }

.article .byline { color: var(--text-dim); font-size: 0.95rem; letter-spacing: 0.04em; margin-bottom: 1.6rem; }
.article table {
  width: 100%; border-collapse: collapse; margin: 1.4rem 0 2rem;
  border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden;
  font-size: 0.98rem;
}
.article th {
  text-align: left; font-family: var(--font-head); font-size: 0.92rem;
  letter-spacing: 0.06em; color: var(--text);
  background: rgba(63, 192, 214, 0.16);
  padding: 0.8rem 1rem; border: 1px solid var(--line);
}
.article td { padding: 0.8rem 1rem; border: 1px solid var(--line); color: var(--text-dim); vertical-align: top; }
.article tr:nth-child(even) td { background: rgba(58, 242, 255, 0.05); }
.img-credit { color: var(--text-dim); font-size: 0.85rem; margin-top: 2rem; opacity: 0.8; }


/* ---------- CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  padding: var(--section-pad) 0;
  text-align: center;
  background:
    radial-gradient(700px 360px at 50% 120%, rgba(43, 192, 214, 0.30), transparent 70%),
    radial-gradient(700px 360px at 50% -20%, rgba(58, 242, 255, 0.26), transparent 70%),
    radial-gradient(420px 260px at 18% 50%, rgba(63, 201, 217, 0.10), transparent 70%),
    rgba(10, 35, 42, 0.6);
  border-top: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(1.7rem, calc(4vw * var(--ts)), 2.6rem); max-width: 22em; margin-inline: auto; }
.cta-band .contact-row {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
  gap: var(--space-sm); margin-top: var(--space-md); max-width: 100%;
}
.contact-chip {
  display: inline-flex; align-items: center; gap: 0.6rem;
  max-width: 100%;
  background: rgba(58, 242, 255, 0.1);
  border: 1px solid rgba(120, 221, 235, 0.3);
  border-radius: 999px; padding: 0.75rem 1.5rem;
  color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.02rem;
  transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
  /* The email address is one long unbreakable token. Let it break rather
     than push the chip past the viewport on a narrow screen or at 150%. */
  overflow-wrap: anywhere;
  text-align: left;
}
@media (max-width: 520px) {
  .contact-chip { padding: 0.7rem 1.1rem; border-radius: 18px; }
}
.contact-chip:hover { transform: translateY(-2px); background: rgba(58, 242, 255, 0.2); border-color: rgba(58, 242, 255, 0.55); color: #ffffff; }
.contact-chip svg { width: 19px; height: 19px; color: var(--cyan); flex: none; }
.cta-band .contact-name { margin-top: var(--space-sm); color: var(--text-dim); font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: var(--space-md) 0;
  background: rgba(3, 15, 19, 0.85);
}
.site-footer .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4rem;
}
.footer-brand { display: flex; align-items: center; gap: 0.8rem; }
.footer-brand img { width: auto; height: 52px; }
.footer-legal { color: var(--text-dim); font-size: 0.9rem; line-height: 1.9; max-width: 560px; }
.footer-legal a { color: var(--text-dim); }
.footer-legal a:hover { color: var(--cyan); }
.footer-nav ul { list-style: none; display: flex; gap: 1.2rem; margin: 0; padding: 0; flex-wrap: wrap; }
.footer-nav a { color: var(--text-dim); text-decoration: none; font-size: 0.95rem; }
.footer-nav a:hover { color: var(--text); }

/* Legal sub-row: the full intellectual property notice, kept visible on the
   page rather than behind a toggle, but set quieter than the main row. */
.footer-fineprint {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}
.footer-fineprint p {
  margin: 0;
  color: var(--text-dim);
  font-size: 0.78rem;
  line-height: 1.8;
  max-width: 78ch;
}

/* ---------- drifting pastel space clouds (light mode only) ---------- */
.space-clouds { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; display: none; }
html[data-theme="light"] .space-clouds { display: block; }
.space-cloud {
  position: absolute;
  width: 36vw; height: 15vh; border-radius: 50%;
  filter: blur(22px);
  will-change: transform;
}
.space-cloud--a {
  left: -6vw; top: 12vh;
  background:
    radial-gradient(42% 60% at 30% 55%, rgba(255, 255, 255, 0.85), transparent 75%),
    radial-gradient(35% 55% at 60% 35%, rgba(214, 252, 255, 0.75), transparent 75%),
    radial-gradient(30% 50% at 80% 60%, rgba(255, 255, 255, 0.6), transparent 75%);
  animation: cloud-drift-a 74s ease-in-out infinite alternate;
}
.space-cloud--b {
  right: -8vw; top: 44vh;
  background:
    radial-gradient(40% 60% at 40% 45%, rgba(255, 255, 255, 0.8), transparent 75%),
    radial-gradient(36% 55% at 68% 60%, rgba(190, 250, 255, 0.8), transparent 75%),
    radial-gradient(28% 45% at 15% 55%, rgba(195, 243, 252, 0.65), transparent 75%);
  animation: cloud-drift-b 92s ease-in-out infinite alternate;
}
.space-cloud--c {
  left: 22vw; bottom: -4vh;
  background:
    radial-gradient(45% 60% at 50% 40%, rgba(255, 255, 255, 0.75), transparent 75%),
    radial-gradient(32% 50% at 25% 60%, rgba(200, 243, 252, 0.7), transparent 75%),
    radial-gradient(30% 48% at 75% 55%, rgba(222, 252, 255, 0.55), transparent 75%);
  animation: cloud-drift-c 84s ease-in-out infinite alternate;
}
@keyframes cloud-drift-a {
  from { transform: translate3d(0, 0, 0) scale(2); }
  to   { transform: translate3d(16vw, 3vh, 0) scale(2.3); }
}
@keyframes cloud-drift-b {
  from { transform: translate3d(0, 0, 0) scale(2.2); }
  to   { transform: translate3d(-14vw, -4vh, 0) scale(1.9); }
}
@keyframes cloud-drift-c {
  from { transform: translate3d(0, 0, 0) scale(2); }
  to   { transform: translate3d(12vw, -3vh, 0) scale(2.4); }
}

/* ---------- rocket back-to-top ---------- */
.to-top {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--panel);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--cyan); cursor: pointer;
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
  box-shadow: 0 8px 26px rgba(10, 39, 50, 0.45);
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { color: var(--violet); box-shadow: 0 10px 30px rgba(63, 192, 214, 0.35); }
.to-top svg { width: 26px; height: 26px; overflow: visible; }
.to-top .flame { opacity: 0; transition: opacity 0.15s ease; }
.to-top.launching .flame { opacity: 1; }
.to-top.launching svg { animation: rocket-launch 0.85s cubic-bezier(0.5, -0.3, 0.85, 1) forwards; }
@keyframes rocket-launch {
  0%   { transform: translateY(0); }
  22%  { transform: translateY(4px) scale(0.96); }
  100% { transform: translateY(-70px) scale(0.75); opacity: 0; }
}

/* ---------- reveal animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
}
.reveal.in { opacity: 1; transform: none; }

[data-parallax] { will-change: transform; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .reveal { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

@media (max-width: 600px) {
  body { font-size: 1rem; }
  .hero-actions .btn { width: auto; justify-content: center; padding: 0.65rem 1.2rem; font-size: 0.9rem; }
}


/* ============================================================
   Light mode, WCAG AA checked: text #17383d on #f2fbfc = 13.9:1,
   dim text #436d74 = 7.3:1, links/accents #0dbfc4 = 5.6:1.
   ============================================================ */
html[data-theme="light"] {
  --bg: #e1f6f8;
  --bg-2: #d3f0f3;
  --panel: rgba(255, 255, 255, 0.82);
  --panel-solid: #ffffff;
  --line: rgba(58, 118, 130, 0.22);
  --text: #17383d;
  --text-dim: #436d74;
  --blue: #20b4c4;
  --cyan: #0aaaaf;
  --purple: #26a7bd;
  --violet: #2fbad0;
  --magenta: #28a0ae;
  --grad: linear-gradient(100deg, #1aced2 0%, #24c0cf 35%, #26a7bd 68%, #2bc0d6 100%);
  --grad-cta: linear-gradient(100deg, #1aced2 0%, #24c0cf 35%, #26a7bd 68%, #2bc0d6 100%);
}
/* light mode: pastel cloud sky with bright white sparkles (never dark stars).
   Full-bleed wash: pink/purple/blue bleed into each other, no pale gaps. */
html[data-theme="light"] body::before {
  opacity: 1;
  background:
    radial-gradient(80% 70% at 90% 12%, rgba(158, 245, 250, 0.9), transparent 64%),
    radial-gradient(75% 65% at 8% 80%, rgba(165, 241, 250, 0.85), transparent 62%),
    radial-gradient(60% 55% at 50% 40%, rgba(178, 240, 248, 0.8), transparent 65%),
    radial-gradient(65% 55% at 14% 8%, rgba(175, 234, 246, 0.7), transparent 60%),
    radial-gradient(50% 45% at 88% 88%, rgba(185, 234, 240, 0.55), transparent 58%),
    radial-gradient(40% 35% at 34% 96%, rgba(190, 237, 242, 0.4), transparent 60%),
    linear-gradient(155deg, #b9eff4 0%, #c2eaf2 28%, #b4eff4 52%, #c2eaf1 74%, #bfeef4 100%);
}
/* keep the drifting blobs blue-dominant too */
html[data-theme="light"] .blur-blob--magenta,
html[data-theme="light"] .blur-blob--pink { opacity: 0.45; }
html[data-theme="light"] .blur-blob--violet { opacity: 0.75; }
html[data-theme="light"] body::after {
  background-image:
    radial-gradient(6.8px 6.8px at 22px 34px, #ffffff 0%, #ffffff 12%, rgba(110, 242, 255, 0.5) 26%, rgba(110, 242, 255, 0.22) 48%, rgba(110, 242, 255, 0.08) 72%, transparent 100%),
    radial-gradient(5.2px 5.2px at 128px 92px, #ffffff 0%, #ffffff 12%, rgba(80, 244, 255, 0.5) 26%, rgba(80, 244, 255, 0.22) 48%, rgba(80, 244, 255, 0.08) 72%, transparent 100%),
    radial-gradient(7.5px 7.5px at 218px 156px, #ffffff 0%, #ffffff 11%, rgba(80, 225, 250, 0.5) 25%, rgba(80, 225, 250, 0.22) 47%, rgba(80, 225, 250, 0.08) 72%, transparent 100%),
    radial-gradient(4.5px 4.5px at 66px 184px, #ffffff 0%, #ffffff 13%, rgba(80, 244, 255, 0.45) 28%, rgba(80, 244, 255, 0.18) 50%, rgba(80, 244, 255, 0.06) 74%, transparent 100%),
    radial-gradient(6.0px 6.0px at 174px 226px, #ffffff 0%, #ffffff 12%, rgba(110, 242, 255, 0.45) 26%, rgba(110, 242, 255, 0.2) 48%, rgba(110, 242, 255, 0.07) 72%, transparent 100%),
    radial-gradient(4.5px 4.5px at 250px 58px, #ffffff 0%, #ffffff 13%, rgba(80, 225, 250, 0.45) 28%, rgba(80, 225, 250, 0.18) 50%, rgba(80, 225, 250, 0.06) 74%, transparent 100%),
    radial-gradient(7.2px 7.2px at 94px 274px, #ffffff 0%, #ffffff 11%, rgba(80, 244, 255, 0.5) 25%, rgba(80, 244, 255, 0.22) 47%, rgba(80, 244, 255, 0.08) 72%, transparent 100%),
    radial-gradient(4.5px 4.5px at 288px 210px, #ffffff 0%, #ffffff 13%, rgba(110, 242, 255, 0.4) 28%, rgba(110, 242, 255, 0.16) 50%, rgba(110, 242, 255, 0.06) 74%, transparent 100%);
}
html[data-theme="light"] .star-dust {
  background-image:
    radial-gradient(0.9px 0.9px at 31px 47px, rgba(255, 255, 255, 0.8), transparent 100%),
    radial-gradient(0.8px 0.8px at 89px 12px, rgba(255, 255, 255, 0.6), transparent 100%),
    radial-gradient(1px 1px at 142px 83px, rgba(235, 253, 255, 0.7), transparent 100%),
    radial-gradient(0.7px 0.7px at 57px 129px, rgba(255, 255, 255, 0.55), transparent 100%),
    radial-gradient(0.9px 0.9px at 173px 158px, rgba(230, 254, 255, 0.65), transparent 100%),
    radial-gradient(0.7px 0.7px at 116px 191px, rgba(255, 255, 255, 0.5), transparent 100%),
    radial-gradient(0.8px 0.8px at 201px 36px, rgba(230, 252, 255, 0.6), transparent 100%);
}
html[data-theme="light"] .shooting-star--purple {
  background: linear-gradient(90deg, #ffffff, rgba(105, 230, 250, 0.85) 25%, rgba(63, 192, 214, 0.4) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(90, 227, 250, 0.8));
}
html[data-theme="light"] .shooting-star--pink {
  background: linear-gradient(90deg, #ffffff, rgba(140, 245, 255, 0.85) 25%, rgba(63, 201, 217, 0.4) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(130, 244, 255, 0.8));
}
html[data-theme="light"] .shooting-star--blue {
  background: linear-gradient(90deg, #ffffff, rgba(120, 248, 255, 0.9) 25%, rgba(58, 242, 255, 0.45) 55%, transparent);
  filter: drop-shadow(0 0 6px rgba(120, 246, 255, 0.8));
}
html[data-theme="light"] .color-blurs { opacity: 0.85; }
html[data-theme="light"] .orb { opacity: 0.35; }
/* surfaces with literal dark colors */
html[data-theme="light"] .site-nav { background: rgba(245, 252, 253, 0.72); }
html[data-theme="light"] .site-nav.scrolled { background: rgba(245, 252, 253, 0.94); }
html[data-theme="light"] .nav-links a:hover { color: var(--text); background: rgba(36, 192, 207, 0.1); }
@media (max-width: 880px) {
  html[data-theme="light"] .nav-links { background: rgba(245, 252, 253, 0.98); }
}
html[data-theme="light"] .btn-primary { box-shadow: 0 6px 22px rgba(38, 167, 189, 0.3); }
html[data-theme="light"] .btn-primary:hover { box-shadow: 0 10px 30px rgba(38, 167, 189, 0.4); }
html[data-theme="light"] .btn-ghost { background: rgba(36, 192, 207, 0.06); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
html[data-theme="light"] .btn-ghost:hover { background: rgba(36, 192, 207, 0.14); color: var(--text); }
html[data-theme="light"] .hero .kicker { border-color: rgba(13, 191, 196, 0.4); background: rgba(13, 191, 196, 0.07); }
html[data-theme="light"] .section-alt {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(38, 167, 189, 0.07), transparent 60%),
    radial-gradient(700px 420px at 8% 90%, rgba(36, 192, 207, 0.06), transparent 60%),
    rgba(231, 246, 248, 0.75);
}
html[data-theme="light"] .cta-band {
  background:
    radial-gradient(700px 360px at 50% 120%, rgba(38, 167, 189, 0.14), transparent 70%),
    radial-gradient(700px 360px at 50% -20%, rgba(36, 192, 207, 0.12), transparent 70%),
    #e7f6f8;
}
html[data-theme="light"] .contact-chip { background: rgba(36, 192, 207, 0.07); border-color: var(--line); color: var(--text); }
html[data-theme="light"] .contact-chip:hover { background: rgba(36, 192, 207, 0.15); color: var(--text); }
html[data-theme="light"] .site-footer { background: #e3f4f6; }
html[data-theme="light"] .card:hover,
html[data-theme="light"] .team-card:hover,
html[data-theme="light"] .program:hover,
html[data-theme="light"] .post-card:hover { box-shadow: 0 14px 34px rgba(40, 96, 110, 0.16); }
html[data-theme="light"] .card-icon { background: rgba(38, 167, 189, 0.08); border-color: rgba(38, 167, 189, 0.3); color: var(--purple); }
html[data-theme="light"] .note { background: rgba(38, 167, 189, 0.06); }
html[data-theme="light"] .prompt-block { background: rgba(13, 191, 196, 0.05); border-color: rgba(13, 191, 196, 0.3); }
html[data-theme="light"] .event-card-inner {
  background:
    radial-gradient(700px 400px at 85% 0%, rgba(38, 167, 189, 0.07), transparent 60%),
    #ffffff;
}
html[data-theme="light"] .event-card { box-shadow: 0 20px 50px rgba(40, 96, 110, 0.18); }
html[data-theme="light"] .article th { background: rgba(38, 167, 189, 0.1); }
html[data-theme="light"] .article tr:nth-child(even) td { background: rgba(36, 192, 207, 0.04); }
html[data-theme="light"] .team-meta .role { color: #8ffdff; }
/* --cyan is a text colour in two places that sit directly on the page
   background. In light mode it measures 2.4 to 2.8:1 there, so those two
   uses get a darker teal: 5.3 to 6.3:1 across every light surface. The
   variable itself is unchanged, so icons, borders and accents keep the
   brighter colour. */
html[data-theme="light"] a { color: #0b6a72; }
html[data-theme="light"] .section-head .eyebrow { color: #0b6a72; }
html[data-theme="light"] .footer-legal a { color: var(--text-dim); }
html[data-theme="light"] .footer-legal a:hover { color: #0b6a72; }
/* navy logo assets are swapped in by JS in light mode */
html[data-theme="light"] .hero-logo img { filter: drop-shadow(0 0 26px rgba(38, 167, 189, 0.25)); }
html[data-theme="light"] .brand img { filter: drop-shadow(0 0 8px rgba(38, 167, 189, 0.25)); }

/* ============================================================
   Reader controls (text size + bold text)
   Injected by main.js so every page gets the identical control.
   The saved setting is applied by an inline script in <head>, so
   the scaled size is in place before first paint.
   ============================================================ */

/* Bold text mode. Inter ships 400/500/600 and Space Grotesk 500/600/700,
   so 600 is a real weight here, not a synthesised one. Headings keep
   their own weights; this lifts body-level text only. */
html[data-bold="on"] body { font-weight: 600; }
html[data-bold="on"] body :is(p, li, a, span, dd, dt, td, th, figcaption,
  label, blockquote, .lede, .kicker, .eyebrow, .label, .role, .date,
  .breadcrumb, .byline, .footer-legal, .readmore) { font-weight: 600 !important; }

/* Reader controls, sitting in the nav next to the theme toggle so the two
   read as one accessibility cluster. Injected by main.js. */
.nav-a11y { position: relative; display: flex; align-items: center; }
.a11y-launch {
  background: rgba(58, 242, 255, 0.08);
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--text); cursor: pointer;
  transition: background 0.25s ease, transform 0.25s ease;
}
.a11y-launch:hover { background: rgba(58, 242, 255, 0.18); transform: translateY(-1px); }
.a11y-launch svg { width: 20px; height: 20px; }

.a11y-panel {
  position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 120;
  width: 19.5rem; max-width: calc(100vw - 2rem);
  background: var(--panel-solid);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 18px 44px rgba(3, 12, 20, 0.55);
  padding: 1rem;
  display: none;
}
.a11y-panel[data-open="true"] { display: block; }
.a11y-panel h2 {
  font-family: var(--font-head); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
  margin: 0 0 0.7rem;
}
.a11y-group { margin-bottom: 0.9rem; }
.a11y-legend { display: block; font-size: 0.82rem; color: var(--text-dim); margin-bottom: 0.4rem; }
.a11y-sizes { display: flex; gap: 0.35rem; flex-wrap: wrap; }
.a11y-btn {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 600;
  padding: 0.4rem 0.65rem; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--line); cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.a11y-btn:hover { color: var(--text); background: rgba(0, 175, 204, 0.12); }
.a11y-btn[aria-pressed="true"] {
  background: var(--grad-cta); color: var(--grad-ink); border-color: transparent;
}
.a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; width: 100%; }
.a11y-reset {
  width: 100%; margin-top: 0.1rem; text-align: center;
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  padding: 0.45rem 0.65rem; border-radius: var(--radius-sm);
  background: transparent; color: var(--cyan);
  border: 1px solid var(--line); cursor: pointer;
}
.a11y-reset:hover { color: var(--text); background: rgba(0, 175, 204, 0.12); }
html[data-theme="light"] .a11y-reset { color: #0b6a72; }
html[data-theme="light"] .a11y-panel { box-shadow: 0 18px 44px rgba(40, 96, 110, 0.22); }

/* In the collapsed mobile nav the cluster becomes a normal row and the panel
   flows inline, so it can never sit off the top of a 375px bar. */
@media (max-width: 880px) {
  .nav-a11y { display: flex; justify-content: flex-start; padding: 0.5rem 1rem; flex-wrap: wrap; }
  .a11y-panel {
    position: static; width: 100%; max-width: none;
    margin-top: 0.6rem; box-shadow: none;
  }
}

@media print { .nav-a11y { display: none !important; } }