/* ============================================================
   ADAMS SILVERS HOUSE OF GOLD — Design System
   Dynasty basketball. Regal, restrained, hardwood-and-heraldry.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;0,6..72,700;1,6..72,300;1,6..72,400;1,6..72,500;1,6..72,700&family=Manrope:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* Color tokens */
  --obsidian:        #0B0B0D;   /* primary background */
  --obsidian-raised:  #17161B;   /* card / surface */
  --obsidian-line:    #232128;   /* subtle structural border */
  --gold:             #C9A227;   /* primary accent — antique gold */
  --gold-bright:       #E8C878;  /* foil highlight / hover / active */
  --wine:              #5C1A2B;  /* secondary accent — royal burgundy */
  --wine-bright:       #7A2438;
  --ivory:             #EDE6D6;  /* primary text on dark */
  --ivory-dim:         #9C9384;  /* secondary / muted text */
  --hairline:          rgba(201, 162, 39, 0.25);

  /* Type — Newsreader display / Manrope body / JetBrains Mono utility.
     Chosen for editorial personality without landing on the current
     "designer starter pack" (Fraunces / Inter / Plex Mono). */
  --font-display: 'Newsreader', Georgia, serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', monospace;

  /* Layout */
  --nav-height: 156px;
  --container-max: 1160px;
  --radius: 3px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--obsidian);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;             /* body reading rhythm */
  letter-spacing: 0;              /* body never touched */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle hardwood/vignette texture — restrained, not decorative for its own sake */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 1200px 700px at 50% -10%, rgba(201,162,39,0.06), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.012) 0px, rgba(255,255,255,0.012) 1px, transparent 1px, transparent 3px);
}

a { color: inherit; text-decoration: none; }

/* ============================================================
   TYPE SCALE — every headline snaps to a tier. Line height is
   inversely proportional to size; tracking pulls in on large
   display and opens up on small all-caps. Optical-size axis is
   respected across the range.
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ivory);
  margin: 0;
}

/* Display / hero — one per page, italic 300, dense */
.type-display, .display {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(64px, 9vw, 128px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

/* H1 — page titles */
h1 {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 400;
  font-size: clamp(44px, 5.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

/* H2 — major section titles */
h2 {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: clamp(30px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* H3 — subsection / card cluster titles */
h3 {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 24;
  font-weight: 500;
  font-size: clamp(20px, 2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

/* H4 — card titles (can be Newsreader OR Manrope bold, per component) */
h4 {
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 18;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.005em;
}

/* H5 — micro / sidebar headline */
h5 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.35;
  letter-spacing: 0;
}

/* Lede — the paragraph directly under a headline */
.lede, .lead-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ivory);
  letter-spacing: 0;
}

/* Body-small — captions, meta lines, sidebar copy */
.body-sm, small {
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: var(--ivory);
}

/* Eyebrow / kicker — the amateur-fix: all-caps ALWAYS get generous tracking */
.eyebrow, .kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.4;
}

/* Data / stat — tabular monospaced numerals */
.stat-number, .data {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.15;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
}

/* Buttons — three treatments, never mixed in one region */
.btn, button, .button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.btn-mono, .btn-utility {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================
   NAVIGATION — clean bar, burger-only, left-side slide-in drawer
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background: rgba(11, 11, 13, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
  padding-left: 20px;
  /* Promote to own compositor layer — prevents backdrop-filter flicker
     on scroll in Safari/Chrome (a well-documented rendering issue) */
  transform: translateZ(0);
  will-change: transform;
  contain: paint;
}

.site-nav .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 20px;
}

.nav-right {
  display: flex;
  align-items: center;
  padding-right: 28px;
}
.nav-corner-badge {
  height: 108px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 16px rgba(201,162,39,0.4));
}
@media (max-width: 640px) {
  .nav-right { padding-right: 16px; }
  .nav-corner-badge { height: 72px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-wordmark {
  height: 126px;
  width: auto;
  display: block;
}

.brand-seal {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: block;
}

.brand-word {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ivory);
}

.brand-word span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--gold);
  font-weight: 500;
  margin-top: 2px;
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--gold);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Scrim behind the drawer */
.nav-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.nav-scrim.open {
  opacity: 1;
  pointer-events: auto;
}

/* Left slide-in drawer */
.nav-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(300px, 82vw);
  background: var(--obsidian-raised);
  border-right: 1px solid var(--hairline);
  z-index: 151;
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
}

.nav-drawer-mark {
  margin-top: auto;
  padding: 12px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.05) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.05) 100%);
  pointer-events: none;
  overflow: visible;
}
.nav-drawer-mark img {
  width: 340px;
  max-width: 110%;
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 8px 24px rgba(201, 162, 39, 0.25));
  margin-left: -10%;
}
.nav-drawer.open {
  transform: translateX(0);
}

.nav-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--obsidian-line);
}

.nav-close {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

.nav-drawer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.nav-drawer-links a {
  display: block;
  padding: 14px 8px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ivory-dim);
  border-bottom: 1px solid var(--obsidian-line);
  transition: color 0.2s ease;
}

.nav-drawer-links a:hover {
  color: var(--gold-bright);
}

.nav-drawer-links a.active {
  color: var(--gold);
}

.nav-item-expandable {
  border-bottom: 1px solid var(--obsidian-line);
}
.nav-item-expandable .nav-drawer-links a,
.nav-expand-toggle {
  border-bottom: none;
}

.nav-expand-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ivory-dim);
  text-align: left;
}
.nav-expand-toggle:hover { color: var(--gold-bright); }

.nav-expand-toggle .chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.nav-expand-toggle[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.nav-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.nav-submenu.open {
  max-height: 600px;
}
.nav-submenu li a {
  display: block;
  padding: 10px 8px 10px 22px;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ivory-dim);
  border-bottom: none;
}
.nav-submenu li a:hover { color: var(--team-hover, var(--gold-bright)); }
.nav-submenu li a.active { color: var(--team-hover, var(--gold)); }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-scrim, .nav-toggle span { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  position: relative;
  padding: 120px 0 90px;
  text-align: center;
  overflow: hidden;
}

.hero-seal {
  width: 92px;
  height: 92px;
  margin: 0 auto 28px;
  animation: seal-press 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

.hero-badge {
  display: block;
  width: clamp(200px, 30vw, 320px);
  height: auto;
  margin: 0 auto 32px;
  animation: seal-press 0.9s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  filter: drop-shadow(0 20px 60px rgba(201, 162, 39, 0.35));
}

.hero .eyebrow {
  display: block;
  margin-bottom: 18px;
}

.hero h1 {
  font-size: clamp(2.6rem, 6vw, 4.6rem);
  font-weight: 700;
  line-height: 1.03;
  color: var(--ivory);
}

.hero h1 em {
  font-style: normal;
  color: var(--gold);
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-bright) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero p.sub {
  max-width: 560px;
  margin: 22px auto 0;
  color: var(--ivory-dim);
  font-size: 1.05rem;
}

@keyframes seal-press {
  0%   { opacity: 0; transform: scale(1.5) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(0.94) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-seal { animation: none; }
}

/* ============================================================
   SECTIONS / CARDS / DIVIDERS
   ============================================================ */

.section {
  padding: 64px 0;
  border-top: 1px solid var(--obsidian-line);
}

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  gap: 16px;
  flex-wrap: wrap;
}

.section-head h2 {
  font-size: 1.6rem;
}

.seal-divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0 32px;
  color: var(--ivory-dim);
}
.seal-divider::before, .seal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--hairline);
}
.seal-divider svg { width: 16px; height: 16px; flex-shrink: 0; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.card:hover {
  border-color: var(--hairline);
  transform: translateY(-2px);
}

.card .label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

.card .value {
  font-family: var(--font-mono);
  font-size: 1.9rem;
  color: var(--gold-bright);
  margin-top: 8px;
}

.card h3 {
  font-size: 1.15rem;
  margin-top: 6px;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: 1px solid var(--obsidian-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-strip .stat {
  flex: 1 1 160px;
  padding: 20px 24px;
  border-right: 1px solid var(--obsidian-line);
}
.stat-strip .stat:last-child { border-right: none; }
.stat .label { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-dim); }
.stat .value { font-family: var(--font-mono); font-size: 1.6rem; color: var(--gold); margin-top: 6px; }

.btn {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: background 0.2s ease, color 0.2s ease;
}
.btn:hover {
  background: var(--gold);
  color: var(--obsidian);
}

.btn-quiet {
  border-color: var(--obsidian-line);
  color: var(--ivory-dim);
}
.btn-quiet:hover {
  background: var(--obsidian-line);
  color: var(--ivory);
}

.empty-state {
  border: 1px dashed var(--obsidian-line);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  color: var(--ivory-dim);
  font-size: 0.92rem;
}
.empty-state code {
  font-family: var(--font-mono);
  color: var(--gold);
  background: rgba(201,162,39,0.08);
  padding: 2px 6px;
  border-radius: 2px;
}

footer.site-footer {
  border-top: 1px solid var(--obsidian-line);
  padding: 32px 0;
  color: var(--ivory-dim);
  font-size: 0.82rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

/* focus visibility */
a:focus-visible, button:focus-visible {
  outline: 1px solid var(--gold-bright);
  outline-offset: 2px;
}

/* ============================================================
   TEAM PAGE — bleed hero, trophy badges, uniform gallery,
   season-by-season history timeline
   ============================================================ */

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
}
.breadcrumb a { color: var(--gold); }
.breadcrumb a:hover { color: var(--gold-bright); }

.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;
}

.team-hero {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(ellipse 900px 500px at 30% 0%, color-mix(in srgb, var(--team-primary, var(--gold)) 22%, transparent), transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--team-primary, var(--obsidian-raised)) 12%, var(--obsidian-raised)) 0%, var(--obsidian) 100%);
  border-bottom: 1px solid var(--obsidian-line);
}

.team-hero .bleed-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.15) 100%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 55%, rgba(0,0,0,0.15) 100%);
}

/* Text-readability scrim behind the h1 area — soft, only affects left side */
.team-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 45%, transparent 70%);
  pointer-events: none;
}

.team-hero-inner {
  position: relative;
  z-index: 2;
  padding: 48px 0 40px;
  width: 100%;
  min-height: 100%;
}

.team-hero-text {
  max-width: 46%;
  position: relative;
  z-index: 3;
}

.team-meta {
  color: var(--ivory-dim);
  font-size: 0.92rem;
  margin-top: 10px;
}
.team-meta span:not(:last-child)::after {
  content: '·';
  margin: 0 10px;
  color: var(--hairline);
}

