/* ==========================================================================
   Zac Stimpson — night-race drench
   Palette and type per DESIGN.md. Red is load-bearing, not an accent.
   ========================================================================== */

:root {
  --red:        oklch(0.55 0.22 28);
  --red-bright: oklch(0.63 0.24 28);
  --red-deep:   oklch(0.38 0.16 28);
  --red-dim:    oklch(0.30 0.12 28);
  --carbon:        oklch(0.15 0.008 28);
  --carbon-raised: oklch(0.19 0.01 28);
  --ink:        oklch(0.13 0.008 28);
  --white:      oklch(0.96 0.005 28);
  --muted:      oklch(0.72 0.012 28);
  --line:       oklch(0.32 0.015 28);
  /* championship gold: reserved strictly for title-winning mentions */
  --gold:       oklch(0.8 0.115 85);

  --display: "Big Shoulders Display", "Big Shoulders", "Arial Narrow", sans-serif;
  --body: "Archivo", "Helvetica Neue", sans-serif;

  --gutter: clamp(1rem, 4vw, 4rem);
  --section-gap: clamp(6rem, 14vh, 12.5rem);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--carbon);
  color: var(--white);
  font-family: var(--body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--red); color: var(--white); }

/* ---------- shared type ---------- */

.eyebrow {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 1rem;
}

.eyebrow--onred { color: var(--white); opacity: 0.8; }

.h2 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.h2 em {
  font-style: normal;
  color: var(--red-bright);
}

/* championship mentions: gold text + laurel, never used for anything else */
.champ { color: var(--gold); font-weight: 600; }
/* on the red band the base gold sits under 3:1; lift it there only */
.marquee__track .champ { font-weight: inherit; color: oklch(0.87 0.095 88); }

.laurel { color: var(--gold); flex: none; }
.champ > .laurel {
  display: inline-block;
  width: 1.25em;
  height: 0.88em;
  vertical-align: -0.16em;
  margin-right: 0.4em;
}
.timeline__body h3 .laurel { width: 1em; height: 0.7em; }

/* ---------- buttons ---------- */

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: 0.85rem 1.8rem;
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.35s var(--ease-expo), color 0.35s var(--ease-expo),
              border-color 0.35s var(--ease-expo), box-shadow 0.35s var(--ease-expo);
  will-change: transform;
}

/* shine sweep on hover */
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -45%;
  width: 38%;
  background: linear-gradient(100deg, transparent, oklch(0.98 0.005 28 / 0.32), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::before { animation: btn-shine 0.65s var(--ease-expo); }
@keyframes btn-shine {
  to { transform: translateX(420%) skewX(-20deg); }
}
.btn:active { transform: translateY(1px) scale(0.985); }

.btn--red {
  background: var(--red);
  color: var(--white);
}
.btn--red:hover {
  background: var(--red-bright);
  box-shadow: 0 0 34px oklch(0.55 0.22 28 / 0.45);
}

.btn--ghost {
  border-color: var(--line);
  color: var(--white);
}
.btn--ghost:hover { border-color: var(--red-bright); color: var(--red-bright); }

.btn--nav { padding: 0.6rem 1.2rem; background: var(--red); color: var(--white); }
.btn--nav:hover { background: var(--red-bright); }

.btn--white { background: var(--white); color: var(--red-deep); }
.btn--white:hover { box-shadow: 0 0 40px oklch(0.98 0.01 28 / 0.4); }

.btn--outline-white {
  border-color: oklch(0.96 0.005 28 / 0.5);
  color: var(--white);
  text-transform: none;
  letter-spacing: 0.02em;
}
.btn--outline-white:hover { border-color: var(--white); background: oklch(0.96 0.005 28 / 0.08); }

/* ---------- preloader ---------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--red);
  transition: transform 0.7s var(--ease-expo);
}

.preloader--done { transform: translateY(-101%); }
.preloader--gone { display: none; }

.preloader__mark {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--white);
  text-align: left;
}

.preloader__line {
  display: block;
  overflow: hidden;
}

.preloader__line::after { content: ""; }

.preloader__line--1, .preloader__line--2 {
  clip-path: inset(0 0 100% 0);
  animation: pre-wipe 0.6s var(--ease-expo) forwards;
}
.preloader__line--2 { animation-delay: 0.12s; color: var(--ink); }

@keyframes pre-wipe {
  to { clip-path: inset(0 0 0% 0); }
}

/* ---------- progress + cursor ---------- */

.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--red-bright);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 60;
  pointer-events: none;
}

