/* =============================================================
   SPORTSMEN HUB: shared stylesheet
   Static, no framework. All colors/spacing/type live in :root
   so the whole system can be lifted into a Python static renderer.
   ============================================================= */

:root {
  /* --- Base palette (dark charcoal + hot accent + highlight) --- */
  --bg:            #0b0b0d;   /* page charcoal/black */
  --surface:       #141417;   /* cards / panels */
  --surface-2:     #1c1c21;   /* raised surface, table stripes */
  --line:          #2a2a31;   /* hairline borders */
  --text:          #f4f4f6;   /* primary text (AA on --bg) */
  --text-dim:      #a7a7b0;   /* secondary text (AA on --bg) */
  --text-faint:    #74747f;   /* meta / captions */

  --accent:        #ff4438;   /* hot red-orange: primary action */
  --accent-ink:    #ffffff;   /* text on accent */
  --highlight:     #ffd60a;   /* badges, stats, medals highlight */
  --highlight-ink: #14140a;   /* text on highlight */

  /* --- Rank medals --- */
  --gold:   #ffcb2e;
  --silver: #cdd3dc;
  --bronze: #d9884b;

  /* --- Type --- */
  --font-display: "Anton", "Oswald", Impact, sans-serif; /* giant caps */
  --font-cond:    "Oswald", "Anton", sans-serif;         /* condensed headings */
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* --- Spacing scale --- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* --- Layout --- */
  --maxw: 1280px;
  --radius: 10px;
  --radius-sm: 6px;
  --header-h: 68px;

  /* --- Motion --- */
  --ease: cubic-bezier(.2,.7,.2,1);

  /* --- Per-sport signature colors (25 sports) --- */
  --sc-football:      #21c25e;
  --sc-am-football:   #8b5cf6;
  --sc-basketball:    #f97316;
  --sc-tennis:        #c6f24a;
  --sc-ufc:           #ef4444;
  --sc-f1:            #e10600;
  --sc-boxing:        #eab308;
  --sc-chess:         #93a1b5;
  --sc-darts:         #22d3ee;
  --sc-baseball:      #3b82f6;
  --sc-cricket:       #14b8a6;
  --sc-golf:          #84cc16;
  --sc-rugby:         #a855f7;
  --sc-hockey:        #38bdf8;
  --sc-cycling:       #fb7185;
  --sc-athletics:     #f59e0b;
  --sc-swimming:      #06b6d4;
  --sc-volleyball:    #fbbf24;
  --sc-tabletennis:   #f472b6;
  --sc-badminton:     #4ade80;
  --sc-snooker:       #10b981;
  --sc-esports:       #c084fc;
  --sc-wrestling:     #fb923c;
  --sc-motogp:        #60a5fa;
  --sc-handball:      #f87171;
  --sc-swim2:         #2dd4bf;
}

/* ============================ reset ============================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--highlight); text-decoration: none; }
a:hover { color: #fff; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
h1,h2,h3,h4 { line-height: 1.02; text-wrap: balance; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* focus visibility (keyboard) */
:focus-visible {
  outline: 3px solid var(--highlight);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================ layout ============================ */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--s5); }
.section { padding-block: var(--s8); }
.section--tight { padding-block: var(--s7); }
.stack > * + * { margin-top: var(--s4); }

/* section title with thick accent bar */
.sec-head { display: flex; align-items: center; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; }
.sec-title {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; font-size: clamp(1.5rem, 3.5vw, 2.4rem);
  display: flex; align-items: center; gap: var(--s4);
}
.sec-title::before {
  content: ""; width: 10px; align-self: stretch; min-height: 1.4em;
  background: var(--accent); flex: none; border-radius: 2px;
}
.sec-head .spacer { flex: 1; }
.link-more {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em;
  font-weight: 600; font-size: .95rem; color: var(--text-dim);
}
.link-more:hover { color: var(--highlight); }

/* ============================ header ============================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,11,13,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  height: var(--header-h); display: flex; align-items: center; gap: var(--s5);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 8px; flex: none;
  background: var(--accent); position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 72%, 72% 100%, 0 100%);
}
.brand__mark::after {
  content: "SH"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); color: #fff; font-size: 15px; letter-spacing: .02em;
}
.brand__name {
  font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--text); white-space: nowrap;
}
.brand__name b { color: var(--accent); }

.nav { display: flex; gap: var(--s2); margin-left: var(--s3); }
.nav a {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; font-size: .95rem; color: var(--text-dim);
  padding: 10px var(--s3); border-radius: var(--radius-sm); min-height: 44px;
  display: inline-flex; align-items: center;
}
.nav a:hover { color: #fff; background: var(--surface-2); }
.nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--accent); }

.header-search { margin-left: auto; position: relative; flex: none; }
.header-search input {
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; height: 42px; padding: 0 var(--s5) 0 40px; width: 210px;
  font: inherit; font-size: .95rem;
}
.header-search input::placeholder { color: var(--text-faint); }
.header-search .ico {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-faint); pointer-events: none;
}
.menu-toggle { display: none; }

/* ============================ ticker ============================ */
.ticker {
  background: #000; border-bottom: 1px solid var(--line);
  overflow: hidden; position: relative;
}
.ticker__label {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0;
  display: flex; align-items: center; gap: 8px; padding: 0 var(--s4);
  background: var(--accent); color: #fff;
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .8rem; white-space: nowrap;
  clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.ticker__label .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .25; } }
