/* =========================================================================
   OnyxTronix #2231 — site styles
   Brand: Space #151515 · Dark #B00000 · Red #C00000 · Bright #D00000 · Metal #F5F5F5
   Type:  Exo Black Italic (short display only) · Roboto (everything else)
   ========================================================================= */

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --space:  #151515;
  --ink:    #0a0a0a;
  --dark:   #b00000;
  --red:    #c00000;
  --bright: #d00000;
  --metal:  #f5f5f5;
  --white:  #ffffff;

  --grad: linear-gradient(100deg, var(--dark) 0%, var(--bright) 100%);

  --body:   #2b2b2b;
  --muted:  #6a6a6a;
  --line:   #e3e3e3;
  --line-d: rgba(255, 255, 255, .14);

  --font-display: "Exo", "Arial Black", system-ui, sans-serif;
  --font-body: "Roboto", "Heebo", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --sec-y: clamp(4.5rem, 9vw, 8rem);

  --r-sm: 6px;
  --r: 14px;
  --r-lg: 22px;

  --shadow-sm: 0 2px 10px rgba(21, 21, 21, .07);
  --shadow: 0 12px 34px rgba(21, 21, 21, .11);
  --shadow-lg: 0 26px 60px rgba(21, 21, 21, .17);

  --topbar-h: 38px;
  --nav-h: 72px;
  --header-h: calc(var(--topbar-h) + var(--nav-h));
  --ease: cubic-bezier(.22, .78, .3, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 20px); }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--wide { max-width: 1480px; }
.sec { padding-block: var(--sec-y); }
.sec--tight { padding-block: clamp(3rem, 6vw, 5rem); }
.sec--metal { background: var(--metal); }
.sec--space { background: var(--space); color: rgba(255, 255, 255, .8); }
.sec--space h2, .sec--space h3, .sec--space strong { color: var(--white); }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 200;
  background: var(--red); color: #fff; padding: .8rem 1.2rem; font-weight: 700;
  border-radius: var(--r-sm);
  transform: translateY(-160%);
  transition: transform .2s var(--ease);
}
.skip:focus { transform: none; }

/* ---------- type ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  line-height: .96;
  letter-spacing: -.015em;
  color: var(--space);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 7.4vw, 5.6rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2.1vw, 1.6rem); letter-spacing: -.01em; }
/* for long headings that would otherwise wrap into ribbons */
.h2--sm { font-size: clamp(1.6rem, 3.1vw, 2.5rem); line-height: 1.02; }

p { text-wrap: pretty; }
p + p { margin-top: 1.1em; }

.lede { font-size: clamp(1.075rem, 1.55vw, 1.3rem); line-height: 1.62; color: #4a4a4a; }
.sec--space .lede { color: rgba(255, 255, 255, .78); }

.measure { max-width: 66ch; }

/* eyebrow: skewed red bar echoing the italic logo */
.eyebrow {
  display: flex; align-items: center; gap: .7rem;
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 900;
  letter-spacing: .19em; text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.15rem;
}
.eyebrow::before {
  content: ""; width: 30px; height: 7px; flex: none;
  background: var(--grad); transform: skewX(-18deg);
}
.sec--space .eyebrow { color: #ff6a6a; }
.eyebrow--center { justify-content: center; }

.sec-head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.sec-head--center { margin-inline: auto; text-align: center; }
.sec-head--center .eyebrow { justify-content: center; }
.sec-head h2 + p { margin-top: 1.15rem; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--grad);
  --btn-fg: #fff;
  position: relative;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 1.7rem;
  background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--font-display);
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .02em;
  text-decoration: none;
  border: 0; border-radius: 999px;
  cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s;
  box-shadow: 0 8px 22px rgba(176, 0, 0, .28);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(176, 0, 0, .36); }
.btn:active { transform: translateY(0); }
.btn .arrow { transition: transform .25s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--ghost {
  background: transparent; color: var(--space);
  box-shadow: inset 0 0 0 2px rgba(21, 21, 21, .22);
}
.btn--ghost:hover { box-shadow: inset 0 0 0 2px var(--space); }

.btn--ghost-light {
  background: transparent; color: #fff;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .4);
}
.btn--ghost-light:hover { box-shadow: inset 0 0 0 2px #fff; background: rgba(255, 255, 255, .08); }

/* text link with sliding underline */
.link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-weight: 700; color: var(--red); text-decoration: none;
  padding-bottom: 2px;
  background-image: linear-gradient(var(--red), var(--red));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size .3s var(--ease);
}
.link:hover { background-size: 100% 2px; }
.link .arrow { transition: transform .25s var(--ease); }
.link:hover .arrow { transform: translateX(4px); }
.sec--space .link { color: #ff6a6a; background-image: linear-gradient(#ff6a6a, #ff6a6a); }

/* ---------- header ---------- */
.hdr {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; flex-direction: column;
  background: rgba(15, 15, 15, .32);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: background-color .3s, border-color .3s, height .3s var(--ease);
}
.hdr.is-stuck,
.hdr.is-solid {
  background: rgba(15, 15, 15, .93);
  border-bottom-color: var(--line-d);
}
/* the contact strip folds away once you start reading */
.hdr.is-stuck { --topbar-h: 0px; }
.hdr.is-stuck .topbar { opacity: 0; }

.hdr__in {
  flex: 1; min-height: 0;
  width: 100%; max-width: 1480px; margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.5rem;
}

/* ---------- top contact bar ---------- */
.topbar {
  flex: none; height: var(--topbar-h); overflow: hidden;
  background: rgba(0, 0, 0, .38);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
  font-size: .82rem;
  transition: height .3s var(--ease), opacity .25s;
}
/* fixed inner height: the bar clips as it folds instead of squashing its content */
.topbar__in {
  height: 38px;
  max-width: 1480px; margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; gap: 1.25rem;
}
.topbar__contact { display: flex; align-items: center; gap: 1.4rem; margin-right: auto; min-width: 0; }
.topbar__contact a {
  display: inline-flex; align-items: center; gap: .45rem;
  color: rgba(255, 255, 255, .68); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .2s;
}
.topbar__contact a:hover { color: #fff; }
.topbar__contact svg { width: 14px; height: 14px; fill: currentColor; flex: none; opacity: .8; }

.topbar__links { display: flex; align-items: center; gap: .15rem; flex: none; }
.topbar__ico {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px;
  color: rgba(255, 255, 255, .62);
  transition: color .2s, background-color .2s;
}
.topbar__ico:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.topbar__ico svg { width: 16px; height: 16px; fill: currentColor; }
/* the TBA lamp is a tall mark — size it by height so it doesn't letterbox to a sliver */
.topbar__ico--tba svg { width: auto; height: 19px; }
.topbar-sep { width: 1px; height: 16px; margin-inline: .4rem; background: rgba(255, 255, 255, .18); }
/* the FIRST lockup is an image, so it gets its own sizing */
.topbar__ico--first { width: auto; padding-inline: .5rem; }
.topbar__ico--first img { height: 14px; width: auto; opacity: .72; transition: opacity .2s; }
.topbar__ico--first:hover img { opacity: 1; }

@media (max-width: 860px) { .topbar__addr { display: none; } }
@media (max-width: 620px) {
  .topbar { font-size: .76rem; }
  .topbar__in { gap: .6rem; }
  .topbar__ico { width: 26px; height: 26px; }
}
@media (max-width: 400px) { .topbar__contact a span { display: none; } }

.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; text-decoration: none; }
.brand img { height: 32px; width: auto; }
.brand__txt {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.02rem; letter-spacing: -.01em; color: #fff;
  line-height: 1;
}
.brand__txt span { display: block; font-family: var(--font-body); font-style: normal; font-weight: 700;
  font-size: .58rem; letter-spacing: .22em; color: rgba(255, 255, 255, .55); margin-top: 3px;
  text-transform: uppercase; }

/* nav */
.nav > ul { display: flex; align-items: center; gap: .3rem; position: relative; }
.nav a {
  display: block; padding: .55rem .85rem;
  color: rgba(255, 255, 255, .84); text-decoration: none;
  font-weight: 500; font-size: .95rem;
  border-radius: 8px;
  transition: color .2s, background-color .2s;
}
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .09); }
.nav .is-current > a { color: #fff; }

.nav__group { position: relative; }
.nav__group > a::after { content: "▾"; font-size: .6rem; margin-left: .4rem; opacity: .6; }
/* bridges the gap above the submenu, so the pointer never leaves the item */
.nav__group::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; }
.nav__sub {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translate(-50%, 8px);
  min-width: 220px; padding: .5rem;
  background: #1c1c1c; border: 1px solid var(--line-d);
  border-radius: var(--r-sm); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s var(--ease), visibility .2s;
}
.nav__group:hover .nav__sub,
.nav__group:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav__sub a { padding: .6rem .8rem; font-size: .92rem; }