.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--red-bright);
  pointer-events: none;
  z-index: 90;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease-expo), height 0.25s var(--ease-expo), opacity 0.25s;
  mix-blend-mode: difference;
  opacity: 0;
}
.cursor--on { opacity: 1; }
.cursor--grow { width: 46px; height: 46px; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ---------- nav ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem var(--gutter);
  transition: background-color 0.4s var(--ease-expo), box-shadow 0.4s var(--ease-expo);
}

.nav--scrolled {
  background: oklch(0.15 0.008 28 / 0.86);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}

.nav__mark {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  text-decoration: none;
}

/* the real ZS mark, white cut from Zac's own logo */
.nav__zs {
  display: block;
  height: 1.45rem;
  width: auto;
  transition: transform 0.25s var(--ease-expo);
}
.nav__mark { align-items: center; }
.nav__mark:hover .nav__zs { transform: skewX(-8deg) translateX(2px); }

.nav__num {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--muted);
}

.nav__links {
  display: flex;
  gap: clamp(1.2rem, 3vw, 2.5rem);
}

.nav__links a {
  position: relative;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  padding: 0.4rem 0;
  transition: color 0.3s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.1rem;
  height: 2px;
  background: var(--red-bright);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-expo);
}
.nav__links a:hover { color: var(--red-bright); }
.nav__links a:hover::after { transform: scaleX(1); }

.nav__right { display: flex; align-items: center; gap: 1rem; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px; height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 26px; height: 2px;
  margin: 0 auto;
  background: var(--white);
  transition: transform 0.35s var(--ease-expo), opacity 0.3s;
}
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav__links, .btn--nav { display: none; }
  .nav__burger { display: flex; }
}

/* ---------- full-screen menu ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--red);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--gutter) 3rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--ease-expo);
  visibility: hidden;
}

.menu--open { clip-path: inset(0 0 0% 0); visibility: visible; }

.menu__links { display: flex; flex-direction: column; }

.menu__links a {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 13vw, 5.5rem);
  line-height: 1.06;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--white);
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.5s var(--ease-expo), transform 0.5s var(--ease-expo), color 0.3s;
  transition-delay: calc(var(--i) * 60ms);
}
.menu--open .menu__links a { opacity: 1; transform: none; }
.menu__links a:hover { color: var(--ink); }

.menu__foot {
  margin-top: 3rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: oklch(0.96 0.005 28 / 0.75);
}
.menu__foot a { color: inherit; text-underline-offset: 3px; }
.menu__foot a:hover { color: var(--ink); }

/* ---------- image frames: unify the archive with a red grade + grain ---------- */

.frame {
  position: relative;
  overflow: hidden;
  background: var(--carbon-raised);
}

.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.1) brightness(0.97);
  transition: transform 1s var(--ease-expo), filter 0.9s var(--ease-expo);
}

/* film grain knits six seasons of mixed phone and pro shots into one material */
.frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* hero photo: wipe in on load, then a slow drift so it never sits still */
.hero__media .frame {
  clip-path: inset(0 100% 0 0);
}
body.is-loaded .hero__media .frame {
  animation: frame-wipe 0.8s var(--ease-expo) 0.35s forwards;
}
@keyframes frame-wipe {
  to { clip-path: inset(0 0 0 0); }
}
.hero__media .frame img {
  animation: ken-burns 16s ease-in-out infinite alternate;
}
@keyframes ken-burns {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.07) translateX(-1.5%); }
}

.frame--red::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, oklch(0.38 0.16 28 / 0.34), transparent 55%, oklch(0.13 0.008 28 / 0.5));
  pointer-events: none;
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(7rem, 16vh, 10rem) var(--gutter) clamp(4rem, 8vh, 6rem);
  overflow: hidden;
}

.hero__ghost {
  position: absolute;
  bottom: -0.14em;
  left: -0.03em;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(10rem, 26vw, 24rem);
  line-height: 1;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.32 0.015 28 / 0.55);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}

.hero__ghost-drift {
  display: inline-block;
  -webkit-text-stroke: inherit;
  animation: ghost-drift 22s ease-in-out infinite alternate;
}
@keyframes ghost-drift {
  to { transform: translateX(-5%); }
}

