/* ==========================================================================
   FTC 23405 "Crash Out!" — site styles
   Palette lifted from the team's engineering portfolio:
   cream page, hot-pink → amber gradient, orange content cards, black ink.
   ========================================================================== */

:root {
  /* brand */
  --cream:      #fdf0e6;
  --cream-deep: #f8e3d3;
  --pink:       #ff3d9a;
  --magenta:    #ef1d80;
  --coral:      #ff8a5c;
  --orange:     #f7943f;
  --orange-lt:  #fbb05c;
  --amber:      #ffcf4d;
  --ink:        #121014;
  --ink-soft:   #3e3742;
  --ink-mute:   #6d6472;
  --paper:      #fffaf5;
  --line:       #e8d3c1;

  --grad-brand: linear-gradient(96deg, var(--pink) 0%, var(--coral) 52%, var(--amber) 100%);
  --grad-card:  linear-gradient(150deg, var(--orange) 0%, var(--orange-lt) 100%);
  --grad-ink:   linear-gradient(160deg, #1a161d 0%, #241d28 100%);

  /* type */
  --ff-display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --ff-body:    "Inter", "Segoe UI", system-ui, sans-serif;

  /* space + shape */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --maxw: 1180px;

  --shadow-sm: 0 2px 0 rgba(18,16,20,.08), 0 6px 18px -10px rgba(18,16,20,.35);
  --shadow-md: 0 4px 0 rgba(18,16,20,.10), 0 22px 45px -24px rgba(18,16,20,.45);
  --shadow-pop: 0 5px 0 var(--ink);

  --nav-h: 72px;
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: clamp(1rem, .3vw + .95rem, 1.075rem);
  line-height: 1.68;
  color: var(--ink-soft);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h2 { font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 900; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.42rem); font-weight: 800; letter-spacing: -.015em; }
h4 { font-size: 1.02rem; font-weight: 800; }
p  { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
em { font-style: italic; }
a { color: var(--magenta); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }
img { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; }

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

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .8rem 1.2rem;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253,240,230,.86);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 2px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
}
.nav.is-stuck {
  border-bottom-color: var(--ink);
  box-shadow: 0 10px 30px -22px rgba(18,16,20,.6);
}
.nav__inner {
  max-width: var(--maxw); margin-inline: auto;
  padding: 0 var(--gut);
  min-height: var(--nav-h);
  display: flex; align-items: center; gap: 1rem;
}

