/* ============================================================
   Golden Bear Racing — Western New England University Baja SAE
   Palette sourced from team slide deck:
   gold #FFB612 · blue #2A66B2 · navy #0B1A2E · near-black #04070D
   ============================================================ */

:root {
  --gold: #ffb612;
  --gold-soft: #ffc845;
  --gold-dim: #b8860d;
  /* --blue is the exact blue sampled from BEAR in the team logo. It is too dark
     to read as text on this background (2.2:1), so --blue-bright is that same
     hue lightened to pass AA at 5.2:1 and is what type and accents use. */
  --blue: #13488b;
  --blue-bright: #3582e3;
  --blue-deep: #0d3363;
  --navy: #0b1a2e;
  --navy-2: #0e2138;
  --bg: #04070d;
  --panel: #0a1424;
  --line: rgba(255, 182, 18, 0.25);
  --line-blue: rgba(53, 130, 227, 0.28);
  --ink: #eef3fa;
  --muted: #9db0c8;
  --font-display: "Chakra Petch", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Diagonal navy-to-black gradient taken from the team slide deck, replacing the
   old graph-paper grid. Fixed attachment so it reads as one continuous surface
   behind the whole page rather than restarting per section. */
body {
  background:
    radial-gradient(1100px 700px at 88% 78%, rgba(19, 72, 139, 0.30), transparent 68%),
    radial-gradient(900px 600px at 12% 8%, rgba(10, 26, 48, 0.55), transparent 70%),
    linear-gradient(152deg, #04070d 0%, #050d18 42%, #071527 72%, #0a1c33 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* height:auto keeps aspect ratio correct now that images carry explicit
   width/height attributes (those reserve layout space and stop page jump) */
img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-soft); }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ---------- eyebrow / section labels ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before { content: "//"; color: var(--blue-bright); letter-spacing: 0; }
.eyebrow::after {
  content: "";
  flex: 0 1 120px;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.section-head { margin-bottom: 42px; }
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 10px;
  line-height: 1.1;
}
.section-head h2 .accent { color: var(--gold); }
.section-head h2 .accent-blue { color: var(--blue-bright); }
.section-head p.lede { color: var(--muted); max-width: 640px; margin-top: 14px; }

section { padding: 84px 0; }

/* ---------- header / nav ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(4, 7, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand-mark {
  height: 60px;
  width: auto;
  display: block;
  transition: transform 0.2s;
}
.brand:hover .brand-mark { transform: scale(1.04); }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
}
.nav-links a {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); }
.nav-cta {
  background: var(--gold);
  color: #04070d !important;
  padding: 10px 20px !important;
  border-bottom: none !important;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: background 0.2s;
}
.nav-cta:hover { background: var(--gold-soft); color: #04070d !important; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  padding: 8px 12px;
  cursor: pointer;
}

/* ---------- buttons ---------- */
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 15px 30px;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: transform 0.15s, background 0.2s, color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #04070d; }
.btn-gold:hover { background: var(--gold-soft); color: #04070d; }
.btn-outline {
  background: rgba(4, 7, 13, 0.55);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(238, 243, 250, 0.55);
}
.btn-outline:hover { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.btn-blue { background: var(--blue); color: var(--ink); }
.btn-blue:hover { background: var(--blue-bright); color: var(--ink); }

/* ---------- hero (home) ---------- */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  padding: 110px 0 90px;
  isolation: isolate;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: url("../img/hero-car-action.jpg");
  background-size: cover;
  background-position: center 45%;
}
/* Sits directly on top of .hero-bg at the same position, so if the video
   can't play for any reason (codec support, slow connection, reduced motion)
   the photo underneath is already showing the same shot - there is no empty
   gap to fall back into. Desktop/tablet only; mobile keeps the static
   portrait photo, both for autoplay reliability and so it isn't burning
   cellular data on a background loop. */
.hero-video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}
@media (max-width: 900px) {
  .hero-video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
}
/* A portrait-ish viewport above the mobile breakpoint (a 1024x1366 tablet, say)
   makes the hero tall and narrow, and object-fit: cover then has to throw away
   ~55% of the video's width to fill it — which crops the car out of frame.
   Letting the hero size to its content there keeps the box nearer the video's
   own 16:9 and keeps the subject visible. */
@media (min-width: 901px) and (max-aspect-ratio: 1 / 1) {
  .hero { min-height: 0; }
}
/* The car sits on the left of the hero photo, so the copy is pushed right and
   the scrim darkens right-to-left — the reverse of a normal left-aligned hero.
   Keeps the subject readable instead of burying it under the logo. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(260deg, rgba(4, 7, 13, 0.93) 0%, rgba(4, 7, 13, 0.78) 44%, rgba(6, 12, 24, 0.34) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 34%);
}
.hero::after {
  /* diagonal gold slash, echoing the slide */
  content: "";
  position: absolute;
  top: -10%;
  left: 24%;
  width: 2px;
  height: 130%;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: rotate(18deg);
  opacity: 0.45;
  z-index: -1;
}
/* .hero is itself a flex container, so .wrap must be told to span the full
   width — otherwise it shrink-wraps its content and margin-left:auto below
   has no free space to push into.

   The hero is a full-bleed panel, so unlike the text sections it is not capped
   at 1200px. That cap left the copy stranded ~700px short of the right edge on
   a 2560px display — floating mid-screen rather than anchored to it. A
   proportional gutter instead holds the copy the same visual distance from the
   edge at every width. */