/* occasional red speed streaks sweeping the hero */
.hero__streaks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero__streaks span {
  position: absolute;
  left: -30%;
  width: 22%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-bright), transparent);
  opacity: 0;
  filter: blur(0.5px);
  animation: streak 7s linear infinite;
}
.hero__streaks span:nth-child(1) { top: 22%; animation-delay: 1.2s; }
.hero__streaks span:nth-child(2) { top: 56%; animation-delay: 3.8s; width: 15%; }
.hero__streaks span:nth-child(3) { top: 78%; animation-delay: 6.1s; width: 28%; }
@keyframes streak {
  0%, 12% { transform: translateX(0); opacity: 0; }
  14% { opacity: 0.75; }
  26% { transform: translateX(620%); opacity: 0; }
  100% { transform: translateX(620%); opacity: 0; }
}

.hero__inner { position: relative; z-index: 2; }

.hero__kicker {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.flag { letter-spacing: 0; margin-right: 0.4rem; }

.hero__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(3.6rem, 10vw, 9.75rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}

.hero__row { display: block; overflow: hidden; }

.hero__word { display: inline-block; }

.hero__word--red { color: var(--red-bright); }

.hero__sub { margin-top: 2.2rem; max-width: 34rem; }

.hero__sub p { color: var(--muted); }
.hero__sub strong { color: var(--white); font-weight: 700; }

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}

.hero__media {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* sources are upscaled to ~1.6K, so the frame can carry real presence
   without going soft */
.hero__media-wrap {
  position: relative;
  width: min(100%, 30rem);
  margin-left: auto;
}

.hero__media .frame {
  aspect-ratio: 4 / 5;
  max-height: 72vh;
}

/* №19: the racing number worn as a decal on the photo's corner.
   Digits rise through a skewed mask on load (same grammar as the name),
   then the counter-parallax on the track separates it in depth on scroll. */
.hero__num {
  position: absolute;
  top: -0.52em;
  left: -0.3em;
  z-index: 2;
  font-size: clamp(4.2rem, 9vw, 8.25rem);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  animation: num-drift 18s ease-in-out infinite alternate;
}
@keyframes num-drift {
  to { transform: translateY(-0.08em); }
}

.hero__num-track { display: block; }

.hero__num-label {
  display: block;
  margin: 0 0 0.4em 0.12em;
  font-size: 0.105em;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__num-row {
  display: flex;
  overflow: hidden;
  transform: skewX(-8deg);
  font-family: var(--display);
  font-weight: 900;
  color: var(--red-bright);
  filter: drop-shadow(0 6px 26px oklch(0.55 0.22 28 / 0.35));
}

.hero__num-digit {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.7s var(--ease-expo);
}
body.is-loaded .hero__num-digit { transform: none; }
body.is-loaded .hero__num-digit:first-child { transition-delay: 0.46s; }
body.is-loaded .hero__num-digit:last-child { transition-delay: 0.56s; }

.hero__media-tag,
.career__media-tag {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__scroll {
  position: absolute;
  bottom: clamp(1.2rem, 4vh, 2.5rem);
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  z-index: 3;
}

.hero__scroll-line {
  display: block;
  width: 56px;
  height: 1px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--red-bright);
  transform: translateX(-100%);
  animation: scroll-sweep 2.2s var(--ease-expo) infinite;
}
@keyframes scroll-sweep {
  40% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* load-in choreography */
[data-load] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s var(--ease-expo), transform 0.55s var(--ease-expo);
}
.hero__word { transform: translateY(110%); transition: transform 0.65s var(--ease-expo); opacity: 1; }
body.is-loaded [data-load] { opacity: 1; transform: none; }
body.is-loaded [data-load="1"] { transition-delay: 0.02s; }
body.is-loaded [data-load="2"] { transition-delay: 0.08s; }
body.is-loaded [data-load="3"] { transition-delay: 0.16s; }
body.is-loaded [data-load="4"] { transition-delay: 0.26s; }
body.is-loaded [data-load="5"] { transition-delay: 0.34s; }
body.is-loaded [data-load="6"] { transition-delay: 0.6s; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    align-content: end;
    gap: 2.5rem;
  }
  .hero__media-wrap { width: 100%; }
  .hero__media .frame { aspect-ratio: 16 / 10; max-height: 44vh; }
  /* landscape crop of a portrait source: keep helmet and kerb in frame */
  .hero__media .frame img { object-position: 50% 40%; }
  /* shallower lift than desktop: the label must stay inside the 2.5rem
     grid gap below the CTAs, drift included */
  .hero__num { font-size: clamp(3.4rem, 15vw, 5.5rem); top: -0.26em; left: -0.06em; }
  .hero__scroll { display: none; }
}

/* ---------- marquee bands ---------- */

.marquee {
  overflow: hidden;
  padding: 0.9rem 0;
}

.marquee--outline {
  background: var(--carbon);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: transparent;
  -webkit-text-stroke: 1px var(--red-bright);
}

/* results ticker: the red drench band, every series name is real */
.marquee--results {
  background: var(--red);
  color: var(--white);
  padding: 1.1rem 0;
}

.marquee__track--slow { animation-duration: 34s; }

.marquee__track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: marquee 26s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* ---------- reveal on scroll ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-expo), transform 0.6s var(--ease-expo);
  transition-delay: calc(var(--i, 0) * 65ms);
}