.brand { display: flex; align-items: center; gap: .65rem; text-decoration: none; margin-right: auto; }
.brand__logo {
  width: 46px; height: 46px; flex: none;
  border-radius: 50%; object-fit: contain;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong {
  font-family: var(--ff-display); font-weight: 900; font-size: 1.12rem;
  letter-spacing: -.02em; color: var(--ink);
}
.brand__text em {
  font-style: normal; font-size: .7rem; font-weight: 700; letter-spacing: .16em;
  color: var(--magenta); text-transform: uppercase;
}

.nav__links { display: flex; align-items: center; gap: .25rem; }
.nav__links a {
  font-family: var(--ff-display);
  font-weight: 700; font-size: .93rem;
  color: var(--ink); text-decoration: none;
  padding: .55rem .8rem; border-radius: var(--r-pill);
  position: relative; transition: background .2s ease, color .2s ease;
}
.nav__links a:hover { background: rgba(239,29,128,.1); }

/* Active tab. Driven by aria-current in the markup, so the accessible state and the
   visual state can never disagree. */
.nav__links a[aria-current="page"] { color: var(--magenta); background: rgba(239,29,128,.12); }
.nav__links a[aria-current="page"]::after {
  content: ""; position: absolute;
  left: .8rem; right: .8rem; bottom: .18rem; height: 3px;
  border-radius: 2px; background: var(--grad-brand);
}
.nav__links .nav__cta {
  margin-left: .4rem; background: var(--ink); color: var(--cream);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--magenta);
}
.nav__links .nav__cta:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; box-shadow: 0 3px 0 var(--ink); }
.nav__links .nav__cta[aria-current="page"] { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.nav__links .nav__cta[aria-current="page"]::after { display: none; }

.nav__toggle {
  display: none; width: 44px; height: 40px; flex: none;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-sm);
  cursor: pointer; padding: 0; place-items: center; gap: 5px;
}
.nav__toggle span { display: block; width: 20px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

.nav__progress {
  height: 3px; width: 0%;
  background: var(--grad-brand);
  transition: width .1s linear;
}

/* 1080px, not 900: seven tabs including "Industry Connections" need the room. */
@media (max-width: 1080px) {
  .nav__toggle { display: grid; }
  .nav__links {
    position: absolute; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: .2rem;
    background: var(--paper);
    border-block: 2px solid var(--ink);
    padding: .8rem var(--gut) 1.2rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .8rem 1rem; font-size: 1.05rem; }
  .nav__links .nav__cta { margin: .4rem 0 0; text-align: center; }
  /* A full-width bar reads better than an underline in the stacked menu. */
  .nav__links a[aria-current="page"]::after {
    left: 0; right: auto; top: 0; bottom: 0;
    width: 5px; height: auto; border-radius: 0;
  }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: clamp(3rem, 8vh, 6rem) 0 0; overflow: hidden; }
.hero__glow {
  position: absolute; z-index: 0; pointer-events: none;
  inset-inline: -20%; top: -45vh; height: 95vh;
  background:
    radial-gradient(closest-side, rgba(255,61,154,.32), transparent 72%) 22% 55% / 62% 78% no-repeat,
    radial-gradient(closest-side, rgba(255,207,77,.42), transparent 70%) 78% 62% / 58% 72% no-repeat;
  filter: blur(6px);
}
.hero__grid-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(18,16,20,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(18,16,20,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000 0%, transparent 88%);
}
.hero__inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,.85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
}
@media (max-width: 980px) { .hero__inner { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute);
  background: var(--paper); border: 2px solid var(--ink);
  border-radius: var(--r-pill); padding: .4rem .95rem;
  box-shadow: 0 3px 0 rgba(18,16,20,.14);
}
.eyebrow .dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,61,154,.22);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(255,61,154,0); } }

.hero__title { margin: 1.1rem 0 .35rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .1em .35em; }
.hero__num, .hero__name {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(3rem, 11.5vw, 7.4rem); line-height: .86;
  letter-spacing: -.045em;
}
.hero__num {
  background: linear-gradient(120deg, var(--magenta), var(--pink) 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__name {
  color: var(--ink);
  text-shadow: 4px 4px 0 rgba(255,207,77,.85);
}
.hero__tag {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  color: var(--magenta); letter-spacing: -.01em;
  margin: 0 0 1.1rem;
}
.hero__lede { max-width: 56ch; font-size: 1.06rem; color: var(--ink-soft); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.7rem; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .98rem;
  padding: .82rem 1.5rem; border-radius: var(--r-pill);
  text-decoration: none; border: 2.5px solid var(--ink); cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .2s ease, color .2s ease;
}
.btn--lg { font-size: 1.1rem; padding: 1rem 1.8rem; }
.btn--primary { background: var(--grad-brand); color: var(--ink); box-shadow: var(--shadow-pop); }
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--ink); color: var(--ink); }
.btn--ghost { background: var(--paper); color: var(--ink); box-shadow: 0 5px 0 rgba(18,16,20,.2); }
.btn--ghost:hover { transform: translateY(-3px); background: var(--ink); color: var(--cream); box-shadow: 0 8px 0 var(--magenta); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--ink); }

