/* Design system adapted from awesome-design-md / Nike DESIGN.md:
   towering uppercase display type, near-monochrome chrome, pill CTAs,
   one accent per site reserved for signal moments. */

@font-face { font-family: "Anton"; src: url("/assets/fonts/anton.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light;
  --ink: #111111;
  --charcoal: #39393b;
  --mute: #6b6b6d;
  --stone: #9e9ea0;
  --hairline: #cacacb;
  --hairline-soft: #e5e5e5;
  --canvas: #ffffff;
  --soft: #f5f5f5;
  --success: #007d48;
  --error: #c40004;

  /* Site accent — overridden per site via body class */
  --accent: #111111;
  --on-accent: #ffffff;
  --accent-soft: #f5f5f5;

  --display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --text: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 18px; --r-md: 24px; --r-full: 9999px;
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 18px; --s-xl: 24px; --s-xxl: 32px; --s-section: 56px;
  --max: 1200px;
}

body.site-twinning { --accent: #39ff14; --on-accent: #111111; --accent-soft: #f5f5f5; --accent-ink: #111111; }
body.site-harlyn   { --accent: #39ff14; --on-accent: #111111; --accent-soft: #f5f5f5; --accent-ink: #111111; }
body.site-olive    { --accent: #39ff14; --on-accent: #111111; --accent-soft: #f5f5f5; --accent-ink: #111111; }
body.site-harlyn .display .alt, body.site-olive .display .alt { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .1em; text-underline-offset: .08em; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--canvas); color: var(--ink);
  font: 400 16px/1.5 var(--text); font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased; padding-bottom: 76px;
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent-ink, var(--ink)); outline-offset: 2px;
}
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 16px; border-radius: var(--r-full); z-index: 100; }
.skip:focus { left: 8px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 700px) { .wrap { padding: 0 32px; } }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline-soft); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 22px/1 var(--display); text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.mark .dot { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: grid; place-items: center; color: var(--on-accent); font-size: 14px; }
.nav { display: none; gap: 4px; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: var(--r-full); font-weight: 500; font-size: 15px; }
.nav a:hover { background: var(--soft); }
.nav a[aria-current="page"] { background: var(--ink); color: #fff; }
.top .top-cta { display: none; }
@media (min-width: 900px) { .nav { display: flex; } .top .top-cta { display: inline-flex; } }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 10px 16px; border-bottom: 1px solid var(--hairline-soft); scrollbar-width: none; background: #fff; }
.chips::-webkit-scrollbar { display: none; }
.chips a { flex: none; text-decoration: none; padding: 8px 16px; border-radius: var(--r-full); border: 1px solid var(--hairline); font-weight: 500; font-size: 14px; }
.chips a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 900px) { .chips { display: none; } }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 28px; border-radius: var(--r-full); border: 0; font: 500 16px/1.2 var(--text); text-decoration: none; cursor: pointer; transition: background .15s, transform .1s; }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: var(--charcoal); }
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-secondary { background: var(--soft); color: var(--ink); }
.btn-secondary:hover { background: var(--hairline-soft); }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); }
.btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,255,255,.97); border-top: 1px solid var(--hairline-soft); }
.sticky-cta .btn { flex: 1; min-height: 50px; padding: 10px 14px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 28px 0 40px; border-bottom: 1px solid var(--hairline-soft); }
@media (min-width: 900px) { .hero { padding: 56px 0 64px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); }
.eyebrow .pill { background: var(--accent); color: var(--on-accent); padding: 3px 10px; border-radius: var(--r-full); letter-spacing: .04em; }
.display { font: 400 clamp(64px, 19vw, 168px)/0.88 var(--display); text-transform: uppercase; margin: 14px 0 0; letter-spacing: -0.005em; }
.display .alt { color: var(--accent-ink, var(--ink)); }
body.site-twinning .display .alt { color: var(--ink); }
.lede { font: 500 clamp(18px, 4.6vw, 24px)/1.35 var(--text); margin: 18px 0 0; max-width: 34ch; }
.hero .btn-row { margin-top: 24px; }

.facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); overflow: hidden; margin-top: 28px; }
@media (min-width: 700px) { .facts { grid-template-columns: repeat(4, 1fr); } }
.fact { background: #fff; padding: 14px 16px; min-height: 92px; outline: 1px solid var(--hairline-soft); }
.fact .k { font: 500 12px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.fact .v { font: 400 34px/1.05 var(--display); margin-top: 6px; text-transform: uppercase; }
.fact .v.sm { font: 600 17px/1.3 var(--text); text-transform: none; margin-top: 8px; }

/* ---------- Sections ---------- */
.section { padding: var(--s-section) 0; border-bottom: 1px solid var(--hairline-soft); }
.section:last-of-type { border-bottom: 0; }
.section.soft { background: var(--soft); border-bottom: 0; }
.h2 { font: 400 clamp(36px, 9vw, 64px)/0.95 var(--display); text-transform: uppercase; margin: 0 0 8px; }
.h3 { font: 600 20px/1.3 var(--text); margin: 0 0 8px; }
.sub { color: var(--charcoal); margin: 0 0 24px; max-width: 60ch; }
.grid-2 { display: grid; gap: 16px; }
@media (min-width: 800px) { .grid-2 { grid-template-columns: 1fr 1fr; gap: 24px; } }
.grid-3 { display: grid; gap: 16px; }
@media (min-width: 800px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card { background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: 20px; }
.section.soft .card { border-color: transparent; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 12px 0; border-bottom: 1px solid var(--hairline-soft); display: flex; gap: 12px; align-items: baseline; }
.list li:last-child { border-bottom: 0; }
.list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); }
.quote { font: 500 clamp(20px, 5vw, 28px)/1.35 var(--text); margin: 0; max-width: 40ch; }
.quote footer { font-size: 15px; color: var(--mute); margin-top: 12px; font-weight: 500; }

/* ---------- Metric tiles ---------- */
.metrics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 800px) { .metrics { grid-template-columns: repeat(4, 1fr); } }
.metric { background: #fff; border: 1px solid var(--hairline-soft); border-radius: var(--r-sm); padding: 16px; }
.metric .k { font: 500 12px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--mute); }
.metric .v { font: 400 44px/1 var(--display); margin: 8px 0 6px; }
.metric .v small { font: 600 15px var(--text); color: var(--charcoal); margin-left: 4px; }
.metric .src { font-size: 12px; color: var(--mute); }
.updated { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mute); margin-top: 14px; }
.updated::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.empty { border: 1px dashed var(--hairline); border-radius: var(--r-sm); padding: 20px; color: var(--charcoal); background: #fff; }
.skeleton { background: linear-gradient(90deg, var(--soft) 25%, #ececec 37%, var(--soft) 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: var(--r-sm); min-height: 108px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } html { scroll-behavior: auto; } }

/* ---------- Stat tables ---------- */
.season { margin-bottom: 24px; }
.season h4 { font: 600 15px/1.4 var(--text); margin: 0 0 8px; }
.stat-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; background: #fff; border-radius: var(--r-sm); overflow: hidden; }
.stat-table th, .stat-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline-soft); font-size: 15px; }
.stat-table th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 500; }
.stat-table td.num { font-weight: 600; text-align: right; }