[data-reveal].is-in { opacity: 1; transform: none; }

/* kinetic type: split headings rise letter by letter */
[data-split] .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em) rotate(5deg);
  transition: opacity 0.42s var(--ease-expo), transform 0.42s var(--ease-expo);
  transition-delay: calc(var(--ci) * 20ms);
  will-change: transform;
}
[data-split].is-in .ch {
  opacity: 1;
  transform: none;
}

/* ---------- story ---------- */

.story {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
  padding: var(--section-gap) var(--gutter) 0;
}

.story__media { position: sticky; top: 6.5rem; }

.story__media .frame { aspect-ratio: 3 / 4; }

/* second print overlaps the first, like two photos on a pit-wall board */
.story__media .story__media-b {
  aspect-ratio: 4 / 5;
  width: 56%;
  margin: -26% -5% 0 auto;
  position: relative;
  z-index: 2;
  outline: 6px solid var(--carbon);
  rotate: -1.4deg;
}

.story__media-note {
  margin-top: 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.story__text {
  margin-top: 2rem;
  max-width: 62ch;
  display: grid;
  gap: 1.2rem;
  color: var(--muted);
}
.story__text strong { color: var(--white); }

.story__figures {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2rem, 5vw, 4.5rem);
  margin-top: 3.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}

.figure__num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3.4rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--red-bright);
}

/* the championship stat wears gold, the rest stay red */
.figure--champ .figure__num { color: var(--gold); }

.figure__label {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 860px) {
  .story { grid-template-columns: minmax(0, 1fr); }
  .story__media { position: static; max-width: 30rem; }
  /* the desktop bleed into the column gap would overflow the viewport here */
  .story__media .story__media-b { margin-right: 0; }
}

/* ---------- career ---------- */

.career { padding: var(--section-gap) var(--gutter) 0; }

.timeline {
  list-style: none;
  margin-top: clamp(2.5rem, 6vh, 4.5rem);
  max-width: 62rem;
  position: relative;
  padding-left: 1.4rem;
}

/* the red line draws itself down as you scroll the career */
.timeline::before,
.timeline::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
}
.timeline::before { background: var(--line); }
.timeline::after {
  background: var(--red-bright);
  transform: scaleY(var(--tl-progress, 0));
  transform-origin: top;
}

.timeline__item {
  display: grid;
  grid-template-columns: minmax(4.5rem, 9rem) minmax(0, 1fr) minmax(10rem, 15rem);
  gap: clamp(1.2rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.6rem, 4vh, 2.6rem) 0;
  border-top: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }

.timeline__media .frame { aspect-ratio: 4 / 3; }

.timeline__media figcaption {
  margin-top: 0.55rem;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

@media (max-width: 700px) {
  .timeline__item { grid-template-columns: minmax(3.2rem, 4.5rem) minmax(0, 1fr); }
  .timeline__media { grid-column: 2; max-width: 19rem; margin-top: 0.4rem; }
}

.timeline__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 4rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--muted);
}

.timeline__item--next .timeline__num {
  color: var(--red-bright);
  -webkit-text-stroke: 0;
}

/* title-winning seasons: the index numeral goes gold with the laurel */
.timeline__item--champ .timeline__num { -webkit-text-stroke-color: var(--gold); }

.timeline__body h3 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.timeline__flag {
  font-family: var(--body);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 0.3rem 0.7rem;
  background: var(--red);
  color: var(--white);
}

.timeline__body p {
  margin-top: 0.5rem;
  max-width: 56ch;
  color: var(--muted);
}

.career__media {
  margin-top: clamp(3rem, 8vh, 6rem);
  max-width: 72rem;
  margin-inline: auto;
}
.career__media .frame { aspect-ratio: 16 / 9; }
@media (max-width: 700px) { .career__media .frame { aspect-ratio: 4 / 3; } }

/* ---------- gallery ---------- */