/* award badges */
.hero__badge-stack { display: grid; gap: .8rem; }
.badge-card {
  display: flex; align-items: center; gap: .9rem;
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: var(--r-md); padding: .95rem 1.1rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.badge-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.badge-card--award {
  background: var(--grad-brand);
  box-shadow: 0 5px 0 var(--ink);
}
.badge-card__medal { font-size: 1.7rem; line-height: 1; flex: none; }
.badge-card strong {
  display: block; font-family: var(--ff-display); font-weight: 800;
  font-size: 1.02rem; color: var(--ink); letter-spacing: -.015em;
}
.badge-card span:not(.badge-card__medal) { font-size: .82rem; color: var(--ink-mute); }
.badge-card--award span:not(.badge-card__medal) { color: rgba(18,16,20,.72); font-weight: 600; }

/* stat strip */
.statstrip {
  position: relative; z-index: 1;
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0; border: 3px solid var(--ink); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: clamp(2rem, 6vw, 4rem);
}
.statstrip li {
  padding: 1.35rem 1rem; text-align: center;
  border-right: 3px solid var(--ink);
}
.statstrip li:last-child { border-right: 0; }
.statstrip__num {
  display: block; font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1;
  color: var(--ink); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.statstrip__label {
  display: block; margin-top: .3rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 700px) {
  .statstrip { grid-template-columns: 1fr 1fr; }
  .statstrip li:nth-child(2) { border-right: 0; }
  .statstrip li:nth-child(-n+2) { border-bottom: 3px solid var(--ink); }
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section { padding: clamp(3.5rem, 9vw, 6.5rem) 0; position: relative; }
.section--alt { background: var(--cream-deep); border-block: 3px solid var(--ink); }
.section--dark { background: var(--grad-ink); border-block: 3px solid var(--ink); color: rgba(255,250,245,.82); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark .section__sub { color: rgba(255,250,245,.7); }

.section__head { max-width: 62ch; margin-bottom: clamp(2rem, 5vw, 3.2rem); }
.kicker {
  display: inline-block;
  font-family: var(--ff-display); font-weight: 800;
  font-size: .78rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--magenta); margin: 0 0 .7rem;
}
.kicker--light { color: var(--amber); }
.section__sub { font-size: 1.06rem; color: var(--ink-mute); margin: 0; }

.subhead {
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 900;
  margin: clamp(2.8rem, 6vw, 4rem) 0 .3rem;
}
.subhead--tight { margin-top: clamp(1.6rem, 3vw, 2.2rem); }
.subhead__note { color: var(--ink-mute); margin-bottom: 1.6rem; }

/* Reveal on scroll. Scoped to .js (set by an inline script in <head>) so content is
   always visible if JavaScript is unavailable or main.js fails to load. */
.js .reveal {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   CARDS / ABOUT
   ========================================================================== */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.35rem); }
.grid--about { grid-template-columns: repeat(6, 1fr); }
.grid--about > * { grid-column: span 3; }
.grid--about .card--wide { grid-column: span 6; }
.grid--about .card--goals { grid-column: span 6; }
/* Half width so it sits beside Core principles -- a span-6 quote here leaves a half-empty row.
   The four mentor cards further down pair up 2x2 on the same 3-column spans. */
.grid--about .card--quote { grid-column: span 3; }
/* Full-width label row inside the grid, so a run of cards can be introduced as a group
   without breaking out into its own <section>. */
.grid--about .grid__head { grid-column: span 6; margin: clamp(.9rem, 2vw, 1.5rem) 0 -.35rem; }
.grid__head h2 { margin: 0; }
@media (max-width: 880px) {
  /* Collapse to one track. The span overrides below must repeat the two-class selectors
     above: `.grid--about > *` alone loses the specificity contest to
     `.grid--about .card--wide`, leaving a stale span that re-creates the extra columns. */
  .grid--about { grid-template-columns: 1fr; }
  .grid--about > *,
  .grid--about .card--wide,
  .grid--about .card--goals,
  .grid--about .card--quote,
  .grid--about .grid__head { grid-column: auto; }
}

.card {
  background: var(--grad-card); color: rgba(18,16,20,.86);
  border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card h3 { margin-bottom: .6rem; }
/* Mentor cards: name in the h3, affiliation on its own line underneath. Keeping the two apart
   means every card in a row starts its body copy at the same height, which a wrapped
   "Name -- org & university" heading does not. */
.card--mentor h3 { margin-bottom: .15rem; }
.card--mentor .card__meta {
  margin-bottom: .75rem;
  font-family: var(--ff-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase;
  /* --ink-mute is tuned for the cream background and goes muddy on the orange card gradient. */
  color: rgba(18,16,20,.66);
}
.card--mentor > p:last-child { margin-bottom: 0; }
.card--values { background: var(--paper); }
.card--quote {
  background: var(--paper); border-left-width: 12px; border-left-color: var(--magenta);
  display: flex; flex-direction: column; justify-content: center;
}
.card--quote blockquote {
  margin: 0 0 .8rem; font-family: var(--ff-display); font-weight: 600;
  font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.45; color: var(--ink);
}
.card--quote footer { font-size: .88rem; font-weight: 700; color: var(--magenta); }
.card--cta { background: var(--paper); display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.card--cta .btn { margin-top: .8rem; }

.ticks { list-style: none; display: grid; gap: .7rem; }
.ticks li { position: relative; padding-left: 1.9rem; font-size: .98rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--grad-brand); border: 2px solid var(--ink);
}
.ticks li::after {
  content: ""; position: absolute; left: .34rem; top: .72em;
  width: .32rem; height: .58rem;
  border: 2px solid var(--ink); border-top: 0; border-left: 0;
  transform: rotate(42deg);
}

.goalset { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 780px) { .goalset { grid-template-columns: 1fr; } }
.goal {
  background: rgba(255,250,245,.55); border: 2px solid rgba(18,16,20,.5);
  border-radius: var(--r-md); padding: 1.1rem;
}
.goal__tag {
  display: inline-block; margin-bottom: .5rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .72rem;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--cream);
  padding: .28rem .7rem; border-radius: var(--r-pill);
}
.goal p { font-size: .93rem; margin: 0; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.timeline { list-style: none; position: relative; padding-left: 2.6rem; }
.timeline::before {
  content: ""; position: absolute; left: .72rem; top: .6rem; bottom: 2rem;
  width: 4px; border-radius: 2px; background: var(--grad-brand);
}
.timeline__item { position: relative; padding-bottom: 1.5rem; }
.timeline__dot {
  position: absolute; left: -2.6rem; top: .35rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--grad-brand); border: 3px solid var(--ink);
  box-shadow: 0 0 0 5px var(--cream-deep);
}
.timeline__dot--hollow { background: var(--cream-deep); }
.timeline__body {
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.2vw, 1.7rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.timeline__body:hover { transform: translateX(5px); box-shadow: var(--shadow-md); }
.timeline__body--muted { background: transparent; box-shadow: none; border-style: dashed; }
.timeline__date {
  font-family: var(--ff-display); font-weight: 800; font-size: .78rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--magenta);
  margin: 0 0 .35rem;
}
.timeline__body h3 { margin-bottom: .25rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.timeline__meta { font-size: .88rem; font-weight: 600; color: var(--ink-mute); margin-bottom: .8rem; }
.pill {
  display: inline-block; margin-top: 1rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .35rem .85rem; border-radius: var(--r-pill);
  border: 2px solid var(--ink); background: var(--amber); color: var(--ink);
}

/* process */
.process {
  list-style: none;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: .9rem; counter-reset: none;
}
@media (max-width: 1000px) { .process { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .process { grid-template-columns: 1fr; } }
.process li {
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.2rem 1.1rem; position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease;
}
.process li:hover { transform: translateY(-5px); }
.process__n {
  display: grid; place-items: center;
  width: 2.1rem; height: 2.1rem; margin-bottom: .7rem;
  border-radius: 50%; background: var(--grad-brand); border: 2.5px solid var(--ink);
  font-family: var(--ff-display); font-weight: 900; color: var(--ink);
}
.process h4 { margin-bottom: .35rem; }
.process p { font-size: .9rem; color: var(--ink-mute); }

/* ==========================================================================
   SOFTWARE
   ========================================================================== */
.grid--soft { grid-template-columns: repeat(3, 1fr); }
.grid--soft .scard--wide { grid-column: span 2; }
@media (max-width: 1000px) { .grid--soft { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .grid--soft { grid-template-columns: 1fr; } .grid--soft .scard--wide { grid-column: span 1; } }

.scard {
  background: rgba(255,250,245,.055);
  border: 2px solid rgba(255,250,245,.16);
  border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.8rem);
  transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.scard:hover {
  border-color: var(--amber); background: rgba(255,250,245,.09);
  transform: translateY(-4px);
}
.scard__tag {
  display: inline-block; margin-bottom: .8rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--grad-brand); color: var(--ink);
  padding: .3rem .8rem; border-radius: var(--r-pill);
}
.scard h3 { margin-bottom: .55rem; }
.scard p { font-size: .97rem; }
.section--dark em { color: var(--amber); font-style: italic; }

/* ==========================================================================
   OUTREACH
   ========================================================================== */
.reachbar {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
  box-shadow: var(--shadow-md); margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
@media (max-width: 900px) { .reachbar { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 520px) { .reachbar { grid-template-columns: repeat(2, 1fr); } }
.reachbar > div {
  padding: 1.15rem .85rem; text-align: center;
  border-right: 2px solid rgba(18,16,20,.16);
  border-bottom: 2px solid rgba(18,16,20,.16);
}
.reachbar > div:last-child { border-right: 0; }
.reachbar__total { background: var(--grad-brand); }
.reachbar__n {
  display: block; font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(1.25rem, 2.6vw, 1.85rem); line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.reachbar > div > span:last-child {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-mute);
}
.reachbar__total > span:last-child { color: rgba(18,16,20,.75); }

.grid--reach { grid-template-columns: repeat(6, 1fr); }
.grid--reach > * { grid-column: span 2; }
.grid--reach .rcard--feature { grid-column: span 6; }
.grid--reach .rcard--half { grid-column: span 3; }
@media (max-width: 940px) {
  /* Collapse to one track. The span overrides must repeat the two-class selectors above:
     `.grid--reach > *` alone loses to `.grid--reach .rcard--feature`, and the stale
     `span 6` then forces six implicit columns back into existence. */
  .grid--reach { grid-template-columns: 1fr; }
  .grid--reach > *,
  .grid--reach .rcard--feature,
  .grid--reach .rcard--half { grid-column: auto; }
}

.grid--two { grid-template-columns: 1fr 1fr; }
@media (max-width: 860px) { .grid--two { grid-template-columns: 1fr; } }

.rcard {
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem); box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.rcard--feature { background: var(--grad-card); }
.rcard__tag {
  display: inline-block; margin-bottom: .75rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--ink); color: var(--cream);
  padding: .3rem .8rem; border-radius: var(--r-pill);
}
.rcard h3 { margin-bottom: .55rem; }
.rcard p { font-size: .97rem; }
.rcard__result {
  margin-top: 1rem; padding: .9rem 1.1rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: var(--r-md);
  font-size: .97rem;
}
.mini-quote {
  margin: 1.1rem 0 0; padding: 1.05rem 1.25rem;
  background: var(--ink); color: rgba(255,250,245,.9);
  border-radius: var(--r-md); font-size: .97rem; font-style: italic;
}
.mini-quote footer { margin-top: .6rem; font-style: normal; font-size: .85rem; color: var(--amber); font-weight: 700; }

.teamlist { list-style: none; display: grid; gap: .7rem; }
.teamlist li {
  position: relative; padding-left: 1.15rem; font-size: .95rem;
}
.teamlist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--magenta);
}

.quotes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2vw, 1.35rem); margin-top: clamp(1.6rem, 4vw, 2.4rem);
}
@media (max-width: 900px) { .quotes { grid-template-columns: 1fr; } }
.quote {
  margin: 0; padding: 1.4rem 1.5rem;
  background: var(--cream-deep); border: 2.5px solid var(--ink);
  border-radius: var(--r-lg); position: relative;
  font-family: var(--ff-display); font-weight: 500; font-size: 1rem;
  line-height: 1.5; color: var(--ink);
}
.quote::before {
  content: "“"; position: absolute; top: -.2em; left: .55rem;
  font-family: var(--ff-display); font-size: 4.4rem; font-weight: 900;
  color: var(--pink); opacity: .35; line-height: 1;
}
.quote footer { margin-top: .8rem; font-size: .85rem; font-weight: 700; color: var(--magenta); }

/* ==========================================================================
   SPONSORS
   ========================================================================== */
/* Flex, not a fixed grid: the sponsor count changes between seasons, and flex wraps
   with the final row centred instead of leaving an orphan hanging on the left. */
.sponsors {
  list-style: none;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(.8rem, 2vw, 1.3rem);
  margin-bottom: clamp(1.6rem, 4vw, 2.6rem);
}
/* 270px basis keeps it to ~3 per row on desktop. Narrower tiles squeeze wide wordmarks
   down to ~35px tall, which makes taglines unreadable. */
.sponsor { flex: 1 1 270px; max-width: 340px; }
.sponsor a {
  display: grid; place-items: center; min-height: 152px;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.4rem 1.2rem; box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sponsor a:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
/* Cap height AND width so wide wordmarks and squarer stacked marks land at a
   similar visual weight instead of the square ones looking tiny. */
.sponsor img { max-height: 72px; max-width: 100%; width: auto; object-fit: contain; }
/* Circular or portrait badges are height-bound, so the 72px cap collapses their width to a
   fraction of a wordmark's and the lettering stops resolving. They get a taller cap instead,
   and the 152px min-height above is what pays for it: tiles are border-box, so the shared
   1.4rem padding leaves exactly 102px inside. The badge fills that with the same breathing
   room every other logo gets, and no tile is taller than its neighbours. The alternative --
   keeping tiles at 132px and trimming this one's padding -- also lines the rows up, but the
   badge then sits edge to edge and reads as cramped next to the airy wordmarks. */
.sponsor--badge img { max-height: 102px; }
.sponsor__fallback {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.15rem;
  color: var(--ink); text-align: center; letter-spacing: -.01em;
}

.grid--why { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px) { .grid--why { grid-template-columns: 1fr; } }

.spend { list-style: none; margin-top: 1.1rem; display: grid; gap: .45rem; }
.spend li {
  display: flex; align-items: baseline; gap: .6rem;
  font-size: .93rem; padding-bottom: .35rem;
  border-bottom: 2px dotted rgba(18,16,20,.22);
}
.spend li span { flex: 1; }
.spend li b { font-family: var(--ff-display); font-weight: 900; color: var(--ink); }
.spend__total {
  margin-top: .3rem; padding-top: .55rem;
  border-bottom: 0 !important;
  border-top: 3px solid var(--ink);
  font-weight: 700; color: var(--ink);
}

/* ==========================================================================
   CONTACT + FOOTER
   ========================================================================== */
.section--contact {
  background: var(--grad-brand);
  border-top: 3px solid var(--ink);
}
.contact {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr);
  gap: clamp(2rem, 5vw, 3.5rem); align-items: center;
}
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
.contact__copy .kicker { color: var(--ink); }
.contact__copy h2 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.contact__copy p { color: rgba(18,16,20,.8); max-width: 46ch; font-size: 1.06rem; }
.contact__copy .btn { margin-top: 1.3rem; background: var(--paper); }
.contact__copy .btn:hover { background: var(--ink); color: var(--paper); }

.contact__links { list-style: none; display: grid; gap: .75rem; }
.contact__links a {
  display: flex; flex-direction: column; gap: .1rem;
  background: rgba(255,250,245,.9); border: 2.5px solid var(--ink);
  border-radius: var(--r-md); padding: .95rem 1.2rem;
  text-decoration: none; box-shadow: 0 3px 0 rgba(18,16,20,.35);
  transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
.contact__links a:hover { transform: translateX(6px); background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.contact__links span {
  font-family: var(--ff-display); font-weight: 800; font-size: 1.05rem; color: var(--ink);
}
.contact__links small { font-size: .84rem; color: var(--ink-mute); }

.footer { background: var(--ink); color: rgba(255,250,245,.6); padding: 2.8rem 0; }
.footer__brand strong { font-family: var(--ff-display); font-weight: 800; }
.footer em { color: var(--amber); font-style: italic; }

/* ==========================================================================
   SEASON CARDS (Robots page) — one per season, final robot only
   ========================================================================== */
.season {
  display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr);
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
  background: var(--paper); border: 3px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.2rem, 2.6vw, 2rem);
  box-shadow: var(--shadow-md);
  margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
}
.season--alt { grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); }
.season--alt .season__media { order: 2; }
@media (max-width: 860px) {
  .season, .season--alt { grid-template-columns: 1fr; }
  .season--alt .season__media { order: 0; }
}

.season__media {
  margin: 0; border: 2.5px solid var(--ink); border-radius: var(--r-md);
  overflow: hidden; background: var(--cream-deep);
}
.season__media img { width: 100%; height: auto; display: block; }
.season__media figcaption {
  padding: .55rem .8rem; font-size: .78rem; font-weight: 600;
  color: var(--ink-mute); background: var(--cream-deep);
  border-top: 2px solid var(--ink);
}

.season__badge {
  display: inline-block; margin-bottom: .7rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--grad-brand); color: var(--ink);
  padding: .3rem .8rem; border-radius: var(--r-pill);
  border: 2px solid var(--ink);
}
.season__badge--past { background: var(--cream-deep); }