.hero .wrap {
  display: flex;
  width: 100%;
  max-width: none;
  padding-inline: clamp(24px, 5vw, 128px);
}
/* Scales with the viewport rather than locking at a fixed 620px, so the block
   grows with the display instead of shrinking into a corner of a large screen. */
.hero-content {
  margin-left: auto;
  /* 48vw, not less: at ~1280 a narrower block dropped the tagline to two lines
     and left "2013" stranded on its own. */
  width: clamp(540px, 48vw, 780px);
  max-width: 100%;
}

/* On a tall phone viewport the 16:9 photo crops to a narrow centre slice, which
   cut the car in half. Mobile instead anchors the crop on the car, sinks the
   copy to the bottom, and keeps the top of the scrim nearly clear so the car
   reads as the subject rather than as texture behind the text. */
/* Cropping the 16:9 photo to a phone's portrait frame sliced the car in half,
   so mobile gets a purpose-made portrait crop anchored on the cockpit and rear
   wheel. The copy sinks to the bottom and the scrim stays light across the top
   two-thirds, so the car reads as the subject rather than as texture. */

/* Text wordmark, sized off the hero-content block itself (not a fixed image),
   so it always fills the same right-hand column the rest of the copy fills. */
.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.02;
  text-shadow: 0 10px 34px rgba(0, 0, 0, 0.75);
}
.hero-title .ht-line {
  display: block;
  font-size: clamp(2.6rem, 5.6vw, 4.8rem);
  letter-spacing: 0.02em;
}
.hero-title .accent { color: var(--ink); }
/* the eyebrow is one unit — never let it break mid-phrase */
.hero .eyebrow { font-size: clamp(0.9rem, 1.6vw, 1.15rem); margin-bottom: 22px; white-space: nowrap; }
.hero .eyebrow::after { flex: 0 1 90px; }

.hero-tagline {
  margin-top: 18px;
  font-family: var(--font-display);
  font-size: clamp(0.82rem, 1.7vw, 1.02rem);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.9);
  /* if it ever does wrap, split it evenly rather than orphaning the year */
  text-wrap: balance;
}

@media (max-width: 560px) {
  .hero .eyebrow { white-space: normal; }
  .hero .eyebrow::after { display: none; }
}