.gallery { padding: var(--section-gap) 0 0; }

.gallery__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  padding: 0 var(--gutter);
}

.gallery__hint {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-bright);
}

/* Scroll chapters: the backdrop pins for a full viewport while prints slide
   in laterally and settle into a centered collage. Backdrops and prints are
   upscaled ~2.5K/2K sources; the backdrop still runs dark and softly
   blurred (mood, not detail) so the prints carry the sharpness. */
.chapters { margin-top: clamp(1.8rem, 5vh, 3rem); }

.chapter { position: relative; height: 230vh; }

.chapter__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: 1;
  background: var(--ink);
}

.chapter__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.65) contrast(1.05) brightness(var(--bgb, 0.3)) blur(1px);
  animation: chapter-drift 26s ease-in-out infinite alternate;
}
@keyframes chapter-drift {
  from { transform: scale(1.03); }
  to { transform: scale(1.11) translateX(-1.2%); }
}

/* grain + vignette knit the blown-up backdrop into the night-race material */
.chapter__pin::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.chapter__pin::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 22%, oklch(0.13 0.008 28 / 0.78) 76%),
    linear-gradient(to bottom, oklch(0.13 0.008 28 / 0.85), transparent 38% 55%, oklch(0.13 0.008 28 / 0.9)),
    linear-gradient(160deg, oklch(0.38 0.16 28 / 0.2), transparent 55%);
  pointer-events: none;
}

.chapter__caption {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(1.6rem, 5vh, 3rem);
  z-index: 4;
  display: grid;
  gap: 0.45rem;
}

.chapter__series {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red-bright);
}

.chapter__series--gold { color: var(--gold); }

.chapter__venue {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--white);
}

.chapter__index {
  position: absolute;
  right: var(--gutter);
  top: clamp(5rem, 11vh, 6.5rem); /* clear of the nav above and the WhatsApp FAB below */
  z-index: 4;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: oklch(0.96 0.005 28 / 0.45);
}

/* prints slide in laterally — slot A from the left, B from the right, C from
   the left again — and settle into this centered collage with a print's
   resting tilt. JS drives the entry from scroll (SLOTS in main.js); the
   offsets below ARE the destination, so without JS or with reduced motion
   the finished collage is the whole experience. Keep every chapter on the
   same three slots so the choreography stays identical throughout. */
.chapter__tiles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.chapter__tile {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w);
  transform: translate(-50%, -50%) translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rest, 0deg));
}

/* px caps keep the pile together on very wide monitors, where the tiles'
   own px maxima stop growing but bare vw offsets would keep spreading */
.chapter__tile--a { --tx: max(-12vw, -240px); --ty: -6vh; --rest: -1.2deg; }
.chapter__tile--b { --tx: min(13vw, 280px);   --ty: 2vh;  --rest: 1.4deg; }
.chapter__tile--c { --tx: max(-4vw, -90px);   --ty: 14vh; --rest: -0.8deg; }

.chapter__tile .frame {
  aspect-ratio: var(--ar, 4 / 3);
  box-shadow: 0 22px 60px oklch(0.13 0.008 28 / 0.55);
}

@media (max-width: 640px) {
  .chapter { height: 190vh; }
  /* phones: fan the collage vertically instead of sideways */
  .chapter__tile--a { --tx: -9vw; --ty: -20vh; }
  .chapter__tile--b { --tx: 9vw;  --ty: 0vh; }
  .chapter__tile--c { --tx: -7vw; --ty: 20vh; }
}

/* ---------- partners ---------- */

.partners {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(3rem, 6vw, 6rem);
  padding: var(--section-gap) var(--gutter) 0;
  align-items: start;
}

.partners__copy {
  margin-top: 2rem;
  max-width: 58ch;
  display: grid;
  gap: 1.2rem;
  color: var(--muted);
}

.partners__points {
  list-style: none;
  margin: 2.4rem 0 2.8rem;
  display: grid;
  gap: 0;
  max-width: 42rem;
}

.partners__points li {
  padding: 1rem 0 1rem 2.2rem;
  border-top: 1px solid var(--line);
  position: relative;
  font-weight: 500;
}
.partners__points li:last-child { border-bottom: 1px solid var(--line); }
.partners__points li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--red-bright);
}

.partners__grid-wrap { position: sticky; top: 6.5rem; }

.partners__grid-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  padding: 1px;
}