/* ---------- Events ---------- */
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hairline-soft); }
.event { display: grid; grid-template-columns: 76px 1fr; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hairline-soft); align-items: start; }
.event .date { font: 400 22px/1 var(--display); text-transform: uppercase; }
.event .date span { display: block; font: 500 12px/1.4 var(--text); color: var(--mute); margin-top: 4px; letter-spacing: .04em; }
.event .name { font-weight: 600; }
.event .meta { color: var(--charcoal); font-size: 14px; }
.tag { display: inline-block; font: 500 12px/1 var(--text); padding: 5px 10px; border-radius: var(--r-full); background: var(--soft); margin-right: 6px; margin-top: 6px; }
.tag.acc { background: var(--accent); color: var(--on-accent); }
.tag.h { background: #111111; color: #ffffff; }
.tag.o { background: #ffffff; color: #111111; box-shadow: inset 0 0 0 1px #111111; }

/* ---------- Video ---------- */
.video { position: relative; aspect-ratio: 16/9; border-radius: var(--r-sm); overflow: hidden; background: var(--ink); color: #fff; }
.video button { all: unset; cursor: pointer; position: absolute; inset: 0; display: grid; place-items: center; background-size: cover; background-position: center; }
.video button::after { content: ""; width: 72px; height: 72px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23111'/%3E%3C/svg%3E") center/32px no-repeat; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.video button:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.pending { display: grid; place-items: center; text-align: center; padding: 20px; background: var(--soft); color: var(--charcoal); border: 1px dashed var(--hairline); }
.video-cap { margin-top: 10px; font-weight: 600; }
.video-cap span { display: block; font-weight: 400; color: var(--mute); font-size: 14px; }

/* ---------- Athlete cards (hub) ---------- */
.athletes { display: grid; gap: 16px; }
@media (min-width: 800px) { .athletes { grid-template-columns: 1fr 1fr; gap: 24px; } }
.athlete { border-radius: var(--r-md); padding: 24px; color: #fff; display: flex; flex-direction: column; min-height: 420px; text-decoration: none; position: relative; overflow: hidden; }
.athlete.harlyn { background: #0b0b0b; }
.athlete.harlyn .pos { background: #39ff14; color: #111; }
.athlete.olive { background: #ffffff; color: #111111; border: 2px solid #111111; }
.athlete.olive .pos { background: #39ff14; color: #111; }
.athlete.olive .go { background: #111111; color: #ffffff; }
.athlete .num { position: absolute; right: -10px; top: -30px; font: 400 220px/1 var(--display); opacity: .12; pointer-events: none; }
.athlete .pos { font: 500 13px/1 var(--text); text-transform: uppercase; letter-spacing: .1em; background: rgba(255,255,255,.18); align-self: flex-start; padding: 7px 12px; border-radius: var(--r-full); }
.athlete h3 { font: 400 clamp(56px, 14vw, 96px)/0.88 var(--display); text-transform: uppercase; margin: 18px 0 0; }
.athlete dl { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin: 24px 0; }
.athlete dt { font: 500 12px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.athlete dd { margin: 2px 0 0; font-weight: 600; }
.athlete .go { margin-top: auto; align-self: flex-start; background: #fff; color: var(--ink); }
.battery { display: grid; gap: 16px; align-items: center; }
@media (min-width: 800px) { .battery { grid-template-columns: 1.1fr 1fr; gap: 48px; } }
.battery svg { width: 100%; height: auto; }
.pillars { display: grid; gap: 12px; }
@media (min-width: 700px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.pillar { background: #fff; border-radius: var(--r-sm); padding: 20px; border: 1px solid var(--hairline-soft); }
.pillar .big { font: 400 40px/1 var(--display); text-transform: uppercase; }
.pillar p { margin: 8px 0 0; color: var(--charcoal); }
.stance { background: var(--ink); color: #fff; border-radius: var(--r-md); padding: 28px; }
.stance .h2 { color: var(--accent); }
body.site-olive .stance .h2 { color: #39ff14; }
.sister { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; background: var(--accent-soft); border-radius: var(--r-md); padding: 24px; }
.sister p { margin: 0; font-weight: 500; max-width: 46ch; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 16px; max-width: 720px; }
.row-2 { display: grid; gap: 16px; }
@media (min-width: 700px) { .row-2 { grid-template-columns: 1fr 1fr; } }
.field label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.field .opt { font-weight: 400; color: var(--mute); }
.field input, .field select, .field textarea { width: 100%; font: 400 16px/1.4 var(--text); color: var(--ink); background: var(--soft); border: 1.5px solid transparent; border-radius: 14px; padding: 13px 16px; min-height: 50px; appearance: none; -webkit-appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' stroke='%23111' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px; padding-right: 44px; }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--ink); outline: none; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--error); background: #fff5f5; }
.field .err { color: var(--error); font-size: 14px; margin-top: 6px; display: none; font-weight: 500; }
.field.bad .err { display: block; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { display: none; padding: 14px 16px; border-radius: 14px; font-weight: 500; }
.form-msg.error { display: block; background: #fff0f0; color: var(--error); }
.consent { font-size: 13px; color: var(--mute); margin: 0; }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Prose / legal ---------- */
.prose { max-width: 68ch; }
.prose h2 { font: 600 22px/1.3 var(--text); margin: 32px 0 8px; }
.prose p, .prose li { color: var(--charcoal); }

/* ---------- Footer ---------- */
.foot { background: var(--ink); color: #d6d6d6; padding: 40px 0 32px; font-size: 14px; }
.foot .big { font: 400 40px/1 var(--display); text-transform: uppercase; color: #fff; }
.foot .cols { display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 800px) { .foot .cols { grid-template-columns: 2fr 1fr 1fr; } }
.foot a { color: #fff; }
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.foot .fine { border-top: 1px solid #333; margin-top: 28px; padding-top: 16px; color: #9e9ea0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* ---------- Photos ---------- */
.hero-grid { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 40px; } }
.hero-photo { margin: 0; position: relative; }
.hero-photo img { width: 100%; height: auto; max-height: 400px; object-fit: contain; }
@media (min-width: 900px) { .hero-photo img { max-height: 600px; } }
.hero-photo.dark { background: #0b0b0b; border-radius: var(--r-md); overflow: hidden; }
.hero-photo figcaption { font-size: 12px; color: var(--mute); margin-top: 6px; }
.athlete .photo { margin: -24px -24px 8px; height: 300px; position: relative; overflow: hidden; }
.athlete .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.athlete.olive .photo img { object-fit: contain; object-position: center; padding: 12px 8px 0; }
.photo-band { background: #0b0b0b; color: #fff; }
.photo-band .wrap { display: grid; gap: 24px; align-items: center; padding-top: 48px; padding-bottom: 48px; }
@media (min-width: 900px) { .photo-band .wrap { grid-template-columns: 1fr 1fr; } }
.photo-band img { border-radius: var(--r-md); }
.photo-band .h2 { color: var(--accent); }

/* ---------- Latest Instagram strip ---------- */
.ig { margin-top: 20px; max-width: 560px; }
.ig[hidden] { display: none; }
.ig-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font: 500 12px/1.4 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--charcoal); margin-bottom: 8px; }
.ig-head a { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.ig-head a:hover { text-decoration: underline; }
.ig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.ig-tile { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--soft); }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease; }
.ig-tile:hover img { transform: scale(1.05); }
.ig-tile .vid { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") center/12px no-repeat; }
body.site-olive .ig-tile { outline: 2px solid transparent; }
body.site-olive .ig-tile:hover { outline-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .ig-tile img { transition: none; } }
.btn[hidden] { display: none; }

/* Photo galleries: justified row, natural ratios, never upscaled past source */
.gallery { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.gallery figure { margin: 0; flex-basis: 0; min-width: 0; }
.gallery img { display: block; width: 100%; height: auto; border-radius: 12px; background: #eee; }
@media (max-width: 699px) { .gallery figure { flex: 1 1 calc(50% - 6px) !important; } .gallery figure:first-child:nth-last-child(odd) { flex-basis: 100% !important; } }
@media (min-width: 700px) { .gallery { max-width: 900px; flex-wrap: nowrap; } }

.hl { max-width: 760px; }

.pitches { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pitches li { padding: 10px 16px; border: 2px solid #111; border-radius: 999px; font-weight: 700; background: #fff; }
.pitches li:first-child { background: var(--accent); color: var(--on-accent); }
.velo { margin-top: 18px; font-size: 20px; }
.velo strong { font-family: var(--display, inherit); font-size: 1.4em; }
.velo span { display: block; font-size: 13px; color: var(--mute); }