/* the "background bubble" so intro text reads over photos */
.hero-blurb {
  margin-top: 30px;
  max-width: none;
  background: rgba(7, 15, 28, 0.82);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  backdrop-filter: blur(6px);
  padding: 22px 26px;
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
/* The blurb now fills the full content width, so the type scales with it —
   held at a fixed size the line length would run past 100 characters on a
   wide display. */
.hero-blurb p {
  color: var(--ink);
  font-size: clamp(1rem, 0.4vw + 0.88rem, 1.18rem);
  line-height: 1.6;
}

.hero-scroll {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  animation: bob 2.2s ease-in-out infinite;
}

/* Mobile hero overrides live AFTER the base hero rules above. They share the
   same specificity, so source order decides the winner — placed earlier they
   were silently losing to the desktop values. */
@media (max-width: 900px) {
  .hero {
    align-items: stretch;
    min-height: 84vh;
    /* clears the sticky header; the copy below is distributed with
       space-evenly rather than pinned to one edge */
    padding-top: 88px;
    padding-bottom: 24px;
  }
  /* spread the logo, description and buttons down the screen instead of
     clustering them at the bottom — the car shows through the gaps */
  .hero .wrap { align-items: stretch; }
  .hero-content {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    flex: 1;
  }
  .hero-bg {
    background-image: url("../img/hero-car-action-mobile.jpg");
    background-position: center top;
  }
  /* Straight scrim over a full-bleed photo: light across the top so the car
     shows, deepening behind the copy so the type stays readable. */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(4, 7, 13, 0.34) 0%,
      rgba(4, 7, 13, 0.18) 30%,
      rgba(4, 7, 13, 0.58) 58%,
      rgba(4, 7, 13, 0.86) 82%,
      rgba(4, 7, 13, 0.95) 100%
    );
  }
  .hero::after { left: 8%; opacity: 0.28; }
  /* width: auto resets the fluid clamp() the desktop rule sets — without it the
     540px minimum would force horizontal overflow on a phone. */
  .hero-content { margin-left: 0; max-width: none; width: auto; }
  .hero .wrap { padding-inline: 24px; }
  .hero-scroll { display: none; }

  /* Everything in the hero tightens up on mobile. The block is bottom-aligned,
     so trimming its height is what drops it down the screen and opens up clear
     space above for the car. */
  .hero .eyebrow { font-size: 0.66rem; letter-spacing: 0.18em; margin-bottom: 0; }
  .hero-title .ht-line { font-size: min(13vw, 3rem); }
  /* the tagline is decorative and the vertical budget is tight on a phone —
     the same idea is carried by the intro paragraph right below it */
  .hero-tagline { display: none; }
  .hero-blurb {
    margin-top: 0;
    padding: 12px 14px;
    border-left-width: 3px;
  }
  .hero-blurb p { font-size: 0.83rem; line-height: 1.45; }
  .hero .btn-row { gap: 9px; margin-top: 0; }
  .hero .btn {
    flex: 1 1 auto;
    text-align: center;
    padding: 13px 16px;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
  }
}

/* Narrow phones wrap the intro to more lines, which pushed the buttons off
   screen. Trim the copy rather than the top padding — the padding is what
   keeps the logo clear of the photo. */
@media (max-width: 380px) {
  .hero-title .ht-line { font-size: min(12vw, 2.5rem); }
  .hero-blurb { margin-top: 10px; padding: 11px 13px; }
  .hero-blurb p { font-size: 0.79rem; line-height: 1.42; }
  .hero .btn { padding: 11px 12px; font-size: 0.68rem; letter-spacing: 0.08em; }
}
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } }

/* ---------- page hero (subpages) ---------- */
.page-hero {
  position: relative;
  padding: 96px 0 64px;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 340px at 85% 0%, rgba(42, 102, 178, 0.22), transparent 70%),
    radial-gradient(700px 300px at 10% 100%, rgba(255, 182, 18, 0.08), transparent 70%),
    var(--bg);
}
.page-hero::after {
  content: "";
  position: absolute;
  top: -20%;
  right: 18%;
  width: 2px;
  height: 150%;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  transform: rotate(20deg);
  opacity: 0.4;
  z-index: -1;
}
/* Photo-backed page header. The heading is left-aligned, so the scrim is
   weighted to the left and thins out to the right where the photo can breathe. */
.page-hero.has-photo {
  padding: 96px 0 64px;
  background: var(--bg);
}
.page-hero .page-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 44%;
}
.page-hero.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(4, 7, 13, 0.94) 0%, rgba(4, 7, 13, 0.86) 38%, rgba(4, 7, 13, 0.5) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 45%);
}
@media (max-width: 900px) {
  .page-hero.has-photo { padding: 96px 0 64px; }
  .page-hero.has-photo::before {
    background:
      linear-gradient(180deg, rgba(4, 7, 13, 0.6) 0%, rgba(4, 7, 13, 0.88) 70%, var(--bg) 100%);
  }
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 12px;
  line-height: 1.05;
}
.page-hero h1 .accent { color: var(--gold); }
.page-hero h1 .accent-blue { color: var(--blue-bright); }
.page-hero p.lede { color: var(--muted); max-width: 660px; margin-top: 16px; }