/* A season card with no photo (e.g. a mentored team) is a single column. */
.season--nomedia { grid-template-columns: 1fr; }

.season h2, .season > .season__body > h3 {
  font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin-bottom: .3rem;
  font-weight: 900; letter-spacing: -.02em;
}
.season__result {
  font-family: var(--ff-display); font-weight: 800; font-size: .98rem;
  color: var(--magenta); margin: 0 0 .9rem;
}
.season__intro { font-size: 1rem; margin-bottom: 1.2rem; }

.season__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.1rem; }
.season__cols--full { grid-template-columns: 1fr; }
@media (max-width: 620px) { .season__cols { grid-template-columns: 1fr; } }
.season__col h4 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .6rem; color: var(--ink);
}
.season__col {
  background: rgba(247,148,63,.12);
  border-left: 5px solid var(--orange);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: .95rem 1.05rem;
}
.season__col--soft { background: rgba(239,29,128,.08); border-left-color: var(--magenta); }
.season__col h3 {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .6rem; color: var(--ink);
}
.season__col ul { list-style: none; display: grid; gap: .5rem; }
.season__col li { position: relative; padding-left: 1.1rem; font-size: .93rem; }
.season__col li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .4rem; height: .4rem; border-radius: 50%; background: var(--ink);
}
.season__col--soft li::before { background: var(--magenta); }

