:root {
  /* Palette: the ball, the jersey, and the ink of a game program */
  --orange: #f07121;
  --ink: #15100c;
  --cream: #fff6ea;
  --shadow: rgb(70 22 0 / 0.55);

  /* Type: one family, two cuts (opsz 72 for display, opsz 10 for labels) */
  --font: "Big Shoulders", "Arial Narrow", "Helvetica Neue Condensed", Impact, sans-serif;

  /* Spacing */
  --gutter: clamp(16px, 4.5vw, 72px);
  --bar-h: clamp(76px, 11svh, 108px);

  /* Layers */
  --z-bg: 0;
  --z-number: 1;
  --z-copy: 2;
  --z-photo: 3;
  --z-chrome: 4;
  --z-topbar: 5;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html {
  scroll-padding-top: var(--bar-h);
}

html,
body {
  margin: 0;
}

body {
  background: var(--orange);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: var(--ink);
  color: var(--orange);
}

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

p, li, figcaption, blockquote, label { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }

a {
  color: inherit;
}

/* Two-tone focus ring: an orange outline over a dark halo, so it shows on
   the white leather, the orange hero and the black pages alike. */
:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgb(21 16 12 / 0.85);
}

/* ---------- Top bar ---------- */

/* Zero height (the buttons hang below it), so Safari doesn't treat it as a
   full-width bar at the top edge and paint a color strip for it. */
.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-topbar);
  height: 0;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  pointer-events: none;
}

.topbar > .logo,
.topbar > .menu-btn {
  position: relative;
  top: calc(var(--bar-h) / 2);
}

.topbar > * {
  pointer-events: auto;
}

/* White disc button with the logo in black. */
.logo {
  display: grid;
  place-items: center;
  width: clamp(56px, 4.6vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgb(70 22 0 / 0.28);
  transition: transform 140ms var(--ease-out), box-shadow 140ms ease;
}

.logo img {
  width: 74%;
  height: auto;
  filter: brightness(0); /* keeps the KJM logo solid black on the white disc */
}

.logo:active {
  transform: scale(0.95);
}

@media (hover: hover) {
  .logo:hover {
    box-shadow: 0 8px 24px rgb(70 22 0 / 0.38);
  }
}

/* ---------- Hero: pinned, one screen of scroll per slide ---------- */

.hero {
  --slides: 3;
  position: relative;
  height: calc(var(--slides) * 100vh);
  height: calc(var(--slides) * 100svh);
  height: calc(var(--slides) * 100dvh);
}

.hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

/* iOS 26 Safari paints a solid bar behind its glass controls in the color
   of any full-width fixed/sticky element touching the screen edge. The
   pinned sections keep their own box transparent and draw their background
   on an inner layer, so Safari lets the page show through the glass. */
.hero__stage::after,
.lineup__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--stage-bg);
  pointer-events: none;
}

.hero__stage {
  --stage-bg: var(--orange) url("/assets/hero.webp") center / cover no-repeat;
}

/* Burn the edges a little so the middle glows like stadium light. */
.hero__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-bg);
  background:
    radial-gradient(120% 90% at 68% 45%, transparent 45%, rgb(120 35 0 / 0.38) 100%),
    linear-gradient(to top, rgb(110 32 0 / 0.28), transparent 30%);
  pointer-events: none;
}

/* Giant jersey number behind the player */
.hero__number {
  position: absolute;
  z-index: var(--z-number);
  right: 2vw;
  top: 50%;
  translate: 0 -50%;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: min(78svh, 48vw);
  line-height: 0.8;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: max(2px, 0.18vw) rgb(255 246 234 / 0.55);
  user-select: none;
  will-change: transform;
}

/* ---------- Copy ---------- */

.hero__copy {
  position: absolute;
  z-index: var(--z-copy);
  left: var(--gutter);
  top: 50%;
  translate: 0 -50%;
  display: grid;
}

/* Slides stack in one cell. */
.hero__slide {
  grid-area: 1 / 1;
}

.hero__title {
  margin: 0;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: min(12.5vw, 24svh);
  line-height: 0.84;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Each line is a window; its words slide through it. The padding keeps
   glyph tops from being shaved off by the tight line-height. */
.hero__line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  padding-block: 0.08em;
  margin-block: -0.08em;
}

.hero__line > span {
  display: block;
  will-change: transform;
}

/* The tag's window is exactly the tag, so a hidden tag can't peek out. */
.hero__line--tag {
  width: fit-content;
  padding-block: 0;
  margin-block: 0 clamp(14px, 2.2svh, 24px);
}

.tag {
  padding: 0.55em 0.8em 0.5em;
  background: var(--ink);
  color: var(--cream);
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.9vw, 1rem);
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* ---------- Photos ---------- */

.hero__photos {
  position: absolute;
  z-index: var(--z-photo);
  right: -7vw;
  bottom: 0;
  width: 56vw;
  height: 100%;
  display: grid;
  pointer-events: none;
}

