/* Honoring Jeffrey Lurie, the greatest owner in all of sports. Go Birds. */
/* ==========================================================================
   JEFFREY LURIE: A LEGACY OF LEADERSHIP
   Eagles Hall of Fame interactive timeline — stylesheet
   ========================================================================== */

/* ---------- Font faces ---------- */
@font-face{
  font-family: 'Dharma Gothic E';
  src: url('../fonts/DharmaGothicE_Regular_R.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Dharma Gothic E';
  src: url('../fonts/DharmaGothicE_Bold_R.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Dharma Gothic E';
  src: url('../fonts/DharmaGothicE_ExBold_R.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: 'Dharma Gothic E';
  src: url('../fonts/DharmaGothicE_Heavy_R.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root{
  /* Brand colors */
  --color-midnight: #004C54;
  --color-midnight-light: #16919C;
  --color-midnight-dark: #00262A;
  --color-black: #000000;
  --color-near-black: #0A0A0A;
  --color-white: #FFFFFF;
  --color-silver: #A5ACAF;
  --color-silver-dim: #8A9598;

  /* Semantic — soft navy base, not pure black */
  --bg-base: #0A1315;
  --bg-base-raised: #0F1C1F;
  --bg-raised: #121415;
  --text-primary: var(--color-white);
  --text-secondary: #C9CDCE;
  --text-muted: var(--color-silver-dim);
  --accent: var(--color-midnight-light);
  --accent-strong: var(--color-midnight);

  /* iOS-style glass surfaces */
  --glass-fill: rgba(255,255,255,0.06);
  --glass-fill-strong: rgba(255,255,255,0.11);
  --glass-border: rgba(255,255,255,0.14);
  --glass-blur: 42px;
  --shadow-glass: 0 20px 50px -12px rgba(0,0,0,0.45);

  /* Rounded, premium corners */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 26px;

  /* Typography */
  --font-display: 'Dharma Gothic E', 'Arial Narrow', sans-serif;
  --font-body: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-year: clamp(4.5rem, 16vw, 13rem);
  --fs-h1: clamp(3.7rem, 7vw, 6.2rem);
  --fs-h2: clamp(2rem, 5vw, 3.75rem);
  --fs-title: clamp(1.5rem, 3vw, 2.25rem);
  --fs-body: clamp(1rem, 1.2vw, 1.15rem);
  --fs-eyebrow: clamp(0.75rem, 1vw, 1rem);

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
  --gutter: clamp(1.5rem, 6vw, 6rem);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur-med: 0.7s;
  --dur-slow: 1.1s;

  /* Layout */
  --rail-width: 296px;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur-fast: 0.01s; --dur-med: 0.01s; --dur-slow: 0.01s; }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }

body{
  margin: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; display: block; }
a{ color: inherit; }
:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
h1, h2, h3, p{ margin: 0; }

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--color-white); color: var(--color-black);
  padding: 0.75rem 1.25rem; font-weight: 600;
}
.skip-link:focus{ left: var(--space-sm); top: var(--space-sm); }

/* Visually hidden, still reachable by screen readers — standard
   clip-based technique (not display:none/visibility:hidden, which
   would remove it from the accessibility tree too). */
.sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Media placeholder (swap-out marker) ---------- */
.media-placeholder{
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(135deg, rgba(0,76,84,0.35) 0 2px, transparent 2px 18px),
    linear-gradient(180deg, #0b2e31 0%, #061417 100%);
  display: flex; align-items: flex-end; justify-content: flex-start;
  overflow: hidden;
}
.media-placeholder::after{
  content: attr(data-label);
  position: absolute; left: var(--space-sm); bottom: var(--space-sm);
  font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.04em;
  color: rgba(255,255,255,0.45);
  background: rgba(0,0,0,0.5);
  padding: 0.3rem 0.6rem;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 4px;
  max-width: calc(100% - 2rem);
}
.media-placeholder--image{ position: relative; inset: auto; min-height: 220px; border-radius: 2px; }

/* ---------- Reveal-on-scroll base ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero__media{ position: absolute; inset: 0; transform: scale(1.08); overflow: hidden; background: var(--color-black); }
.hero__media img, .hero__media video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video{
  opacity: 0;
  transition: opacity .9s linear;
}
.hero__video.is-visible{ opacity: 1; }
@media (prefers-reduced-motion: reduce){ .hero__video{ transition: none; } }
.hero__overlay{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(22,145,156,0.22), transparent 60%),
    linear-gradient(180deg, rgba(10,19,21,0.35) 0%, rgba(10,19,21,0.55) 55%, var(--bg-base) 100%);
}
.hero__content{
  position: relative; z-index: 2;
  max-width: 920px;
  text-align: center;
  padding: 0 var(--gutter);
}
.hero__hof-logo{
  height: clamp(74px, 9vw, 165px);
  width: auto;
  margin: 0 auto var(--space-sm);
  transition-delay: 0.05s;
}
.hero__hof-context{
  font-size: clamp(0.82rem, 1.3vw, 0.95rem);
  letter-spacing: 0.02em;
  color: var(--color-silver);
  max-width: 520px;
  margin: 0 auto var(--space-md);
  transition-delay: 0.08s;
}
.hero__headline{ margin-bottom: var(--space-md); }
.hero__headline-main{
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: var(--color-white);
}
.hero__headline-years{
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-silver);
  margin-top: var(--space-sm);
}
.hero__headline-sub{
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(.95rem, 2vw, 1.4rem);
  letter-spacing: 0.3em;
  color: var(--accent);
  margin-top: var(--space-sm);
}
.hero__copy{
  font-size: clamp(1.2rem, 1.5vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 565px;
  margin: 0 auto var(--space-lg);
  transition-delay: 0.1s;
}

.hero__video-toggle{
  position: absolute; bottom: var(--space-md); right: var(--space-md);
  z-index: 2;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-primary);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.hero__video-toggle:hover{ background: var(--accent-strong); transform: translateY(-2px); }
.hero__video-toggle-icon{ width: 18px; height: 18px; }

/* Hero scroll indicator — doubles as the pin's progress readout. The
   track fills top-to-bottom 1:1 with scroll position (no easing lag,
   same rule we settled on for the event-line fill), and a marker at its
   foot morphs from a hollow dot + hidden label into a solid "1994" as
   the pin nears release, foreshadowing the real milestone-01 heading
   it's about to hand off to. */
.hero__scroll-indicator{
  position: absolute; bottom: var(--space-lg); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  z-index: 2;
}
.hero__scroll-line{
  width: 1px; height: 46px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent);
  animation: scrollPulse 2.2s ease-in-out infinite;
}
.hero__scroll-text{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--color-white);
  text-shadow: 0 0 16px rgba(0,0,0,0.5);
  animation: scrollTextBob 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%, 100%{ opacity: 0.3; transform: scaleY(0.7); transform-origin: top; }
  50%{ opacity: 1; transform: scaleY(1); transform-origin: top; }
}
@keyframes scrollTextBob{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce){
  .hero__scroll-line, .hero__scroll-text{ animation: none; }
}