/* ---------- feature tiles (home, like dribbble category cards) ---------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}
.tile {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 24px;
  padding-left: 64px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line-blue);
  background-size: cover;
  background-position: center;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  transition: transform 0.25s;
}
.tile:hover { transform: translateY(-6px); }
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 7, 13, 0.25) 0%, rgba(4, 7, 13, 0.88) 88%);
  transition: background 0.25s;
}
.tile:hover::before {
  background: linear-gradient(180deg, rgba(11, 26, 46, 0.35) 0%, rgba(4, 7, 13, 0.92) 88%);
}
.tile .tile-label {
  position: absolute;
  top: 16px;
  left: 16px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}
.tile .tile-body h3 {
  font-family: var(--font-display);
  color: var(--gold);
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tile .tile-body p { color: var(--muted); font-size: 0.92rem; margin-top: 6px; }
.tile .tile-body .go {
  display: inline-block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: transform 0.2s;
}
.tile:hover .tile-body .go { transform: translateX(6px); }
/* gold edge that wipes in on hover */
.tile .tile-edge {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.tile:hover .tile-edge { transform: scaleX(1); }

/* ---------- GBR4 section ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.split .photo-frame {
  position: relative;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
.split .photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.split .photo-frame .frame-tag {
  position: absolute;
  bottom: 0;
  left: 0;
  background: var(--gold);
  color: #04070d;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 8px 18px;
}
.stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.stat {
  flex: 1 1 120px;
  border: 1px solid var(--line-blue);
  background: var(--panel);
  padding: 16px 18px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.stat .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--gold);
  line-height: 1.1;
}
.stat .lbl {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

/* ---------- sponsors ---------- */
.tier { margin-bottom: 64px; }
.tier-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 26px;
}
.tier-head h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tier-head .rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.tier-head .tier-badge {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 5px 12px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.t-partner h3, .t-partner .tier-badge { color: var(--gold); }
.t-bluebear h3, .t-bluebear .tier-badge { color: var(--blue-bright); }
.t-major h3, .t-major .tier-badge { color: var(--gold-soft); }
.t-minor h3, .t-minor .tier-badge { color: var(--muted); }
.t-cub h3, .t-cub .tier-badge { color: var(--muted); }

.sponsor-grid { display: grid; gap: 18px; }
.sg-partner { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.sg-bluebear { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.sg-std { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.sg-major { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .sg-major { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sg-major { grid-template-columns: 1fr; } }

.sponsor-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 120px;
  padding: 24px;
  background: var(--panel);
  border: 1px solid var(--line-blue);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  transition: transform 0.2s, border-color 0.2s;
  color: var(--ink);
}
.sponsor-card:hover { transform: translateY(-4px); }

/* Full colour at rest, sitting directly on the dark card with no white plaque
   behind it. Some marks (a couple of the Ursa tiers) are dark ink drawn for a
   light background and read low-contrast here - that is a real tradeoff of
   this treatment, not a bug, kept because full-colour-always was the ask. */
.s-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: 16px;
}
.s-logo img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}
/* Square or circular marks need more height than a wide wordmark to stay
   legible, since their width is capped by their height in this slot. */
.s-logo.is-square { height: 130px; }
.sponsor-card.is-partner .s-logo { height: 96px; }
.sponsor-card.is-partner .s-logo.is-square { height: 140px; }
.sponsor-card.is-bluebear .s-logo { height: 80px; }
.sponsor-card.is-minor .s-logo { height: 62px; }
.sponsor-card.is-cub .s-logo { height: 54px; margin-bottom: 12px; }

/* With a logo present the name becomes a caption rather than the headline */
.sponsor-card.has-logo .s-name { font-size: 0.92rem; letter-spacing: 0.08em; color: var(--muted); }
.sponsor-card.is-partner.has-logo .s-name { font-size: 1rem; color: var(--ink); }

.sponsor-card .s-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.25;
}
.sponsor-card .s-link {
  margin-top: 8px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.sponsor-card.is-partner {
  min-height: 170px;
  background: linear-gradient(135deg, rgba(255, 182, 18, 0.12), var(--panel) 60%);
  border: 1px solid var(--gold);
}
.sponsor-card.is-partner .s-name { font-size: 1.5rem; color: var(--gold); }
.sponsor-card.is-bluebear {
  min-height: 140px;
  background: linear-gradient(135deg, rgba(42, 102, 178, 0.18), var(--panel) 60%);
  border: 1px solid var(--blue-bright);
}
.sponsor-card.is-bluebear .s-name { font-size: 1.25rem; color: var(--blue-bright); }
.sponsor-card.is-cub { min-height: 90px; padding: 18px 24px; }
.sponsor-card.is-cub .s-name, .sponsor-card.is-minor .s-name { font-size: 1rem; color: var(--muted); }
.sponsor-card.is-minor { min-height: 100px; }
.sponsor-card.is-major .s-name { color: var(--ink); }

/* ---------- history / timeline ---------- */
.comp {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 44px;
  align-items: center;
  padding: 56px 0;
  border-bottom: 1px solid rgba(157, 176, 200, 0.12);
}
.comp:last-of-type { border-bottom: none; }
.comp.flip .comp-photo { order: 2; }
.comp-photo {
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}
.comp-photo img { width: 100%; object-fit: cover; }
.comp-year {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  color: var(--gold);
  line-height: 1;
}
.comp h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 6px 0 4px;
}
.comp .comp-note {
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-bright);
  margin-bottom: 16px;
}
.overall-chip {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--gold);
  color: #04070d;
  padding: 8px 18px;
  margin-bottom: 18px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
