/*
 * Simulation Sports Network — landing page.
 *
 * Same bones as the SPL landing (brutalist editorial: hard edges, offset
 * shadows, a marquee ribbon, a live feed card, a stat-grid hero card), a
 * deliberately different voice: midnight indigo instead of forest green,
 * tall condensed poster type instead of wide stretched grotesque, and no
 * imagery belonging to any one sport.
 */

/* ── Tokens ─────────────────────────────────────────────────────────── */

:root {
  --ink: #12142a;
  --indigo: #1c2450;
  --indigo-deep: #0b0f26;
  --bone: #f7f5ef;
  --haze: #ebe7db;
  --cyan: #4fe8d8;
  --pink: #d42063;
  --pink-bright: #ff5c97;
  --rule: rgba(18, 20, 42, 0.16);
  --rule-light: rgba(247, 245, 239, 0.12);
  --muted: #4a5170;
  --muted-dark: #9aa3c8;

  --font-display: 'Anton', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --font-sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;

  --bar: 60px;
}

/* ── Reset ──────────────────────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--bar);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ico {
  flex: none;
  width: 1.05em;
  height: 1.05em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icoLg {
  width: 26px;
  height: 26px;
  stroke-width: 1.5;
}

.wrap {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding-inline: 28px;
}

/* ── Top bar ────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--bar);
  border-bottom: 1px solid var(--rule-light);
  background: var(--indigo-deep);
  color: #eef1ff;
}

.topbarInner {
  /* Equal outer tracks so the mark sits on the page's centre line rather than
     on the midpoint between two sides of unequal weight. With flex it slides
     every time either side gains a word. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
  height: 100%;
}

.barSide {
  display: flex;
  gap: 18px;
  align-items: center;
  min-width: 0;
}

.barSide--right {
  justify-content: flex-end;
}

.barCentre {
  display: flex;
  gap: 22px;
  align-items: center;
  justify-self: center;
}

.barMark {
  display: flex;
  align-items: center;
}

.barMark img {
  display: block;
  width: auto;
  /* Sized off the bar so it keeps its optical weight if --bar changes. */
  height: calc(var(--bar) - 22px);
}

.barLink {
  color: rgba(238, 241, 255, 0.72);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 150ms ease;
}

.barLink:hover {
  color: var(--cyan);
}

.barGhost,
.barSolid {
  padding: 8px 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}

.barGhost {
  border: 1px solid var(--rule-light);
  color: rgba(238, 241, 255, 0.86);
}

.barGhost:hover {
  border-color: var(--cyan);
  color: var(--cyan);
}

.barSolid {
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--indigo-deep);
}

.barSolid:hover {
  background: transparent;
  color: var(--cyan);
}

/* Narrow: the mark stays centred and the words give way first, because the
   account controls are what somebody came to the bar for. */
/* Narrow: the centre keeps its links — they are the navigation — and the
   secondary account button gives way first. */
@media (max-width: 720px) {
  .barCentre {
    gap: 14px;
  }

  .barGhost {
    display: none;
  }
}

/* ── Page shell ─────────────────────────────────────────────────────── */

.page {
  overflow-x: clip;
}

/* ── Shared type ────────────────────────────────────────────────────── */

.kicker,
.sectionLabel {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 0;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.kicker,
.introGrid .sectionLabel,
.leagueHeading .sectionLabel,
.worldHeading .sectionLabel {
  color: var(--pink);
}

.heroCopy h1,
.introGrid h2,
.leagueHeading h2,
.networkCopy h2,
.worldHeading h2,
.recordCopy h2,
.socialCopy h2,
.finalCta h2 {
  margin: 20px 0 0;
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 7.4vw, 7rem);
  font-weight: 400;
  letter-spacing: 0.005em;
  line-height: 0.87;
  text-transform: uppercase;
}

