/* MicroLeague: Hover Into the Era, drop-in stylesheet, September 22, 2026.
   Load after the site's styles.css. Replaces the old era-hero.css in full.
   Preserves .ep-sport image icons, supplied equipment, full names and .ep-bonus.
   No changes to the host navigation, sections, or matchup-filter markup required. */
/* Slide performance (Sep 28). The carousel rewrites --side, --turn and --visible on every scroll
   frame. As ordinary custom properties they inherit, so each write restyled the whole card subtree
   (4 ms a frame on a fast laptop, 50+ ms on a mid phone). Registered as non-inherited, a write
   restyles the card alone. The card surface reads the rarely-changing --peek-turn instead. */
@property --side { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --turn { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --visible { syntax: "<number>"; inherits: false; initial-value: 1; }
/* fonts the reference ships locally */
@font-face {
  font-family: Archivo;
  src: url("fonts/archivo-black.woff2") format("woff2"), url("fonts/archivo-black.ttf") format("truetype"); /* site: woff2 added Sep 22, same glyphs */
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: Barlow;
  src: url("fonts/barlow-condensed.woff2") format("woff2"), url("fonts/barlow-condensed.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* what the shadcn Carousel and Tabs primitives contributed structurally */
.ep-stage {
  position: relative;
}
.ep-stage [data-slot="carousel-content"] {
  overflow: hidden;
}
.ep-track {
  display: flex;
}
.ep-slide {
  min-width: 0;
  flex-shrink: 0;
  flex-grow: 0;
}
.ep-tab-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ep-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  white-space: nowrap;
  transition: color 0.2s;
}
.ep-tab:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 2px;
  opacity: 0;
  transition: opacity 0.2s;
}
.ep-tab[data-state="active"]:after {
  opacity: 1;
}
.ep-tab > svg {
  flex-shrink: 0;
  pointer-events: none;
}
/* the site's own header (ticker + nav) is 128px, not the reference's 80px + 32px */
.ep-hero {
  --ep-chrome: 128px;
}

/* sport marks: the site's real ball renders instead of the reference's line icons (user, Sep 21).
   Sized exactly where the svg was; inactive tabs sit slightly back, the active one at full colour. */
.ep-tab .ep-sport {
  width: 27px;
  height: 27px;
  object-fit: contain;
  flex-shrink: 0;
  filter: saturate(0.55) brightness(0.92);
  transition: filter 0.2s;
}
.ep-tab:hover .ep-sport,
.ep-tab[data-state="active"] .ep-sport {
  filter: none;
}
.ep-card-header > .ep-sport {
  width: 21px;
  height: 21px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 1120px) {
  .ep-tab .ep-sport {
    width: 27px;
    height: 27px;
  }
}
@media (max-width: 700px) {
  .ep-tab .ep-sport {
    width: 22px;
    height: 22px;
  }
}

.ep-page {
  --ep-gold: #ffcf35;
  --ep-navy: #071629;
  background: #071629;
  color: #fff;
  overflow: hidden;
  font-family: Inter, Arial, sans-serif;
}
.ep-page * {
  box-sizing: border-box;
}
.ep-page button,
.ep-page a {
  -webkit-tap-highlight-color: transparent;
}
.ep-page button {
  cursor: pointer;
}
.ep-page :focus-visible {
  outline: 3px solid #ffcf35;
  outline-offset: 5px;
}
.ep-skip {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 300;
  background: #ffcf35;
  color: #071629;
  padding: 14px;
}
.ep-skip:focus {
  top: 10px;
}
.ep-header {
  height: 80px;
  padding: 0 4.5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  background: #fafbfc;
  color: #071629;
  position: relative;
  z-index: 200;
}
.ep-brand {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}
.ep-brand img {
  width: 143px;
  height: 64px;
  object-fit: contain;
}
.ep-brand > span {
  background: #071629;
  color: #ffcf35;
  border: 1px solid #e2ab23;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  margin: 8px 0 0 4px;
}
.ep-nav {
  display: flex;
  gap: 25px;
  align-items: center;
  height: 100%;
}
.ep-nav a {
  font-size: 12px;
  font-weight: 700;
  height: 100%;
  display: flex;
  align-items: center;
  position: relative;
  white-space: nowrap;
}
.ep-nav a.is-active:after {
  content: "";
  height: 3px;
  position: absolute;
  bottom: 15px;
  left: 0;
  right: 0;
  background: #f4bc12;
}
.ep-account {
  display: flex;
  align-items: center;
  gap: 23px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.ep-claim {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  padding: 15px 19px;
  border-radius: 10px;
  background: linear-gradient(#ffe861, #ffc124);
  box-shadow: 0 4px 10px #80580015;
}
.ep-menu {
  display: none;
  border: 0;
  background: none;
  color: #071629;
}
.ep-hero {
  --split: 50%;
  position: relative;
  isolation: isolate;
  min-height: 790px;
  height: calc(100svh - 112px);
  max-height: 1100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 35px 0 21px;
}
.ep-hero.ep-era-past {
  --split: 60%;
}
.ep-hero.ep-era-present {
  --split: 40%;
}
.ep-world {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #071629;
  overflow: hidden;
} /* Keep the modern plate opaque underneath a single wide vintage mask.
   Two complementary transparent masks expose the navy canvas at their join. */
.ep-world-half {
  position: absolute;
  inset: -12px;
  overflow: hidden;
  transition: filter 380ms ease;
  transform: translate(var(--px, 0), var(--py, 0));
}
.ep-world-past {
  z-index: 1;
  filter: sepia(0.2) saturate(0.65);
  mask-image: linear-gradient(
    to right,
    #000 calc(50% - clamp(110px, 16vw, 260px)),
    transparent calc(50% + clamp(110px, 16vw, 260px))
  );
  mask-size: 200% 100%;
  mask-repeat: no-repeat;
  mask-position: calc(100% - var(--split)) 0;
  transition:
    mask-position 380ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 380ms ease;
}
.ep-world-present {
  z-index: 0;
  filter: saturate(0.75);
}
.ep-plate {
  position: absolute;
  top: 0;
  width: 100vw !important;
  max-width: none;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 0;
  transition: opacity 0s linear 380ms;
}
.ep-world-past .ep-plate {
  left: 0;
  object-position: 25% center;
}
.ep-world-present .ep-plate {
  right: 0;
  object-position: 75% center;
}
/* Hold the outgoing image behind the incoming fade to prevent a dark flash. */
.ep-plate.is-active {
  opacity: 1;
  z-index: 1;
  transition: opacity 380ms ease;
}
.ep-atmosphere {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(
      180deg,
      #031123a6 0%,
      #0410212b 36%,
      #04102142 66%,
      #041021ee 100%
    ),
    linear-gradient(90deg, #27190826, transparent 45%, #13386618);
  pointer-events: none;
}
.ep-grain,
.ep-floor {
  z-index: 2;
  pointer-events: none;
}
.ep-era-past .ep-world-past {
  filter: sepia(0.45) saturate(0.75) brightness(1.12);
}
.ep-era-present .ep-world-present {
  filter: saturate(0.95) brightness(1.15);
}
.ep-grain {
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.ep-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background:
    radial-gradient(ellipse at 40% 0%, #e0b56718, transparent 40%),
    radial-gradient(ellipse at 64% 0%, #92bdea21, transparent 40%);
}
.ep-copy {
  text-align: center;
  position: relative;
  z-index: 5;
  padding: 0 24px;
}
.ep-eyebrow {
  margin: 0 0 10px;
  color: #ffdc63;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
}
.ep-copy h1 {
  font-family: Archivo, Impact, sans-serif;
  font-size: clamp(48px, 6.5vw, 100px);
  font-weight: 900;
  line-height: 1.03;
  letter-spacing: -3.8px;
  text-shadow: 0 4px 24px #0005;
  margin: 0;
  color: #fff;
}
.ep-copy h1 em {
  font-style: normal;
  color: #ffd137;
}
.ep-subtitle {
  font-size: 16px;
  line-height: 1.6;
  margin: 13px 0 0;
  color: #f3f5f8;
}
.ep-stage {
  width: min(1080px, 86%);
  height: 470px;
  margin: 20px auto 0;
  flex-shrink: 0;
  perspective: 1400px;
  z-index: 10;
}
.ep-stage [data-slot="carousel-content"] {
  overflow: visible;
  height: 100%;
}
.ep-track {
  height: 100%;
  margin-left: 0 !important;
  align-items: center;
  touch-action: pan-y pinch-zoom;
}
.ep-slide {
  flex: 0 0 33.333333% !important;
  min-width: 0;
  padding: 0 !important;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1200px;
}
.ep-card {
  width: calc(100% + 28px);
  flex-shrink: 0;
  height: 438px;
  opacity: var(--visible, 1);
  transform: translateY(calc(var(--side) * 27px))
    rotateY(calc(var(--turn) * -22deg)) rotateZ(calc(var(--turn) * -4deg))
    scale(calc(1 - var(--side) * 0.18));
  transform-style: preserve-3d;
  will-change: transform;
}
.ep-card-surface {
  height: 100%;
  border: 1px solid #7890a8;
  border-radius: 19px;
  background: linear-gradient(145deg, #18283eea, #071528f5 42%, #061326f7);
  box-shadow:
    0 17px 40px #0006,
    inset 0 0 0 4px #0b1a2b,
    inset 0 0 0 5px #6c7e8d55;
  overflow: hidden;
  position: relative;
  transition:
    transform 350ms ease,
    border-color 350ms,
    box-shadow 350ms;
}
.ep-card.is-current .ep-card-surface {
  border-color: #e8c56b;
  box-shadow:
    0 22px 45px #0007,
    0 0 0 4px #f3dd9a24,
    inset 0 0 0 4px #081729,
    inset 0 0 0 5px #71829666;
}
.ep-card.is-preview .ep-card-surface {
  transform: translateY(-10px) rotateY(calc(var(--peek-turn, 0) * 10deg)) scale(1.025);
  border-color: #e7c981;
  box-shadow:
    0 24px 50px #0008,
    0 0 20px #e5c68d20;
}
.ep-card-surface:after {
  content: "";
  position: absolute;
  inset: -80%;
  background: linear-gradient(
    110deg,
    transparent 44%,
    #fff1 48%,
    #fff2 49%,
    transparent 52%
  );
  transform: translateX(-70%);
  pointer-events: none;
  transition: transform 600ms;
}
.ep-card.is-preview .ep-card-surface:after {
  transform: translateX(70%);
}
.ep-card-header {
  height: 53px;
  margin: 0 14px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #7890a82e;
}
.ep-card-header > svg {
  width: 21px;
  height: 21px;
  color: #bec9d6;
}
.ep-card-header h2 {
  font-family: Inter, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0;
  text-transform: uppercase;
}
.ep-card-dots {
  margin-left: auto;
  letter-spacing: 3px;
  color: #718095;
  font-size: 10px;
}
.ep-teams {
  display: flex;
  position: relative;
  margin: 7px 11px 0;
}
.ep-team {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  width: 50%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #fff;
  padding: 3px 0 10px;
  transition:
    background 350ms,
    border-color 350ms;
}
.ep-team:first-child {
  border-right-color: #879db82c;
}
.ep-team:disabled {
  cursor: inherit;
}
.ep-team.is-highlighted {
  background: linear-gradient(180deg, #ffcd4b0a, #ffcd4b18);
  border-color: #eec16c50;
}
.ep-team:nth-child(2).is-highlighted {
  background: linear-gradient(180deg, #67a4f90a, #67a4f922);
  border-color: #90b7ec50;
}
.ep-equipment {
  height: 161px;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
  pointer-events: none;
}
.ep-equipment img {
  position: absolute;
  width: 200%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  top: 0;
  user-select: none;
  filter: drop-shadow(0 12px 9px #0006);
}
.ep-equipment-0 img {
  left: 0;
}
.ep-equipment-1 img {
  left: -100%;
}
.ep-year {
  font-family: Barlow, Impact, sans-serif;
  font-size: 44px;
  line-height: 1.05;
  letter-spacing: -0.5px;
}
.ep-city {
  text-transform: uppercase;
  font-family: Barlow, Impact, sans-serif;
  font-size: 21px;
  line-height: 1.1;
  margin-top: 3px;
  white-space: nowrap;
}
.ep-team-cue {
  font-size: 9px;
  display: flex;
  align-items: center;
  gap: 3px;
  color: #c9d0db;
  margin-top: 10px;
  opacity: 0;
  transition: opacity 250ms;
}
.is-current .ep-team-cue {
  opacity: 0.75;
}
.ep-vs {
  position: absolute;
  top: 104px;
  left: 50%;
  transform: translateX(-50%);
  font-family: Barlow, Impact, sans-serif;
  font-weight: 700;
  font-size: 22px;
  text-shadow: 0 0 10px #00122d;
  background: #0b1a2b;
  padding: 5px 3px;
  pointer-events: none;
}
.ep-card-bottom {
  padding: 0 22px 19px;
}
.ep-discover {
  font-size: 10px;
  letter-spacing: 1.1px;
  color: #bfcbd9;
  text-align: center;
  min-height: 30px;
  margin: 8px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ep-explore {
  height: 47px;
  border-radius: 9px;
  background: linear-gradient(#ffdf59, #ffbf25);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #091426;
  font-size: 13px;
  font-weight: 800;
  box-shadow: inset 0 1px 0 #fff8;
  transition: filter 180ms;
}
.ep-explore:hover,
.ep-claim:hover {
  filter: brightness(1.08);
}
.is-side .ep-explore {
  opacity: 0;
}
.is-side .ep-discover {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  line-height: 1.6;
}
.ep-side-hit {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  border-radius: 19px;
}
.ep-side-hit:focus-visible {
  outline-offset: -8px;
}
.ep-arrow {
  position: absolute;
  top: 52%;
  width: 44px;
  height: 44px;
  border: 1px solid #b7c7dc77;
  border-radius: 50%;
  background: #091a2ae8;
  color: #f3f6fb;
  display: grid;
  place-items: center;
  z-index: 130;
  transition:
    background 200ms,
    transform 200ms;
}
.ep-arrow:hover {
  background: #223c56;
  transform: scale(1.06);
}
.ep-arrow svg {
  width: 21px;
}
.ep-arrow-left {
  left: -47px;
}
.ep-arrow-right {
  right: -47px;
}
.ep-interaction-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d4dce7;
  font-size: 10px;
  letter-spacing: 0.45px;
  margin: 11px 0 19px;
  opacity: 0.85;
}
.ep-tabs {
  position: relative;
  z-index: 15;
  margin-top: auto;
  max-width: 100%;
  padding: 0 16px;
}
.ep-tab-list {
  display: flex !important;
  justify-content: center;
  gap: 25px;
  height: 57px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.ep-tab {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  color: #c7d1df !important;
  display: flex !important;
  gap: 12px;
  padding: 8px 12px 15px !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: 1.1px;
  white-space: nowrap;
  min-height: 48px;
}
.ep-tab svg {
  width: 27px !important;
  height: 27px !important;
}
.ep-tab[data-state="active"] {
  color: #ffdc49 !important;
}
.ep-tab:after {
  background: #ffda35 !important;
  bottom: 0 !important;
  height: 3px !important;
}
.ep-era-label {
  position: absolute;
  top: 38%;
  width: 155px;
  z-index: 2;
  opacity: 0.8;
  transition:
    opacity 300ms,
    transform 350ms;
}
.ep-era-label-past {
  left: 3.8%;
}
.ep-era-label-present {
  right: 3.8%;
  text-align: right;
}
.ep-era-label span {
  font-family: Barlow, Impact, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 2px;
}
.ep-era-label i {
  font-style: normal;
  color: #ecc676;
  font-size: 16px;
}
.ep-era-label p {
  font-size: 10px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  line-height: 1.7;
  max-width: 140px;
  margin: 9px 0;
}
.ep-era-label-present p {
  margin-left: auto;
}
.ep-era-label b {
  display: block;
  height: 1px;
  width: 35px;
  background: #d7bd88;
  margin-top: 18px;
}
.ep-era-label-present b {
  margin-left: auto;
  background: #b7d6f6;
}
.ep-era-past .ep-era-label-past,
.ep-era-present .ep-era-label-present {
  opacity: 0;
  transform: translateY(-8px);
}
.ep-facts {
  position: absolute;
  top: 36%;
  width: 160px;
  z-index: 15;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition:
    opacity 350ms,
    transform 350ms,
    visibility 350ms;
  text-shadow: 0 2px 14px #0008;
}
.ep-facts.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ep-facts-past {
  left: 3.8%;
}
.ep-facts-present {
  right: 3.8%;
  text-align: right;
}
.ep-facts-eyebrow {
  font-size: 9px;
  letter-spacing: 2px;
  color: #edce8f;
  margin: 0 0 7px;
}
.ep-facts-present .ep-facts-eyebrow {
  color: #b9dbff;
}
.ep-facts-year {
  font-family: Barlow, Impact, sans-serif;
  font-size: 51px;
  line-height: 1;
}
.ep-facts h3 {
  font-size: 13px;
  margin: 5px 0;
  text-transform: uppercase;
  letter-spacing: 1.2px;
}
.ep-facts-story {
  font-size: 11px;
  color: #e0e5eb;
  margin: 10px 0 15px;
  line-height: 1.6;
}
.ep-facts dl {
  margin: 0;
}
.ep-facts dl > div {
  display: flex;
  flex-direction: column-reverse;
  border-top: 1px solid #ffffff30;
  padding: 10px 0;
}
.ep-facts dt {
  font-size: 9px;
  color: #ccd3de;
}
.ep-facts dd {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3;
}
.ep-facts a {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 9px;
  margin-top: 8px;
  color: #dce7f5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ep-mobile-facts {
  display: none;
}
.ep-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.ep-credits {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4.5%;
  border-top: 1px solid #24364d;
  font-size: 9px;
  letter-spacing: 0.6px;
  color: #8e9dae;
}
.ep-credits button {
  border: 0;
  background: none;
  color: #9eacbd;
  font-size: 9px;
  padding: 10px;
}
.ep-imagery-note {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 20px 4.5%;
  font-size: 12px;
  color: #b5c0ce;
  line-height: 1.7;
}
.ep-imagery-note button {
  background: none;
  border: 1px solid #61728a;
  border-radius: 6px;
  padding: 8px 14px;
  color: #fff;
}
.ep-mobile-menu {
  background: #f8fafc;
  color: #071629;
  padding: 30px;
}
.ep-mobile-menu nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ep-mobile-menu nav a {
  padding: 14px 0;
  font-weight: 600;
}
@media (min-width: 1550px) {
  .ep-stage {
    width: 1140px;
    height: 500px;
    margin-top: 25px;
  }
  .ep-card {
    height: 463px;
  }
  .ep-equipment {
    height: 181px;
  }
  .ep-hero {
    padding-top: 42px;
  }
  .ep-era-label,
  .ep-facts {
    width: 190px;
  }
  .ep-card-bottom {
    padding-top: 3px;
  }
}
@media (max-width: 1350px) {
  .ep-nav {
    gap: 17px;
  }
  .ep-header {
    padding: 0 3%;
    gap: 18px;
  }
  .ep-brand img {
    width: 125px;
  }
  .ep-brand > span {
    font-size: 8px;
  }
  .ep-account {
    gap: 16px;
  }
  .ep-claim {
    padding: 13px 14px;
  }
  .ep-stage {
    width: 83%;
    max-width: 1000px;
  }
  .ep-era-label,
  .ep-facts {
    display: none;
  }
  .ep-mobile-facts {
    display: block;
    position: relative;
    margin: 18px 20px 0;
    padding: 15px 25px;
    border: 1px solid #b8c6d747;
    border-radius: 10px;
    background: #09192bea;
    width: min(520px, calc(100% - 40px));
    z-index: 15;
  }
  .ep-mobile-facts > button {
    position: absolute;
    right: 8px;
    top: 7px;
    background: none;
    border: 0;
    color: #fff;
    width: 30px;
    height: 30px;
  }
  .ep-mobile-facts > p {
    font-size: 12px;
    font-weight: 700;
    margin: 0 0 12px;
  }
  .ep-mobile-facts > div {
    display: flex;
    gap: 28px;
  }
  .ep-mobile-facts span {
    font-size: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #bbc8d7;
  }
  .ep-mobile-facts strong {
    font-size: 21px;
    color: #fff;
  }
  .ep-hero:has(.ep-mobile-facts) {
    height: auto;
    min-height: calc(100svh - 112px);
  }
}
@media (max-width: 1120px) {
  .ep-nav {
    display: none;
  }
  .ep-menu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
  }
  .ep-account {
    margin-left: auto;
  }
  .ep-header {
    height: 72px;
  }
  .ep-hero {
    min-height: 760px;
    height: calc(100svh - 112px);
  }
  .ep-copy h1 {
    font-size: 7.5vw;
  }
  .ep-stage {
    width: 88%;
    height: 455px;
  }
  .ep-card {
    height: 421px;
    width: calc(100% + 20px);
  }
  .ep-equipment {
    height: 150px;
  }
  .ep-card-bottom {
    padding: 0 16px 15px;
  }
  .ep-explore {
    font-size: 11px;
  }
  .ep-discover {
    font-size: 9px;
  }
  .ep-arrow-left {
    left: -18px;
  }
  .ep-arrow-right {
    right: -18px;
  }
  .ep-tab-list {
    gap: 8px;
  }
  .ep-tab {
    font-size: 10px !important;
    gap: 8px;
  }
  .ep-year {
    font-size: 41px;
  }
  .ep-city {
    font-size: 19px;
  }
}
@media (max-width: 700px) {
  .ep-header {
    height: 66px;
    padding: 0 16px;
    gap: 9px;
  }
  .ep-brand img {
    width: 109px;
    height: 53px;
  }
  .ep-brand > span {
    font-size: 7px;
    padding: 2px 4px;
    margin-left: 0;
  }
  .ep-login {
    display: none;
  }
  .ep-account {
    gap: 0;
  }
  .ep-claim {
    padding: 11px 12px;
    font-size: 10px;
    gap: 4px;
    border-radius: 8px;
  }
  .ep-claim svg {
    display: none;
  }
  .ep-menu {
    width: 35px;
  }
  .ep-hero {
    min-height: 720px;
    height: auto;
    max-height: none;
    padding: 31px 0 19px;
  }
  .ep-copy {
    padding: 0 18px;
  }
  .ep-eyebrow {
    font-size: 8px;
    letter-spacing: 2.2px;
    margin-bottom: 12px;
  }
  .ep-copy h1 {
    font-size: clamp(34px, 8.7vw, 60px);
    letter-spacing: -1.7px;
    white-space: nowrap;
  }
  .ep-subtitle {
    font-size: 12px;
    line-height: 1.6;
    max-width: 320px;
    margin: 13px auto 0;
  }
  .ep-stage {
    width: 100%;
    height: 437px;
    margin-top: 15px;
  }
  .ep-slide {
    flex-basis: 73% !important;
  }
  .ep-card {
    height: 399px;
    width: 100%;
    transform: translateY(calc(var(--side) * 20px))
      rotateY(calc(var(--turn) * -22deg)) rotateZ(calc(var(--turn) * -4deg))
      scale(calc(1 - var(--side) * 0.18));
  }
  .ep-card-header {
    height: 46px;
  }
  .ep-card-header h2 {
    font-size: 13px;
    letter-spacing: 2px;
  }
  .ep-equipment {
    height: 141px;
  }
  .ep-year {
    font-size: 39px;
  }
  .ep-city {
    font-size: 19px;
  }
  .ep-teams {
    margin: 6px 8px 0;
  }
  .ep-team {
    padding-bottom: 7px;
  }
  .ep-vs {
    top: 86px;
    font-size: 20px;
  }
  .ep-team-cue {
    font-size: 8px;
    margin-top: 8px;
  }
  .ep-discover {
    font-size: 9px;
    letter-spacing: 0.6px;
    margin-top: 6px;
    min-height: 30px;
  }
  .ep-explore {
    height: 44px;
    font-size: 11px;
    gap: 6px;
  }
  .ep-card-bottom {
    padding: 0 15px 15px;
  }
  .ep-arrow {
    top: auto;
    bottom: -19px;
    width: 38px;
    height: 38px;
  }
  .ep-arrow-left {
    left: 20px;
  }
  .ep-arrow-right {
    right: 20px;
  }
  .ep-interaction-hint {
    font-size: 8px;
    gap: 5px;
    margin: 0 48px 27px;
    max-width: 230px;
    text-align: center;
    min-height: 22px;
  }
  .ep-interaction-hint svg {
    display: none;
  }
  .ep-tabs {
    padding: 0 9px;
    width: 100%;
    margin-top: 0;
  }
  .ep-tab-list {
    width: 100%;
    height: auto !important;
    gap: 2px;
    justify-content: space-between;
  }
  .ep-tab {
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 8px 2px 12px !important;
    font-size: 8px !important;
    letter-spacing: 0.2px;
  }
  .ep-tab svg {
    width: 22px !important;
    height: 22px !important;
  }
  .ep-credits {
    height: auto;
    min-height: 40px;
    gap: 10px;
    padding: 5px 15px;
    font-size: 7px;
    letter-spacing: 0.2px;
  }
  .ep-credits button {
    font-size: 8px;
    white-space: nowrap;
  }
  .ep-world {
    opacity: 0.85;
  }
  .ep-atmosphere {
    background: linear-gradient(
      180deg,
      #0513247a,
      #0513242b 30%,
      #05132465 60%,
      #051324fa
    );
  }
  .ep-imagery-note {
    padding: 15px;
    font-size: 10px;
  }
  .ep-mobile-facts {
    margin-top: 16px;
  }
  .ep-mobile-facts > button {
    width: 44px;
    height: 44px;
    top: 0;
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ep-page *,
  .ep-page *:before,
  .ep-page *:after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
  .ep-world-half {
    transform: none;
  }
  .ep-card {
    will-change: auto;
  }
}

.ep-hero[data-era="balanced"][data-preview-side="past"] {
  --split: 54%;
}
.ep-hero[data-era="balanced"][data-preview-side="present"] {
  --split: 46%;
}
@media (min-width: 1351px) and (max-width: 1500px) {
  .ep-facts {
    width: 115px;
  }
  .ep-facts-past {
    left: 3%;
  }
  .ep-facts-present {
    right: 3%;
  }
  .ep-facts-story {
    font-size: 10px;
  }
  .ep-facts h3 {
    font-size: 11px;
  }
}

/* Standalone/host integration: scope browser resets to the hero. */
.ep-page button,
.ep-page a {
  font-family: inherit;
}
.ep-page button {
  font-size: inherit;
  line-height: inherit;
}
.ep-page .ep-team {
  appearance: none;
  -webkit-appearance: none;
}
.ep-page .ep-team:disabled {
  opacity: 1;
  color: #fff;
  -webkit-text-fill-color: currentColor;
}
.ep-page .ep-explore {
  color: #091426;
  text-decoration: none;
}
.ep-page .ep-side-hit[hidden],
.ep-page .ep-imagery-note[hidden],
.ep-page .ep-mobile-facts[hidden] {
  display: none !important;
}
.ep-page .ep-hero {
  min-height: 790px;
  height: auto;
  max-height: none;
  overflow: clip;
  padding: 35px 0 24px;
}
.ep-hero .ep-world {
  pointer-events: none;
}
.ep-hero .ep-stage {
  user-select: none;
  -webkit-user-select: none;
  height: 490px;
}
.ep-hero .ep-viewport {
  height: 100%;
  overflow: visible;
  touch-action: pan-y pinch-zoom;
}
.ep-hero .ep-card {
  height: 456px;
  transition: none;
}
.ep-hero .ep-card-surface {
  display: flex;
  flex-direction: column;
}
.ep-hero .ep-card-header {
  flex-shrink: 0;
}
.ep-hero .ep-card-header h2 {
  white-space: nowrap;
}
.ep-hero .ep-card-bottom {
  margin-top: auto;
}
.ep-hero .ep-city {
  white-space: normal;
  line-height: 1.08;
  max-width: 100%;
  padding: 0 4px;
  min-height: 2.16em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.ep-hero .ep-city.is-long {
  font-size: 18px;
  letter-spacing: 0.15px;
}
.ep-hero .ep-teams {
  flex-shrink: 0;
}
.ep-hero .ep-interaction-hint {
  margin: 11px 0 16px;
}
.ep-hero .ep-tabs {
  margin-top: 0;
}
.ep-hero .ep-bonus {
  position: relative;
  z-index: 15;
  width: min(1080px, 86%);
  margin: 16px auto 0;
}
.ep-hero .ep-bonus .bonus__bar {
  min-height: 58px;
  padding: 10px 12px 10px 20px;
}
.ep-hero .ep-bonus .bonus__text {
  font-size: 15px;
}
.ep-hero .ep-bonus .bonus__text small {
  font-size: 11px;
  margin-top: 1px;
}
.ep-hero .ep-bonus .btn {
  min-height: 42px;
  padding: 0 20px;
  font-size: 14px;
}
.ep-hero .ep-mobile-facts a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-top: 8px;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Animate the world as one surface; the seam stays aligned during parallax. */
.ep-hero .ep-world {
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1.015);
}
.ep-hero .ep-world-half {
  transform: none;
}
.ep-hero .ep-card-surface {
  --peek: 0;
  transform: translateY(calc(var(--peek) * -10px))
    rotateY(calc(var(--peek-turn, 0) * var(--peek) * 10deg))
    scale(calc(1 + var(--peek) * 0.025));
}
.ep-hero .ep-card.is-preview .ep-card-surface {
  --peek: 1;
}
.ep-hero.ep-moving .ep-card-surface {
  --peek: 0;
}
/* Equal-size fallback positions if Embla is unavailable. No broken offscreen deck. */
.ep-hero.ep-fallback .ep-track {
  position: relative;
  transform: none !important;
}
.ep-hero.ep-fallback .ep-slide {
  position: absolute;
  left: 50%;
  width: 33.333333%;
  transform: translateX(calc(-50% + var(--slot) * 100%));
  transition: transform 380ms ease;
}
.ep-hero.ep-fallback .ep-card {
  transition:
    transform 380ms ease,
    opacity 380ms ease;
}
@media (min-width: 1550px) {
  .ep-hero .ep-stage {
    height: 516px;
  }
  .ep-hero .ep-card {
    height: 480px;
  }
  .ep-page .ep-hero {
    padding-top: 42px;
  }
}
@media (max-width: 1120px) {
  .ep-page .ep-hero {
    min-height: 760px;
    height: auto;
  }
  .ep-hero .ep-stage {
    height: 480px;
  }
  .ep-hero .ep-card {
    height: 446px;
  }
  .ep-hero .ep-city {
    font-size: 19px;
  }
  .ep-hero .ep-city.is-long {
    font-size: 16px;
  }
  .ep-hero .ep-card-header h2 {
    font-size: 14px;
    letter-spacing: 1.8px;
  }
}
/* Compress surrounding whitespace on short laptops, never the equipment or CTA. */
@media (min-width: 701px) and (max-height: 800px) {
  .ep-page .ep-hero {
    padding-top: 24px;
  }
  .ep-hero .ep-stage {
    margin-top: 14px;
  }
}
@media (max-width: 700px) {
  .ep-page .ep-hero {
    min-height: 720px;
    padding: 29px 0 20px;
  }
  .ep-hero .ep-copy {
    width: 100%;
  }
  .ep-hero .ep-copy h1 {
    font-size: clamp(32px, 8.7vw, 60px);
    letter-spacing: -1.6px;
  }
  .ep-hero .ep-subtitle {
    max-width: 330px;
  }
  .ep-hero .ep-stage {
    width: 100%;
    height: 474px;
    margin-top: 15px;
  }
  .ep-hero .ep-slide {
    flex-basis: min(78%, 340px) !important;
  }
  .ep-hero .ep-card {
    width: 100%;
    height: 438px;
  }
  .ep-hero .ep-equipment {
    height: 151px;
  }
  .ep-hero .ep-year {
    font-size: 41px;
  }
  .ep-hero .ep-city {
    font-size: 19px;
  }
  .ep-hero .ep-city.is-long {
    font-size: 17px;
  }
  .ep-hero .ep-vs {
    top: 94px;
  }
  .ep-hero .ep-card-header h2 {
    font-size: 13px;
    letter-spacing: 1.6px;
  }
  .ep-hero .ep-interaction-hint {
    margin: 0 64px 20px;
    min-height: 26px;
    font-size: 9px;
  }
  .ep-hero .ep-arrow {
    width: 44px;
    height: 44px;
    bottom: -21px;
  }
  .ep-hero .ep-arrow-left {
    left: 14px;
  }
  .ep-hero .ep-arrow-right {
    right: 14px;
  }
  .ep-hero .ep-tab {
    font-size: 9px !important;
    min-width: 0;
    padding: 8px 2px 12px !important;
  }
  .ep-hero .ep-tab:last-child span {
    white-space: normal;
    max-width: 68px;
    text-align: center;
    line-height: 1.2;
  }
  .ep-hero .ep-tab-list {
    align-items: flex-start;
    gap: 2px;
  }
  .ep-hero .ep-bonus {
    width: calc(100% - 32px);
    margin-top: 14px;
  }
  .ep-hero .ep-bonus .bonus__bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px;
  }
  .ep-hero .ep-bonus .btn {
    width: 100%;
  }
  .ep-hero .ep-mobile-facts {
    order: 3;
    margin-top: 14px;
  }
  .ep-hero.ep-fallback .ep-slide {
    width: min(78%, 340px);
  }
}
@media (max-width: 360px) {
  .ep-hero .ep-slide {
    flex-basis: 82% !important;
  }
  .ep-hero.ep-fallback .ep-slide {
    width: 82%;
  }
  .ep-hero .ep-city.is-long {
    font-size: 16px;
  }
  .ep-hero .ep-card-header {
    margin-inline: 10px;
    padding-inline: 8px;
  }
  .ep-hero .ep-tab {
    font-size: 8px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ep-hero .ep-world {
    transform: none;
  }
  .ep-hero .ep-card,
  .ep-hero .ep-card-surface,
  .ep-hero .ep-slide {
    transition: none !important;
  }
}
.ep-hero.ep-reduced .ep-world {
  transform: none;
}
.ep-hero.ep-reduced *,
.ep-hero.ep-reduced *:before,
.ep-hero.ep-reduced *:after {
  transition: none !important;
  animation: none !important;
}

/* Keep league tabs and the signup offer in view on desktop.
   JS measures the actual header, copy, tabs and offer; the deck scales as a unit.
   On phones the page scrolls naturally so type and tap targets stay usable. */
.ep-hero .ep-world {
  bottom: auto;
  height: var(--ep-scene-height, 100%);
}
@media (min-width: 1000px) {
  .ep-page .ep-hero {
    --ep-deck-height: 490px;
    min-height: 0;
    padding: 20px 0 14px;
  }
  .ep-hero .ep-copy h1 {
    font-size: clamp(48px, 5.5vw, 88px);
  }
  .ep-hero .ep-subtitle {
    margin-top: 10px;
    font-size: 15px;
  }
  .ep-hero .ep-stage {
    height: calc(var(--ep-deck-height) * var(--ep-fit, 1));
    margin-top: 12px;
  }
  .ep-hero .ep-viewport {
    height: var(--ep-deck-height);
    transform: scale(var(--ep-fit, 1));
    transform-origin: 50% 0;
  }
  .ep-hero .ep-arrow-left {
    left: calc((1 - var(--ep-fit, 1)) * 50% - 40px);
  }
  .ep-hero .ep-arrow-right {
    right: calc((1 - var(--ep-fit, 1)) * 50% - 40px);
  }
  .ep-hero .ep-interaction-hint {
    margin: 7px 0 8px;
  }
  .ep-hero .ep-bonus {
    margin-top: 10px;
  }
}
@media (min-width: 1550px) {
  .ep-page .ep-hero {
    --ep-deck-height: 516px;
  }
}
@media (min-width: 1000px) and (max-height: 800px) {
  .ep-page .ep-hero {
    padding-top: 12px;
    padding-bottom: 10px;
  }
  .ep-hero .ep-copy h1 {
    font-size: clamp(44px, 4.8vw, 68px);
  }
  .ep-hero .ep-eyebrow {
    font-size: 10px;
    margin-bottom: 7px;
  }
  .ep-hero .ep-subtitle {
    margin-top: 6px;
    font-size: 13px;
  }
  .ep-hero .ep-tab-list {
    height: 48px !important;
  }
  .ep-hero .ep-tab {
    padding-top: 4px !important;
    padding-bottom: 9px !important;
  }
  .ep-hero .ep-bonus .bonus__bar {
    min-height: 56px;
  }
}
@media (min-width: 701px) and (max-width: 1120px) {
  .ep-hero .ep-card[data-matchup="ncaa-football"] .ep-card-header h2 {
    font-size: 11px;
    letter-spacing: 1px;
  }
}