/* =========================================================
   STEM Origin — site styles
   Brand colors carried over from the original site:
   paper #F4F4F7, ink #0F1626, signal blue #2B59FF,
   plus the logo's leaf green and trace teal.
   Type: Archivo Expanded (closest free match to Murs Gothic),
   Inter (same as the original body text), JetBrains Mono (bio).
   ========================================================= */

:root {
  --paper: #F4F4F7;
  --paper-2: #E8E9F0;
  --ink: #0F1626;
  --ink-2: #1A2339;
  --muted: #4A5268;
  --signal: #2B59FF;
  --signal-2: #1D44DB;
  --signal-soft: #D6E0FF;
  --signal-light: #9FB3FF;
  --leaf: #45A74E;
  --leaf-deep: #1E6B34;
  --trace: #123B4F;
  --rule-soft: rgba(15, 22, 38, .14);

  --display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;

  --nav-h: 72px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --ease: cubic-bezier(.2, .75, .15, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --step--1: .875rem;
  --step-0: 1.0625rem;
  --step-1: clamp(1.125rem, 1rem + .55vw, 1.375rem);
  --step-2: clamp(1.3rem, 1.05rem + 1vw, 1.875rem);
  --step-3: clamp(1.75rem, 1.25rem + 2.2vw, 3rem);
  --step-4: clamp(2.4rem, 1.5rem + 4.2vw, 5.25rem);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--signal); color: var(--paper); }
body.menu-open { overflow: hidden; }