.stat-strip-link {
  display: block;
  border-radius: var(--radius);
  transition: transform 0.15s ease;
}
.stat-strip-link:hover { transform: translateY(-2px); }
.stat-strip-link:hover .stat-strip { border-color: var(--gold); }
.stat-strip-link .stat-strip { transition: border-color 0.2s ease; }

/* Big display galleries — jerseys, banners, trophies. No card chrome;
   the artwork (transparent PNGs) is the whole point, just bigger. */
.display-gallery {
  display: grid;
  gap: 32px;
}
.display-gallery.jerseys-2x2 {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .display-gallery.jerseys-2x2 { grid-template-columns: 1fr; }
}
/* Trophy Room — chronological timeline, most recent year first.
   Each year that had a win gets one row. Trophies and banners
   inside the row share the same card shape as the jersey grid. */
.trophy-timeline {
  display: flex;
  flex-direction: column;
}
.trophy-year-row {
  padding: 28px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.trophy-year-row:last-child { border-bottom: none; }
.trophy-year-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--team-primary, var(--gold));
  margin-bottom: 20px;
}
.trophy-year-items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) {
  .trophy-year-items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .trophy-year-items { grid-template-columns: repeat(2, 1fr); }
}
.trophy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.trophy-item .trophy-item-img-box {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.trophy-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.trophy-item .trophy-item-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.trophy-item .trophy-item-player {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ivory);
  font-weight: 500;
}
.trophy-item .trophy-item-year {
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--ivory-dim);
}

.display-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.display-item .display-img-box {
  width: 100%;
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.display-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.display-gallery.jerseys-2x2 .display-img-box {
  overflow: visible;
}
.display-gallery.jerseys-2x2 .display-img-box img {
  transform: scale(1.0);
}
.trophy-item .trophy-item-img-box img {
  transform: scale(1.15);
}
.display-item .display-label {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.display-item .display-sublabel {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--ivory-dim);
}
.display-item.pending .display-img-box {
  border: 1px dashed var(--obsidian-line);
  border-radius: var(--radius);
  background: var(--obsidian-raised);
}
.display-item.pending .display-label,
.display-item.pending .display-sublabel {
  color: var(--ivory-dim);
  opacity: 0.6;
}
.display-item.filler {
  visibility: hidden;
}

.season-timeline {
  max-width: 1200px;
}
.season-card {
  border-left: 2px solid var(--hairline);
  padding: 2px 0 2px 24px;
  margin-bottom: 30px;
  position: relative;
}
.season-card::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--obsidian);
}
.season-card.season-card-champ {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.season-card.season-card-champ .season-recap { min-width: 0; }
.season-card .season-banner {
  width: 355px;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  align-self: center;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}
@media (max-width: 640px) {
  .season-card.season-card-champ {
    grid-template-columns: 1fr;
  }
  .season-card .season-banner {
    justify-self: start;
    width: 260px;
  }
}
.season-card::before {
  z-index: 2;
}
.season-card .season-tag {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}
.season-card .finish {
  color: var(--ivory-dim);
  font-size: 0.85rem;
  margin-top: 2px;
}
.season-card h3 {
  margin-top: 8px;
  font-size: 1.2rem;
}
.season-card p {
  margin-top: 10px;
  color: var(--ivory-dim);
  line-height: 1.75;
  max-width: 640px;
}

.outlook-block {
  border-left: 2px solid var(--gold);
  padding-left: 24px;
  max-width: 700px;
  color: var(--ivory-dim);
  line-height: 1.8;
  font-size: 1.02rem;
}

/* ============================================================
   HALL OF GOLD — Champions Wall
   ============================================================ */
.champion-year {
  border-bottom: 1px solid var(--obsidian-line);
  padding: 48px 0;
}
.champion-year:first-child { padding-top: 0; }
.champion-year:last-child { border-bottom: none; }

.champion-year-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.4rem;
  margin-bottom: 20px;
}
.champion-year {
  padding: 40px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.champion-year:last-child { border-bottom: none; }
.champion-year-tag {
  font-family: var(--font-display);
  font-size: 1.8rem;
  margin-bottom: 24px;
}
.champion-year-body {
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 48px;
  align-items: center;
  margin-bottom: 36px;
}
@media (max-width: 960px) {
  .champion-year-body {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.champion-banner-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.champion-banner {
  width: 100%;
  max-width: 460px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 14px 48px rgba(0,0,0,0.55));
}
.champion-meta h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.award-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .award-row { grid-template-columns: 1fr; gap: 24px; }
}
.award-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.award-item-img-box {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 2 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.award-item-img-box img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.35));
}
.award-item-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 4px;
}
.award-item-winner {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ivory);
}
.award-item-team {
  margin-top: 2px;
  font-size: 0.88rem;
}

/* GM of the Year highlight — spotlight the winning GM's draft class at the top */
.gmoy-highlight {
  border: 1px solid var(--gold);
  border-left-width: 3px;
  border-radius: 4px;
  padding: 24px 28px;
  margin-top: 20px;
  margin-bottom: 24px;
  background: rgba(201, 162, 39, 0.04);
}
.gmoy-header {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}
.gmoy-trophy {
  width: 80px;
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 20px rgba(201, 162, 39, 0.3));
}
.gmoy-winner {
  font-size: 1.4rem;
  margin: 4px 0 4px;
}
.gmoy-team {
  font-size: 0.95rem;
}
.gmoy-picks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.gmoy-pick {
  padding: 14px 16px;
  border: 1px solid var(--obsidian-line);
  border-radius: 3px;
  background: var(--obsidian);
}
.gmoy-pick-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.gmoy-pick-player {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.05rem;
}
.gmoy-pick-note {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  margin-top: 4px;
}

/* Rookie of the Year — gentle gold tint on the pick row */
.gmoy-pick-roy {
  border-color: var(--gold);
  background: rgba(201,162,39,0.10);
}
.gmoy-pick-roy-note {
  color: var(--gold-bright);
  font-weight: 500;
}
.roy-row td:first-child {
  border-left: 2px solid var(--gold);
}

.court-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  filter: saturate(0.6);
}

/* ============================================================
   Team page Draft section — Upcoming Capital + Past Draft Classes
   ============================================================ */
.draft-subhead {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 16px;
}
.past-picks-year {
  padding: 20px 0;
  border-top: 1px solid var(--obsidian-line);
}
.past-picks-year:first-child { border-top: none; padding-top: 0; }
.past-picks-year-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--gold);
  margin-bottom: 12px;
}
.past-picks-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.past-picks-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 6px 0;
}
.past-picks-row-roy {
  padding: 8px 12px;
  background: rgba(201, 162, 39, 0.08);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
}
.past-picks-num {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--gold);
  min-width: 40px;
}
.past-picks-player {
  font-size: 1rem;
  color: var(--ivory);
}
.past-picks-row-roy .past-picks-player {
  color: var(--gold-bright);
  font-weight: 500;
}
.past-picks-roy {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border: 1px solid var(--gold);
  border-radius: 2px;
  color: var(--gold-bright);
}
.past-picks-note {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ivory-dim);
}

/* ============================================================
   Draft page — Current Draft Capital (visual, team-logo-forward)
   ============================================================ */
.capital-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.capital-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 24px 22px 22px;
  border: 1px solid var(--obsidian-line);
  border-top: 3px solid var(--team-accent, var(--gold));
  border-radius: 4px;
  background: var(--obsidian-raised);
  color: var(--ivory);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.capital-card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--team-accent) 6%, var(--obsidian-raised));
  border-color: var(--team-accent, var(--gold));
}
.capital-card-logo-wrap {
  height: 192px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.capital-card-logo {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.capital-card-logo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--obsidian-line);
  border-radius: 4px;
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.capital-card-team-name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--team-accent, var(--gold));
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.capital-card-name {
  display: none;
}
.capital-card-owner {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: var(--team-accent, var(--gold));
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}
.capital-pick-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--obsidian-line);
}
.capital-pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--obsidian-line);
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.capital-pick-row:last-child { border-bottom: none; }
.capital-pick-slot {
  color: var(--ivory);
}
.capital-pick-own {
  color: var(--team-accent, var(--gold));
  font-weight: 500;
}
.capital-pick-via {
  color: var(--ivory-dim);
  font-size: 0.75rem;
}
.capital-pick-empty {
  padding: 12px 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  text-align: center;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   HOME PAGE — hero, status strip, champion spotlight, matchups,
   transaction wire, milestones
   ============================================================ */

/* Larger centerpiece badge on home page */
/* ============================================================
   HOME HERO — cinematic image treatment, bleeds into nav top
   Full image visible (3:2 aspect matches source so no crops)
   ============================================================ */
.home-hero {
  position: relative;
  width: 100%;
  padding: 0 !important;
  margin: 0;
  overflow: hidden;
  background: var(--obsidian);
  line-height: 0; /* eliminate the img's default inline-block gap */
  transform: translateZ(0); /* stabilize composited effects on scroll */
  contain: paint;
}

/* Image: full-strength brand hero. The image is designed with its own
   obsidian background and gold accents, so it hero-directly at full
   opacity. We only add gentle edge fades to blend into nav (top) and
   next section (bottom). */
.home-hero-bg {
  display: block;
  width: 100%;
  height: auto;
  opacity: 1;
  position: relative;
  z-index: 0;
}

/* Bottom fade — dissolves the image into the next section */
.home-hero::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, var(--obsidian) 100%);
  pointer-events: none;
  animation: none !important;
}

/* Top fade — the image slips under the nav rather than starting hard */
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg,
    var(--obsidian) 0%,
    transparent 12%,
    transparent 100%);
  pointer-events: none;
}

/* Status strip — season / next event / sync */
.home-status-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 32px;
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--obsidian-raised) 60%, transparent);
}
@media (max-width: 720px) {
  .home-status-strip { grid-template-columns: 1fr; padding: 20px; }
}
.home-status-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.home-status-value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ivory);
  margin-top: 4px;
}
.home-status-sub {
  color: var(--ivory-dim);
  font-size: 0.8rem;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.pill-offseason,
.pill-drop-period,
.pill-transaction-period,
.pill-draft-day,
.pill-post-draft,
.pill-in-season {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--gold);
  border-radius: 3px;
  color: var(--gold);
  font-size: 1rem;
  font-family: var(--font-display);
}
/* Offseason — neutral gold */
.pill-offseason { border-color: var(--gold); color: var(--gold); }