/* ============================================================
   MILESTONE SECTIONS
   ============================================================ */
.milestone{
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: var(--space-xl) var(--rail-width) var(--space-xl) var(--gutter);
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.05);
  content-visibility: auto;
  contain-intrinsic-size: auto 1100px;
}

.milestone__bg{
  position: absolute; inset: 0;
  z-index: 0;
  will-change: transform;
}
.milestone__bg video, .milestone__bg img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.45;
  /* Starts fully desaturated and colorizes on scroll — see "Colorize on
     enter" below. filter is transform/opacity/filter-only, so it stays
     rAF/IntersectionObserver-driven rather than a static treatment. */
  filter: grayscale(1) saturate(0.3);
  transition: filter 1.1s var(--ease-out);
}
.milestone.is-active .milestone__bg video, .milestone.is-active .milestone__bg img{
  filter: grayscale(0) saturate(1);
}
@media (prefers-reduced-motion: reduce){
  .milestone__bg video, .milestone__bg img{ filter: none; transition: none; }
}
.milestone__bg-tint{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(22,145,156,0.16), rgba(10,19,21,0.12));
  mix-blend-mode: soft-light;
}
.milestone__bg-scrim{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--bg-base) 0%, rgba(10,19,21,0.4) 20%, rgba(10,19,21,0.4) 80%, var(--bg-base) 100%);
}

.milestone__inner{
  position: relative; z-index: 1;
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  align-items: center;
  /* dense: on layout 'a' the media (cols 8-12) is placed before the
     content (cols 1-6) in markup, so sparse (default) auto-placement
     can't backfill the free cols 1-6 of media's own row and pushes
     content into a brand-new row below it instead — leaving a tall
     empty gap next to a long event list. Dense lets content fill that
     row alongside the media as intended. No effect on layout 'b' (rows
     already pinned explicitly) or 'c' (media/content share one column
     range, so there's no hole to backfill either way). */
  grid-auto-flow: row dense;
}

.milestone__year-row{
  grid-column: 1 / span 12;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.milestone__year{
  position: relative;
  font-family: var(--font-display);
  font-size: var(--fs-year);
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.65);
  /* letter-spacing: -0.02em; */
  will-change: transform;
  pointer-events: none;
  user-select: none;
  transform: translateY(14px);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.milestone.is-visible .milestone__year{ transform: translateY(0); opacity: 1; }
/* Scroll-linked year fill — a solid-color duplicate laid over the outline,
   its opacity driven by --year-fill (set in rAF, transform/opacity/filter
   only) as the milestone transits the viewport. */
.milestone__year::after{
  content: attr(data-year);
  position: absolute;
  inset: 0;
  color: var(--color-white);
  /* Same stroke width as the base layer (just solid instead of 65%
     transparent) so this layer's glyph footprint is always a strict
     superset of the base's. A stroke straddles the glyph outline,
     puffing it out slightly — with 0 stroke here, that puffed-out base
     edge could peek past this layer's true (slightly smaller) fill
     shape at a sharp concave corner, like the notch in "t"'s crossbar,
     leaving a tiny unfilled-looking gap there even at 100% fill. */
  -webkit-text-stroke: 1.5px var(--color-white);
  /* Top-down fill: clips away the bottom (100% - progress) of the solid
     overlay, so it reads as white ink filling the outlined numerals from
     the top as the milestone scrolls through. */
  clip-path: inset(0 0 calc(100% - var(--year-fill, 0%)) 0);
}
@media (prefers-reduced-motion: reduce){
  .milestone__year::after{ clip-path: none; }
}

/* Content column — title, copy card, and any CTAs all live here as one
   flex unit, so they stack naturally instead of fighting the 12-col grid */
.milestone__content{
  grid-column: 1 / span 6;
  margin-top: -2.2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}
.milestone__title{
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-title);
  line-height: 1.15;
  color: var(--color-white);
}
.milestone__copy{
  display: flex;
  flex-direction: column;
  color: var(--text-secondary);
  font-size: var(--fs-body);
  width: 100%;
  /* Layered on top of var(--glass-fill) rather than replacing it, so the
     text panel stays reliably dark (and body text AA-safe) even though
     the brighter background photo now shows through more behind it. */
  background: linear-gradient(rgba(10,19,21,0.55), rgba(10,19,21,0.55)), var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.4rem;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  display: none;
}
.milestone__copy-text{ margin: 0; }