.display {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -.012em;
  line-height: .95;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: absolute;
  left: 12px; top: -64px;
  z-index: 100;
  padding: .7rem 1.1rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--paper);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s;
}
.skip:focus { top: 12px; }
:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Logo mark ---------- */
.mark { overflow: visible; height: auto; }
.mark__roots path {
  stroke: var(--mark-root, var(--trace));
  stroke-width: 3.6;
}
.term {
  fill: var(--mark-term, var(--paper));
  stroke: var(--mark-root, var(--trace));
  stroke-width: 3;
}
.mark__stem {
  fill: none;
  stroke: var(--leaf-deep);
  stroke-width: 3.6;
  stroke-linecap: round;
}
.leaf__blade {
  fill: var(--leaf);
  stroke: var(--leaf-deep);
  stroke-width: 2;
  stroke-linejoin: round;
}
.leaf__vein {
  fill: none;
  stroke: var(--leaf-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  opacity: .75;
}
.term, .leaf { transform-box: fill-box; }
.term { transform-origin: center; }
.leaf--top, .leaf--right { transform-origin: 0% 100%; }
.leaf--left { transform-origin: 100% 100%; }

@media (prefers-reduced-motion: no-preference) {
  .js .mark[data-grow] .mark__roots path,
  .js .mark[data-grow] .mark__stem { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .js .mark[data-grow] .term,
  .js .mark[data-grow] .leaf { transform: scale(0); }
  .js .mark[data-grow].is-growing .mark__roots path,
  .js .mark[data-grow].is-growing .mark__stem {
    animation: draw .7s var(--ease) var(--d, 0s) forwards;
  }
  .js .mark[data-grow].is-growing .term {
    animation: pop .45s var(--ease) var(--d, 0s) forwards;
  }
  .js .mark[data-grow].is-growing .leaf {
    animation: unfurl .85s var(--ease) var(--d, 0s) forwards;
  }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop {
  0% { transform: scale(0); }
  65% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
@keyframes unfurl {
  0% { transform: scale(0) rotate(-16deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--signal);
  --fg: var(--paper);
  --sweep: var(--ink);
  --sweep-fg: var(--paper);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: .75em;
  padding: .95em 1.55em;
  border: 0;
  border-radius: 999px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 112%;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: color .35s var(--ease), transform .55s var(--ease);
}
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--sweep);
  transform: translateX(-101%);
  transition: transform .5s var(--ease);
}
.btn:hover::before, .btn:focus-visible::before { transform: none; }
.btn:hover, .btn:focus-visible { color: var(--sweep-fg); }
.btn__via {
  flex: none;
  width: .62em; height: .62em;
  border: 2px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s, transform .35s var(--ease);
}
.btn:hover .btn__via, .btn:focus-visible .btn__via,
.btn.is-done .btn__via { background: currentColor; transform: scale(1.15); }
.btn--ink { --bg: var(--ink); --sweep: var(--paper); --sweep-fg: var(--ink); }
.btn--ghost {
  --bg: transparent; --fg: var(--ink); --sweep: var(--ink); --sweep-fg: var(--paper);
  box-shadow: inset 0 0 0 1.5px var(--ink);
}
.btn--xl { font-size: clamp(1.05rem, .9rem + .7vw, 1.4rem); padding: 1.1em 1.9em; }
.btn--sm { font-size: .875rem; padding: .78em 1.35em; }

/* ---------- Structural rules that draw themselves in ---------- */
.r-t, .r-l { position: relative; }
.r-t::before, .r-l::after {
  content: "";
  position: absolute;
  z-index: 2;
  background: var(--rule-c, var(--ink));
  pointer-events: none;
}
.r-t::before { left: 0; right: 0; top: 0; height: 1px; transform-origin: left; }
.r-l::after { top: 0; bottom: 0; left: 0; width: 1px; transform-origin: top; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .r-t::before, .js [data-reveal].r-t::before {
    transform: scaleX(0);
    transition: transform 1.3s var(--ease) var(--rd, .05s);
  }
  .js [data-reveal] .r-l::after, .js [data-reveal].r-l::after {
    transform: scaleY(0);
    transition: transform 1.3s var(--ease) var(--rd, .35s);
  }
  .js [data-reveal].is-in .r-t::before, .js [data-reveal].is-in.r-t::before,
  .js [data-reveal].is-in .r-l::after, .js [data-reveal].is-in.r-l::after { transform: none; }
}

/* ---------- Navigation ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: var(--ink);
  color: var(--paper);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding: 0 var(--gutter);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-right: auto;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1rem;
  letter-spacing: .01em;
  white-space: nowrap;
}
.brand__mark {
  width: 30px;
  --mark-root: var(--paper);
  --mark-term: var(--ink);
  transition: transform .5s var(--ease);
}
.brand:hover .brand__mark { transform: translateY(-2px) rotate(-4deg); }
.nav__links {
  display: flex;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__links a {
  position: relative;
  display: block;
  padding: .5rem 0;
  font-size: .95rem;
  text-decoration: none;
  color: rgba(244, 244, 247, .72);
  transition: color .25s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: .15rem;
  height: 2px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--paper); }
.nav__links a:hover::after, .nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}
.nav__links a[aria-current="page"]::after { background: var(--paper); }
.nav__donate { --sweep: var(--paper); --sweep-fg: var(--ink); }
.nav__progress {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px;
  width: calc(var(--progress, 0) * 100%);
  background: var(--signal);
  pointer-events: none;
}
.nav__progress::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 9px; height: 9px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(43, 89, 255, .25);
  opacity: var(--progress-dot, 0);
  transition: opacity .3s;
}
.nav__toggle {
  display: none;
  align-items: center;
  gap: .6rem;
  padding: .55rem .95rem;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 244, 247, .08);
  color: var(--paper);
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.nav__burger {
  position: relative;
  width: 18px; height: 2px;
  background: currentColor;
  transition: background-color .2s;
}
.nav__burger::before, .nav__burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform .35s var(--ease);
}
.nav__burger::before { transform: translateY(-6px); }
.nav__burger::after { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] .nav__burger { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__burger::before { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__burger::after { transform: rotate(-45deg); }

.menu {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0; bottom: 0;
  z-index: 55;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 1.5rem var(--gutter) 3rem;
  overflow-y: auto;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-102%);
  visibility: hidden;
  transition: transform .55s var(--ease), visibility 0s linear .55s;
}
.menu.is-open {
  transform: none;
  visibility: visible;
  transition: transform .55s var(--ease);
}
.menu__links { list-style: none; margin: 0; padding: 0; }
.menu__links a {
  display: block;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(244, 244, 247, .14);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.6rem, 7vw, 2.5rem);
  line-height: 1.05;
  text-decoration: none;
}
.menu__links a[aria-current="page"] { color: var(--signal-light); }
.menu__donate { align-self: flex-start; --sweep: var(--paper); --sweep-fg: var(--ink); }

@media (max-width: 960px) {
  :root { --nav-h: 64px; }
  .nav__inner > nav, .nav__donate { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 961px) {
  .menu { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  grid-template-columns: minmax(0, 1fr);
  min-height: calc(100svh - var(--nav-h));
  overflow: hidden;
  cursor: crosshair;
}
.hero a, .hero button { cursor: pointer; }
.hero__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.hero > :not(canvas) { position: relative; z-index: 1; }
.hero__index {
  padding: 1.4rem var(--gutter) 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: .95rem;
}
.hero__mark-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 1.5rem 0 clamp(1.5rem, 4vh, 3rem);
  pointer-events: none;
}
.hero__mark { width: auto; height: clamp(130px, 24vh, 236px); }
.hero__wordmark {
  min-width: 0;
  overflow: hidden;
  padding: 0 var(--gutter);
  margin-bottom: clamp(1.5rem, 3.5vw, 3rem);
  line-height: 1;
}
.fit {
  display: inline-block;
  white-space: nowrap;
  line-height: .86;
}
.chars { display: inline-block; }
.fit .w, .fit .ch { display: inline-block; }
.hero .fit {
  font-size: 10vw;
  overflow: hidden;
  padding: .06em 0 .02em;
  vertical-align: top;
}
.hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: rgba(244, 244, 247, .9);
}
.hero__tagline {
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--gutter);
  font-size: var(--step-3);
  max-width: 13ch;
  box-sizing: content-box;
}
.hero__copy {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.75rem;
  padding: clamp(1.75rem, 3.5vw, 3rem) var(--gutter);
}
.hero__copy p { font-size: var(--step-1); max-width: 46ch; }

@media (prefers-reduced-motion: no-preference) {
  .js .hero:not(.is-in) .hero__wordmark { visibility: hidden; }
  .js .hero:not(.is-in) .ch { transform: translateY(112%); }
  .js .hero .ch { transition: transform 1.05s var(--ease) calc(var(--i) * 42ms + 120ms); }
  .js .hero:not(.is-in) .hero__split > *,
  .js .hero:not(.is-in) .hero__index { opacity: 0; transform: translateY(14px); }
  .js .hero .hero__split > *,
  .js .hero .hero__index { transition: opacity .9s var(--ease) .8s, transform .9s var(--ease) .8s; }
}

@media (max-width: 720px) {
  .hero .fit .w { display: block; }
  .hero .fit .sp { display: none; }
  .hero__split { grid-template-columns: 1fr; }
  .hero__copy { padding-top: 0; }
  .hero__copy.r-l::after { display: none; }
  .hero__tagline { padding-bottom: 1.25rem; }
}

/* ---------- Mission ---------- */
.mission__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
}
.mission__head {
  display: flex;
  align-items: flex-end;
  min-height: clamp(320px, 36vw, 520px);
  padding: clamp(2rem, 4vw, 3.5rem) var(--gutter);
}
.mission__head h2 { font-size: var(--step-4); }
.mission__text {
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 3rem);
}
.mission__text p { font-size: var(--step-1); max-width: 40ch; }
.kw {
  padding: 0 .1em;
  margin: 0 -.1em;
  border-radius: 4px;
  background: linear-gradient(var(--signal-soft), var(--signal-soft)) left center / 0% 100% no-repeat;
  transition: background-size .55s var(--ease);
}
.kw.is-lit { background-size: 100% 100%; }

.mission__stem { display: flex; }
.stem-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-soft);
}
.stem-tile {
  position: relative;
  min-height: 160px;
  border: 0;
  padding: 0;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background-color .45s var(--ease), color .45s var(--ease);
}
.stem-tile:focus-visible { outline-offset: -4px; }
.stem-tile__letter {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: clamp(3.2rem, 6.4vw, 6.25rem);
  line-height: 1;
  transition: transform .65s var(--ease);
}
.stem-tile__word {
  position: absolute;
  left: 1.1rem; bottom: 1rem;
  font-weight: 600;
  font-size: clamp(.9rem, .8rem + .3vw, 1.05rem);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s var(--ease), transform .55s var(--ease);
}
.stem-tile__icon {
  position: absolute;
  right: 1rem; top: 1rem;
  width: clamp(34px, 3.6vw, 50px);
  height: auto;
  color: var(--signal-light);
  opacity: 0;
  transform: scale(.55) rotate(-25deg);
  transition: opacity .4s var(--ease), transform .7s var(--ease);
}
.stem-tile__icon * { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.stem-tile__icon .solid { fill: currentColor; stroke: none; }
.stem-tile:hover, .stem-tile:focus-visible, .stem-tile[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.stem-tile:hover .stem-tile__letter,
.stem-tile:focus-visible .stem-tile__letter,
.stem-tile[aria-pressed="true"] .stem-tile__letter { transform: translate(-30%, -30%) scale(.4); }
.stem-tile:hover .stem-tile__word,
.stem-tile:focus-visible .stem-tile__word,
.stem-tile[aria-pressed="true"] .stem-tile__word { opacity: 1; transform: none; }
.stem-tile:hover .stem-tile__icon,
.stem-tile:focus-visible .stem-tile__icon,
.stem-tile[aria-pressed="true"] .stem-tile__icon { opacity: 1; transform: none; }
.stem-tile[aria-pressed="true"] { background: var(--signal); }
.stem-tile[aria-pressed="true"] .stem-tile__icon { color: var(--paper); }

@media (max-width: 1080px) {
  .mission__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .mission__stem { grid-column: 1 / -1; }
  .mission__stem.r-l::after { display: none; }
  .stem-grid { grid-template-columns: repeat(4, 1fr); }
  .stem-tile { aspect-ratio: 1; min-height: 0; }
}
@media (max-width: 720px) {
  .mission__grid { grid-template-columns: 1fr; }
  .mission__head { min-height: 0; padding-bottom: 1rem; padding-top: 3rem; }
  .mission__text { padding: 1rem var(--gutter) 2.75rem; }
  .mission__text.r-l::after, .mission__text.r-t::before { display: none; }
  .stem-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Get Involved band ---------- */
.band {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 9vw, 7.5rem) var(--gutter);
  background: var(--signal);
  color: var(--paper);
  text-align: center;
}
.band__traces {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.band__lines path { fill: none; stroke: rgba(255, 255, 255, .24); stroke-width: 1.6; }
.band__vias circle { fill: var(--signal); stroke: rgba(255, 255, 255, .55); stroke-width: 1.6; }
.band__pulses path {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .07 1.4;
  stroke-dashoffset: .07;
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .band.is-live .band__pulses path {
    opacity: 1;
    animation: pulse-run 1.7s var(--ease-io) var(--d, 0s) infinite;
  }
}
@keyframes pulse-run {
  from { stroke-dashoffset: .07; }
  to { stroke-dashoffset: -1; }
}
.band__inner {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
}
.band h2 { font-size: var(--step-4); }
.band p { max-width: 52ch; font-size: var(--step-1); color: rgba(244, 244, 247, .92); }
.band .btn { margin-top: .75rem; }
.band .btn:focus-visible { outline-color: var(--paper); }

/* ---------- Sign-off (logo) ---------- */
.sign-off {
  display: grid;
  justify-items: center;
  gap: 1.1rem;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--gutter);
  text-align: center;
}
.lockup {
  display: grid;
  justify-items: center;
  gap: .8rem;
  padding: 1rem 1.5rem;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: pointer;
}
.lockup .mark { width: clamp(96px, 11vw, 132px); }
.lockup__text {
  color: var(--trace);
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: .95;
  letter-spacing: .03em;
}
.sign-off__tag { font-size: var(--step-2); }
.sign-off__legal { color: var(--muted); font-size: var(--step--1); }

/* ---------- Footer ---------- */
.footer {
  overflow: hidden;
  padding: clamp(3.5rem, 7vw, 5.5rem) var(--gutter) 2rem;
  background: var(--ink);
  color: var(--paper);
}
.footer__wordmark {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  line-height: .9;
}
.footer__wordmark .fit { font-size: 11vw; }
.footer__wordmark .ch {
  transition: font-stretch .6s var(--ease), font-weight .6s var(--ease);
}
.footer__wordmark .fit.is-tracking .ch { transition-duration: .2s; }
.footer__wordmark .fit.is-measuring .ch { transition: none; }
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}
.footer__cols h2 {
  margin-bottom: .55rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: 1rem;
}
.footer__cols p { color: rgba(244, 244, 247, .76); font-size: .95rem; }
.footer__cols a { text-decoration: none; overflow-wrap: anywhere; }
.footer__cols a:hover { color: var(--paper); text-decoration: underline; }
.footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.75rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(244, 244, 247, .14);
  font-size: .875rem;
}
.footer__nav a { color: rgba(244, 244, 247, .62); text-decoration: none; }
.footer__nav a:hover { color: var(--paper); }
.footer :focus-visible { outline-color: var(--signal-light); }
@media (max-width: 720px) {
  .footer__cols { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ---------- Inner page header ---------- */
.page-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: clamp(270px, 44vh, 440px);
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--gutter) clamp(2rem, 4vw, 3.25rem);
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  cursor: crosshair;
}
.page-head canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.page-title {
  position: relative;
  max-width: 15ch;
  font-size: min(var(--step-4), calc((100vw - 2 * var(--gutter)) / 11.5));
  hyphens: auto;
}
@media (prefers-reduced-motion: no-preference) {
  .js .page-head .page-title {
    animation: title-in 1.1s var(--ease) .1s both;
  }
}
@keyframes title-in {
  from { clip-path: inset(0 0 100% 0); transform: translateY(.3em); }
  to { clip-path: inset(0 0 -10% 0); transform: none; }
}