/* Drop Period — muted warning (bronze) */
.pill-drop-period {
  border-color: rgba(180, 110, 60, 0.7);
  color: #d6926b;
  background: rgba(180, 110, 60, 0.08);
}

/* Transaction Period — active green */
.pill-transaction-period {
  border-color: rgba(46, 204, 113, 0.7);
  color: #2ecc71;
  background: rgba(46, 204, 113, 0.08);
}

/* Draft Day — glowing gold */
.pill-draft-day {
  border-color: var(--gold);
  color: var(--gold);
  background: linear-gradient(135deg, rgba(201, 162, 39, 0.28), rgba(201, 162, 39, 0.10));
  box-shadow: 0 0 16px rgba(201, 162, 39, 0.55);
  animation: draft-day-pulse 2.5s ease-in-out infinite;
}
@keyframes draft-day-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(201, 162, 39, 0.55); }
  50%      { box-shadow: 0 0 26px rgba(201, 162, 39, 0.85); }
}

/* Post-Draft — quiet gold */
.pill-post-draft {
  border-color: rgba(201, 162, 39, 0.6);
  color: var(--gold);
  background: rgba(201, 162, 39, 0.08);
}

/* In-Season / Regular Season — bright ivory in gold frame */
.pill-in-season {
  border-color: var(--gold);
  color: var(--ivory);
  background: rgba(201, 162, 39, 0.12);
}

/* Sync status dot */
.sync-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 10px;
  vertical-align: middle;
  transition: background 0.3s;
}
.sync-dot.sync-on {
  background: #2ecc71;
  box-shadow: 0 0 12px #2ecc71;
  animation: sync-pulse 2s ease-in-out infinite;
}
.sync-dot.sync-off {
  background: #e74c3c;
  box-shadow: 0 0 8px rgba(231,76,60,0.4);
}
.sync-status-on { color: #2ecc71; }
.sync-status-off { color: #e74c3c; }
@keyframes sync-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.6; }
}

/* Champion spotlight */
.champion-spotlight {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 60px;
  align-items: center;
  padding: 20px 0;
}
@media (max-width: 860px) {
  .champion-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 24px;
  }
}
.champion-spotlight-banner {
  display: flex;
  justify-content: center;
  align-items: center;
}
.champion-spotlight-banner img {
  width: 100%;
  max-width: 340px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.6));
}
.champion-spotlight-name {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: var(--team-accent, var(--gold));
  margin: 8px 0 6px;
  line-height: 1.05;
}
.champion-spotlight-owner {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 28px;
}
.champion-spotlight-stats {
  display: flex;
  gap: 40px;
  margin-bottom: 32px;
}
@media (max-width: 860px) {
  .champion-spotlight-stats { justify-content: center; }
}
.champion-stat-value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--ivory);
  font-weight: 500;
}
.champion-stat-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-top: 2px;
}
.btn-team {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--team-accent);
  color: var(--team-accent);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 0.2s;
}
.btn-team:hover {
  background: color-mix(in srgb, var(--team-accent) 10%, transparent);
}

/* Matchups scroll */
.matchup-scroll-section { margin-bottom: 32px; }
.matchup-scroll-section:last-child { margin-bottom: 0; }
.matchup-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 12px;
  scroll-snap-type: x mandatory;
}
.matchup-scroll::-webkit-scrollbar { height: 8px; }
.matchup-scroll::-webkit-scrollbar-track { background: var(--obsidian-line); border-radius: 4px; }
.matchup-scroll::-webkit-scrollbar-thumb { background: var(--gold); border-radius: 4px; }
.matchup-card {
  min-width: 260px;
  flex-shrink: 0;
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
  padding: 16px;
  background: var(--obsidian-raised);
  scroll-snap-align: start;
}
.matchup-live { border-color: var(--gold); }
.matchup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--obsidian-line);
  border-left: 3px solid transparent;
  padding-left: 10px;
  margin-left: -10px;
}
.matchup-row:last-child { border-bottom: none; }
.matchup-winner {
  border-left-color: var(--team-accent);
  background: color-mix(in srgb, var(--team-accent) 6%, transparent);
}
.matchup-row a { text-decoration: none; font-weight: 500; }
.matchup-score {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ivory);
}
.matchup-vs {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--ivory-dim);
  text-align: center;
  padding: 6px 0;
}

/* Transaction Wire */
.tx-wire {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.tx-item {
  display: grid;
  grid-template-columns: 90px 1fr 80px;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.tx-item:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .tx-item { grid-template-columns: 70px 1fr; }
  .tx-time { display: none; }
}
.tx-kind {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tx-text {
  color: var(--ivory);
  font-size: 0.95rem;
  line-height: 1.4;
}
.tx-time {
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-align: right;
}

/* Milestones */
.milestone-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .milestone-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .milestone-grid { grid-template-columns: 1fr; } }
.milestone {
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
  padding: 28px 24px;
  background: var(--obsidian-raised);
  transition: border-color 0.2s, transform 0.2s;
}
.milestone:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.milestone-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 2.8rem);
  color: var(--ivory);
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 500;
}
.milestone-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.milestone-sub {
  color: var(--ivory-dim);
  font-size: 0.9rem;
}

/* ============================================================
   ON THIS DATE (home page)
   ============================================================ */
.otd-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.otd-item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.otd-item:last-child { border-bottom: none; }
@media (max-width: 640px) {
  .otd-item { grid-template-columns: 80px 1fr; gap: 16px; }
}
.otd-year {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--gold);
  font-weight: 500;
}
.otd-title {
  color: var(--ivory);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 6px;
}
.otd-detail {
  color: var(--ivory-dim);
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 8px;
}
.otd-team {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============================================================
   POWER RANKINGS
   ============================================================ */
.pr-card {
  display: grid;
  grid-template-columns: 60px 96px 1fr;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  margin-bottom: 12px;
  border: 1px solid var(--obsidian-line);
  border-left: 4px solid var(--team-accent);
  border-radius: 4px;
  background: var(--obsidian-raised);
  text-decoration: none;
  color: var(--ivory);
  transition: transform 0.2s, background 0.2s;
}
.pr-card:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--team-accent) 6%, var(--obsidian-raised));
}
@media (max-width: 640px) {
  .pr-card { grid-template-columns: 44px 68px 1fr; gap: 12px; padding: 16px; }
}
.pr-rank {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: var(--gold);
  text-align: center;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 640px) {
  .pr-rank { font-size: 1.8rem; }
}
.pr-logo-wrap {
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 640px) {
  .pr-logo-wrap { width: 68px; height: 68px; }
}
.pr-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.pr-team-line {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.pr-team-name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
}
.pr-trend {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 3px;
}
.pr-trend-up   { color: #2ecc71; background: rgba(46,204,113,0.12); }
.pr-trend-down { color: #e74c3c; background: rgba(231,76,60,0.12); }
.pr-trend-same { color: var(--ivory-dim); background: rgba(255,255,255,0.04); }
.pr-trend-new  { color: var(--gold); background: rgba(201,162,39,0.12); }
.pr-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--ivory-dim);
  letter-spacing: 0.03em;
  margin-bottom: 10px;
}
.pr-blurb {
  color: var(--ivory);
  font-size: 0.95rem;
  line-height: 1.5;
  opacity: 0.9;
}

/* ============================================================
   POD OF GOLD
   ============================================================ */
.pod-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 24px 0;
  text-decoration: none;
  color: var(--ivory);
}
@media (max-width: 900px) {
  .pod-featured { grid-template-columns: 1fr; gap: 24px; }
}
.pod-featured-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.pod-featured-thumb img,
.pod-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}
.pod-featured:hover .pod-featured-thumb img { transform: scale(1.03); }
.pod-featured-play,
.pod-card-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.35) 100%);
  transition: opacity 0.3s;
}
.pod-featured-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 2.4rem);
  color: var(--ivory);
  margin: 8px 0 6px;
  line-height: 1.15;
}
.pod-featured-date,
.pod-card-date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.pod-featured-desc {
  color: var(--ivory-dim);
  font-size: 1rem;
  line-height: 1.55;
  margin-bottom: 4px;
}
.pod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
@media (max-width: 900px) { .pod-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .pod-grid { grid-template-columns: 1fr; } }
.pod-card {
  display: block;
  text-decoration: none;
  color: var(--ivory);
}
.pod-card-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.pod-card:hover .pod-card-thumb img { transform: scale(1.05); }
.pod-card-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--ivory);
  margin-bottom: 6px;
  line-height: 1.3;
}

/* ============================================================
   HEAD TO HEAD
   ============================================================ */
.h2h-predictor {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: 32px;
}
@media (max-width: 640px) {
  .h2h-predictor { grid-template-columns: 1fr; gap: 12px; }
  .h2h-vs { display: none; }
}
.h2h-picker { display: flex; flex-direction: column; gap: 8px; }
.h2h-select {
  padding: 12px 14px;
  background: var(--obsidian);
  color: var(--ivory);
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
  font-family: var(--font-display);
  font-size: 1rem;
  cursor: pointer;
}
.h2h-select:focus { outline: none; border-color: var(--gold); }
.h2h-vs {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--gold);
  text-align: center;
  padding-bottom: 12px;
}

/* Scoreboard */
.h2h-scoreboard {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 24px;
  align-items: center;
  padding: 32px 24px;
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
  background: var(--obsidian-raised);
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .h2h-scoreboard { grid-template-columns: 1fr; }
}
.h2h-side { text-align: center; padding: 0 12px; }
.h2h-logo {
  max-height: 100px;
  max-width: 100%;
  margin: 0 auto 12px;
  display: block;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
}
.h2h-team-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  margin-bottom: 4px;
}
.h2h-owner {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 20px;
}
.h2h-record-big {
  font-family: var(--font-display);
  font-size: 3.2rem;
  color: var(--team-accent);
  font-weight: 500;
  line-height: 1;
}
.h2h-middle { text-align: center; }
.h2h-total {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--ivory);
  line-height: 1;
}
.h2h-total span {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-top: 4px;
}
.h2h-ties {
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  margin: 8px 0;
}
.h2h-pct-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  margin: 16px 0 8px;
  background: var(--obsidian);
}
.h2h-pct-fill-a, .h2h-pct-fill-b { transition: width 0.3s; }
.h2h-pct-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