/* Team photo at the top of the About page. Capped at 700px and centred: the source is
   640px wide, so a full-bleed figure would upscale it ~1.7x and look soft. */
.teamshot {
  margin: 0 auto clamp(1rem, 2vw, 1.35rem);
  max-width: 700px;
  border: 3px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden; background: var(--cream-deep);
  box-shadow: var(--shadow-md);
}
.teamshot img { width: 100%; height: auto; display: block; }
.teamshot figcaption {
  padding: .6rem .9rem; font-size: .8rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
  background: var(--paper); border-top: 3px solid var(--ink);
}

/* highlighted statement inside a card */
.callout {
  margin-top: 1.1rem; padding: .95rem 1.15rem;
  background: var(--paper); border: 2.5px solid var(--ink);
  border-radius: var(--r-md); font-size: .97rem;
}

/* photo inside an outreach card */
.rcard__photo {
  margin: 0 0 1.1rem; border: 2.5px solid var(--ink); border-radius: var(--r-md);
  overflow: hidden; background: var(--cream-deep);
}
.rcard__photo img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }

/* The feature card is full-bleed across the grid, so its portrait photo goes beside the
   text rather than above it — otherwise the image is taller than the whole viewport. */
.rcard--feature {
  display: grid; grid-template-columns: minmax(0,.4fr) minmax(0,1fr);
  gap: clamp(1.2rem, 2.6vw, 2.1rem); align-items: start;
}
.rcard--feature .rcard__photo { margin: 0; }
.rcard--feature .rcard__photo img { aspect-ratio: 3 / 4; }
@media (max-width: 780px) {
  .rcard--feature { grid-template-columns: 1fr; }
  .rcard--feature .rcard__photo img { aspect-ratio: 4 / 3; }
}