.hero__photo {
  grid-area: 1 / 1;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* Poster crop: he runs off the bottom edge, head just under the top bar. */
.hero__photo img {
  --photo-h: 118svh;
  width: auto;
  max-width: none;
  height: var(--photo-h);
  margin-bottom: calc(100svh - var(--photo-h) - var(--bar-h) - 1svh);
  transform-origin: 50% 100%;
  filter: drop-shadow(-30px 20px 24px var(--shadow));
  will-change: transform;
}

/* ---------- Progress + scroll cue ---------- */

.hero__progress,
.hero__cue {
  position: absolute;
  z-index: var(--z-chrome);
  bottom: clamp(20px, 4svh, 40px);
  margin: 0;
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.7vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero__progress {
  left: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  font-variant-numeric: tabular-nums;
}

.hero__track {
  position: relative;
  width: clamp(72px, 9vw, 140px);
  height: 2px;
  background: rgb(21 16 12 / 0.25);
  overflow: hidden;
}

.hero__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

.hero__cue {
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero__cue::after {
  content: "";
  width: 2px;
  height: 36px;
  background: linear-gradient(var(--ink) 50%, rgb(21 16 12 / 0.2) 50%) 0 0 / 100% 200%;
  animation: cue 1.8s var(--ease-out) infinite;
}

@keyframes cue {
  from { background-position: 0 100%; }
  to { background-position: 0 -100%; }
}

/* Before JS runs, only the first slide shows. */
.hero__photo:not(:first-child) {
  clip-path: polygon(0 0, 0 0, 0 0);
}

.hero__slide:not(:first-child) .hero__line > span {
  transform: translateY(130%);
}

@media (prefers-reduced-motion: reduce) {
  .hero__cue::after {
    animation: none;
  }
}

/* ---------- Phones and portrait tablets: copy on top, player below ---------- */

@media (max-width: 760px), (orientation: portrait) {
  .hero__copy {
    top: calc(var(--bar-h) + 1.5svh);
    translate: none;
  }

  .hero__title {
    font-size: min(18.5vw, 11svh);
  }

  .hero__line--tag {
    margin-bottom: 12px;
  }

  .hero__number {
    right: 50%;
    top: auto;
    bottom: 4svh;
    translate: 50% 0;
    font-size: min(46svh, 92vw);
  }

  .hero__photos {
    left: 0;
    right: 0;
    width: auto;
  }

  .hero__photo img {
    --photo-h: 84svh;
    margin-bottom: -22svh;
    filter: drop-shadow(-18px 12px 14px var(--shadow));
  }

  .hero__cue {
    left: auto;
    right: var(--gutter);
    translate: none;
  }
}

/* ---------- Lineup: sports cards sliding over a still background ---------- */

.lineup {
  --card-w: min(32svh, 62vw);
  --card-top: var(--bar-h);
  /* Lower cards drop as far as the screen allows, leaving room for the chrome row. */
  --zig: calc(100svh - var(--card-top) - var(--card-w) * 1.4 - 10svh);
  position: relative;
  height: 400svh; /* JS sets the exact height from the track width */
  background: #050404;
  color: var(--cream);
}

.lineup__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
  --stage-bg: #050404 url("/assets/sections-bg.webp") center / cover no-repeat;
}

.lineup__track {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: clamp(96px, 18vw, 340px);
  width: max-content;
  height: 100%;
  /* A third of the screen of black space before the first card and after the last */
  padding: var(--card-top) calc(100vw / 3) 0;
  will-change: transform;
}

/* Glowing links between neighbouring cards, drawn behind them. */
.lineup__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.link-base {
  stroke: rgb(240 113 33 / 0.2);
  stroke-width: 2;
}

.link-glow {
  stroke: #ffa25e;
  stroke-width: 3;
  stroke-linecap: round;
  filter: url(#glow);
}

/* Glowing "ports" where a link meets a card edge; lit once the line reaches them. */
.link-dot {
  fill: #ffd2ad;
  filter: url(#glow);
  opacity: 0;
  transition: opacity 200ms ease;
}

.link-dot.is-lit {
  opacity: 1;
}

/* The spark at the tip of a line while it's drawing: a glowing white dot. */
.link-halo {
  display: none;
}

.link-spark {
  fill: #fff;
  filter: url(#glow-white);
}

.link-halo,
.link-spark {
  opacity: 0;
  transition: opacity 160ms ease;
}

.is-drawing .link-halo {
  opacity: 1;
}

.is-drawing .link-spark {
  opacity: 1;
}

/* ---------- Cards: one shared shell, five different card designs ---------- */

.card {
  --u: calc(var(--card-w) / 100); /* 1% of the card's width */
  position: relative;
  z-index: 1;
  flex: none;
  width: var(--card-w);
  aspect-ratio: 5 / 7; /* 2.5 x 3.5 in, the real card size */
  display: flex;
  flex-direction: column;
  border-radius: calc(var(--u) * 4.5);
  overflow: hidden;
  color: var(--ink);
  text-decoration: none;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 0.1),
    0 24px 50px rgb(0 0 0 / 0.6);
  /* Scroll effects drive `transform` from JS; hover and press use the
     separate translate/rotate/scale properties so the two never fight. */
  transition:
    translate 220ms var(--ease-out),
    rotate 220ms var(--ease-out),
    scale 140ms var(--ease-out),
    box-shadow 220ms ease;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Foil sheen that slides across the card as it moves (JS sets --sheen). */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: linear-gradient(
    115deg,
    transparent 35%,
    rgb(255 255 255 / 0.5) 46%,
    rgb(255 214 170 / 0.28) 50%,
    transparent 62%
  ) var(--sheen, 120%) 0 / 260% 100% no-repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* Zig-zag: every second card sits lower. */
.card:nth-of-type(even) {
  margin-top: var(--zig);
}

/* The first card flips in face-down → face-up, so hide its mirrored back. */
.card:nth-of-type(1) {
  backface-visibility: hidden;
}

/* Hinge points for the swing (card 5) and the tip-back (card 4) effects. */
.card:nth-of-type(4) {
  transform-origin: 50% 100%;
}

.card:nth-of-type(5) {
  transform-origin: 50% 0;
}

.card:active {
  scale: 0.98;
}

@media (hover: hover) {
  .card:hover {
    translate: 0 -8px;
    rotate: -1deg;
    box-shadow:
      inset 0 0 0 1px rgb(0 0 0 / 0.1),
      0 0 40px rgb(240 113 33 / 0.35),
      0 30px 60px rgb(0 0 0 / 0.65);
  }
}

.card:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 6px;
}

/* Small label type shared by all five designs */
.rookie__sub, .rookie__pennant, .chrome__side, .chrome__sub, .film__edge,
.film__sub, .arch__stars, .arch__sub, .back__who span, .back__stats, .back__foot {
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---- 01 · Vintage rookie: cream stock, green frame, slab-serif name ---- */

.card--rookie {
  --green: #1d5a3c;
  padding: calc(var(--u) * 5);
  background:
    radial-gradient(140% 100% at 30% 20%, #fbf4e3, #eadfc6);
}

.rookie__photo {
  position: relative;
  flex: 1;
  border: calc(var(--u) * 1.6) solid var(--green);
  border-radius: calc(var(--u) * 6);
  box-shadow: 0 0 0 calc(var(--u) * 0.8) var(--orange);
  overflow: hidden;
}

.rookie__photo img {
  object-position: 50% 30%;
  filter: saturate(0.85) contrast(1.05) sepia(0.12);
}

/* Rookie-card style shield with his initials */
.rookie__rc {
  position: absolute;
  top: calc(var(--u) * 4);
  right: calc(var(--u) * 4);
  display: grid;
  place-items: center;
  width: calc(var(--u) * 15);
  aspect-ratio: 1 / 1.1;
  background: var(--orange);
  color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  font-family: "Alfa Slab One", var(--font);
  font-size: calc(var(--u) * 6);
  padding-bottom: calc(var(--u) * 2);
}

/* Pennant flag hanging off the photo's lower-left corner */
.rookie__pennant {
  position: relative;
  align-self: flex-start;
  margin: calc(var(--u) * -6.5) 0 0 calc(var(--u) * -1);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 7) calc(var(--u) * 1.4) calc(var(--u) * 3);
  background: var(--green);
  color: #f6ecd6;
  clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
  font-size: calc(var(--u) * 3.6);
}

.rookie__name {
  margin-top: calc(var(--u) * 3);
  font-family: "Alfa Slab One", var(--font);
  font-size: calc(var(--u) * 13);
  line-height: 1;
  color: var(--green);
  text-transform: uppercase;
  text-shadow: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 var(--orange);
}

.rookie__sub {
  margin-top: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 3.4);
  color: #6b5a3f;
}

/* ---- 02 · Chrome / prism: full-bleed photo, refractor border, shard band ---- */

.card--chrome {
  padding: calc(var(--u) * 3.6);
  background:
    repeating-linear-gradient(-55deg, rgb(255 255 255 / 0.35) 0 2px, transparent 2px 6px),
    conic-gradient(from 210deg, #ff9a4d, #fff1e0, #f07121, #b9b2ad, #ffd2ad, #f07121, #ff9a4d);
}

.chrome__photo {
  position: absolute;
  inset: calc(var(--u) * 3.6);
  border-radius: calc(var(--u) * 2.5);
  overflow: hidden;
}

.chrome__photo img {
  object-position: 45% 20%;
}

.chrome__side {
  position: absolute;
  z-index: 1;
  top: calc(var(--u) * 8);
  right: calc(var(--u) * 7);
  writing-mode: vertical-rl;
  color: #fff;
  font-size: calc(var(--u) * 3.4);
  text-shadow: 0 1px 4px rgb(0 0 0 / 0.5);
}

.chrome__num {
  position: absolute;
  z-index: 2;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 24);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 26);
  line-height: 0.8;
  color: transparent;
  -webkit-text-stroke: calc(var(--u) * 0.6) #fff;
}

/* Angular shard rising from the bottom-left */
.chrome__band {
  position: absolute;
  z-index: 1;
  inset: auto calc(var(--u) * 3.6) calc(var(--u) * 3.6);
  display: grid;
  padding: calc(var(--u) * 10) calc(var(--u) * 6) calc(var(--u) * 5);
  background: linear-gradient(transparent, rgb(10 6 4 / 0.2) 20%), var(--ink);
  clip-path: polygon(0 22%, 70% 0, 100% 18%, 100% 100%, 0 100%);
  border-radius: 0 0 calc(var(--u) * 2.5) calc(var(--u) * 2.5);
  color: #fff;
}

.chrome__name {
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 15);
  line-height: 0.9;
  text-transform: uppercase;
  font-style: oblique 10deg;
  transform: skewX(-8deg);
  transform-origin: 0 100%;
}

.chrome__sub {
  margin-top: calc(var(--u) * 1.6);
  color: var(--orange);
  font-size: calc(var(--u) * 3.6);
}

/* ---- 03 · Film strip: sprocket holes, edge codes, a frame of film ---- */

.card--film {
  padding: 0 calc(var(--u) * 9);
  background: #141110;
  color: #f4ead8;
}

/* Sprocket holes down both sides */
.card--film::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 2.2), #f4ead8 calc(var(--u) * 2.2) calc(var(--u) * 6), transparent calc(var(--u) * 6) calc(var(--u) * 8))
      calc(var(--u) * 2.5) 0 / calc(var(--u) * 3.6) 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--u) * 2.2), #f4ead8 calc(var(--u) * 2.2) calc(var(--u) * 6), transparent calc(var(--u) * 6) calc(var(--u) * 8))
      calc(100% - var(--u) * 2.5) 0 / calc(var(--u) * 3.6) 100% no-repeat;
  opacity: 0.9;
}

