/* ============================================================
   Pennridge STEM Initiative — riso-print science poster
   ============================================================ */

:root{
  /* ink + paper */
  --paper:      #EDEDE6;
  --paper-2:    #E3E4DA;
  --paper-3:    #D7D9CC;
  --ink:        #14181C;
  --ink-2:      #3E464E;
  --ink-3:      #6B7580;
  --rule:       #C6C9B9;

  /* riso overprint inks */
  --blue:       #1F3FC4;
  --blue-soft:  #C9D2F4;
  --pink:       #F5386F;
  --pink-soft:  #FBD2DE;
  --acid:       #C8DB1F;
  --acid-soft:  #ECF3B6;

  --on-blue:    #F4F5EE;
  --on-pink:    #241014;
  --on-acid:    #1A1D08;

  /* dark-panel surfaces (used in both themes) */
  --deep:       #13161B;
  --deep-2:     #1C2027;
  --deep-line:  #2C323C;
  --deep-text:  #E7E8DF;
  --deep-dim:   #98A1AC;

  --shadow: 0 1px 0 var(--rule);
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 72px);

  --fs-display: clamp(2.3rem, 11vw, 8.2rem);
  --fs-h2:      clamp(2rem, 5.2vw, 3.6rem);
  --fs-h3:      clamp(1.3rem, 2.4vw, 1.7rem);
  --fs-body:    clamp(1.02rem, 1.25vw, 1.1rem);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:     #15171B;
    --paper-2:   #1D2026;
    --paper-3:   #262A32;
    --ink:       #E9EAE1;
    --ink-2:     #B4BAC2;
    --ink-3:     #8A929C;
    --rule:      #333942;

    --blue:      #8AA0FF;
    --blue-soft: #232C4D;
    --pink:      #FF7EA3;
    --pink-soft: #3B1F2A;
    --acid:      #D7E838;
    --acid-soft: #2E3316;

    --on-blue:   #0E1120;
    --on-pink:   #23101A;
    --on-acid:   #1A1D08;

    --deep:      #0E1014;
    --deep-2:    #171A20;
    --deep-line: #2A2F38;
    --deep-text: #E9EAE1;
    --deep-dim:  #939BA6;

    --shadow: 0 1px 0 var(--rule);
  }
}

:root[data-theme="dark"]{
  --paper:     #15171B;
  --paper-2:   #1D2026;
  --paper-3:   #262A32;
  --ink:       #E9EAE1;
  --ink-2:     #B4BAC2;
  --ink-3:     #8A929C;
  --rule:      #333942;

  --blue:      #8AA0FF;
  --blue-soft: #232C4D;
  --pink:      #FF7EA3;
  --pink-soft: #3B1F2A;
  --acid:      #D7E838;
  --acid-soft: #2E3316;

  --on-blue:   #0E1120;
  --on-pink:   #23101A;
  --on-acid:   #1A1D08;

  --deep:      #0E1014;
  --deep-2:    #171A20;
  --deep-line: #2A2F38;
  --deep-text: #E9EAE1;
  --deep-dim:  #939BA6;

  --shadow: 0 1px 0 var(--rule);
}

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