.result {
  background: var(--panel);
  border: 1px solid rgba(157, 176, 200, 0.14);
  border-left: 3px solid var(--blue);
  padding: 10px 14px;
}
.result .r-event {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.result .r-place {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--ink);
}
.comp.no-photo { grid-template-columns: 1fr; }
.comp.no-photo .comp-body { max-width: 820px; }

/* ---------- team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}
.member {
  background: var(--panel);
  border: 1px solid var(--line-blue);
  border-top: 3px solid var(--blue);
  padding: 22px 24px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  transition: transform 0.2s, border-color 0.2s;
}
.member:hover { transform: translateY(-4px); border-top-color: var(--gold); }
.member.exec { border-top-color: var(--gold); }
.member .m-role {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.member.sub .m-role { color: var(--blue-bright); }
.member .m-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin-top: 6px;
  letter-spacing: 0.03em;
}

/* ---------- CTA band ---------- */
.cta-band {
  background:
    linear-gradient(100deg, rgba(255, 182, 18, 0.1), transparent 55%),
    radial-gradient(700px 260px at 90% 50%, rgba(19, 72, 139, 0.3), transparent 70%),
    var(--navy);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}

/* Photo-backed variant. The scrim is heavy because this band carries centred
   white and gold type across its full width — a lighter wash left the headline
   fighting the background wherever the photo was bright. */
.cta-band.has-photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta-band .cta-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center 40%;
}
.cta-band.has-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 7, 13, 0.82) 0%, rgba(4, 7, 13, 0.7) 50%, rgba(4, 7, 13, 0.86) 100%),
    linear-gradient(100deg, rgba(255, 182, 18, 0.08), transparent 60%);
}
@media (max-width: 900px) {
  .cta-band .cta-bg { background-position: center 35%; }
  .cta-band.has-photo::before {
    background: linear-gradient(180deg, rgba(4, 7, 13, 0.86) 0%, rgba(4, 7, 13, 0.78) 50%, rgba(4, 7, 13, 0.9) 100%);
  }
}
.cta-band h2 {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cta-band h2 .accent { color: var(--gold); }
.cta-band p { color: var(--muted); max-width: 620px; margin: 14px auto 0; }
.cta-band .btn-row { justify-content: center; }

/* mailto: only works when the visitor has a mail client registered with their
   OS. Anyone reading mail in a browser tab gets nothing, so the address is also
   shown in full and can be copied without leaving the page. */
.cta-mail {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}
.cta-mail a {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
}
.cta-mail a:hover { color: var(--gold-soft); }
.copy-mail {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line-blue);
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.copy-mail:hover { color: var(--ink); border-color: var(--blue-bright); }
.copy-mail.is-copied { color: var(--gold); border-color: var(--gold); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: #030509;
  padding: 56px 0 32px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
}
.footer-grid h2 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-grid p { color: var(--muted); font-size: 0.92rem; }
.footer-mail {
  display: inline-block;
  margin-top: 14px;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.footer-mail:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.footer-grid ul { list-style: none; }
.footer-grid li { margin-bottom: 10px; }
.footer-grid a { color: var(--muted); font-size: 0.92rem; transition: color 0.2s; }
.footer-grid a:hover { color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(157, 176, 200, 0.12);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  color: var(--muted);
  font-size: 0.8rem;
}
.footer-bottom .paw { color: var(--gold); }

/* ---------- checkered flag divider ---------- */
.checker {
  height: 10px;
  margin: 18px 0;
  background:
    repeating-conic-gradient(rgba(255, 182, 18, 0.5) 0% 25%, transparent 0% 50%)
    0 0 / 20px 20px;
  opacity: 0.45;
}

/* ---------- results ticker ---------- */
.ticker {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 20, 36, 0.75);
  padding: 13px 0;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  animation: ticker 36s linear infinite;
  will-change: transform;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
@keyframes ticker { to { transform: translateX(-50%); } }
.ticker-item {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 34px;
}
.ticker-item strong { color: var(--gold); font-weight: 700; }
.ticker-item::after { content: "//"; color: var(--blue-bright); letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } }

/* ---------- corner brackets ---------- */
.corners { position: relative; }
.corners::before,
.corners::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
}
.corners::before {
  top: -8px;
  left: -8px;
  border-top: 2px solid var(--gold);
  border-left: 2px solid var(--gold);
}
.corners::after {
  bottom: -8px;
  right: -8px;
  border-bottom: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
}