/* ---------- Circuit list (responsibilities / steps) ---------- */
.duties { padding: clamp(3rem, 7vw, 6rem) var(--gutter) clamp(3rem, 6vw, 5rem); }
.trace-list {
  --node: 18px;
  position: relative;
  max-width: 60rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.trace-list__rail, .trace-list__current {
  position: absolute;
  left: calc(var(--node) / 2 - 1px);
  top: 0;
  width: 2px;
  pointer-events: none;
}
.trace-list__rail { bottom: 0; background: var(--rule-soft); }
.trace-list__current {
  height: var(--fill, 0px);
  background: var(--signal);
  box-shadow: 0 0 14px rgba(43, 89, 255, .45);
}
.trace-list__item {
  position: relative;
  padding-left: calc(var(--node) + clamp(1.5rem, 3.5vw, 3rem));
  font-size: clamp(1.2rem, .95rem + 1.1vw, 1.75rem);
  line-height: 1.32;
}
.trace-list__item + .trace-list__item { margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.trace-list__item p {
  max-width: 34em;
  font-weight: 500;
  color: var(--muted);
  transition: color .5s var(--ease);
}
.trace-list__node {
  position: absolute;
  left: 0;
  top: calc(.66em - var(--node) / 2);
  display: grid;
  place-items: center;
  width: var(--node);
  height: var(--node);
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  font-family: var(--mono);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color .4s, border-color .4s, color .4s, box-shadow .5s var(--ease), transform .5s var(--ease);
}
.trace-list__item.is-lit p { color: var(--ink); }
.trace-list__item.is-lit .trace-list__node {
  border-color: var(--signal);
  background: var(--signal);
  color: var(--paper);
  box-shadow: 0 0 0 7px rgba(43, 89, 255, .15);
  transform: scale(1.08);
}
.trace-list--steps { --node: 40px; }
.trace-list--steps .trace-list__item { padding-left: calc(var(--node) + clamp(1.25rem, 3vw, 2.5rem)); }
.no-js .trace-list__item p { color: var(--ink); }

/* ---------- Application panel ---------- */
.apply {
  --panel-pad: clamp(1.75rem, 5vw, 4.5rem);
  padding: 0 var(--gutter) clamp(3.5rem, 8vw, 7rem);
}
.apply__panel {
  position: relative;
  display: grid;
  justify-items: start;
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--panel-pad);
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink);
  color: var(--paper);
}
.apply__deco {
  position: absolute;
  top: 0; right: 0;
  width: min(46%, 440px);
  height: auto;
  pointer-events: none;
}
.apply__deco path { fill: none; stroke: rgba(244, 244, 247, .13); stroke-width: 1.6; }
.apply__deco circle { fill: var(--ink); stroke: rgba(244, 244, 247, .28); stroke-width: 1.6; }
.apply__rule {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  max-width: 34ch;
  font-size: var(--step-2);
  font-weight: 500;
  line-height: 1.3;
}
.apply__rule svg { flex: none; width: 1.15em; height: 1.15em; margin-top: .1em; color: var(--signal-light); }
.apply__rule svg circle { fill: none; stroke: currentColor; stroke-width: 2.4; }
.apply__rule svg .dot { fill: currentColor; stroke: none; }