.heroCopy h1 em,
.introGrid h2 em,
.leagueHeading h2 em,
.networkCopy h2 em,
.worldHeading h2 em,
.recordCopy h2 em,
.socialCopy h2 em,
.finalCta h2 em {
  color: var(--pink);
  font-family: var(--font-serif);
  font-size: 1.06em;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

/* ── Buttons and links ──────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  gap: 11px;
  align-items: center;
  height: 52px;
  padding-inline: 26px;
  background: var(--indigo);
  color: #fff;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-transform: uppercase;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: background 160ms ease, transform 160ms ease, color 160ms ease;
}

.btn:hover {
  background: var(--pink);
  transform: translateY(-2px);
}

.btnLg {
  height: 62px;
  padding-inline: 34px;
  font-size: 0.92rem;
}

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: calc(100dvh - var(--bar));
  overflow: hidden;
  background: var(--haze);
}

.hero::before {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(18, 20, 42, 0.07) 0 1px,
    transparent 1px 9px
  );
  content: '';
}

/* Concentric signal rings — the network's own motif, in place of SPL's orb. */
.heroRings {
  position: absolute;
  top: -18vw;
  right: -14vw;
  width: 58vw;
  min-width: 640px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--indigo);
}

.heroRings::before,
.heroRings::after {
  position: absolute;
  border: 1px solid rgba(79, 232, 216, 0.22);
  border-radius: 50%;
  content: '';
}

.heroRings::before {
  inset: 9%;
}

.heroRings::after {
  inset: 22%;
  border-color: rgba(255, 92, 151, 0.28);
}

.heroInner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
  min-height: calc(100dvh - var(--bar));
  padding-block: 72px;
}

.heroText {
  max-width: 540px;
  margin: 30px 0 0;
  font-size: 1.1rem;
  line-height: 1.66;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  margin-top: 36px;
}

.heroNote {
  display: flex;
  gap: 9px;
  align-items: center;
  margin: 40px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.heroNote .ico {
  color: var(--pink);
}

.heroVisual {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 460px;
  margin-left: auto;
  transform: rotate(-2deg);
}

.visualLabel,
.boardWrap > p {
  margin: 0 0 11px;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  letter-spacing: 0.12em;
}

.visualLabel {
  display: inline-block;
  padding: 4px 9px;
  background: var(--indigo);
  color: var(--cyan);
}

/* ── The hero card ──────────────────────────────────────────────────── */

.passCard {
  border: 1px solid var(--rule);
  background: var(--bone);
}

.passCard {
  border-top: 4px solid var(--cyan);
  box-shadow: 22px 26px 0 var(--indigo);
}

.cardTop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 18px;
  border-bottom: 1px solid var(--rule);
}