.hdr .btn { padding: .68rem 1.3rem; font-size: .85rem; box-shadow: none; }

/* mobile toggle */
.burger {
  display: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span {
  display: block; position: relative; width: 24px; height: 2px; background: #fff;
  transition: background-color .2s;
}
.burger span::before, .burger span::after {
  content: ""; position: absolute; left: 0; width: 24px; height: 2px; background: #fff;
  transition: transform .3s var(--ease), top .2s;
}
.burger span::before { top: -7px; }
.burger span::after { top: 7px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: rotate(45deg); }
body.nav-open .burger span::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: flex; }
  .hdr .btn { display: none; }
  .nav {
    /* .hdr carries a backdrop-filter, which makes it the containing block for
       its fixed children — so `bottom: 0` would stop at the header's own foot
       and clip the menu. Size the panel against the viewport instead. */
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: auto;
    height: calc(100vh - var(--header-h));
    height: calc(100dvh - var(--header-h));   /* dodges mobile browser chrome */
    background: rgba(12, 12, 12, .98);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    padding: 2rem var(--gutter) calc(4rem + env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .28s, transform .28s var(--ease), visibility .28s;
  }
  body.nav-open { overflow: hidden; }
  body.nav-open .nav { opacity: 1; visibility: visible; transform: none; }
  body.nav-open .hdr { background: rgba(12, 12, 12, .98); }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--line-d); }
  .nav a { padding: 1rem .25rem; font-size: 1.15rem; border-radius: 0; }
  .nav .is-current > a::after {
    content: ""; display: block; height: 3px; width: 22px; margin: 6px 0 0;
    background: var(--grad); transform: skewX(-18deg);
  }
  .nav__group > a::after { display: none; }
  .nav__group::after { display: none; }
  .nav__sub {
    position: static; transform: none; opacity: 1; visibility: visible;
    min-width: 0; background: none; border: 0; box-shadow: none;
    padding: 0 0 .75rem .9rem;
  }
  .nav__sub a { padding: .5rem .25rem; font-size: 1rem; color: rgba(255, 255, 255, .62); }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: clamp(600px, 92vh, 940px);
  display: flex; align-items: flex-end;
  padding-block: calc(var(--header-h) + 4rem) clamp(3.5rem, 7vw, 6rem);
  background: var(--ink);
  color: #fff;
  overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .7; filter: brightness(1.15); }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, .82) 0%, rgba(10, 10, 10, .38) 34%, rgba(10, 10, 10, .93) 100%),
    radial-gradient(120% 80% at 15% 90%, rgba(176, 0, 0, .34), transparent 62%);
}
.hero__in {
  position: relative; width: 100%;
  display: flex; align-items: center; gap: clamp(2rem, 6vw, 5rem);
}
.hero__txt { flex: 1 1 auto; min-width: 0; }
/* This season's game, pinned to the hero's top-left corner as a little seal:
   the game patch inside a red-rimmed white plaque, with a notched ribbon under
   it naming the season. Tilted a touch so it reads as an applied badge rather
   than part of the layout. */
.season-badge {
  position: absolute; z-index: 2;
  top: calc(var(--header-h) + clamp(.6rem, 2.2vw, 1.4rem));
  left: clamp(.9rem, 3.5vw, 2.4rem);
  display: flex; flex-direction: column; align-items: center;
  transform: rotate(-4deg);
  transition: transform .4s var(--ease);
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .45));
}
.season-badge:hover { transform: rotate(-1.5deg) translateY(-3px) scale(1.03); }

.season-badge__art {
  display: block;
  padding: .32rem;
  border-radius: 15px;
  background: var(--grad);            /* the rim */
}
.season-badge__art img {
  display: block;
  width: clamp(52px, 5.6vw, 74px); height: auto;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}

/* the ribbon: a touch wider than the plaque, notched at both ends */
.season-badge__ribbon {
  margin-top: -.45rem;
  padding: .3rem .7rem .28rem;
  background: var(--grad);
  color: #fff;
  font-size: .5rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 50%, 100% 100%, 0 100%, 6px 50%);
}

/* the anniversary logo as a 3D badge: yawed so it faces slightly right,
   with a specular sheen masked to the logo's own silhouette */
.hero__badge {
  position: relative;
  flex: none;
  width: clamp(210px, 27vw, 400px);
  /* the resting pose; JS rewrites these two while the pointer is over the badge */
  --badge-ry: -19deg;
  --badge-rx: 5deg;
  transform: perspective(950px) rotateY(var(--badge-ry)) rotateX(var(--badge-rx));
  transform-style: preserve-3d;
  filter: drop-shadow(16px 20px 34px rgba(0, 0, 0, .62))
          drop-shadow(0 0 30px rgba(255, 206, 150, .22));
  transition: transform .7s var(--ease);
}
/* CSS-only lean, for touch and for the moment before the pointer moves */
.hero__badge:hover { --badge-ry: -11deg; --badge-rx: 2deg; }
/* while the pointer is being tracked the badge should feel bolted to it, so
   the long easing that carries it home is cut down to a short catch-up */
.hero__badge.is-tracking { transition: transform .14s ease-out; }
/* a touch more punch in the art itself so the gloss on top has something
   saturated to bounce off */
.hero__mark {
  width: 100%; height: auto;
  filter: contrast(1.07) saturate(1.12) brightness(1.03);
}

/* A slow specular glare that travels across the badge every few seconds.
   Same silhouette mask as the static sheen, so the light stays on the art. */
.hero__badge::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;                 /* above the <img>, which is not positioned */
  pointer-events: none;
  background: linear-gradient(112deg,
      rgba(255, 255, 255, 0)   38%,
      rgba(255, 255, 255, .28) 46%,
      rgba(255, 255, 255, .68) 50%,
      rgba(255, 255, 255, .28) 54%,
      rgba(255, 255, 255, 0)   62%);
  background-size: 260% 260%;
  background-repeat: no-repeat;
  -webkit-mask-image: url(../img/brand/logo-20-years.png);
  mask-image: url(../img/brand/logo-20-years.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  mix-blend-mode: screen;
  animation: badge-shine 7s var(--ease) infinite;
}
/* Most of the cycle is the resting tail — the glare itself is a ~1.4s pass. */
@keyframes badge-shine {
  0%        { background-position: 165% 50%; opacity: 0 }
  4%        { opacity: 1 }
  20%       { background-position: -65% 50%; opacity: 1 }
  24%, 100% { background-position: -65% 50%; opacity: 0 }
}

.hero__badge::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  /* The permanent gloss: a hotspot in the upper left, a broad sheen falling to
     a shaded lower right, and a cool rim bounce along the bottom edge. overlay
     modulates the logo's own colour — lifting the lights, deepening the darks —
     so it reads as a curved, lacquered surface at all times, not a white wash. */
  background:
    radial-gradient(58% 44% at 26% 16%,
      rgba(255, 255, 255, .78) 0%,
      rgba(255, 255, 255, .30) 42%,
      rgba(255, 255, 255, 0)   72%),
    linear-gradient(9deg,
      rgba(190, 225, 255, .34) 0%,
      rgba(190, 225, 255, 0)   22%),
    linear-gradient(155deg,
      rgba(255, 255, 255, .62) 0%,
      rgba(255, 255, 255, .30) 20%,
      rgba(255, 255, 255, .06) 36%,
      rgba(0, 0, 0, .06)       52%,
      rgba(0, 0, 0, .20)       76%,
      rgba(0, 0, 0, .34)      100%);
  background-size: 150% 150%, 100% 100%, 130% 130%;
  background-position: 30% 20%, 50% 50%, 40% 30%;
  -webkit-mask-image: url(../img/brand/logo-20-years.png);
  mask-image: url(../img/brand/logo-20-years.png);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  mix-blend-mode: overlay;
  /* the highlight never sits still — it drifts, so the surface always looks wet */
  animation: badge-gloss 11s ease-in-out infinite alternate;
}
@keyframes badge-gloss {
  from { background-position: 22% 14%, 50% 50%, 34% 24% }
  to   { background-position: 46% 30%, 50% 50%, 52% 40% }
}

