/* ==========================================================================
   Home — the design-system proof of concept.
   Hero: asymmetric. Photography bleeds off the right edge and dissolves into
   the ivory on its left, so the display type can cross the image boundary
   without losing contrast. Nothing is centred.
   ========================================================================== */

.hero {
  position: relative;
  padding-top: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
}

.hero__copy {
  position: relative;
  z-index: 2;
  /* let the surname overhang without clipping */
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-5);
}

.hero__title {
  /* Fraunces at display optical size: tighter joints, sharper contrast. */
  font-variation-settings: "opsz" 144, "SOFT" 18, "WONK" 1;
  font-weight: 800;
  font-size: var(--step-5);
  line-height: 0.9;
  letter-spacing: -0.035em;
  margin: 0;
}
.hero__title .given { display: block; }
.hero__title .family {
  /* The surname deliberately breaks out of its column and runs across the
     seam into the photograph. The image is masked transparent for its first
     26%, so the type stays on ivory and keeps full contrast. */
  display: block;
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: 132%;
  white-space: nowrap;
}
.hero__title .middle {
  display: block;
  font-size: 0.42em;
  font-variation-settings: "opsz" 40, "SOFT" 30, "WONK" 0;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.01em;
  color: var(--neutral);
  margin-bottom: 0.18em;
}

.hero__standfirst { max-width: 40ch; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.hero__ticker {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--divider);
  width: 100%;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--neutral);
}
.hero__ticker b { color: var(--ink); font-weight: 500; }

.hero__media {
  position: relative;
  /* bleed to the right edge of the viewport */
  margin-right: calc(-1 * var(--gutter));
  align-self: stretch;
}
.hero__figure {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: min(78vh, 760px);
  background: var(--ivory-deep);
}
.hero__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* left edge dissolves into the page so the surname can sit across it */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%);
  mask-image: linear-gradient(to right, transparent 0%, #000 26%);
}
.hero__figure figcaption {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory);
  background: color-mix(in srgb, var(--ink) 55%, transparent);
  padding: 0.3rem 0.55rem;
  backdrop-filter: blur(3px);
}

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .hero__media { margin-right: calc(-1 * var(--gutter)); margin-left: calc(-1 * var(--gutter)); }
  .hero__figure { aspect-ratio: 3 / 2; max-height: 62vh; }
  .hero__figure img {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .hero__title .family { white-space: normal; }
}

/* ------------------------------------------------------------- scorecard */
.home-scorecard { position: relative; }
.home-scorecard__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
}

/* --------------------------------------------------------- next up + news */
.split-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.split-head h2 {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
}

.nextup {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.nextup__aside {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--divider);
}
.nextup__aside p { color: var(--neutral); font-size: 0.9375rem; max-width: 34ch; }
@media (max-width: 860px) { .nextup { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- sponsors */
.pitch {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-top: var(--sp-6);
}
.pitch h2 { font-size: var(--step-3); letter-spacing: -0.02em; }
.pitch p { color: color-mix(in srgb, var(--ink) 80%, var(--ivory)); max-width: 44ch; }
.pitch__figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--divider);
}
.pitch__figures div { display: grid; gap: 0.4rem; }
.pitch__figures dt {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--neutral);
}
.pitch__figures dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
@media (max-width: 860px) { .pitch { grid-template-columns: 1fr; } }

/* The CTA is a button, not a bar: keep it to its own width inside the stack. */
.pitch .btn { align-self: flex-start; }

/* ==========================================================================
   PHOTOGRAPHY-LED VARIANT
   The hero is a full-bleed photograph. Legibility is handled by a scrim built
   from the ivory itself — the page colour continuing over the image — rather
   than by a dark overlay, which would break the light identity.
   ========================================================================== */

.hero--photo {
  position: relative;
  min-height: min(94svh, 940px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(7rem, 15vh, 11rem) clamp(2.5rem, 6vh, 4rem);
  isolation: isolate;
  overflow: hidden;
}

.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 28%;   /* keep the subject right of the headline */
}

/* three ivory washes: left column for the type, top strip for the nav,
   bottom edge so the photograph resolves into the page */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(97deg,
      var(--ivory) 0%,
      var(--ivory) 26%,
      color-mix(in srgb, var(--ivory) 74%, transparent) 45%,
      color-mix(in srgb, var(--ivory) 22%, transparent) 64%,
      transparent 78%),
    linear-gradient(to bottom,
      var(--ivory) 0%,
      color-mix(in srgb, var(--ivory) 45%, transparent) 12%,
      transparent 28%),
    linear-gradient(to top, var(--ivory) 0%, transparent 22%);
}

/* One column: the inset portrait that used to sit in a second column is
   gone, and the full-bleed photograph behind the hero carries the picture
   on its own. */
