:root {
  --black: #090909;
  --ink: #171717;
  --muted: #626262;
  --line: #dedede;
  --paper: #f6f4ee;
  --white: #ffffff;
  --green: #0faf68;
  --green-dark: #08784a;
  --green-ink: #063d28;
  --danger: #a22b2b;
  --max: 1180px;
  --read: 760px;
  --radius: 0;
  --shadow: 0 18px 50px rgba(0, 0, 0, .10);
  /* My Podium (2026-08-28): the rest of the site is deliberately square
     (--radius: 0, its own editorial look, left untouched) -- My Podium's
     cards use a softer, app-like radius instead, scoped to their own
     token so nothing else on the site changes shape. --pale-green and
     --dock-inactive extend the existing brand palette rather than
     hardcoding new one-off colors across My Podium's files. */
  --radius-card: 14px;
  --pale-green: #e6f5ee;
  --dock-inactive: #d9e2de;
  /* Split Watch screen audit (2026-09-04): every Split Watch and
     parent-facing race page (Hub, Plan, Live, Review, Races, Join,
     the public /race/ page, Guardian Home) was hand-typing its own
     near-duplicate colors instead of using the palette above --
     confirmed directly: zero uses of var(--...) across those page
     templates and 300+ literal hex/rgba values, including a
     different "brand green" (#00bf63) than --green above and four
     different near-blacks. Extending the palette here, same pattern
     as --pale-green/--dock-inactive above, rather than leaving those
     as ad hoc literals. --green-rgb/--black-rgb/--live-red-rgb exist
     only so rgba() tints can reference the real brand colors; the
     --sw-dark-* tokens preserve Live Race Mode's own deliberate,
     contrast-verified dark timing screen pixel-exact while giving it
     named, centralized values instead of scattered literals. */
  --green-rgb: 15, 175, 104;
  --black-rgb: 9, 9, 9;
  --live-red: #dc2626;
  --live-red-rgb: 220, 38, 38;
  --sw-dark-bg: #0b0b0b;
  --sw-dark-panel: #17181c;
  --sw-dark-panel-alt: #1a1a1a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body { margin: 0; color: var(--ink); background: var(--white); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; overflow-wrap: anywhere; overflow-x: clip; }
body.nav-open { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
svg { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: middle; }
:focus-visible { outline: 3px solid #ffd447; outline-offset: 4px; }
.container { width: min(calc(100% - 40px), 1480px); margin-inline: auto; }
.skip-link { position: fixed; z-index: 1000; left: 16px; top: 12px; padding: 12px 16px; color: var(--black); background: var(--white); transform: translateY(-160%); font-weight: 800; }
.skip-link:focus { transform: translateY(0); }
.eyebrow { margin: 0 0 10px; color: var(--green-dark); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .82rem; letter-spacing: 2px; text-transform: uppercase; }
h1, h2, h3, h4 { margin-top: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; line-height: 1.02; text-transform: uppercase; }
h1 { font-size: clamp(3.25rem, 8vw, 7.25rem); letter-spacing: -1.5px; }
h2 { font-size: clamp(2.3rem, 5vw, 4.6rem); letter-spacing: -.8px; }
h3 { font-size: clamp(1.65rem, 3vw, 2.25rem); }
p { margin-top: 0; }

.site-header { position: sticky; top: 0; z-index: 100; color: var(--white); background: rgba(9, 9, 9, .97); border-bottom: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(12px); }
.nav-wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 11px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.08rem; letter-spacing: .8px; text-transform: uppercase; }
.brand img { width: 48px; height: 48px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 25px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .82rem; letter-spacing: .8px; text-transform: uppercase; }
.site-nav > a { min-height: 44px; display: inline-flex; align-items: center; padding-block: 12px; border-bottom: 3px solid transparent; }
.site-nav > a:hover, .site-nav > a[aria-current="page"] { color: var(--green); border-color: var(--green); }
.nav-social { display: flex; align-items: center; gap: 8px; padding-left: 5px; }
.nav-social a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--white); border: 1px solid rgba(255,255,255,.22); }
.nav-social a:hover { color: var(--black); background: var(--green); border-color: var(--green); }
.menu-button { display: none; width: 48px; height: 48px; border: 0; background: transparent; padding: 10px; cursor: pointer; }
.menu-button span { display: block; width: 26px; height: 2px; margin: 5px auto; background: var(--white); transition: transform .18s ease, opacity .18s ease; }
.menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-overlay { display: none; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 2px solid transparent; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .88rem; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; transition: transform .16s ease, background-color .16s ease, color .16s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { color: var(--black); background: var(--green); }
.button-primary:hover { background: #30c981; }
.button-dark { color: var(--white); background: var(--black); }
.button-light { color: var(--black); background: var(--white); }
.button-outline { color: var(--ink); border-color: var(--ink); background: transparent; }
.text-link, .read-link { display: inline-flex; align-items: center; gap: 7px; color: var(--green-dark); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .8px; text-transform: uppercase; }

.hero { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(circle at 88% 20%, rgba(15,175,104,.20), transparent 30%), linear-gradient(135deg, #090909, #181818 58%, #090909); }
.hero::after { content: ""; position: absolute; right: -180px; bottom: -300px; width: 700px; height: 700px; border: 2px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: inset 0 0 0 42px transparent, 0 0 0 42px rgba(255,255,255,.035), 0 0 0 84px rgba(255,255,255,.025); }
.hero-grid { min-height: 620px; display: grid; grid-template-columns: 1.25fr .75fr; align-items: center; gap: 72px; padding: 76px 0; position: relative; z-index: 1; }
.hero .eyebrow { color: var(--green); }
.hero h1 { max-width: 780px; margin-bottom: 22px; }
.hero-text { max-width: 660px; margin-bottom: 28px; color: #d8d8d8; font-size: 1.1rem; }
.hero-actions, .social-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .button-outline { color: var(--white); border-color: rgba(255,255,255,.55); }
.hero-logo-panel { padding: 34px; color: var(--black); background: var(--white); box-shadow: 18px 18px 0 var(--green); transform: rotate(1.5deg); text-align: center; }
.hero-logo-panel img { width: min(100%, 280px); aspect-ratio: 1; margin: 0 auto 12px; object-fit: contain; }
.hero-logo-panel p { margin: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: 1.3px; text-transform: uppercase; }
.hero-proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 38px; max-width: 670px; }
.hero-proof div { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.18); }
.hero-proof strong { display: block; color: var(--green); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.75rem; line-height: 1; }
.hero-proof span { color: #bdbdbd; font-size: .77rem; letter-spacing: .6px; text-transform: uppercase; }

.section { padding: 86px 0; }
.section-paper { background: var(--paper); }
.section-dark { color: var(--white); background: var(--black); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.section-heading h2 { margin-bottom: 0; }
.section-heading p:last-child { max-width: 620px; margin-bottom: 0; color: var(--muted); }
.section-dark .section-heading { border-color: #343434; }
.section-dark .section-heading p:last-child { color: #c4c4c4; }

.rankings-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.ranking-card { grid-column: span 4; min-height: 260px; display: flex; flex-direction: column; padding: 26px; border: 1px solid var(--line); background: var(--paper); }
.ranking-card:first-child { grid-column: span 8; color: var(--white); background: linear-gradient(115deg, rgba(9,9,9,.97), rgba(9,9,9,.82)), repeating-linear-gradient(0deg, transparent 0 19px, rgba(15,175,104,.22) 20px); }
.ranking-card p { margin: 0 0 8px; color: var(--green-dark); font-size: .78rem; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.ranking-card:first-child p { color: var(--green); }
.ranking-card h3 { margin-bottom: 10px; }
.ranking-card span { color: var(--muted); }
.ranking-card:first-child span { color: #d0d0d0; }
.ranking-card small { margin-top: 8px; color: var(--muted); }
.ranking-card:first-child small { color: #a9a9a9; }
.ranking-card a { width: max-content; margin-top: auto; padding-top: 24px; color: var(--green-dark); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .7px; text-transform: uppercase; }
.ranking-card:first-child a { color: var(--green); }

.photos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.photo-card { margin: 0; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.photo-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.photo-card figcaption { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; }
.photo-card-meet { font-size: .72rem; font-weight: 800; color: var(--ink); }
.photo-card-credit { font-size: .68rem; color: var(--muted); }
.empty-state-inline { color: var(--muted); }

/* Swipeable story rail (2026-09-30) -- replaces the old 3-card grid on
   the homepage's "Latest stories" section. scroll-snap gives real touch
   swipe on mobile with no JS; the arrow buttons (public/scripts/
   story-rail.js) are a pointer-device convenience only, hidden on touch
   viewports since swipe already covers that case there. Deliberately
   never auto-advances -- nothing moves unless the reader moves it. */
.story-rail-wrap { position: relative; display: flex; align-items: center; gap: 10px; }
.story-rail { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 2px; }
.story-rail::-webkit-scrollbar { display: none; }
.story-rail .story-card { grid-column: unset; flex: 0 0 320px; scroll-snap-align: start; }
.story-rail-arrow { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.story-rail-arrow:hover { background: var(--pale-green); }
.story-rail-arrow:active { transform: scale(.92); }
.story-rail-arrow svg { width: 18px; height: 18px; }
.story-rail-prev svg { transform: rotate(180deg); }
.story-rail-arrow[disabled] { opacity: .3; cursor: default; pointer-events: none; }
@media (max-width: 900px) {
  .story-rail-arrow { display: none; }
  .story-rail .story-card { flex-basis: 82vw; }
}

.stories-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.story-card { grid-column: span 4; display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ink); background: var(--white); border: 1px solid var(--line); transition: transform .16s ease, box-shadow .16s ease; }
.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.story-card-featured { grid-column: span 8; }
.story-card-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--green-ink); }
.story-card-image img { width: 100%; height: 100%; object-fit: cover; }
.story-card-body { flex: 1; display: flex; flex-direction: column; padding: 24px; }
.story-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-bottom: 12px; color: var(--muted); font-size: .76rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; }
.story-meta .category { color: var(--green-dark); }
.story-card h3 { margin-bottom: 12px; }
.story-card p { color: var(--muted); }
.story-card .read-link { margin-top: auto; padding-top: 10px; }

.spotlight-panel { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.spotlight-copy p:not(.eyebrow) { max-width: 560px; color: var(--muted); }
.spotlight-card { padding: 42px; color: var(--white); background: var(--black); box-shadow: 16px 16px 0 var(--green); }
.spotlight-card blockquote { margin: 0 0 24px; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 3vw, 2.55rem); line-height: 1.3; }
.spotlight-card p { color: #c7c7c7; }

.sport-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sport-card { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 34px; color: var(--white); background: var(--black); }
.sport-card::before { content: ""; position: absolute; inset: 0; opacity: .78; background: radial-gradient(circle at 80% 20%, rgba(15,175,104,.75), transparent 30%), repeating-linear-gradient(0deg, transparent 0 25px, rgba(255,255,255,.07) 26px); }
.sport-card.track::before { background: radial-gradient(ellipse at 75% 40%, transparent 0 18%, rgba(15,175,104,.8) 19% 23%, transparent 24% 30%, rgba(15,175,104,.5) 31% 35%, transparent 36%), linear-gradient(125deg, #050505, #1b1b1b); }
.sport-card > * { position: relative; z-index: 1; }
.sport-card .eyebrow { color: var(--green); }
.sport-card h3 { max-width: 520px; margin-bottom: 10px; font-size: clamp(2.2rem, 5vw, 4.5rem); }
.sport-card p { max-width: 520px; color: #d5d5d5; }
.sport-card .button { align-self: flex-start; margin-top: 8px; }

.social-band { padding: 62px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.social-grid, .sponsor-grid { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.social-grid h2, .sponsor-grid h2 { margin-bottom: 0; }
.social-grid h2 { font-size: clamp(2.1rem, 4vw, 4rem); white-space: nowrap; }
.sponsor-band { padding: 64px 0; color: var(--white); background: var(--black); }
.sponsor-band .eyebrow { color: var(--green); }

.page-hero { padding: 82px 0 68px; color: var(--white); background: radial-gradient(circle at 88% 18%, rgba(15,175,104,.23), transparent 28%), linear-gradient(135deg, #090909, #1a1a1a 68%, #073b27); }
.page-hero-compact { padding: 58px 0 48px; }
.page-hero .eyebrow { color: var(--green); }
.page-hero h1 { max-width: 980px; margin-bottom: 18px; }
.page-hero p:last-child { max-width: 720px; margin-bottom: 0; color: #d2d2d2; font-size: 1.08rem; }
.breadcrumbs { margin-bottom: 22px; color: var(--muted); font-size: .86rem; }

/* Shared "more free tools" callout used by the Phase 1 utility tool pages
   (see src/lib/tools.mjs's toolsCrosslink()) -- lives here rather than
   duplicated per-page since it's now used on 3+ pages. Deliberately
   placed inside each tool's own paper-section container in markup, not
   in a bare strip between the hero and the section (an earlier version
   did that and looked visually broken, straddling the two). */
.tool-crosslink {
  margin: 0; padding: 14px 16px; background: var(--paper); border-left: 4px solid var(--green);
  font-size: 0.92rem; line-height: 1.5;
}
.tool-crosslink a { color: var(--green-dark); font-weight: 700; text-decoration: underline; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #999; }
.breadcrumbs a { text-decoration: underline; text-underline-offset: 3px; }

.story-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: end; margin-bottom: 28px; }
.search-field { position: relative; }
.search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-field input { width: 100%; min-height: 50px; padding: 12px 14px 12px 44px; border: 1px solid #bdbdbd; background: var(--white); }
.category-filter { min-height: 50px; padding: 10px 38px 10px 14px; border: 1px solid #bdbdbd; background: var(--white); }
.results-summary { margin-bottom: 18px; color: var(--muted); font-size: .9rem; }
.no-results { display: none; }
.no-results.is-visible { display: block; }

.article-hero { padding: 72px 0 56px; color: var(--white); background: radial-gradient(circle at 86% 14%, rgba(15,175,104,.23), transparent 27%), linear-gradient(135deg, #090909, #171717 70%, #075b3a); }
.article-hero-inner { max-width: 940px; }
.article-hero h1 { margin-bottom: 20px; font-size: clamp(3rem, 7.5vw, 6.5rem); }
.article-deck { max-width: 780px; color: #d7d7d7; font-size: 1.15rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 22px 0 0; color: #c9c9c9; font-size: .82rem; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.article-meta .category { color: var(--green); }
.article-feature-image { width: min(calc(100% - 40px), 1050px); aspect-ratio: 16 / 9; object-fit: cover; margin: 42px auto 0; border: 1px solid var(--line); background: var(--paper); }
/* Optional caption beneath the hero image (story.featuredImageCaption) --
   added 2026-09-16 for editorial-graphic/credit lines, same visual
   treatment as an inline figure's own figcaption (.article-content
   figcaption) for consistency. Every existing story has no caption and
   is unaffected. */
.article-feature-caption { width: min(calc(100% - 40px), 1050px); margin: 8px auto 0; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; text-align: center; }
.article-shell { background: var(--paper); }
.article-layout { width: min(calc(100% - 40px), 1050px); margin: 0 auto; padding: 58px 0 90px; }
.article-content { max-width: var(--read); margin: 0 auto; color: #252525; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; line-height: 1.85; }
.article-content > :first-child { margin-top: 0; }
.article-content h2, .article-content h3, .article-content h4 { margin-top: 2.1em; margin-bottom: .65em; color: var(--black); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; line-height: 1.08; text-transform: uppercase; }
.article-content h2 { font-size: clamp(2rem, 5vw, 3rem); }
.article-content h3 { font-size: clamp(1.45rem, 4vw, 2.05rem); }
.article-content p, .article-content li { overflow-wrap: anywhere; }
.article-content a { color: var(--green-dark); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.article-content figure { margin: 34px 0; }
.article-content figure img { width: 100%; }
.article-content figcaption { margin-top: 8px; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; text-align: center; }
.article-content blockquote { margin: 36px 0; padding: 8px 0 8px 24px; border-left: 6px solid var(--green); color: #444; font-size: 1.25rem; font-style: italic; }
.article-content blockquote p { margin-bottom: 0; }
.article-content code { padding: 2px 5px; background: #eae7de; font-size: .92em; }
.article-content pre { overflow: auto; padding: 20px; color: var(--white); background: #111; }
.article-content pre code { padding: 0; color: inherit; background: transparent; }
.article-content hr { margin: 46px 0; border: 0; border-top: 1px solid var(--line); }

/* Key numbers grid (2026-09-16) -- src/lib/markdown.mjs's [[KEY_NUMBERS]]
   block. Built from the same pieces every other card/stat pattern on the
   site already uses (.info-card's sharp-cornered bordered box,
   .ranking-number's big Impact-font figure) rather than the rounded,
   soft-shadowed card style a supplied design reference used -- native to
   this design system, not a one-off import. */
.key-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 8px 0 40px; }
.key-number { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--line); background: var(--paper); }
.key-number strong { color: var(--green-dark); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2.1rem; line-height: 1; }
.key-number span { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 700; line-height: 1.35; letter-spacing: .3px; text-transform: uppercase; }
.table-scroll { width: 100%; overflow-x: auto; margin: 30px 0; border: 1px solid #cfcfcf; background: var(--white); }
.table-scroll:focus { outline: 3px solid #ffd447; }
.table-scroll table { width: 100%; min-width: 760px; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: .9rem; }
.table-scroll th { padding: 13px 12px; color: var(--white); background: var(--black); text-align: left; font-size: .77rem; letter-spacing: .6px; text-transform: uppercase; }
.table-scroll td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll tbody tr:nth-child(even) { background: #fafafa; }
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: 32px 0; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.article-actions { max-width: var(--read); display: flex; flex-wrap: wrap; gap: 10px; margin: 48px auto 0; padding-top: 26px; border-top: 1px solid var(--line); }
.article-view-count { max-width: var(--read); margin: 16px auto 0; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
.share-button { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 14px; border: 1px solid #aaa; background: var(--white); font-weight: 700; cursor: pointer; }
.related-section { max-width: 1050px; margin: 68px auto 0; }
.related-section h2 { font-size: clamp(2rem, 5vw, 3.4rem); }
.story-nav { max-width: var(--read); display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 48px auto 0; }
.story-nav a { padding: 20px; border: 1px solid var(--line); background: var(--white); }
.story-nav span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .75rem; text-transform: uppercase; }

.ranking-browser { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ranking-browser-card { min-height: 300px; display: flex; flex-direction: column; justify-content: flex-end; padding: 30px; color: var(--white); background: var(--black); }
.ranking-browser-card:nth-child(2) { background: var(--green-ink); }
.ranking-browser-card:nth-child(3) { background: var(--green-dark); }
.ranking-browser-card h2 { margin-bottom: 12px; }
.ranking-browser-card p { color: #d0d0d0; }
.ranking-browser-card .button { align-self: flex-start; margin-top: 8px; }
.division-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.division-grid.track-grid { grid-template-columns: repeat(5, 1fr); }
.division-card { min-height: 170px; display: flex; flex-direction: column; justify-content: space-between; padding: 22px; border: 1px solid var(--line); background: var(--white); }
.division-card strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2rem; text-transform: uppercase; }
.division-card span { color: var(--muted); }
.division-card:hover { color: var(--white); background: var(--black); border-color: var(--black); }
.division-card:hover span { color: #c6c6c6; }
.gender-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.gender-tabs a, .gender-tabs button { min-height: 44px; display: inline-flex; align-items: center; padding: 10px 18px; border: 1px solid var(--ink); background: var(--white); color: var(--ink); font: inherit; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.gender-tabs a[aria-current="page"], .gender-tabs a:hover, .gender-tabs button[aria-pressed="true"], .gender-tabs button:hover { color: var(--black); background: var(--green); border-color: var(--green); }
.ranking-detail-header { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.ranking-detail-header h2 { margin-bottom: 0; }
.ranking-updated { color: var(--muted); font-size: .9rem; }
.ranking-list { display: grid; gap: 12px; }
.ranking-row { display: grid; grid-template-columns: 70px 1.3fr 1fr .8fr; gap: 18px; align-items: center; padding: 20px; border: 1px solid var(--line); background: var(--white); }
.ranking-number { color: var(--green-dark); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2.6rem; line-height: 1; }
.ranking-athlete strong { display: block; font-size: 1.08rem; }
.ranking-athlete span, .ranking-grade, .ranking-mark small { color: var(--muted); }
.ranking-mark strong { display: block; }
.ranking-explanation { grid-column: 2 / -1; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); }

.content-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 66px; }
.content-grid p { color: var(--muted); }
.info-card { padding: 30px; border: 1px solid var(--line); background: var(--white); }
.info-card h3 { margin-bottom: 10px; }
.contact-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.contact-card { padding: 30px; border: 1px solid var(--line); background: var(--white); }
.contact-card p { color: var(--muted); }
.staff-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.staff-card { display: flex; align-items: flex-start; gap: 16px; padding: 24px; border: 1px solid var(--line); background: var(--white); }
.staff-card-editor { grid-column: 1 / -1; border-color: var(--green-dark); }
.staff-avatar { flex: 0 0 auto; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 999px; background: var(--green); color: var(--black); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.1rem; }
.staff-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.staff-title { margin: 0 0 8px; color: var(--muted); font-size: .9rem; }
.empty-state { max-width: 760px; margin: 0 auto; padding: 56px 32px; border: 1px solid var(--line); background: var(--white); text-align: center; }
.empty-state-mark { width: 74px; height: 74px; display: grid; place-items: center; margin: 0 auto 18px; color: var(--black); background: var(--green); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.5rem; }
.empty-state h2 { margin-bottom: 12px; }
.empty-state p { max-width: 560px; margin: 0 auto 22px; color: var(--muted); }

.site-footer { padding: 60px 0 22px; color: #c7c7c7; background: #050505; }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3, 1fr); gap: 44px; }
.footer-brand img { width: 112px; height: 112px; object-fit: contain; object-position: left center; }
.footer-brand p { max-width: 300px; margin-top: 16px; }
.footer-column { display: flex; flex-direction: column; gap: 9px; }
.footer-column strong { margin-bottom: 3px; color: var(--white); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-weight: 400; letter-spacing: .8px; text-transform: uppercase; }
.footer-column a:hover { color: var(--green); }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; margin-top: 44px; padding-top: 20px; border-top: 1px solid #232323; font-size: .82rem; }

.error-page { min-height: 70vh; display: grid; place-items: center; padding: 70px 0; text-align: center; }
.error-page strong { display: block; color: var(--green); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(5rem, 20vw, 12rem); line-height: .8; }
.error-page h1 { margin: 20px 0 12px; font-size: clamp(2.8rem, 8vw, 5.5rem); }
.error-page p { max-width: 580px; color: var(--muted); }

/* Shown next to the meet import preview/commit buttons so a failed preview
   is visible right where the admin is looking, not only in the page's main
   status banner far above this section. */
.recruit-admin-import-error { margin: 12px 0; padding: 12px 16px; border: 1px solid var(--danger); border-radius: 6px; color: var(--danger); font-weight: 600; }

@media (max-width: 1120px) {
  .menu-button { display: block; }
  .site-nav { position: fixed; top: 72px; right: 0; width: min(88vw, 390px); height: calc(100dvh - 72px); display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 18px 22px 28px; background: var(--black); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility .2s ease; overflow-y: auto; }
  .site-nav[data-open="true"] { opacity: 1; visibility: visible; pointer-events: auto; }
  .site-nav > a { min-height: 54px; padding: 14px 4px; border-bottom: 1px solid #2b2b2b; font-size: 1rem; }
  .nav-social { margin-top: 20px; padding: 0; }
  .nav-overlay { position: fixed; inset: 72px 0 0; display: block; background: rgba(0,0,0,.58); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease; }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; pointer-events: auto; }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; gap: 48px; }
  .hero-logo-panel { max-width: 470px; }
  .ranking-card, .ranking-card:first-child { grid-column: span 6; }
  .story-card, .story-card-featured { grid-column: span 6; }
  .story-card-featured { grid-column: 1 / -1; }
  .spotlight-panel, .content-grid { grid-template-columns: 1fr; gap: 42px; }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-column:last-child { grid-column: 2 / -1; }
  .division-grid, .division-grid.track-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px) {
  .container { width: min(calc(100% - 30px), var(--max)); }
  .brand span { display: none; }
  .hero-grid { padding: 54px 0 58px; }
  .hero h1 { font-size: clamp(3rem, 15vw, 4.75rem); }
  .hero-text { font-size: 1rem; }
  .hero-logo-panel { display: none; }
  .hero-proof { grid-template-columns: 1fr; gap: 10px; margin-top: 28px; }
  .hero-proof div { display: grid; grid-template-columns: 60px 1fr; align-items: center; gap: 10px; }
  .section { padding: 58px 0; }
  .section-heading, .social-grid, .sponsor-grid, .ranking-detail-header { align-items: flex-start; flex-direction: column; }
  .rankings-grid, .stories-grid { grid-template-columns: 1fr; }
  .ranking-card, .ranking-card:first-child, .story-card, .story-card-featured { grid-column: auto; min-height: 0; }
  .story-card-image { aspect-ratio: 16 / 9; }
  .sport-cards, .ranking-browser, .contact-cards, .staff-grid { grid-template-columns: 1fr; }
  .staff-card-editor { grid-column: auto; }
  .sport-card { min-height: 310px; padding: 28px; }
  .spotlight-card { padding: 30px; box-shadow: 10px 10px 0 var(--green); }
  .social-actions { width: 100%; }
  .social-actions .button { flex: 1; }
  .page-hero { padding: 58px 0 48px; }
  .page-hero h1 { font-size: clamp(3rem, 14vw, 5rem); }
  .story-toolbar { grid-template-columns: 1fr; }
  .category-filter { width: 100%; }
  .article-hero { padding: 54px 0 42px; }
  .article-hero h1 { font-size: clamp(2.7rem, 13vw, 4.6rem); }
  .article-feature-image, .article-layout { width: min(calc(100% - 30px), 1050px); }
  .article-content { font-size: 1.02rem; line-height: 1.78; }
  .story-nav { grid-template-columns: 1fr; }
  .division-grid, .division-grid.track-grid { grid-template-columns: repeat(2, 1fr); }
  .ranking-row { grid-template-columns: 56px 1fr; gap: 12px; }
  .ranking-grade, .ranking-mark { grid-column: 2; }
  .ranking-explanation { grid-column: 1 / -1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-column:last-child { grid-column: auto; }
  .footer-bottom { flex-direction: column; }
}

/* Mobile first sports experience */
.mobile-dock { display:none; }
@media (max-width:700px) {
  html { scroll-padding-top:96px; }
  body { padding-bottom:calc(64px + env(safe-area-inset-bottom)); }
  .sports-ticker { display:none; }
  .site-header { top:0; }
  .nav-wrap { min-height:58px; }
  .brand img { width:44px; height:44px; }
  .brand > span { font-size:.78rem; }
  .menu-button { width:46px; height:46px; padding:8px; }
  .site-nav { top:58px; width:min(92vw,390px); height:calc(100dvh - 58px); padding:14px 20px calc(88px + env(safe-area-inset-bottom)); }
  .site-nav > a,.site-nav .nav-search-button { min-height:52px; font-size:.95rem; }
  .nav-overlay { inset:58px 0 0; }
  .section-nav { display:block; position:relative; }
  .section-nav .container { width:100%; min-height:40px; padding:0 8px; gap:0; scrollbar-width:none; }
  .section-nav .container::-webkit-scrollbar { display:none; }
  .section-nav strong { display:none; }
  .section-nav a { flex:0 0 auto; min-height:40px; display:flex; align-items:center; padding:0 13px; border-right:1px solid #303833; font-size:.68rem; }
  .sports-home { padding:12px 0 30px; }
  .sports-home-grid { gap:14px; }
  .home-spotlight { padding-top:14px; }
  .home-spotlight-grid { gap:14px; }
  .ohio-today-band { padding:16px 0; }
  .home-lead-image,.home-lead-image img { min-height:220px; height:220px; }
  .home-lead-image span { top:12px; left:12px; }
  .home-lead > div { padding:16px; }
  .home-lead h1 { font-size:clamp(1.72rem,8vw,2.35rem); line-height:1.07; }
  .home-section-title { margin-top:18px; }
  .home-main .stories-grid { display:grid; gap:12px; }
  .story-card,.story-card-featured { grid-column:1 / -1; }
  .story-card-body { padding:16px; }
  .story-card h3 { font-size:1.45rem; }
  .home-right { gap:14px; }
  .home-panel { padding:0 13px; }
  .page-hero,.article-hero { padding:38px 0 32px; }
  .page-hero h1,.article-hero h1 { font-size:clamp(2.35rem,12vw,3.8rem); }
  .section { padding:42px 0; }
  .section-heading { margin-bottom:24px; }
  .ranking-row { grid-template-columns:48px 1fr; gap:10px; padding:15px; }
  .ranking-grade,.ranking-mark { grid-column:2; }
  .ranking-explanation { grid-column:1 / -1; }
  .ranking-number { font-size:2rem; }
  /* Below 700px, a data table stops being a scroll-to-read strip (the
     760px min-width on .table-scroll table forced horizontal scrolling
     on every phone, not just wide tables) and stacks into one card per
     row instead -- each cell labeled from its column header via
     data-label (src/lib/markdown.mjs), so "Athlete: Calvin Watson" reads
     top to bottom with no swiping. The <thead> stays in the DOM for
     screen readers, just visually hidden, matching .visually-hidden. */
  .table-scroll { margin-inline:0; overflow-x:visible; }
  .table-scroll table { min-width:0; width:100%; }
  .table-scroll thead { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .table-scroll tbody tr { display:block; padding:12px 14px; }
  .table-scroll tbody tr:nth-child(even) { background:#fafafa; }
  .table-scroll td { display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding:6px 0; border-bottom:0; font-size:.92rem; }
  .table-scroll td::before { content:attr(data-label); flex:0 0 auto; font-weight:800; font-size:.72rem; letter-spacing:.03em; text-transform:uppercase; color:#5b6560; }
  .button,.gender-tabs a,.tournament-tabs button { min-height:48px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:30px 18px; }
  .footer-brand { grid-column:1 / -1; }
  .footer-column:last-child { grid-column:auto; }
  .footer-bottom { flex-direction:column; }
  .mobile-dock { position:fixed; z-index:120; left:0; right:0; bottom:0; min-height:64px; display:grid; grid-template-columns:repeat(5,1fr); padding-bottom:env(safe-area-inset-bottom); color:var(--dock-inactive); background:#080c09; border-top:1px solid #313a35; box-shadow:0 -5px 18px rgba(0,0,0,.22); }
  .mobile-dock a { min-width:0; min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:6px 1px; }
  .mobile-dock a:active { color:var(--green); background:#151d18; }
  .mobile-dock svg { width:19px; height:19px; fill:#8a938d; }
  .mobile-dock b { max-width:100%; overflow:hidden; font-size:.54rem; letter-spacing:.01em; text-transform:uppercase; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
  /* Real state, not just a tap flash -- a visitor should be able to see
     which of the 4 destinations they're already on. */
  .mobile-dock a[aria-current="page"] svg { fill:var(--green); }
  .mobile-dock a[aria-current="page"] b { color:var(--green); }
  /* Mobile Split Watch/menu-overlap fix (2026-08-28): the fixed dock
     (z-index 120) sat visually on top of the open mobile drawer
     (z-index 103 at this same breakpoint), covering its lower portion --
     confirmed directly, this is exactly why Split Watch's actions looked
     unreachable. Simplest correct fix: the dock is part of the page
     underneath the drawer, so hide it outright while the drawer is open
     (body.nav-open, already toggled by the existing menu-open logic in
     site.js -- no new JS needed) and let it reappear the instant the
     drawer closes. */
  body.nav-open .mobile-dock { display: none; }
}
@media (max-width:380px) {
  .brand > span { display:none; }
  .section-nav a { padding-inline:10px; }
  .home-lead-image,.home-lead-image img { min-height:200px; height:200px; }
}
@media print {
  .mobile-dock { display:none!important; }
}

@media (max-width: 480px) {
  .container { width: min(calc(100% - 24px), var(--max)); }
  .nav-wrap { min-height: 66px; }
  .site-nav { top: 66px; height: calc(100dvh - 66px); width: 100%; }
  .nav-overlay { inset: 66px 0 0; }
  .brand img { width: 44px; height: 44px; }
  .hero-actions { width: 100%; }
  .hero-actions .button, .social-actions .button, .sponsor-grid .button { width: 100%; }
  .hero-proof strong { font-size: 1.55rem; }
  .division-grid, .division-grid.track-grid { grid-template-columns: 1fr; }
  .division-card { min-height: 130px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand, .footer-column:last-child { grid-column: auto; }
  .story-card-body { padding: 20px; }
  .article-feature-image, .article-layout { width: min(calc(100% - 24px), 1050px); }
  .article-layout { padding-top: 44px; }
  .article-actions .share-button { width: 100%; justify-content: center; }
}

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

@media print {
  .site-header, .site-footer, .article-actions, .story-nav, .related-section { display: none !important; }
  body, .article-shell { background: var(--white); }
  .article-hero { padding: 20px 0; color: var(--black); background: var(--white); }
  .article-deck, .article-meta { color: var(--ink); }
  .article-layout { padding: 20px 0; }
}

/* Professional sports network shell */
.sports-home { padding:28px 0 50px; background:#f3f5f4; }
.sports-home-grid { display:grid; grid-template-columns:210px minmax(0,1fr) 325px; gap:20px; align-items:start; }
.home-quick,.home-panel,.home-lead { background:#fff; border:1px solid #dce2de; }
.home-quick > h2,.home-panel-title { margin:0; padding:16px; border-bottom:3px solid #111714; font-family:Arial,Helvetica,sans-serif; font-size:.95rem; font-weight:900; text-transform:none; }
.home-quick > a { padding:13px 14px; display:flex; gap:10px; border-bottom:1px solid #edf0ee; font-size:.78rem; font-weight:800; }
.home-quick > a span { color:#a2aaa6; font-size:.65rem; }
.home-newsletter { margin:18px -1px -1px; padding:18px 16px; color:#fff; background:#111714; }
.home-newsletter h3 { margin:8px 0; font-family:Arial,Helvetica,sans-serif; font-size:1.2rem; text-transform:none; }
.home-newsletter p:not(.eyebrow) { color:#bbc3be; font-size:.75rem; }
.home-newsletter > a { display:block; padding:10px; color:#07130d; background:#12c77a; text-align:center; font-size:.75rem; font-weight:900; }

/* Intern writer recruitment banner (homepage, between Latest Stories and
   Latest Rankings) -- uses the site-wide design tokens, not the
   "professional sports network shell" palette above, since it sits in the
   general content flow rather than inside that widget grid. */
.intern-banner { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:26px 28px; border-radius:14px; background:rgba(var(--green-rgb),.08); border:1px solid rgba(var(--green-rgb),.3); }
.intern-banner h2 { margin:6px 0 8px; }
.intern-banner p:not(.eyebrow) { margin:0; max-width:56ch; color:var(--muted); }
.intern-banner-actions { display:flex; align-items:center; gap:18px; flex-shrink:0; }
@media (max-width:700px) {
  .intern-banner { flex-direction:column; align-items:flex-start; }
}
.home-lead { overflow:hidden; }
.home-lead-image { position:relative; display:block; min-height:360px; background:#17201b; }
.home-lead-image img { width:100%; height:360px; object-fit:cover; }
.home-lead-image span { position:absolute; top:18px; left:18px; padding:8px 11px; color:#fff; background:var(--green); font-size:.65rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.home-lead > div { padding:22px 24px; }
.home-lead h1 { margin:0 0 12px; font-family:Arial Black,Arial,sans-serif; font-size:clamp(2rem,3.5vw,2.8rem); line-height:1.04; letter-spacing:-.035em; text-transform:none; }
.home-lead > div > p:not(.eyebrow) { color:#58605c; }
.home-section-title { display:flex; align-items:end; justify-content:space-between; margin-top:25px; padding-bottom:10px; border-bottom:3px solid #111714; }
.home-section-title h2,.home-panel-title h2 { margin:0; font-family:Arial,Helvetica,sans-serif; font-size:1.1rem; font-weight:900; text-transform:none; }
.home-section-title a { color:var(--green-dark); font-size:.75rem; font-weight:900; }
.home-main .stories-grid { margin-top:0; }
.home-main .story-card { grid-column:span 6; }
.home-right { display:grid; gap:18px; }
.home-panel { padding:0 15px; }
.home-panel-title { min-height:51px; padding:0; display:flex; align-items:center; justify-content:space-between; }
.home-panel-title span { padding:5px 7px; color:#008850; background:#e7f8f0; font-size:.58rem; font-weight:900; text-transform:uppercase; }
.home-panel .ranking-card { min-height:0; padding:15px 0; border:0; border-bottom:1px solid #e8ece9; background:#fff; }
.home-panel .ranking-card h3 { font-family:Arial,Helvetica,sans-serif; font-size:.86rem; text-transform:none; }
.home-panel-link { min-height:47px; display:flex; align-items:center; justify-content:space-between; color:var(--green-dark); font-size:.7rem; font-weight:900; }
.home-meet { min-height:67px; display:grid; grid-template-columns:52px 1fr; gap:11px; align-items:center; border-bottom:1px solid #e8ece9; }
.home-meet > b { width:47px; height:43px; display:grid; place-items:center; color:#007746; background:#e9f7f1; font-size:.62rem; }
.home-meet strong,.home-meet small { display:block; }
.home-meet strong { font-size:.72rem; }

/* ===== Homepage/mobile rebuild (2026-08-28) ===== */

/* Top-of-page band: three primary actions, then Vote Now. No meets/date
   card leads the page anymore (2026-08-28 feedback) -- the homepage now
   opens with what Podium Watch does best (voting, rankings), not a
   schedule widget; real meet data still lives in Upcoming Meets further
   down and in the full Meet Center. */
.ohio-today-band { padding:20px 0; background:#111714; }

/* Three big, unmissable phone actions -- Latest Results, Find a Meet,
   State Rankings. Every tap target here is well over the 44px floor. */
.home-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:0; }
.home-action { min-height:54px; display:flex; align-items:center; justify-content:center; padding:10px 10px; text-align:center; font-family:Arial,Helvetica,sans-serif; font-weight:900; font-size:.82rem; text-decoration:none; }
.home-action-primary { color:#07130d; background:var(--green); }
.home-action-primary:hover { background:#0dbf6f; }
.home-action-outline { color:#111714; background:#fff; border:2px solid #111714; }
.home-action-outline:hover { color:#fff; background:#111714; }

/* Home Spotlight -- Power Rankings and Follow Your School promoted out
   of the narrow right-rail sidebar into a full-width, side-by-side band
   right under Vote Now (2026-08-28 feedback: these are what the site
   does well and should show immediately, not scroll past the entire
   featured story to reach on mobile). Both panels keep the exact same
   .home-panel card chrome and scripts -- position and width changed,
   nothing else. */
.home-spotlight { padding:24px 0 0; background:#f3f5f4; }
.home-spotlight-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }

/* Follow Your School -- reuses .home-panel's own card chrome (same
   background/border/title bar as Power Rankings and Upcoming Meets)
   rather than inventing a new visual language for one more sidebar
   module. */
.follow-school-panel-body { padding:0 15px 16px; }
/* Dismissible My Podium introduction (2026-08-28, Project 9.1) -- the
   promo copy can be dismissed on this device without removing the
   actually-useful search box underneath it. */
.follow-school-promo { position:relative; padding:12px 34px 12px 12px; margin:12px 0 4px; background:var(--pale-green); font-size:.8rem; color:#0a3d27; }
.follow-school-dismiss { position:absolute; top:8px; right:8px; padding:4px 7px; color:#0a3d27; background:transparent; border:0; font-size:.65rem; font-weight:800; text-transform:uppercase; cursor:pointer; }
.follow-school-dismiss:hover { text-decoration:underline; }
.follow-school-search { display:block; width:100%; margin:12px 0 8px; padding:10px 12px; border:1px solid #dce2de; font:inherit; font-size:.82rem; }
.follow-school-results { display:grid; gap:6px; max-height:230px; overflow-y:auto; }
.follow-school-result { display:block; width:100%; padding:9px 11px; text-align:left; color:#111714; border:1px solid #edf0ee; background:#fafbfa; font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; }
.follow-school-result:hover, .follow-school-result:focus-visible { border-color:var(--green); }
.follow-school-selected { padding:13px; border:1px solid #dce2de; background:#f7f9f8; }
.follow-school-selected strong { display:block; font-size:.92rem; }
.follow-school-selected-meta { display:grid; gap:5px; margin-top:9px; font-size:.75rem; color:#586058; }
.follow-school-selected-meta a { color:var(--green-dark); font-weight:800; }
.follow-school-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:11px; }
.follow-school-actions .button { min-height:40px; padding:8px 14px; font-size:.72rem; }
.follow-school-empty { padding:12px 15px 16px; font-size:.78rem; color:#7a827e; }

/* Vote Now -- promoted to a full-width banner directly under the primary
   actions, above the Quick Links/featured-story/sidebar layout, so it's
   one of the first things a visitor sees rather than tucked into the
   right-rail sidebar (2026-08-28 feedback). Stays hidden (see the
   :not([hidden]) guard below) until public/scripts/homepage.js confirms
   a real, currently-open-or-just-closed poll -- never shown as an empty
   green bar with nothing to vote on. */
.vote-now-top:not([hidden]) { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:14px; padding:14px 18px; background:var(--green); }
.vote-now-top-badge { flex-shrink:0; padding:6px 10px; color:var(--green); background:#07130d; font-family:Impact,Haettenschweiler,"Arial Narrow Bold",sans-serif; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.vote-now-body { display:flex; flex-wrap:wrap; align-items:center; gap:4px 16px; flex:1; min-width:0; }
.vote-now-category { margin:0; flex-basis:100%; color:#07130d; opacity:.62; font-family:Arial,Helvetica,sans-serif; font-size:.66rem; font-weight:900; letter-spacing:.05em; text-transform:uppercase; }
.vote-now-question { margin:0; color:#07130d; font-size:.94rem; font-weight:800; }
.vote-now-meta { margin:0; color:#07130d; opacity:.68; font-size:.72rem; }
.vote-now-body .button { margin-left:auto; flex-shrink:0; min-height:40px; padding:9px 18px; color:#fff; background:#07130d; border-color:#07130d; font-size:.74rem; }
.vote-now-body .button:hover { background:#1c2b22; }

@media (max-width:700px) {
  .vote-now-top:not([hidden]) { padding:14px 16px; }
  .vote-now-body .button { margin-left:0; width:100%; justify-content:center; margin-top:2px; }
}

@media (max-width:560px) {
  .home-actions { grid-template-columns:1fr; }
  .ohio-today-headline { font-size:1.12rem; }
}
.home-meet small { margin-top:3px; color:#8b938f; font-size:.62rem; }
.sports-ticker { color:#fff; background:#070a08; font-size:.72rem; }
.sports-ticker-inner { min-height:35px; display:flex; align-items:center; gap:22px; overflow:hidden; white-space:nowrap; }
.sports-ticker-inner strong { color:#aeb7b2; font-size:.64rem; letter-spacing:.12em; }
.sports-ticker-inner > span:not(.ticker-live) { padding-left:22px; color:#d0d5d2; border-left:1px solid #333a36; }
.sports-ticker-inner a { margin-left:auto; display:inline-flex; align-items:center; gap:6px; color:#75e8ad; font-weight:800; }
.ticker-live { padding:3px 7px; background:#e93247; border-radius:2px; font-size:.62rem; font-weight:900; letter-spacing:.08em; }
.site-header { background:#090c0a; backdrop-filter:none; }
.nav-wrap { min-height:70px; }
.brand { gap:10px; font-family:Arial,Helvetica,sans-serif; font-size:1rem; line-height:.82; }
.brand img { width:56px; height:56px; }
.brand > span { display:flex; flex-direction:column; }
.brand b:last-child { color:var(--green); }
.site-nav { gap:22px; font-family:Arial,Helvetica,sans-serif; font-size:.76rem; font-weight:800; letter-spacing:0; text-transform:none; }
.site-nav > a { border-bottom-width:4px; }
.nav-search-button { font-family:Arial,Helvetica,sans-serif; font-size:.72rem; font-weight:800; letter-spacing:0; text-transform:none; }
.nav-watch,.nav-instagram { min-height:39px!important; padding:0 14px!important; border:1px solid #3a433e!important; }
.nav-watch { color:#fff!important; background:var(--green); border-color:var(--green)!important; }
.nav-instagram { color:#fff!important; background:#151a17; }
.section-nav { background:#171c19; border-top:1px solid #2a312d; }
.section-nav .container { min-height:38px; display:flex; align-items:center; gap:26px; overflow:auto; white-space:nowrap; color:#c7ceca; font-size:.72rem; font-weight:700; }
.section-nav strong { color:var(--green); font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; }
.site-footer { border-top:1px solid #273028; background:#070a08; }
.footer-brand p { color:#b0b8b3; }
.page-hero,.article-hero { background:radial-gradient(circle at 88% 18%,rgba(15,175,104,.18),transparent 28%),linear-gradient(135deg,#090c0a,#171c19 68%,#073b27); }
@media (max-width:1120px) {
  .sports-home-grid { grid-template-columns:minmax(0,1fr) 300px; }
  .home-quick { display:none; }
  .site-nav { top:105px; height:calc(100dvh - 105px); }
  .section-nav { display:none; }
  .nav-watch,.nav-instagram { justify-content:center; margin-top:10px; }
}
@media (max-width:700px) {
  .sports-home-grid { grid-template-columns:1fr; }
  .home-spotlight-grid { grid-template-columns:1fr; }
  .home-spotlight { padding-top:18px; }
  .home-lead-image,.home-lead-image img { min-height:240px; height:240px; }
  .home-lead > div { padding:18px; }
  .home-main .story-card { grid-column:auto; }
  .sports-ticker-inner > span:not(.ticker-live) { display:none; }
  .sports-ticker-inner { gap:10px; }
  .brand > span { display:flex; }
}
@media (max-width:480px) {
  .brand img { width:46px; height:46px; }
  .brand > span { font-size:.82rem; }
  .site-nav { top:101px; height:calc(100dvh - 101px); }
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Podium Watch quality upgrade */
.site-nav { gap: 14px; flex: 1; justify-content: flex-end; white-space: nowrap; }
.brand { flex: 0 0 auto; }
.nav-wrap { gap: 18px; }
.power-tabs { display:grid; grid-template-columns:1fr 1fr; margin-top:12px; background:#eef2ef; }
.power-tabs button { min-height:38px; padding:8px; border:0; color:#202622; background:transparent; font-size:.7rem; font-weight:900; cursor:pointer; }
.power-tabs button.active { color:#fff; background:var(--green); }
.power-select-label { display:block; margin:9px 0 4px; }
.power-select-label select { width:100%; min-height:40px; padding:8px 10px; color:#202622; background:#fff; border:1px solid #dbe1dd; font-size:.72rem; font-weight:700; }
.power-row { min-height:56px; display:grid; grid-template-columns:26px 1fr; gap:5px; align-items:center; border-bottom:1px solid #e8ece9; }
.power-row > b { font-family:Georgia,serif; font-size:1.2rem; font-style:italic; }
.power-row strong,.power-row small { display:block; }
.power-row strong { font-size:.73rem; }
.power-row small { margin-top:2px; color:#929a95; font-size:.58rem; }
.power-row:hover strong { color:var(--green-dark); }
@media (max-width: 1320px) {
  .sports-ticker { display:none; }
  .menu-button { display:block; }
  .site-nav { position:fixed; right:0; top:108px; z-index:103; width:min(88vw,390px); height:calc(100dvh - 108px); padding:24px; display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:0; overflow:auto; background:var(--black); transform:translateX(105%); transition:transform .22s ease; }
  .site-nav[data-open="true"] { transform:translateX(0); }
  .site-nav > a { min-height:54px; justify-content:flex-start; border-bottom:1px solid #2b2b2b; }
  .nav-overlay { position:fixed; inset:108px 0 0; z-index:102; background:rgba(0,0,0,.58); }
  body.nav-open .nav-overlay { display:block; }
  .section-nav { display:block; position:relative; }
  .nav-watch,.nav-instagram { justify-content:center; margin-top:10px; }
}
@media (max-width:700px) {
  .nav-wrap { min-height:58px; }
  .site-nav { top:98px; width:min(92vw,390px); height:calc(100dvh - 98px); }
  .nav-overlay { inset:98px 0 0; }
  .section-nav { display:block; position:relative; }
}
@media (max-width:380px) {
  .brand > span { display:none; }
}
.nav-search-button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; color: var(--white); background: transparent; border: 1px solid rgba(255,255,255,.24); font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: uppercase; cursor: pointer; }
.nav-search-button:hover { color: var(--black); background: var(--green); border-color: var(--green); }
.search-dialog { width: min(calc(100% - 30px), 760px); max-width: none; padding: 0; color: var(--ink); background: var(--paper); border: 0; box-shadow: 0 30px 90px rgba(0,0,0,.45); }
.search-dialog::backdrop { background: rgba(0,0,0,.78); backdrop-filter: blur(3px); }
.search-dialog-inner { padding: clamp(24px, 5vw, 46px); }
.search-dialog-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.search-dialog-heading h2 { margin-bottom: 0; font-size: clamp(2.2rem, 7vw, 4rem); }
.search-dialog-close { min-width: 48px; min-height: 48px; padding: 10px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--ink); font-weight: 800; cursor: pointer; }
.search-shortcut-note { margin: 16px 0 0; color: var(--muted); font-size: .88rem; }
.global-search-form { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: stretch; }
.search-field-large input { min-height: 56px; font-size: 1.02rem; }
.search-page { display: grid; gap: 28px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-suggestions span { font-weight: 800; }
.search-suggestions button { min-height: 40px; padding: 7px 12px; border: 1px solid var(--line); background: var(--white); cursor: pointer; }
.search-suggestions button:hover { border-color: var(--green-dark); }
.search-results { display: grid; gap: 12px; }
.search-result-card { padding: 22px; border: 1px solid var(--line); background: var(--white); }
.search-result-card h2 { margin-bottom: 8px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.search-result-card p:not(.eyebrow) { margin-bottom: 12px; color: var(--muted); }

/* A clearly labeled ad placement, styled to sit quietly between content
   sections rather than read as a foreign, bolted-on block -- same border/
   background language as .info-card, deliberately smaller and quieter
   than a real content section (no heading, a muted uppercase label). */
.ad-slot { padding: 18px; border: 1px solid var(--line); background: var(--paper); text-align: center; }
.ad-slot-label { margin: 0 0 12px; font-size: .68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); }
.award-shell { display: grid; gap: 54px; }
.award-status { text-align: center; }
/* Finalists use a compact, logo-forward card so every candidate fits on
   screen at once (the whole point of voting is comparing them side by
   side) -- auto-fill lets the grid pack in as many columns as the
   viewport allows rather than a fixed count, so mobile shows 2-3 and a
   wide desktop shows 5-6, all without a breakpoint per size. Past
   winners keep the old, larger fixed-column layout (.award-winners),
   since an archive is browsed one story at a time, not compared. */
.award-finalists { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; }
/* Athlete of the Week's boys/girls split (2026-09-14): each gender gets
   its own clearly labeled group instead of one mixed grid -- .award-
   finalists is reused unchanged inside each group, so both gender rows
   still pack cards the same responsive way. Team of the Week has no
   category and never renders this wrapper at all. */
.award-gender-group + .award-gender-group { margin-top: 28px; }
.award-gender-heading { margin: 0 0 12px; font-size: 1.15rem; }
.award-winners { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.award-card { overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--white); }
.award-card-winner { border: 3px solid var(--green-dark); }
/* object-fit:contain (not cover) so a school logo is never cropped --
   most finalist images are logos uploaded through the admin tool, not
   action photos, and a padded light ground keeps transparent-background
   logos legible. */
.award-image, .award-image-placeholder { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--paper); padding: 10px; box-sizing: border-box; }
.award-image-placeholder { display: grid; place-items: center; padding: 0; color: var(--green); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 2.4rem; background: var(--green-ink); }
.award-card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 14px; }
.award-card-body h3 { margin-bottom: 0; font-size: 1.05rem; line-height: 1.2; }
.award-card-body .button { align-self: stretch; margin-top: 6px; min-height: 40px; padding: 8px 10px; font-size: .84rem; }
.award-card-meta { margin-bottom: 0; color: var(--muted); font-size: .78rem; }
.award-badge, .ranking-trust-badge, .change-badge { width: max-content; display: inline-flex; align-items: center; min-height: 30px; padding: 5px 10px; color: var(--black); background: var(--green); font-size: .74rem; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; }
.award-archive-card small { margin-top: auto; color: var(--muted); }
/* Vote count is its own clearly-legible line, not buried in the meta
   text -- a large tabular-numeral count plus a plain-language label. */
.award-vote-count { display: flex; align-items: baseline; gap: 5px; margin-bottom: 0; }
.award-vote-count strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.3rem; font-variant-numeric: tabular-nums; color: var(--green-dark); }
.award-vote-count span { color: var(--muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; }
/* The achievement/description are collapsed by default (see
   public/scripts/weekly-awards.js) so a compact card only ever shows
   logo, name, meta, vote count, and the vote button -- exactly what's
   needed to compare candidates at a glance. */
.award-details-toggle { align-self: flex-start; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--green-dark); font-weight: 800; font-size: .8rem; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.award-card-details { margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--line); }
.award-card-details[hidden] { display: none; }
.award-card-details p { margin-bottom: 8px; font-size: .86rem; }
.award-card-details p:last-child { margin-bottom: 0; }
.award-form { margin-top: 26px; }
.form-grid, .filter-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.form-field { display: grid; gap: 7px; font-weight: 800; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #aaa; background: var(--white); font: inherit; }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-field-full { grid-column: 1 / -1; }
.consent-field { display: flex; align-items: flex-start; gap: 10px; }
.consent-field input { width: 22px; min-height: 22px; margin-top: 2px; }
.honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-message { min-height: 1.5em; margin: 12px 0 0; font-weight: 700; }
.compact-empty { padding: 30px 20px; }

/* Podium Play (public/scripts/podium-play.js) -- the cooldown arcade
   shown after a confirmed vote. Deliberately reuses the same border/
   background/button language as the rest of this page rather than
   introducing a separate visual style, so it reads as part of the
   voting experience, not a bolted-on widget. */
.pp-panel { margin-top: 22px; padding: 22px; border: 1px solid var(--line); background: var(--paper); }
.pp-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.pp-vote-confirmed { margin: 0; font-weight: 800; }
.pp-cooldown-ring { --pp-progress: 0%; position: relative; min-width: 220px; padding: 8px 12px; overflow: hidden; border: 1px solid var(--line); background: var(--white); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-cooldown-ring::before { content: ""; position: absolute; inset: 0; width: var(--pp-progress); background: rgba(15, 175, 104, .18); transition: width 1s linear; }
.pp-cooldown-ring span { position: relative; }
.pp-progress-row { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); font-size: .84rem; }
.pp-progress-row strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.15rem; color: var(--green-dark); }
.pp-account { margin: 8px 0 0; font-size: .82rem; }
.pp-account a { font-weight: 800; color: var(--green-dark); }
.pp-games { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 10px; }
.pp-game-card { padding: 16px; border: 1px solid var(--line); background: var(--white); text-align: center; }
.pp-game-card h3 { margin-bottom: 6px; font-size: 1.15rem; }
.pp-game-card p { margin-bottom: 10px; color: var(--muted); font-size: .82rem; }
.pp-game-card .button { width: 100%; min-height: 44px; }
.pp-game-card-soon { opacity: .55; }
.pp-game-stage { padding: 20px; border: 1px solid var(--line); background: var(--white); text-align: center; }
.pp-stage-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.pp-stage-head h3 { margin-bottom: 0; }
.pp-stage-close { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: var(--white); font-weight: 800; cursor: pointer; }
.pp-clock { margin: 20px 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(2.8rem, 12vw, 4.5rem); font-variant-numeric: tabular-nums; }
/* Starting Gun's full tappable surface -- "the visitor taps anywhere in
   the game surface," so this IS the surface, not a small button inside
   one. A real <button> (not a div) so it's keyboard-operable for free. */
.pp-tap-zone { display: grid; place-items: center; width: 100%; min-height: 220px; margin-top: 14px; padding: 20px; border: 2px solid var(--line); background: var(--ink); color: var(--white); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.6rem, 6vw, 2.4rem); text-transform: uppercase; letter-spacing: 1px; text-align: center; cursor: pointer; transition: background-color .15s ease; }
.pp-tap-zone-go { background: var(--green); color: var(--black); }
/* Hurdle Dash -- a fixed internal canvas resolution (800x220, set via the
   canvas width/height attributes in JS) scaled purely by CSS to fit any
   width, so a resize/orientation change never touches game state. */
.pp-hd-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-hd-wrap { position: relative; }
.pp-hurdle-canvas { display: block; width: 100%; height: auto; aspect-ratio: 800 / 220; border: 1px solid var(--line); background: var(--white); touch-action: none; cursor: pointer; }
.pp-hd-overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(9, 9, 9, .78); color: var(--white); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.2rem, 5vw, 1.7rem); text-align: center; }
.pp-hd-hint { margin: 10px 0 0; color: var(--muted); font-size: .82rem; }

/* Tap Sprint */
.pp-ts-stats, .pp-btr-stats, .pp-mm-stats, .pp-hd-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.pp-track { position: relative; height: 46px; margin: 10px 0; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.pp-ts-runner { position: absolute; top: 50%; left: 0; width: 34px; height: 34px; margin-top: -17px; background: var(--black); transition: left .12s ease; }
.pp-ts-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
/* Two large, thumb-friendly buttons side by side -- comfortably reachable
   with one thumb near the bottom of the screen, not spread to opposite
   edges. */
.pp-ts-button { min-height: 96px; border: 2px solid var(--black); background: var(--white); color: var(--black); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.3rem; letter-spacing: 1px; cursor: pointer; touch-action: manipulation; }
.pp-ts-button:active { background: var(--green); }

/* Beat the Runner */
.pp-btr-round { margin: 4px 0 0; font-weight: 800; }
.pp-btr-track { display: grid; gap: 8px; margin: 10px 0; }
.pp-btr-lane { position: relative; height: 44px; border: 1px solid var(--line); background: var(--white); overflow: hidden; }
.pp-btr-lane-label { position: absolute; top: 4px; left: 6px; z-index: 1; font-size: .68rem; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.pp-btr-runner { position: absolute; bottom: 4px; left: 0; width: 26px; height: 26px; background: var(--black); transition: left .12s ease; }
.pp-btr-runner-cpu { background: var(--danger); }
.pp-stage-action[data-pp-btr-tap] { width: 100%; min-height: 96px; font-size: 1.3rem; }

/* Memory Match -- large, comfortable mobile tap targets */
.pp-mm-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.pp-mm-card { aspect-ratio: 1 / 1; min-height: 84px; display: grid; place-items: center; border: 2px solid var(--line); background: var(--ink); color: var(--ink); font-size: 2rem; cursor: pointer; touch-action: manipulation; transition: background-color .15s ease; }
.pp-mm-card-up { background: var(--white); color: var(--black); border-color: var(--black); }
.pp-mm-card-matched { background: var(--green); border-color: var(--green-dark); cursor: default; }
.pp-stage-action { min-width: 180px; min-height: 52px; }

/* Guess the Logo -- the zoomed crop lives in a fixed, clipped square so
   a scale() reveal never changes the surrounding layout as it reveals
   more of the image each guess. */
.pp-gtl-image-wrap { width: 160px; height: 160px; margin: 12px auto; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--white); }
.pp-gtl-image { width: 100%; height: 100%; object-fit: contain; transition: transform .25s ease; }
.pp-gtl-choices { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
.pp-gtl-choice { min-height: 44px; text-align: left; padding: 10px 14px; }
.pp-gtl-choice:disabled { opacity: .45; cursor: default; }
.pp-gtl-choice-wrong { border-color: var(--danger); }
.pp-gtl-feedback { margin-top: 8px; color: var(--muted); min-height: 1.2em; }
@media (min-width: 480px) { .pp-gtl-choices { grid-template-columns: 1fr 1fr; } }
.pp-result { margin: 16px 0 4px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: clamp(1.6rem, 6vw, 2.2rem); }
.pp-result-celebrate { animation: pp-celebrate .5s ease; }
@keyframes pp-celebrate { 0% { transform: scale(1); color: var(--ink); } 40% { transform: scale(1.08); color: var(--green-dark); } 100% { transform: scale(1); color: var(--ink); } }
.pp-pr { margin-bottom: 4px; color: var(--muted); }
.pp-score { margin-bottom: 16px; font-weight: 800; }
.pp-other-contest { margin: 18px 0 0; text-align: center; }
.pp-other-contest a { font-weight: 800; color: var(--green-dark); }
.pp-leaderboard { margin-top: 18px; padding: 16px; border: 1px solid var(--line); background: var(--white); }
/* A per-game record list (e.g. Hurdle Dash's own "Best distances"),
   living inside that game's own idle screen -- shares the same list
   styling as the main points leaderboard, just a smaller, quieter title. */
.pp-game-leaderboard { margin-top: 16px; padding: 14px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.pp-game-leaderboard-title { margin: 0; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.pp-leaderboard-list { display: grid; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.pp-leaderboard-list li { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.pp-leaderboard-list li:last-child { border-bottom: none; }
.pp-leaderboard-rank { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; color: var(--muted); }
.pp-leaderboard-points { font-weight: 800; color: var(--green-dark); font-variant-numeric: tabular-nums; }
/* World Records (2026-09-01): one headline record per game, across every
   real account -- a different shape than the ranked points leaderboard
   above, so its own list layout rather than reusing .pp-leaderboard-list. */
.pp-world-records-list { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.pp-world-records-list li { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .86rem; }
.pp-world-records-list li:last-child { border-bottom: none; }
.pp-world-record-game { font-weight: 800; }
.pp-world-record-value { font-variant-numeric: tabular-nums; color: var(--green-dark); font-weight: 800; }
.pp-world-record-note { font-weight: 400; color: var(--muted); }
.pp-world-record-holder { color: var(--muted); font-size: .8rem; }
.pp-vote-again { position: sticky; bottom: 12px; width: 100%; margin-top: 18px; box-shadow: var(--shadow); }

/* Relay Exchange (2026-09-02) -- a real oval "stadium" track drawn as SVG
   with a fixed 0-300x0-160 viewBox (the same "fixed internal coordinate
   system, scaled to fit via CSS" technique Hurdle Dash's own canvas
   already uses -- see its own comment). relayStadiumPoint() (JS) computes
   every runner's position in that same fixed coordinate space, so the
   whole track is correctly positioned and scaled at ANY real container
   width without any per-frame measurement -- a fixed-pixel version of
   this (translate()-positioned divs sized in real px) was the actual bug
   behind a real user report (2026-09-02): the track only looked right at
   the one container width it happened to be tuned for, and was visibly
   broken/misaligned at every other real screen size. The zoom-toward-
   exchange "camera" is a modest scale on the whole <svg>, skipped
   entirely under reduced motion (gated in JS, reinforced here). */
.pp-relay-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.pp-relay-track { display: block; width: 100%; height: auto; aspect-ratio: 300 / 160; margin: 10px 0; overflow: visible; transition: transform .25s ease; transform-origin: 27% 10%; }
.pp-relay-track-zoomed { transform: scale(1.12); }
.pp-relay-track-outline { stroke: var(--line); stroke-width: 3; }
.pp-relay-exchange-marker { fill: var(--green); }
.pp-relay-runner { fill: var(--danger); }
.pp-relay-runner-player { fill: var(--black); }
.pp-relay-action-label { margin: 10px 0 6px; font-weight: 700; color: var(--muted); text-align: center; }

/* Cone Slalom (2026-09-02) -- a 3-lane vertically scrolling course. */
.pp-cs-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.pp-cs-course { position: relative; height: 220px; margin: 10px 0; border: 1px solid var(--line); background: var(--paper); overflow: hidden; }
.pp-cs-lane { position: absolute; top: 0; bottom: 0; width: calc(100% / 3); border-left: 1px dashed var(--line); }
.pp-cs-lane[data-pp-cs-lane="0"] { left: 0; border-left: none; }
.pp-cs-lane[data-pp-cs-lane="1"] { left: calc(100% / 3); }
.pp-cs-lane[data-pp-cs-lane="2"] { left: calc(200% / 3); }
.pp-cs-runner { position: absolute; bottom: 10px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; background: var(--black); transition: left .18s ease; z-index: 2; }
.pp-cs-runner-moving { background: var(--green-dark); }
.pp-cs-group { position: absolute; left: 0; top: -60px; width: 100%; height: 44px; display: grid; grid-template-columns: repeat(3, 1fr); }
.pp-cs-obstacle { display: grid; place-items: center; font-size: 1.6rem; opacity: 0; }
.pp-cs-obstacle-active { opacity: 1; }

/* Pace Perfect (2026-09-02) -- a beat pulse timed via CSS animation-
   duration (set inline to the real beat interval), not per-frame JS. */
.pp-pace-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-size: .86rem; }
.pp-pace-target { position: relative; display: grid; place-items: center; width: 100%; min-height: 160px; margin-top: 10px; border: 2px solid var(--line); background: var(--ink); cursor: pointer; touch-action: manipulation; }
.pp-pace-ring { position: absolute; width: 90px; height: 90px; border: 3px solid var(--green); border-radius: 50%; }
.pp-pace-pulse { width: 40px; height: 40px; border-radius: 50%; background: var(--green); animation-name: pp-pace-beat; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes pp-pace-beat { 0% { transform: scale(.5); opacity: .5; } 85% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(.5); opacity: .5; } }
@keyframes pp-pace-beat-reduced { 0% { opacity: .5; } 85% { opacity: 1; } 100% { opacity: .5; } }
.pp-pace-target-hint { margin: 8px 0 0; color: var(--muted); text-align: center; }
[data-pp-pace-feedback] { font-weight: 800; }
[data-pp-pace-feedback][data-band="perfect"] { color: var(--green-dark); }
[data-pp-pace-feedback][data-band="miss"] { color: var(--danger); }

/* Pack Pass (2026-09-02) -- three lane-choice buttons. */
.pp-pack-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.pp-pack-lanes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; }
.pp-pack-lane { min-height: 96px; border: 2px solid var(--line); background: var(--white); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.05rem; letter-spacing: 1px; cursor: pointer; touch-action: manipulation; }
.pp-pack-lane-open { border-color: var(--green); background: rgba(15, 175, 104, .12); }
.pp-pack-lane-blocked { border-color: var(--danger); background: rgba(162, 43, 43, .08); color: var(--muted); }

/* Finish Chute (2026-09-02) -- every pairing shows color AND symbol
   together, never color alone (a real accessibility requirement here,
   not just styling). */
.pp-fc-stats { display: flex; justify-content: space-between; margin: 10px 0; font-weight: 800; font-variant-numeric: tabular-nums; font-size: .86rem; }
.pp-fc-bib { display: grid; place-items: center; gap: 4px; min-height: 100px; margin: 10px 0; border: 2px solid var(--line); transition: background-color .15s ease; }
.pp-fc-bib-symbol { font-size: 2.4rem; }
.pp-fc-bib-color { font-size: .78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.pp-fc-bib-green, .pp-fc-control-green { border-color: #0b6b3a; }
.pp-fc-bib-blue, .pp-fc-control-blue { border-color: #0b3f8f; }
.pp-fc-bib-red, .pp-fc-control-red { border-color: #7a0b0b; }
.pp-fc-bib-gold, .pp-fc-control-gold { border-color: #8a5a00; }
.pp-fc-bib-correct { background: rgba(15, 175, 104, .18); }
.pp-fc-bib-wrong { background: rgba(162, 43, 43, .14); }
.pp-fc-controls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.pp-fc-control { min-height: 76px; border: 2px solid var(--line); background: var(--white); font-size: 1.8rem; cursor: pointer; touch-action: manipulation; }

/* Spike Shuffle (2026-09-02) -- box position driven entirely by the
   --pp-ss-slot custom property, updated at the exact swap boundaries the
   logical spikeShuffleApplySwaps() tracking uses -- CSS never guesses. */
.pp-ss-boxes { position: relative; height: 110px; margin-top: 14px; --pp-ss-box-count: 3; }
.pp-ss-box { position: absolute; top: 0; width: calc(100% / var(--pp-ss-box-count) - 10px); height: 90px; left: calc(var(--pp-ss-slot, 0) * (100% / var(--pp-ss-box-count))); border: 2px solid var(--line); background: var(--white); font-size: 2.2rem; cursor: pointer; transition: left .3s ease; touch-action: manipulation; }
.pp-ss-box:disabled { cursor: default; }
.pp-ss-box-reveal { border-color: var(--green); background: rgba(15, 175, 104, .14); }
.pp-ss-box-wrong { border-color: var(--danger); background: rgba(162, 43, 43, .14); }

/* Runner Says (2026-09-02) -- four large, color-and-icon-distinct
   controls; never relies on color alone (each has its own icon and
   accessible label too). */
.pp-rs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; }
.pp-rs-symbol { min-height: 84px; border: 2px solid var(--line); background: var(--white); font-size: 2rem; cursor: pointer; touch-action: manipulation; transition: background-color .12s ease, transform .12s ease; }
.pp-rs-symbol:disabled { cursor: default; }
.pp-rs-symbol-shoe { border-color: #0b6b3a; }
.pp-rs-symbol-stopwatch { border-color: #0b3f8f; }
.pp-rs-symbol-medal { border-color: #8a5a00; }
.pp-rs-symbol-trophy { border-color: #7a0b0b; }
.pp-rs-symbol-active { background: var(--green); transform: scale(1.08); }
.pp-rs-symbol-reveal { background: rgba(162, 43, 43, .14); border-color: var(--danger); }

@media (prefers-reduced-motion: reduce) {
  .pp-result-celebrate { animation: none; }
  .pp-cooldown-ring::before { transition: none; }
  .pp-relay-track { transition: none; }
  .pp-relay-track-zoomed { transform: none; }
  .pp-pace-pulse { animation-name: pp-pace-beat-reduced; }
  .pp-rs-symbol-active { transform: none; }
}

.tournament-shell { display: grid; gap: 74px; }
.source-notice { padding: 22px; color: var(--white); background: var(--green-ink); border-left: 8px solid var(--green); }
.source-notice p { margin: 6px 0 0; color: #e1f1e9; }
.division-finder { display: grid; gap: 22px; }
.division-results { display: grid; gap: 10px; }
.division-result { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; padding: 18px; border: 1px solid var(--line); background: var(--paper); }
.division-result h3, .division-result p { margin-bottom: 5px; }
.division-result-values { min-width: 190px; display: grid; justify-items: end; gap: 4px; text-align: right; }
.division-result-values strong { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.55rem; text-transform: uppercase; }
.division-result-values span { color: var(--muted); font-size: .82rem; }
.division-result-values .change-badge { color: var(--black); }
.tournament-tabs button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--ink); background: transparent; font-weight: 800; text-transform: uppercase; cursor: pointer; }
.tournament-tabs button[aria-pressed="true"], .tournament-tabs button:hover { background: var(--green); border-color: var(--green); }
.regional-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.regional-card { padding: 24px; border: 1px solid var(--line); background: var(--white); }
.regional-card h3 { margin-bottom: 8px; }
.regional-card ul { padding-left: 20px; }
.regional-representation { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.regional-representation p { margin-bottom: 6px; }

.methodology-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.methodology-copy { max-width: none; margin: 0; }
.methodology-sidebar { display: grid; gap: 18px; position: sticky; top: 96px; }
.ranking-trust-badge { margin-right: 5px; }
.ranking-trust-badge.editorial { color: var(--white); background: var(--black); }
.ranking-trust-badge.verified { background: var(--green); }
.ranking-source-panel { display: grid; grid-template-columns: 1fr auto; gap: 22px; align-items: center; margin-bottom: 22px; }
.ranking-source-panel p { margin-bottom: 0; }
.ranking-source-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.quick-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quick-link-card { min-height: 190px; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); background: var(--white); }
.quick-link-card h3 { margin-bottom: 8px; }
.quick-link-card p { color: var(--muted); }
.quick-link-card .text-link { margin-top: auto; }
.trust-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.trust-strip article { padding: 22px; background: var(--white); }
.trust-strip h3 { font-size: 1.5rem; margin-bottom: 7px; }
.trust-strip p { margin-bottom: 0; color: var(--muted); }

@media (max-width: 1120px) {
  .site-nav .nav-search-button { min-height: 54px; justify-content: flex-start; padding: 14px 4px; border: 0; border-bottom: 1px solid #2b2b2b; font-size: 1rem; }
  .award-winners, .regional-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quick-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .global-search-form, .form-grid, .filter-grid, .methodology-layout { grid-template-columns: 1fr; }
  .form-field-full { grid-column: auto; }
  .award-finalists { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
  .award-winners, .regional-grid, .quick-links, .trust-strip { grid-template-columns: 1fr; }
  .division-result { grid-template-columns: 1fr; }
  .division-result-values { min-width: 0; justify-items: start; text-align: left; }
  .methodology-sidebar { position: static; }
  .ranking-source-panel { grid-template-columns: 1fr; }
  .search-dialog-heading { flex-direction: column; }
}

/* Path to State roadmap -- shared by the team profile (/team/) and the
   athlete profile (/athlete/), rendered by public/scripts/path-to-state.js.
   No horizontal stepper/progress-indicator pattern existed anywhere in
   this project before this, so this is an original component (it borrows
   only the pill/active-state look of .tournament-tabs, which is a click
   filter, not a progress indicator). Lives here once, in the shared
   stylesheet, rather than duplicated into both pages' own <style> blocks,
   since both pages render the identical component.
   var(--team-primary, ...) falls back to the site green wherever
   --team-primary isn't defined (every page except the team profile,
   which sets it locally per team). */
.path-to-state { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin: 20px 0 0; padding: 0; list-style: none; }
.path-to-state-node { position: relative; display: grid; gap: 8px; align-content: start; padding: 0 10px; text-align: center; }
.path-to-state-node::before { content: ""; position: absolute; z-index: 0; top: 18px; left: -50%; width: 100%; height: 4px; background: rgba(15, 23, 42, .14); }
.path-to-state-node:first-child::before { display: none; }
.path-to-state-node[data-reached="true"]::before { background: var(--team-primary, var(--green)); }
.path-to-state-dot { position: relative; z-index: 1; justify-self: center; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 4px solid var(--white); background: rgba(15, 23, 42, .22); color: var(--white); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 1.05rem; box-shadow: 0 0 0 2px rgba(15, 23, 42, .1); }
.path-to-state-node[data-status="upcoming"] .path-to-state-dot { background: var(--black); }
.path-to-state-node[data-status="qualified_team"] .path-to-state-dot { background: var(--team-primary, var(--green)); }
.path-to-state-node[data-status="qualified_individuals"] .path-to-state-dot { background: #e6a700; }
.path-to-state-node[data-status="eliminated"] .path-to-state-dot { background: #94a3b8; }
.path-to-state-stage { margin: 0; font-size: 1.15rem; letter-spacing: .4px; }
.path-to-state-date { margin: 0; color: var(--muted); font-size: .8rem; font-weight: 800; }
.path-to-state-rule { margin: 0; font-size: .86rem; }
.path-to-state-rule[data-unpublished="true"] { color: var(--muted); font-style: italic; }
.path-to-state-status { justify-self: center; display: inline-flex; padding: 5px 10px; border-radius: 999px; background: #e2e8f0; color: #334155; font-size: .7rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.path-to-state-status[data-tone="qualified"] { background: rgba(15, 175, 104, .16); color: var(--green-dark); }
.path-to-state-status[data-tone="partial"] { background: rgba(230, 167, 0, .2); color: #7c4a03; }
.path-to-state-status[data-tone="ended"] { background: #e2e8f0; color: #475569; }
.path-to-state-note-text { margin: 0; padding: 8px 10px; border-left: 3px solid var(--team-primary, var(--green)); background: rgba(15, 23, 42, .04); font-size: .8rem; text-align: left; }
.path-to-state-source { margin: 16px 0 0; color: var(--muted); font-size: .8rem; }

/* Vertical below 700px, the same breakpoint the rest of this file already
   collapses multi-column grids at. The horizontal connector becomes a
   left rail instead. */
@media (max-width: 700px) {
  .path-to-state { grid-auto-flow: row; grid-auto-columns: auto; gap: 22px; }
  .path-to-state-node { grid-template-columns: 38px minmax(0, 1fr); grid-auto-flow: row dense; column-gap: 14px; padding: 0; text-align: left; }
  .path-to-state-node > :not(.path-to-state-dot) { grid-column: 2; }
  .path-to-state-dot { grid-row: 1 / span 4; justify-self: start; }
  .path-to-state-node::before { top: -22px; left: 17px; width: 4px; height: 22px; }
  .path-to-state-status { justify-self: start; }
}

@media (max-width: 480px) {
  .path-to-state { gap: 18px; }
  .path-to-state-node { grid-template-columns: 30px minmax(0, 1fr); column-gap: 11px; }
  .path-to-state-dot { width: 30px; height: 30px; border-width: 3px; font-size: .9rem; }
  .path-to-state-node::before { left: 13px; }
  .path-to-state-stage { font-size: 1rem; }
}

/* Split Watch's nav dropdown -- two destinations (enter a race
   day code, or a coach signed-in shortcut) under one hover/click menu.
   The trigger is a real <a> (not a <button>) so it degrades to a normal
   working link to the join page if JS never runs; the panel is a plain
   progressive enhancement on top via :hover/:focus-within, and
   public/scripts/site.js adds click-to-toggle for touch. See
   docs/DECISIONS.md, 2026-08-21. */
.nav-dropdown { position: relative; display: flex; align-items: center; }

.nav-dropdown-trigger {
  min-height: 44px; display: inline-flex; align-items: center;
  padding-block: 12px; border-bottom: 3px solid transparent;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[aria-current="page"],
.nav-dropdown[data-open="true"] .nav-dropdown-trigger {
  color: var(--green); border-color: var(--green);
}

.nav-dropdown-panel {
  position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 220px;
  padding: 8px; display: grid; gap: 2px; z-index: 120;
  background: var(--black); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.nav-dropdown:hover .nav-dropdown-panel,
.nav-dropdown:focus-within .nav-dropdown-panel,
.nav-dropdown[data-open="true"] .nav-dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.nav-dropdown-panel a {
  display: block; padding: 12px 14px; border-radius: 8px; color: #ffffff;
  text-decoration: none; font-family: Arial, Helvetica, sans-serif;
  text-transform: none; letter-spacing: normal; font-size: .88rem; font-weight: 750;
  white-space: nowrap;
}

.nav-dropdown-panel a:hover { background: rgba(255, 255, 255, .1); color: var(--green); }

@media (max-width: 1320px) {
  /* In-flow on mobile instead of floating -- avoids reserving invisible
     space inside the fixed, overflow:auto mobile nav panel when closed,
     and sidesteps hover entirely (meaningless on touch) in favor of the
     click-to-toggle behavior public/scripts/site.js adds. */
  .nav-dropdown { display: block; }
  .nav-dropdown-panel {
    position: static; margin-top: 4px; margin-left: 4px; box-shadow: none;
    background: transparent; border: 0; padding: 0 0 6px;
    display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .nav-dropdown[data-open="true"] .nav-dropdown-panel { display: grid; }
  .nav-dropdown-panel a { padding: 10px 4px; }
}

/* =========================================================================
   Navigation rebuild -- NAVIGATION_REBUILD_SPEC.md, 2026-08-21.
   Replaces the old two-row header (~20 flat links across a main nav row
   plus a separate "Explore" bar that duplicated Fan Poll) with 7 grouped
   dropdowns on the left and a 5-element utility cluster on the right,
   eliminating the second row entirely. Reuses the exact .nav-dropdown /
   .nav-dropdown-trigger / .nav-dropdown-panel mechanics already built and
   tested for Split Watch above -- that dropdown's own logic is
   untouched, only its outer wrapper (.nav-utility-sw) and trigger color
   are new. Breakpoint is 1320px throughout, matching every other
   mobile/desktop split already in this file and in site.js's own
   mobileQuery -- the spec's suggested 768px was a placeholder the spec
   itself said to confirm against the real CSS before using.
   ========================================================================= */

/* --- ticker: whole bar is one link now; mobile collapses to one line ---
   .ticker-cta picks up the "View calendar" styling an older rule
   (.sports-ticker-inner a) used to provide back when only that one
   segment was a link -- now the whole bar is the link, so that old
   selector matches nothing anymore. .ticker-mobile-only overrides an
   older, more specific ≤700px rule that hides every non-.ticker-live
   span (it predates this span even existing); !important here is
   deliberate, not a specificity hack to avoid understanding the
   cascade -- it's the correct fix for a real, confirmed conflict with
   a rule this rebuild doesn't otherwise touch. */
a.sports-ticker-inner { text-decoration: none; color: inherit; cursor: pointer; }
.ticker-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: #75e8ad; font-weight: 800; border-left: none !important; padding-left: 0 !important; }
.ticker-mobile-only { display: none; }

/* --- content nav: flat "Home" + 6 grouped dropdowns --- */
.nav-top-link {
  min-height: 44px; display: inline-flex; align-items: center;
  padding-block: 12px; border-bottom: 3px solid transparent;
}
.nav-top-link:hover, .nav-top-link[aria-current="page"] { color: var(--green); border-color: var(--green); }

.nav-group { position: relative; display: flex; align-items: center; }

.nav-group-trigger {
  appearance: none; background: none; border: none; font: inherit; color: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding-block: 12px; border-bottom: 3px solid transparent;
}

.nav-caret { display: inline-flex; width: 11px; height: 11px; transition: transform .15s ease; }
.nav-group[data-open="true"] .nav-caret { transform: rotate(180deg); }

.nav-group-trigger:hover,
.nav-group-trigger[aria-current="page"],
.nav-group[data-open="true"] .nav-group-trigger {
  color: var(--green); border-color: var(--green);
}

.nav-group-panel {
  position: absolute; top: 100%; left: 0; margin-top: 10px; min-width: 210px;
  padding: 8px; display: grid; gap: 2px; z-index: 120;
  background: var(--black); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

.nav-group:hover .nav-group-panel,
.nav-group:focus-within .nav-group-panel,
.nav-group[data-open="true"] .nav-group-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
}

.nav-group-panel a {
  display: block; padding: 12px 14px; border-radius: 8px; color: #ffffff;
  text-decoration: none; font-family: Arial, Helvetica, sans-serif;
  text-transform: none; letter-spacing: normal; font-size: .88rem; font-weight: 750;
  white-space: nowrap;
}

.nav-group-panel a:hover, .nav-group-panel a[aria-current="page"] { background: rgba(255, 255, 255, .1); color: var(--green); }

/* --- utility cluster: tools/actions, visually distinct from the content nav --- */
.nav-utility {
  display: flex; align-items: center; gap: 10px;
  padding-left: 18px; margin-left: 4px; border-left: 1px solid rgba(255, 255, 255, .16);
}

.nav-icon-button {
  appearance: none; cursor: pointer; min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 12px; color: var(--white); background: transparent;
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 750; text-transform: none;
}
.nav-icon-button:hover { color: var(--black); background: var(--green); border-color: var(--green); }
.nav-icon-button span { white-space: nowrap; }

.nav-utility-calc {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 14px; color: var(--white);
  border: 1px solid rgba(255, 255, 255, .26); border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 750; white-space: nowrap;
}
.nav-utility-calc:hover { color: var(--black); background: var(--green); border-color: var(--green); }

.nav-utility-social-row { display: flex; gap: 8px; }

.nav-utility-watch, .nav-utility-instagram {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 14px; border-radius: 8px;
  font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 750; white-space: nowrap;
}
.nav-utility-watch { color: #ffffff; background: var(--green); }
.nav-utility-watch:hover { background: var(--green-dark); }
.nav-utility-instagram { width: 44px; padding: 8px; color: #ffffff; background: #151a17; border: 1px solid rgba(255, 255, 255, .16); }
.nav-utility-instagram:hover { background: var(--green); color: var(--black); }

/* Split Watch's own dropdown restyled as the spec's green accent
   button -- everything under .nav-dropdown here is the exact mechanism
   built above; only this wrapper and the trigger's color are new. */
.nav-utility-sw .nav-dropdown-trigger {
  min-height: 44px; padding: 8px 16px; border-radius: 8px; border-bottom: none;
  color: var(--black); background: var(--green);
  font-family: Arial, Helvetica, sans-serif; font-size: .8rem; font-weight: 800;
  text-transform: none; letter-spacing: normal;
}
.nav-utility-sw .nav-dropdown-trigger:hover,
.nav-utility-sw .nav-dropdown-trigger[aria-current="page"],
.nav-utility-sw.nav-dropdown[data-open="true"] .nav-dropdown-trigger {
  color: var(--black); background: var(--green-dark);
}

/* Split Watch panel actions (2026-08-28 mobile fix): Coach Sign In first
   and styled as the primary green action, Enter Race Day Code second and
   outlined -- a coach opening this panel should never have to guess
   which one is theirs. Both need a bit more room than the panel's plain
   text links (a title line plus a short supporting line each), so this
   overrides .nav-dropdown-panel a's single-line sizing rather than
   fighting it. */
.nav-dropdown-panel-sw { min-width: 250px; }
.nav-dropdown-sw-action {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px !important; border-radius: 8px;
  text-decoration: none; white-space: normal !important;
}
.nav-dropdown-sw-title { font-size: .92rem; font-weight: 800; }
.nav-dropdown-sw-sub { font-size: .76rem; font-weight: 600; opacity: .8; }
.nav-dropdown-sw-primary { color: var(--black) !important; background: var(--green); }
.nav-dropdown-sw-primary:hover { background: var(--green-dark); color: var(--black) !important; }
.nav-dropdown-sw-secondary {
  margin-top: 2px; color: #ffffff !important; background: transparent;
  border: 1px solid rgba(255, 255, 255, .3);
}
.nav-dropdown-sw-secondary:hover { background: rgba(255, 255, 255, .08); color: #ffffff !important; }

/* --- mobile top bar: search icon peeks out next to the hamburger --- */
.nav-mobile-actions { display: none; align-items: center; gap: 4px; }
.nav-mobile-search { display: none; }

@media (max-width: 1320px) {
  /* Two older rules (one at ≤700px, one at this exact ≤1320px
     breakpoint) hide .sports-ticker entirely -- they predate this
     rebuild and directly contradict the spec's explicit requirement
     that the ticker truncate to one line on mobile, not disappear.
     Forcing it back on is the correct fix for that real conflict. */
  .sports-ticker { display: block !important; }
  .ticker-desktop-only { display: none !important; }
  .ticker-mobile-only {
    display: block !important; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; padding-left: 0 !important; border-left: none !important;
  }

  /* Search moves to the always-visible mobile top bar; the utility
     cluster's own search button (redundant with it at this width, and
     not part of the spec's drawer content list) is hidden. */
  .nav-mobile-actions { display: flex; }
  .nav-mobile-search { display: inline-flex; }
  .nav-utility-search { display: none; }

  .nav-top-link { min-height: 54px; padding: 14px 4px; border-bottom: 1px solid #2b2b2b; font-size: 1rem; }

  /* Accordion: tap to expand in place, only one section open at a time
     (enforced in site.js) -- never a floating panel on mobile, since a
     floating dropdown inside the fixed, overflow:auto drawer risked
     being silently clipped. */
  .nav-group { display: block; }
  .nav-group-trigger {
    width: 100%; justify-content: space-between; min-height: 54px;
    padding: 14px 4px; border-bottom: 1px solid #2b2b2b; font-size: 1rem;
  }
  .nav-group-panel {
    position: static; margin-top: 0; box-shadow: none; background: transparent; border: 0;
    display: none; opacity: 1; visibility: visible; pointer-events: auto; transform: none;
    padding: 4px 0 8px 14px;
  }
  .nav-group[data-open="true"] .nav-group-panel { display: grid; }
  .nav-group-panel a { padding: 12px 4px; font-size: .92rem; border-bottom: 1px solid #22262a; }

  /* Utility cluster becomes the pinned bottom section of the drawer --
     divider above it, Pace Calculator as a full-width row, Watch/
     Instagram as the two-up row at the very bottom. Split Watch itself
     is relocated OUT of this cluster on mobile (public/scripts/site.js,
     right after the Meets group, near the top of the drawer) -- these
     .nav-utility-sw rules still apply wherever it lands, since they
     target the class, not this container. */
  .nav-utility {
    flex-direction: column; align-items: stretch; gap: 10px;
    margin: 14px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .16);
  }
  .nav-icon-button, .nav-utility-calc { justify-content: flex-start; min-height: 52px; }
  .nav-utility-sw { display: block; margin-bottom: 6px; }
  .nav-utility-sw .nav-dropdown-trigger { width: 100%; justify-content: center; min-height: 52px; }
  .nav-utility-sw .nav-dropdown-panel { position: static; margin-top: 8px; box-shadow: none; background: rgba(255, 255, 255, .05); gap: 8px; padding: 8px; }
  .nav-utility-social-row { gap: 10px; margin-top: 4px; }
  .nav-utility-watch, .nav-utility-instagram { flex: 1; min-height: 52px; }
  .nav-utility-instagram { width: auto; }
}

/* ============================================================
   Preseason article interactive components
   (Race Board, How the Race Was Won, Fifth Runner Factor,
   Displacement Report, Reader Predictions, Team Compare drawer,
   Share This Team card, tooltips). Scoped under .pw-preseason-article
   so nothing here touches any other story. --pw-accent is set inline
   per page (green for boys, pink for girls) -- see storyPage() in
   scripts/build.mjs. Deliberately matches the sitewide --radius:0 sharp
   edges and existing .table-scroll / .info-card / .button-* patterns
   rather than introducing a second visual language.
   ============================================================ */
.pw-preseason-article { --pw-accent-soft: #f1f1f1; --pw-accent-soft: color-mix(in srgb, var(--pw-accent) 10%, var(--white)); }

.pw-stickynav { position: sticky; top: 96px; z-index: 90; margin: 0 0 30px; background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--pw-accent); }
.pw-stickynav-inner { display: flex; gap: 2px; overflow-x: auto; }
.pw-stickynav a { flex: 0 0 auto; padding: 13px 16px; color: var(--ink); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .78rem; letter-spacing: .6px; text-transform: uppercase; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; }
.pw-stickynav a:hover, .pw-stickynav a:focus-visible { color: var(--pw-accent); border-bottom-color: var(--pw-accent); }
@media (max-width: 700px) { .pw-stickynav { top: 0; } }

.pw-component { margin: 26px 0 18px; }
.pw-note { margin: 10px 0 24px; padding: 12px 16px; color: var(--ink); background: var(--pw-accent-soft); border-left: 4px solid var(--pw-accent); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
.pw-eyebrow { margin: 0 0 8px; color: var(--pw-accent); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .78rem; letter-spacing: 1.5px; text-transform: uppercase; }

/* Tooltips -- a small inline button, keyboard-focusable, toggled open on
   click or focus so a touch reader can reach it as easily as a mouse
   user. aria-expanded communicates state; the bubble itself is not
   `hidden` at rest so screen readers relying on aria-describedby still
   have the text available, but visually collapsed via .pw-tip[data-open]. */
.pw-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 5px; color: var(--white); background: var(--muted); border: 0; border-radius: 999px; font-family: Georgia, serif; font-size: .72rem; font-style: italic; line-height: 1; cursor: pointer; vertical-align: middle; }
.pw-tip:hover, .pw-tip:focus-visible, .pw-tip[data-open="true"] { background: var(--pw-accent); }
.pw-tip-bubble { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); width: 230px; padding: 10px 12px; color: var(--white); background: var(--black); font-family: Arial, Helvetica, sans-serif; font-size: .78rem; font-weight: 400; line-height: 1.4; text-transform: none; letter-spacing: normal; font-style: normal; display: none; }
.pw-tip[data-open="true"] .pw-tip-bubble { display: block; }

/* Race Board */
.pw-raceboard-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.pw-raceboard-hint { color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .82rem; }
table.pw-raceboard-table th[data-sort] { cursor: pointer; user-select: none; }
table.pw-raceboard-table th[data-sort]:hover { background: #222; }
table.pw-raceboard-table th[aria-sort="ascending"]::after { content: " \25B2"; }
table.pw-raceboard-table th[aria-sort="descending"]::after { content: " \25BC"; }
table.pw-raceboard-table tbody tr.pw-team-row { cursor: pointer; }
table.pw-raceboard-table tbody tr.pw-team-row:hover { background: var(--pw-accent-soft); }
table.pw-raceboard-table tbody tr.pw-honorable-row { background: #fbfaf6; }
table.pw-raceboard-table td.pw-cell-team { font-weight: 800; }
.pw-roster-row td { padding: 0; border-bottom: 1px solid var(--line); }
.pw-roster-panel { padding: 16px 18px; background: #f6f6f4; }
.pw-roster-panel table { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
.pw-roster-panel th { padding: 6px 8px; text-align: left; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .4px; }
.pw-roster-panel td { padding: 6px 8px; border-top: 1px solid var(--line); }
.pw-honorable-toggle-row td { padding: 14px; text-align: center; background: #fff; }

/* How the Race Was Won */
.pw-chart-controls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-bottom: 16px; }
.pw-chart-toggle { display: inline-flex; border: 1px solid var(--ink); }
.pw-chart-toggle button { padding: 8px 14px; color: var(--ink); background: var(--white); border: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .74rem; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.pw-chart-toggle button.active { color: var(--white); background: var(--ink); }
.pw-scorer-slider { display: flex; align-items: center; gap: 10px; font-family: Arial, Helvetica, sans-serif; font-size: .84rem; }
.pw-scorer-slider input[type="range"] { accent-color: var(--pw-accent); width: 160px; }
.pw-chart-wrap { position: relative; padding: 18px 14px 8px; background: var(--white); border: 1px solid var(--line); }
.pw-chart-wrap svg { width: 100%; height: auto; display: block; }
.pw-chart-line { fill: none; stroke-width: 3; }
.pw-chart-dot { transition: cy .35s ease, cx .35s ease; }
.pw-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; font-family: Arial, Helvetica, sans-serif; font-size: .8rem; }
.pw-chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pw-chart-legend i { display: inline-block; width: 12px; height: 12px; }
.pw-chart-leader { margin-top: 10px; padding: 10px 12px; background: var(--pw-accent-soft); font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
@media (prefers-reduced-motion: reduce) { .pw-chart-dot { transition: none; } }

/* Fifth Runner Factor */
.pw-fifthrunner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pw-fifthrunner-card { padding: 18px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--pw-accent); }
.pw-fifthrunner-card h4 { margin: 0 0 4px; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; text-transform: uppercase; }
.pw-fifthrunner-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; margin: 10px 0 12px; font-family: Arial, Helvetica, sans-serif; font-size: .84rem; }
.pw-fifthrunner-card dt { color: var(--muted); }
.pw-fifthrunner-card dd { margin: 0; font-weight: 700; text-align: right; }
.pw-fifthrunner-card label { display: flex; align-items: center; gap: 8px; font-family: Arial, Helvetica, sans-serif; font-size: .8rem; }
.pw-compare-panel { margin-top: 16px; padding: 16px; background: var(--pw-accent-soft); border: 1px solid var(--line); display: none; }
.pw-compare-panel[data-open="true"] { display: block; }

/* Displacement Report */
.pw-displacement-toggle { display: inline-flex; border: 1px solid var(--ink); margin-bottom: 14px; }
.pw-displacement-toggle button { padding: 8px 16px; color: var(--ink); background: var(--white); border: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .74rem; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.pw-displacement-toggle button.active { color: var(--white); background: var(--ink); }
.pw-tiebreak-badge { display: inline-flex; align-items: center; margin-left: 8px; padding: 2px 8px; color: var(--white); background: var(--danger); font-family: Arial, Helvetica, sans-serif; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; border: 0; }
.pw-tiebreak-row td { padding: 0; }
.pw-tiebreak-detail { padding: 12px 16px; background: #fff4f0; font-family: Arial, Helvetica, sans-serif; font-size: .84rem; }

/* Reader Predictions */
.pw-predictions-grid { display: grid; gap: 18px; }
.pw-poll { padding: 20px; background: var(--white); border: 1px solid var(--line); }
.pw-poll h4 { margin: 0 0 14px; }
.pw-poll-options { display: grid; gap: 8px; }
.pw-poll-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; text-align: left; color: var(--ink); background: var(--white); border: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; font-size: .88rem; cursor: pointer; }
.pw-poll-option:hover:not(:disabled) { border-color: var(--pw-accent); }
.pw-poll-option:disabled { cursor: default; }
.pw-poll-option .pw-poll-option-label small { display: block; margin-top: 2px; color: var(--muted); font-size: .74rem; }
.pw-poll-bar-track { position: relative; width: 100%; height: 8px; margin-top: 6px; background: #ececec; }
.pw-poll-bar-fill { position: absolute; inset: 0 auto 0 0; height: 100%; background: var(--pw-accent); }
.pw-poll-option[data-mine="true"] { border-color: var(--pw-accent); border-width: 2px; }
.pw-poll-status { margin-top: 10px; color: var(--muted); font-family: Arial, Helvetica, sans-serif; font-size: .78rem; }
.pw-poll-error { margin-top: 10px; color: var(--danger); font-family: Arial, Helvetica, sans-serif; font-size: .82rem; }

/* Team Compare drawer */
.pw-compare-trigger { position: fixed; right: 0; bottom: 90px; z-index: 95; padding: 12px 16px; color: var(--white); background: var(--ink); border: 0; font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .8rem; letter-spacing: .6px; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow); }
.pw-compare-trigger:hover { background: var(--pw-accent); color: var(--black); }
.pw-compare-drawer { position: fixed; inset: 0 0 0 auto; z-index: 200; width: min(94vw, 460px); background: var(--white); box-shadow: -14px 0 40px rgba(0,0,0,.24); transform: translateX(105%); transition: transform .25s ease; display: flex; flex-direction: column; }
.pw-compare-drawer[data-open="true"] { transform: translateX(0); }
.pw-compare-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.pw-compare-drawer-body { padding: 18px 20px; overflow-y: auto; }
.pw-compare-select-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.pw-compare-select-row select { width: 100%; min-height: 42px; padding: 8px; border: 1px solid var(--line); font-family: Arial, Helvetica, sans-serif; }
.pw-compare-table { width: 100%; border-collapse: collapse; font-family: Arial, Helvetica, sans-serif; font-size: .86rem; }
.pw-compare-table th, .pw-compare-table td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.pw-compare-table th:not(:first-child), .pw-compare-table td:not(:first-child) { text-align: right; }
.pw-compare-backdrop { position: fixed; inset: 0; z-index: 199; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.pw-compare-backdrop[data-open="true"] { opacity: 1; visibility: visible; }

/* Share This Team */
.pw-share-button { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 14px; color: var(--ink); background: var(--white); border: 1px solid var(--ink); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: .76rem; letter-spacing: .5px; text-transform: uppercase; cursor: pointer; }
.pw-share-button:hover { color: var(--white); background: var(--ink); }

@media (max-width: 480px) {
  .pw-compare-drawer { width: 100vw; }
  .pw-compare-select-row { grid-template-columns: 1fr; }
}

/* Homepage: 2026 Preseason Team Power Rankings section -- guarantees all 8
   preseason articles are reachable from the homepage regardless of the
   Latest Stories grid's fixed 6-card total (3 + 3 across its two
   sections), which otherwise always excludes 2 of the 8 once every slot
   is full. --pw-accent set inline per card from the same JSON accent used
   on the article itself (green boys / pink girls), matching main.css's
   .pw-preseason-article convention rather than inventing a second scheme. */
.preseason-home-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 22px; }
.preseason-home-card { grid-column: span 3; display: flex; flex-direction: column; padding: 22px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--pw-accent); transition: transform .16s ease, box-shadow .16s ease; }
.preseason-home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.preseason-home-card p.eyebrow { color: var(--pw-accent); }
.preseason-home-card h3 { margin-bottom: 8px; font-size: 1.08rem; line-height: 1.25; }
.preseason-home-card p:not(.eyebrow) { flex: 1; margin-bottom: 14px; color: var(--muted); font-size: .88rem; }
.preseason-home-card a { width: max-content; color: var(--pw-accent); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: .6px; text-transform: uppercase; }
@media (max-width: 1120px) {
  .preseason-home-card { grid-column: span 4; }
}
@media (max-width: 700px) {
  .preseason-home-grid { grid-template-columns: 1fr; gap: 12px; }
  .preseason-home-card { grid-column: auto; }
}