/* ---------- featured result (home) ---------- */
/* ---------- highlights slideshow (home, inside the Latest Result card) ---------- */
/* Separated from the result summary above it by a rule rather than a gap, so
   the two read as sections of one card instead of two stacked cards. */
.highlights {
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid rgba(157, 176, 200, 0.16);
}
.hl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.hl-bar .eyebrow { margin: 0; }
.hl-bar .eyebrow::after { display: none; }
.hl-controls { display: flex; align-items: center; gap: 8px; }
.hl-btn {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line-blue);
  padding: 7px 13px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.hl-btn:hover { color: var(--gold); border-color: var(--gold); }
.hl-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.hl-count {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 3.4em;
  text-align: center;
}

/* The stage owns the 16:9 box; slides are absolutely stacked inside it and
   crossfade. Every source image is pre-cropped to exactly 16:9, so the frame
   height never shifts between slides. */
.hl-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  background: var(--panel);
}
.hl-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s ease, visibility 0.55s;
}
.hl-slide.is-active { opacity: 1; visibility: visible; }
.hl-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fills across one auto-advance interval, so the timing reads as deliberate
   rather than the slide changing out of nowhere. JS drives the width. */
.hl-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: rgba(238, 243, 250, 0.14);
}
.hl-progress span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--gold);
}

/* Wraps because the dot count follows the photo count — at ~34 slides a single
   non-wrapping row would run past the card and force a horizontal scrollbar. */
.hl-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
}
.hl-dot {
  width: 18px;
  height: 4px;
  padding: 0;
  border: none;
  background: rgba(238, 243, 250, 0.22);
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.hl-dot:hover { background: rgba(238, 243, 250, 0.45); }
.hl-dot.is-active { background: var(--gold); }
.hl-dot:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.hl-credit {
  margin-top: 12px;
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
}
.hl-credit a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.hl-credit a:hover { color: var(--gold); }

@media (max-width: 700px) {
  .hl-stage { clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px)); }
}

/* Reduced motion: no crossfade, and JS skips auto-advance entirely so the
   slideshow only moves when the visitor asks it to. */
@media (prefers-reduced-motion: reduce) {
  .hl-slide { transition: none; }
  .hl-progress { display: none; }
}

.featured {
  background:
    linear-gradient(115deg, rgba(255, 182, 18, 0.07), transparent 45%),
    var(--panel);
  border: 1px solid var(--line);
  clip-path: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 28px 100%, 0 calc(100% - 28px));
  padding: 40px;
}
/* The result summary keeps the original three-column grid; the card itself is
   now just a column stack so the slideshow can sit beneath it inside the same
   border rather than as a separate block below the card. */