@media (prefers-reduced-motion: reduce) {
  .hero__badge, .hero__badge:hover { transition: none; }
  .hero__badge::before { animation: none; opacity: 0; }
  .hero__badge::after { animation: none; }   /* gloss stays, drift stops */
}
/* Keep the anniversary mark visible on tablets — just stack it under the
   headline once the two columns stop fitting side by side. */
@media (max-width: 760px) {
  .hero__in { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .hero__badge { width: clamp(150px, 42vw, 230px); }
  /* the seal sits over the top of the stacked hero, so start the copy lower */
  .hero { padding-block-start: calc(var(--header-h) + 7rem); }
}
.hero h1 { color: #fff; }
.hero h1 em {
  font-style: italic; color: transparent;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  /* same reason as .stat b — keep the ink inside the painted box */
  padding-block: .2em; display: inline-block;
}
.hero .lede { margin-top: 1.5rem; max-width: 58ch; color: rgba(255, 255, 255, .8); }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; }
.hero .eyebrow { color: rgba(255, 255, 255, .8); }

.scroll-cue {
  position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%);
  width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 12px;
  display: grid; place-items: start center; padding-top: 6px;
}
.scroll-cue::after {
  content: ""; width: 3px; height: 7px; border-radius: 2px; background: rgba(255, 255, 255, .8);
  animation: cue 1.8s var(--ease) infinite;
}
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: 1 } 60% { transform: translateY(10px); opacity: 0 } }

/* page hero (inner pages) */
.phero {
  position: relative;
  padding-block: calc(var(--header-h) + clamp(3.5rem, 8vw, 6.5rem)) clamp(3rem, 6vw, 5rem);
  background: var(--space); color: #fff; overflow: hidden;
}
.phero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(110% 130% at 85% -20%, rgba(208, 0, 0, .32), transparent 58%);
}
.phero__bg { position: absolute; inset: 0; }
.phero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 62%;
  opacity: .7;
  filter: grayscale(.5) contrast(1.06) brightness(1.15);
}
/* Melt the photo into the section: solid Space on the left where the headline
   sits, thinning to the right, then fading out at the top and bottom edges. */
.phero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--space) 4%, rgba(21, 21, 21, .9) 38%, rgba(21, 21, 21, .42) 78%, rgba(21, 21, 21, .58) 100%),
    linear-gradient(180deg, rgba(21, 21, 21, .92) 0%, rgba(21, 21, 21, .25) 42%, rgba(21, 21, 21, .96) 100%);
}
@media (max-width: 760px) {
  /* on narrow screens the text spans the full width, so keep the photo well back */
  .phero__bg img { opacity: .45; }
  .phero__bg::after {
    background: linear-gradient(180deg, rgba(21, 21, 21, .9) 0%, rgba(21, 21, 21, .62) 45%, rgba(21, 21, 21, .96) 100%);
  }
}

/* Right-anchored feature photo, dissolved into the Space background.
   A single horizontal mask on the image plus a vertical scrim on the wrapper —
   no mask-composite, so it behaves the same everywhere. */
.phero__art {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(58%, 820px);
  pointer-events: none;
}
.phero__art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 58%;
  filter: grayscale(.35) contrast(1.06) brightness(.78);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .55) 30%, #000 62%);
}
.phero__art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    var(--space) 0%, rgba(21, 21, 21, .35) 26%,
    rgba(21, 21, 21, .35) 62%, var(--space) 100%);
}
@media (max-width: 860px) { .phero__art { display: none; } }
.phero__in { position: relative; }
.phero h1 { color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.phero .lede { margin-top: 1.2rem; max-width: 62ch; color: rgba(255, 255, 255, .78); }

/* ---------- stats ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--line);
  border-block: 1px solid var(--line);
}
.stats--dark { background: var(--line-d); border-color: var(--line-d); }
.stat { background: var(--white); padding: clamp(1.6rem, 3vw, 2.4rem) 1.25rem; text-align: center; }
.stats--dark .stat { background: var(--space); }
.stat b {
  display: block;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1;
  color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text;
  /* pad the paint box so Exo's ink stays inside the gradient */
  padding-block: .14em;
}
.stat span {
  display: block; margin-top: .6rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--muted);
}
.stats--dark .stat span { color: rgba(255, 255, 255, .5); }

/* ---------- split (image + text) ---------- */
.split {
  display: grid; gap: clamp(2.25rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.split--flip > :first-child { order: 2; }
@media (max-width: 719px) { .split--flip > :first-child { order: 0; } }

.frame {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--space);
}
.frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.frame--tall img { aspect-ratio: 3 / 4; }
.frame--wide img { aspect-ratio: 16 / 9; }
.frame--free img { aspect-ratio: auto; }

/* red skewed accent behind a frame */
.frame-accent { position: relative; }
.frame-accent::before {
  content: ""; position: absolute; z-index: 0;
  inset: auto -14px -14px auto; width: 62%; height: 62%;
  background: var(--grad); border-radius: var(--r-lg);
  transform: skewX(-6deg);
  opacity: .18;
}
.frame-accent .frame { position: relative; z-index: 1; }

/* ---------- generic cards ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }
/* five across on a full-width wrap, folding to 3 then 2 as it narrows */
.grid--5 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); }