/* Predictor card */
.h2h-predictor-card {
  padding: 24px;
  border: 1px solid var(--gold);
  border-radius: 4px;
  background: color-mix(in srgb, var(--gold) 4%, var(--obsidian-raised));
}
.h2h-prediction {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ivory);
  margin: 10px 0 8px;
}
.h2h-edge { color: var(--gold); font-weight: 600; }
.h2h-pred-sub {
  color: var(--ivory-dim);
  font-size: 0.85rem;
  margin-bottom: 20px;
}
.h2h-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--obsidian-line);
  color: var(--ivory);
  font-size: 0.9rem;
  line-height: 1.5;
}
@media (max-width: 560px) { .h2h-context { grid-template-columns: 1fr; } }

/* Grid table */
.h2h-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--obsidian-line);
  border-radius: 4px;
}
.h2h-grid {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}
.h2h-grid-th-corner {
  background: var(--obsidian);
  color: var(--ivory-dim);
  padding: 10px 10px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 140px;
  position: sticky;
  left: 0;
  z-index: 3;
}
.h2h-grid-th {
  background: var(--obsidian);
  padding: 10px 4px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.h2h-grid-th-row {
  background: var(--obsidian);
  padding: 8px 10px;
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 500;
  width: 140px;
  position: sticky;
  left: 0;
  z-index: 2;
}
.h2h-grid-th-row a {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.h2h-row-logo {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.h2h-cell {
  padding: 8px 2px;
  text-align: center;
  font-weight: 500;
  border: 1px solid var(--obsidian-line);
  white-space: nowrap;
  font-size: 0.78rem;
}
.h2h-self {
  background: rgba(255,255,255,0.02);
  color: var(--ivory-dim);
}
.h2h-none {
  background: rgba(255,255,255,0.02);
  color: var(--ivory-dim);
}

/* ============================================================
   PAGE HERO MARKS — big glowing centerpiece for Draft, Hall of Gold, etc
   Mirrors the homepage badge treatment
   ============================================================ */
.page-hero-mark {
  display: block;
  margin: 0 auto 20px;
  width: clamp(320px, 46vw, 560px);
  height: auto;
  filter:
    drop-shadow(0 40px 100px rgba(201,162,39,0.55))
    drop-shadow(0 0 40px rgba(201,162,39,0.45))
    drop-shadow(0 0 12px rgba(201,162,39,0.35));
  animation: badge-float 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .page-hero-mark { animation: none; }
}

/* ============================================================
   POD OF GOLD — reflective animated gold title
   ============================================================ */
.pod-title-reflective {
  font-family: var(--font-display);
  font-size: clamp(3rem, 7vw, 5.4rem);
  font-weight: 700;
  line-height: 1;
  margin: 12px 0 8px;
  /* Reflective gold: multi-stop gradient with shine that sweeps across */
  background: linear-gradient(
    100deg,
    #7a5a12 0%,
    #C9A227 15%,
    #f4d97a 30%,
    #ffffff 42%,
    #fce9a1 50%,
    #ffffff 58%,
    #f4d97a 70%,
    #C9A227 85%,
    #7a5a12 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: gold-shine 5s ease-in-out infinite;
  filter: drop-shadow(0 4px 24px rgba(201,162,39,0.4));
}
@keyframes gold-shine {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pod-title-reflective { animation: none; background-position: 50% 0; }
}

/* ============================================================
   DRAFT HERO — Adam Silver at the podium
   ============================================================ */
.draft-hero {
  position: relative;
  overflow: hidden;
}
.draft-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  opacity: 0.55;
  z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.2) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.2) 100%);
  /* Multiply blend against the obsidian bg so Silver's white background disappears */
  mix-blend-mode: screen;
}
.draft-hero > .container { position: relative; z-index: 2; }

/* ============================================================
   H2H — updated prediction card
   ============================================================ */
.h2h-pred-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.h2h-confidence {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  padding: 3px 10px;
  border: 1px solid var(--gold);
  border-radius: 3px;
}
.h2h-prediction {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--ivory);
  margin: 8px 0 20px;
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.h2h-edge {
  color: var(--gold);
  font-weight: 600;
  font-size: 2rem;
}
.h2h-pred-verb {
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Win-probability split bar */
.h2h-prob-split {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr minmax(140px, 1fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .h2h-prob-split { grid-template-columns: 1fr; gap: 8px; }
}
.h2h-prob-side {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-display);
}
.h2h-prob-side:first-child { justify-content: flex-end; text-align: right; }
.h2h-prob-side:last-child { justify-content: flex-start; text-align: left; }
.h2h-prob-name {
  font-size: 0.9rem;
  font-weight: 500;
}
.h2h-prob-pct {
  font-size: 1.4rem;
  font-weight: 600;
  font-family: var(--font-mono);
}
.h2h-prob-bar {
  display: flex;
  height: 10px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--obsidian);
}
.h2h-prob-fill-a, .h2h-prob-fill-b { transition: width 0.4s ease; }

/* ============================================================
   VISUAL BRACKETS — playoffs + toilet bowl
   Bracket-tree layout with CSS connectors, fits in view
   ============================================================ */

.past-bracket-season {
  padding: 32px 0 40px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--obsidian-line);
}
.past-bracket-season:last-child { border-bottom: none; }
.past-bracket-header {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.past-bracket-year {
  font-family: var(--font-display);
  font-size: 2rem;
  color: var(--gold);
  font-weight: 500;
}
.past-bracket-champ-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.past-bracket-champ-icon {
  height: 42px;
  width: auto;
}

/* Visual bracket: bracket-tree on the left + trophy panel on the right */
.visual-bracket {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: stretch;
  padding: 12px 0;
}
@media (max-width: 900px) {
  .visual-bracket {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Bracket tree — a flex row of round columns */
.bracket-tree {
  display: flex;
  align-items: stretch;
  min-height: 340px;
  padding: 0 8px;
}

.bracket-round {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  position: relative;
}
.bracket-round-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--obsidian-line);
}
.bracket-round-matchups {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 20px;
  flex: 1;
  position: relative;
}

/* Match card */
.bracket-matchup {
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--obsidian-raised), color-mix(in srgb, var(--obsidian) 90%, var(--obsidian-raised)));
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  position: relative;
  transition: transform 0.2s, box-shadow 0.2s;
}
.bracket-matchup:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Team slot */
.bracket-slot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  position: relative;
  transition: background 0.2s;
  min-width: 0;
}
.bracket-slot + .bracket-slot {
  border-top: 1px solid var(--obsidian-line);
}
.bracket-slot-logo {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.bracket-slot-link {
  flex: 1;
  min-width: 0;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
}
.bracket-slot-name {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bracket-slot-score {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ivory);
  min-width: 46px;
  text-align: right;
  padding-left: 4px;
  flex-shrink: 0;
}

/* Winner effects */
.bracket-slot-winner {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--team-accent) 18%, transparent) 0%,
    color-mix(in srgb, var(--team-accent) 6%, transparent) 60%,
    transparent 100%);
  box-shadow: inset 4px 0 0 0 var(--team-accent);
}
.bracket-slot-winner .bracket-slot-score {
  color: var(--team-accent);
}
.bracket-slot-winner .bracket-slot-logo {
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--team-accent) 65%, transparent)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.bracket-slot-loser {
  opacity: 0.45;
}
.bracket-slot-loser .bracket-slot-logo {
  filter: grayscale(0.65);
}

/* ------------- Bracket connector lines ------------- */
/* Each round (except the last) draws horizontal ticks stretching to the right,
   plus vertical brackets joining pairs of matchups above/below. Done via
   pseudo-elements on the round-matchups container. */

.bracket-round:not(:last-child) .bracket-matchup::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  transform: translateY(-50%);
}

/* Vertical connector on odd-position matchups extending down to the pair below */
.bracket-round:not(:last-child) .bracket-matchup:nth-child(odd)::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  bottom: -50%;
  width: 1px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
}

/* Horizontal tick going INTO the next round's matchup */
.bracket-round:not(:first-child) .bracket-matchup::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -12px;
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  transform: translateY(-50%);
}
/* Reset the ::before we just set for odd items when they'd conflict with the vertical from previous round */
.bracket-round:not(:first-child) .bracket-matchup:nth-child(odd)::before {
  top: 50%;
  bottom: auto;
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--gold) 35%, transparent);
  transform: translateY(-50%);
}

/* ------------- Champion trophy panel ------------- */
.bracket-champion-panel {
  position: relative;
  min-width: 200px;
  max-width: 240px;
  display: flex;
  align-items: stretch;
  padding: 0 4px 0 20px;
}
@media (max-width: 900px) {
  .bracket-champion-panel { max-width: none; padding: 20px 0 0; }
}
.bracket-champion-glow {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: radial-gradient(ellipse 100% 80% at 50% 50%,
    color-mix(in srgb, var(--champ-color) 20%, transparent),
    transparent 65%);
  animation: champion-panel-glow 3.5s ease-in-out infinite;
  z-index: 0;
}
@keyframes champion-panel-glow {
  0%,100% { opacity: 0.7; }
  50%     { opacity: 1; }
}
.bracket-champion-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
}
.bracket-champion-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--champ-color);
  text-align: center;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--champ-color) 30%, transparent);
  align-self: stretch;
}
.bracket-champion-trophy-img {
  height: 220px;
  width: auto;
  max-width: 100%;
  filter:
    drop-shadow(0 20px 40px rgba(0,0,0,0.6))
    drop-shadow(0 0 24px rgba(201,162,39,0.4));
}
.visual-bracket-toilet .bracket-champion-trophy-img {
  filter:
    drop-shadow(0 20px 40px rgba(0,0,0,0.6))
    drop-shadow(0 0 20px rgba(139, 90, 43, 0.5));
}
.bracket-champion-name {
  margin-top: 16px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.2;
}
.bracket-champion-name a { text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .bracket-champion-glow { animation: none; }
}

/* ============================================================
   TEAM PAGE — VISUAL ROSTER with player headshots
   Position rows: PG · SG · SF · PF · C
   Starters on the left of each row, bench to the right
   ============================================================ */
.roster-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.roster-pos-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: stretch;
  padding: 14px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.roster-pos-row:last-child { border-bottom: none; }

.roster-pos-label {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
  text-align: center;
  padding-top: 22px;
  border-right: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  padding-right: 8px;
}
.roster-pos-label-other {
  color: var(--ivory-dim);
  border-right-color: var(--obsidian-line);
}

.roster-pos-players {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scroll-snap-type: x proximity;
}
.roster-pos-players::-webkit-scrollbar { height: 6px; }
.roster-pos-players::-webkit-scrollbar-track { background: var(--obsidian-line); border-radius: 3px; }
.roster-pos-players::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold) 60%, transparent); border-radius: 3px; }

