:root {
  --color-page-bg: #f3f0e8;
  --color-surface: #fffdf8;
  --color-surface-muted: #ece8dc;
  --color-surface-raised: #e4dfd1;
  --color-border: #d4cebf;
  --color-border-strong: #746f64;
  --color-ink: #101820;
  --color-ink-secondary: #4f5860;
  --color-ink-muted: #7d837f;
  --color-brand-blue: #163a63;
  --color-brand-blue-hover: #0c2948;
  --color-brand-cyan: #397b83;
  --color-brand-gold: #b07a22;
  --color-field: #234f3d;
  --color-scoreboard: #0d171d;
  --radius-sm: 3px;
  --radius-md: 6px;
  --shadow-sm: 0 1px 2px rgb(16 24 32 / 10%);
  --shadow-raised: 0 12px 28px rgb(16 24 32 / 13%);
}

body {
  background:
    linear-gradient(rgb(255 255 255 / 42%), rgb(255 255 255 / 42%)),
    repeating-linear-gradient(90deg, transparent 0 79px, rgb(16 24 32 / 1.8%) 79px 80px),
    var(--color-page-bg);
}

.site-header {
  position: relative;
  border-bottom: 4px solid var(--color-brand-gold);
  background: var(--color-scoreboard);
  box-shadow: 0 5px 18px rgb(16 24 32 / 18%);
}
.site-header::after {
  content: "";
  position: absolute;
  inset: auto 0 -4px;
  height: 1px;
  background: rgb(255 255 255 / 22%);
}
.nav { min-height: 78px; }
.brand { color: white; }
.brand:hover { color: white; }
.brand-mark {
  position: relative;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  padding: 0;
  overflow: hidden;
  color: white;
  background: var(--color-brand-blue);
  border: 2px solid rgb(255 255 255 / 72%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--color-brand-blue), inset 0 0 0 4px rgb(255 255 255 / 32%);
  font: 800 .92rem/1 var(--font-mono);
  letter-spacing: .025em;
}
.brand-mark::before,
.brand-mark::after {
  content: "";
  position: absolute;
  z-index: 0;
  background: rgb(255 255 255 / 68%);
}
.brand-mark::before { width: 2px; height: 100%; transform: rotate(28deg); }
.brand-mark::after { width: 100%; height: 2px; transform: rotate(-18deg); }
.brand-mark-text { position: relative; z-index: 1; padding: .22rem .18rem; background: var(--color-brand-blue); }
.brand-copy strong { font-size: 1.02rem; letter-spacing: .015em; text-transform: uppercase; }
.brand-copy small { color: #c9d2d8; font-size: .67rem; letter-spacing: .055em; text-transform: uppercase; }
.nav-links a { color: #e8edf0; font-weight: 650; letter-spacing: .015em; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: white; }
.nav-links a[aria-current="page"] { border-bottom-color: var(--color-brand-gold); }
.menu-button { color: white; background: transparent; border-color: #73808a; }

main { padding-top: 2.4rem; }
h1 { max-width: 18ch; font-size: clamp(2.15rem, 5vw, 3.35rem); font-weight: 750; letter-spacing: -.035em; }
h2 { letter-spacing: -.025em; }
.eyebrow { color: var(--color-brand-blue); font-weight: 800; letter-spacing: .13em; }
.rankings-hero { position: relative; max-width: 980px; padding: 1.25rem 0 1.5rem 1.4rem; border-left: 6px solid var(--color-brand-gold); }
.rankings-hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: -6px;
  width: 6px;
  height: 36%;
  background: var(--color-brand-blue);
}
.snapshot-strip { border-left: 0; border-radius: 2px; background: var(--color-scoreboard); color: #eef3f5; letter-spacing: .05em; }
.button, button { font-weight: 700; }
.button.primary, .retry { background: var(--color-brand-blue); }

.panel, .banner, .stat, .seed-card, .table-wrap, .mover-list, .mobile-rankings {
  box-shadow: 0 1px 0 rgb(255 255 255 / 70%), var(--shadow-sm);
}
.section-heading { padding-bottom: .55rem; border-bottom: 2px solid var(--color-ink); }
.section-heading .eyebrow { margin-bottom: .15rem; }
th { color: var(--color-ink); background: #e5e0d4; border-top-color: #c9c2b2; font-weight: 750; }
tbody tr:nth-child(even) { background: rgb(16 24 32 / 1.5%); }
tbody tr:hover { background: #e8e3d8; }
.badge { border-radius: 999px; }
.meta-bar { border-top: 3px solid var(--color-brand-blue); }
.preseason-meta-bar { align-items: center; padding: .65rem .85rem; }
.preseason-meta-bar .meta-details { flex: 1 1 520px; gap: .45rem; }
.preseason-meta-bar .snapshot-navigation { flex: 0 1 auto; display: block; }
.preseason-meta-bar .selectors { justify-content: flex-end; gap: .55rem; }
.preseason-meta-bar .snapshot-stepper,
.preseason-meta-bar .snapshot-timeline { display: none; }
.preseason-meta-bar select,
.preseason-meta-bar .button { min-height: 40px; padding-block: .35rem; }
.race-board { border-top: 5px solid var(--color-field); }
.race-card.field:nth-child(-n+4) { border-top-color: var(--color-brand-blue); }
.race-rank { font-size: 1.28rem; }
.why-team { border-left-width: 6px; }
.footer { border-top: 3px solid var(--color-brand-gold); }

@media (max-width: 760px) {
  .nav { min-height: 68px; }
  .brand-mark { width: 44px; height: 44px; font-size: .78rem; }
  .brand-copy strong { font-size: .88rem; }
  .brand-copy small { display: none; }
  .rankings-hero { padding-left: 1rem; }
  h1 { font-size: clamp(2rem, 10vw, 2.75rem); }
  .preseason-meta-bar { align-items: stretch; }
  .preseason-meta-bar .selectors { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
}