/* working-group tiles: square-ish cards, 3 across (3x2), folding to 2 then 1 */
.grid--teams { grid-template-columns: repeat(3, 1fr); }
.grid--teams .feat {
  aspect-ratio: 1 / 1;
  overflow: visible;
  justify-content: center;   /* centre the icon + text block so nothing crowds a corner */
}
.grid--teams .feat__icon { margin-bottom: 1.25rem; }
@media (max-width: 880px) {
  .grid--teams { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid--teams { grid-template-columns: 1fr; }
  .grid--teams .feat { aspect-ratio: auto; justify-content: flex-start; }
}

.card {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.card__img { position: relative; overflow: hidden; background: #ddd; }
.card__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s var(--ease); }
.card:hover .card__img img { transform: scale(1.05); }
.card__body { padding: clamp(1.25rem, 2.2vw, 1.7rem); display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.card__body p { font-size: .97rem; color: #555; }
.card--dark { background: #1e1e1e; border-color: var(--line-d); }
.card--dark .card__body p { color: rgba(255, 255, 255, .7); }
.card--dark h3 { color: #fff; }

/* icon feature card */
.feat { padding: clamp(1.6rem, 3vw, 2.2rem); }
.feat__icon {
  width: 56px; height: 56px; margin-bottom: 1.1rem;
  object-fit: contain; object-position: left center;
}
.sec--space .feat__icon { filter: brightness(1.55) saturate(1.2); }

/* ---------- community project cards ---------- */
.cproj { position: relative; }
.cproj .card__img img { aspect-ratio: 3 / 2; }
/* small brand mark tucked in the corner of the photo — no background */
.cproj__logo {
  position: absolute; top: .6rem; right: .7rem; z-index: 2;
  height: 40px; display: flex; align-items: center;
  pointer-events: none;
}
.cproj__logo img {
  height: 100%; width: auto; max-width: 150px;
  object-fit: contain; object-position: right center;
  /* white halo + dark shadow keeps the mark readable on any photo, no box */
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, .95)) drop-shadow(0 1px 3px rgba(0, 0, 0, .55));
}
.cproj .card__body { gap: .55rem; }
.cproj .card__body .cproj__stat {
  margin-top: auto; padding-top: .5rem;
  font-weight: 900; font-size: .8rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--red);
}

/* ---------- robots ---------- */
.robot-grid { display: grid; gap: clamp(1.5rem, 2.6vw, 2.25rem); grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }

.robot {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.robot:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: transparent; }
.robot__img { position: relative; background: var(--space); overflow: hidden; }
.robot__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .5s var(--ease); }
.robot:hover .robot__img img { transform: scale(1.05); }
.robot__year {
  position: absolute; left: 0; bottom: 0;
  padding: .45rem 1.1rem .45rem .9rem;
  background: var(--grad); color: #fff;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.05rem; letter-spacing: .01em;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.robot__body { padding: 1.4rem clamp(1.25rem, 2.2vw, 1.6rem) 1.6rem; display: flex; flex-direction: column; gap: .85rem; flex: 1; }
.robot__game { font-size: .76rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.robot h3 { font-size: 1.55rem; }
.robot__desc { font-size: .95rem; color: #555; }

.specs { display: flex; flex-wrap: wrap; gap: .4rem; }
.specs li {
  font-size: .73rem; font-weight: 700; letter-spacing: .04em;
  padding: .3rem .65rem; border-radius: 999px;
  background: var(--metal); color: #565656;
  border: 1px solid var(--line);
}
.specs b { color: var(--space); }

.awards {
  margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .875rem; color: #4a4a4a; display: flex; gap: .6rem;
}
.awards::before { content: "🏆"; flex: none; filter: saturate(0) brightness(.6); }

/* ---------- robot showcase ---------- */
.show {
  overflow: hidden;
  --dots-gap: clamp(1rem, 2.2vw, 1.6rem);      /* photo bottom → dots */
  --panels-gap: clamp(1.6rem, 3.4vw, 2.5rem);  /* dots → panel text */
}
/* Seasons that carry a wordmark get a taller gap under the photo: the logo is
   lifted out of the panel to straddle the photo's bottom edge, and the dots
   sit in the room left beneath it. Seasons titled with plain type keep the
   normal spacing, so nothing floats. */
.show:has(.show__panel.is-active .show__name) { --dots-gap: clamp(3.2rem, 6.4vw, 4.6rem); }

/* game plate — the season's own logo above the photo, with the year beneath */
.show__plates {
  position: relative; height: clamp(66px, 10vh, 92px);
  margin-bottom: clamp(.75rem, 1.8vw, 1.25rem);
}
.show__plate {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: .3rem; text-align: center;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.show__plate.is-active { opacity: 1; transform: none; }
.show__plate .season-logo {
  width: auto; height: min(clamp(40px, 5.5vw, 62px), 8vh);
  max-width: min(90vw, 420px);
  object-fit: contain;
}
.show__plate b {
  font-size: .74rem; font-weight: 900; letter-spacing: .3em; color: var(--muted);
  padding: .3rem .55rem .3rem .85rem; border: 1px solid var(--line); border-radius: 999px;
}

/* stage */
.show__stage { position: relative; }
/* The stage is sized off the viewport height, not the width, so the season
   plate, the photo and the robot's name all sit on screen together on a
   laptop. The slide takes its width from that height via the aspect ratio —
   sizing it the other way round used to overflow the track by ~200px and
   bury the dots and the wordmark under the photo. */
.show__track {
  position: relative;
  /* the 66vw arm keeps the photo landscape on narrow screens, where the
     height budget would otherwise be wider than the room it has to fill */
  height: min(clamp(200px, 46vh, 420px), 66vw);
  perspective: 1200px;
}
.show__slide {
  position: absolute; top: 0; left: 50%; translate: -50%;
  height: 100%; width: auto; aspect-ratio: 4 / 3;
  max-width: min(86vw, 660px);
  border-radius: var(--r); overflow: hidden;
  background: var(--space); box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none;
  transform: translateX(0) scale(.7);
  transition: transform .55s var(--ease), opacity .55s var(--ease), filter .55s var(--ease);
}
.show__slide img { width: 100%; height: 100%; object-fit: cover; }

/* neighbours: smaller, pushed out, blurred */
.show__slide[data-pos="0"]  { opacity: 1; transform: translateX(0) scale(1); filter: none; z-index: 3; pointer-events: auto; }
.show__slide[data-pos="-1"] { opacity: .5; transform: translateX(-64%) scale(.78); filter: blur(4px); z-index: 2; }
.show__slide[data-pos="1"]  { opacity: .5; transform: translateX(64%)  scale(.78); filter: blur(4px); z-index: 2; }
.show__slide[data-pos="-2"] { opacity: .22; transform: translateX(-108%) scale(.62); filter: blur(7px); z-index: 1; }
.show__slide[data-pos="2"]  { opacity: .22; transform: translateX(108%)  scale(.62); filter: blur(7px); z-index: 1; }
/* parked off-stage */
.show__slide[data-pos="-3"] { opacity: 0; transform: translateX(-140%) scale(.5); filter: blur(9px); }
.show__slide[data-pos="3"]  { opacity: 0; transform: translateX(140%)  scale(.5); filter: blur(9px); }

/* arrows */
.show__arrow {
  position: absolute; top: 50%; z-index: 5;
  width: 52px; height: 52px; margin-top: -26px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .82); color: var(--space);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color .25s, color .25s, transform .25s var(--ease), box-shadow .25s;
}
.show__arrow:hover { background: var(--red); color: #fff; border-color: transparent; box-shadow: 0 10px 26px rgba(176, 0, 0, .3); }
.show__arrow:active { transform: scale(.94); }
.show__arrow svg { width: 22px; height: 22px; }
.show__arrow--prev { left: clamp(.25rem, 2vw, 1.5rem); }
.show__arrow--next { right: clamp(.25rem, 2vw, 1.5rem); }
.sec--metal .show__arrow { background: rgba(255, 255, 255, .92); }

/* dots */
.show__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; margin-top: var(--dots-gap); }
.show__dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); cursor: pointer;
  transition: background-color .25s, transform .25s var(--ease), width .25s var(--ease);
}
.show__dot:hover { background: #bdbdbd; }
.show__dot.is-active { background: var(--grad); width: 26px; }

/* info panels */
.show__panels { position: relative; margin-top: var(--panels-gap); }
.show__panel {
  max-width: 62ch; margin-inline: auto; text-align: center;
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.show__panel.is-active { opacity: 1; transform: none; }
.show__panel h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
/* 2024-2026 carry the robot's own wordmark instead of type. It is taken out
   of the panel's flow and pinned above it, so it straddles the bottom edge of
   the photo and the dots land underneath — the panel text then starts right
   where the dots end, which is what makes the whole block shorter.
   `bottom` counts upward from the panel's top edge: the panel gap, then the
   9px dot row, then a little clearance. */
.show__name {
  line-height: 0;
  position: absolute; left: 0; right: 0; z-index: 4;
  bottom: calc(100% + var(--panels-gap) + 9px + 6px);
}
/* no-JS fallback shows every panel at once, so the wordmark stays in flow */
.show:not(.is-live) .show__name { position: static; }
.robot-logo {
  display: inline-block;
  width: auto; height: min(clamp(3.2rem, 7.5vw, 5.4rem), 12vh);
  max-width: min(100%, 480px);
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(255, 255, 255, .65));
}
.show__meta {
  margin-top: .55rem;
  font-size: .78rem; font-weight: 900; letter-spacing: .18em; text-transform: uppercase;
  color: var(--red);
}
.show__panel .specs { justify-content: center; margin-top: 1.35rem; }
.show__desc { margin-top: 1.35rem; font-size: 1.03rem; color: #4f4f4f; }
/* the season's robot video, sat at the foot of the panel: a thumbnail card
   that opens YouTube itself rather than embedding a player */
/* one season's worth of catalogs, headed by the year */
.cat-year + .cat-year { margin-top: clamp(2rem, 4vw, 3rem); }
.cat-year__num {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1;
  color: var(--red); margin-bottom: 1.1rem;
  display: flex; align-items: center; gap: .9rem;
}
.cat-year__num::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}
.cat-more { margin-top: clamp(2rem, 4vw, 3rem); color: var(--muted); font-size: .95rem; }

/* PDF card — the video card's twin, with a document glyph in place of the
   thumbnail. Used for the catalogs and the brand book. */
.docs { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
.doc {
  display: inline-flex; align-items: center; gap: .95rem;
  padding: .7rem 1.35rem .7rem .7rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--white); box-shadow: var(--shadow-sm);
  text-decoration: none; text-align: left; color: inherit;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.doc:hover, .doc:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(176, 0, 0, .35);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}
.doc__icon {
  flex: none; width: 46px; height: 58px;
  display: grid; place-items: center;
  background: var(--grad); color: #fff;
  border-radius: 4px 10px 4px 4px;
  font-size: .6rem; font-weight: 900; letter-spacing: .09em;
}
.doc__txt { display: grid; gap: .2rem; }
.doc__txt b { font-size: 1.02rem; line-height: 1.25; }
.doc__txt span { font-size: .83rem; color: var(--muted); }
.sec--space .doc { background: rgba(255, 255, 255, .05); border-color: var(--line-d); color: #fff; }
.sec--space .doc__txt span { color: rgba(255, 255, 255, .6); }
.show__panel .doc { margin-top: 1.25rem; }

.vid {
  display: inline-flex; align-items: center; gap: .95rem;
  margin-top: 1.75rem; padding: .55rem 1.25rem .55rem .55rem;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  text-decoration: none; text-align: left;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.vid:hover, .vid:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(176, 0, 0, .35);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .16);
}
.vid__thumb {
  position: relative; flex: none;
  width: clamp(132px, 17vw, 176px); aspect-ratio: 16 / 9;
  border-radius: 11px; overflow: hidden;
}
.vid__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vid__play {
  position: absolute; inset: 0; margin: auto;
  width: 36px; height: 36px;
  color: #fff;
  background: rgba(176, 0, 0, .92);
  border-radius: 999px; padding: 6px 5px 6px 8px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .45);
  transition: transform .3s var(--ease);
}
.vid:hover .vid__play { transform: scale(1.12); }
.vid__txt { display: flex; flex-direction: column; gap: .18rem; }
.vid__txt b {
  font-size: .74rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
}
.vid__txt span { font-size: .85rem; color: var(--muted); }

/* On a wide screen there is empty gutter either side of the 62ch panel, so the
   video moves out into the left one — bigger, and costing no extra scroll.
   Below that it stays in the flow at the foot of the panel. */
@media (min-width: 1140px) {
  .vid {
    position: absolute; top: .35rem; left: 0;
    margin-top: 0;
    flex-direction: column; align-items: stretch; gap: .75rem;
    width: clamp(190px, 18vw, 270px);
    padding: .6rem .6rem 1rem;
  }
  .vid__thumb { width: 100%; }
  .vid__txt { padding-inline: .4rem; }
  .vid__play { width: 46px; height: 46px; padding: 8px 6px 8px 10px; }
}

.show__result {
  margin-top: 1.1rem; font-size: .92rem; color: var(--muted); font-style: italic;
}

/* achievements */
.ach-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem;
  margin-top: 1.75rem;
}
.ach {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1rem .6rem .7rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .875rem; text-align: left; color: #444;
  box-shadow: var(--shadow-sm);
}
.ach .ach__mark { flex: none; width: 19px; height: 19px; color: #b8912f; }

/* blue banners */
.banners {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1.1rem;
  margin: 1.9rem 0 .4rem;
}
.banner {
  position: relative; width: 158px;
  padding: 1.1rem .8rem 2.4rem;
  display: grid; justify-items: center; gap: .85rem;
  background: linear-gradient(180deg, #2064d6, #164aa8);
  color: #fff; text-align: center;
  border-radius: 5px 5px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 86%, 0 100%);
  filter: drop-shadow(0 12px 20px rgba(22, 74, 168, .3));
  transition: transform .3s var(--ease);
}
.banner:hover { transform: translateY(-4px); }
/* Sits straight on the banner, no plate. The mark's interiors are transparent
   in the file, so the banner blue reads through the triangle, diamond and
   circle. Nothing here may paint white behind it: the source PNG's transparent
   pixels used to be pure white and scaling dragged that out as a halo, which
   is the whole reason the file is alpha-bled. */
.banner__first { width: 66px; height: auto; }
.banner__title {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1;
}
.banner__event {
  font-size: .78rem; font-weight: 500; line-height: 1.45;
  color: rgba(255, 255, 255, .92);
}
.banner__event em { display: block; font-style: normal; font-weight: 900; letter-spacing: .1em; }

/* year picker */
.show__years {
  display: flex; align-items: center; gap: .85rem;
  max-width: 100%; margin-bottom: 1.5rem;
}
.show__years-label {
  flex: none; font-size: .7rem; font-weight: 900; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}
.show__years-scroll {
  display: flex; gap: .4rem; overflow-x: auto; padding: .25rem .1rem .55rem;
  scrollbar-width: thin;
}
.show__year {
  flex: none; padding: .38rem .75rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font: inherit; font-size: .82rem; font-weight: 700; color: #555;
  cursor: pointer; transition: color .2s, background-color .2s, border-color .2s;
}
.show__year:hover { border-color: var(--red); color: var(--red); }
.show__year.is-active {
  background: var(--red); border-color: var(--red); color: #fff;
}
@media (max-width: 620px) {
  .show__years { display: block; }
  .show__years-label { display: block; margin-bottom: .5rem; }
}

/* no-JS / pre-JS fallback: a plain stacked list, no absolute positioning */
.show:not(.is-live) .show__plates { height: auto; display: grid; gap: .5rem; }
.show:not(.is-live) .show__plate { position: static; opacity: 1; transform: none; }
.show:not(.is-live) .show__track { height: auto; display: grid; gap: 1.25rem; }
.show:not(.is-live) .show__slide {
  position: static; width: 100%; height: auto; max-width: none;
  translate: none; opacity: 1; filter: none;
  transform: none; pointer-events: auto;
}
.show:not(.is-live) .show__arrow,
.show:not(.is-live) .show__dots { display: none; }
.show:not(.is-live) .show__panel { opacity: 1; transform: none; margin-bottom: 3rem; }

@media (max-width: 720px) {
  .show__slide { max-width: 88vw; }
  .show__slide[data-pos="-1"] { transform: translateX(-58%) scale(.74); }
  .show__slide[data-pos="1"]  { transform: translateX(58%)  scale(.74); }
  .show__slide[data-pos="-2"], .show__slide[data-pos="2"] { opacity: 0; }
  .show__arrow { width: 44px; height: 44px; margin-top: -22px; }
}

@media (prefers-reduced-motion: reduce) {
  .show__slide, .show__panel, .show__plate { transition: none; }
}

/* ---------- FIRST programs ---------- */
.prog {
  display: grid; place-items: center; gap: 1rem;
  padding: 2rem 1.25rem; text-align: center;
  background: #1e1e1e; border: 1px solid var(--line-d); border-radius: var(--r);
  transition: transform .3s var(--ease), border-color .3s, background-color .3s;
}
.prog:hover { transform: translateY(-4px); border-color: rgba(208, 0, 0, .6); background: #232323; }
.prog img { height: 64px; width: auto; object-fit: contain; }
.prog span { font-size: .85rem; color: rgba(255, 255, 255, .62); line-height: 1.5; }
.prog--now { background: #2a1010; border-color: rgba(208, 0, 0, .55); }
.prog--now span { color: #ff9b9b; font-weight: 700; }

/* ---------- sponsors ---------- */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: clamp(.85rem, 1.6vw, 1.25rem); }
.sponsor {
  display: grid; place-items: center;
  aspect-ratio: 3 / 2; padding: 1.4rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  text-decoration: none; cursor: pointer;
}
.sponsor:hover { transform: translateY(-4px); box-shadow: var(--shadow-sm); border-color: transparent; }
.sponsor img {
  max-height: 68px; width: auto; max-width: 100%; object-fit: contain;
  transition: filter .3s, opacity .3s, transform .3s var(--ease);
}
/* the home-page strip is deliberately quiet; the sponsors page shows full colour */
.sponsor-grid--muted .sponsor img { filter: grayscale(1); opacity: .55; }
.sponsor-grid--muted .sponsor:hover img { filter: none; opacity: 1; }

/* a single sponsor called out as more prominent than the rest of the grid */
.sponsor--feature { border-color: var(--bright); box-shadow: var(--shadow-sm); }
.sponsor--feature img { max-height: 96px; }
.sponsor-grid--muted .sponsor--feature img { filter: none; opacity: 1; }
/* 8 logos read best as two even rows */
.sponsor-grid--muted { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .sponsor-grid--muted { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- colour swatches (branding page) ---------- */
.swatch-grid { display: grid; gap: clamp(.75rem, 1.6vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) { .swatch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .swatch-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.swatch { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--white); }
.swatch__chip { aspect-ratio: 3 / 2; box-shadow: inset 0 0 0 1px rgba(21, 21, 21, .10); }
.swatch__meta { padding: .9rem 1rem 1rem; }
.swatch__meta strong {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  text-transform: uppercase; font-size: .95rem; color: var(--space);
}
.swatch__meta span { display: block; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The gradient reads as a range, not a flat colour: its two endpoints are
   labelled in place at the ends they actually are, with the name and the
   direction of travel between them. */
.gradient-bar {
  margin-top: clamp(.75rem, 1.6vw, 1.25rem);
  min-height: 92px; border-radius: var(--r); background: var(--grad);
  padding: 1rem clamp(1rem, 2.4vw, 1.6rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  color: #fff;
}
.gradient-bar__stop {
  display: grid; gap: .2rem; flex: none;
  font-size: .78rem; font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .82);
}
.gradient-bar__stop b {
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: .95rem; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.gradient-bar__stop--end { text-align: right; justify-items: end; }
.gradient-bar__name {
  display: flex; align-items: center; gap: .6rem; flex: 1 1 auto;
  justify-content: center; min-width: 0;
  font-family: var(--font-display); font-style: italic; font-weight: 900;
  font-size: clamp(.85rem, 1.6vw, 1.05rem);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
/* the rules either side of the name double as the arrow showing which way it runs */
.gradient-bar__name::before,
.gradient-bar__name::after {
  content: ""; height: 1px; flex: 1 1 auto; min-width: 12px;
  background: rgba(255, 255, 255, .5);
}
@media (max-width: 560px) {
  .gradient-bar { justify-content: center; text-align: center; }
  .gradient-bar__name { flex: 1 0 100%; order: -1; }
  .gradient-bar__stop--end { text-align: left; justify-items: start; }
}

/* ---------- gallery ---------- */
/* season filter — the rail is built by JS from the tiles' own data-year, so it
   stays empty (and hidden) until the photos are actually dated */
.gal__filter {
  display: flex; align-items: center; flex-wrap: wrap; gap: .8rem 1.1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.gal__label {
  font-size: .74rem; font-weight: 900; letter-spacing: .19em;
  text-transform: uppercase; color: var(--muted); flex: none;
}
.gal__years { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .3rem; scrollbar-width: thin; }
.gal__year {
  flex: none; padding: .42rem .85rem;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px;
  font-size: .85rem; font-weight: 700; color: var(--body); cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.gal__year:hover { border-color: var(--red); color: var(--red); }
.gal__year.is-active { background: var(--grad); border-color: transparent; color: #fff; }
.gal__count { font-size: .84rem; color: var(--muted); margin-left: auto; }
.gal__select { display: none; }
@media (max-width: 620px) {
  /* the rail turns into a plain dropdown where there is no room to scroll it */
  .gal__years { display: none; }
  .gal__select {
    display: block; width: 100%; padding: .6rem .8rem;
    border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--white); font: inherit; font-size: .95rem; color: var(--body);
  }
  .gal__count { margin-left: 0; }
}
.gal__empty { color: var(--muted); }

/* placeholder shown while the gallery is being refreshed */
.gal__soon { text-align: center; padding: clamp(2.5rem, 9vw, 6rem) 0; }
.gal__soon .lede { max-width: 46ch; margin-inline: auto; }

.gallery { columns: 4 260px; column-gap: clamp(.6rem, 1.2vw, 1rem); }
.gallery button[hidden] { display: none; }
.gallery button {
  display: block; width: 100%; padding: 0; margin: 0 0 clamp(.6rem, 1.2vw, 1rem);
  background: none; border: 0; cursor: zoom-in;
  border-radius: var(--r-sm); overflow: hidden;
  break-inside: avoid;
  line-height: 0;
}
.gallery img { width: 100%; transition: transform .5s var(--ease), filter .3s; }
.gallery button:hover img { transform: scale(1.04); filter: brightness(1.06); }

.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 8, 8, .94);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: min(1200px, 100%); max-height: 84vh; width: auto; border-radius: var(--r-sm); box-shadow: var(--shadow-lg); }
.lightbox__btn {
  position: absolute; z-index: 2;
  width: 52px; height: 52px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #fff;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px;
  cursor: pointer; font-size: 1.35rem; line-height: 1;
  transition: background-color .2s, transform .2s;
}
.lightbox__btn:hover { background: var(--red); transform: scale(1.06); }
.lightbox__close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.lightbox__prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; margin-top: -26px; }
.lightbox__next { right: clamp(.6rem, 3vw, 2rem); top: 50%; margin-top: -26px; }
.lightbox__count {
  position: absolute; bottom: clamp(1rem, 3vw, 2rem); left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .65); font-size: .85rem; font-variant-numeric: tabular-nums;
}

/* ---------- newsletter list ---------- */
.season { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.season > h3 { margin-bottom: 1.25rem; }
.issues { display: grid; gap: .6rem; }
.issue {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem;
  padding: 1.05rem 1.35rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color .25s, transform .25s var(--ease), box-shadow .25s;
}
.issue:hover { border-color: rgba(192, 0, 0, .45); transform: translateX(4px); box-shadow: var(--shadow-sm); }
.issue__no {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: 1.05rem; color: var(--space); min-width: 5.5rem;
}
.issue__dates { color: var(--muted); font-size: .92rem; margin-right: auto; }
.issue .link { font-size: .9rem; }

/* ---------- memorial ---------- */
.memo { background: #101010; color: rgba(255, 255, 255, .78); }
.memo__in { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.5rem, 4vw, 3rem); }
.memo__pic {
  width: clamp(84px, 12vw, 128px); aspect-ratio: 1; flex: none;
  border-radius: 999px; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .16);
  filter: grayscale(1);
}
.memo__pic img { width: 100%; height: 100%; object-fit: cover; }
.memo__pic--hero {
  margin: 0 auto 1.75rem;
  width: clamp(180px, 26vw, 280px);
  border-radius: clamp(18px, 3vw, 32px);
}
.memo__txt { flex: 1 1 260px; }
.memo__name {
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.35rem, 2.6vw, 1.9rem); color: #fff; text-transform: uppercase; line-height: 1;
}
.memo__dates { font-size: .85rem; letter-spacing: .16em; color: rgba(255, 255, 255, .45); margin-top: .5rem; }
.memo__txt p { margin-top: .8rem; font-size: .98rem; }

.noya-spotify {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .5rem 1.1rem; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .05);
  color: #9a9a9a; font-size: .95rem; font-weight: 500;
  transition: color .2s, border-color .2s, background .2s;
}
.noya-spotify svg { fill: #9a9a9a; flex: none; transition: fill .2s; }
.noya-spotify:hover, .noya-spotify:focus-visible { color: #d8d8d8; border-color: rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1); }
.noya-spotify:hover svg, .noya-spotify:focus-visible svg { fill: #d8d8d8; }

.tribute { max-width: 62ch; margin-inline: auto; }
.tribute p { font-size: 1.1rem; line-height: 1.85; }
.tribute__heart { font-size: 1.2em; line-height: 1; vertical-align: -.08em; }
/* Noya's cookie, tucked into the corner of her recipe. */
.recipe {
  position: relative; overflow: hidden;
  background: var(--metal); border-radius: var(--r); padding: clamp(1.5rem, 3vw, 2.25rem);
  border-left: 5px solid var(--red);
}
.recipe::after {
  content: ""; position: absolute; z-index: 0;
  right: -1.6rem; bottom: -2.2rem;
  width: clamp(120px, 24%, 190px); aspect-ratio: 1;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cpath%20fill%3D%27%23e4e4e4%27%20fill-rule%3D%27evenodd%27%20d%3D%27M50%203c9.6%200%2015.8%205.4%2024.2%209.1C82.6%2015.8%2092%2020.6%2095.4%2029c3.4%208.4.2%2017.3.2%2026.4%200%209.1%202.6%2018.3-2.6%2025.4-5.2%207.1-15%208.6-23.4%2012.1C61.2%2096.4%2055.9%2097%2050%2097c-9.6%200-18.1-3.4-26.5-7.1C15.1%2086.2%207.4%2081.6%204%2073.2.6%2064.8%203%2055.4%203%2046.3c0-9.1%201.6-18%206.8-25.1C15%2014.1%2023.6%2011.3%2032%207.8%2037.9%205.3%2043.5%203%2050%203zM33%2027a7.5%207.5%200%201%200%200%2015%207.5%207.5%200%200%200%200-15zM64%2024a5.5%205.5%200%201%200%200%2011%205.5%205.5%200%200%200%200-11zM49%2050a7%207%200%201%200%200%2014%207%207%200%200%200%200-14zM75%2046a5.5%205.5%200%201%200%200%2011%205.5%205.5%200%200%200%200-11zM28%2060a6%206%200%201%200%200%2012%206%206%200%200%200%200-12zM57%2075a5%205%200%201%200%200%2010%205%205%200%200%200%200-10zM78%2070a4%204%200%201%200%200%208%204%204%200%200%200%200-8z%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
  transform: rotate(-12deg);
  pointer-events: none;
}
.recipe > * { position: relative; z-index: 1; }
.recipe ol { list-style: none; counter-reset: step; display: grid; gap: .5rem; margin-top: 1rem; }
.recipe li { counter-increment: step; padding-left: 2.1rem; position: relative; }
.recipe li::before {
  content: counter(step); position: absolute; left: 0; top: .28rem;
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  background: var(--red); color: #fff; border-radius: 999px;
  font-size: .72rem; font-weight: 900;
}

/* =========================================================================
   monday.com collaboration page
   Their brand mark is three tilted capsules, so the whole page is built on
   that one shape. Everything is scoped under .md, and the site's own layout,
   type and section rhythm are left exactly as they are — only the accent
   colours change, from OnyxTronix red to monday's palette.
   ========================================================================= */
.md {
  /* taken straight out of the official logo file */
  --md-red:    #f62b54;
  --md-yellow: #ffcc00;
  --md-green:  #00ca72;
  --md-blue:   #0073ea;
  --md-purple: #a25ddc;
  --md-grad: linear-gradient(100deg, var(--md-red) 0%, var(--md-yellow) 52%, var(--md-green) 100%);
}

/* Plain, solid sections — the page carries monday's palette only as small
   accents (links, step markers, the logo card), not as a background wash. */
.md .sec { background: var(--white); }
.md .sec--metal { background: var(--metal); }
.md .sec--space { background: var(--space); }
.md .phero--md, .md .cta { background: var(--space); }
/* one soft brand-blue glow in the hero, nothing more */
.md .phero--md::before { background: radial-gradient(120% 140% at 82% -25%, rgba(0, 115, 234, .18), transparent 60%); }

/* the monday.com lockup standing in for the page title */
.phero__logo { line-height: 0; margin: 0; }
.phero__logo img { width: min(420px, 66vw); height: auto; }

/* logo card: the lockup on plain white, the way every other logo card on the
   site is set — the stripes are the page's job, not the card's */
.md-card {
  position: relative; overflow: hidden;
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  background: var(--white);
  display: grid; place-items: center;
  min-height: clamp(240px, 34vw, 380px);
  padding: clamp(2rem, 6vw, 4rem);
}
.md-card img { position: relative; z-index: 1; width: min(100%, 400px); height: auto; }

/* the three brand colours, called out under the lockup */
.md-swatches { position: relative; z-index: 1; display: flex; gap: .5rem; margin-top: 1.5rem; }
.md-swatch { width: 34px; height: 12px; border-radius: 999px; }

/* accents: monday's palette stands in for OnyxTronix red on this page only */
.md .link { color: var(--md-blue); background-image: linear-gradient(var(--md-blue), var(--md-blue)); }
.md .sec--space .link { color: #4da3ff; background-image: linear-gradient(#4da3ff, #4da3ff); }
.md .steps .step:nth-child(1)::before { background: var(--md-red); }
.md .steps .step:nth-child(2)::before { background: var(--md-green); }
.md .step::before { font-family: var(--font-body); font-style: normal; border-radius: 12px; }

/* ---------- steps ---------- */
.steps { display: grid; gap: 1.25rem; counter-reset: s; }
.step {
  display: flex; gap: 1.25rem; align-items: flex-start;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
}
.step::before {
  counter-increment: s; content: counter(s);
  flex: none; width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--grad); color: #fff; border-radius: 999px;
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 1.05rem;
}
.step h3 { font-size: 1.1rem; margin-bottom: .35rem; }
.step p { font-size: .97rem; color: #555; }

/* ---------- contact ---------- */
.contact-grid { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.contact-card {
  padding: clamp(1.5rem, 3vw, 2rem);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-d); border-radius: var(--r);
}
.contact-card h3 { font-size: 1.1rem; margin-bottom: .6rem; }
.contact-card a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.contact-card a:hover { border-bottom-color: var(--bright); }

/* ---------- CTA band ---------- */
.cta {
  position: relative; overflow: hidden;
  background: var(--space); color: #fff; text-align: center;
}
.cta::before {
  content: ""; position: absolute; inset: -30% -10% auto;
  height: 160%; background: radial-gradient(60% 60% at 50% 0%, rgba(208, 0, 0, .42), transparent 70%);
}
.cta__in { position: relative; }
.cta h2 { color: #fff; }
.cta p { margin: 1.1rem auto 0; max-width: 54ch; color: rgba(255, 255, 255, .76); }
.cta__btns { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: 2.1rem; }

/* ---------- footer ---------- */
.ftr { background: var(--ink); color: rgba(255, 255, 255, .62); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; font-size: .95rem; }
.ftr__top { display: grid; gap: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 560px) {
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr__brand { grid-column: 1 / -1; }
}
@media (min-width: 960px) {
  .ftr__top { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
  .ftr__brand { grid-column: auto; }
}
.ftr__brand > img { height: 46px; width: auto; margin-bottom: 1.1rem; }
.ftr__brand p { font-size: .93rem; max-width: 34ch; }
.ftr h4 {
  font-family: var(--font-body); font-size: .74rem; font-weight: 900;
  letter-spacing: .17em; text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.ftr li + li { margin-top: .55rem; }
.ftr a { text-decoration: none; transition: color .2s; }
.ftr a:hover { color: #fff; }
.ftr address { font-style: normal; line-height: 1.8; }

.socials { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.3rem; }
.socials a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--line-d); border-radius: 999px; color: rgba(255, 255, 255, .7);
  transition: background-color .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }
/* FIRST Israel is a lockup, so it sits in a wider pill */
.socials a svg[viewBox="0 0 72 112"] { width: auto; height: 22px; }
.socials__first { width: auto !important; padding-inline: .85rem; }
.socials__first img { height: 15px; width: auto; opacity: .8; transition: opacity .2s; }
.socials__first:hover img { opacity: 1; }

.ftr__bot {
  margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem;
  border-top: 1px solid var(--line-d);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem;
  font-size: .84rem; color: rgba(255, 255, 255, .42);
}
.ftr__bot img { height: 26px; width: auto; opacity: .55; }

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

/* ---------- utilities ---------- */
.center { text-align: center; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 2rem; }
.mt-3 { margin-top: clamp(2rem, 4vw, 3rem); }
.stack > * + * { margin-top: 1.15rem; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- achievements timeline ---------- */
.aw-timeline { --rail: 132px; }
.aw-year {
  display: grid;
  grid-template-columns: var(--rail) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(2rem, 4vw, 3.25rem);
  border-top: 1px solid var(--line);
}
.aw-year:first-child { border-top: 0; }

.aw-year__rail { position: relative; }
.aw-year__num {
  position: sticky; top: calc(var(--header-h) + 24px);
  display: block;
  font-family: var(--font-display); font-weight: 900; font-style: italic;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1;
  color: transparent; background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  padding-block: .14em;
}

.aw-year__game {
  font-size: .76rem; font-weight: 900; letter-spacing: .17em;
  text-transform: uppercase; color: var(--red);
}
.aw-year__robot { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-top: .3rem; }
.aw-none { margin-top: 1rem; color: var(--muted); font-size: .95rem; font-style: italic; }

/* the award reel */
.aw-list { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: 1.5rem; align-items: flex-start; }

.award { flex: 0 0 auto; transition: flex-basis .35s var(--ease); }
.award__btn {
  display: grid; justify-items: center; align-content: center; gap: .7rem;
  width: 172px; min-height: 132px; padding: 1.1rem 1rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  cursor: pointer; text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.award__btn:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: transparent; }
.award--banner .award__btn { background: none; border: 0; padding: 0; width: auto; }
.award--banner .award__btn:hover { box-shadow: none; }

.award__mark { display: grid; place-items: center; transition: transform .35s var(--ease); }
.award__mark svg.ach__mark { width: 34px; height: 34px; color: #b8912f; }
.award__name {
  font-size: .88rem; font-weight: 700; color: #444; line-height: 1.35;
}

/* content is real page content; JS hides it and shows it in the focus overlay instead */
.has-js .award__info { display: none; }

/* focus mode: blur the page, centre one award, read it, come back */
.aw-focus {
  position: fixed; inset: 0; z-index: 180;
  display: grid; grid-template-rows: 1fr auto;
  justify-items: center; align-items: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 3rem) clamp(1.75rem, 4vw, 2.75rem);
  background: rgba(12, 12, 12, .58);
  -webkit-backdrop-filter: blur(18px) saturate(.85);
  backdrop-filter: blur(18px) saturate(.85);
  opacity: 0; visibility: hidden;
  transition: opacity .38s var(--ease), visibility .38s var(--ease);
}
.aw-focus.is-open { opacity: 1; visibility: visible; }

/* Each award opens with its own little animated scene behind the panel — gears
   for engineering, a scope trace for control, a drawing compass for design and
   so on. Decorative only: aria-hidden, and the markup is thrown away on close
   so nothing keeps ticking behind the page. */
.aw-focus__motif {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
  color: #e8bd52;
  opacity: 0;
  transition: opacity .6s var(--ease) .15s;
}
.aw-focus.is-open .aw-focus__motif { opacity: .17; }
.aw-focus__motif svg {
  width: min(74vmin, 620px); height: auto;
  overflow: visible;
}
.aw-focus__panel, .aw-focus__close { position: relative; z-index: 1; }

/* SVG needs its own box as the transform reference, or percentages resolve
   against the whole user-space canvas */
.aw-focus__motif [class^="m-"], .aw-focus__motif [class*=" m-"] {
  transform-box: fill-box;
  transform-origin: 50% 50%;   /* spin in place; without this it orbits its own corner */
}
.aw-focus__motif .m-swing { transform-origin: 50% 0; }   /* the medal hangs from its ribbon */
.aw-focus__motif .m-pivot { transform-origin: 0 50%; }   /* the compass arm turns on its point */
.aw-focus__motif .m-bar { transform-origin: 50% 100%; }  /* bars grow off the axis */

.m-spin      { animation: m-spin 14s linear infinite; }
.m-spin-rev  { animation: m-spin 14s linear infinite reverse; }
.m-slow      { animation-duration: 9s; }
.m-slower    { animation-duration: 6.5s; }

/* dashes crawling along a path: a route being followed, a live signal trace */
.m-flow   { animation: m-flow 2.4s linear infinite; }
/* a stroke that draws itself once, then holds */
.m-draw   { animation: m-draw 1.9s var(--ease) forwards; }
.m-travel { offset-path: path("M18 112c30 0 26-52 58-52s34 44 62 44 30-38 44-52"); animation: m-travel 4.4s var(--ease) infinite; }
.m-ping   { animation: m-ping 2.6s var(--ease) infinite; }
.m-sweep  { animation: m-sweep 3.4s var(--ease) infinite; }
.m-bar    { animation: m-bar 2.6s var(--ease) infinite; }
.m-breathe{ animation: m-breathe 3.4s var(--ease) infinite; }
.m-pulse  { animation: m-pulse 2.2s var(--ease) infinite; }
.m-flicker{ animation: m-flicker 2.8s steps(1, end) infinite; }
.m-rays   { animation: m-rays 2.8s var(--ease) infinite; }
.m-iris   { animation: m-iris 4.2s var(--ease) infinite; }
.m-burst  { animation: m-burst 2.8s var(--ease) infinite; }
.m-wave   { animation: m-wave 3.2s var(--ease) infinite; }
.m-swing  { animation: m-swing 4s var(--ease) infinite; }
.m-tick   { animation: m-tick 2.4s var(--ease) infinite; }

.m-d1 { animation-delay: .18s }
.m-d2 { animation-delay: .36s }
.m-d3 { animation-delay: .54s }

@keyframes m-spin    { to { transform: rotate(360deg) } }
@keyframes m-flow    { to { stroke-dashoffset: -34 } }
@keyframes m-draw    { to { stroke-dashoffset: 0 } }
@keyframes m-travel  { 0% { offset-distance: 0%; opacity: 0 }
                       8%, 92% { opacity: 1 }
                       100% { offset-distance: 100%; opacity: 0 } }
@keyframes m-ping    { 0% { transform: scale(.35); opacity: .95 }
                       70%, 100% { transform: scale(1.9); opacity: 0 } }
@keyframes m-sweep   { 0%, 100% { transform: translateX(0) } 50% { transform: translateX(168px) } }
@keyframes m-bar     { 0%, 100% { transform: scaleY(.55) } 45% { transform: scaleY(1) } }
@keyframes m-breathe { 0%, 100% { transform: scale(1); opacity: 1 } 50% { transform: scale(1.12); opacity: .55 } }
@keyframes m-pulse   { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.14) } }
@keyframes m-flicker { 0%, 100% { opacity: 1 } 45% { opacity: .25 } 55% { opacity: 1 } 70% { opacity: .4 } }
@keyframes m-rays    { 0%, 100% { transform: scale(1); opacity: .5 } 50% { transform: scale(1.14); opacity: 1 } }
@keyframes m-iris    { 0%, 100% { transform: rotate(0) scale(1) } 50% { transform: rotate(34deg) scale(.72) } }
@keyframes m-burst   { 0% { transform: scale(.2); opacity: 0 } 30% { opacity: 1 } 100% { transform: scale(2.1); opacity: 0 } }
@keyframes m-wave    { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes m-swing   { 0%, 100% { transform: rotate(-7deg) } 50% { transform: rotate(7deg) } }
@keyframes m-tick    { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

@media (prefers-reduced-motion: reduce) {
  .aw-focus__motif * { animation: none !important; }
  .aw-focus__motif .m-draw { stroke-dashoffset: 0 !important; }
}

.aw-focus__panel {
  display: grid; gap: clamp(1.4rem, 3.5vw, 3rem);
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  width: min(900px, 100%);
  opacity: 0; transform: translateY(20px) scale(.97);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.aw-focus.is-open .aw-focus__panel { opacity: 1; transform: none; }

.aw-focus__mark { display: grid; place-items: center; transform: scale(1.18); }
.aw-focus__mark svg.ach__mark { width: 76px; height: 76px; color: #e8bd52; }

.aw-focus__text h3 { color: #fff; font-size: clamp(1.5rem, 3.4vw, 2.4rem); }
.aw-focus__text p { margin-top: 1rem; color: rgba(255, 255, 255, .84); font-size: clamp(1rem, 1.5vw, 1.14rem); }
.aw-focus__text .award__where {
  margin-top: .9rem !important; font-size: .87rem !important;
  color: rgba(255, 255, 255, .5) !important;
}

/* minimal white arrow back down to the page, gently floating */
.aw-focus__close {
  width: 54px; height: 54px; padding: 0;
  display: grid; place-items: center;
  background: transparent; color: #fff;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 999px;
  cursor: pointer;
  transition: background-color .25s, border-color .25s, transform .25s var(--ease);
  animation: awFloat 2.6s ease-in-out infinite;
}
.aw-focus__close:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .6); }
.aw-focus__close svg { width: 24px; height: 24px; }
@keyframes awFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

@media (max-width: 640px) {
  .aw-focus__panel { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 1.5rem; }
  .aw-focus__mark { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .aw-focus, .aw-focus__panel { transition: none; }
  .aw-focus__close { animation: none; }
}


@media (max-width: 720px) {
  .aw-timeline { --rail: 1fr; }
  .aw-year { grid-template-columns: 1fr; gap: .5rem; }
  .aw-year__num { position: static; }
  .award__btn { width: 148px; }
  .award.is-open { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .award.is-open .award__info { text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .award, .award__mark, .award__info { transition: none; animation: none; }
}