/* Player card */
.roster-player-card {
  flex-shrink: 0;
  width: 108px;
  padding: 10px 8px 12px;
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  scroll-snap-align: start;
  transition: transform 0.15s, border-color 0.15s;
}
.roster-player-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
}

/* Starter card: strong gold border + glow that reads at a glance */
.roster-player-starter {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 24px rgba(201, 162, 39, 0.35),
    0 4px 16px rgba(0, 0, 0, 0.5);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 8%, var(--obsidian-raised)),
    var(--obsidian-raised));
}
.roster-player-starter:hover {
  box-shadow:
    0 0 0 1px var(--gold),
    0 0 32px rgba(201, 162, 39, 0.55),
    0 6px 20px rgba(0, 0, 0, 0.6);
  transform: translateY(-2px);
}

.roster-player-photo-wrap {
  position: relative;
  width: 92px;
  height: 92px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #1a1a1e, #0d0d10);
  border: 2px solid var(--obsidian-line);
}
.roster-player-starter .roster-player-photo-wrap {
  border-color: var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(255, 220, 130, 0.4),
    0 0 16px rgba(201, 162, 39, 0.4);
}
.roster-player-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.roster-player-photo-missing::before {
  content: "?";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ivory-dim);
  font-family: var(--font-display);
  font-size: 2rem;
}

.roster-player-starter-badge {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  padding: 2px 9px;
  background: var(--gold);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-radius: 2px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

/* Injury badge — highly visible red pill with white text.
   Sits at the top of the card so it reads immediately. */
.roster-player-injury {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 10px;
  background: #dc2626;
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 3px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.5), 0 0 0 2px var(--obsidian-raised);
  z-index: 2;
}
/* Injured players also get a subtle red-tinted photo well border */
.roster-player-card:has(.roster-player-injury) .roster-player-photo-wrap {
  border-color: #dc2626;
  box-shadow: inset 0 0 0 1px rgba(255, 100, 100, 0.3);
}

.roster-player-name {
  font-family: var(--font-display);
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ivory);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-player-team {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  text-align: center;
}

@media (max-width: 640px) {
  .roster-pos-row { grid-template-columns: 44px 1fr; gap: 12px; }
  .roster-pos-label { font-size: 1.3rem; padding-top: 20px; }
  .roster-player-card { width: 96px; }
  .roster-player-photo-wrap { width: 80px; height: 80px; }
}

/* ============================================================
   DRAFT PAGE — capital cards with year groups + round-color chips
   ============================================================ */

/* 2 rows of 5 cards */
.capital-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
@media (max-width: 1100px) { .capital-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .capital-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px)  { .capital-grid { grid-template-columns: 1fr; } }

.capital-year-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
.capital-year-group {
  padding: 10px 12px;
  background: color-mix(in srgb, var(--obsidian) 60%, transparent);
  border-radius: 4px;
  border: 1px solid var(--obsidian-line);
  /* Fixed min height ensures year labels line up horizontally across
     every capital card in the draft grid, regardless of how many picks
     any team owns in that specific year. Tuned to hold 3 chips + gaps. */
  min-height: 128px;
  display: flex;
  flex-direction: column;
}
.capital-pick-empty-slot {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  padding: 12px 0;
  text-align: center;
  opacity: 0.5;
}
.capital-year-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--obsidian-line);
}

/* Chips stack vertically — R1, R2, R3 each on their own line */
.capital-year-picks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Pick chip — metallic engraved plaque style, one per pick */
.capital-pick-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  transition: transform 0.15s;
  position: relative;
}
.capital-pick-chip::after {
  /* Metallic sheen: a soft diagonal highlight over the top-left,
     dimming toward bottom-right — reads as light hitting metal */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 4px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.05) 30%,
    transparent 55%,
    rgba(0, 0, 0, 0.12) 100%);
  pointer-events: none;
}
.capital-pick-chip:hover {
  transform: translateX(2px);
}
.capital-pick-round {
  font-weight: 700;
  letter-spacing: 0.08em;
  min-width: 22px;
  position: relative;
  z-index: 1;
  /* Engraved-letter effect: dark letter with a light bottom-highlight
     and dark top-shadow to look pressed INTO the metal */
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 0 rgba(255, 255, 255, 0.35);
}
.capital-pick-via {
  font-size: 0.66rem;
  opacity: 0.9;
  position: relative;
  z-index: 1;
}

/* Round 1 — polished brass/gold, gleaming */
.capital-pick-r1 {
  background: linear-gradient(135deg,
    #f4d97a 0%,
    #d4a418 25%,
    #b8860b 55%,
    #8a6608 100%);
  border: 1px solid #8a6608;
  color: #3d2900;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 150, 0.6),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 12px rgba(201, 162, 39, 0.5),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.capital-pick-r1 .capital-pick-round { color: #2a1c00; }
.capital-pick-r1 .capital-pick-via { color: #4a3400; }

/* Round 2 — brushed silver / platinum */
.capital-pick-r2 {
  background: linear-gradient(135deg,
    #e8ecf1 0%,
    #b4bcc7 30%,
    #8b95a3 60%,
    #545c68 100%);
  border: 1px solid #4a5260;
  color: #1a1e24;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.capital-pick-r2 .capital-pick-round { color: #14181d; }
.capital-pick-r2 .capital-pick-via { color: #2a2f36; }

/* Round 3 — brushed bronze / copper */
.capital-pick-r3 {
  background: linear-gradient(135deg,
    #d69a76 0%,
    #a86538 30%,
    #7a4322 60%,
    #4a2812 100%);
  border: 1px solid #4a2812;
  color: #1a0800;
  box-shadow:
    inset 0 1px 0 rgba(230, 160, 110, 0.5),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(0, 0, 0, 0.4);
}
.capital-pick-r3 .capital-pick-round { color: #1a0800; }
.capital-pick-r3 .capital-pick-via { color: #331100; }

/* Fallback for later rounds */
.capital-pick-rn {
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--obsidian-line);
  color: var(--ivory-dim);
}

/* Empty state */
.capital-pick-empty {
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-align: center;
  padding: 12px 0;
}

/* ============================================================
   BRACKET COMING SOON — offseason placeholder for playoff/toilet
   ============================================================ */
.bracket-coming-soon {
  padding: 80px 40px;
  text-align: center;
  border: 1px dashed var(--obsidian-line);
  border-radius: 8px;
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,162,39,0.08), transparent 70%);
}
.bracket-coming-soon-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.bracket-coming-soon-text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--ivory);
  font-weight: 500;
  margin-bottom: 14px;
  text-shadow: 0 0 30px rgba(201, 162, 39, 0.35);
}
.bracket-coming-soon-sub {
  color: var(--ivory-dim);
  font-size: 0.95rem;
  max-width: 400px;
  margin: 0 auto;
}

/* Toilet Bowl variant — poop-brown palette, still readable and popping */
.bracket-coming-soon-toilet {
  background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(139, 90, 43, 0.14), transparent 70%);
  border-color: rgba(160, 110, 60, 0.4);
}
.bracket-coming-soon-toilet .bracket-coming-soon-label {
  color: #b5895a; /* light warm brown that pops */
}
.bracket-coming-soon-toilet .bracket-coming-soon-text {
  text-shadow: 0 0 30px rgba(180, 120, 65, 0.4);
}

/* ============================================================
   TEAM PAGE — Draft Capital: each year on its own line
   Uses portrait card images (round-1/2/3.png) to represent picks
   ============================================================ */
.team-picks-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.team-picks-year-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.team-picks-year-row:last-child { border-bottom: none; }
.team-picks-year-label {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  font-weight: 500;
}
.team-picks-year-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-start;
}
@media (max-width: 640px) {
  .team-picks-year-row { grid-template-columns: 1fr; gap: 10px; }
}

/* Individual pick card wrapper */
.pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s;
}
.pick-card:hover { transform: translateY(-2px); }

/* Fixed card dimensions so R1/R2/R3 always render identically.
   Source images are all resized to 632x923 (aspect ~1.46) so cover fills
   each container edge-to-edge with no crop and no letterbox. */
.pick-card-img {
  display: block;
  width: 180px;
  height: 262px;
  object-fit: cover;
  object-position: center;
  border-radius: 6px;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.65));
}
.pick-card-r1 .pick-card-img { filter: drop-shadow(0 0 22px rgba(201, 162, 39, 0.6)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); }
.pick-card-r2 .pick-card-img { filter: drop-shadow(0 0 18px rgba(200, 210, 220, 0.4)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); }
.pick-card-r3 .pick-card-img { filter: drop-shadow(0 0 18px rgba(180, 110, 60, 0.45)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.6)); }

.pick-card-fallback {
  width: 180px;
  height: 262px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--obsidian-raised);
  border: 1px dashed var(--obsidian-line);
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--ivory-dim);
}

.pick-card-via {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ivory-dim);
  text-align: center;
  max-width: 190px;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ============================================================
   FRANCHISE REPORT — analytics section on team pages
   Snapshot / Movement / Positional Analysis / Draft Targets / Cuts
   ============================================================ */

.section-subhead {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  margin-top: 6px;
}

/* Snapshot: 8 hero stat cards laid out as 2 rows of 4 */
.fr-snapshot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 40px;
}
@media (max-width: 900px) { .fr-snapshot { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fr-snapshot { grid-template-columns: 1fr; } }
.fr-snapshot-card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  padding: 20px 18px;
  transition: border-color 0.2s;
}
.fr-snapshot-card:hover { border-color: var(--gold); }
.fr-snapshot-value {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 8px;
}
.fr-snapshot-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 4px;
}
.fr-snapshot-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--ivory-dim);
  opacity: 0.7;
  margin-bottom: 8px;
}
.fr-snapshot-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