.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--step-1);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}
.switch input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.switch__track {
  position: relative;
  flex: none;
  width: 56px; height: 32px;
  border-radius: 999px;
  background: rgba(244, 244, 247, .16);
  transition: background-color .35s var(--ease);
}
.switch__thumb {
  position: absolute;
  top: 4px; left: 4px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--paper);
  transition: transform .45s var(--ease);
}
.switch input:checked + .switch__track { background: var(--signal); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(24px); }
.switch input:focus-visible + .switch__track { outline: 3px solid var(--signal-light); outline-offset: 3px; }
.switch.is-nudged .switch__track { animation: nudge .5s var(--ease); box-shadow: 0 0 0 6px rgba(159, 179, 255, .3); }
@keyframes nudge {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.apply__wire {
  position: relative;
  width: 2px;
  height: clamp(44px, 6vw, 72px);
  margin: .9rem 0 .9rem calc(var(--wire-x, 28px) - 1px);
  overflow: hidden;
  background: rgba(244, 244, 247, .18);
}
.apply__wire::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--signal);
  box-shadow: 0 0 12px var(--signal);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .6s var(--ease);
}
.apply.is-powered .apply__wire::after { transform: none; }
.apply__title {
  font-size: min(clamp(2.1rem, 1rem + 5vw, 5rem), calc((100vw - 2 * var(--gutter) - 2 * var(--panel-pad)) / 9.5));
  line-height: 1;
}
.apply__link {
  display: inline;
  padding-bottom: .06em;
  color: rgba(244, 244, 247, .36);
  text-decoration: none;
  background: linear-gradient(var(--signal), var(--signal)) left bottom / 0% .075em no-repeat;
  transition: color .5s var(--ease), background-size .8s var(--ease) .15s;
}
.apply.is-powered .apply__link { color: var(--paper); background-size: 100% .075em; }
.apply.is-powered .apply__link:hover { color: var(--signal-light); }
.no-js .apply__link { color: var(--paper); background-size: 100% .075em; }
.apply__hint {
  min-height: 1.5em;
  margin-top: 1rem;
  color: rgba(244, 244, 247, .64);
  font-size: var(--step--1);
}
.apply__alt {
  justify-self: stretch;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid rgba(244, 244, 247, .14);
  color: rgba(244, 244, 247, .8);
  font-size: var(--step-0);
}
.apply__alt a { color: var(--signal-light); }
.apply__alt a:hover { color: var(--paper); }
.apply :focus-visible { outline-color: var(--signal-light); }