.film__edge {
  display: flex;
  justify-content: space-between;
  padding: calc(var(--u) * 2.6) 0 calc(var(--u) * 1.8);
  color: var(--orange);
  font-size: calc(var(--u) * 2.8);
}

.film__photo {
  flex: 1;
  border-radius: calc(var(--u) * 1.2);
  overflow: hidden;
}

.film__photo img {
  object-position: 50% 25%;
  filter: contrast(1.05) saturate(1.1);
}

.film__name {
  margin-top: calc(var(--u) * 1);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 16);
  line-height: 0.95;
  text-transform: uppercase;
}

.film__sub {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: calc(var(--u) * 1.2) 0 calc(var(--u) * 5);
  font-size: calc(var(--u) * 3.4);
  color: rgb(244 234 216 / 0.75);
}

.film__dot {
  width: 0.7em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 8px var(--orange);
}

/* ---- 04 · Arched legends card: deco frame, photo in an arch ---- */

.card--arch {
  align-items: center;
  padding: calc(var(--u) * 7) calc(var(--u) * 9) calc(var(--u) * 6);
  background: radial-gradient(90% 60% at 50% 35%, #3a2416, #120c09 70%);
  color: #f4ead8;
}

/* Double-rule frame */
.card--arch::before {
  content: "";
  position: absolute;
  inset: calc(var(--u) * 3);
  border: 1px solid rgb(240 113 33 / 0.8);
  outline: 1px solid rgb(240 113 33 / 0.4);
  outline-offset: calc(var(--u) * -1.6);
  border-radius: calc(var(--u) * 2.5);
  pointer-events: none;
}

.arch__stars {
  color: var(--orange);
  font-size: calc(var(--u) * 3.4);
  letter-spacing: 0.6em;
  margin: 0 0 calc(var(--u) * 2.4) 0.6em;
}

.arch__photo {
  width: 100%;
  flex: 1;
  border-radius: 999px 999px calc(var(--u) * 1.5) calc(var(--u) * 1.5);
  overflow: hidden;
  box-shadow:
    0 0 0 calc(var(--u) * 1.2) #120c09,
    0 0 0 calc(var(--u) * 1.8) var(--orange);
}

.arch__photo img {
  object-position: 52% 40%;
}

.arch__name {
  margin-top: calc(var(--u) * 5);
  font-variation-settings: "opsz" 72;
  font-weight: 800;
  font-size: calc(var(--u) * 11.5);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.arch__rule {
  width: 30%;
  height: 1px;
  margin: calc(var(--u) * 2) 0;
  background: var(--orange);
}

.arch__sub {
  color: var(--orange);
  font-size: calc(var(--u) * 3.6);
  letter-spacing: 0.3em;
  margin-right: -0.3em;
}

/* ---- 05 · Card back: cardboard stock, bio table, barcode ---- */

.card--back {
  padding: calc(var(--u) * 4);
  background: #d8d2c4;
}

.back__head {
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 3);
  padding: calc(var(--u) * 2) calc(var(--u) * 3);
  background: var(--orange);
  border-radius: calc(var(--u) * 1.5);
}

.back__no {
  display: grid;
  place-items: center;
  width: calc(var(--u) * 12);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink);
  color: var(--orange);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 6);
}