.ticker__track {
  display: flex; gap: 0; white-space: nowrap; padding-left: 120px;
  animation: ticker 42s linear infinite;
  font-family: var(--font-cond); font-size: .9rem;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { padding: 10px var(--s5); color: var(--text-dim); border-right: 1px solid var(--line); }
.ticker__item b { color: var(--text); font-weight: 600; }
.ticker__item .up { color: var(--sc-football); }
.ticker__item .down { color: var(--accent); }
.ticker__item .pill {
  background: var(--highlight); color: var(--highlight-ink); font-weight: 700;
  padding: 1px 7px; border-radius: 4px; margin-right: 8px; font-size: .78rem;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================ hero (home) ============================ */
.hero { position: relative; overflow: hidden; background: var(--bg); }
.hero__grid {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: center;
  min-height: min(78vh, 660px); gap: var(--s6);
}
.hero__copy { padding-block: var(--s8); position: relative; z-index: 2; }
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s4);
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .14em;
  font-weight: 600; font-size: .82rem; color: var(--highlight);
}
.hero__eyebrow::before { content:""; width: 26px; height: 2px; background: var(--highlight); }
.hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.6rem, 7.5vw, 6rem); line-height: .9; letter-spacing: .005em;
}
.hero h1 .hl { color: var(--accent); }
.hero__sub { color: var(--text-dim); font-size: 1.1rem; max-width: 46ch; margin-top: var(--s5); }

/* big search */
.searchbar { display: flex; margin-top: var(--s6); max-width: 520px; }
.searchbar input {
  flex: 1; background: var(--surface); border: 1px solid var(--line); border-right: none;
  color: var(--text); font: inherit; font-size: 1.05rem; padding: 0 var(--s5); height: 56px;
  border-radius: var(--radius) 0 0 var(--radius);
}
.searchbar input::placeholder { color: var(--text-faint); }
.searchbar button {
  height: 56px; padding: 0 var(--s6); border: none; background: var(--accent); color: #fff;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: 1rem;
}
.searchbar button:hover { background: #ff5b50; }

/* angled hero photo */
.hero__media { position: relative; align-self: stretch; }
.hero__photo {
  position: absolute; inset: 0 -20vw 0 0; min-height: 100%;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 900px){ .hero__photo { position: relative; inset: auto; clip-path: polygon(0 8%,100% 0,100% 100%,0 100%); } }

/* stat counters */
.stat-strip {
  display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line);
  background: var(--surface);
}
.stat {
  padding: var(--s6) var(--s5); text-align: center; border-right: 1px solid var(--line);
}
.stat:last-child { border-right: none; }
.stat__num {
  font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--highlight);
}
.stat__label {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-dim); font-size: .85rem; margin-top: 6px;
}

/* ============================ photo placeholder ============================ */
/* In production replace .photo with:
   <img class="photo" loading="lazy" width="480" height="270"
        src="/media/{athlete}.jpg" alt="{Athlete name}"> */
.photo {
  position: relative; aspect-ratio: 16/9; overflow: hidden;
  background:
    linear-gradient(135deg, color-mix(in oklab, var(--sport, var(--accent)) 55%, #000) 0%, #17171b 78%);
  isolation: isolate;
}
.photo::before {
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg, transparent 0 12px, rgba(255,255,255,.045) 12px 13px);
  z-index: 0;
}
.photo::after {
  content: attr(data-ph); position: absolute; left: 10px; bottom: 8px; z-index: 1;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .62rem;
  color: rgba(255,255,255,.42); letter-spacing: .04em;
}
.photo--portrait { aspect-ratio: 3/4; }
.photo--wide { aspect-ratio: 21/9; }

/* ============================ athlete card ============================ */
.card-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: var(--s4); overflow-x: auto; padding-bottom: var(--s3); scroll-snap-type: x mandatory;
}
.card-row .a-card { scroll-snap-align: start; }

.card-grid {
  display: grid; gap: var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}