.hero--photo .hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: end;
  width: 100%;
}


/* Over a photograph the header keeps no fill until it sticks. */
body.has-photo-hero .site-header:not(.is-stuck) {
  background: transparent;
  backdrop-filter: none;
}

/* On a phone the ivory scrim would swallow the photograph, so the hero
   splits instead: a full-bleed frame on top, the copy on ivory beneath it.
   Still photography-led — just not fighting the type for the same pixels. */
@media (max-width: 900px) {
  .hero--photo {
    display: block;
    min-height: 0;
    padding: 0 0 var(--sp-7);
    overflow: visible;
  }
  .hero__bg {
    position: relative;
    inset: auto;
    z-index: 0;
    height: min(54svh, 440px);
  }
  .hero__bg img { object-position: 60% 25%; }
  /* only a short fade at the foot so the frame resolves into the page */
  .hero__bg::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 22%;
    background: linear-gradient(to top, var(--ivory), transparent);
  }
  .hero__scrim { display: none; }
  .hero--photo .hero__inner { padding-top: var(--sp-6); }

  /* header sits on ivory again once the photograph is not behind it */
  body.has-photo-hero .site-header:not(.is-stuck) {
    background: color-mix(in srgb, var(--ivory) 88%, transparent);
    backdrop-filter: blur(10px);
  }
}

/* ------------------------------------------------------- full-bleed band */
.band {
  position: relative;
  isolation: isolate;
  margin-top: var(--section-y);
  min-height: clamp(320px, 42vh, 520px);
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  overflow: hidden;
}
.band__bg { position: absolute; inset: 0; z-index: -2; }
/* home.band is a portrait shot (courtside, signing) reused as an ultra-wide
   band: object-fit:cover already matches its width to the container, so
   only the vertical anchor matters. His face sits about halfway down the
   source — object-position's Y% is calibrated against the container's real
   rendered height (measured 390-1920px), not an assumed aspect ratio, since
   .band's height comes from a min-height clamp plus content, not a fixed
   ratio to its width — see the commit history on this rule if it drifts. */
.band__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
/* Subject sits right-of-frame here, so the wash runs the way the original
   design intended: opaque left (text side), clearing toward the right
   (his side). */
.band__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg,
      var(--ivory) 0%,
      color-mix(in srgb, var(--ivory) 82%, transparent) 42%,
      color-mix(in srgb, var(--ivory) 30%, transparent) 72%,
      transparent 100%),
    linear-gradient(to bottom, var(--ivory) 0%, transparent 18% 82%, var(--ivory) 100%);
}
.band__inner { position: relative; }
/* Deliberately caption-scale, not the display headline size this class
   started as — a small tracked-out statement over the photo, the way a
   quote runs on an athlete's own site, rather than a shouted pull-quote. */
.band__statement {
  font-family: var(--display);
  font-variation-settings: "opsz" 20, "SOFT" 10, "WONK" 0;
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: 0.01em;
  max-width: 34ch;
  text-wrap: pretty;
}
/* The determination/achievement phrases — same role --gold plays for title
   wins and medals elsewhere on the site, so the emphasis reads as earned
   rather than decorative. */
.band__statement-hl {
  color: var(--gold);
  font-weight: 700;
}
.band__credit { margin-top: var(--sp-5); }
/* 700px was tuned for the old two-line statement. This one runs six-plus
   lines, which crowds out the left/right split well before 700px — a tablet
   width like 768 was left with almost no room for either the text or the
   photo. Widened so the safer top/bottom-scrim treatment (full-width text,
   photo as a backdrop rather than a side element) covers tablet widths too. */
@media (max-width: 900px) {
  .band__statement { max-width: 100%; }
  .band__scrim {
    background:
      linear-gradient(to bottom,
        var(--ivory) 0%,
        color-mix(in srgb, var(--ivory) 78%, transparent) 30%,
        color-mix(in srgb, var(--ivory) 84%, transparent) 70%,
        var(--ivory) 100%);
  }
}

/* --------------------------------------------- partnership pitch backdrop */
.pitch-wrap {
  position: relative;
  isolation: isolate;
  margin-top: var(--sp-7);
  padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 3vw, 3rem);
  overflow: hidden;
}
.pitch__bg { position: absolute; inset: 0; z-index: -2; }
.pitch__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.pitch__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(85deg,
      var(--ivory) 0%,
      color-mix(in srgb, var(--ivory) 92%, transparent) 55%,
      color-mix(in srgb, var(--ivory) 70%, transparent) 100%);
}
.pitch-wrap .pitch { margin-top: 0; }

/* <picture> is the img's parent, so a percentage height on the img resolves
   against it — it must be given the box, or object-fit: cover never covers. */
.hero__bg picture,
.band__bg picture,
.pitch__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}