.pill {
  padding: 5px 9px;
  background: var(--pink);
  color: #fff;
  font-size: 0.63rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.cardMono {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.67rem;
}

.passIdentity {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 30px 24px;
}

.passMark {
  position: relative;
  display: grid;
  width: 86px;
  height: 86px;
  place-items: center;
  background: var(--indigo);
  color: var(--cyan);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.passMark .ico {
  width: 34px;
  height: 34px;
}

.passMark span {
  position: absolute;
  bottom: 10px;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
}

.passIdentity p {
  margin: 0 0 6px;
  color: var(--pink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.passIdentity h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.72rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.passIdentity > div > span {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.8rem;
}

.passNumbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.passNumbers div {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 18px 8px;
  text-align: center;
}

.passNumbers div + div {
  border-left: 1px solid var(--rule);
}

.passNumbers strong {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 400;
}

.passNumbers span,
.passFooter span {
  color: var(--muted);
  font-size: 0.66rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.passFooter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 22px;
}

.passFooter div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.passFooter strong {
  font-size: 0.84rem;
  font-weight: 600;
}

.passFooter .ico {
  color: var(--pink);
}

/* Stickers */

.sticker {
  position: absolute;
  display: grid;
  width: 112px;
  height: 112px;
  place-items: center;
  align-content: center;
  border-radius: 50%;
  text-align: center;
}

.sticker strong {
  font-family: var(--font-display);
  font-size: 2.1rem;
  font-weight: 400;
  line-height: 1;
}

.sticker span {
  max-width: 76px;
  font-size: 0.62rem;
  line-height: 1.25;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.stickerCyan {
  right: -44px;
  bottom: -52px;
  background: var(--cyan);
  color: var(--indigo-deep);
  transform: rotate(-9deg);
}

/* ── Ribbon ─────────────────────────────────────────────────────────── */

.ribbon {
  position: relative;
  z-index: 3;
  overflow: hidden;
  padding: 16px 0;
  border-block: 1px solid var(--ink);
  background: var(--cyan);
  transform: rotate(-1.2deg) scale(1.03);
}

.ribbonTrack {
  display: flex;
  gap: 26px;
  width: max-content;
  color: var(--indigo-deep);
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  white-space: nowrap;
  animation: marquee 34s linear infinite;
}

.ribbonTrack b {
  color: var(--pink);
}

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

/* ── Intro ──────────────────────────────────────────────────────────── */

.intro {
  padding: 140px 0 70px;
}

.introNumber {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.introGrid {
  display: grid;
  grid-template-columns: 0.35fr 1.65fr;
  gap: 40px;
  padding-top: 34px;
}

.introGrid h2 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(3rem, 6.2vw, 5.6rem);
}

.introGrid > div > p {
  max-width: 600px;
  margin: 30px 0 0;
  font-size: 1.04rem;
  line-height: 1.72;
}

/* ── Chapters ───────────────────────────────────────────────────────── */

.chapterSection {
  padding: 30px 0 130px;
}

.chapterGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.chapter {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  min-height: 268px;
  padding: 30px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  transition: background 180ms ease, color 180ms ease;
}

.chapter:hover {
  background: var(--indigo);
  color: #fff;
}

.chapter:hover > span {
  color: var(--cyan);
}

.chapter > span {
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.chapter h3 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.chapter p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.66;
}

.chapter small {
  display: block;
  margin-top: 34px;
  padding-top: 14px;
  border-top: 1px solid currentColor;
  opacity: 0.62;
  font-size: 0.73rem;
  line-height: 1.5;
}

/* ── Leagues ────────────────────────────────────────────────────────── */

.leagueSection {
  padding: 130px 0;
  border-block: 1px solid var(--rule);
  background: var(--haze);
}

.leagueHeading > div {
  display: flex;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.leagueHeading > div > span {
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.leagueHeading h2 {
  max-width: 900px;
  font-size: clamp(3rem, 5.9vw, 5.5rem);
}

.leagueHeading > p {
  max-width: 620px;
  margin: 28px 0 0;
  color: #333a5c;
  line-height: 1.72;
}

.leagueGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.leagueCard {
  display: flex;
  flex-direction: column;
  min-height: 380px;
  padding: 28px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
  transition: background 180ms ease, transform 180ms ease;
}

.leagueCard.is-live {
  grid-column: span 2;
}

.leagueCard.is-live:hover {
  background: #fff;
  transform: translateY(-3px);
}

.is-live h3 {
  font-size: 2.15rem;
}

.is-live .leagueText {
  max-width: 54ch;
  font-size: 0.95rem;
}

.is-live .leagueFacts {
  grid-template-columns: repeat(3, 1fr);
}

/* An empty slot. Deliberately holds nothing but its number. */
.leagueCard.is-soon {
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  background: transparent;
  text-align: center;
}

.leagueCard.is-soon::before {
  position: absolute;
  inset: 14px;
  border: 1px dashed rgba(18, 20, 42, 0.26);
  pointer-events: none;
  content: '';
}

.soonMark {
  position: relative;
  display: grid;
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  place-items: center;
  color: rgba(18, 20, 42, 0.3);
  border: 1px solid rgba(18, 20, 42, 0.2);
  border-radius: 50%;
}

.soonMark .ico {
  width: 20px;
  height: 20px;
}

.is-soon .leagueSport,
.is-soon h3 {
  position: relative;
}

.is-soon .leagueSport {
  color: var(--muted);
  font-family: var(--font-mono);
  font-weight: 400;
}

.is-soon h3 {
  margin: 0;
  color: rgba(18, 20, 42, 0.42);
  font-size: 1.35rem;
}

.leagueTop {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 34px;
}

.leagueMark {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  background: var(--indigo);
  color: var(--cyan);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.leagueMark .ico {
  width: 26px;
  height: 26px;
}

.statusChip {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.statusChip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-live {
  background: var(--pink);
  color: #fff;
}

.status-live i {
  animation: pulse 1.6s ease-in-out infinite;
}

.leagueSport {
  margin: 0 0 8px;
  color: var(--pink);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.leagueCard h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: uppercase;
}

.leagueText {
  flex: 1;
  margin: 0;
  color: #3d4468;
  font-size: 0.88rem;
  line-height: 1.66;
}

/* The grid is two columns, so every odd item *starts* a row — and a rule down
   its left edge is a divider between nothing and the margin. `div + div` cannot
   see that; it only knows the item is not the first. Rows after the first get a
   rule above instead, which is the divider actually wanted there. */
.leagueFacts div:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
}

.leagueLink {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding-top: 20px;
  color: var(--pink);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  word-break: break-word;
}

.leagueLink:hover {
  text-decoration: underline;
}

.networkCopy h2,
.recordCopy h2,
.socialCopy h2 {
  font-size: clamp(3.1rem, 5.7vw, 5.4rem);
}

.networkCopy > p:not(.sectionLabel),
.socialCopy > p:not(.sectionLabel),
.recordCopy > p:not(.sectionLabel) {
  margin: 28px 0 0;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.72;
}

.networkCopy li .ico,
.socialCopy li .ico {
  width: 18px;
  height: 18px;
}

.networkCopy li .ico,
.socialCopy li .ico {
  color: var(--cyan);
}

.networkCopy .sectionLabel,
.socialCopy .sectionLabel {
  color: var(--cyan);
}

.board {
  overflow: hidden;
  border: 1px solid var(--rule-light);
  background: var(--indigo-deep);
  box-shadow: 18px 20px 0 var(--cyan);
}

@keyframes slide-in {
  from {
    opacity: 0;
    transform: translateY(-7px);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* ── Features ───────────────────────────────────────────────────────── */

.worldSection {
  padding: 140px 0;
}

.worldHeading > div {
  display: flex;
  gap: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}

.worldHeading > div > span {
  color: var(--pink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

.worldHeading h2 {
  max-width: 940px;
  font-size: clamp(3rem, 5.7vw, 5.4rem);
}

.worldGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 68px;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.worldCard {
  min-height: 248px;
  padding: 27px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.worldCard > div {
  display: flex;
  justify-content: space-between;
  color: var(--pink);
}

.worldCard > div span {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

.worldCard h3 {
  margin: 48px 0 12px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.worldCard p {
  margin: 0;
  color: #3d4468;
  font-size: 0.86rem;
  line-height: 1.66;
}

/* ── Record ─────────────────────────────────────────────────────────── */

.recordSection {
  padding: 130px 0;
  background: var(--pink);
  color: #fff;
}

.recordLayout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 90px;
  align-items: center;
}

.recordArt {
  position: relative;
  display: grid;
  min-height: 470px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: var(--cyan);
  color: var(--indigo);
  transform: rotate(-3deg);
}

.recordArt span {
  position: absolute;
  top: 24px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
}

.recordGlyph {
  width: 172px;
  height: 172px;
  fill: none;
  stroke: currentColor;
  stroke-width: 0.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.recordArt b {
  position: absolute;
  right: 20px;
  bottom: -8px;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: 8rem;
  font-weight: 400;
  line-height: 0.8;
}

.recordCopy .sectionLabel {
  color: rgba(255, 255, 255, 0.85);
}

.recordCopy h2 em {
  color: var(--cyan);
}

.honours {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 34px;
}

.honours span {
  padding: 13px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

/* ── Final CTA ──────────────────────────────────────────────────────── */

.finalCta {
  padding: 148px 0;
  background: var(--haze);
  text-align: center;
}

.ctaMark {
  display: grid;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  place-items: center;
  background: var(--cyan);
  color: var(--indigo-deep);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}

.finalCta > div > p {
  margin: 0;
  font-size: 0.71rem;
  font-weight: 700;
  letter-spacing: 0.2em;
}

.finalCta h2 {
  margin: 24px auto 42px;
  font-size: clamp(3.4rem, 7vw, 7rem);
}

.ctaNotes {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 32px;
  justify-content: center;
  margin-top: 38px;
}

.ctaNotes span {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ctaNotes .ico {
  color: var(--pink);
}

/* ── Footer ─────────────────────────────────────────────────────────── */

.footer {
  padding: 30px 0;
  background: var(--indigo-deep);
  color: #fff;
}

.footerInner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
}

.footerInner > strong {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footerLinks {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  justify-content: center;
}

.footerInner a,
.footerInner > span {
  color: rgba(238, 241, 255, 0.66);
  font-size: 0.72rem;
  text-decoration: none;
}

.footerInner a:hover {
  color: var(--cyan);
}

.footerInner > span {
  text-align: right;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 68em) {
  .leagueGrid,
  .worldGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 62em) {
  .heroRings {
    top: 26%;
    right: -42%;
  }

  .heroInner,
  .networkLayout,
  .recordLayout,
  .socialLayout {
    grid-template-columns: 1fr;
  }

  .heroInner {
    padding-top: 76px;
    padding-bottom: 116px;
  }

  .heroVisual {
    max-width: 540px;
    margin: 30px auto 0;
  }

  .introGrid {
    grid-template-columns: 1fr;
  }

  .recordArt {
    width: 100%;
    max-width: 540px;
  }
}

@media (max-width: 40em) {
  .wrap {
    padding-inline: 20px;
  }

  /* The bar's own controls, at the width where they start to crowd. The mark
     itself needs nothing — it is an image sized off --bar. */
  .barSolid {
    padding: 8px 11px;
    font-size: 0.64rem;
  }

  .heroCopy h1 {
    font-size: clamp(3.2rem, 15vw, 4.6rem);
  }

  /* Clear the hero copy entirely and sit behind the passport card — at this
     width the note wraps full-bleed and was running onto the navy. */
  .heroRings {
    top: 66%;
    right: -100%;
  }

  .heroVisual {
    transform: none;
  }

  .passCard {
    box-shadow: 10px 12px 0 var(--indigo);
  }

  .board {
    box-shadow: 10px 12px 0 var(--cyan);
  }

  .stickerCyan {
    right: -8px;
    bottom: -74px;
    width: 92px;
    height: 92px;
  }

  .passIdentity {
    padding: 24px 18px;
  }

  .passMark {
    width: 66px;
    height: 66px;
  }

  .passIdentity h2 {
    font-size: 1.34rem;
  }

  .passNumbers strong {
    font-size: 1.1rem;
  }

  .chapterGrid,
  .leagueGrid,
  .worldGrid {
    grid-template-columns: 1fr;
  }

  .leagueCard.is-live {
    grid-column: auto;
  }

  .is-live h3 {
    font-size: 1.7rem;
  }

  .leagueCard.is-soon {
    min-height: 220px;
  }

  .chapter {
    min-height: 0;
    padding: 24px 18px;
  }

  .leagueCard {
    min-height: 0;
  }

  .intro,
  .worldSection {
    padding-top: 96px;
  }

  .networkSection,
  .leagueSection,
  .recordSection,
  .finalCta {
    padding-block: 88px;
  }

  .recordArt {
    min-height: 350px;
  }

  .recordArt b {
    font-size: 5.6rem;
  }

  .footerInner {
    grid-template-columns: 1fr;
  }

  .footerLinks {
    justify-content: flex-start;
  }

  .footerInner > span {
    text-align: left;
  }
}

/* ── Motion and focus ───────────────────────────────────────────────── */

:where(a, button):focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 3px;
}

.networkSection :where(a):focus-visible,
.socialSection :where(a):focus-visible,
.topbar :where(a):focus-visible {
  outline-color: var(--cyan);
}

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

  .ribbonTrack,
  .stripTrack,
  .liveDot,
  .status-live i,
  .feedLine {
    animation: none;
  }

  .btn,
  .chapter,
  .leagueCard {
    transition: none;
  }
}

/* ── Leagues page ───────────────────────────────────────────────────── */

.leaguesHero {
  padding: 84px 0 44px;
  border-bottom: 1px solid var(--rule);
  background: var(--bone);
}

.leaguesHero h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.leaguesHero h1 em {
  color: var(--pink);
  font-family: var(--font-serif);
  font-style: italic;
  text-transform: none;
}

.leaguesHeroText {
  max-width: 46ch;
  margin: 18px 0 0;
  color: var(--muted);
}

.leagueDetail {
  padding: 54px 0 76px;
  background: var(--bone);
}

.leagueEntry {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: start;
  padding: 30px;
  border: 1px solid var(--rule);
  background: #fff;
  box-shadow: 10px 10px 0 var(--ink);
}

.leagueEntryCopy h2 {
  margin: 6px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1.02;
  text-transform: uppercase;
}

.leagueEntryCopy .leagueFacts {
  margin-top: 22px;
}

.leagueActions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.leagueGo {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  padding: 13px 20px;
  background: var(--ink);
  color: var(--bone);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 150ms ease;
}

.leagueGo:hover {
  background: var(--pink);
}

.leagueSecondary {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.leagueSecondary:hover {
  color: var(--ink);
}

/* The preview is a link, not a frame: an iframe of another origin costs a whole
   page load on every visit and disappears the day that site sends
   X-Frame-Options. A screenshot is honest about being a picture. */
.leaguePreview {
  display: block;
  position: relative;
  border: 1px solid var(--rule);
  text-decoration: none;
  transition: transform 160ms ease;
}

.leaguePreview:hover {
  transform: translateY(-3px);
}

.leaguePreview img {
  display: block;
  width: 100%;
  height: auto;
}

.leaguePreviewBar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  border-top: 1px solid var(--rule);
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.leagueSoonRow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

@media (max-width: 62em) {
  .leagueEntry {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .leagueSoonRow {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 40em) {
  .leagueEntry {
    padding: 20px;
    box-shadow: 6px 6px 0 var(--ink);
  }
}

/* ── Account pages ──────────────────────────────────────────────────── */

.authPage {
  min-height: calc(100vh - var(--bar));
  background: var(--bone);
}

.authWrap {
  display: flex;
  justify-content: center;
  padding: 68px 0 96px;
}

.authCard {
  width: min(440px, 100%);
  padding: 34px;
  border: 1px solid var(--rule);
  background: #fff;
  box-shadow: 10px 10px 0 var(--ink);
}

.authCard h1 {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-size: 2.6rem;
  line-height: 1;
  text-transform: uppercase;
}

.authLead {
  margin: 12px 0 26px;
  color: var(--muted);
  font-size: 0.92rem;
}

.authForm {
  display: grid;
  gap: 18px;
}

.authField {
  display: grid;
  gap: 7px;
}

.authField span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.authField input {
  padding: 12px 13px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.95rem;
}

.authField input:focus-visible {
  outline: 2px solid var(--pink);
  outline-offset: 1px;
}

.authCheck {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.authCheck input {
  margin-top: 3px;
  accent-color: var(--pink);
}

/* Empty until something has happened, so it must not hold a line of space —
   `aria-live` still announces it when it fills. */
.authStatus:empty {
  display: none;
}

.authStatus {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.85rem;
}

.authStatus.is-error {
  background: #ffe0ea;
  color: #a3164a;
}

.authStatus.is-ok {
  background: #ddf7f2;
  color: #12705f;
}

.authSubmit {
  padding: 14px 18px;
  border: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms ease;
}

.authSubmit:hover:not(:disabled) {
  background: var(--pink);
}

.authSubmit:disabled {
  opacity: 0.55;
  cursor: progress;
}

.authAlt {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 0.85rem;
}

/* Without this the link falls back to the browser's blue, which is the one
   colour on the page that belongs to no palette. */
.authAlt a {
  color: var(--ink);
  font-weight: 600;
  text-underline-offset: 3px;
}

.authAlt a:hover {
  color: var(--pink);
}

@media (max-width: 40em) {
  .authCard {
    padding: 24px;
    box-shadow: 6px 6px 0 var(--ink);
  }
}

/* ── The bar's account control ──────────────────────────────────────── */

.barAccount {
  position: relative;
}

.barAccountButton {
  display: flex;
  gap: 9px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid transparent;
  background: none;
  color: rgba(238, 241, 255, 0.9);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
}

.barAccountButton:hover {
  border-color: var(--rule-light);
}

.barAvatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cyan);
  color: var(--indigo-deep);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.barChevron {
  font-size: 0.7rem;
  opacity: 0.7;
}

.barMenu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 200px;
  border: 1px solid var(--rule);
  background: #fff;
  box-shadow: 6px 6px 0 var(--ink);
}

.barMenu[hidden] {
  display: none;
}

.barMenuWho {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 700;
}

.barMenu a,
.barMenu button {
  padding: 11px 14px;
  border: 0;
  background: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.82rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.barMenu a:hover,
.barMenu button:hover {
  background: var(--haze);
}

.barMenu [data-signout] {
  border-top: 1px solid var(--rule);
  color: var(--pink);
  font-weight: 600;
}

@media (max-width: 720px) {
  .barAccountName {
    display: none;
  }
}

/* The profile card is wider than the sign-in one: it holds an editor rather
   than two fields. */
.profileCard {
  width: min(620px, 100%);
}