/* ---------- About ---------- */
.journey {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: calc(100svh - var(--nav-h));
}
.journey__board {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 340px;
  padding-top: clamp(3rem, 12vh, 7rem);
  overflow: hidden;
  background: var(--ink);
  cursor: crosshair;
}
.journey__board canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.journey__board .mark {
  position: relative;
  width: clamp(90px, 9vw, 128px);
  align-self: flex-start;
  --mark-root: #C9D4FF;
  --mark-term: var(--ink);
  pointer-events: none;
}
.journey__text {
  display: grid;
  align-content: center;
  gap: 1.75rem;
  padding: clamp(2.75rem, 6vw, 6rem) var(--gutter);
}
.journey__text .page-title { max-width: 12ch; margin-bottom: .5rem; }
.journey__text p { max-width: 48ch; font-size: var(--step-1); color: var(--muted); }
.journey__text .lede { max-width: 32ch; font-size: var(--step-2); font-weight: 500; line-height: 1.3; color: var(--ink); }

.team { padding: clamp(3.5rem, 8vw, 7rem) var(--gutter); }
.team__title {
  padding-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
  font-size: var(--step-4);
}
.member {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.member__id {
  position: sticky;
  top: calc(var(--nav-h) + 2rem);
  display: grid;
  justify-items: start;
  gap: 1rem;
}
.member__badge {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(124px, 13vw, 168px);
  aspect-ratio: 1;
  margin-bottom: .5rem;
}
.member__badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: transform 1.2s var(--ease);
}
.member__badge svg path, .member__badge svg .ring { fill: none; stroke: var(--ink); stroke-width: 2; }
.member__badge svg .via { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.member__badge svg .ring-in { fill: none; stroke: var(--signal); stroke-width: 2; stroke-dasharray: 4 6; }
.member:hover .member__badge svg { transform: rotate(60deg); }
.member__badge span { font-family: var(--mono); font-size: clamp(1.3rem, 2vw, 1.75rem); font-weight: 500; }
.member__id h3 { font-size: var(--step-3); }
.member__role {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem 1rem .45rem .8rem;
  border-radius: 999px;
  background: var(--signal);
  color: var(--paper);
  font-weight: 600;
  font-size: .9rem;
}
.member__role::before {
  content: "";
  width: .55rem; height: .55rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.member__bio {
  --bio-pad: clamp(1.5rem, 3vw, 2.5rem);
  position: relative;
  display: grid;
  gap: 2rem;
  padding-left: var(--bio-pad);
  font-family: var(--mono);
  font-size: clamp(1rem, .9rem + .4vw, 1.2rem);
  line-height: 1.75;
}
.member__bio::before {
  content: "";
  position: absolute;
  left: 0; top: .9em; bottom: .9em;
  width: 2px;
  background: var(--rule-soft);
}
.member__bio p { position: relative; max-width: 58ch; }
.member__bio p::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--bio-pad) - 5px);
  top: .62em;
  width: 12px; height: 12px;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.member__bio p:first-child::before { background: var(--signal); border-color: var(--signal); }