/* hero robot photo (home) */
.hero__shot {
  margin: 0; border: 3px solid var(--ink); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-md); background: var(--cream-deep);
}
.hero__shot img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   PAGE HERO (every page except home)
   ========================================================================== */
.pagehero {
  position: relative;
  padding: clamp(2.6rem, 7vw, 4.6rem) 0 clamp(1.4rem, 3vw, 2.2rem);
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(255,61,154,.22), transparent 62%),
    radial-gradient(110% 130% at 96% 10%, rgba(255,207,77,.34), transparent 60%),
    var(--cream);
  border-bottom: 3px solid var(--ink);
}
.pagehero h1 {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.3rem); line-height: .95;
  letter-spacing: -.04em; margin: 0 0 .5rem;
}
.pagehero__lede { max-width: 62ch; font-size: clamp(1.02rem, 1.4vw, 1.15rem); color: var(--ink-soft); margin: 0; }

/* ==========================================================================
   HOME: teaser cards
   ========================================================================== */
.grid--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .grid--three { grid-template-columns: 1fr; } }

.teaser {
  display: flex; flex-direction: column;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: clamp(1.3rem, 2.4vw, 1.9rem);
  box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink-soft);
  transition: transform .22s ease, box-shadow .22s ease;
}
.teaser:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); color: var(--ink-soft); }
.teaser__tag {
  align-self: flex-start; margin-bottom: .8rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .7rem;
  letter-spacing: .16em; text-transform: uppercase;
  background: var(--grad-brand); color: var(--ink);
  padding: .3rem .8rem; border-radius: var(--r-pill);
}
.teaser h3 { margin-bottom: .5rem; }
.teaser p { font-size: .97rem; }
.teaser__go {
  margin-top: auto; padding-top: 1.1rem;
  font-family: var(--ff-display); font-weight: 800; font-size: .95rem;
  color: var(--magenta);
}
.teaser:hover .teaser__go { color: var(--ink); }