.back__who {
  display: grid;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 6.4);
  line-height: 1;
  text-transform: uppercase;
}

.back__who span {
  margin-top: 0.35em;
  font-size: 0.5em;
}

.back__body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: calc(var(--u) * 3);
  margin-top: calc(var(--u) * 3);
}

.back__photo {
  border-radius: calc(var(--u) * 1.5);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}

.back__photo img {
  object-position: 50% 20%;
}

.back__stats {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: calc(var(--u) * 3.3);
  letter-spacing: 0.06em;
}

.back__stats span {
  display: grid;
  gap: 0.25em;
  padding: calc(var(--u) * 1.8) 0;
  border-bottom: 1px solid rgb(21 16 12 / 0.2);
  white-space: normal;
}

.back__stats span:last-child {
  border-bottom: 0;
}

.back__stats b {
  color: #7a3a0e; /* 5.71:1 on the card-back tan */
  font-weight: 800;
  font-size: 0.82em;
  letter-spacing: 0.18em;
}

.back__name {
  margin-top: calc(var(--u) * 3);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: calc(var(--u) * 15);
  line-height: 0.9;
  text-transform: uppercase;
}

.back__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: calc(var(--u) * 1.6);
  font-size: calc(var(--u) * 3.4);
  color: #5d5446;
}

