/* ── Home page · Grandstand (Ink masthead study) ── */

/* Hero band: full bleed; inherits the active site theme ground (seamless, no divider). */
:where(.v-home) .hero-band {
  position:relative; z-index:10;
  background-color:var(--paper);
  /* Chart-only tokens (no site equivalent); light defaults, dark overrides below. */
  --htl-search-bg:#fefdfb;
  --htl-search-bg-focus:#fefdfb;
  --htl-search-border:#e4dfd3;
  --htl-search-border-focus:#d8d2c4;
  --htl-chip-bg:#e7e2d6;
  --htl-chip-text:#1b1812;
  --htl-skeleton-bg:rgba(27,24,18,0.08);
}
[data-theme="dark"] :where(.v-home) .hero-band {
  --htl-search-bg:rgba(255,255,255,0.05);
  --htl-search-bg-focus:rgba(255,255,255,0.09);
  --htl-search-border:rgba(255,255,255,0.16);
  --htl-search-border-focus:rgba(255,255,255,0.34);
  --htl-chip-bg:#d8d2c4;
  --htl-chip-text:#15120d;
  --htl-skeleton-bg:rgba(255,255,255,0.10);
}
:where(.v-home) .hero-inner { position:relative; z-index:1; padding-top:26px; padding-bottom:48px; pointer-events:none; }
:where(.v-home) .hero-inner > * { pointer-events:auto; }
:where(.v-home) .hero-eyebrow { color:var(--red); }
/* Hero intro block (eyebrow + headline + paragraph). Nudge knob: translateY moves just this text down; switch to margin-top instead to push the search box down with it. */
:where(.v-home) .hero-intro { transform:translateY(22px); }
:where(.v-home) .hero-band h1 {
  font-family:var(--font-display); font-weight:800; font-size:66px;
  letter-spacing:-0.015em; line-height:1.02; color:var(--ink);
  margin:18px 0 0;
}
:where(.v-home) .hero-band h1 .hl-3 { color:var(--red); }

/* ── Hero headline entrance (independent of telemetry) ──
   The rise is the first-arrival entrance only. It is armed by the `intro-hero`
   class, which the view adds (in mount) ONLY when the home view renders without a
   transition, i.e. on a fresh load or refresh. On an in-app navigation back to
   home the class is absent, so the headline sits at its final state and simply
   rides the expand-from-origin transition rather than re-running the rise inside
   the frozen snapshot and popping when it is dropped. */
:where(.v-home) .hero-band h1 .hl-line { display:inline-block; }
@media (prefers-reduced-motion: no-preference) {
  :where(.v-home.intro-hero) .hero-band h1 .hl-1 { animation: hlRise 1100ms cubic-bezier(0.22,0.61,0.36,1) 0ms both; }
  :where(.v-home.intro-hero) .hero-band h1 .hl-2 { animation: hlRise 1100ms cubic-bezier(0.22,0.61,0.36,1) 1200ms both; }
  :where(.v-home.intro-hero) .hero-band h1 .hl-3 { animation: hlRise 1600ms cubic-bezier(0.22,0.61,0.36,1) 2600ms both; }
}
@keyframes hlRise {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}
:where(.v-home) .hero-band p { font-size:16px; color:var(--sub); margin:20px 0 0; max-width:480px; line-height:1.55; }
:where(.v-home) .hero-band .search-wrap { margin-top:48px; max-width:620px; }
:where(.v-home) .hero-band .search-box {
  background:var(--htl-search-bg);
  border:1px solid var(--htl-search-border);
  border-radius:8px;
  box-shadow:none;
  color:var(--ink); caret-color:var(--ink);
  transition:border-color .12s, background .12s;
}
:where(.v-home) .hero-band .search-box:focus { box-shadow:none; border-color:var(--htl-search-border-focus); background:var(--htl-search-bg-focus); }
:where(.v-home) .hero-band .search-box::placeholder { color:var(--faint); }
:where(.v-home) .hero-band .search-icon { color:var(--faint); }