.featured .f-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}
.featured .f-place {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3.4rem, 7vw, 5.2rem);
  line-height: 1;
  color: var(--gold);
}
.featured .f-place small {
  display: block;
  font-size: 0.75rem;
  letter-spacing: 0.26em;
  color: var(--muted);
  margin-top: 6px;
}
.featured .f-meta h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.featured .f-meta p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; }
.featured .f-highlights { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.featured .f-chip {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-blue);
  background: rgba(42, 102, 178, 0.14);
  padding: 6px 12px;
}
.featured .f-chip strong { color: var(--gold); }
.featured .f-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 18px;
}
.featured .f-links a {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.featured .f-links a:hover { color: var(--gold-soft); border-bottom-color: var(--gold-soft); }
.featured .f-place small { text-transform: none; letter-spacing: 0.12em; }
@media (max-width: 900px) {
  /* the grid moved onto .f-top when the slideshow was nested inside the card,
     so the single-column collapse has to follow it there */
  .featured { padding: 30px; }
  .featured .f-top { grid-template-columns: 1fr; gap: 22px; }
}

/* ---------- sponsor strip (home) ---------- */
.sponsor-strip { text-align: center; }
.sponsor-strip .eyebrow { justify-content: center; }
.sponsor-strip .eyebrow::after { display: none; }
.sponsor-strip .s-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px 48px;
  margin: 32px 0 8px;
}
/* Every logo sits in the same bounding box (not a fixed height on the <img>
   itself), so wordmarks of wildly different ratios — Mastercam is nearly 8:1,
   JPS is almost square — read as "the same size" without distorting either. */
.sponsor-strip .s-logos a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  width: 130px;
}
.sponsor-strip .s-logos img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: filter 0.2s, opacity 0.2s, transform 0.2s;
}
.sponsor-strip .s-logos a:hover img {
  filter: none;
  opacity: 1;
  transform: translateY(-2px);
}

/* ---------- alumni wall (team.html) ---------- */
/* Deliberately its own block rather than reusing .sponsor-strip, so a future
   change to one wall (spacing, box size, hover behaviour) can never leak into
   the other. Same bounded-box technique: every logo gets an identical
   footprint regardless of its native aspect ratio, so nothing stretches and
   nothing dominates the row just for being a wide wordmark.

   Sitting on the bare page gradient like a plain section made it read as a
   continuation of the current-roster grid above it rather than a distinct
   idea, and left contrast for the white-silhouette logos uneven depending on
   where the page's diagonal gradient happened to land. Giving it the same
   solid-panel "band" treatment as the CTA sections - full bleed, its own
   background, rules top and bottom - fixes both at once. */
.alumni-wall {
  position: relative;
  text-align: center;
  padding: 72px 0;
  background: var(--navy);
  border-top: 1px solid var(--line-blue);
  border-bottom: 1px solid var(--line-blue);
  overflow: hidden;
}
.alumni-wall .a-weave {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../img/carbon-gold-weave.jpg") center / cover;
  opacity: 0.4;
}
/* Real photo, not a tileable texture - it has one strong directional light
   sweep baked in, so it is used once as a cover-fit backdrop rather than
   repeated. The scrim does the real work: it is what keeps the white
   silhouette logos and heading readable over a much busier image than the
   previous flat gradients, and it fades the photo out toward both edges so
   it blends into the plain navy sections above and below instead of
   stopping on a hard rectangle. */
.alumni-wall::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(180deg, var(--navy) 0%, rgba(11, 26, 46, 0.55) 18%, rgba(11, 26, 46, 0.55) 82%, var(--navy) 100%),
    rgba(4, 7, 13, 0.35);
}
.alumni-wall .wrap { position: relative; z-index: 1; }
.alumni-wall .eyebrow { justify-content: center; }
.alumni-wall .eyebrow::after { display: none; }
.alumni-wall h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: clamp(1.5rem, 3.6vw, 2.2rem);
  margin-top: 8px;
}
.alumni-wall .a-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  /* Row-gap (first value) has to clear the floating .a-tag above a sponsor
     chip - it happens to sit in the top row today so this isn't visible yet,
     but a tag on any later row would otherwise lap into the chip above it. */
  gap: 26px 24px;
  margin: 44px 0 4px;
}
/* Every logo sits on the same light card, full colour. A soft halo on just
   the two dark-ink marks (Navy, Yale) read as an inconsistent special case
   rather than a real fix - a uniform plaque guarantees contrast for any ink
   colour at once, and it is the one treatment that looks deliberate across
   the whole row rather than patched per logo. */
.alumni-wall .a-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 84px;
  width: 176px;
  padding: 14px 20px;
  background: rgba(238, 243, 250, 0.96);
  border: 1px solid rgba(255, 182, 18, 0.35);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: transform 0.2s, background 0.2s;
}
/* A handful of companies are both a sponsor and an alumni employer - this tag
   flags the overlap directly on the chip rather than making a visitor cross-
   reference two separate pages to notice it themselves. */