.back__code {
  width: 30%;
  height: calc(var(--u) * 6);
  background: repeating-linear-gradient(
    90deg,
    var(--ink) 0 1px, transparent 1px 3px,
    var(--ink) 3px 5px, transparent 5px 6px,
    var(--ink) 6px 7px, transparent 7px 10px
  );
}

/* ---------- Lineup chrome ---------- */

.lineup__chrome {
  position: absolute;
  inset: auto var(--gutter) clamp(20px, 4svh, 40px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.lineup__chrome .tag {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
}

.lineup__count {
  margin: 0;
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.7vw, 1rem);
  letter-spacing: 0.18em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Lineup outro: glowing 40 zooms to white ---------- */

.lineup__track,
.lineup__chrome {
  will-change: opacity;
}

.forty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform; /* scaled as one GPU layer during the zoom */
}

/* Name bar above the number, like the back of a jersey */
.forty__name {
  margin-bottom: 0.2em;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: min(6.5svh, 7.5vw);
  line-height: 1;
  letter-spacing: 0.14em;
  margin-right: -0.14em; /* keep the tracked word optically centred */
  text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 10px rgb(255 255 255 / 0.85),
    0 0 34px rgb(255 255 255 / 0.4);
  opacity: 0;
}

/* The big jersey number */
.forty__glyphs {
  position: relative;
  display: block;
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: min(36svh, 40vw);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow:
    0 0 12px rgb(255 255 255 / 0.9),
    0 0 40px rgb(255 255 255 / 0.5);
  opacity: 0;
}

/* Band of orange light that sweeps through the name and the 40 (only inside
   the letters). Tilted top-right to bottom-left, it travels top-left to bottom-right. */
.forty__name {
  position: relative;
}

.forty__name::after {
  content: "McClain";
}

/* On the number, the band is cut to the numerals with the same SVG as a mask */


.forty__name::after,
.forty__glyphs::after {
  position: absolute;
  inset: 0;
  color: transparent;
  text-shadow: none;
  background: linear-gradient(
    135deg,
    transparent 46.5%,
    rgb(255 122 31 / 0.95) 48.6%,
    #fff3e6 50%,
    rgb(255 122 31 / 0.95) 51.4%,
    transparent 53.5%
  ) 100% 100% / 300% 300% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 10px rgb(255 122 31 / 0.85));
}

.forty__glyphs::after {
  content: "40";
}

.forty__photos {
  position: absolute;
  inset: 0;
}

/* Photos scattered around the jersey back. Each sets its centre
   (--x, --y), width (--w), shape (--ar) and tilt (--r) inline. */
.forty__photo {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%) rotate(var(--r));
  overflow: hidden;
  background: #8a8580;
  border: max(4px, 0.4vw) solid #f4efe8;
  box-shadow: 0 14px 30px rgb(0 0 0 / 0.55);
  opacity: 0;
}