body{
  margin: 0;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Newsreader", Georgia, "Times New Roman", serif;
  font-size: var(--fs-body);
  line-height: 1.62;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4{
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-variation-settings: "wdth" 112;
  text-wrap: balance;
  margin: 0;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
p{ margin: 0; }
ul, ol{ margin: 0; padding: 0; list-style: none; }
a{ color: inherit; }

.kicker, .eyebrow, .station-no, .stage-grade, .year-label, .card-tag, .jc-role, .rl{
  font-family: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.skip{
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: var(--on-blue);
  padding: 12px 18px; font-family: "DM Mono", monospace; font-size: .8rem;
}
.skip:focus{ left: 8px; top: 8px; }

:where(a, button, summary, input, [tabindex]):focus-visible{
  outline: 3px solid var(--pink);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ───────────── top bar ───────────── */
.topbar{
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 12px var(--gutter);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand{ display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark{ color: var(--blue); display: block; width: 28px; height: 28px; }
.brand-mark svg{ width: 100%; height: 100%; display: block; animation: spin 24s linear infinite; }
@keyframes spin{ to{ transform: rotate(360deg); } }
.brand-text{ display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b{
  font-family: "Archivo", sans-serif; font-variation-settings: "wdth" 100;
  font-weight: 800; font-size: .88rem; letter-spacing: -0.01em;
}
.brand-text i{
  font-family: "DM Mono", monospace; font-style: normal;
  font-size: .62rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}
.topnav{ display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.topnav a{
  font-family: "Archivo", sans-serif; font-weight: 600; font-size: .84rem;
  text-decoration: none; padding: 7px 11px; color: var(--ink-2);
  border-radius: 2px;
}
.topnav a:hover{ color: var(--ink); background: var(--paper-2); }
.topnav .topnav-cta{
  background: var(--ink); color: var(--paper); margin-left: 6px;
}
.topnav .topnav-cta:hover{ background: var(--blue); color: var(--on-blue); }
.topnav .topnav-sign{
  background: var(--acid); color: var(--on-acid); margin-left: 4px;
}
.topnav .topnav-sign:hover{ background: var(--pink); color: var(--on-pink); }

/* ───────────── sign-up strip ───────────── */
.signup-strip{
  max-width: var(--maxw); margin: clamp(28px, 4vw, 48px) auto 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: clamp(20px, 3vw, 40px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--ink); color: var(--paper);
}
.signup-strip .kicker{ color: var(--acid); display: block; margin-bottom: 12px; }
.ss-text{ flex: 1 1 340px; }
.signup-strip h3{
  font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800;
  font-variation-settings: "wdth" 114; text-transform: uppercase;
  letter-spacing: -0.02em; margin-bottom: 12px; color: var(--paper);
}
.signup-strip p{
  color: color-mix(in srgb, var(--paper) 72%, var(--ink));
  max-width: 54ch; font-size: .98rem;
}
.btn-signup{
  flex: none; background: var(--acid); color: var(--on-acid);
  border-color: var(--acid); font-size: 1rem; padding: 15px 28px;
}
.btn-signup:hover{
  background: var(--pink); border-color: var(--pink); color: var(--on-pink);
  transform: translateY(-2px);
}

/* hamburger — mobile only */
.nav-toggle{
  display: none;
  width: 44px; height: 44px; flex: none;
  align-items: center; justify-content: flex-end;
  background: transparent; border: 0; padding: 0;
  cursor: pointer; color: var(--ink);
}
.nav-toggle .bars{ position: relative; display: block; width: 20px; height: 13px; }
.nav-toggle .bars i{
  position: absolute; left: 0; right: 0; top: 0;
  height: 1.5px; background: currentColor;
  transition: transform .2s ease, opacity .14s ease, top .2s ease;
}
.nav-toggle .bars i:nth-child(2){ top: 5.75px; }
.nav-toggle .bars i:nth-child(3){ top: 11.5px; }
.nav-toggle.is-open .bars i:nth-child(1){ top: 5.75px; transform: rotate(45deg); }
.nav-toggle.is-open .bars i:nth-child(2){ opacity: 0; }
.nav-toggle.is-open .bars i:nth-child(3){ top: 5.75px; transform: rotate(-45deg); }

/* ───────────── hero ───────────── */
.hero{
  position: relative;
  padding: clamp(48px, 8vw, 96px) var(--gutter) clamp(40px, 6vw, 72px);
  border-bottom: 2px solid var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.ripple{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; display: block;
  opacity: .95;
}
.hero-inner{ max-width: var(--maxw); margin-inline: auto; }

.eyebrow{ margin-bottom: clamp(18px, 3vw, 30px); color: var(--ink-2); }

.hero-title{
  font-size: var(--fs-display);
  max-width: 100%;
  font-weight: 800;
  font-variation-settings: "wdth" 123;
  letter-spacing: -0.035em;
  line-height: 0.86;
  text-transform: uppercase;
  margin-bottom: clamp(20px, 3vw, 30px);
}
.hero-title .line{ display: block; }
.hero-title em{
  font-style: normal;
  color: var(--blue);
  -webkit-text-stroke: 0;
}
.hero-lede{
  max-width: 56ch; font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  color: var(--ink-2); line-height: 1.5;
}

.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn{
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: .92rem;
  letter-spacing: .01em;
  padding: 13px 24px; border: 2px solid var(--ink); border-radius: 2px;
  text-decoration: none; cursor: pointer; display: inline-block;
  transition: transform .12s ease, background .15s ease, color .15s ease;
}
.btn-primary{ background: var(--ink); color: var(--paper); }
.btn-primary:hover{ background: var(--pink); border-color: var(--pink); color: var(--on-pink); transform: translateY(-2px); }
.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); transform: translateY(-2px); }

.hero-stats{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 1px; margin: clamp(36px, 5vw, 56px) 0 0;
  background: var(--rule); border: 1px solid var(--rule);
}
.hero-stats > div{
  background: var(--paper); padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.hero-stats dt{
  font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ink-3);
}
.hero-stats dd{
  margin: 0; font-family: "Archivo", sans-serif; font-weight: 800;
  font-variation-settings: "wdth" 118;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--blue);
}
.hero-stats dd.tba{ color: var(--pink); }
.hero-stats span{ font-size: .84rem; color: var(--ink-3); line-height: 1.35; }

.ripple-caption{
  position: relative; max-width: var(--maxw); margin: 26px auto 0;
  font-family: "DM Mono", monospace; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
  display: flex; align-items: center; gap: 8px;
}
.ripple-caption .dot{
  width: 7px; height: 7px; border-radius: 50%; background: var(--pink);
  animation: blip 1.8s ease-in-out infinite;
}
@keyframes blip{ 0%,100%{ opacity: 1 } 50%{ opacity: .25 } }

/* ───────────── marquee ───────────── */
.marquee{
  overflow: hidden; background: var(--ink); color: var(--paper);
  border-bottom: 2px solid var(--ink); padding: 11px 0;
}
.marquee-track{
  display: flex; gap: 30px; width: max-content;
  animation: slide 46s linear infinite;
  font-family: "Archivo", sans-serif; font-weight: 600;
  font-variation-settings: "wdth" 108;
  font-size: .84rem; letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
}
.marquee-track span:nth-child(even){ color: var(--acid); }
/* pausable: hover on a pointer, tap on a touchscreen */
.marquee:hover .marquee-track,
.marquee.is-paused .marquee-track{ animation-play-state: paused; }
@keyframes slide{ to{ transform: translateX(-50%); } }

/* ───────────── panels ───────────── */
.panel{
  padding: clamp(56px, 9vw, 118px) var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.panel-tint{ background: var(--paper-2); }
.panel-dark{
  background: var(--deep); color: var(--deep-text);
  border-bottom: 2px solid var(--deep);
}
.panel-dark .kicker, .panel-dark .station-no, .panel-dark .rl{ color: var(--deep-dim); }
.panel-dark .panel-lede{ color: var(--deep-dim); }

.panel-head{ max-width: var(--maxw); margin: 0 auto clamp(36px, 5vw, 62px); }
.panel-head .kicker{ display: block; margin-bottom: 16px; }
.panel-head h2{
  font-size: var(--fs-h2); font-weight: 800;
  font-variation-settings: "wdth" 118;
  letter-spacing: -0.03em; text-transform: uppercase; line-height: .92;
}
.panel-lede{
  max-width: 62ch; margin-top: 20px; color: var(--ink-2);
  font-size: clamp(1.04rem, 1.4vw, 1.18rem);
}

/* ───────────── pipeline ───────────── */
.pipeline{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
}
.stage{ display: flex; flex-direction: column; gap: 18px; }
.stage-rail{
  height: 10px; position: relative;
  background: linear-gradient(90deg, var(--accent) 0 100%);
  border-radius: 999px;
}
.stage-node{
  position: absolute; right: -1px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent); border: 3px solid var(--paper);
}
.stage-e{ --accent: var(--acid); }
.stage-m{ --accent: var(--pink); }
.stage-h{ --accent: var(--blue); }

.stage-grade{ margin-bottom: 8px; color: var(--ink-3); }
.stage h3{
  font-size: var(--fs-h3); font-weight: 800;
  font-variation-settings: "wdth" 112; margin-bottom: 12px;
}
.stage p{ color: var(--ink-2); }
.stage-note{
  margin-top: 14px; padding-left: 14px;
  border-left: 3px solid var(--accent);
  font-style: italic; color: var(--ink-2); font-size: .96rem;
}
.tags{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tags li{
  font-family: "DM Mono", monospace; font-size: .68rem;
  letter-spacing: .07em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--rule); border-radius: 999px;
  color: var(--ink-2);
}

/* ───────────── stations ───────────── */
.stations{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: clamp(20px, 2.6vw, 34px);
}
.station{
  background: var(--deep-2); border: 1px solid var(--deep-line);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 18px;
}
.station-wide{ grid-column: 1 / -1; }
.station-head h3{
  font-size: var(--fs-h3); font-weight: 800;
  font-variation-settings: "wdth" 112; margin: 8px 0 6px;
  color: var(--deep-text);
}
.station-sub{
  font-family: "DM Mono", monospace; font-size: .72rem;
  letter-spacing: .08em; color: var(--deep-dim); text-transform: uppercase;
}
.station-stage{
  position: relative; background: var(--deep);
  border: 1px solid var(--deep-line); aspect-ratio: 4 / 3; max-width: 100%;
  overflow: hidden;
}
.station-stage-wave{ aspect-ratio: 16 / 6; }
.station-stage canvas{
  display: block; width: 100%; height: 100%;
  touch-action: none; cursor: crosshair;
}
.station-hint{
  position: absolute; left: 12px; bottom: 12px; right: 12px;
  font-family: "DM Mono", monospace; font-size: .68rem;
  letter-spacing: .06em; color: var(--deep-dim);
  pointer-events: none; transition: opacity .4s ease;
}
.station-hint.is-hidden{ opacity: 0; }

.readout{
  display: flex; flex-wrap: wrap;
  gap: 1px; background: var(--deep-line);
  border: 1px solid var(--deep-line);
}
.readout > div{
  flex: 1 1 118px;
  background: var(--deep-2); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.readout .rl{ font-size: .62rem; letter-spacing: .13em; }
.readout .rv{
  font-family: "DM Mono", monospace; font-size: .82rem;
  color: var(--deep-dim); font-variant-numeric: tabular-nums;
}
.readout .rv b{
  font-weight: 500; font-size: 1.12rem; color: var(--acid);
  margin-right: 3px;
}
.pill{
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: .72rem !important; letter-spacing: .12em;
}
.pill-fluid{ background: var(--blue); color: var(--on-blue) !important; }
.pill-solid{ background: var(--pink); color: var(--on-pink) !important; }

.station-why{
  font-size: .95rem; color: var(--deep-dim); line-height: 1.6;
  border-top: 1px solid var(--deep-line); padding-top: 16px; margin-top: auto;
}
.station-why b{ color: var(--deep-text); font-weight: 600; }

.controls{ display: flex; flex-direction: column; gap: 14px; }
.controls-row{ flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 20px; }
.controls-row label{ flex: 1 1 200px; }
.controls label{
  display: flex; flex-direction: column; gap: 7px;
  font-family: "DM Mono", monospace; font-size: .68rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--deep-dim);
}
.controls label b{
  color: var(--acid); font-weight: 500; font-size: .82rem;
  font-variant-numeric: tabular-nums;
}
.ctl-name{ display: block; }
/* a formula is case-sensitive, so it opts out of the label's uppercasing */
.controls .formula{
  font-style: normal;
  text-transform: none;
  letter-spacing: .01em;
  color: var(--deep-text);
  opacity: .7;
}
.controls input[type="range"]{
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 3px; background: var(--deep-line);
  border-radius: 999px; cursor: pointer; margin: 6px 0;
}
.controls input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--acid); border: 3px solid var(--deep-2); cursor: grab;
}
.controls input[type="range"]::-moz-range-thumb{
  width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--deep-2);
  background: var(--acid); cursor: grab;
}
.btn-erupt{
  align-self: flex-start; background: var(--pink); color: var(--on-pink);
  border-color: var(--pink);
}
.btn-erupt:hover{ transform: translateY(-2px); background: var(--acid); border-color: var(--acid); color: var(--on-acid); }

.seg{ display: flex; border: 1px solid var(--deep-line); }
.seg-btn{
  font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 13px; cursor: pointer;
  background: transparent; border: 0; color: var(--deep-dim);
}
.seg-btn + .seg-btn{ border-left: 1px solid var(--deep-line); }
.seg-btn.is-on{ background: var(--acid); color: var(--on-acid); }

/* key for the three plotted curves */
.legend{ display: flex; flex-wrap: nowrap; align-items: center; gap: 13px; }
.legend li{
  display: flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: "DM Mono", monospace; font-size: .64rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--deep-dim);
}
.legend .sw{ width: 15px; height: 0; flex: none; border-top: 2px solid transparent; }
.legend .sw-a{ border-top-color: var(--blue); }
.legend .sw-b{ border-top-color: var(--pink); }
.legend .sw-sum{ border-top: 3px solid var(--acid); }
.legend.is-sum-only .lg-a,
.legend.is-sum-only .lg-b{ display: none; }

/* freeze control for the travelling waves */
.seg-solo{
  font-family: "DM Mono", monospace; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 9px 15px; cursor: pointer;
  background: transparent; border: 1px solid var(--deep-line);
  color: var(--deep-dim); align-self: flex-end;
}
.seg-solo:hover{ color: var(--deep-text); border-color: var(--deep-dim); }
.seg-solo[aria-pressed="true"]{ color: var(--acid); border-color: var(--acid); }

/* ───────────── compete ───────────── */
.compete-grid{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1.35fr 1fr;
  gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
.steps{ display: flex; flex-direction: column; grid-row: span 2; }
.steps li{
  display: flex; gap: 20px; padding: 22px 0;
  border-top: 1px solid var(--rule);
}
.steps li:last-child{ border-bottom: 1px solid var(--rule); }
.step-n{
  flex: none; width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--blue); color: var(--on-blue);
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.steps h4{
  font-size: 1.12rem; font-weight: 700; font-variation-settings: "wdth" 108;
  margin-bottom: 5px;
}
.steps p{ color: var(--ink-2); font-size: .98rem; }

.card{
  border: 1px solid var(--rule); background: var(--paper);
  padding: clamp(20px, 2.4vw, 28px);
}
.card h4{
  font-size: 1.2rem; font-weight: 800; font-variation-settings: "wdth" 110;
  margin-bottom: 14px;
}
.card p{ color: var(--ink-2); font-size: .98rem; }
.card-accent{ background: var(--blue-soft); border-color: var(--blue); }
.card-quiet{ background: var(--paper-2); }
.card-prize{ border-color: var(--pink); background: var(--pink-soft); }
.card-tag{ display: block; margin-bottom: 10px; color: var(--pink); }

.checklist{ display: flex; flex-direction: column; gap: 9px; }
.checklist li{
  position: relative; padding-left: 26px; font-size: .98rem; color: var(--ink);
}
.checklist li::before{
  content: ""; position: absolute; left: 0; top: .55em;
  width: 12px; height: 7px; border-left: 2.5px solid var(--blue);
  border-bottom: 2.5px solid var(--blue); transform: rotate(-45deg);
}
.fine{ margin-top: 16px; font-size: .88rem; font-style: italic; color: var(--ink-2); }

.pending{
  display: flex; align-items: center; gap: 9px; margin-top: 18px;
  font-family: "DM Mono", monospace; font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.pend-dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  animation: blip 2.2s ease-in-out infinite;
}

/* ───────────── timeline ───────────── */
.years{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.year{ background: var(--paper); padding: clamp(22px, 2.6vw, 32px); }
.year-label{ color: var(--accent); margin-bottom: 10px; }
.year-1{ --accent: var(--acid); }
.year-2{ --accent: var(--pink); }
.year-3{ --accent: var(--blue); }
.year h3{
  font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800;
  font-variation-settings: "wdth" 120; text-transform: uppercase;
  margin-bottom: 18px; color: var(--ink);
}
.year ul{ display: flex; flex-direction: column; gap: 10px; }
.year li{
  position: relative; padding-left: 20px; font-size: .96rem; color: var(--ink-2);
}
.year li::before{
  content: ""; position: absolute; left: 0; top: .62em;
  width: 8px; height: 8px; background: var(--accent);
}

/* ───────────── lead ───────────── */
.lead-grid{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 34px);
  align-items: start;
}
.roles{ display: flex; flex-direction: column; }
.roles li{
  display: flex; gap: 18px; align-items: flex-start;
  padding: 20px 0; border-top: 1px solid var(--rule);
}
.roles li:last-child{ border-bottom: 1px solid var(--rule); }
.role-key{
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 2px solid var(--ink); border-radius: 2px;
  font-family: "Archivo", sans-serif; font-weight: 800; font-size: .86rem;
  font-variation-settings: "wdth" 100;
}
.roles li:nth-child(1) .role-key{ background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.roles li:nth-child(2) .role-key{ background: var(--pink); color: var(--on-pink); border-color: var(--pink); }
.roles li:nth-child(3) .role-key{ background: var(--acid); color: var(--on-acid); border-color: var(--acid); }
.roles h4{ font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.roles p{ color: var(--ink-2); font-size: .96rem; }

.lead-notes{ display: flex; flex-direction: column; gap: clamp(20px, 2.6vw, 34px); }
.mini-steps{ counter-reset: ms; display: flex; flex-direction: column; gap: 12px; }
.mini-steps li{
  counter-increment: ms; position: relative; padding-left: 30px;
  font-size: .96rem; color: var(--ink-2);
}
.mini-steps li::before{
  content: counter(ms); position: absolute; left: 0; top: 0;
  font-family: "DM Mono", monospace; font-size: .75rem; color: var(--pink);
}

/* ───────────── founders ───────────── */
.founders{
  max-width: var(--maxw); margin: 0 auto clamp(40px, 5vw, 66px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.founders li{
  border: 1px solid var(--deep-line); background: var(--deep-2);
  padding: clamp(20px, 2.4vw, 28px);
  display: flex; flex-direction: column; gap: 6px;
}
.f-initials{
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-variation-settings: "wdth" 122;
  font-size: 2.6rem; line-height: 1; color: var(--acid); margin-bottom: 12px;
}
.founders h3{ font-size: 1.22rem; font-weight: 700; color: var(--deep-text); }
.founders p{
  font-family: "DM Mono", monospace; font-size: .7rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--deep-dim);
}

.support{
  max-width: var(--maxw); margin-inline: auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(24px, 3vw, 44px);
  border-top: 1px solid var(--deep-line); padding-top: clamp(28px, 3.4vw, 44px);
}
.support-col h4{
  font-size: 1.02rem; font-weight: 700; color: var(--deep-text);
  margin-bottom: 12px; text-transform: uppercase; letter-spacing: .02em;
}
.support-col p{ color: var(--deep-dim); font-size: .98rem; }
.link-arrow{
  display: inline-block; margin-top: 14px;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: .88rem;
  color: var(--acid); text-decoration: none;
  border-bottom: 2px solid transparent;
}
.link-arrow:hover{ border-bottom-color: var(--acid); }

/* ───────────── faq ───────────── */
.faq{ max-width: 820px; margin-inline: auto; border-top: 1px solid var(--rule); }
.faq details{ border-bottom: 1px solid var(--rule); }
.faq summary{
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0;
  position: relative;
  font-family: "Archivo", sans-serif; font-weight: 700; font-size: 1.06rem;
  font-variation-settings: "wdth" 106;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: "+"; position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-family: "DM Mono", monospace; font-size: 1.3rem; color: var(--pink);
  transition: transform .2s ease;
}
.faq details[open] summary::after{ transform: translateY(-50%) rotate(45deg); }
.faq summary:hover{ color: var(--blue); }
.faq details p{
  padding: 0 40px 22px 0; color: var(--ink-2); font-size: 1rem; max-width: 68ch;
}

/* ───────────── join ───────────── */
.join{
  padding: clamp(56px, 9vw, 110px) var(--gutter);
  background: var(--acid); color: var(--on-acid);
  border-bottom: 2px solid var(--ink);
}
.join-inner{ max-width: var(--maxw); margin-inline: auto; }
.join .kicker{ color: color-mix(in srgb, var(--on-acid) 62%, transparent); }
.join h2{
  font-size: var(--fs-h2); font-weight: 800; font-variation-settings: "wdth" 120;
  text-transform: uppercase; letter-spacing: -0.03em;
  margin: 16px 0 clamp(30px, 4vw, 48px);
}
.join-cards{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  gap: 1px; background: var(--on-acid); border: 1px solid var(--on-acid);
}
.join-card{
  background: var(--acid); padding: clamp(20px, 2.4vw, 28px);
  text-decoration: none; display: flex; flex-direction: column; gap: 8px;
  transition: background .16s ease, color .16s ease;
}
.join-card:hover{ background: var(--on-acid); color: var(--acid); }
.join-card .jc-role{ color: inherit; opacity: .66; }
.join-card h3{ font-size: 1.28rem; font-weight: 800; font-variation-settings: "wdth" 110; }
.join-card p{ font-size: .96rem; opacity: .84; flex: 1; }
.join-card .link-arrow{ color: inherit; margin-top: 10px; }
.join-card:hover .link-arrow{ border-bottom-color: currentColor; }

/* ───────────── footer ───────────── */
.footer{ background: var(--deep); color: var(--deep-text); padding: clamp(48px, 7vw, 84px) var(--gutter); }
.footer-inner{ max-width: var(--maxw); margin-inline: auto; }
.footer-mark{
  font-family: "Archivo", sans-serif; font-weight: 800;
  font-variation-settings: "wdth" 123;
  font-size: clamp(2rem, 7vw, 4.6rem); line-height: .9;
  text-transform: uppercase; letter-spacing: -0.035em;
  color: var(--deep-text);
}
.footer-tag{
  max-width: 46ch; margin-top: 22px; color: var(--acid);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}
.footer-fine{
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--deep-line);
  font-family: "DM Mono", monospace; font-size: .7rem; line-height: 1.8;
  letter-spacing: .06em; color: var(--deep-dim); max-width: 70ch;
}

/* ───────────── responsive ───────────── */
@media (max-width: 900px){
  .compete-grid, .lead-grid{ grid-template-columns: 1fr; }
  .steps{ grid-row: auto; }
}
@media (max-width: 620px){
  .topnav .topnav-cta{ margin-left: 0; }
  .station-stage{ aspect-ratio: 1 / 1; }
  .station-stage-wave{ aspect-ratio: 5 / 4; }
  .controls-row{ flex-direction: column; align-items: stretch; }
  /* flex-basis applies to the main axis: once this column flips, the row
     layout's 200px width basis would become a 200px tall each. */
  .controls-row label{ flex: 0 0 auto; }
}

/* ───────────── phones & small tablets ─────────────
   Raises the mono micro-labels to a readable size, opens up
   line-height, and gives every control a 44px tap target. */
@media (max-width: 760px){
  body{ font-size: 1.06rem; line-height: 1.68; }

  /* the uppercase mono label family — 11px is too small held at arm's length */
  .kicker, .eyebrow, .station-no, .stage-grade, .year-label, .card-tag, .jc-role{
    font-size: .8rem; letter-spacing: .12em;
  }
  .ripple-caption{ font-size: .78rem; letter-spacing: .08em; }
  .brand-text i{ font-size: .68rem; }
  .founders p{ font-size: .78rem; }
  .footer-fine{ font-size: .82rem; line-height: 1.9; }
  .tags li{ font-size: .78rem; letter-spacing: .05em; padding: 5px 11px; }

  /* body copy across the cards and lists */
  .hero-lede{ font-size: 1.16rem; line-height: 1.55; }
  .panel-lede{ font-size: 1.1rem; }
  .stage p, .steps p, .card p, .roles p, .year li, .mini-steps li,
  .support-col p, .join-card p, .checklist li, .signup-strip p{ font-size: 1.05rem; }
  .stage-note{ font-size: 1.04rem; }
  .fine{ font-size: .95rem; }
  .faq summary{ font-size: 1.14rem; padding-block: 22px; }
  .faq details p{ font-size: 1.06rem; }

  /* station instrument panels */
  .station-sub{ font-size: .82rem; }
  .legend li{ font-size: .64rem; }
  .station-why{ font-size: 1.04rem; line-height: 1.66; }
  .station-hint{ font-size: .8rem; }
  .readout .rl{ font-size: .76rem; letter-spacing: .08em; }
  .readout .rv{ font-size: .95rem; }
  .readout .rv b{ font-size: 1.32rem; }
  .pill{ font-size: .8rem !important; padding: 3px 11px; }
  .controls label{ font-size: .78rem; letter-spacing: .09em; }
  .controls label b{ font-size: .95rem; }

  .hero-stats dt{ font-size: .78rem; }
  .hero-stats span{ font-size: .95rem; line-height: 1.45; }
  .hero-stats > div{ padding: 18px 20px; }

  /* Compact header: the wordmark stays one line at a fixed size with the
     district line beneath it, and the links collapse behind the hamburger. */
  .topbar{
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 8px; padding-block: 10px;
  }
  .brand{ gap: 9px; align-items: center; flex: 1; min-width: 0; }
  .nav-toggle{ display: flex; }
  .brand-mark{ width: 24px; height: 24px; flex: none; }
  .brand-text{ flex: 1; min-width: 0; overflow: hidden; }
  .brand-text b{
    display: block;
    white-space: nowrap;
    font-size: 1.02rem;
    font-variation-settings: "wdth" 100;
    letter-spacing: -0.012em;
    line-height: 1.15;
  }
  .brand-text i{ font-size: .6rem; margin-top: 2px; }

  /* the links collapse behind the hamburger */
  .topnav{
    flex-basis: 100%; width: 100%;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    border-top: 1px solid var(--rule); margin-top: 2px;
  }
  .topnav.is-open{ display: flex; }
  .topnav a{
    width: 100%; min-height: 50px; padding: 13px 2px;
    font-size: 1rem; border-radius: 0;
  }
  .topnav .topnav-cta,
  .topnav .topnav-sign{
    margin-left: 0; margin-top: 10px; border-radius: 2px;
    justify-content: center; font-weight: 700;
    border-bottom: 0;
  }
  .topnav .topnav-sign{ margin-top: 6px; margin-bottom: 6px; }

  /* tap targets: nothing interactive under 44px */
  .topnav a{
    font-size: .9rem; padding: 11px 13px;
    min-height: 44px; display: flex; align-items: center;
  }
  .btn{ font-size: 1rem; padding: 15px 26px; }
  .btn-signup{ width: 100%; text-align: center; }
  .seg{ width: 100%; }
  .seg-btn{ font-size: .8rem; padding: 14px 12px; flex: 1; min-height: 44px; }
  .seg-solo{ width: 100%; font-size: .8rem; padding: 14px 12px; min-height: 44px; align-self: stretch; }
  .faq summary::after{ font-size: 1.6rem; }
  .join-card{ padding: 24px 22px; }

  /* fatter slider track and thumb — a 14px thumb is hard to grab */
  /* The 26px thumb overhangs the 6px track by 10px, so box spacing here
     reads much larger than it measures. Tightened to suit. */
  .controls{ gap: 12px; }
  .controls-row{ gap: 16px; }
  .controls input[type="range"]{ height: 6px; margin: 10px 0 8px; }
  .controls input[type="range"]::-webkit-slider-thumb{ width: 26px; height: 26px; }
  .controls input[type="range"]::-moz-range-thumb{ width: 20px; height: 20px; }

  /* The volcano and wave canvases have no drag interaction, so a swipe over
     them should scroll the page. Oobleck is dragged in 2D, so it keeps the
     gesture — and is made shorter here to leave room to scroll past it. */
  .station-stage canvas{ touch-action: pan-y; }
  #oobleck{ touch-action: none; }
  .station-stage-oobleck{ aspect-ratio: 4 / 3; }
}

@media (max-width: 420px){
  .hero-title{ letter-spacing: -0.03em; }
  .topnav a{ padding: 11px 10px; font-size: .86rem; }
  .readout > div{ flex: 1 1 100%; }
}

/* the hero sources are mouse-draggable only; don't promise it on touch */
@media (pointer: coarse){
  .drag-hint{ display: none; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  /* The discipline band is exempt: it is decorative, slow, linear, carries no
     information found nowhere else, and can be paused by tapping it. */
  .marquee-track{
    animation-duration: 46s !important;
    animation-iteration-count: infinite !important;
  }
}
html{ scroll-behavior: smooth; scroll-padding-top: 84px; }