.alumni-wall .a-chip.is-sponsor { border-color: var(--gold); }
/* .a-chip has its own clip-path, which clips any absolutely-positioned
   descendant to the chip's own box - including one deliberately positioned
   outside it. The tag has to live in a sibling wrapper instead of inside the
   chip, or it computes a correct position but never actually paints (or
   hit-tests) anywhere. */
/* The wrapper takes over the sizing that .a-chip normally carries as a direct
   flex item, and the nested .a-chip fills it exactly - otherwise the two
   sponsor chips fall out of the grid's sizing rules entirely and blow up to
   whatever their content naturally wants. */
.alumni-wall .a-chip-wrap {
  position: relative;
  width: 176px;
  height: 84px;
}
.alumni-wall .a-chip-wrap .a-chip { width: 100%; height: 100%; }
.alumni-wall .a-tag {
  position: absolute;
  right: 0;
  bottom: 100%;
  font-family: var(--font-display);
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #04070d;
  background: var(--gold);
  padding: 2px 7px;
  clip-path: polygon(5px 0, 100% 0, 100% 100%, 0 100%);
  transition: transform 0.2s;
}
/* The chip lifts on hover (translateY(-3px)); without this the stationary tag
   would be left behind and the gap between them would visibly grow. Hovering
   the chip also triggers :hover on this ancestor wrapper, so both move in
   lockstep and stay touching at every moment, not just at rest. */
.alumni-wall .a-chip-wrap:hover .a-tag { transform: translateY(-3px); }
.alumni-wall .a-note {
  margin-top: 26px;
  font-size: 0.82rem;
  color: var(--muted);
}
.alumni-wall .a-tag-inline {
  position: static;
  display: inline-block;
  clip-path: polygon(6px 0, 100% 0, 100% 100%, 0 100%);
  padding: 2px 8px 2px 9px;
  margin-right: 4px;
  transform: translateY(-1px);
}
.alumni-wall .a-note a { color: var(--gold-soft); border-bottom: 1px solid var(--line); }
.alumni-wall .a-note a:hover { color: var(--gold); }
.alumni-wall .a-chip:hover {
  transform: translateY(-3px);
  background: #fff;
}
.alumni-wall .a-chip img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
/* Fixed 176px chips only wrap to one per row on a phone, wasting the width
   either side. Below 560px two chips share the row instead - a fluid
   percentage rather than a smaller fixed px, so it holds at any phone width
   rather than just the one size it was eyeballed against. */
@media (max-width: 560px) {
  .alumni-wall .a-logos { gap: 22px 14px; }
  .alumni-wall .a-chip-wrap { width: calc(50% - 7px); height: 68px; }
  .alumni-wall .a-chip {
    width: calc(50% - 7px);
    height: 68px;
    padding: 10px 12px;
  }
}

/* ---------- history year nav ---------- */
.year-nav {
  position: sticky;
  top: 89px;
  z-index: 50;
  background: rgba(4, 7, 13, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(157, 176, 200, 0.14);
  overflow-x: auto;
  scrollbar-width: none;
}
.year-nav::-webkit-scrollbar { display: none; }
.year-nav .yn-track {
  display: flex;
  gap: 8px;
  padding: 10px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.year-nav a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 6px 14px;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.year-nav a:hover { color: var(--gold); border-color: var(--line); }

/* ---------- team avatars ---------- */
.member { display: flex; align-items: center; gap: 16px; }
.avatar {
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  color: var(--gold);
  background: rgba(255, 182, 18, 0.08);
  border: 1px solid var(--line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.member.sub .avatar {
  color: var(--blue-bright);
  background: rgba(42, 102, 178, 0.12);
  border-color: var(--line-blue);
}

/* ---------- footer watermark ---------- */
.site-footer { position: relative; overflow: hidden; }
/* The oversized logo watermark that used to sit here read as a rendering
   artefact rather than a design element, so it is gone. */
.site-footer .wrap { position: relative; z-index: 1; }

/* ---------- reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-scroll { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split, .comp { grid-template-columns: 1fr; gap: 28px; }
  .comp.flip .comp-photo { order: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: rgba(4, 7, 13, 0.98);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px 20px;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 0; border-bottom: 1px solid rgba(157, 176, 200, 0.1); }
  .nav-links a.active { border-bottom-color: var(--gold); }
  .nav-cta { margin-top: 14px; text-align: center; clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
  section { padding: 60px 0; }
  .hero { min-height: 86vh; }
}