@media (max-width: 760px), (orientation: portrait) {
  .forty__photo:nth-of-type(1) { --x: 27% !important; --y: 25% !important; --w: 40vw !important; }
  .forty__photo:nth-of-type(2) { --x: 76% !important; --y: 22% !important; --w: 28vw !important; }
  .forty__photo:nth-of-type(3) { --x: 25% !important; --y: 80% !important; --w: 28vw !important; }
  .forty__photo:nth-of-type(4) { --x: 72% !important; --y: 78% !important; --w: 40vw !important; }
  .forty__photo--wide { display: none; }
}

/* The white leather the zoom lands on */
.flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff url("assets/white-bg.webp") center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
}

/* Profile shot on the white leather: flipped to face into the page, with his
   back running slightly off the left edge. The source has ~19% empty space
   behind him, so pulling it 25% of its width left crops just past his back. */
.landing__player,
.landing__shine {
  --h: min(104svh, 140vw);
  position: absolute;
  bottom: 0;
  left: calc(var(--h) * (1050 / 1100) * -0.25);
  width: auto;
  max-width: none;
  height: var(--h);
  transform: scaleX(-1);
  /* The flip mirrors the filter too, so a negative x lands the shadow to his right. */
  filter:
    brightness(1.1) contrast(1.1) saturate(1.15)
    drop-shadow(-26px 22px 30px rgb(0 0 0 / 0.38));
}

/* Gloss: a light band cut to his silhouette (the photo itself is the mask),
   swept across once by the timeline. Matches the photo's box exactly. */
.landing__shine {
  position: absolute;
  bottom: 0;
  left: calc(var(--h) * (1050 / 1100) * -0.25);
  width: calc(var(--h) * (1050 / 1100));
  height: var(--h);
  transform: scaleX(-1);
  -webkit-mask: url("assets/kj-profile.webp") 0 0 / 100% 100% no-repeat;
  mask: url("assets/kj-profile.webp") 0 0 / 100% 100% no-repeat;
  background: linear-gradient(
    115deg,
    transparent 46.5%,
    rgb(255 255 255 / 0.12) 48.5%,
    rgb(255 255 255 / 0.55) 50%,
    rgb(255 255 255 / 0.12) 51.5%,
    transparent 53.5%
  ) 100% 0 / 300% 100% no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
}

@media (max-width: 760px), (orientation: portrait) {
  .landing__player,
  .landing__shine {
    --h: min(72svh, 140vw);
  }
}

/* ---------- Landing name lockup: plain type, outline-echo effect ---------- */

.landing__title {
  --kj: min(15svh, 8.4vw); /* MCCLAIN size; KJ is 1.5x */
  position: absolute;
  left: 53%;
  top: 50%;
  translate: -50% -50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.landing__tag {
  margin: 0 0 calc(var(--kj) * 0.28);
}

.landing__name {
  margin: 0;
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}

.landing__line {
  position: relative;
  isolation: isolate;
  display: block;
  color: var(--ink);
}

.landing__line--kj {
  font-size: calc(var(--kj) * 1.5);
}

/* Sized so MCCLAIN runs the same width as KJ */
.landing__line--last {
  font-size: var(--kj);
  margin-top: 0.14em;
}

.landing__line > span {
  display: inline-block;
}

/* Orange outline echo behind the text; JS slides it out on entrance */
.landing__line::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: var(--orange);
  filter: url(#echo-outline);
  transform: translate(0.06em, 0.06em);
}

/* The light band that sweeps across once the letters land */
.landing__line::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: transparent;
  background: linear-gradient(
    135deg,
    transparent 45%,
    rgb(255 150 70 / 0.95) 49%,
    #ffe9d6 50%,
    rgb(255 150 70 / 0.95) 51%,
    transparent 55%
  ) 100% 100% / 300% 300% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgb(255 122 31 / 0.8));
}

/* Narrower landscape screens: nudge right so MCCLAIN clears his hand. */
@media (max-width: 1200px) and (orientation: landscape) {
  .landing__title {
    left: 57%;
  }
}

@media (max-width: 760px), (orientation: portrait) {
  .landing__title {
    --kj: min(13.5vw, 7svh);
    left: var(--gutter);
    top: calc(var(--bar-h) + 1svh);
    translate: none;
    align-items: flex-start;
    text-align: left;
  }

  .landing__tag {
    font-size: 0.6875rem;
  }
}

/* ---------- Landing page menu: a yard line with the pages at its hash marks ---------- */

.field-nav {
  --line-x: clamp(28px, 3.4vw, 56px); /* yard line's distance from the right edge */
  --line-w: 3px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: clamp(260px, 32vw, 520px);
  padding: calc(var(--bar-h) + 2svh) 0 4svh;
  pointer-events: auto;
}

/* The yard line */
.field-nav::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  pointer-events: none;
}

.field-nav::after {
  right: var(--line-x);
  width: var(--line-w);
  background: var(--ink);
}

/* Small hash marks, placed by JS on the same grid as the page ticks */
.field-nav__hash {
  position: absolute;
  right: calc(var(--line-x) - 7px);
  width: calc(var(--line-w) + 14px);
  height: 2px;
  translate: 0 -50%;
  background: var(--ink);
  pointer-events: none;
}