/* ── Hero telemetry (decorative; tablet + desktop) ── */
:where(.v-home) .hero-telemetry { display:none; }
@media (min-width:720px) {
  :where(.v-home) .hero-telemetry {
    display:block; position:absolute; z-index:0;
    top:50%; right:max(32px, calc((100vw - 1360px) / 2 + 32px)); transform:translateY(-50%);
    width:min(54vw, 440px); height:340px;
    opacity:0; transition:opacity .6s ease;
    font-family:var(--font-body); touch-action:pan-y;
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 42%, #000 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 42%, #000 100%);
  }
  :where(.v-home) .hero-telemetry.tlm-ready { opacity:1; }
}
@media (min-width:1024px) {
  :where(.v-home) .hero-telemetry {
    width:min(52vw, 600px); height:372px;
    /* Vertical position knob: nudge the offset to align the View race button bottom with the search bar. */
    transform:translateY(-50%);
    -webkit-mask-image:linear-gradient(to right, transparent 0, #000 24%, #000 100%);
            mask-image:linear-gradient(to right, transparent 0, #000 24%, #000 100%);
  }
  :where(.v-home) .hero-band .search-wrap { max-width:580px; }
}
@media (min-width:1200px) {
  :where(.v-home) .hero-telemetry { right:max(56px, calc((100vw - 1360px) / 2 + 56px)); }
}

:where(.v-home) .htl-id { position:absolute; top:0; right:0; text-align:right; }
:where(.v-home) .htl-id-live { display:flex; align-items:center; gap:9px; justify-content:flex-end; }
:where(.v-home) .htl-id-load { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
:where(.v-home) .htl-badge { font-family:var(--font-body); font-weight:800; font-size:10px; letter-spacing:0.06em; color:var(--htl-chip-text); background:var(--htl-chip-bg); border-radius:2px; padding:2px 6px; }
:where(.v-home) .htl-name { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--ink); white-space:nowrap; }
:where(.v-home) .htl-acq { font-family:var(--font-body); font-weight:700; font-size:10.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); }
:where(.v-home) .htl-dots { color:var(--faint); letter-spacing:0.18em; font-size:11px; }
:where(.v-home) .htl-sub { font-size:12px; color:var(--sub); margin-top:5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
:where(.v-home) .htl-sub-load { display:inline-block; height:9px; background:var(--htl-skeleton-bg); border-radius:1px; }

:where(.v-home) .htl-graph { position:absolute; left:0; right:0; }
:where(.v-home) .htl-graph svg { display:block; width:100%; overflow:visible; }
:where(.v-home) .htl-glive,
:where(.v-home) .htl-gload { transition:opacity .32s ease; }
/* Playhead dot reads as punched out of the trace: stroke equals the hero ground. */
:where(.v-home) .hero-band #htlDot { stroke:var(--paper); }
/* Lap-delta default (load dashes); JS sets gain/loss when live. */
:where(.v-home) .hero-band #htlDelta { color:var(--faint); }

:where(.v-home) .htl-tag { position:absolute; right:4px; text-align:right; white-space:nowrap; }
:where(.v-home) .htl-tag.up { top:2px; } :where(.v-home) .htl-tag.down { bottom:2px; }
:where(.v-home) .htl-tag-live { display:inline-flex; align-items:baseline; gap:7px; justify-content:flex-end; transition:opacity .2s ease; }
:where(.v-home) .htl-tag-no { font-family:var(--font-body); font-weight:800; font-size:12px; font-variant-numeric:tabular-nums; }
:where(.v-home) .htl-tag-name { font-family:var(--font-display); font-weight:700; font-size:12.5px; color:var(--ink); letter-spacing:0.01em; }
:where(.v-home) .htl-tag .fl { vertical-align:middle; width:13px; height:10px; }
:where(.v-home) .htl-tag-word { font-weight:700; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; }
:where(.v-home) .htl-tag-load { font-weight:700; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; opacity:0.5; }

:where(.v-home) .htl-readout { position:absolute; right:0; display:flex; align-items:flex-end; }
:where(.v-home) .htl-stat { text-align:right; }
:where(.v-home) .htl-lab { font-family:var(--font-body); font-weight:700; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-bottom:5px; white-space:nowrap; }
:where(.v-home) .htl-row { display:flex; align-items:baseline; gap:6px; justify-content:flex-end; white-space:nowrap; }
:where(.v-home) .htl-val { font-family:var(--font-display); font-weight:800; line-height:1; white-space:nowrap; font-variant-numeric:tabular-nums; }
:where(.v-home) .htl-word { font-size:12px; font-weight:700; display:inline-block; min-width:3.2em; text-align:left; }
:where(.v-home) .htl-lapm { font-family:var(--font-body); font-weight:700; font-size:9px; letter-spacing:0.16em; text-transform:uppercase; color:var(--faint); margin-top:7px; }
:where(.v-home) .htl-lapm b { font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:0; font-variant-numeric:tabular-nums; }

:where(.v-home) .htl-btn { position:absolute; bottom:0; right:0; display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  background:var(--red); color:#fff; font-weight:700; font-size:13.5px; letter-spacing:0.01em;
  padding:11px 20px; border-radius:4px; box-shadow:0 1px 0 rgba(0,0,0,0.25); transition:background .15s ease; }
:where(.v-home) .htl-btn:hover { background:var(--red-dark); }
:where(.v-home) .htl-btn .arr { font-size:1.05em; }

:where(.v-home) .hero-telemetry.htl-loading .htl-btn { background:transparent; color:var(--faint); border:1px solid var(--line); box-shadow:none; pointer-events:none; }
:where(.v-home) .hero-telemetry.htl-loading .htl-id-live,
:where(.v-home) .hero-telemetry.htl-loading .htl-sub-live,
:where(.v-home) .hero-telemetry.htl-loading .htl-tag-live { display:none; }
:where(.v-home) .hero-telemetry:not(.htl-loading) .htl-id-load,
:where(.v-home) .hero-telemetry:not(.htl-loading) .htl-sub-load,
:where(.v-home) .hero-telemetry:not(.htl-loading) .htl-tag-load { display:none; }
:where(.v-home) .hero-telemetry.htl-loading .htl-glive { opacity:0; }
:where(.v-home) .hero-telemetry:not(.htl-loading) .htl-gload { opacity:0; }

@keyframes htlReveal { from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
:where(.v-home) .hero-telemetry.htl-reveal .htl-id-live,
:where(.v-home) .hero-telemetry.htl-reveal .htl-tag-live,
:where(.v-home) .hero-telemetry.htl-reveal .htl-readout,
:where(.v-home) .hero-telemetry.htl-reveal .htl-btn { animation:htlReveal .42s ease both; }

/* tablet: drop the "quicker" word; keep the flag */
@media (max-width:1023.9px) { :where(.v-home) .htl-tag-word { display:none; } }

@media (prefers-reduced-motion: reduce) {
  :where(.v-home) .htl-glive,
:where(.v-home) .htl-gload,
:where(.v-home) .htl-tag-live,
:where(.v-home) .htl-btn { transition:none; }
  :where(.v-home) .hero-telemetry.htl-reveal .htl-id-live,
:where(.v-home) .hero-telemetry.htl-reveal .htl-tag-live,
:where(.v-home) .hero-telemetry.htl-reveal .htl-readout,
:where(.v-home) .hero-telemetry.htl-reveal .htl-btn { animation:none; }
}
@media (min-width:720px) and (max-width:1023.9px) {
  :where(.v-home) .hero-band h1 { font-size:48px; max-width:360px; }
  :where(.v-home) .hero-band p { max-width:360px; }
  :where(.v-home) .hero-band .search-wrap { max-width:360px; }
}
@media (max-width:719.9px) {
  :where(.v-home) .hero-intro { transform:none; }
  :where(.v-home) .hero-inner { padding-top:32px; padding-bottom:32px; }
  :where(.v-home) .hero-band h1 { font-size:32px; }
  :where(.v-home) .hero-band p { font-size:13.5px; margin-top:12px; }
  :where(.v-home) .hero-band .search-wrap { margin-top:22px; }
  :where(.v-home) .search-box { padding:12px 14px 12px 40px; font-size:14px; }
}

/* ── Hero/content separator ── */
/* Border on the .gs-wide box so it spans the full padded width, exactly like the header rule. */
:where(.v-home) .hero-sep { border-bottom:1px solid var(--line); }

/* ── Sections ── */
:where(.v-home) .page-section { padding-top:46px; }
:where(.v-home) .page-section:last-of-type { padding-bottom:56px; }
:where(.v-home) .section-label {
  display:flex; align-items:center; gap:16px;
  font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:4px; border:none; padding:0;
}
:where(.v-home) .section-label::after { content:''; flex:1; height:1px; background:var(--line); }
@media (max-width:719.9px) { :where(.v-home) .page-section { padding-top:30px; } :where(.v-home) .section-label { font-size:10px; } }

/* ── Majors 24 lead row (special coverage) ──
   Same grid as the sibling series rows, but the whole row is a link to the
   Majors 24 page rather than an accordion header, so the chevron becomes a
   rosso arrow and the name carries the outlined coverage tag. */
:where(.v-home) .series-link { text-decoration:none; color:inherit; }
:where(.v-home) .coverage-tag {
  display:inline-block; vertical-align:middle; margin-left:14px;
  font-family:var(--font-body); font-size:10px; font-weight:700;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--red); border:1px solid var(--red); border-radius:2px; padding:3px 8px;
}
/* The arrow occupies the same 16x16 centred box as the sibling chevron, so the
   meta column and the affordance line up across rows. */
:where(.v-home) .series-go {
  width:16px; height:16px; display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:700; line-height:1; color:var(--red);
  flex-shrink:0; align-self:center;
}

/* ── Series rows (accordion preserved) ── */
:where(.v-home) .series { border:none; border-radius:0; box-shadow:none; background:none; margin:0; overflow:visible; border-top:1px solid var(--line); }
:where(.v-home) .section-label + .series { border-top:none; }
:where(.v-home) .series:last-child { border-bottom:1px solid var(--line); }
:where(.v-home) .series-header { display:flex; align-items:baseline; gap:12px; padding:16px 16px 16px 0; cursor:pointer; user-select:none; background:none; transition:none; }
:where(.v-home) .series-header:hover { background:none; }
:where(.v-home) .series-header:hover .series-name { color:var(--red); }
:where(.v-home) .series-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; align-self:center; background:var(--gtp); }
:where(.v-home) .series-name { font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-0.01em; color:var(--ink); flex:1; transition:color .12s; }
:where(.v-home) .series-count { font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; }
:where(.v-home) .series-chevron { width:16px; height:16px; color:var(--faint); transition:transform .22s; flex-shrink:0; align-self:center; }
:where(.v-home) .series.open > .series-header .series-chevron { transform:rotate(180deg); }
/* Series rows expand and collapse by animating the body height (set in the page
   script: 0, a pixel target, then auto at rest so season switching can reflow).
   The body clips its content while it moves and goes overflow visible at rest;
   visibility drops a beat later, so the body stays visible through the close and
   only then leaves the focus and reading order. The transition is suppressed
   until first paint (html.series-anim), so a series restored open does not
   animate in. */
:where(.v-home) .series-body { overflow:hidden; border-top:none; height:0; visibility:hidden;
  transition:height .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear .34s; }
:where(.v-home) .series.open > .series-body { visibility:visible;
  transition:height .34s cubic-bezier(.22,.61,.36,1), visibility 0s linear 0s; }

@media (prefers-reduced-motion: reduce) { :where(.v-home) .series-body { transition:none; } }

/* ── Season selector (pills) ── */
:where(.v-home) .season { border:none; }
:where(.v-home) .season-body { display:none; }
:where(.v-home) .season.active > .season-body { display:block; }
:where(.v-home) .season-pills { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; padding:0 16px 14px 21px; }
:where(.v-home) .season-pill {
  display:inline-flex; align-items:center;
  font-family:var(--font-body); font-size:12px; font-weight:700;
  letter-spacing:0.04em; font-variant-numeric:tabular-nums;
  color:var(--sub); background:var(--paper);
  border:1px solid var(--line); border-radius:5px;
  padding:6px 12px; cursor:pointer;
  transition:color .12s, background .12s, border-color .12s;
}
:where(.v-home) .season-pill:hover { color:var(--ink); border-color:var(--faint); }
:where(.v-home) .season-pill.active { color:var(--paper); background:var(--ink); border-color:var(--ink); cursor:default; }

/* ── Race index rows ── */
:where(.v-home) .race-card {
  display:grid; grid-template-columns:44px 270px 1fr 360px 24px;
  align-items:center; gap:18px; padding:14px 16px 14px 21px;
  border-top:1px solid var(--line-soft); border-bottom:none;
  text-decoration:none; color:inherit; transition:background .1s;
}
:where(.v-home) .race-card:hover { background:var(--surface); }
:where(.v-home) .race-card:hover .race-name { color:var(--red); }
:where(.v-home) .race-r { font-size:12.5px; font-weight:800; color:var(--faint); font-variant-numeric:tabular-nums; }
:where(.v-home) .race-id { min-width:0; }
:where(.v-home) .race-name { font-size:15.5px; font-weight:700; color:var(--ink); transition:color .12s; display:flex; align-items:center; gap:8px; margin:0; white-space:nowrap; overflow:hidden; }
:where(.v-home) .race-date { font-size:12.5px; color:var(--faint); margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-home) .race-mob-meta { display:none; }
:where(.v-home) .wet-badge { font-size:10px; font-weight:800; letter-spacing:0.08em; color:var(--lmp2); background:none; padding:0; border-radius:0; }
:where(.v-home) .race-trk { font-size:13px; color:var(--sub); min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-home) .race-meta2 { color:var(--faint); font-size:12.5px; margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-home) .race-winners { display:flex; flex-direction:column; gap:3px; align-items:stretch; min-width:0; }
:where(.v-home) .winner-row { display:grid; grid-template-columns:46px 30px 1fr; align-items:baseline; gap:8px; font-size:12.5px; }
:where(.v-home) .winner-car { font-size:11.5px; font-weight:700; color:var(--faint); font-variant-numeric:tabular-nums; }
:where(.v-home) .winner-team { font-size:12.5px; font-weight:600; color:var(--sub); max-width:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
:where(.v-home) .race-arrow { font-size:13px; color:var(--faint); transition:transform .12s, color .12s; text-align:right; transform:translateX(-4px); }
:where(.v-home) .race-card:hover .race-arrow { transform:translateX(0); color:var(--red); }

:where(.v-home) .race-card.no-r { grid-template-columns:332px 1fr 360px 24px; }
/* Tablet range: the first column (name + date) is short, so cap it tight and let
   the venue (middle) and winners columns share the remaining width as flexible
   tracks. They then shrink together as the viewport narrows, instead of the two
   fixed side columns holding their width and starving the middle to "Watki…".
   The first column stays a fixed px so rows still align vertically. */
@media (max-width:1023.9px) {
  :where(.v-home) .race-card { grid-template-columns:36px 168px minmax(0,1fr) minmax(0,1.4fr) 20px; gap:14px; }
  :where(.v-home) .race-card.no-r { grid-template-columns:168px minmax(0,1fr) minmax(0,1.4fr) 20px; }
}
@media (max-width:719.9px) {
  :where(.v-home) .series-header { padding:13px 12px 13px 0; }
  :where(.v-home) .series-name { font-size:15.5px; }
  :where(.v-home) .series-count { font-size:11px; }
  :where(.v-home) .coverage-tag { display:block; width:fit-content; margin:5px 0 0; font-size:9px; padding:2px 6px; }
  :where(.v-home) .season-pills { padding:0 12px 12px 14px; }
  :where(.v-home) .season-pill { padding:6px 13px; }
  :where(.v-home) .race-card { grid-template-columns:30px 1fr 16px; gap:10px; padding:11px 12px 11px 14px; }
  :where(.v-home) .race-card.no-r { grid-template-columns:1fr 16px; }
  :where(.v-home) .race-trk,
:where(.v-home) .race-winners { display:none; }
  :where(.v-home) .race-name { font-size:13.5px; white-space:normal; }
  :where(.v-home) .race-date { font-size:10.5px; }
  :where(.v-home) .race-mob-meta { display:inline; }
}