/* ---- Inline event timeline (pilot: milestone-01) — progressive fill
   line + dots in place of the "Read full story" modal ---- */
.event-line{ position: relative; width: 100%; padding-left: 28px; margin-top: 1rem; }
.event-line__base{
  position: absolute; left: 9px; top: 4px; bottom: 4px; width: 2px;
  background: rgba(22,145,156,0.18); border-radius: 2px;
}
.event-line__glow{
  position: absolute; left: 9px; top: 0; width: 2px; border-radius: 2px; height: 0;
  background: var(--accent); box-shadow: 0 0 12px rgba(22,145,156,0.85);
  transition: opacity var(--dur-med) var(--ease-out);
  opacity: 0;
}
.event-list{ display: flex; flex-direction: column; gap: 10px; }
.event-card{
  position: relative;
  /* A flat (not layered) dark color, so it keeps transitioning smoothly
     to .is-active's background below, while still reading dark enough
     for AA-safe body text now that the bg photo shows through more. */
  background: rgba(18,28,30,0.58); border: 1px solid var(--glass-border);
  border-radius: var(--radius-md); padding: 0.75rem 1.2rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out),
    background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.event-card.is-visible{ opacity: 1; transform: translateY(0); }
.event-card__dot{
  position: absolute; left: -24.6px; top: 0.9rem; width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg-base); border: 2px solid #ffffff;
  transition: background var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.event-card__date{ margin: 0; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }
.event-card__text{ margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }

/* Date now always sits in a header row, so a card that also carries a
   Super Bowl logo and/or Celebrate button (the two championship
   entries) can show them inline with the specific date they belong to,
   rather than floating at the top of the whole section. */
.event-card__header{ display: flex; align-items: flex-start; justify-content: flex-start; gap: 0.75rem; margin-bottom: 0.2rem; }
.event-card__sb-logo{ width: clamp(48px, 4.2vw, 64px); height: auto; flex-shrink: 0; }
.event-card.is-active{
 background: #00262ab8; border-color: rgba(22, 145, 156, 0.55); box-shadow: 0 20px 40px -18px rgba(22, 145, 156, 0.4); backdrop-filter: blur(5px);
}
.event-card.is-active .event-card__dot{ background: var(--accent); box-shadow: 0 0 10px rgba(22,145,156,0.9); }
.event-card.is-active .event-card__text{ color: var(--color-white); }
@media (prefers-reduced-motion: reduce){
  .event-line__glow{ transition: none; }
  .event-card{ opacity: 1; transform: none; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
}

.milestone__media{
  grid-column: 8 / span 5;
  position: relative;
  min-height: 470px;
  /* The secondary image (below) is absolutely positioned at
     top: 50%+28px, height: 74% of THIS box — so its own bottom edge
     always lands at 1.24x this box's height + 28px, i.e. it structurally
     hangs ~141px below the 470px min-height (absolutely positioned
     children don't grow their container). A grid row sized only by the
     470px box would clip that overhang once nothing else in the row
     needs to be taller — this margin reserves the real footprint so nearby
     content (or a section's own overflow:hidden edge) never cuts it off. */
  margin-bottom: 141px;
}

.milestone__img{
  position: absolute;
  overflow: hidden;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
  clip-path: inset(0 0 0 0 round var(--radius-lg));
  border: 1px solid rgba(255,255,255,0.08);
}
.milestone__img .media-placeholder{ position: absolute; inset: 0; }
.milestone__img img{ width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; transition: transform 0.5s var(--ease-out), filter 0.3s var(--ease-out); }
.milestone__img img[data-lightbox]{ cursor: zoom-in; }
.milestone__img:has(img[data-lightbox]):hover img{ transform: scale(1.045); filter: brightness(1.04); }
.milestone__img::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 35%, transparent 65%);
  pointer-events: none;
}
.milestone__img-caption{
  position: absolute; left: 0.9rem; bottom: 0.95rem; right: 0.9rem;
  z-index: 1;
  font-size: 0.77rem; color: rgba(255,255,255,0.7);
  letter-spacing: 0.03em;
  font-weight: bold;
}