.hero__badge-more { margin: .3rem 0 0; text-align: right; }
.hero__badge-more a {
  font-family: var(--ff-display); font-weight: 800; font-size: .9rem;
  text-decoration: none; color: var(--magenta);
}
.hero__badge-more a:hover { color: var(--ink); text-decoration: underline; }

.section__head--center { margin-inline: auto; text-align: center; }
.center-cta { margin: clamp(1.6rem, 4vw, 2.4rem) 0 0; text-align: center; }

/* "next page" link at the foot of a page */
.nextup {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 3px dashed var(--line);
  text-align: right;
}
.nextup a {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  text-decoration: none; color: var(--magenta);
}
.nextup a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 3px; }

/* ==========================================================================
   AWARDS: summary tiles
   ========================================================================== */
.awardgrid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(.8rem, 2vw, 1.3rem);
  margin-bottom: clamp(2rem, 5vw, 3.2rem);
}
@media (max-width: 700px) { .awardgrid { grid-template-columns: 1fr; } }
.awardgrid__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--paper); border: 2.5px solid var(--ink); border-radius: var(--r-lg);
  padding: 1.4rem 1.1rem; box-shadow: var(--shadow-sm);
}
.awardgrid__medal { font-size: 2rem; line-height: 1; }
.awardgrid__item strong {
  font-family: var(--ff-display); font-weight: 900;
  font-size: 2.2rem; line-height: 1.1; color: var(--ink);
}
.awardgrid__item span:last-child {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-mute);
}