.a-card {
  position: relative; display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
  color: var(--text);
}
.a-card:hover {
  transform: translateY(-4px);
  border-color: var(--sport, var(--accent));
  box-shadow: 0 12px 32px -14px color-mix(in oklab, var(--sport, var(--accent)) 60%, transparent),
              0 0 0 1px color-mix(in oklab, var(--sport, var(--accent)) 40%, transparent);
}
.a-card .photo { border-radius: 0; aspect-ratio: 3/4; }
/* 480×270 source crops into the portrait card via object-fit: cover */
.a-card .a-card__img { transition: transform .5s var(--ease); }
.a-card:hover .a-card__img { transform: scale(1.06); }
.a-card__overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top, rgba(6,6,8,.92) 4%, rgba(6,6,8,.35) 42%, transparent 70%);
}
.a-card__body {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: var(--s4);
}
.a-card__rank {
  position: absolute; top: 10px; left: 10px; z-index: 3;
  font-family: var(--font-display); background: var(--highlight); color: var(--highlight-ink);
  min-width: 34px; height: 30px; padding: 0 8px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
}
.a-card__name {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: 1.25rem; line-height: .98; letter-spacing: .01em;
}
.a-card__meta {
  display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap;
}
.chip {
  --c: var(--sport, var(--accent));
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 600; font-size: .72rem; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  color: color-mix(in oklab, var(--c) 82%, #fff);
  background: color-mix(in oklab, var(--c) 20%, #000);
  border: 1px solid color-mix(in oklab, var(--c) 45%, transparent);
}
.chip .swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.a-card__stat { font-size: .82rem; color: var(--text-dim); }
.a-card__stat b { color: var(--highlight); font-weight: 700; }

/* ============================ sports grid ============================ */
.sports-grid {
  display: grid; gap: var(--s3);
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.sport-tile {
  --c: var(--sport, var(--accent));
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  min-height: 116px; padding: var(--s4); border-radius: var(--radius);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-left: 5px solid var(--c);
  overflow: hidden; transition: transform .25s var(--ease), background .25s var(--ease);
}
.sport-tile::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px;
  background: var(--c); opacity: .12; border-radius: 50%; transition: opacity .25s var(--ease);
}
.sport-tile:hover { transform: translateY(-3px); background: color-mix(in oklab, var(--c) 12%, var(--surface)); }
.sport-tile:hover::after { opacity: .22; }
.sport-tile__name {
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  font-size: 1.15rem; letter-spacing: .01em; position: relative; z-index: 1;
}
.sport-tile__count { color: var(--text-dim); font-size: .84rem; position: relative; z-index: 1; }
.sport-tile__count b { color: var(--c); }

/* ============================ news list ============================ */
.news-list { display: grid; gap: var(--s1); }
.news-item {
  display: grid; grid-template-columns: 132px 1fr; gap: var(--s4); align-items: center;
  padding: var(--s3); border-radius: var(--radius); border: 1px solid transparent;
  transition: background .2s var(--ease), border-color .2s var(--ease); color: var(--text);
}
.news-item:hover { background: var(--surface); border-color: var(--line); }
.news-item .photo { border-radius: var(--radius-sm); }
.news-item__kicker {
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .08em;
  font-size: .72rem; font-weight: 600; color: var(--accent); margin-bottom: 3px;
}
.news-item__title { font-family: var(--font-cond); font-weight: 600; font-size: 1.15rem; line-height: 1.05; }
.news-item__meta { color: var(--text-faint); font-size: .8rem; margin-top: 5px; }

/* ============================ rank teaser tiles ============================ */
.rank-tiles { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.rank-tile {
  position: relative; border-radius: var(--radius); overflow: hidden; color: #fff;
  background: var(--surface); border: 1px solid var(--line); min-height: 200px; display: flex;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.rank-tile:hover { transform: translateY(-3px); border-color: var(--highlight); }
.rank-tile .photo { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.rank-tile__grad { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(6,6,8,.9) 30%, transparent 90%); z-index: 1; }
.rank-tile__body { position: relative; z-index: 2; padding: var(--s5); align-self: flex-end; }
.rank-tile__hdr { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .08em; color: var(--highlight); font-size: .8rem; font-weight: 600; }
.rank-tile__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.8rem; line-height: .95; margin-top: 6px; }
.rank-tile__cta { margin-top: var(--s4); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; color: #fff; font-weight: 600; font-size: .85rem; }

/* ============================ filter chips (directory) ============================ */
.chip-scroller { display: flex; flex-wrap: wrap; gap: var(--s2); }
.fchip {
  --c: var(--sport, var(--accent));
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px;
  padding: 8px 14px; border-radius: 999px; background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--line); font-family: var(--font-cond); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
  transition: all .2s var(--ease);
}
.fchip .swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.fchip:hover { color: #fff; border-color: var(--c); }
.fchip[aria-pressed="true"], .fchip.is-active {
  color: color-mix(in oklab, var(--c) 85%, #fff);
  background: color-mix(in oklab, var(--c) 22%, #000);
  border-color: var(--c);
}

/* A-Z jump bar */
.az-bar { display: flex; flex-wrap: wrap; gap: 4px; }
.az-bar a {
  width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-dim);
  font-family: var(--font-cond); font-weight: 700; font-size: .95rem;
}
.az-bar a:hover { color: #fff; border-color: var(--accent); background: var(--surface-2); }

.toolbar {
  display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap;
  padding: var(--s4); background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: var(--s5);
}
.toolbar .search-inline { position: relative; flex: 1; min-width: 220px; }
.toolbar .search-inline input {
  width: 100%; height: 48px; padding: 0 var(--s4) 0 42px; background: var(--surface-2);
  border: 1px solid var(--line); color: var(--text); border-radius: var(--radius); font: inherit;
}
.toolbar .search-inline .ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); }
.select {
  height: 48px; padding: 0 var(--s4); background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius); font: inherit;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: .85rem;
}

/* result count */
.result-meta { color: var(--text-dim); font-size: .9rem; margin-bottom: var(--s4); }
.result-meta b { color: var(--text); }
.letter-head {
  font-family: var(--font-display); font-size: 2rem; color: var(--text-faint);
  border-bottom: 2px solid var(--line); padding-bottom: 6px; margin: var(--s7) 0 var(--s4);
  scroll-margin-top: 120px;
}

/* ============================ profile ============================ */
.pro-hero { position: relative; }
.pro-hero .photo { aspect-ratio: 21/9; }
@media (max-width: 700px){ .pro-hero .photo { aspect-ratio: 4/5; } }
.pro-hero__grad { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(6,6,8,.95) 6%, rgba(6,6,8,.15) 55%, rgba(6,6,8,.5) 100%); }
.pro-hero__inner { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; }
.pro-hero__content { padding-block: var(--s7); }
.pro-hero h1 {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.8rem, 9vw, 7rem); line-height: .85; letter-spacing: .01em;
}
.pro-hero__tags { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.pro-hero__meta { color: var(--text-dim); margin-top: var(--s4); font-size: 1.05rem; max-width: 60ch; }

.pro-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--s7); align-items: start; }
@media (max-width: 900px){ .pro-grid { grid-template-columns: 1fr; } }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s5); }
.panel + .panel { margin-top: var(--s4); }
.panel__title { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; font-size: 1.05rem; margin-bottom: var(--s4); display: flex; align-items: center; gap: 10px; }
.panel__title::before { content:""; width: 6px; height: 18px; background: var(--accent); border-radius: 2px; }

.factsheet { display: grid; grid-template-columns: 1fr; gap: 0; }
.factsheet .row { display: flex; justify-content: space-between; gap: var(--s4); padding: 11px 0; border-bottom: 1px solid var(--line); }
.factsheet .row:last-child { border-bottom: none; }
.factsheet dt { color: var(--text-dim); font-size: .9rem; }
.factsheet dd { font-family: var(--font-cond); font-weight: 600; text-align: right; }

/* net worth highlight card */
.networth {
  background: linear-gradient(135deg, var(--highlight), #ffb703);
  color: var(--highlight-ink); border-radius: var(--radius); padding: var(--s5); border: none;
}
.networth__label { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; font-size: .8rem; opacity: .8; }
.networth__num { font-family: var(--font-display); font-size: clamp(2.6rem,6vw,3.4rem); line-height: 1; margin: 6px 0; }
.networth__note { font-size: .85rem; font-weight: 600; opacity: .8; }

.honours { display: grid; gap: var(--s2); }
.honour { display: flex; align-items: center; gap: var(--s3); padding: 10px 0; border-bottom: 1px solid var(--line); }
.honour:last-child { border-bottom: none; }
.honour__medal { width: 30px; height: 30px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--font-display); font-size: .8rem; color: #14140a; background: var(--gold); }
.honour__txt b { font-family: var(--font-cond); }
.honour__cnt { margin-left: auto; font-family: var(--font-display); color: var(--highlight); font-size: 1.3rem; }

/* FAQ accordion */
.faq { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:last-child { border-bottom: none; }
.faq summary {
  list-style: none; cursor: pointer; padding: var(--s4) var(--s5); min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--font-cond); font-weight: 600; font-size: 1.05rem; background: var(--surface);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--accent); font-size: 1.4rem; transition: transform .2s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--surface-2); }