/* Staggered, never overlapping: primary sits in the top band, secondary
   in the bottom band, with a real gap between the two bands — so no
   matter how the widths play out, the two boxes can never intersect.
   The side offset (primary left-anchored, secondary right-anchored) is
   what reads as "staggered" rather than just stacked. */
.milestone__img--primary{ width: 72%; height: 50%; top: 0; left: 0; z-index: 2; }
.milestone__img--secondary{
  width: 78%; height: 74%;
  top: calc(50% + 28px); bottom: auto;
  right: 0; left: auto;
  z-index: 2; border-radius: var(--radius-lg);
}

/* Third photo (currently only milestone-09): sized and placed via the
   scoped override below, since the base primary/secondary pair already
   fills the default media box top-to-bottom with no room for a third. */
.milestone__img--tertiary{ z-index: 1; }

/* milestone-09 (2023-Present) is the only milestone with a third photo,
   so the taller media box and the tertiary image's larger size/position
   are scoped to it rather than changed globally. Scoped to the desktop
   two-column layout (min-width: 1181px) — above 1180px the mobile
   carousel rules take over and reset these to a horizontal scroller. */
@media (min-width: 1181px){
  #milestone-09 .milestone__media{ min-height: 760px; margin-bottom: 40px; }
  #milestone-09 .milestone__img--primary{ width: 60%; height: 220px; }
  #milestone-09 .milestone__img--secondary{
    width: 64%; height: 220px;
    top: 244px; bottom: auto;
  }
  #milestone-09 .milestone__img--tertiary{
    width: 86%; height: 272px;
    top: 488px; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%) scale(1.06);
  }
  #milestone-09.milestone.is-visible .milestone__img--tertiary{ transform: translateX(-50%) scale(1); transition-delay: 0.4s; }
}

/* Image reveal animation */
.milestone__img{
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.milestone.is-visible .milestone__img--primary{ transition-delay: 0.1s; }
.milestone.is-visible .milestone__img--secondary{ transition-delay: 0.28s; }
.milestone.is-visible .milestone__img{ opacity: 1; transform: scale(1); }

.milestone__title{
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.milestone__copy{
  opacity: 0; transform: translateY(18px) scale(0.98);
  filter: blur(8px);
  transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), filter var(--dur-med) var(--ease-out);
}
.milestone.is-visible .milestone__title{ opacity: 1; transform: translateY(0); transition-delay: 0.15s; }
.milestone.is-visible .milestone__copy{ opacity: 1; transform: translateY(0) scale(1); filter: blur(0); transition-delay: 0.25s; }

/* ---- Layout variant A: media right, text left ---- */
/* Dense packing (above) now lands media and content in the same row,
   sized by the taller one (usually the event list). Without this, the
   grid's align-items:center would vertically center the much-shorter
   media block in the middle of that tall row instead of letting it sit
   up top next to the first couple of events, the way layout B's rows
   (sized per their own 3-row span) naturally do. */
.milestone--a .milestone__media{ align-self: start; }
.milestone--a .milestone__content{ align-self: start; }

/* ---- Layout variant B: media left, text right ---- */
/* content's row is pinned explicitly (not left auto) so grid
   auto-placement can't slot it into row 1, above the year row — it needs
   to land in the same row band as the media, after the year reads first. */
.milestone--b .milestone__content{ grid-column: 7 / span 5; grid-row: 3 / span 3; margin-top: 0; }
.milestone--b .milestone__media{ grid-column: 1 / span 6; grid-row: 3 / span 3; }
.milestone--b .milestone__year-row{ grid-row: 2; }
.milestone--b .milestone__img--primary{ left: auto; right: 0; }
.milestone--b .milestone__img--secondary{ right: auto; left: 0; }

/* ---- Layout variant C: single large editorial image, centered ---- */
/* No secondary image in this layout (hidden below), so none of the
   base rule's overhang applies — undo that reserved margin. */
.milestone--c .milestone__media{ grid-column: 3 / span 8; min-height: 380px; margin-top: var(--space-md); margin-bottom: 0; }
.milestone--c .milestone__img--primary{ width: 100%; height: 100%; position: relative; }
.milestone--c .milestone__img--secondary{ display: none; }
.milestone--c .milestone__content{ grid-column: 3 / span 8; align-items: center; text-align: center; }
.milestone--c .milestone__copy{ margin-left: auto; margin-right: auto; }
/* The "01 / 09" callout and the big year number stay left-aligned and
   share the same left edge as the rest of the content — only the title/
   copy/photo below are centered for this layout, so the year-row isn't
   centered separately (it used to be, which also left the number
   sitting at the full-width grid's edge instead of lined up above it). */
.milestone--c .milestone__year-row{ grid-column: 3 / span 8; }

@media (prefers-reduced-motion: reduce){
  .milestone__year, .milestone__title, .milestone__copy, .milestone__img{
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
  }
}

/* ============================================================
   DESKTOP RAIL NAV — glass timeline panel
   ============================================================ */
.rail{
  position: fixed;
  top: 50%; right: var(--space-md);
  transform: translateY(-50%) translateX(16px);
  width: 280px;
  max-height: 82vh;
  z-index: 40;
  padding: 1.1rem 1.1rem 1.25rem;
  background: var(--glass-fill-strong);
  border: 1.5px solid rgba(248, 248, 248, 0.577);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  box-shadow: var(--shadow-glass), 0 0 0 1px rgba(22,145,156,0.08), 0 0 40px -8px rgba(22,145,156,0.25);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  /* Slides up into its resting (vertically centered) position as the
     user scrolls through the pinned hero — --rail-reveal (0→1) is set
     directly by initHeroPin() every scroll frame, scrubbed 1:1 with
     scroll position (no CSS transition/easing lag), so this IS the
     payoff of the pinned intro rather than a separate effect. */
  --rail-reveal: 0;
  opacity: var(--rail-reveal);
  transform: translateY(calc(-50% + (1 - var(--rail-reveal)) * 70px));
  pointer-events: none;
}
.rail.is-interactive{ pointer-events: auto; }
@media (prefers-reduced-motion: reduce){
  .rail{ opacity: 1; transform: translateY(-50%); pointer-events: auto; }
}
/* Between the mobile breakpoint and ~1700px, the centered stats section
   has no room to reserve space for the rail without breaking its
   centering, so the rail can't use the pinned-scroll reveal here without
   risking an overlap — it's collapsed by default instead (see
   initTimelineVisibility's defaultHidden()) and opens/closes purely via
   the reopen pill / close button, same as the reduced-motion case:
   shown at rest, no scroll-driven reveal. */
@media (min-width: 1181px) and (max-width: 1700px){
  .rail{ opacity: 1; transform: translateY(-50%); pointer-events: auto; }
}
.rail__header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
}
.rail__heading-group{
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.rail__heading{
  font-size: 0.78rem;
  /* letter-spacing: 0.28em; */
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 0 0.2rem;
}
.rail__close{
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem; line-height: 1;
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__close:hover{ color: var(--accent); }

.rail.is-hidden{ display: none; }
.rail__track{
  position: relative;
  width: 100%; height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
}
.rail__progress{
  position: absolute; top: 0; left: 0; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--color-silver));
  width: 0%;
  border-radius: 999px;
  transition: width 0.25s var(--ease-out);
}
/* The scrolling viewport is a separate element from .rail__list itself —
   .rail__list::before (the connector line through the dots) is
   absolutely positioned and sized relative to .rail__list's own
   rendered box. If .rail__list were ALSO the overflow:auto scroll
   container, that box is just the visible scrollport, not the full
   (taller, scrolled) content — so with enough milestones to need
   scrolling, the line would stop at the bottom of the visible area
   instead of reaching dots further down. Scrolling happens here
   instead, while .rail__list below is left free to grow to its full,
   unclipped content height. */