/* League rank pill — colored by tier */
.fr-rank {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.68rem;
}
.fr-rank-top {
  background: color-mix(in srgb, var(--gold) 22%, transparent);
  color: var(--gold);
  border: 1px solid var(--gold);
  box-shadow: 0 0 10px rgba(201, 162, 39, 0.5);
  text-shadow: 0 0 8px rgba(201, 162, 39, 0.6);
}
.fr-rank-mid { background: rgba(201, 162, 39, 0.14); color: var(--gold); border: 1px solid rgba(201, 162, 39, 0.35); }
.fr-rank-bot { background: rgba(220, 38, 38, 0.14); color: #ef4444; border: 1px solid rgba(220, 38, 38, 0.35); }

/* Delta indicators for YoY change */
.fr-delta-up   { color: #2ecc71; }
.fr-delta-down { color: #ef4444; }
.fr-delta-flat { color: var(--ivory-dim); }

/* Section block wrapper */
.fr-block {
  margin-bottom: 40px;
}
.fr-block-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ivory);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--obsidian-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.fr-block-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  font-weight: 500;
}
.fr-block-sub-inline {
  color: var(--ivory-dim);
  font-size: 0.88rem;
  margin-top: -6px;
  margin-bottom: 18px;
  line-height: 1.5;
}

/* Movement cards */
.fr-movement-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 800px) { .fr-movement-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .fr-movement-grid { grid-template-columns: 1fr; } }
.fr-movement-card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  padding: 18px 16px;
}
.fr-movement-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 8px;
}
.fr-movement-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--ivory);
  font-weight: 500;
  margin-bottom: 6px;
  line-height: 1.2;
}
.fr-movement-sub {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ivory-dim);
  line-height: 1.5;
}

/* Positional analysis */
.fr-pos-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
@media (max-width: 800px) { .fr-pos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .fr-pos-grid { grid-template-columns: repeat(2, 1fr); } }
.fr-pos-card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fr-pos-card-need {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px rgba(201, 162, 39, 0.3);
}
.fr-pos-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fr-pos-name {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--gold);
}
.fr-pos-need-flag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: #0a0a0a;
  background: var(--gold);
  padding: 2px 8px;
  border-radius: 2px;
}
.fr-pos-stats {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.fr-pos-stats > div {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
}
.fr-pos-stat-label {
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.fr-pos-stat-value {
  color: var(--ivory);
  font-family: var(--font-mono);
  font-weight: 600;
}
.fr-pos-need-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 3px;
  overflow: hidden;
}
.fr-pos-need-fill { height: 100%; transition: width 0.4s; }
.fr-pos-need-low  { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.fr-pos-need-mid  { background: linear-gradient(90deg, var(--gold), #b8860b); }
.fr-pos-need-high { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Draft targets */
.fr-target-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 800px) { .fr-target-grid { grid-template-columns: 1fr; } }
.fr-target-col-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(201, 162, 39, 0.25);
}
.fr-target-item {
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--obsidian-line);
}
.fr-target-item:last-child { border-bottom: none; }
.fr-target-rank {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 600;
}
.fr-target-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ivory);
  font-weight: 500;
}
.fr-target-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
  margin-top: 2px;
}

/* Cut candidates */
.fr-cut-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 720px) { .fr-cut-list { grid-template-columns: 1fr; } }
.fr-cut-item {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--obsidian-line);
  border-left: 3px solid rgba(239, 68, 68, 0.5);
  border-radius: 4px;
  padding: 12px 14px;
}
.fr-cut-name {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ivory);
  font-weight: 500;
  margin-bottom: 2px;
}
.fr-cut-meta {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.fr-cut-why {
  font-size: 0.82rem;
  color: #cbb87a;
  font-style: italic;
}

/* Context callout at top of the Franchise Report */
.fr-context {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(201, 162, 39, 0.06);
  border: 1px solid rgba(201, 162, 39, 0.25);
  border-radius: 6px;
  margin-bottom: 28px;
}
.fr-context-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: #0a0a0a;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  flex-shrink: 0;
  font-style: italic;
}
.fr-context-text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ivory-dim);
}
.fr-context-text strong {
  color: var(--ivory);
  font-weight: 500;
}

/* Best-player name in snapshot */
.fr-snapshot-name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--gold);
  margin: -4px 0 8px;
  font-weight: 500;
}

/* Live indicator */
.fr-live-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -20px 0 32px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.fr-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ivory-dim);
}
.fr-live-active { color: #2ecc71; }
.fr-live-active .fr-live-dot {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
  animation: fr-live-pulse 2s ease-in-out infinite;
}
@keyframes fr-live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Player-rank pill on transaction wire */
.tx-player-rank {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  margin-left: 4px;
  vertical-align: 1px;
}
.tx-rank-hi { background: rgba(46, 204, 113, 0.16); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.35); }
.tx-rank-mid { background: rgba(201, 162, 39, 0.14); color: var(--gold); border: 1px solid rgba(201, 162, 39, 0.35); }
.tx-rank-lo { background: rgba(255,255,255,0.04); color: var(--ivory-dim); border: 1px solid var(--obsidian-line); }

/* Position group label + grid */
.fr-pos-group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 12px;
}
.fr-pos-grid-groups {
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 8px;
}
@media (max-width: 500px) { .fr-pos-grid-groups { grid-template-columns: 1fr; } }
.fr-pos-card-group {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 6%, var(--obsidian-raised)),
    var(--obsidian-raised));
  border-color: rgba(201, 162, 39, 0.25);
}
.fr-pos-group-sub {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

/* ============================================================
   NEWS & NOTES — homepage story feed
   Featured story on top (bigger), then 3 smaller items below
   ============================================================ */
.news-featured {
  display: block;
  border: 1px solid var(--obsidian-line);
  border-radius: 8px;
  border-left: 4px solid var(--news-accent, var(--gold));
  padding: 28px 32px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--news-accent, var(--gold)) 5%, var(--obsidian-raised)),
    var(--obsidian-raised));
  margin-bottom: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-left-color 0.2s;
}
.news-featured:hover {
  transform: translateY(-2px);
  border-left-color: var(--gold);
}
.news-featured-meta,
.news-item-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.news-kind {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--news-accent, var(--gold));
  padding: 2px 8px;
  border: 1px solid var(--news-accent, var(--gold));
  border-radius: 2px;
  font-weight: 600;
}
.news-date {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  letter-spacing: 0.06em;
}
.news-team {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 500;
}
.news-featured-headline {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--ivory);
  margin-bottom: 12px;
  font-weight: 500;
  line-height: 1.25;
}
.news-featured-body {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ivory-dim);
  max-width: 780px;
}

.news-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) { .news-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .news-list { grid-template-columns: 1fr; } }
.news-item {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  border-left: 3px solid var(--news-accent, var(--gold));
  background: var(--obsidian-raised);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s, border-color 0.2s;
}
.news-item:hover {
  transform: translateY(-2px);
  border-color: var(--news-accent, var(--gold));
}
.news-headline {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 8px;
}
.news-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ivory-dim);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   FRANCHISE SNAPSHOT — mood accents (gold=good, red=bad)
   ============================================================ */

/* Good mood — gold left border + strong gold glow */
.fr-snapshot-good {
  border-color: rgba(201, 162, 39, 0.7);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 14%, var(--obsidian-raised)),
    var(--obsidian-raised));
  box-shadow:
    0 0 40px rgba(201, 162, 39, 0.28),
    inset 0 0 24px rgba(201, 162, 39, 0.10);
}
.fr-snapshot-good .fr-snapshot-value {
  color: var(--gold);
  text-shadow:
    0 0 24px rgba(201, 162, 39, 0.65),
    0 0 40px rgba(201, 162, 39, 0.35);
}
.fr-snapshot-good .fr-snapshot-name { color: var(--gold); }

/* Bad mood — red left border + subtle red glow */
.fr-snapshot-bad {
  border-color: rgba(220, 38, 38, 0.4);
  border-left: 3px solid #ef4444;
  background: linear-gradient(180deg,
    rgba(220, 38, 38, 0.05),
    var(--obsidian-raised));
}
.fr-snapshot-bad .fr-snapshot-value {
  color: #ef6161;
}

/* Movement card mood accents */
.fr-movement-card-good {
  border-color: rgba(201, 162, 39, 0.6);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 12%, var(--obsidian-raised)),
    var(--obsidian-raised));
  box-shadow:
    0 0 30px rgba(201, 162, 39, 0.20),
    inset 0 0 20px rgba(201, 162, 39, 0.08);
}
.fr-movement-card-good .fr-movement-value { color: var(--gold); }
.fr-movement-card-bad {
  border-color: rgba(220, 38, 38, 0.35);
  border-left: 3px solid #ef4444;
  background: linear-gradient(180deg,
    rgba(220, 38, 38, 0.05),
    var(--obsidian-raised));
}

/* ============================================================
   POSITION CARDS — best/worst player highlights
   ============================================================ */
.fr-pos-players {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--obsidian-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fr-pos-player {
  display: grid;
  grid-template-columns: 42px 1fr auto auto;
  align-items: baseline;
  gap: 6px;
  font-size: 0.72rem;
  padding: 3px 0;
}
.fr-pos-player-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.fr-pos-player:first-child .fr-pos-player-label { color: var(--gold); }
.fr-pos-player + .fr-pos-player .fr-pos-player-label { color: #ef6161; }
.fr-pos-player-name {
  font-family: var(--font-display);
  color: var(--ivory);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.fr-pos-player-rank {
  font-family: var(--font-mono);
  color: var(--ivory-dim);
  font-weight: 600;
  font-size: 0.7rem;
}
.fr-pos-player-arrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.fr-pos-player-empty .fr-pos-player-none {
  grid-column: 2 / -1;
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.68rem;
}

/* ============================================================
   CLAUDE FRATELLO PREDICTS — playoff odds, championship window,
   predicted finish + a hot-take byline from your senior analyst
   ============================================================ */
.fr-predicts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 24px;
}
@media (max-width: 800px) { .fr-predicts-grid { grid-template-columns: 1fr; } }
.fr-predicts-card {
  background: var(--obsidian-raised);
  border: 1px solid var(--obsidian-line);
  border-radius: 6px;
  padding: 20px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
}
.fr-predicts-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  margin-bottom: 10px;
}
.fr-predicts-value {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ivory);
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 8px;
}
.fr-predicts-sub {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  line-height: 1.4;
}