/* ==========================================================================
   CONTACT PAGE
   ========================================================================== */
.section--contact-page { border-top: 0; padding-top: clamp(2.8rem, 7vw, 4.8rem); }
.section--contact-page h1 {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4rem); line-height: .95;
  letter-spacing: -.04em; margin: 0 0 .6rem;
}
.contact__where { margin-top: 1.2rem; font-size: .93rem; font-weight: 600; color: rgba(18,16,20,.7); }

/* ==========================================================================
   FOOTER (multi-page)
   ========================================================================== */
.footer__inner {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) auto auto;
  gap: 1.5rem clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
@media (max-width: 820px) { .footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__inner { grid-template-columns: 1fr; } }

.footer__brand { color: var(--paper); font-size: .96rem; }
.footer__brand p { margin: 0 0 .6rem; }
.footer__brand a { color: var(--amber); }
.footer__brand a:hover { color: var(--paper); }

.footer__nav, .footer__social { display: grid; gap: .45rem; align-content: start; }
.footer__nav a, .footer__social a {
  font-family: var(--ff-display); font-weight: 700; font-size: .92rem;
  color: rgba(255,250,245,.72); text-decoration: none; white-space: nowrap;
}
.footer__nav a:hover, .footer__social a:hover { color: var(--amber); text-decoration: underline; }

.footer__legal {
  grid-column: 1 / -1;
  margin: .6rem 0 0; padding-top: 1.4rem;
  border-top: 2px solid rgba(255,250,245,.14);
  font-size: .8rem; line-height: 1.6;
}

/* print */
@media print {
  .nav, .hero__glow, .hero__grid-lines { display: none !important; }
  body { background: #fff; color: #000; }
  .reveal { opacity: 1 !important; transform: none !important; }
}