.rail__list-viewport{
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* legacy Edge/IE */
}
.rail__list-viewport::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
.rail__list{
  position: relative;
  display: flex; flex-direction: column;
  gap: 0.15rem;
}
.rail__list::before{
  content: '';
  position: absolute;
  left: calc(0.75rem + 9px);
  top: 18px; bottom: 18px;
  width: 1px;
  background: rgba(255,255,255,0.14);
}
.rail__item{ position: relative; }
.rail__link{
  position: relative;
  display: flex; align-items: flex-start; gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rail__link:hover, .rail__link:focus-visible{
  background: var(--glass-fill-strong);
  border-color: var(--glass-border);
}
.rail__marker{
  position: relative; z-index: 1;
  flex-shrink: 0;
  width: 18px; height: 1.6rem;
  display: flex; align-items: center; justify-content: center;
}
.rail__dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg-base-raised);
  border: 2px solid rgba(255,255,255,0.3);
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.rail__text{ display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.rail__year{
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__title{
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color var(--dur-fast) var(--ease-out);
}
.rail__item--active .rail__link{
  background: var(--glass-fill-strong);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(22,145,156,0.2) inset;
}
.rail__item--active .rail__dot{
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.25);
  box-shadow: 0 0 0 4px rgba(22,145,156,0.22);
}
.rail__item--active .rail__year{ color: var(--accent); }
.rail__item--active .rail__title{ color: var(--text-secondary); }
.rail__link:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1180px){ .rail{ display: none; } }

/* ============================================================
   MOBILE NAV
   ============================================================ */