/* Playoff odds tiers */
.fr-predicts-odds-high {
  border-color: rgba(46, 204, 113, 0.5);
  border-left: 3px solid #2ecc71;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.08), var(--obsidian-raised));
}
.fr-predicts-odds-high .fr-predicts-value {
  color: #2ecc71;
  text-shadow: 0 0 22px rgba(46, 204, 113, 0.4);
}
.fr-predicts-odds-mid {
  border-color: rgba(201, 162, 39, 0.4);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 8%, var(--obsidian-raised)), var(--obsidian-raised));
}
.fr-predicts-odds-mid .fr-predicts-value { color: var(--gold); }
.fr-predicts-odds-low {
  border-color: rgba(220, 38, 38, 0.4);
  border-left: 3px solid #ef4444;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.05), var(--obsidian-raised));
}
.fr-predicts-odds-low .fr-predicts-value { color: #ef6161; }

/* Championship window states */
.fr-window-peak {
  border-color: rgba(201, 162, 39, 0.7);
  border-left: 3px solid var(--gold);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 16%, var(--obsidian-raised)), var(--obsidian-raised));
  box-shadow: 0 0 30px rgba(201, 162, 39, 0.25), inset 0 0 20px rgba(201, 162, 39, 0.10);
}
.fr-window-peak .fr-predicts-value {
  color: var(--gold);
  text-shadow: 0 0 20px rgba(201, 162, 39, 0.6);
}
.fr-window-open {
  border-color: rgba(46, 204, 113, 0.4);
  border-left: 3px solid #2ecc71;
  background: linear-gradient(180deg, rgba(46, 204, 113, 0.06), var(--obsidian-raised));
}
.fr-window-open .fr-predicts-value { color: #2ecc71; }
.fr-window-mid {
  border-left: 3px solid var(--ivory-dim);
}
.fr-window-mid .fr-predicts-value { color: var(--ivory); }
.fr-window-closing {
  border-color: rgba(180, 100, 40, 0.4);
  border-left: 3px solid #d68a3c;
  background: linear-gradient(180deg, rgba(180, 100, 40, 0.06), var(--obsidian-raised));
}
.fr-window-closing .fr-predicts-value { color: #d68a3c; }
.fr-window-rebuild {
  border-color: rgba(220, 38, 38, 0.4);
  border-left: 3px solid #ef4444;
  background: linear-gradient(180deg, rgba(220, 38, 38, 0.05), var(--obsidian-raised));
}
.fr-window-rebuild .fr-predicts-value { color: #ef6161; }

/* Predicted finish — neutral gold */
.fr-predicts-finish {
  border-left: 3px solid var(--gold);
}

/* Fratello's byline take */
.fr-fratello-take {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--gold) 4%, var(--obsidian-raised)),
    var(--obsidian-raised));
  border: 1px solid var(--obsidian-line);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: 22px 24px;
}
.fr-fratello-byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--obsidian-line);
}
.fr-fratello-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), #b8860b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  color: #0a0a0a;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.4);
}
.fr-fratello-name {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ivory);
  font-weight: 500;
}
.fr-fratello-title {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-left: auto;
}
.fr-fratello-body {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ivory);
  font-style: italic;
  margin: 0;
}

/* ============================================================
   POWER RANKINGS — "updated" pill with freshness state
   ============================================================ */
.pr-updated-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid;
}
.pr-updated-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.pr-updated-fresh {
  color: #2ecc71;
  border-color: rgba(46, 204, 113, 0.5);
  background: rgba(46, 204, 113, 0.08);
}
.pr-updated-fresh .pr-updated-dot {
  background: #2ecc71;
  box-shadow: 0 0 8px rgba(46, 204, 113, 0.7);
  animation: pr-updated-pulse 2s ease-in-out infinite;
}
@keyframes pr-updated-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
.pr-updated-recent {
  color: var(--gold);
  border-color: rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.08);
}
.pr-updated-recent .pr-updated-dot { background: var(--gold); }
.pr-updated-stale {
  color: var(--ivory-dim);
  border-color: var(--obsidian-line);
  background: rgba(255, 255, 255, 0.02);
}
.pr-updated-stale .pr-updated-dot { background: var(--ivory-dim); }
.pr-updated-date {
  margin-left: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ivory-dim);
  letter-spacing: 0.04em;
}

/* Auto vs Editorial source badge on power rankings */
.pr-source-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-right: 10px;
  vertical-align: middle;
}
.pr-source-auto {
  color: var(--ivory);
  border: 1px solid rgba(201, 162, 39, 0.5);
  background: rgba(201, 162, 39, 0.08);
}
.pr-source-editorial {
  color: var(--ivory);
  border: 1px solid var(--obsidian-line);
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================================
   POSITION CARDS v2 — bigger, coverage bar (green=full, red=small),
   league rank pill, better player-name display
   ============================================================ */

/* Bigger, wider cards — 5-column grid with min widths so player names
   have room. Wraps to fewer columns on narrow screens. */
.fr-pos-grid,
.fr-pos-grid-groups {
  display: grid;
  gap: 14px;
}
.fr-pos-grid {
  grid-template-columns: repeat(5, minmax(190px, 1fr));
}
.fr-pos-grid-groups {
  grid-template-columns: repeat(3, minmax(220px, 1fr));
}
@media (max-width: 1100px) { .fr-pos-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .fr-pos-grid { grid-template-columns: repeat(2, 1fr); }
                             .fr-pos-grid-groups { grid-template-columns: 1fr; } }
@media (max-width: 460px)  { .fr-pos-grid { grid-template-columns: 1fr; } }

.fr-pos-card {
  padding: 20px 18px;
  gap: 14px;
}
.fr-pos-name {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
}
.fr-pos-header {
  align-items: flex-start;
}
.fr-pos-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* League rank pill on each position/group card */
.fr-pos-league-rank {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  border: 1px solid;
}
.fr-pos-league-top {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.14);
  box-shadow: 0 0 8px rgba(201, 162, 39, 0.35);
}
.fr-pos-league-mid {
  color: var(--gold);
  border-color: rgba(201, 162, 39, 0.4);
  background: rgba(201, 162, 39, 0.06);
}
.fr-pos-league-bot {
  color: #ef4444;
  border-color: rgba(220, 38, 38, 0.4);
  background: rgba(220, 38, 38, 0.06);
}

/* Coverage bar wrapper w/ label */
.fr-pos-coverage-wrap { display: flex; flex-direction: column; gap: 5px; }
.fr-pos-coverage-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}

/* NEW coverage-tier fills:
     high coverage (full bar, well-covered)   → green
     mid coverage                              → gold
     low coverage (small sliver, high need)    → red */
.fr-pos-cov-high { background: linear-gradient(90deg, #2ecc71, #27ae60); }
.fr-pos-cov-mid  { background: linear-gradient(90deg, var(--gold), #b8860b); }
.fr-pos-cov-low  { background: linear-gradient(90deg, #ef4444, #dc2626); }

/* Player name display: allow the name to breathe — wider column,
   subtle wrap if REALLY long, but stay one line for typical NBA names */
.fr-pos-player {
  grid-template-columns: 48px 1fr auto auto;
  font-size: 0.76rem;
  padding: 4px 0;
}
.fr-pos-player-name {
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fr-pos-player-rank { font-size: 0.72rem; }

/* AUTO badge for auto-generated news items */
.news-auto-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--ivory);
  padding: 1px 6px;
  border: 1px solid rgba(201, 162, 39, 0.5);
  border-radius: 2px;
  background: rgba(201, 162, 39, 0.06);
}

/* On This Date empty state */
.otd-empty {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--ivory-dim);
  padding: 24px 0;
  font-style: italic;
}

/* News filter chips */
.news-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.news-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--obsidian-line);
  border-radius: 3px;
  background: var(--obsidian-raised);
  color: var(--ivory-dim);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.15s;
}
.news-filter-chip:hover {
  color: var(--ivory);
  border-color: rgba(201, 162, 39, 0.4);
}
.news-filter-chip.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(201, 162, 39, 0.10);
  box-shadow: 0 0 12px rgba(201, 162, 39, 0.25);
}
.news-filter-count {
  font-size: 0.62rem;
  padding: 1px 6px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ivory-dim);
  font-weight: 600;
}
.news-filter-chip.active .news-filter-count {
  background: rgba(201, 162, 39, 0.2);
  color: var(--gold);
}

/* ============================================================
   INTERACTION LAYER — three pure-CSS behaviors added on top of
   the existing static site. No JS. No libraries. Every rule
   respects prefers-reduced-motion.
   ============================================================ */

/* -----------------------------------------------------------
   INTERACTION 1 · Gold underline hover
   Applied to text-based navigation and content links across
   the site. The line grows left-to-right over 240ms with an
   ease that feels drawn rather than mechanical. Never combined
   with a border-color swap on the same element.
   ----------------------------------------------------------- */
.nav-drawer-links a,
.nav-links a,
.nav-strip-inner a,
.news-featured .news-featured-headline,
.news-item .news-headline,
.wire-item .wire-headline,
.standings-team-name,
.standings-team,
.otd-card-title,
.capital-pick-via,
.pod-card-title,
.champion-spotlight-team {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.nav-drawer-links a::after,
.nav-links a::after,
.nav-strip-inner a::after,
.news-featured .news-featured-headline::after,
.news-item .news-headline::after,
.wire-item .wire-headline::after,
.standings-team-name::after,
.standings-team::after,
.otd-card-title::after,
.capital-pick-via::after,
.pod-card-title::after,
.champion-spotlight-team::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--gold);
  transition: width 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
}
/* Hover-driven fill of the underline */
.nav-drawer-links a:hover::after,
.nav-links a:hover::after,
.nav-strip-inner a:hover::after,
a:hover > .news-featured-headline::after,
a:hover > .news-headline::after,
a:hover > .wire-headline::after,
a:hover .standings-team-name::after,
a:hover .standings-team::after,
a:hover .otd-card-title::after,
.capital-pick-via:hover::after,
a:hover > .pod-card-title::after,
a:hover .champion-spotlight-team::after {
  width: 100%;
}
/* Reduced motion — skip the transition, still show the underline */
@media (prefers-reduced-motion: reduce) {
  .nav-drawer-links a::after,
  .nav-links a::after,
  .nav-strip-inner a::after,
  .news-featured .news-featured-headline::after,
  .news-item .news-headline::after,
  .wire-item .wire-headline::after,
  .standings-team-name::after,
  .standings-team::after,
  .otd-card-title::after,
  .capital-pick-via::after,
  .pod-card-title::after,
  .champion-spotlight-team::after {
    transition: none;
  }
}

/* -----------------------------------------------------------
   INTERACTION 2 · Focus-within highlight
   Grouped components (rows/cards containing multiple interactive
   pieces) get a subtle gold rail + tint on hover OR when any
   descendant receives focus. Layout does not shift — the
   highlight is drawn with inset box-shadow, not border.
   ----------------------------------------------------------- */