.tile {
  aspect-ratio: 3 / 2;
  display: grid;
  place-items: center;
  padding: 1.2rem;
  background: var(--carbon);
  box-shadow: 0 0 0 1px var(--line);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.4s var(--ease-expo);
}

.tile:hover { background: var(--carbon-raised); }

.tile img { max-height: 3rem; width: auto; filter: grayscale(1) brightness(2); }

.tile__name {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Brand names that must keep their written case (e.g. off-brand) */
.tile__name--keep-case { text-transform: none; }

.tile__role {
  display: block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.3rem;
}

.tile--open { background: oklch(0.55 0.22 28 / 0.08); }
.tile--open .tile__name { color: var(--red-bright); font-size: 1.1rem; }
.tile--open:hover { background: oklch(0.55 0.22 28 / 0.16); }

@media (max-width: 900px) {
  .partners { grid-template-columns: minmax(0, 1fr); }
  .partners__grid-wrap { position: static; }
}

/* ---------- contact: the drench ---------- */

.contact {
  margin-top: var(--section-gap);
  background: linear-gradient(175deg, var(--red) 0%, var(--red-deep) 100%);
  padding: clamp(6rem, 14vh, 11rem) var(--gutter);
  text-align: left;
}

.contact__title {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4.5rem, 15vw, 14rem);
  line-height: 0.85;
  text-transform: uppercase;
  color: var(--white);
}

.contact__sub {
  margin-top: 2rem;
  max-width: 40ch;
  color: oklch(0.96 0.005 28 / 0.85);
}

.contact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.8rem;
}

/* ---------- checkered flag strip ---------- */

.checkers {
  height: 16px;
  background: repeating-conic-gradient(var(--white) 0% 25%, var(--ink) 0% 50%);
  background-size: 32px 16px;
  animation: checkers-run 1.6s linear infinite;
}
@keyframes checkers-run {
  to { background-position-x: -32px; }
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  padding: clamp(3rem, 8vh, 5rem) var(--gutter) 2rem;
  overflow: hidden;
}

.footer__name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4rem, 17vw, 16rem);
  line-height: 0.8;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px oklch(0.32 0.015 28 / 0.6);
  user-select: none;
  white-space: nowrap;
  margin-bottom: 2.5rem;
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--muted);
}

.footer__links { display: flex; gap: 1.4rem; }
.footer__links a {
  text-decoration: none;
  color: var(--muted);
  transition: color 0.3s;
}
.footer__links a:hover { color: var(--red-bright); }

.footer__ob { color: var(--white); text-decoration: none; border-bottom: 1px solid var(--red-bright); }
.footer__ob:hover { color: var(--red-bright); }

/* ---------- WhatsApp FAB ---------- */

.fab {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 45;
  width: 58px; height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 8px 30px oklch(0.13 0.008 28 / 0.5);
  transition: background-color 0.3s, transform 0.3s var(--ease-expo);
}
.fab:hover { background: var(--red-bright); transform: translateY(-3px); }
.fab:hover svg { animation: fab-wiggle 0.45s var(--ease-expo); }
@keyframes fab-wiggle {
  30% { transform: rotate(-10deg); }
  65% { transform: rotate(7deg); }
  100% { transform: rotate(0); }
}
.fab::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--red-bright);
  animation: fab-pulse 2.4s var(--ease-expo) infinite;
}
@keyframes fab-pulse {
  0% { transform: scale(1); opacity: 0.8; }
  70%, 100% { transform: scale(1.55); opacity: 0; }
}

/* ---------- reduced motion: the complete path ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .preloader { display: none; }

  [data-load], .hero__word, [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .marquee__track { animation: none; }
  .hero__scroll-line::after { animation: none; transform: none; }
  .fab::after { animation: none; opacity: 0; }
  .preloader__line--1, .preloader__line--2 { animation: none; clip-path: none; }

  .frame img { transition: none; }
  .chapter__bg { animation: none; transform: none; }

  .hero__ghost-drift, .hero__streaks span, .hero__media .frame img,
  .checkers, .fab:hover svg { animation: none; }
  .hero__streaks { display: none; }
  .hero__num { animation: none; }
  .hero__num-digit { transform: none; transition: none; }
  .hero__media .frame { clip-path: none; }
  body.is-loaded .hero__media .frame { animation: none; }
  [data-split] .ch { opacity: 1; transform: none; transition: none; }
  .timeline::after { transform: scaleY(1); }
  .btn::before, .btn:hover::before { animation: none; }

  .menu { transition: none; }
  .menu__links a { transition: none; }

  .cursor { display: none; }
}