.mobile-nav{ display: none; }
@media (max-width: 1180px){
  .mobile-nav{
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: rgba(10,19,21,0.85);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border);
    /* Stays off-screen until the user actually reaches 1994 (milestone-01)
       — no point showing a "jump to a year" bar during the hero/stats
       intro. initScrollspy's setActive() adds .is-visible once a real
       milestone becomes active. */
    transform: translateY(100%);
    transition: transform var(--dur-med) var(--ease-out);
  }
  .mobile-nav.is-visible{ transform: translateY(0); }
  /* Once unlocked (.is-visible, past 1994), it still ducks out of the
     way while the user is actively scrolling, and reappears the moment
     they pause or scroll back up — see initMobileNavAutoHide(). */
  .mobile-nav.is-visible.is-scroll-hidden{ transform: translateY(100%); }
  @media (prefers-reduced-motion: reduce){ .mobile-nav{ transition: none; } }

  /* Thin progress track along the very top edge of the fixed bar —
     fills as the user gets further down the page (same pct the desktop
     rail's own progress bar uses). */
  .mobile-nav__track{
    position: relative; height: 2px; width: 100%;
    background: rgba(255,255,255,0.1);
  }
  .mobile-nav__progress{
    position: absolute; top: 0; left: 0; height: 100%;
    background: var(--accent);
    width: 0%;
    transition: width 0.3s var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce){ .mobile-nav__progress{ transition: none; } }

  .mobile-nav__row{
    display: flex; align-items: center;
  }
  /* Always-visible horizontal scroller — no more tap-to-expand. The
     active chip auto-scrolls into view (initScrollspy) but can still be
     swiped by hand; scrollbar hidden the same way as the rail's list. */
  .mobile-nav__chips{
    flex: 1; min-width: 0;
    display: flex;
    gap: 0.4rem;
    list-style: none; margin: 0;
    padding: 0.4rem var(--space-sm);
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .mobile-nav__chips::-webkit-scrollbar{ display: none; }
  .mobile-nav__chips li{ flex: 0 0 auto; }
  .mobile-nav__chip{
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--glass-border);
    background: var(--glass-fill);
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  }
  .mobile-nav__chip-year{
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--text-secondary);
  }
  .mobile-nav__chip-title{
    font-size: 0.58rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  li.is-active .mobile-nav__chip{
    background: rgba(22,145,156,0.14);
    border-color: var(--accent);
    box-shadow: 0 0 0 1px rgba(22,145,156,0.25), 0 0 16px -2px rgba(22,145,156,0.5);
  }
  li.is-active .mobile-nav__chip-year{ color: var(--color-white); }
  li.is-active .mobile-nav__chip-title{ color: var(--accent); }
}

/* ============================================================
   BY THE NUMBERS
   ============================================================ */
.stats-pin{
  position: relative;
  /* Extra scroll distance this section stays pinned for — same
     technique the hero used to use: sticky positioning + a scroll-
     progress read (initHeroPin targets #statsPin now), no scroll-jacking. */
  height: 280vh;
  height: 280svh;
}
@media (prefers-reduced-motion: reduce){
  .stats-pin{ height: auto; }
}
.stats{
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  /* Symmetric padding — unlike .milestone, this section is a single
     centered block (headline/stat grid), not a two-column layout, so
     reserving asymmetric space for the rail nav on the right (like
     .milestone does) visibly threw its centering off on wide screens. */
  padding: var(--space-lg) var(--gutter);
  background: var(--bg-base);
  border-top: 1px solid rgba(255,255,255,0.05);
  /* overflow: hidden, not auto — this box is sticky for the entire
     280vh pinned scroll, so with `auto` the slightest internal overflow
     (sub-pixel rounding, a tall viewport zoom, etc.) made the browser
     capture wheel/trackpad scroll into this box first instead of letting
     it advance the page, which read as the scroll getting "stuck". A
     short viewport just clips the overflow instead — an acceptable
     trade for scroll that never catches. */
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce){
  .stats{ position: relative; height: auto; }
}
.stats__inner{ max-width: 1180px; margin: 0 auto; text-align: center; }
.stats__eyebrow{
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.stats__headline{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  margin-bottom: 1rem;
}
.stats__intro{
  color: var(--text-secondary);
  max-width: 62ch;
  margin: 0 auto var(--space-lg);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
}
.stats__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  text-align: left;
}
.stat-tile{
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.4rem;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
}
.stat-tile__value{
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.1rem);
  line-height: 1;
  color: var(--color-white);
  margin-bottom: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.stat-tile__label{
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.stat-tile__detail{
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-muted);
}
.stats__grid .stat-tile:nth-child(1){ transition-delay: 0s; }
.stats__grid .stat-tile:nth-child(2){ transition-delay: 0.08s; }
.stats__grid .stat-tile:nth-child(3){ transition-delay: 0.16s; }
.stats__grid .stat-tile:nth-child(4){ transition-delay: 0.24s; }
.stats__grid .stat-tile:nth-child(5){ transition-delay: 0.32s; }
.stats__grid .stat-tile:nth-child(6){ transition-delay: 0.4s; }
.stats__grid .stat-tile:nth-child(7){ transition-delay: 0.48s; }
.stats__grid .stat-tile:nth-child(8){ transition-delay: 0.56s; }
.stats__grid .stat-tile:nth-child(9){ transition-delay: 0.64s; }

@media (max-width: 1700px){
  /* No pinned-scroll effect below desktop-wide — just a normal section.
     initStatsPin's own pinnable<=0 check already no-ops safely once this
     collapses. This has to match the rail's own collapse band (see
     initTimelineVisibility's inCollapseBand(), max-width:1700px), not
     just the mobile breakpoint: the pin's only visible payoff is
     scrubbing the rail into its revealed position, but between 1181px
     and 1700px the rail is forced to a fixed opacity/position and
     starts collapsed by default regardless (not enough width to reserve
     its space), so scrubbing it is a no-op there too — without this,
     users in that range were still forced through the long sticky-
     scroll lock for no visible effect. */
  .stats-pin{ height: auto; }
  .stats{
    position: relative; height: auto; overflow: visible;
    padding: var(--space-lg) var(--gutter);
  }
}
@media (max-width: 900px){ .stats__grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .stats__grid{ grid-template-columns: 1fr; } }