.faq__body { padding: 0 var(--s5) var(--s5); color: var(--text-dim); }

/* big CTA */
.cta-big {
  display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 var(--s6);
  background: var(--accent); color: #fff; border-radius: var(--radius); border: none;
  font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; font-size: 1.1rem; transition: background .2s var(--ease), transform .2s var(--ease);
}
.cta-big:hover { background: #ff5b50; transform: translateY(-2px); color: #fff; }

/* ============================ ranking table ============================ */
.rank-intro { max-width: 68ch; }
.rank-intro .lead { font-size: 1.2rem; color: var(--text); }
.rank-intro p { color: var(--text-dim); margin-top: var(--s4); }

.rank-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.rank { width: 100%; border-collapse: collapse; min-width: 720px; }
table.rank thead th {
  text-align: left; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em;
  font-size: .78rem; color: var(--text-dim); padding: var(--s4); background: var(--surface-2);
  position: sticky; top: 0; border-bottom: 2px solid var(--accent);
}
table.rank td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rank tbody tr { transition: background .15s var(--ease); }
table.rank tbody tr:hover { background: var(--surface); box-shadow: inset 4px 0 0 var(--accent); }
.rk { font-family: var(--font-display); font-size: 1.4rem; width: 64px; color: var(--text-dim); }
.medal {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 1.05rem; color: #14140a;
  box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 4px 10px -4px #000;
}
.medal--gold { background: var(--gold); }
.medal--silver { background: var(--silver); }
.medal--bronze { background: var(--bronze); }
.rk-athlete { display: flex; align-items: center; gap: var(--s4); }
.rk-athlete .thumb { width: 64px; height: 40px; flex: none; border-radius: 6px; }
.rk-athlete .thumb.photo { aspect-ratio: auto; }
.rk-name { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; font-size: 1.1rem; line-height: 1; }
.rk-name small { display: block; font-family: var(--font-body); font-weight: 400; text-transform: none; color: var(--text-faint); font-size: .78rem; margin-top: 3px; }
.honour-badges { display: inline-flex; gap: 6px; align-items: center; }
.hb { font-family: var(--font-display); font-size: .8rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; color: var(--highlight); }
td.num { font-family: var(--font-cond); font-weight: 600; }

/* ============================ sport page header ============================ */
.sport-hero {
  --c: var(--sport, var(--accent));
  position: relative; overflow: hidden;
  background:
    linear-gradient(120deg, color-mix(in oklab, var(--c) 40%, #0b0b0d) 0%, #0b0b0d 62%);
  border-bottom: 4px solid var(--c);
}
.sport-hero::after {
  content: ""; position: absolute; right: -6%; top: -30%; width: 45%; height: 160%;
  background: var(--c); opacity: .1; transform: skewX(-12deg);
}
.sport-hero__inner { padding-block: var(--s8); position: relative; z-index: 1; }
.sport-hero__eyebrow { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--c); }
.sport-hero h1 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(3rem, 10vw, 6.5rem); line-height: .88; margin: 8px 0; }
.sport-hero__stats { display: flex; gap: var(--s7); margin-top: var(--s5); flex-wrap: wrap; }
.sport-hero__stat b { font-family: var(--font-display); font-size: 2rem; color: #fff; display: block; }
.sport-hero__stat span { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); font-size: .8rem; }

/* mini leaderboard */
table.leaderboard { width: 100%; border-collapse: collapse; }
table.leaderboard th { text-align: left; font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; font-size: .76rem; color: var(--text-dim); padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
table.leaderboard td { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line); }
table.leaderboard tr:hover td { background: var(--surface); }
.lb-rank { font-family: var(--font-display); color: var(--sport, var(--accent)); font-size: 1.2rem; width: 44px; }
.lb-worth { font-family: var(--font-cond); font-weight: 700; color: var(--highlight); text-align: right; }

/* ============================ footer ============================ */
.site-footer { border-top: 1px solid var(--line); background: #08080a; margin-top: var(--s9); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--s6); padding-block: var(--s8); }
.footer-grid h4 { font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; margin-bottom: var(--s4); color: var(--text); }
.footer-grid li { margin-bottom: 8px; }
.footer-grid a { color: var(--text-dim); font-size: .92rem; }
.footer-grid a:hover { color: #fff; }
.footer-note { color: var(--text-faint); font-size: .82rem; max-width: 42ch; margin-top: var(--s4); }
.footer-bar { border-top: 1px solid var(--line); padding-block: var(--s4); display: flex; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; color: var(--text-faint); font-size: .82rem; }

/* annotation callouts (design spec notes) */
.anno {
  border: 1px dashed color-mix(in oklab, var(--highlight) 50%, transparent);
  background: color-mix(in oklab, var(--highlight) 7%, transparent);
  border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s4) 0;
  font-size: .82rem; color: var(--text-dim);
}
.anno b { color: var(--highlight); font-family: var(--font-cond); text-transform: uppercase; letter-spacing: .04em; }

/* skip link */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--highlight); color: #000; padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }

/* ============================ responsive ============================ */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pro-hero h1 { font-size: clamp(2.4rem, 12vw, 4rem); }
}
@media (max-width: 720px) {
  .nav { display: none; }
  .header-search input { width: 150px; }
  .stat-strip { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid var(--line); }
  .news-item { grid-template-columns: 100px 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .container { padding-inline: var(--s4); }
  .header-search { display: none; }
}

/* ============ appendix: tokens + components beyond the mockups ============ */
:root{--sc-nascar:#ff6b1a;--sc-winter:#7dd3fc;--sc-gym:#f9a8d4;--sc-marathon:#fbbf24;
--sc-horse:#c08552;
/* WCAG: template's #74747f measured 4.26:1 on surface rows; lift to pass 4.5 */
--text-faint:#8b8b96;}
.brand__mark::after{content:"aw."!important;text-transform:lowercase;font-size:13px!important}
.dot-o{color:var(--accent)}
/* ==== CUT batch (Steve 2026-07-14) ==== */
.a-card__sicon{position:absolute;top:10px;right:10px;z-index:3;display:inline-flex;width:34px;height:34px;
align-items:center;justify-content:center;border-radius:9px;font-size:18px;
background:color-mix(in oklab,var(--sport,var(--accent)) 26%,#000);color:var(--sport,var(--accent));
border:1px solid color-mix(in oklab,var(--sport,var(--accent)) 55%,transparent)}
.a-card:hover{box-shadow:0 6px 28px color-mix(in oklab,var(--sport,var(--accent)) 35%,transparent);
border-color:var(--sport,var(--accent));transform:translateY(-3px)}
.a-card__statline{margin-top:6px;font-family:var(--font-mono);font-size:.78rem;color:#d9d8d2}
.a-card__statline b{color:var(--highlight);font-weight:600}
.a-card__nation{margin-top:3px;font-family:var(--font-mono);font-size:.68rem;color:#a8a7a1;
text-transform:uppercase;letter-spacing:.06em}
.chip-ico{display:inline-flex;font-size:12px;margin-right:5px;vertical-align:-.1em}
.vs-picker{background:var(--surface)!important;border:1px solid var(--line)!important;border-radius:12px;padding:26px!important}
.vs-picker input{width:100%;background:#0e0e12!important;border:1.5px solid var(--line)!important;color:var(--text)!important;
border-radius:10px!important;padding:14px 16px!important;min-height:52px;font:inherit;font-size:1rem}
.vs-picker input:focus{border-color:var(--accent)!important}
.vs-picker .sugg button,.vs-picker [role=listbox] button{background:var(--surface-2);border:1px solid var(--line);
color:var(--text);border-radius:8px;padding:10px 12px;width:100%;text-align:left;font:inherit;margin-top:4px}
.vs-picker .sugg button:hover,.vs-picker [role=listbox] button:hover{border-color:var(--accent)}
.cmp-go{background:var(--accent)!important;color:#fff!important;border:0;border-radius:10px;
padding:15px 34px;font-family:var(--font-cond);font-weight:700;font-size:1rem;min-height:52px;text-transform:uppercase}
.rk-name small,.hb,.honour__txt{overflow:visible;text-overflow:clip;white-space:normal}
td.num,.lb-worth{white-space:nowrap}
.hb-full{font-size:.85rem;color:var(--text-dim)}
.hb-full b{color:var(--text)}
.hb-full .cnt{font-family:var(--font-mono);color:var(--highlight);margin-left:8px;white-space:nowrap}
.rec-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;transition:border-color .15s}
.rec-card:hover{border-color:var(--sport,var(--accent))}
.rec-card .rec-vis{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;padding:18px;
background:linear-gradient(140deg,color-mix(in oklab,var(--sport,var(--accent)) 30%,#000),#101014)}
.rec-card .rec-vis b{font-family:var(--font-cond);font-weight:700;font-size:1.12rem;line-height:1.2;
text-align:center;color:#fff;text-transform:uppercase}
.rec-card .nc-body{padding:13px 15px 15px}
.pager{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0;justify-content:center}
.pager a,.pager span{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center;
background:var(--surface);border:1px solid var(--line);border-radius:8px;font-family:var(--font-mono);font-size:.85rem;padding:0 10px}
.pager .cur{background:var(--accent);color:#fff;border-color:var(--accent)}
.pager a:hover{border-color:var(--accent)}
/* white mixed-case wordmark (Steve: "logo has to be white, AthleteWiki") */
.brand__name{text-transform:none!important;letter-spacing:.01em;color:#fff}
.brand__name b{color:#fff!important}
/* centred stat tables everywhere (Steve: "not all of them are centred") */
.vs-tbl td{text-align:center!important}
img.flag{display:inline-block;vertical-align:-3px;margin-right:6px;border-radius:2px}
.nat-cell{white-space:nowrap}
.pgjump{display:inline-flex;gap:6px;margin-left:8px}
.pgjump input{width:82px;background:var(--surface);border:1px solid var(--line);color:var(--text);
border-radius:8px;padding:0 10px;min-height:40px;font:inherit;font-size:.85rem}
.pgjump button{min-height:40px;padding:0 14px;background:var(--accent);color:#fff;border:0;
border-radius:8px;font-family:var(--font-cond);font-weight:700;cursor:pointer}
/* photo tiles (rankings / nationality: real images per card) */
.photo-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.photo-tile{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
border:1px solid var(--line);aspect-ratio:16/10;background:var(--surface)}
.photo-tile .pt-img{position:absolute;inset:0}
.photo-tile .pt-img img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.photo-tile:hover .pt-img img{transform:scale(1.05)}
.photo-tile .pt-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(6,6,8,.92) 88%)}
.photo-tile .pt-body{position:absolute;left:0;right:0;bottom:0;padding:13px 15px;border-left:5px solid var(--sport,var(--accent))}
.photo-tile .pt-body b{display:block;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
font-size:1.05rem;color:#fff;line-height:1.15}
.photo-tile .pt-body span{color:#c9c8c2;font-family:var(--font-mono);font-size:.72rem}
.photo-tile:hover{border-color:var(--sport,var(--accent))}
/* VS tiles (compare: both athletes' photos) */
.vs-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.vs-tile{display:block;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.vs-tile .vt-imgs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;aspect-ratio:16/7}
.vs-tile .vt-imgs .photo{aspect-ratio:auto;height:100%}
.vs-tile .vt-imgs img{width:100%;height:100%;object-fit:cover}
.vs-tile .vt-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
background:var(--accent);color:#fff;font-family:var(--font-display);font-size:.85rem;
padding:6px 10px;border-radius:8px;border:2px solid #0a0a0c}
.vs-tile .vt-body{padding:11px 14px;border-left:5px solid var(--sport,var(--accent))}
.vs-tile .vt-body b{display:block;font-family:var(--font-cond);font-weight:700;text-transform:uppercase;font-size:.98rem}
.vs-tile .vt-body span{color:var(--text-dim);font-family:var(--font-mono);font-size:.72rem}
.vs-tile:hover{border-color:var(--sport,var(--accent))}
/* OTD cards (home + on-this-day page) */
.otd-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.otd-card{display:grid;grid-template-columns:120px 1fr;background:var(--surface);
border:1px solid var(--line);border-left:5px solid var(--sport,var(--accent));
border-radius:var(--radius);overflow:hidden;min-height:120px}
.otd-card .otd-photo{aspect-ratio:auto;height:100%}
.otd-card .otd-photo img{width:100%;height:100%;object-fit:cover}
.otd-card .otd-body{padding:12px 14px;display:flex;flex-direction:column;gap:5px}
.otd-card .otd-year{font-family:var(--font-display);font-size:1.35rem;color:var(--sport,var(--accent));line-height:1}
.otd-card p{font-size:.88rem;color:var(--text-dim);line-height:1.45;margin:0;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.otd-card .otd-who{font-family:var(--font-mono);font-size:.7rem;color:var(--highlight);
text-transform:uppercase;letter-spacing:.05em;margin-top:auto}
.otd-card:hover{border-color:var(--sport,var(--accent))}
/* news hero carousel */
.hero-carousel{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line)}
.hc-track{display:flex;transition:transform .45s ease}
.hc-slide{position:relative;min-width:100%;aspect-ratio:21/8;display:block;background:var(--surface)}
.hc-slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hc-grad{position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(5,5,7,.95) 92%)}
.hc-body{position:absolute;left:0;right:0;bottom:0;padding:22px 26px 30px;border-left:6px solid var(--sport,var(--accent))}
.hc-kick{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--highlight)}
.hc-body h3{font-family:var(--font-cond);font-weight:700;font-size:clamp(1.15rem,2.6vw,1.9rem);
line-height:1.15;color:#fff;margin:7px 0 6px;max-width:32ch}
.hc-meta{font-family:var(--font-mono);font-size:.72rem;color:#b9b8b2}
.hc-arr{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;
background:rgba(10,10,12,.72);border:1px solid var(--line);color:#fff;font-size:1rem;cursor:pointer;z-index:3}
.hc-arr:hover{border-color:var(--accent)}
.hc-prev{left:12px}.hc-next{right:12px}
.hc-dots{position:absolute;bottom:10px;right:16px;display:flex;gap:6px;z-index:3}
.hc-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.3);border:0;cursor:pointer;padding:0}
.hc-dot.on{background:var(--accent)}
@media (max-width:720px){
.hc-slide{aspect-ratio:16/11}
.hc-body{padding:14px 14px 26px}
.hc-arr{display:none}
.otd-card{grid-template-columns:96px 1fr}
}
/* finger-scrollable trending row */
.card-row.is-scrollable{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.card-row.is-scrollable::-webkit-scrollbar{display:none}
/* athletes page quick links */
.quick-links{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 var(--s5)}
.qlink{display:inline-flex;align-items:center;min-height:42px;padding:0 16px;background:var(--surface);
border:1px solid var(--line);border-radius:999px;font-family:var(--font-cond);font-weight:700;
text-transform:uppercase;font-size:.82rem}
.qlink:hover{border-color:var(--accent);color:var(--accent)}
/* search stays inside the page border at EVERY width (the OTD nav item made
the header overflow at 1280px too, not just mobile) */
.header-inner{min-width:0}
.header-inner .nav{min-width:0;flex-shrink:1}
.header-search{flex:0 1 auto;min-width:0}
.header-search input{width:clamp(110px,13vw,210px);min-width:0;max-width:100%}
@media (max-width:1120px){.header-search input{width:120px}}
/* mobile: search stays inside the page border */
@media (max-width:720px){
.header-inner{padding-inline:14px}
.header-search{flex:1;min-width:0;margin-left:0}
.header-search input{width:100%!important;min-width:0;max-width:100%}
.ticker__track{min-width:0}
}
/* mobile hardening (Playwright audit 2026-07-14): grid/flex items must be
allowed to shrink, else overflow-x:auto wrappers never engage and the layout
viewport itself expands (page renders zoomed-out on phones) */
.section>div,.section>div>div,.news-list,.news-item,.news-item>div,
.rank-table-wrap,.hero__copy,.searchbar,.searchbar input{min-width:0}
.news-item__title,.news-card__body,.nc-body{overflow-wrap:anywhere}
@media (max-width:900px){
section.section.container[style*="grid-template-columns"]{display:block!important}
section.section.container[style*="grid-template-columns"]>div+div{margin-top:var(--s7)}
}
/* mobile nav (Playwright audit 2026-07-14): the template hides .nav under
720px with NO replacement; phones had zero navigation. Scrollable pill row
instead of a hamburger: one row under the brand, every section reachable. */
@media (max-width:720px){
.header-inner{flex-wrap:wrap;row-gap:6px}
.nav{display:flex!important;order:3;width:100%;overflow-x:auto;gap:6px;
padding:2px 0 6px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav>a,.nav .nav-dd>a{display:inline-flex;align-items:center;white-space:nowrap;
min-height:40px;padding:0 13px;background:var(--surface);border:1px solid var(--line);
border-radius:999px;font-size:.82rem;touch-action:manipulation}
.nav>a[aria-current=page],.nav .nav-dd>a[aria-current=page]{border-color:var(--accent);color:var(--accent)}
.nav-dd__menu{display:none!important}
input[type=search]{font-size:16px!important}
}
@media (max-width:420px){
.header-search{display:flex!important}
}

/* brandbook type + logo on the dark pattern (Steve 2026-06-15) */
:root{--font-display:"Archivo Black","Space Grotesk",sans-serif;
--font-cond:"Space Grotesk",sans-serif;
--font-body:"Space Grotesk",system-ui,sans-serif;
--font-mono:"IBM Plex Mono",ui-monospace,monospace;
--maxw:1400px}
/* Archivo Black runs wider than Anton: size the hero so each line holds */
.hero h1{font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.02}
.pro-hero h1{font-size:clamp(2rem,5vw,3.9rem)}
.pagehead h1{font-size:clamp(1.9rem,4.6vw,3.2rem)}
.brand__mark::after{content:"aw."!important;text-transform:lowercase!important;
font-family:"Space Grotesk",sans-serif!important;font-weight:700;font-size:13px!important;letter-spacing:-.02em}
.stat__num,.networth__num,td.num,.lb-worth,.factsheet dd,.honour__cnt,.a-card__stat,
.news-item__meta,.sport-hero__stat b{font-family:var(--font-mono)}
.hero__eyebrow,.rank-tile__hdr,.sport-hero__eyebrow{font-family:var(--font-mono);letter-spacing:.08em}
.stack p,.panel p,.prose,.faq__body,.pagehead p,.pro-hero__meta{font-family:"Source Serif 4",Georgia,serif}
.dot-o{color:var(--accent)}
/* icon system (inline SVG, currentColor) */
.s-ico svg,.u-ico svg{display:inline-block;vertical-align:-0.12em}
.tile-ico{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;
border-radius:9px;background:color-mix(in oklab,var(--sport,var(--accent)) 18%,#000);
color:var(--sport,var(--accent));font-size:19px;margin-bottom:6px}
.dd-ico{display:inline-flex;width:22px;height:22px;align-items:center;justify-content:center;
color:var(--sport,var(--accent));font-size:15px;flex:none}
.hero-ico{display:inline-flex;width:.9em;height:.9em;align-items:center;justify-content:center;
color:var(--sport,var(--accent));font-size:.72em;margin-right:14px;vertical-align:-.08em}
.sec-ico{display:inline-flex;color:var(--accent);font-size:1.05em;margin-right:2px;vertical-align:-.14em}
.glossary{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.glossary .g{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 15px}
.glossary .g b{font-family:var(--font-cond);text-transform:uppercase;font-size:.95rem;color:var(--highlight);display:block;margin-bottom:4px}
.glossary .g span{color:var(--text-dim);font-size:.88rem}
/* ============ intuitive routing (2026-06-15 nav pass) ============ */
/* template hid .nav entirely under 720px: mobile lost ALL navigation.
   Replace with a thumb-scrollable strip; dropdown opens via :focus-within on tap. */
@media (max-width: 720px){
  .header-inner{flex-wrap:wrap;height:auto;padding-block:10px;gap:10px}
  .nav{display:flex!important;order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;gap:2px;margin-left:0;padding-bottom:2px}
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav-dd>a{white-space:nowrap;padding:10px 12px;min-height:44px;display:inline-flex;align-items:center}
  .header-search{margin-left:auto}
}
/* current-section indicator stays visible when scrolled */
.nav a[aria-current="page"],.nav-dd>a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -3px 0 var(--accent)}
/* hub map page */
.map-cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.map-cols h2{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;font-size:1.1rem;
margin-bottom:10px;display:flex;align-items:center;gap:8px}
.map-cols h2::before{content:"";width:6px;height:18px;background:var(--accent)}
.map-cols ul{display:grid;gap:7px}
.map-cols a{color:var(--text-dim);font-size:.92rem}
.map-cols a:hover{color:var(--text)}
/* centering fixes (2026-06-15, Steve: content sat right on wide screens).
   The template's .hero__photo used position:absolute inset "0 -20vw 0 0", bleeding
   20vw past the container. Replaced with an in-flow image bound to its grid column. */
.hero-photo-flow{position:relative;height:100%;min-height:420px;border-radius:var(--radius);
overflow:hidden;clip-path:polygon(9% 0,100% 0,100% 100%,0 100%)}
.hero-photo-flow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__grid{grid-template-columns:1.05fr .95fr}
.stat-strip{border:1px solid var(--line);overflow:hidden}
.stat:last-child{border-right:none}
/* head-to-head block on profiles */
.h2h{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:10px}
/* nav sports dropdown (CSS-only, hover + focus-within, keyboard reachable) */
.nav{position:relative}
.nav-dd{position:relative;display:inline-block}
.nav-dd>a{display:inline-flex;align-items:center;gap:6px}
.nav-dd>a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.nav-dd__menu{position:absolute;left:0;top:100%;min-width:520px;background:#101014;
border:1px solid var(--line);border-top:3px solid var(--accent);border-radius:0 0 10px 10px;
padding:14px;display:none;grid-template-columns:repeat(3,1fr);gap:2px;z-index:60;
box-shadow:0 22px 50px rgba(0,0,0,.55)}
.nav-dd:hover .nav-dd__menu,.nav-dd:focus-within .nav-dd__menu{display:grid}
.nav-dd__menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:7px;
font:600 .85rem Inter,sans-serif;color:var(--text-dim);text-transform:none;letter-spacing:0}
.nav-dd__menu a:hover{background:var(--surface-2);color:var(--text)}
.nav-dd__menu .sw{width:9px;height:9px;border-radius:3px;background:var(--sport,var(--accent));flex:none}
.nav-dd__all{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:10px;
color:var(--highlight)!important;justify-content:center}
@media(max-width:900px){.nav-dd__menu{position:fixed;left:12px;right:12px;min-width:0;grid-template-columns:repeat(2,1fr)}}
/* breadcrumbs */
.crumbs{display:flex;gap:8px;flex-wrap:wrap;font:600 .74rem Oswald,Inter,sans-serif;
text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);margin:22px 0 0}
.crumbs a{color:var(--text-dim)}.crumbs a:hover{color:var(--text)}
.crumbs .here{color:var(--highlight)}
/* birthdays */
.bmonth-head{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;
font-size:1.45rem;margin:38px 0 16px;display:flex;align-items:center;gap:12px}
.bmonth-head::before{content:"";width:8px;height:24px;background:var(--accent);border-radius:2px}
.a-card.today{outline:3px solid var(--highlight);outline-offset:2px}
.bday-tag{position:absolute;top:10px;right:10px;z-index:3;background:var(--highlight);color:var(--highlight-ink);
font:700 .68rem Inter,sans-serif;padding:3px 9px;border-radius:99px;text-transform:uppercase;letter-spacing:.05em}
/* records */
.rec{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sport,var(--highlight));
border-radius:10px;padding:14px 18px;margin-bottom:10px}
.rec b{font-weight:700}.rec span{color:var(--text-dim);display:block;font-size:.9rem}
.rec .who{color:var(--highlight);font:700 .74rem Oswald,Inter,sans-serif;text-transform:uppercase;letter-spacing:.07em}
/* prose + simple pages */
.prose{max-width:72ch;color:var(--text-dim);font-size:1.03rem}
.prose p{margin-bottom:14px}
.prose h2{font-family:var(--font-cond);font-weight:700;text-transform:uppercase;color:var(--text);
font-size:1.35rem;margin:28px 0 10px}
/* faq page reuses .faq from template */
/* compare */
.vs-head{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;margin:26px 0}
.vs-head .side{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}
.vs-head .side img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.vs-head .side .nm{position:absolute;left:0;right:0;bottom:0;padding:12px 14px;
background:linear-gradient(180deg,transparent,rgba(5,5,8,.92));font-family:var(--font-display);
font-size:clamp(1.1rem,2.6vw,1.7rem);text-transform:uppercase;color:#fff}
.vs-badge{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);color:var(--accent)}
.vs-tbl{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.vs-tbl td,.vs-tbl th{padding:12px 14px;border-bottom:1px solid var(--line);font-size:.95rem}
.vs-tbl td:first-child{text-align:right;font-weight:700}
.vs-tbl td:last-child{font-weight:700}
.vs-tbl td.mid{text-align:center;color:var(--text-faint);font:600 .74rem Oswald,sans-serif;
text-transform:uppercase;letter-spacing:.08em;width:180px}
.vs-tbl tr:last-child td{border-bottom:0}
/* generic tile grid reuse for indexes */
.mini-tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.mini-tile{background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--sport,var(--accent));
border-radius:10px;padding:14px 16px}
.mini-tile b{font-family:var(--font-cond);text-transform:uppercase;font-size:1.02rem;display:block}
.mini-tile span{color:var(--text-dim);font-size:.84rem}
.mini-tile:hover{background:var(--surface-2)}
/* pagehead for non-mocked pages */
.pagehead{margin-top:34px}
.pagehead h1{font-family:var(--font-display);text-transform:uppercase;
font-size:clamp(2.2rem,6.5vw,4.2rem);line-height:.95}
.pagehead h1 .hl{color:var(--accent)}
.pagehead p{color:var(--text-dim);max-width:64ch;margin-top:14px;font-size:1.06rem}
.pagehead p a{color:var(--highlight);font-weight:600}
img.photo-real{width:100%;height:100%;object-fit:cover;display:block}
.a-card__img{position:relative;overflow:hidden}
.a-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.a-card:hover .a-card__img img{transform:scale(1.06)}
.news-item .photo{position:relative;overflow:hidden}
.news-item .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pro-hero .photo{position:relative;overflow:hidden}
.pro-hero .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__photo{position:relative;overflow:hidden}
.hero__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rk-athlete .thumb{background-size:cover;background-position:center}
/* ============ 2026-07-14 owner-feedback pass ============ */
/* 1. clickable ticker items */
.ticker__item{color:inherit;text-decoration:none}
a.ticker__item:hover b{text-decoration:underline}
/* 2. home trending row: hidden scrollbar + slow auto-scroll (ticker pattern) */
.card-row--auto{display:block;overflow:hidden;scrollbar-width:none}
.card-row--auto::-webkit-scrollbar{display:none}
.card-row--auto .card-row__track{display:flex;gap:var(--s4);width:max-content;
padding-bottom:var(--s3);animation:rowscroll 45s linear infinite}
.card-row--auto .a-card{flex:0 0 250px;scroll-snap-align:none}
.card-row--auto:hover .card-row__track,.card-row--auto:focus-within .card-row__track{animation-play-state:paused}
/* -50% lands half a flex-gap short of a clean loop; subtract the other half */
@keyframes rowscroll{to{transform:translateX(calc(-50% - (var(--s4) / 2)))}}
@media(prefers-reduced-motion:reduce){
.card-row--auto{overflow-x:auto}
.card-row--auto .card-row__track{animation:none}}
/* 5. news pages: 4-across card grid */
.news-grid{display:grid;gap:14px;grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.news-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:800px){.news-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.news-grid{grid-template-columns:1fr}}
.news-card{display:flex;flex-direction:column;background:var(--surface);color:var(--text);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
transition:border-color .2s var(--ease),transform .25s var(--ease)}
.news-card:hover{border-color:var(--sport,var(--accent));transform:translateY(-3px)}
.news-card .photo{position:relative;overflow:hidden;aspect-ratio:16/9;border-radius:0;background:var(--surface-2)}
.news-card .photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.news-card__body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:3px}
/* 6. directory grid: fixed responsive columns + card polish */
.card-grid{grid-template-columns:repeat(5,1fr)}
@media(max-width:1279px){.card-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:999px){.card-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:759px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:519px){.card-grid{grid-template-columns:1fr}}
.a-card .photo{aspect-ratio:3/3.2}
.a-card__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.a-card__nation{color:var(--text-faint);font:600 .72rem var(--font-cond),Inter,sans-serif;
text-transform:uppercase;letter-spacing:.07em;margin-top:5px}
/* 7. per-page filter input (records, news, compare, nationality, rankings) */
.page-filter-wrap{position:relative;max-width:420px;margin:18px 0 6px}
.page-filter-wrap input.page-filter{width:100%;height:48px;padding:0 var(--s4);background:var(--surface-2);
border:1px solid var(--line);color:var(--text);border-radius:var(--radius);font:inherit}
.page-filter-wrap input.page-filter:focus{outline:none;border-color:var(--accent)}