.standings-row,
.capital-card,
.matchup-row,
.pr-card,
.h2h-selector-wrap,
.h2h-team-column,
.fr-pos-card,
.wire-item,
.otd-card {
  transition: background-color 200ms ease, box-shadow 200ms ease;
}
.standings-row:hover,
.standings-row:focus-within,
.capital-card:hover,
.capital-card:focus-within,
.matchup-row:hover,
.matchup-row:focus-within,
.pr-card:hover,
.pr-card:focus-within,
.h2h-selector-wrap:hover,
.h2h-selector-wrap:focus-within,
.h2h-team-column:hover,
.h2h-team-column:focus-within,
.fr-pos-card:hover,
.fr-pos-card:focus-within,
.wire-item:hover,
.wire-item:focus-within,
.otd-card:hover,
.otd-card:focus-within {
  background-color: rgba(201, 162, 39, 0.04);
  box-shadow: inset 3px 0 0 var(--gold);
}
/* Reduced motion — kill the transition; state change still applies */
@media (prefers-reduced-motion: reduce) {
  .standings-row,
  .capital-card,
  .matchup-row,
  .pr-card,
  .h2h-selector-wrap,
  .h2h-team-column,
  .fr-pos-card,
  .wire-item,
  .otd-card {
    transition: none;
  }
}

/* -----------------------------------------------------------
   INTERACTION 3 · Reveal-on-scroll
   Native scroll-driven animation (animation-timeline: view())
   — no JS, no observers. Fades and settles 12px upward as the
   element enters the viewport. Only applied to list-shaped
   sections where sequence matters (recaps, wire, past seasons,
   on-this-date). Never on hero images, nav, or team grids.
   ----------------------------------------------------------- */
@supports (animation-timeline: view()) {
  @keyframes ashog-fade-settle {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .season-card,
  .wire-item,
  .otd-card,
  .past-season-block,
  .news-item,
  .fr-history-item {
    animation: ashog-fade-settle linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 30%;
  }
}
/* Reduced motion — skip the reveal entirely; content appears immediately */
@media (prefers-reduced-motion: reduce) {
  .season-card,
  .wire-item,
  .otd-card,
  .past-season-block,
  .news-item,
  .fr-history-item {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* ============================================================
   AFFORDANCE HYGIENE
   Anchors always show pointer cursor even through nested img/span.
   Non-clickable display cards (stat cards, milestone tiles) get
   their hover effect calmed so they don't false-advertise.
   ============================================================ */
a, a * {
  cursor: pointer;
}
/* Stat cards inside team-page franchise report — display only, no click */
.fr-block-title,
.fr-stat-strip,
.fr-stat-strip * {
  cursor: default;
}

/* ============================================================
   POWER RANKINGS v9 — broadcast crest, focused on faces/eyes.
   Bigger zoom (2.0×), per-team focal points that target the eyes
   or main mark of each logo, and horizontal mirroring for teams
   whose character currently faces left so every crest faces right.
   ============================================================ */
.pr-row {
  display: grid;
  grid-template-columns: 340px 96px 1fr;
  gap: 0;
  align-items: center;
  padding: 32px 0;
  border-bottom: 1px solid var(--obsidian-line);
  color: inherit;
  text-decoration: none;
  transition: background-color 240ms ease;
  position: relative;
}
.pr-row:hover {
  background-color: rgba(201, 162, 39, 0.03);
}
.pr-row:first-child { border-top: 1px solid var(--obsidian-line); }

.pr-row-crest {
  width: 340px;
  height: 200px;
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* IMAGE — driven by three CSS variables:
     --crest-x, --crest-y: focal point (usually where the eyes/face are)
     --crest-scale:         zoom (default 2.0)
     --crest-flip:          1 (normal) or -1 (mirror horizontally)
   object-position + transform-origin match so the zoom stays locked
   on the focal point. scaleX combines the flip and scale. */
.pr-row-crest img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--crest-x, 50%) var(--crest-y, 30%);
  transform-origin: var(--crest-x, 50%) var(--crest-y, 30%);
  transform: scale(
    calc(var(--crest-scale, 2.0) * var(--crest-flip, 1)),
    var(--crest-scale, 2.0)
  );
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1),
              filter 400ms ease;
  filter: drop-shadow(0 4px 24px rgba(201, 162, 39, 0.15));
  -webkit-mask-image: linear-gradient(to right,
    #000 0%,
    #000 45%,
    transparent 100%);
  mask-image: linear-gradient(to right,
    #000 0%,
    #000 45%,
    transparent 100%);
}
.pr-row:hover .pr-row-crest img {
  transform: scale(
    calc(var(--crest-scale, 2.0) * var(--crest-flip, 1) * 1.10),
    calc(var(--crest-scale, 2.0) * 1.10)
  );
  filter: drop-shadow(0 6px 32px rgba(201, 162, 39, 0.35));
}

/* PER-TEAM FOCAL POINTS — each dialed to catch the face/eyes.
   --crest-flip: -1 mirrors horizontally so the character faces right. */

/* Austin — angry red panda; flip to face right + tighter zoom to fill frame */
.pr-row[data-team="austin"] .pr-row-crest img {
  --crest-x: 45%; --crest-y: 46%; --crest-scale: 2.5; --crest-flip: -1;
}
/* Bay Area — hooded fighter with glowing orange eyes; zoom to fill */
.pr-row[data-team="bayarea"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 30%; --crest-scale: 2.7;
}
/* California — heart character walking left; mirror + focus on face */
.pr-row[data-team="california"] .pr-row-crest img {
  --crest-x: 52%; --crest-y: 28%; --crest-scale: 2.0; --crest-flip: -1;
}
/* Dame Dolla — mysterious figure; flip to face right + tighter zoom */
.pr-row[data-team="damedolla"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 26%; --crest-scale: 2.0; --crest-flip: -1;
}
/* Fergs — basketball character running; higher x pulls the character
   LEFTWARD in the visible frame (revealing the full ball body). */
.pr-row[data-team="lafergs"] .pr-row-crest img {
  --crest-x: 58%; --crest-y: 35%; --crest-scale: 2.4;
}
/* Leimert — profile face looking up-left; mirror + zoom in more */
.pr-row[data-team="leimert"] .pr-row-crest img {
  --crest-x: 42%; --crest-y: 42%; --crest-scale: 2.5; --crest-flip: -1;
}
/* La Salle — roaring lion facing forward, eyes upper-third */
.pr-row[data-team="lasalle"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 32%; --crest-scale: 2.0;
}
/* NY Hoopers — gorilla with glowing blue eyes; tight zoom fills the frame */
.pr-row[data-team="nyhoopers"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 22%; --crest-scale: 2.7;
}
/* Palmerston — grim reaper with glowing blue eyes */
.pr-row[data-team="palmerston"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 28%; --crest-scale: 2.0;
}
/* Vineyard — ghostly captain with glowing cyan eyes, tri-corner hat */
.pr-row[data-team="vineyard"] .pr-row-crest img {
  --crest-x: 50%; --crest-y: 30%; --crest-scale: 2.0;
}

/* RANK column */
.pr-row-rank-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.pr-row-rank {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 72;
  font-weight: 300;
  font-style: italic;
  font-size: 96px;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--gold);
  text-align: center;
  text-shadow: 0 2px 24px rgba(11, 11, 13, 0.6);
}

/* TREND arrows */
.pr-arrow {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid;
  line-height: 1;
}
.pr-arrow-up {
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}
.pr-arrow-down {
  color: #f87171;
  border-color: rgba(248, 113, 113, 0.4);
  background: rgba(248, 113, 113, 0.08);
}

/* BODY */
.pr-row-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  position: relative;
  z-index: 1;
  padding-left: 12px;
}
.pr-row-team {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 48;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ivory);
}
.pr-row-owner {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ivory-dim);
  letter-spacing: 0.005em;
}
.pr-row-receipts {
  display: flex;
  gap: 22px;
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 10px;
}
.pr-receipt {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--font-mono);
}
.pr-receipt b {
  font-size: 20px;
  font-weight: 500;
  color: var(--ivory);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.pr-receipt span {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.pr-row-blurb {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ivory-dim);
  margin-top: 14px;
  max-width: 620px;
}
.pr-row:hover .pr-row-team {
  color: var(--gold);
  transition: color 240ms ease;
}

/* Responsive */
@media (max-width: 720px) {
  .pr-row {
    grid-template-columns: 180px 64px 1fr;
    padding: 24px 0;
  }
  .pr-row-crest {
    width: 180px;
    height: 110px;
  }
  .pr-row-rank { font-size: 60px; }
  .pr-row-team { font-size: 22px; }
  .pr-row-receipts { gap: 14px; }
  .pr-receipt b { font-size: 16px; }
  .pr-receipt span { font-size: 10px; }
  .pr-row-blurb { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .pr-row-crest img { transition: none; }
  .pr-row:hover .pr-row-crest img {
    transform: scale(
      calc(var(--crest-scale, 2.0) * var(--crest-flip, 1)),
      var(--crest-scale, 2.0)
    );
  }
}

/* ============================================================
   SINCE PRESEASON — narrative prose that spells out roster
   changes and their franchise-level interpretation. Big lead
   sentence, expanded context paragraph, compact metric pills.
   ============================================================ */
#fr-changes .fr-changes-lead {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 32;
  font-size: 26px;
  line-height: 1.25;
  color: var(--ivory);
  letter-spacing: -0.01em;
  margin: 6px 0 14px;
  max-width: 780px;
}
#fr-changes .fr-changes-context {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ivory-dim);
  max-width: 720px;
  margin: 0 0 20px;
}
#fr-changes .fr-changes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
#fr-changes .fr-change-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 3px;
  border: 1px solid var(--obsidian-line);
  background: var(--obsidian-raised);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  line-height: 1;
}
#fr-changes .fr-change-pill-label {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
#fr-changes .fr-change-pill-values {
  color: var(--ivory);
  font-weight: 500;
}
#fr-changes .fr-change-pill-arrow {
  color: var(--ivory-dim);
  margin: 0 2px;
}
#fr-changes .fr-change-positive { border-left: 3px solid #4ade80; }
#fr-changes .fr-change-negative { border-left: 3px solid #f87171; }
#fr-changes .fr-change-neutral  { border-left: 3px solid var(--gold); }

#fr-changes .fr-changes-empty {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 24;
  font-size: 19px;
  line-height: 1.5;
  color: var(--ivory);
  font-style: italic;
  padding: 6px 0 4px;
  max-width: 640px;
}

/* Roster Watch — empty state when no obvious cut candidates remain */
#fr-cuts .fr-cuts-empty {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 20;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ivory);
  font-style: italic;
  padding: 6px 0 4px;
  max-width: 640px;
}