/* ============================================================
   CELEBRATE BUTTON (Super Bowl milestones) — click/tap repeatedly
   to fire confetti bursts, Google-doodle style
   ============================================================ */
.celebrate-btn{
  display: inline-flex; align-items: center; gap: 0.55rem;
  margin-top: 0.6rem;
  padding: 0.7rem 1.35rem;
  background: var(--accent-strong);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  transition: background var(--dur-fast) var(--ease-out), transform 0.15s var(--ease-out),
    opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: 0.15s;
  animation: celebratePulse 2.6s ease-in-out infinite;
}
.milestone.is-visible .celebrate-btn{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .celebrate-btn{ opacity: 1; transform: none; transition: background var(--dur-fast) var(--ease-out); animation: none; } }

@media (min-width: 1181px){
  .celebrate-btn{
    padding-left: 1.9rem;
    padding-right: 1.9rem;
  }
}
.celebrate-btn:hover{ background: var(--accent); }
.celebrate-btn:active{ transform: scale(0.93); }
.celebrate-btn__icon{ font-size: 1.05rem; line-height: 1; }

/* Compact variant — lives inside the one event card it pertains to,
   rather than at the top of the whole milestone section. */
.celebrate-btn--sm{
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  gap: 0.4rem;
}
.celebrate-btn--sm .celebrate-btn__icon{ font-size: 0.92rem; }
@media (min-width: 1181px){
  .celebrate-btn--sm{ padding-left: 1.1rem; padding-right: 1.1rem; }
}
@keyframes celebratePulse{
  0%, 100%{ box-shadow: 0 0 0 0 rgba(22,145,156,0.5), var(--shadow-glass); }
  50%{ box-shadow: 0 0 0 9px rgba(22,145,156,0), var(--shadow-glass); }
}

/* ============================================================
   CONFETTI (fired by the Celebrate button, repeatable)
   ============================================================ */
.confetti{
  position: fixed; inset: 0;
  z-index: 90;
  overflow: hidden;
  pointer-events: none;
}
.confetti__piece{
  position: absolute;
  top: -5%;
  width: 8px; height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation-name: confettiFall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
}
@keyframes confettiFall{
  0%{ transform: translateY(0) translateX(0) rotate(0deg); opacity: 1; }
  100%{ transform: translateY(120vh) translateX(var(--drift)) rotate(var(--spin)); opacity: 0; }
}

/* ============================================================
   TIMELINE END — just the restart control, centered, after the last
   milestone (the full closing hero section it used to live in was
   removed; .closing__restart's own pill styling below is unchanged).
   ============================================================ */