.field-nav__list {
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

/* Each page name sits at a long hash mark that crosses the line */
.field-nav__list a {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.12em calc(var(--line-x) + 34px) 0.12em 1em;
  color: var(--ink);
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: clamp(1.75rem, 3.6vw, 3.75rem);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease;
}

.field-nav__list a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--line-x) - 12px);
  width: calc(var(--line-w) + 36px);
  height: 3px;
  translate: 0 -50%;
  background: currentColor;
}

@media (hover: hover) {
  .field-nav__list a:hover {
    color: var(--orange);
  }
}

.field-nav__list a:focus-visible {
  color: var(--orange);
  outline: 3px solid var(--orange);
  outline-offset: -3px;
}

@media (max-width: 760px), (orientation: portrait) {
  .field-nav {
    --line-x: 16px;
    width: 44vw;
  }

  .field-nav__list a {
    padding-right: calc(var(--line-x) + 24px);
    font-size: min(6.4vw, 2.25rem);
  }

  .field-nav__list a::after {
    right: calc(var(--line-x) - 9px);
    width: calc(var(--line-w) + 26px);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 10svh, 112px) var(--gutter) clamp(24px, 4svh, 40px);
  background: var(--ink);
  color: var(--cream);
}

.site-footer__top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}

.site-footer__name {
  margin: 0;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 0.86;
  text-transform: uppercase;
}

.site-footer__name span {
  display: block;
  color: var(--orange);
}

.site-footer__tag {
  margin: 18px 0 0;
}

.site-footer__label,
.site-footer__credit,
.site-footer__legal,
.site-footer__tag,
.site-footer__top-btn {
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(255 246 234 / 0.6);
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.site-footer__label {
  margin: 0 0 10px;
}

.site-footer__col a {
  width: fit-content;
  padding: 6px 0;
  color: var(--cream);
  font-variation-settings: "opsz" 72;
  font-weight: 800;
  font-size: clamp(1.25rem, 1.6vw, 1.6rem);
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 160ms ease;
}

.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--orange);
}

/* Back-to-top: same white disc as the logo and menu buttons */
.site-footer__top-btn {
  display: grid;
  place-items: center;
  gap: 10px;
  color: rgb(255 246 234 / 0.6);
  text-decoration: none;
}

.site-footer__top-btn span:first-child {
  display: grid;
  place-items: center;
  width: clamp(56px, 4.6vw, 72px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1.4rem;
  letter-spacing: 0;
  transition: transform 160ms var(--ease-out), background 160ms ease;
}

.site-footer__top-btn svg {
  display: block;
  width: 38%;
  height: auto;
}

.site-footer__top-btn:hover span:first-child {
  background: var(--orange);
}

.site-footer__top-btn:active span:first-child {
  transform: scale(0.95);
}

.site-footer__bottom {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: clamp(48px, 8svh, 88px);
  padding-top: 24px;
  border-top: 1px solid rgb(255 246 234 / 0.14);
}

.site-footer__credit {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-block: 12px; /* 44px+ tap target without moving the row */
  margin-block: -12px;
  text-decoration: none;
  transition: color 200ms ease;
}

.site-footer__mark-img {
  height: 21px;
  width: auto;
  opacity: 0.7;
  transition: opacity 200ms ease;
}

.site-footer__credit:hover,
.site-footer__credit:focus-visible {
  color: var(--cream);
}

.site-footer__credit:hover .site-footer__mark-img,
.site-footer__credit:focus-visible .site-footer__mark-img {
  opacity: 1;
}

.site-footer a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.site-footer__legal {
  margin: 0;
}

@media (max-width: 900px) {
  .site-footer__top {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }

  .site-footer__top-btn {
    grid-column: 1 / -1;
    justify-self: start;
    grid-auto-flow: column;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Menu button + full-screen menu ---------- */

.menu-btn {
  --size: clamp(56px, 4.6vw, 72px);
  position: relative;
  margin-left: auto;
  display: grid;
  place-content: center;
  gap: calc(var(--size) * 0.11);
  width: var(--size);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 18px rgb(70 22 0 / 0.28);
  cursor: pointer;
  /* Hidden until you've scrolled past the hero */
  opacity: 0;
  scale: 0.7;
  visibility: hidden;
  transition:
    opacity 260ms ease,
    scale 360ms var(--ease-out),
    visibility 0s linear 360ms;
}

.menu-btn.is-shown,
.menu-btn.is-open {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition:
    opacity 260ms ease,
    scale 360ms var(--ease-out),
    visibility 0s;
}

.menu-btn:active {
  scale: 0.95;
}

.menu-btn span {
  display: block;
  width: calc(var(--size) * 0.38);
  height: 2.5px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform 300ms var(--ease-out), opacity 200ms ease;
}

/* Lines fold into an X when the menu is open */
.menu-btn.is-open span:nth-child(1) {
  transform: translateY(calc(var(--size) * 0.11 + 2.5px)) rotate(45deg);
}

.menu-btn.is-open span:nth-child(2) {
  opacity: 0;
}

.menu-btn.is-open span:nth-child(3) {
  transform: translateY(calc(var(--size) * -0.11 - 2.5px)) rotate(-45deg);
}

.menu-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

/* Sits inside the top bar's layer, underneath the logo and the button. */
.menu {
  --from: calc(100% - var(--gutter) - clamp(28px, 2.3vw, 36px)) calc(var(--bar-h) / 2);
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--bar-h) var(--gutter) clamp(24px, 5svh, 48px);
  background: var(--ink);
  color: var(--cream);
  pointer-events: auto;
  clip-path: circle(0 at var(--from));
  visibility: hidden;
  transition:
    clip-path 520ms cubic-bezier(0.77, 0, 0.175, 1),
    visibility 0s linear 520ms;
}

.menu.is-open {
  clip-path: circle(150vmax at var(--from));
  visibility: visible;
  transition: clip-path 620ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0s;
}

html.menu-open {
  overflow: hidden;
}

.menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: 0.35em;
  width: fit-content;
  padding: 0.04em 0;
  font-variation-settings: "opsz" 72;
  font-weight: 900;
  font-size: min(12.5svh, 12.5vw);
  line-height: 0.95;
  text-transform: uppercase;
  text-decoration: none;
  opacity: 0;
  translate: 0 30%;
  transition:
    color 160ms ease,
    opacity 300ms ease,
    translate 500ms var(--ease-out);
}

.menu.is-open .menu__list a {
  opacity: 1;
  translate: 0 0;
}

.menu.is-open li:nth-child(1) a { transition-delay: 0s, 200ms, 200ms; }
.menu.is-open li:nth-child(2) a { transition-delay: 0s, 250ms, 250ms; }
.menu.is-open li:nth-child(3) a { transition-delay: 0s, 300ms, 300ms; }
.menu.is-open li:nth-child(4) a { transition-delay: 0s, 350ms, 350ms; }
.menu.is-open li:nth-child(5) a { transition-delay: 0s, 400ms, 400ms; }

.menu__num {
  color: var(--orange);
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: 0.16em;
  letter-spacing: 0.14em;
  translate: 0 -2.6em;
}

@media (hover: hover) {
  .menu__list a:hover {
    color: var(--orange);
  }
}

.menu__list a:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 4px;
}