@media (max-width: 960px) {
  .journey { grid-template-columns: 1fr; min-height: 0; }
  .journey__board { min-height: 42vh; }
  .journey__text.r-l::after { display: none; }
  .member { grid-template-columns: 1fr; }
  .member__id { position: static; }
}

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact__cell {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 1.35rem;
  padding: clamp(2.75rem, 6vw, 5rem) var(--gutter);
}
.contact__cell h2 { font-size: var(--step-3); }
.contact__email {
  max-width: 100%;
  padding-bottom: .12em;
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 110%;
  font-size: clamp(1.15rem, .8rem + 1.4vw, 1.9rem);
  line-height: 1.25;
  text-decoration: none;
  overflow-wrap: anywhere;
  background: linear-gradient(var(--signal), var(--signal)) left bottom / 100% 2px no-repeat;
  transition: color .3s;
}
.contact__email:hover { color: var(--signal); }
.contact__cell p { max-width: 36ch; font-size: var(--step-1); }
@media (max-width: 720px) {
  .contact { grid-template-columns: 1fr; }
  .contact__cell.r-l::after { display: none; }
}

/* ---------- 404 ---------- */
.lost {
  display: grid;
  justify-items: start;
  gap: 1.5rem;
  padding: clamp(3rem, 7vw, 5rem) var(--gutter) clamp(4rem, 9vw, 7rem);
}
.lost p { font-size: var(--step-1); max-width: 40ch; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}