.timeline-end{
  display: flex;
  justify-content: center;
  padding: var(--space-xl) var(--gutter);
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing{
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: var(--space-xl) var(--gutter) var(--space-md);
}
.closing__media{ position: absolute; inset: 0; overflow: hidden; }
.closing__media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.closing__overlay{
  position: absolute; inset: 0;
  background:
   black
}
.closing__content{ position: relative; z-index: 1; max-width: 760px; }
.closing__headline{
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.05;
  margin-bottom: var(--space-md);
}
.closing__copy{
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
  margin-bottom: var(--space-lg);
}
.closing__restart{
  display: inline-flex; align-items: center; gap: 0.6rem;
  padding: 1rem 2.2rem;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.85rem; font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.closing__restart:hover{ background: var(--accent-strong); border-color: var(--accent-strong); }

/* ============================================================
   TIMELINE REOPEN PILL (shown when nav is hidden)
   ============================================================ */
.timeline-reopen{
  position: fixed;
  top: var(--space-md); right: var(--space-md);
  z-index: 40;
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.timeline-reopen:hover{ background: var(--accent-strong); transform: translateY(-2px); }
.timeline-reopen i{ font-size: 1rem; flex-shrink: 0; }
.timeline-reopen[hidden]{ display: none; }

@media (max-width: 1180px){
  /* Mobile's chip bar has no hide control anymore, so there's nothing
     to reopen there — this pill is a desktop-rail-only affordance now. */
  .timeline-reopen{ display: none; }
}

/* ============================================================
   SHARE BUTTON (bottom-right) + confirmation toast
   ============================================================ */
.share-btn{
  position: fixed;
  right: var(--space-md); bottom: var(--space-md);
  z-index: 40;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  color: var(--text-primary);
  font-size: 1.05rem;
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.share-btn:hover{ background: var(--accent-strong); transform: translateY(-2px); }
.share-btn:active{ transform: scale(0.93); }

.share-toast{
  position: fixed;
  right: var(--space-md); bottom: calc(var(--space-md) + 64px);
  z-index: 40;
  max-width: min(280px, calc(100vw - 2 * var(--space-md)));
  padding: 0.65rem 1.1rem;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-glass);
  font-size: 0.82rem;
  color: var(--text-primary);
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.share-toast.is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .share-btn, .share-toast{ transition: none; }
}

@media (max-width: 1180px){
  /* Cleared above the fixed mobile chip bar instead of sitting under it. */
  .share-btn{ bottom: calc(4.5rem + var(--space-xs)); }
  .share-toast{ bottom: calc(4.5rem + var(--space-xs) + 64px); }
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.25rem, 5vw, 3rem);
  background: rgba(6,11,12,0.82);
  backdrop-filter: blur(28px) saturate(1.2);
  -webkit-backdrop-filter: blur(28px) saturate(1.2);
  animation: lightboxIn 0.25s var(--ease-out);
}
.lightbox[hidden]{ display: none; }
@keyframes lightboxIn{ from{ opacity: 0; } to{ opacity: 1; } }
.lightbox__figure{
  max-width: min(1200px, 100%);
  max-height: 100%;
  margin: 0;
}
.lightbox__img{
  display: block;
  max-width: 100%;
  max-height: 80vh;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  box-shadow: 0 40px 100px -20px rgba(0,0,0,0.6);
}
.lightbox__caption{
  margin-top: 1.1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.lightbox__close{
  position: absolute; top: clamp(1rem, 4vw, 2rem); right: clamp(1rem, 4vw, 2rem);
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover{ background: var(--accent-strong); transform: scale(1.06); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px){
  .milestone{ padding: var(--space-lg) var(--gutter); }
  .milestone__inner{ gap: var(--space-sm); }

  /* Explicit reading order: number, year, then photos, then the text
     content — photos sit after the year, not before it, but still
     ahead of the copy/event cards. The Celebrate button and Super Bowl
     logo now live inside their specific event card, so they just flow
     with the rest of that card's content. */
  .milestone__year-row, .milestone--b .milestone__year-row{ order: 1; }
  .milestone__media, .milestone--b .milestone__media{ order: 3; }
  .milestone__content, .milestone--b .milestone__content{ order: 4; }

  .milestone__content, .milestone--b .milestone__content{ grid-column: 1 / span 12; margin-top: var(--space-sm); }
  .milestone__title, .milestone--b .milestone__title{ grid-column: 1 / span 12; margin-top: var(--space-sm); }
  .milestone__copy, .milestone--b .milestone__copy{ grid-column: 1 / span 12; max-width: none; }
  .milestone__media, .milestone--b .milestone__media{
    grid-column: 1 / span 12; grid-row: auto;
    min-height: auto; margin-bottom: 0; display: flex; gap: var(--space-sm);
    overflow-x: auto; overflow-y: hidden; flex-wrap: nowrap;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.4rem;
    /* Bleed to the screen edges instead of sitting inside the page
       gutter — the carousel can scroll truly edge-to-edge, with a peek
       of the next card past the right side of the viewport. */
    margin-left: calc(-1 * var(--gutter));
    margin-right: calc(-1 * var(--gutter));
    padding-left: var(--gutter);
    padding-right: var(--gutter);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* legacy Edge/IE */
  }
  .milestone__media::-webkit-scrollbar, .milestone--b .milestone__media::-webkit-scrollbar{ display: none; } /* Chrome/Safari */
  .milestone--c .milestone__media{ grid-column: 1 / span 12; }
  .milestone--c .milestone__content{ grid-column: 1 / span 12; }
  .milestone--c .milestone__title, .milestone--c .milestone__copy{ grid-column: 1 / span 12; }
  .milestone--c .milestone__year-row{ grid-column: 1 / span 12; }

  /* Multiple photos become a horizontal-scroll carousel instead of
     stacking (saves a lot of page length on long milestones) */
  .milestone__img--primary, .milestone--b .milestone__img--primary,
  .milestone__img--secondary, .milestone--b .milestone__img--secondary,
  .milestone__img--tertiary, .milestone--b .milestone__img--tertiary{
    position: relative;
    top: auto; left: auto; right: auto; bottom: auto;
    transform: none;
    margin: 0;
    flex: 0 0 85%; width: 85%; height: auto;
    aspect-ratio: 16 / 10;
    scroll-snap-align: start;
    border: 1px solid rgba(255,255,255,0.08);
  }
  .milestone__img--tertiary, .milestone--b .milestone__img--tertiary{ flex-basis: 92%; width: 92%; }
  .milestone__media:has(.milestone__img--primary):not(:has(.milestone__img--secondary)) .milestone__img--primary{
    flex-basis: 100%; width: 100%;
  }
}

@media (max-width: 640px){
  :root{ --gutter: 1.25rem; }
  .milestone{ min-height: auto; padding: var(--space-lg) var(--gutter) var(--space-xl); }

  /* Recenter the hero photo's focal point for a narrow/portrait crop — a
     starting guess; nudge the percentages if the subject still sits
     off-frame. */
  .hero__media img, .hero__media video{ object-position: 50% 38%; }

  .hero__content{ padding: 0 1.25rem; margin-top: -8vh; }
  .hero__hof-logo{ height: 110px; margin-bottom: 1rem; }
  .hero__hof-context{ font-size: 0.78rem; margin-bottom: 0.65rem; }
  .hero__headline{ margin-bottom: 0.65rem; }
  .hero__headline-years{ margin-top: 0.4rem; }
  .hero__headline-sub{ margin-top: 0.4rem; }
}