.menu__foot {
  margin: clamp(20px, 5svh, 48px) 0 0;
  color: rgb(255 246 234 / 0.55);
  font-variation-settings: "opsz" 10;
  font-weight: 700;
  font-size: clamp(0.8125rem, 0.7vw, 1rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .menu,
  .menu.is-open,
  .menu__list a {
    transition-duration: 0.01ms;
  }
}

/* ---------- Phones: lighter background textures ---------- */

@media (max-width: 760px) {
  .hero__stage { --stage-bg: var(--orange) url("/assets/hero-m.webp") center / cover no-repeat; }
  .lineup__stage { --stage-bg: #050404 url("/assets/sections-bg-m.webp") center / cover no-repeat; }
  .flash { background-image: url("assets/white-bg-m.webp"); }
}

/* ---------- Skip link (shown on keyboard focus) ---------- */

.skip-link {
  position: fixed;
  top: 12px;
  left: 50%;
  z-index: calc(var(--z-topbar) + 1);
  padding: 15px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font: 700 0.875rem/1 var(--font);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  translate: -50% -200%;
  transition: translate 160ms var(--ease-out);
}

.skip-link:focus-visible {
  translate: -50% 0;
}

main:focus {
  outline: none;
}

/* ---------- Footer: 44px tap targets, privacy link ---------- */

.site-footer__col {
  gap: 0;
}

.site-footer__col a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
}

.site-footer__legal a {
  display: inline-block;
  margin-left: 0.6em;
  padding-block: 14px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-footer__legal a:hover {
  color: var(--cream);
}

/* The homepage already ends on the big KJ / McClain lockup */
.home .site-footer__name {
  display: none;
}

/* Yard-line menu links keep a 44px tap height on phones */
@media (max-width: 760px), (orientation: portrait) {
  .field-nav__list a {
    min-height: 44px;
  }
}

/* Header buttons: dark ring + orange outline, readable on white, orange and black */
.logo:focus-visible,
.menu-btn:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--ink);
}

.forty__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Alternate KJM football logo in the footer, cream on ink */
.site-footer__logo {
  display: block;
  width: auto;
  height: clamp(64px, 6vw, 88px);
  margin-bottom: 20px;
  filter: invert(1) sepia(0.15);
  opacity: 0.92;
}

/* The homepage hides the footer name (the big lockup sits above it), so
   the logo needs no gap below it there */
.home .site-footer__logo {
  margin-bottom: 0;
}