/* ==========================================================================
   WSTR redesign stylesheet, copied from the design concept
   (EquineNetwork/wstr-design-concept, src/app/globals.css). Loaded after
   Bootstrap and wstr.css. Change it there first, then copy it here.
   ========================================================================== */

/* Display faces (the concept loads these through next/font). */
@font-face { font-family: "Druk Wide"; src: url(/fonts/DrukWide-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Druk Wide"; src: url(/fonts/DrukWide-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url(/fonts/BebasNeue-Bold.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Agency FB"; src: url(/fonts/AgencyFB-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  --font-druk: "Druk Wide", "Arial Black", Arial, sans-serif;
  --font-bebas: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-agency: "Agency FB", "Arial Narrow", sans-serif;
  --font-barlow: "Arial Narrow", sans-serif;
  --font-roboto-c: "Arial Narrow", sans-serif;
}

/* ==========================================================================
   WSTR design concept stylesheet
   Portable by design: no build-time framework. Copy this file into the
   live site's wwwroot/css and the component markup into Razor partials.
   Naming: block__element--modifier, prefixed with nothing. Tokens on :root.
   ========================================================================== */

/* ---- Fonts ----------------------------------------------------------- */
/* Gotham (text), self-hosted from public/fonts; the layout preloads Book and
   Bold. The display fonts (Druk Wide titles, Bebas Neue labels, Agency FB
   navigation) are loaded by next/font in layout.tsx. Tungsten is only the
   ?font=tungsten preview and loads only then. While a face loads, the text
   shows in Arial scaled to the face's width and line height. */
@font-face { font-family: "Gotham"; src: url(/fonts/Gotham-Book.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url(/fonts/Gotham-BookItalic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Gotham"; src: url(/fonts/Gotham-Medium.woff2) format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url(/fonts/Gotham-Bold.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Tungsten Fallback"; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"); ascent-override: 161.05%; descent-override: 40.26%; line-gap-override: 0%; size-adjust: 59.61%; }
@font-face { font-family: "Gotham Fallback"; src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans"); ascent-override: 84.58%; descent-override: 21.14%; line-gap-override: 0%; size-adjust: 113.51%; }

/* ---- Tokens ---------------------------------------------------------- */
:root {
  --ink: #0f1012;
  --ink-2: #33363b;
  --muted: #65696f;
  --paper: #ffffff;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --line: #dfe2e6;
  --line-2: #edeff2;
  --red: #c1272d;
  --red-fill: #c1272d;
  --red-deep: #9a1b22;
  --panel: var(--black);
  --accent: #8a6d1f;
  --accent-deep: #6d5416;
  --silver-line: #c8ccd2;
  --silver-deep: #6e737a;
  --gold: #8a6d1f;
  --gold-deep: #6d5416;
  --gold-fill: #deba64;
  --gold-soft: #f7efdc;
  --on-gold: #0d0b0a;
  /* One black for every dark band and one gold for every gold detail on
     either ground (gold-deep is the same gold darkened for text on white),
     with a lighter step for hover; one quiet grey for panels. */
  --black: #0b0a09;
  --gold-hover: #efd089;
  --surface-alt: #f4f5f7;
  --pressed: #e9ebee;
  /* Cards: one corner and one resting shadow (--lift). */
  --card-radius: 6px;
  --steel: #a9adb3;
  --steel-soft: #e9ebee;
  --ok: #1f7a4d;
  --ok-soft: #e4f3ea;
  --warn: #7a5a00;
  --warn-soft: #f6f0dc;

  --font-display: var(--font-bebas), var(--font-barlow), "Arial Narrow", sans-serif;
  --font-sans: "Gotham", "Gotham Fallback", "Helvetica Neue", Arial, sans-serif;

  --lift: 0 1px 1px rgba(15, 16, 18, 0.04), 0 3px 10px -5px rgba(15, 16, 18, 0.13);
  --radius: 3px;
  --radius-lg: 6px;
  --shadow: 0 1px 2px rgba(15, 16, 18, 0.05), 0 10px 28px -14px rgba(15, 16, 18, 0.18);
  --container: 75rem; /* 1200px at the default text size; grows with it, as the header does */
  --gutter: 16px;
  --header-h: 64px;
  /* Form field outline (3.3:1 on white, so an empty field reads as a box),
     long-form line length (about 70 characters) and the focus ring, which
     turns gold on the black header, drawer, footer and Finale heads. */
  --field-line: #8a8f96;
  --measure: 36em;
  --focus: var(--accent);
  /* Light only: no browser auto-darkening (Android, Samsung Internet). */
  color-scheme: only light;
}

/* ---- Reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: 1.0625rem; -webkit-font-smoothing: antialiased; min-height: 100vh; }
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Type ------------------------------------------------------------ */
.display { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; line-height: 0.9; letter-spacing: 0.01em; text-wrap: balance; }
.display--xl { font-size: clamp(3.2rem, 8vw, 5.6rem); }
.display--lg { font-size: clamp(2.6rem, 5.5vw, 4rem); }
.eyebrow { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; color: var(--accent-deep); }
.section-title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.85rem; line-height: 1; letter-spacing: 0.03em; }
/* Go-to links carry a › (the fonts have it); ↗ marks only external links. */
.section__more::after { content: "\00a0\203A"; }
.lede { font-size: 1.125rem; color: var(--ink-2); max-width: var(--measure); }
.section__lede { margin: -0.5rem 0 1rem; }
.muted { color: var(--muted); }
.tabular { font-variant-numeric: tabular-nums; }
.small { font-size: 0.9375rem; }

/* ---- Layout ---------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: 860px; }
.main { flex: 1 0 auto; min-width: 0; max-width: 100%; }
body { overflow-x: clip; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.section__more { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; color: var(--accent-deep); text-decoration: none; }
@media (hover: hover) { .section__more:hover { text-decoration: underline; } }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.two-col > * { min-width: 0; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.flow > * { min-width: 0; }
/* The sidebar sits beside the page only when the main column keeps at least
   640px (from 1024px at the default text size); narrower, it stacks under it. */
@media (min-width: 64em) { .two-col { grid-template-columns: minmax(0, 1fr) 18.75rem; } }
.stack > * + * { margin-top: 1rem; }

/* ---- Page header ------------------------------------------------------ */
.page-head { border-bottom: 1px solid var(--line); background: var(--surface-2); }
.page-head__title { margin-top: 0.25rem; font-weight: 700; }
.page-head__lede { margin-top: 0.75rem; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: 0.9375rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
@media (hover: hover) { .crumbs a:hover { color: var(--accent-deep); text-decoration: underline; } }
.crumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--muted); }
.crumbs li { list-style: none; }

/* ---- Buttons ---------------------------------------------------------- */
/* One family: primary (black, or gold as .btn--red), secondary (.btn--ghost
   outline) and the light variants for dark bands, in two sizes: standard
   (48px) and .btn--sm (44px). Components only place buttons; they do not
   resize them. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; text-align: center; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.125rem; padding: 0.6rem 1.2rem; border-radius: var(--radius); border: 2px solid var(--ink); background: var(--ink); color: #fff; text-decoration: none; cursor: pointer; line-height: 1.05; }
.btn--red { background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); font-weight: 600; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--light { background: #fff; border-color: #fff; color: var(--ink); }
.btn--outline-light { background: transparent; border-color: #fff; color: #fff; }
.btn--sm { min-height: 2.75rem; font-size: 1rem; padding: 0.4rem 0.9rem; }
@media (hover: hover) {
  .btn:hover { background: var(--ink-2); border-color: var(--ink-2); }
  .btn--red:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
  .btn--ghost:hover { background: var(--ink); color: #fff; }
  .btn--light:hover { background: var(--steel-soft); border-color: var(--steel-soft); }
  .btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--ink); }
}
.btn--ghost:active { background: var(--pressed); color: var(--ink); }
.btn[disabled] { opacity: 0.6; cursor: default; }

/* ---- Chips / pills ---------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.875rem; padding: 0.15em 0.55em; border-radius: 3px; background: var(--steel-soft); color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.chip--red { background: var(--gold-soft); color: var(--gold-deep); }
.chip--ok { background: var(--ok-soft); color: var(--ok); }
.chip--warn { background: var(--warn-soft); color: var(--warn); }
.chip--ink { background: var(--gold-fill); color: var(--on-gold); }

/* ---- Cards ------------------------------------------------------------ */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.card__body { padding: 1rem 1.1rem; }
.card__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.card__title a { text-decoration: none; }
@media (hover: hover) { .card__title a:hover { color: var(--accent-deep); } }

/* ---- Site header ------------------------------------------------------ */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--panel); color: #fff; }
.site-header__bar { display: flex; align-items: center; gap: 1rem; height: var(--header-h); }
/* The logo hangs from the top of the header and just over its gold border,
   clear of the event bar's badge and the first Finale tab below it. */
.site-header__logo { position: relative; z-index: 2; flex: none; align-self: flex-start; display: inline-flex; align-items: flex-start; padding-top: 5px; margin-bottom: -20px; margin-right: auto; }
.site-header__logo img { height: 64px; width: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.45)); }
.site-nav { display: none; }
.site-header__account { display: none; }
.site-header__toggle { display: inline-flex; align-items: center; gap: 0.5rem; background: transparent; border: 1px solid rgba(255,255,255,0.35); color: #fff; border-radius: var(--radius); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; cursor: pointer; }
/* The full nav shows from 64em: 1024px at the default text size, wider for
   visitors who set a larger browser text size, who get the Menu button
   instead of a header that wraps. Up to 77.5em (1240px) the labels sit a little tighter
   so they fit. Menus open by state only (src/components/site-header.tsx):
   hover with a short delay, click or tap, Enter or Space. */
@media (min-width: 64em) and (hover: hover) {
  .site-nav__link:hover { color: #fff; border-bottom-color: var(--steel); }
  .site-nav__menu a:hover { background: var(--surface-alt); color: var(--accent-deep); }
}
@media (min-width: 64em) {
  .site-header__toggle { display: none; }
  .site-header__bar { gap: 0.75rem; }
  .site-nav { display: flex; align-items: stretch; height: var(--header-h); }
  .site-nav__item { position: relative; display: flex; }
  .site-nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0 0.4rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; color: #fff; text-decoration: none; border-bottom: 3px solid transparent; border-top: 3px solid transparent; }
  .site-nav__item.is-open > .site-nav__link { border-bottom-color: var(--steel); }
  .site-nav__link[aria-current="true"], .site-nav__item--active > .site-nav__link { border-bottom-color: var(--accent); }
  .site-nav__link:active { color: var(--gold-fill); }
  /* Inside the box: the buttons fill the header's height, so an outer ring
     would be cut off at the top. */
  .site-nav__link:focus-visible { outline: 3px solid var(--gold-fill); outline-offset: -3px; }
  .site-nav__caret { width: 10px; height: 10px; opacity: 0.7; }
  button.site-nav__link { background: none; border-left: 0; border-right: 0; cursor: pointer; }
  .site-nav__menu { position: absolute; top: 100%; left: 0; min-width: 100%; width: max-content; border-radius: 0 0 var(--radius) var(--radius); list-style: none; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.12s, transform 0.12s, visibility 0.12s; }
  /* The News menu opens leftwards so it never runs off a narrow window. */
  .site-nav__item:nth-last-child(-n+3) > .site-nav__menu { left: auto; right: 0; }
  /* Shown at once (so the first item can take focus), faded out on close. */
  .site-nav__item.is-open > .site-nav__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.12s, transform 0.12s, visibility 0s; }
  .site-nav__menu a { display: block; text-decoration: none; white-space: nowrap; }
  .site-nav__menu a[aria-current="page"] { font-weight: 700; }
  .site-header__account { display: flex; flex: none; align-items: center; gap: 0.5rem; margin-left: 0.25rem; }
  .site-header__account .btn { white-space: nowrap; }
}
/* Up to 77em the signed-in header shows My Account only (Log Out is on the
   member pages and in the drawer); with both buttons the bar overflowed. */
@media (min-width: 64em) and (max-width: 77.49em) {
  .site-nav__link, html:not([data-font]) .site-nav__link { padding: 0 0.3rem; letter-spacing: 0.01em; font-size: 1.02rem; }
  .site-header__account-out { display: none; }
}
@media (min-width: 77.5em) {
  .site-header__bar { gap: 1rem; }
  .site-nav__link { padding: 0 0.6rem; letter-spacing: 0.08em; font-size: 1.1rem; }
  .site-header__account { margin-left: 0.5rem; }
}

/* Mobile drawer */
.drawer { position: fixed; inset: var(--header-h) 0 0 0; z-index: 49; color: #fff; overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer__list { list-style: none; }
.drawer__link, .drawer__summary { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); text-transform: uppercase; line-height: 1.1; color: #fff; text-decoration: none; cursor: pointer; list-style: none; }
.drawer__summary::-webkit-details-marker { display: none; }
.drawer__sub { list-style: none; }
.drawer__sub a { text-decoration: none; }
.drawer__sub a[aria-current="page"] { font-weight: 600; }
.drawer__account { display: flex; gap: 0.75rem; }
@media (min-width: 64em) { .drawer, .drawer-backdrop { display: none !important; } }

/* ---- Footer ----------------------------------------------------------- */
.site-footer { background: var(--panel); color: #c9ccd1; }
.site-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 1023px) { .site-footer__grid { grid-template-columns: repeat(3, 1fr); } .site-footer__brand { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 1.4fr repeat(4, 1fr); } }
.site-footer__brand img { width: auto; }
.site-footer__brand p { margin-top: 0.75rem; font-size: 1rem; max-width: 30ch; }
.site-footer h2 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; }
.site-footer ul { list-style: none; }
.site-footer a { color: #c9ccd1; text-decoration: none; }
@media (hover: hover) { .site-footer a:hover { color: #fff; text-decoration: underline; } }
.site-footer__social { display: flex; gap: 0.75rem; }
.site-footer__social img { width: 32px; height: 32px; }
.site-footer__legal { border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; justify-content: space-between; }
.site-footer__legal a { display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Sponsor strip ---------------------------------------------------- */
.sponsors { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; }
.sponsors__inner { display: flex; align-items: center; gap: 1rem; padding-block: 0.9rem; }
.sponsors__label { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
@media (hover: hover) { .sponsors__label:hover { text-decoration: underline; text-decoration-color: var(--gold-fill); text-underline-offset: 4px; } }
/* The row also stops while it has keyboard focus, and under a resting mouse. */
.sponsors__track { flex: 1 1 auto; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
.sponsors__row { display: flex; gap: 2.5rem; width: max-content; animation: sponsors-scroll 140s linear infinite; }
.sponsors__track:focus-within .sponsors__row { animation-play-state: paused; }
.sponsors__track:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .sponsors__track:hover .sponsors__row { animation-play-state: paused; } }
.sponsors__row img { height: 56px; width: auto; max-width: 180px; object-fit: contain; }
@keyframes sponsors-scroll { to { transform: translateX(-50%); } }
/* Reduced motion: the row stands still and shows each logo once. Phones
   scroll it sideways by hand, one row high (a grid of every logo ran 880px
   there); wider screens wrap every logo into centred rows. */
@media (prefers-reduced-motion: reduce) {
  .sponsors__row { animation: none; }
  .sponsors__row [aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 759px) {
  .sponsors__track { overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 0.35rem; -webkit-mask-image: linear-gradient(to right, #000 90%, transparent); mask-image: linear-gradient(to right, #000 90%, transparent); }
  .sponsors__row { padding-right: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) and (min-width: 760px) {
  .sponsors__inner { flex-direction: column; align-items: stretch; }
  .sponsors__track { -webkit-mask-image: none; mask-image: none; }
  .sponsors__row { width: auto; flex-wrap: wrap; justify-content: center; gap: 1.25rem 2.5rem; }
}

/* ---- Aside ------------------------------------------------------------ */
.aside { display: grid; gap: 1.25rem; align-content: start; align-self: start; }
.aside__block { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.aside__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.06em; margin-bottom: 0.75rem; }
/* One ad per page (src/components/aside-ad.tsx), never drawn bigger than its
   480px file; its width and height attributes hold its place while it loads. */
/* Hall of Champions: a small labelled link card, not a second ad. */

/* ---- Event row -------------------------------------------------------- */
.event-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; align-content: start; }
.event-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 0.9rem; align-items: start; padding: 0.75rem 0.9rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; }
.event-row__date { text-align: center; border-top: 3px solid var(--accent); padding-top: 0.3rem; }
.event-row__day { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; line-height: 1.1; letter-spacing: 0.1em; color: var(--ink-2); }
.event-row__num { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1; }
.event-row__mon { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 0.875rem; line-height: 1.1; letter-spacing: 0.1em; }
.event-row__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.event-row__meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; font-size: 1rem; line-height: 1.35; color: var(--ink-2); margin-top: 0.3rem; }
.event-row__dates { font-weight: 600; color: var(--ink); }
.event-row__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.45rem; }
.event-row--compact { padding: 0.55rem 0.7rem; grid-template-columns: 48px minmax(0, 1fr); }
.event-row--compact .event-row__name { font-size: 1.0625rem; line-height: 1.05; letter-spacing: 0.02em; }
.event-row--compact .event-row__num { font-size: 1.3rem; }
/* Very large text on a phone: the date block goes above the name, and the
   Hall of Champions card drops its picture. */
@media (max-width: 15em) {
  .event-row--compact { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Promo band ------------------------------------------------------- */

/* ---- Article card ----------------------------------------------------- */
.article-card__meta { display: flex; gap: 0.5rem; align-items: center; font-size: 0.9375rem; color: var(--ink-2); margin-bottom: 0.4rem; }
.article-card__teaser { font-size: 1.0625rem; color: var(--ink-2); margin-top: 0.4rem; }

/* ---- Video strip ------------------------------------------------------ */
/* Horizontal scroller: only the x axis scrolls, and each card is as tall as
   its own content so the title and date below the thumbnail are never clipped. */
.video-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 1rem; overflow-x: auto; overflow-y: hidden; max-width: 100%; scroll-snap-type: x mandatory; padding-bottom: 0.75rem; align-items: start; -webkit-overflow-scrolling: touch; }
.video-thumb { scroll-snap-align: start; background: transparent; border: 0; padding: 0; text-align: left; cursor: pointer; display: grid; gap: 0.1rem; align-content: start; }
.video-thumb__media { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.video-thumb__media img { width: 100%; height: 100%; object-fit: cover; }
.video-thumb__play { position: absolute; inset: 0; display: grid; place-items: center; }
.video-thumb__play span { width: 48px; height: 48px; border-radius: 50%; background: rgba(15,16,18,0.75); display: grid; place-items: center; color: #fff; font-size: 1.25rem; }
.video-thumb__title { margin-top: 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.video-thumb__date { font-size: 0.9375rem; color: var(--ink-2); }

/* Modal */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(15,16,18,0.85); display: grid; place-items: center; align-content: center; padding: var(--gutter); }
/* Title and Close sit in a bar on top of the player; the player is sized by
   the screen's height too, so a landscape phone shows its control bar. */
.modal__box { --modal-w: min(960px, calc(100vw - 2 * var(--gutter)), calc((100dvh - 2 * var(--gutter) - 3.75rem) * 16 / 9)); width: var(--modal-w); display: grid; gap: 0.5rem; }
.modal__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 3.25rem; }
.modal__title { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__frame { width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; }
.modal__frame iframe { width: 100%; height: 100%; border: 0; }
.modal__close { flex: none; min-height: 2.75rem; }

/* ---- Tables ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.table { font-size: 1rem; min-width: 560px; }
.table th { text-align: left; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.9rem; color: var(--muted); padding: 0.6rem 0.8rem; border-bottom: 2px solid var(--line); background: var(--surface-2); position: sticky; top: 0; }
.table td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Forms ------------------------------------------------------------ */
.field { display: grid; gap: 0.3rem; align-content: start; }
.field label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; line-height: 1.1; color: var(--ink-2); }
/* 16px or more, so iPhone Safari does not zoom the page when a field is tapped. */
.input, .select, .textarea { width: 100%; font: inherit; font-size: max(16px, 1.0625rem); padding: 0.6rem 0.75rem; border: 1px solid var(--field-line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; }

/* ---- Notices ---------------------------------------------------------- */
.notice { border: 1px solid var(--line); border-left: 4px solid var(--accent); background: var(--surface); padding: 0.9rem 1.1rem; border-radius: var(--radius); }
.notice--ok { border-left-color: var(--ok); }
.notice--warn { border-left-color: var(--warn); }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; border: 1px dashed var(--steel); border-radius: var(--radius); background: var(--surface-2); }

/* ---- Concept marker (remove on production) --------------------------- */

/* ---- Error page ------------------------------------------------------- */
.error-page { position: relative; min-height: 60vh; display: grid; place-items: center; color: #fff; text-align: center; padding: 4rem var(--gutter); background: var(--panel); overflow: hidden; }
.error-page img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.error-page__body { position: relative; max-width: 56ch; display: grid; gap: 1rem; justify-items: center; }
.error-page__links { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* ---- Prose ------------------------------------------------------------ */
.prose > * + * { margin-top: 0.9em; }
.prose h2 { margin-top: 2em; }
.prose h3 { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.04em; margin-top: 1.6em; }
.prose a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.3em; }
.prose strong { font-weight: 600; }
.prose { overflow-wrap: anywhere; }
.prose :is(p, li, dd) { max-width: var(--measure); }

/* ==========================================================================
   Phase 2: Calendar, Results, News
   ========================================================================== */

/* Filter bar */
.filter-bar { display: grid; gap: 0.75rem; grid-template-columns: 1fr; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 720px) { .filter-bar { grid-template-columns: 1fr 1fr 1.4fr auto; } }
.filter-bar__actions { display: flex; gap: 0.5rem; align-items: end; }

/* Month groups */
/* The calendar's month headings stay pinned under the header while their
   month scrolls past; rows leave room for them when scrolled to (?evt=). */
.month__head { position: sticky; top: var(--header-h); z-index: 5; background: var(--paper); padding: 0.5rem 0 0.35rem; margin: 0.75rem 0 0; border-bottom: 2px solid var(--ink); display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.5rem; line-height: 1.1; }
.calendar-schedule > .cal-month:first-child > .month__head { margin-top: 0; }

/* Event detail */
/* Buttons share a row when there is room and wrap inside the card. */

/* Results */
.result-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem 1.5rem; padding: 1rem 1.1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: inherit; }
@media (min-width: 640px) { .result-card { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.result-card__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.05; }
.result-card__meta { font-size: 1rem; color: var(--ink-2); margin-top: 0.15rem; }
.roping-list { list-style: none; display: grid; gap: 0.5rem; align-content: start; }
.roping-list b { font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; color: var(--accent-deep); }
.placings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.placings__group h3 { margin-bottom: 0.5rem; }
.placings td.place { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
.placings .team b { display: block; font-weight: 600; }
.placings .team span { display: block; font-size: 0.9375rem; color: var(--ink-2); }

/* News */
.article { max-width: 760px; }
.article__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; color: var(--ink-2); margin: 0.75rem 0 1.25rem; }
.article__lead { margin: 0 0 1.5rem; }
.article__lead > img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
/* A flyer or banner is a compact picture that opens in the flyer lightbox. */
/* Empty Saddles portraits are small files: shown at their own size, framed. */
.article__lead--portrait img { display: block; width: auto; max-width: 100%; height: auto; padding: 0.375rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift); }
.article__body { font-size: 1.125rem; }

/* ==========================================================================
   Phase 3: Finale section, long-form content, membership, about
   ========================================================================== */

/* Finale sub-nav (src/components/finale-subnav.tsx). All nine tabs fit on
   one row on a laptop. Where they do not, the row scrolls sideways with a
   fade on each edge that has more tabs (the script sets has-left and
   has-right) and, for a mouse, an arrow button over that fade. */
.subnav { --subnav-cue: 3rem; position: sticky; top: var(--header-h); z-index: 20; background: var(--surface); border-bottom: 1px solid var(--line); }
.subnav__frame { position: relative; max-width: var(--container); margin-inline: auto; }
.subnav__inner { display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.subnav__inner::-webkit-scrollbar { display: none; }
.has-right > .subnav__inner { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--subnav-cue)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--subnav-cue)), transparent); }
.has-left > .subnav__inner { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - var(--subnav-cue)), transparent); mask-image: linear-gradient(to left, #000 calc(100% - var(--subnav-cue)), transparent); }
.has-left.has-right > .subnav__inner { -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--subnav-cue), #000 calc(100% - var(--subnav-cue)), transparent); mask-image: linear-gradient(to right, transparent, #000 var(--subnav-cue), #000 calc(100% - var(--subnav-cue)), transparent); }
.subnav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 3.45rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.1rem; line-height: 1.1; padding: 0 0.7rem; text-decoration: none; border-bottom: 3px solid transparent; white-space: nowrap; }
@media (hover: hover) { .subnav a:hover { color: var(--accent-deep); } }
.subnav a:active { color: var(--accent-deep); background: var(--surface-2); }
.subnav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent-deep); }
/* Inside the tab: the scrolling row would clip an outer ring. */
.subnav a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (min-width: 64em) { .subnav a { letter-spacing: 0.08em; padding-inline: 0.6rem; } }
.subnav__arrow { display: none; }
@media (hover: hover) and (pointer: fine) {
  .subnav__arrow { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2.75rem; align-items: center; justify-content: center; padding: 0; border: 0; background: var(--surface); color: var(--ink); cursor: pointer; }
  .subnav__arrow svg { width: 0.65rem; height: 1rem; }
  .subnav__arrow--prev { left: 0; }
  .subnav__arrow--next { right: 0; }
  .has-left > .subnav__arrow--prev, .has-right > .subnav__arrow--next { display: flex; }
  .subnav__arrow:hover { color: var(--accent-deep); }
  .subnav__arrow:active { background: var(--surface-2); }
}

/* Long-form content layout */
.jump { margin-bottom: 1.5rem; }
@media (min-width: 960px) { .jump:not(.jump--always) { display: none; } }
.prose section + section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.prose section > h2:first-child { margin-top: 0; }
.prose section > * + * { margin-top: 0.9em; }
.prose .table { min-width: 0; }
.prose table:not(.table) { border-collapse: collapse; }
.prose table td, .prose table th { padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--line-2); text-align: left; vertical-align: top; }
.prose table td { font-size: 1rem; }
.prose table th { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1.2; color: var(--ink-2); border-bottom: 2px solid var(--line); }
.prose blockquote { margin: 1rem 0; padding: 0.75rem 1rem; border-left: 4px solid var(--accent); background: var(--surface); }
.prose img { border-radius: var(--radius); }

/* Accordions: one design everywhere (the Finale FAQ, roping info, the
   rulebook, memberships). The whole head is the button: a white row with the
   gold edge, the title in the display face, and a large drawn + in a ring
   that becomes a filled − when open. The open panel continues the gold edge.
   Live hook classes are kept; components only add .acc-icon. */
:is(.rulebook p.ruleHeader, .more__item > summary, .finale-topic__head button, .finale-faq .accordion-header) {
  position: relative; display: flex; align-items: center; width: 100%; min-height: 3.5rem; margin: 0;
  padding: 0.8rem 4rem 0.8rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius);
  background: var(--surface); color: var(--ink); box-shadow: var(--lift); cursor: pointer; list-style: none; text-align: left;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.375rem; line-height: 1.1;
}
.more__item > summary::-webkit-details-marker { display: none; }
:is(.rulebook p.ruleHeader, .more__item > summary)::after, .acc-icon {
  content: ""; position: absolute; right: 1rem; top: 50%; width: 2.25rem; height: 2.25rem; margin-top: -1.125rem;
  border: 2px solid var(--gold-deep); border-radius: 50%; forced-color-adjust: none;
  background: linear-gradient(var(--ink), var(--ink)) center / 0.875rem 2.5px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 2.5px 0.875rem no-repeat;
}
:is(.rulebook p.ruleHeader.active, .more__item[open] > summary)::after, [aria-expanded="true"] > .acc-icon {
  border-color: var(--gold-fill); background: linear-gradient(var(--ink), var(--ink)) center / 0.875rem 2.5px no-repeat var(--gold-fill);
}
/* Windows high contrast: draw the + and − in the system colours. */
@media (forced-colors: active) {
  :is(.rulebook p.ruleHeader, .more__item > summary)::after, .acc-icon {
    border-color: CanvasText; background: linear-gradient(CanvasText, CanvasText) center / 0.875rem 2.5px no-repeat, linear-gradient(CanvasText, CanvasText) center / 2.5px 0.875rem no-repeat Canvas;
  }
  :is(.rulebook p.ruleHeader.active, .more__item[open] > summary)::after, [aria-expanded="true"] > .acc-icon {
    border-color: Highlight; background: linear-gradient(Highlight, Highlight) center / 0.875rem 2.5px no-repeat Canvas;
  }
}
:is(.rulebook p.ruleHeader.active, .more__item[open] > summary, .finale-topic__head button[aria-expanded="true"], .finale-faq .accordion-header[aria-expanded="true"]) {
  border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: var(--surface-alt);
}
:is(.rulebook div.content, .more__item > .prose, .finale-topic .detail) {
  padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--line); border-top: 0; border-left: 4px solid var(--gold-fill);
  border-radius: 0 0 var(--card-radius) var(--card-radius); background: var(--surface);
}
@media (hover: hover) {
  :is(.rulebook p.ruleHeader, .more__item > summary, .finale-topic__head button, .finale-faq .accordion-header):hover { border-color: var(--ink); border-left-color: var(--gold-fill); }
  :is(.rulebook p.ruleHeader, .more__item > summary):hover::after, :hover > .acc-icon { border-color: var(--ink); }
}
:is(.rulebook p.ruleHeader, .more__item > summary, .finale-topic__head button, .finale-faq .accordion-header):active { background: var(--pressed); }
/* A long open topic also closes from its foot. */
.acc-close { margin-top: 1.25rem; }
.prose details ul, .prose details ol { padding-left: 1.3em; }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.form-card__thumb { aspect-ratio: 8.5 / 11; background: var(--steel-soft); overflow: hidden; border-bottom: 1px solid var(--line); }
.form-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.form-card__body { padding: 0.9rem 1rem 0.5rem; }

/* Champions */
.season-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; }
@media (min-width: 900px) { .season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.season-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.season-card__poster { aspect-ratio: 3 / 4; flex: none; background: var(--panel); display: grid; place-items: center; color: #fff; padding: 0.75rem; }
.season-card__poster img { width: 100%; height: 100%; object-fit: contain; }
.season-card__poster b { font-family: var(--font-display); font-size: 3rem; }
.season-card__body { padding: 0.8rem 1rem; }
.season-card__body b { display: block; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; }
.season-card__body span { font-size: 0.9375rem; color: var(--muted); }
/* Winner cards: two across at most, so Header and Heeler each get a wide
   column; every card in a row is the same height with the purse at the
   bottom, and the two partners' names and hometowns line up (subgrid). */
.champ-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); gap: 1rem; }
.champ { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.champ__photo { aspect-ratio: 16 / 9; background: var(--steel-soft); }
.champ__photo img { width: 100%; height: 100%; object-fit: cover; }
.champ__body { flex: 1; display: flex; flex-direction: column; padding: 0.9rem 1rem; }
.champ__roping { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; line-height: 1.05; }
.champ__team { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 8.5em), 1fr)); gap: 0 1rem; margin-top: 0.5rem; }
.champ__team > div { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; margin-bottom: 0.6rem; }
.champ__team b { display: block; font-weight: 600; }
.champ__team span { font-size: 0.9375rem; color: var(--ink-2); }
.champ__team small { display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; line-height: 1.2; color: var(--ink-2); }
.champ__purse { margin-top: auto; padding-top: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }

/* Sponsors grid */
.sponsor-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }
.sponsor-grid a { display: grid; place-items: center; background: var(--surface); border-radius: var(--radius); transition: background 0.15s; }
.sponsor-grid img { width: auto; max-width: 100%; object-fit: contain; }

/* Contact */
.form-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .form-grid .span { grid-column: span 2; } }

/* ==========================================================================
   Phase 4: Account area
   ========================================================================== */
.auth { max-width: 460px; }
.auth__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; display: grid; gap: 1rem; }
.auth__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: 1rem; }
/* The ID hint belongs to the field above it, so it tucks under it. */
.check { display: flex; gap: 0.5rem; align-items: center; min-height: 2.75rem; font-size: 1rem; }
.check input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* Digital membership card, rendered from data */
.mcard__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.5rem; line-height: 1; letter-spacing: 0.02em; }
.mcard__id { font-family: var(--font-display); letter-spacing: 0.18em; font-size: 1rem; opacity: 0.9; font-variant-numeric: tabular-nums; }

/* Member report tables: one card per row whenever the members column is too
   narrow for every column (phones, and tablets beside the Member Links menu),
   so no column is ever out of sight. The winnings figure stands out. */
.members-body { container: members-body / inline-size; }
.table--stack td[data-label="Winnings"] { font-weight: 700; }
@container members-body (max-width: 719px) {
  .table--stack { min-width: 0; }
  .table--stack thead { display: none; }
  .table--stack tr { display: grid; grid-template-columns: 1fr 1fr; padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--line-2); }
  .table--stack td { display: block; padding: 0; border: 0; }
  .table--stack td[data-label]::before { content: attr(data-label); display: block; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; line-height: 1.3; color: var(--muted); }
  .table--stack td.num { text-align: left; }
  .table--stack td.wide { grid-column: span 2; }
  .table--stack td[data-label="Winnings"] { font-size: 1.25rem; }
}
/* Report footers: the season total (winnings) or count (entries). */
.table tfoot th, .table tfoot td { position: static; font-family: inherit; font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--ink); border-top: 2px solid var(--line); border-bottom: 0; background: var(--surface-2); }
.table tfoot th { text-align: right; }
@container members-body (max-width: 719px) {
  .table--stack tfoot tr { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; background: var(--surface-2); border-top: 2px solid var(--line); border-bottom: 0; }
  .table--stack tfoot th, .table--stack tfoot td { display: block; padding: 0; border: 0; text-align: left; background: none; }
  .table--stack tfoot td.num { font-size: 1.25rem; }
}

/* ==========================================================================
   Motion system
   ========================================================================== */
/* Reveal: visible at rest; only once the Motion script has confirmed motion is
   allowed (html.motion) do elements start hidden and fade up into place. */
html.motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.motion .reveal.is-in { opacity: 1; transform: none; }
/* Hover lift, one rule for every card-like surface */
/* Only a card that is one link or one toggle end to end lifts; a card with
   a button inside (forms, Hall of Champions years) does not. */
.saddles__item, .news-item, .event-row, .result-card, .ue__card, .hn__card, .fw__link { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.2s, border-color 0.15s, background-color 0.15s; }
@media (hover: hover) { :is(.saddles__item, .news-item, .result-card, .event-row, .ue__card, .hn__card, .fw__link, .last-finale):hover { transform: translateY(-2px); border-color: var(--ink); box-shadow: var(--shadow); } }
.btn { transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.15s; }
.btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) { :is(.saddles__item, .news-item, .result-card, .event-row, .ue__card, .hn__card, .fw__link, .last-finale):hover { transform: none; } }

/* The live bar's pulsing dot (.live-bar__dot) */
@keyframes live-pulse { to { box-shadow: 0 0 0 8px rgba(193,39,45,0); } }

/* ==========================================================================
   Editorial details
   ========================================================================== */
/* 8pt spacing scale. Section rhythm and component padding read from these so
   vertical spacing lands on a consistent grid. */
:root {
  --s1: 0.5rem;   /* 8  */
  --s2: 1rem;     /* 16 */
  --s3: 1.5rem;   /* 24 */
  --s4: 2rem;     /* 32 */
  --s5: 3rem;     /* 48 */
}
.section { padding-block: var(--s5); }
.section__head { margin-bottom: var(--s2); }
.flow { gap: var(--s5); }
.two-col { gap: var(--s5) var(--s4); }
@media (min-width: 64em) { .two-col { gap: var(--s5); } }
.page-head { padding-block: var(--s4) var(--s3); margin-bottom: var(--s4); }

/* Every figure is tabular so columns of numbers line up. */
.table td, .table th, .champ__purse, .roping-list b, .mcard__id, .event-row__num { font-variant-numeric: tabular-nums; }

/* Prose refinements: a drop cap on the opening paragraph of long-form pages,
   and figures that never break across a line. */
.prose p { text-wrap: pretty; }
.prose { font-variant-numeric: tabular-nums lining-nums; }

/* ---- In-house photo galleries ------------------------------------------- */
/* Touch screens have no hover, so the credit always shows there. */

/* The viewer is a native <dialog> (showModal): the photo row takes what the
   bar and the caption leave, so the photo always fits and the caption shows. */

/* ---- Dark furniture on a light page -------------------------------------
   Pages are white; the header, footer, heroes and bands stay black, as on
   the schedule flyer. Anything sitting on that black takes the flyer's gold,
   in either theme, because the panel underneath is dark either way. */
.error-page .eyebrow { color: var(--silver-deep); }
.site-header .btn--red, .drawer .btn--red {
  background: var(--gold-fill); border-color: var(--gold-fill); color: var(--on-gold); font-weight: 600;
}
.site-header .site-nav__link[aria-current="true"], .site-header .site-nav__item--active > .site-nav__link { border-bottom-color: var(--gold-fill); }
.site-header { box-shadow: 0 1px 0 rgba(255,255,255,0.08), 0 3px 0 var(--gold-fill); }
.site-footer { border-top: 3px solid var(--gold-fill); }

/* ---- Cards ----------------------------------------------------------------
   WSTR like their sections sitting slightly above the page: every white
   card and panel has the same 6px corner and the same resting shadow. A
   card that is a link deepens the shadow on hover (above). */
.card, .event-row, .result-card, .season-card, .form-card, .aside__block, .table-wrap, .filter-bar, .notice, .auth__card, .ue__card, .hn__card, .fw__link, .join__tile, .ls__step, .week-info__link, .finale-help, .next-steps, .contact-form, .contact-facts, .champ, .fs-day, .past-flyer__day, .members-list li, .mc__card, .mc__table-wrap, .table-wrap--scroll {
  box-shadow: var(--lift);
  border-radius: var(--card-radius);
}

/* Silver rule with a gold tick: the sporting detail that ties the two metals
   together, used on every section title (the h2s below share one face,
   weight and size, set with the type scale further down). */
.section-title, .join__title, .mc__title, .ls__title, .prose h2, .rulebook h2.sectionTitle, .aside__title { position: relative; padding-bottom: 0.5rem; }
:is(.section-title, .join__title, .mc__title, .ls__title, .prose h2, .rulebook h2.sectionTitle, .aside__title)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--gold-fill) 0 2.5rem, var(--silver-line) 2.5rem 100%);
}

/* ---- Core B pages ---- */
/* Memberships: the second line of the live banner h1, and the comparison graphic. */
.page-head__sub { display: block; margin-top: 0.4rem; font-family: var(--font-sans); font-size: 1rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.3; color: var(--ink-2); }

/* Forms: two per row, h2.formHeader over a thumbnail that opens the PDF. */
.forms-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
@media (min-width: 560px) { .forms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.forms-grid__item { grid-template-rows: auto 1fr; }
.form-card__title { padding: 0.9rem 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; line-height: 1.05; border-bottom: 1px solid var(--line); }
.forms-grid .form-card__thumb { display: block; border-bottom: 0; }
.forms-grid .form-card__thumb img { transition: transform 0.2s; }
.forms-grid .form-card__thumb:hover img, .forms-grid .form-card__thumb:focus-visible img { transform: scale(1.02); }
.forms-grid .form-card__thumb:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }

/* Rules: the live p.ruleHeader + div.content collapsibles, in the accordion look. */
.rulebook h2.sectionTitle:first-child { margin-top: 0; }
.rulebook p.ruleHeader { max-width: none; margin-top: 0.6rem; }
.rulebook div.content { margin-top: 0; }
/* A closed rule (hidden="until-found") keeps no box, but Find in Page still reaches it. */
.rulebook div.content[hidden] { padding: 0; border: 0; }
.rulebook h2.sectionTitle { scroll-margin-top: calc(var(--header-h) + 1rem); }
.rule-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-bottom: 1.5rem; }
.rule-tools__nav { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rule-tools__link { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.85rem; border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
@media (hover: hover) { .rule-tools__link:hover { border-color: var(--ink); } }
.rule-tools__link:active { background: var(--pressed); }
/* Section 8, the release: plain paragraphs, not a quotation. */
.rulebook blockquote { margin: 0; padding: 0; border: 0; background: none; }
.rulebook blockquote > * + * { margin-top: 0.9em; }
.rulebook div.content > * + * { margin-top: 0.75em; }
.rulebook div.content > *:first-child { margin-top: 0; }

/* Contact: office facts, then the live form (row of three, then full width). */
.contact-facts { display: grid; gap: 0.9rem 1.5rem; padding: 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.contact-facts dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; line-height: 1.1; color: var(--ink-2); }
.contact-facts dd { margin: 0.1rem 0 0; font-weight: 500; }
.contact-facts .tel { display: inline-flex; align-items: center; min-height: 2.75rem; font-size: 1.125rem; font-weight: 700; color: inherit; text-decoration: underline; text-decoration-color: var(--gold-fill); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.contact-form { display: grid; }
.contact-form .field { position: relative; }
.contact-form__req, .auth__req { margin: 0; color: var(--ink-2); }
.field__optional { font-family: var(--font-sans); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink-2); }
.contact-form__solve { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.contact-form__sum { font-weight: 700; white-space: nowrap; }
/* The live #lastname honeypot: present for bots, invisible and unreachable for people. */
.contact-hp { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: none; background-color: transparent; color: transparent; opacity: 0; pointer-events: none; }

/* Legal (/legal): the terms are plain sections, headings and paragraphs (the
   live page's layout tables and blockquotes were removed, text unchanged), so
   they read like every other page: one column, the site's heading styles. */
.legal-body h2 { margin-top: 0; }
.legal-section { scroll-margin-top: calc(var(--header-h) + 1rem); }
.legal-section + .legal-section { margin-top: 3rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.legal-body h3 { font-size: 1.15rem; margin-top: 2rem; }
.legal-body h3 + :is(p, ul, ol) { margin-top: 0.5rem; }
.legal-body .legal-notice { padding: 1rem 1.25rem; border-left: 4px solid var(--gold-fill); background: var(--surface-2); }
.legal-body .legal-notice + ul { padding: 0.9rem 1.25rem 0.9rem 2.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* Sponsors: one grid of logos, no frames, never filtered. */
/* Three logos a row on phones, five from 760px: 45 logos fill every row, and
   any short last row is centred rather than left alone at the start. */
.sponsor-grid.sponsors-page { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
.sponsors-page li { display: grid; flex: 0 0 calc((100% - 1.5rem) / 3); }
@media (min-width: 760px) { .sponsor-grid.sponsors-page { gap: 1rem; } }
.sponsors-page__tile { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 1rem; border-radius: var(--radius); background: var(--surface); }
.sponsors-page img { max-height: 80px; width: auto; max-width: 100%; object-fit: contain; filter: none; opacity: 1; }

/* Error: the live "broken barrier" page, full-bleed under the header and
   straight onto the footer. On a narrow screen the photo is shifted so the
   steer leaving the chute stays in frame. */
.barrier { min-height: 70vh; }
.barrier img { opacity: 0.6; }
main.main:has(.barrier) { padding-bottom: 0; }
@media (max-width: 759px) { .barrier img { object-position: 22% 50%; } }
.error-page__lede { margin: 0; max-width: 34ch; font-size: 1.25rem; line-height: 1.45; font-weight: 500; text-shadow: 0 1px 8px rgba(0,0,0,0.6); }
.error-page__links .btn { min-height: 3rem; font-size: 1.0625rem; }
@media (max-width: 479px) { .error-page__links { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 22rem; } }

/* ---- Finale pages ---- */
/* Live Finale pages (src/app/finale*, hallofchamps, livestream, calcutta,
   vsvprotocols). Live hook classes are styled here beside the concept's own:
   FAQ .accordion-item/.faq-item, roping info .detail, hall of champs .btn-dark,
   superqual .btn-ls/.btn-login. */
.finale-prose { font-size: 1.0625rem; }
.finale-stack { display: grid; gap: 1.25rem; align-content: start; }
/* /finale "Finale week info": one big row per page, title over a plain line. */
.week-info { list-style: none; display: grid; gap: 0.6rem; margin-top: 1rem; }
.week-info__link { position: relative; display: grid; gap: 0.25rem; padding: 0.95rem 3rem 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.week-info__link::after { content: "\203A"; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; color: var(--gold-deep); }
.week-info__link b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; line-height: 1.05; letter-spacing: 0.02em; }
.week-info__link span { font-size: 1rem; line-height: 1.45; color: var(--ink-2); }
@media (hover: hover) { .week-info__link:hover { border-color: var(--ink); border-left-color: var(--gold-fill); } }
.week-info__link:active { background: var(--pressed); }
@media (max-width: 15em) { .week-info__link { padding-right: 2.25rem; } .week-info__link::after { right: 0.6rem; } }

/* Flyer pages: h2, date line, flyer, cross-link */
/* Flyers and maps are never full width: a small thumbnail that opens the
   lightbox (src/components/flyer-lightbox.tsx). */
.flyer-thumb { width: 100%; max-width: 15rem; display: grid; gap: 0.5rem; justify-items: start; }
.flyer-thumb__btn { display: grid; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--black); box-shadow: var(--lift); cursor: zoom-in; }
.flyer-thumb__btn img { display: block; width: 100%; height: auto; max-height: 20rem; object-fit: contain; }
.flyer-thumb__cta { padding: 0.55rem 0.75rem; background: var(--black); color: #fff; border-top: 3px solid var(--gold-fill); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; line-height: 1.1; }
@media (hover: hover) { .flyer-thumb__btn:hover .flyer-thumb__cta { color: var(--gold-fill); } }
.flyer-thumb__btn:active { opacity: 0.85; }
.flyer-thumb figcaption { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; line-height: 1.2; color: var(--ink-2); }

/* Placeholder for a live image whose file is not in public/ */

/* Roping info: click-to-expand topics (live h3 + div.detail) */
/* The heads look and work like the Finale FAQ's: a dark bar, a gold edge and an arrow that turns. */
.finale-topics { display: grid; gap: 0.75rem; }
.finale-topic .detail .prose h3 { font-size: 1.2rem; margin-top: 1.2em; }

/* FAQ: live two-level accordion */
.finale-faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; margin-top: 1.25rem; }
.finale-faq .accordion-content { padding: 0.6rem 0 0.25rem 1rem; display: grid; gap: 0.5rem; }
.finale-faq .faq-item { border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); box-shadow: var(--lift); }
/* A question inside an open group: the same + / − (a size down) on a plain
   row, the question in sentence case as written. */
.finale-faq .faq-question { position: relative; width: 100%; display: flex; align-items: center; min-height: 3.25rem; text-align: left; padding: 0.9rem 3.75rem 0.9rem 1.1rem; background: transparent; border: 0; border-radius: var(--card-radius); color: var(--ink); font: inherit; font-size: 1.125rem; font-weight: 600; line-height: 1.35; cursor: pointer; }
.finale-faq .faq-question .acc-icon { right: 0.9rem; width: 2rem; height: 2rem; margin-top: -1rem; }
@media (hover: hover) { .finale-faq .faq-question:hover { color: var(--accent-deep); } }
.finale-faq .faq-question:active { background: var(--pressed); }
.finale-faq .faq-answer { padding: 0 1rem 1rem; border-top: 1px solid var(--line-2); }
.finale-faq .faq-answer .prose { padding-top: 0.75rem; }
.finale-faq .faq-answer .prose ul ul { margin-top: 0.3em; }

/* Hall of Champions */
.champs-grid { list-style: none; }
.champs-grid .season-card__body { display: grid; justify-items: start; }
/* Back to the year list: a plain outlined button, easy to find and tap. */
.champs-back a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.6rem 1.2rem; border: 2px solid var(--ink); border-radius: var(--radius); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.125rem; line-height: 1.05; color: var(--ink); text-decoration: none; }
@media (hover: hover) { .champs-back a:hover { background: var(--ink); color: #fff; } }
.champs-back a:active { background: var(--pressed); }
/* The live page's Font Awesome external-link mark, drawn with the same
   arrow as src/components/icon.tsx. */
.finale-faq [hidden], .finale-topics [hidden] { display: none; }
/* ---- Members pages ---- */
/* _LayoutMembers: "Member Links" (col-md-3) beside the page body (col-md-9). */
/* The menu follows the page body on phones and sits at its left from 768px
   (src/app/members/(members)/members-frame.tsx). */
.members-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
@media (min-width: 768px) { .members-layout { grid-template-columns: 240px minmax(0, 1fr); gap: 2.5rem; } .members-nav { order: -1; } }
.members-nav { display: grid; gap: 0.45rem; }
@media (min-width: 768px) { .members-nav { position: sticky; top: calc(var(--header-h) + 1rem); } }
.members-nav a.link { line-height: 1.1; text-decoration: none; }
.members-nav a.link[aria-current="page"] { text-decoration-color: var(--gold-fill); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.members-nav__logout { margin-top: 0.5rem; }

.members-body a:not(.btn), .members-auth a:not(.btn), .displayNone a:not(.btn) { color: var(--accent-deep); font-weight: 600; }
.members-gap { margin-top: 1rem; }

/* Labels that wrap their input (live inputs carry placeholders and no id). */
.field__label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; line-height: 1.1; color: var(--ink-2); }
.members-auth { margin-inline: auto; width: 100%; }
.members-auth .auth__card > .btn { justify-self: stretch; width: 100%; }
/* Password reset: email or text message (develop's SMS reset). */
.reset-method { border: 0; margin: 0; padding: 0; min-width: 0; }
.reset-method > legend { padding: 0; }
.reset-method__options { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 0.35rem; }
.reset-method__option { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; font-size: 1.05rem; cursor: pointer; }
.reset-method__option input { width: 1.15rem; height: 1.15rem; accent-color: var(--red, currentColor); }
/* Purchase: full width on phones, a generous fixed width above. */
.members-purchase__btn { width: 100%; }
@media (min-width: 640px) { .members-purchase__btn { width: auto; min-width: 14rem; } }
.members-error { color: var(--red-deep); font-weight: 700; }
.members-error:empty, .members-sent:empty { display: none; }
.members-sent { margin-top: 1rem; display: grid; gap: 0.75rem; }

/* Members/Landing: card art with the member's details over its blank panel. */
.member-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem 1.25rem; }
.member-cards__item { display: grid; gap: 0.6rem; align-content: start; }
.member-card { position: relative; aspect-ratio: 564 / 370; background: var(--steel-soft) center / cover no-repeat; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); container-type: inline-size; color: #0f1012; }
.member-card__panel { position: absolute; left: 27%; top: 39.7%; width: 71.6%; height: 40.8%; padding: 3.5cqw 4cqw; display: grid; align-content: center; gap: 0.6cqw; }
.member-card__name { font-size: 8cqw; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-card__name--long { font-size: 5.6cqw; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.member-card[data-art="MX6"] .member-card__panel { padding-left: 7.5cqw; }
.member-card__id { font-size: max(0.9375rem, 5cqw); line-height: 1.2; }
/* Class and hometown sit under the card in body-size type: printed on the
   art they came out at 7 to 10px. */
.member-card__facts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; margin: 0; font-size: 1.0625rem; line-height: 1.3; }
.member-card__facts div { display: grid; gap: 0.1rem; }
.member-card__facts dt { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; line-height: 1.2; color: var(--ink-2); }
.member-card__facts dd { margin: 0; font-weight: 600; }
.members-facts { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); gap: 0.75rem 2.5rem; flex-direction: column; }
.members-notice { margin: 1rem 0 0; max-width: none; }

/* Members/Membership */
.members-list { list-style: none; display: grid; gap: 0.5rem; }
.members-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; padding: 0.6rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.members-list li > :first-child { font-weight: 600; margin-right: auto; }
.members-purchase { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.members-purchase__note { margin-top: -0.5rem; color: var(--ink-2); }
.members-purchase .form-grid[hidden] { display: none; }
.members-price { width: 100%; border: 1px solid var(--line); border-radius: var(--radius); border-collapse: separate; border-spacing: 0; background: var(--surface-2); }
.members-price th, .members-price td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line-2); }
.members-price th { text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.members-price td { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.members-price tr:last-child th, .members-price tr:last-child td { border-bottom: 0; }
.members-price__total th, .members-price__total td { font-weight: 700; font-size: 1.1875rem; }
#PayDisplay:empty { display: none; }

/* Members/Report: season select that submits on change. */
/* Report head: whose record it is (name and Global ID). */
.members-season { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.members-season__label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.05rem; line-height: 1.1; }

/* reregistered: three toggles, one .displayNone block shown at a time. */
.members-toggles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.members-toggles__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
@media (max-width: 639px) { .members-toggles, .members-toggles__actions { flex-direction: column; } .members-toggles .btn, .members-toggles__actions .btn { width: 100%; } }
/* ---- Core A pages ---- */
/* Home, calendar, results, qualphotos, news, heartland, American Rodeo.
   Live hook classes (#news-slider, .carousel-item, .carousel-nav-item,
   .video-swiper, .calendar-item, .eventFlyer, .expandableCal,
   .results-schedule, .RopingLink, #ddgalleries and the rest) sit beside the
   concept classes so the later stylesheet port can map them one to one. */

/* Home video slider (.video-swiper) */
.video-swiper { display: grid; gap: 0.5rem; }
/* Room inside the strip for the focus ring; the negative margin keeps the
   thumbnails lined up with the heading. Phones: a third thumbnail peeks in. */
.video-swiper .video-strip { grid-auto-columns: 42%; margin-inline: -6px; padding: 6px 6px 0.75rem; scroll-padding-inline: 6px; }
@media (min-width: 481px) { .video-swiper .video-strip { grid-auto-columns: calc((100% - 2rem) / 3); } }
.video-swiper__nav { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* CTA banners (.div-horz-cta / .p-horz-cta / a.link-horz-cta on live) */
.p-horz-cta { margin: 0; }
/* Home partners: one at a time between content sections (never two ads
   together), the banner whole at its own 2:1 shape with its place held while
   it loads, the line and button beside it from 640px. */

/* Empty Saddles */
/* The memorial photos are small (115px) files, so they show at about that
   size, beside the name, and never blown up. */
.saddles { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.saddles__link { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 0.75rem; text-decoration: none; color: inherit; height: 100%; }
.saddles__link img, .saddles__ph { display: block; width: 6rem; aspect-ratio: 1 / 1; object-fit: cover; object-position: top; border-radius: var(--radius); background: var(--steel-soft); }
.saddles__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.3rem; line-height: 1.1; }
@media (hover: hover) { .saddles__link:hover .saddles__name { color: var(--accent-deep); } }

/* Calendar (#calendarList.calendar-schedule) */
.calendar-schedule, .cal-month { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
button.calendar-item { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; scroll-margin-top: 3.5rem; }
.calendar-item-left > span, .calendar-item-left .eventDate > span { display: block; }
.calendar-item[aria-expanded="true"] { border-color: var(--ink); }
.expandableCal { display: grid; position: relative; }
.expandableCal::after { content: "+"; position: absolute; top: 0; right: 0; font-family: var(--font-display); font-weight: 600; line-height: 1; }
.expandableCal.active::after { content: "\2212"; }
.eventFlyer { padding: 0.25rem 0 1rem; }

/* Results (.results-schedule) */
.results-item { scroll-margin-top: 0.5rem; }
.results-item__head { cursor: pointer; }
.results-item.active .results-item__head { border-color: var(--ink); }
.results-item__toggle { display: grid; gap: 0.15rem; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.results-item__toggle > span { display: block; }
.gb-list { list-style: none; display: grid; gap: 0.2rem; font-size: 1rem; }
.gb-list span { text-transform: uppercase; color: var(--ink-2); margin-right: 0.3rem; }
.gb-list b { font-family: var(--font-display); line-height: 1; }
@media (min-width: 640px) { .gb-list { text-align: right; } }
.schedule-summary { display: grid; gap: 0.9rem; padding: 0.9rem 0 0.5rem; }
.RopingLink { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 0.8rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--card-radius); box-shadow: var(--lift); font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.15s, box-shadow 0.2s; }
@media (hover: hover) { .RopingLink:hover { border-color: var(--ink); box-shadow: var(--shadow); } }
.ropingAmount { font-family: var(--font-display); font-size: 1.15rem; font-variant-numeric: tabular-nums; color: var(--accent-deep); white-space: nowrap; }
.RopingLink2Span { margin: 0; }
.RopingLink2Span button { background: none; border: 0; padding: 0.25rem 0; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; line-height: 1.2; color: var(--accent-deep); cursor: pointer; }
@media (hover: hover) { .RopingLink2Span button:hover { text-decoration: underline; } }
.resultType { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.35rem; letter-spacing: 0.03em; margin-bottom: 0.5rem; }
.results-item__gallery { margin: 0; }

/* Qualifier photos */
.gallery-select { max-width: 30rem; }

/* News */
.news-subtitle { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.6rem; letter-spacing: 0.03em; color: var(--ink-2); }
.news-layout { display: grid; gap: 1.5rem; align-items: start; }
/* Categories: one row of equal chips above the list; two by two on phones. */
.news-cats__title { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.04em; padding-bottom: 0.3rem; margin-bottom: 0.5rem; }
.news-cats ul { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.news-cats a { display: flex; align-items: center; justify-content: center; text-align: center; height: 100%; min-height: 2.5rem; padding: 0.35rem 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; line-height: 1.15; color: var(--ink); text-decoration: none; }
@media (min-width: 560px) { .news-cats ul { display: flex; flex-wrap: wrap; } .news-cats a { padding-inline: 1rem; } }
@media (hover: hover) { .news-cats a:hover { color: var(--accent-deep); border-color: var(--ink); } }
.news-cats a.fw-bold { font-weight: 700; background: var(--ink); border-color: var(--ink); color: #fff; }
.news-list { list-style: none; display: grid; gap: 1rem; }
.news-item { display: grid; }
.news-item__media { display: block; }
.news-item__media img { display: block; width: 100%; height: auto; }
.news-item .card__title { margin-bottom: 0.35rem; }
/* The whole news card opens the story: the headline link stretches over it. */
.news-item { position: relative; }
.news-item .card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
@media (hover: hover) { .news-item:hover .card__title a { color: var(--accent-deep); } }
.news-article__title { font-size: clamp(1.8rem, 3.5vw, 2.4rem); }
.news-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }

/* Heartland */
.heartland-list { list-style: none; display: grid; gap: 0.5rem; }

/* American Rodeo video poster (the live thumbnails are not in public/): a
   dark arena panel with the series name and a play mark. */

/* American Rodeo */
.rodeo { display: grid; gap: 2rem; align-items: start; }
/* No body copy yet, so the videos use the full width. */
.rodeo__grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1rem; }
.rodeo__grid .video-thumb { width: 100%; }

/* Live hides the sponsor carousel on every error response (/Error renders
   with HideSponsors), including 404s at arbitrary URLs. */
body:has(.barrier) .sponsors { display: none; }

/* ---- Flyers and posters always show whole -------------------------------
   A flyer, poster or banner is never cropped. Either the image takes its own
   height (calendar flyers, news thumbnails), or it sits in a fixed frame with
   object-fit: contain (champion posters, Empty Saddles). Decorative
   backgrounds (hero panels, the error page) may still crop. */
.eventFlyer img, .news-item__media img { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.news-item { align-items: start; }

/* Every calendar card reads in three lines: title, then date, then venue and
   city. The calendar list keeps the live DOM order (date, name, venue); the
   title is lifted to the top with CSS order. */
.expandableCal .eventName { order: -1; }
.expandableCal { gap: 0.15rem; }
.expandableCal .event-row__meta { margin-top: 0; font-size: 1rem; line-height: 1.35; }
.expandableCal .eventDate.event-row__meta { font-weight: 600; color: var(--ink); }

/* ---- Finale XX heroes (top of the home page) ------------------------------
   Near-black arena, chrome-and-gold lockup, from the design hand-off. Three
   variants share the ambient layer: a (Arena Lights), b (Day by Day) and
   c (Number Drop). Motion is CSS; .is-paused stops it. */
.fhero { --fh-gold: var(--gold-fill); --fh-text: #f2efe9; --fh-2: #c9c3b9; --fh-muted: #a49e95; --fh-dim: #8a847b; position: relative; overflow: hidden; isolation: isolate; background: var(--black); color: var(--fh-text); border-bottom: 3px solid var(--fh-gold); }
.fhero__inner { position: relative; z-index: 1; padding-block: 2.25rem 2.5rem; }
.fhero .btn--outline-light { background: transparent; border-color: #8c867d; color: var(--fh-text); }
@media (hover: hover) { .fhero .btn--outline-light:hover { background: var(--fh-text); border-color: var(--fh-text); color: var(--black); } }

/* Ambient layer */
.fh-ambient { position: absolute; inset: 0; z-index: 0; pointer-events: none; animation: fh-fadeIn 1.4s ease-out both; }
.fh-spot { position: absolute; top: -140px; width: 420px; height: 1000px; margin-left: -210px; transform-origin: 50% 0; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, rgba(255,236,200,0.12), rgba(255,236,200,0.035) 55%, rgba(255,236,200,0) 88%); filter: blur(36px); }
.fh-spot--a { animation: fh-sweepA 7s ease-in-out infinite alternate; }
.fh-spot--b { background: linear-gradient(180deg, rgba(255,236,200,0.10), rgba(255,236,200,0.03) 55%, rgba(255,236,200,0) 88%); animation: fh-sweepB 8.6s ease-in-out infinite alternate; }
@media (min-width: 900px) { .fh-spot { width: 620px; height: 1150px; margin-left: -310px; } }
.fh-floor { position: absolute; left: 50%; bottom: -260px; width: min(1300px, 140%); height: 420px; margin-left: calc(min(1300px, 140%) / -2); border-radius: 50%; background: radial-gradient(ellipse, rgba(222,186,100,0.16), transparent 70%); animation: fh-glow 5s ease-in-out infinite alternate; }
/* Optional photo (HERO_BG): darkened and vignetted so the spotlights read over it. */
.fh-photo { position: absolute; inset: 0; background-image: var(--bg-sm, var(--bg)); background-size: cover; background-position: 70% 35%; filter: brightness(0.5) saturate(0.75); }
@media (min-width: 48em) { .fh-photo { background-image: var(--bg); } }
.fh-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(11,10,9,0.35) 0%, rgba(11,10,9,0.8) 75%), linear-gradient(180deg, rgba(11,10,9,0.55) 0%, rgba(11,10,9,0.2) 45%, rgba(11,10,9,0.9) 100%); }
.fh-dust { position: absolute; border-radius: 50%; background: rgba(255,226,170,0.85); opacity: 0; animation: fh-float 9s ease-in-out infinite; }

/* Lockup with a moving shine */
.fh-lockup { position: relative; width: clamp(190px, 26vw, 339px); display: grid; justify-items: center; gap: clamp(0.6rem, 1.5vw, 1rem); }
.fh-lockup__art { position: relative; width: 100%; aspect-ratio: 1468 / 1706; }
.fh-lockup__art picture { display: contents; }
.fh-lockup__art img { display: block; width: 100%; height: 100%; }
.fh-sp { display: block; width: 66%; }
.fh-sp img { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }
.fh-shine { position: absolute; inset: 0; mix-blend-mode: overlay; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.95) 50%, transparent 60%); background-size: 250% 100%; background-position: 100% 0; -webkit-mask: url(/images/finale/finale-xx-720w.png) center / 100% 100% no-repeat; mask: url(/images/finale/finale-xx-720w.png) center / 100% 100% no-repeat; -webkit-mask-image: image-set(url(/images/finale/finale-xx-720w.webp) type("image/webp"), url(/images/finale/finale-xx-720w.png) type("image/png")); mask-image: image-set(url(/images/finale/finale-xx-720w.webp) type("image/webp"), url(/images/finale/finale-xx-720w.png) type("image/png")); animation: fh-shine 6s linear 1.6s infinite; }
.fh-logo-in { animation: fh-logoIn 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }
.fh-in { animation: fh-fadeUp 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0ms) both; }

.fh-date { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1; letter-spacing: 0.01em; color: var(--fh-text); }
.fh-where { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; font-size: clamp(1rem, 1.6vw, 1.35rem); line-height: 1.25; text-wrap: balance; color: var(--fh-2); }
.fh-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* a: Arena Lights */
.fh-kicker { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; font-size: 1rem; line-height: 1.2; color: var(--fh-gold); margin-bottom: -0.5rem; }
.fh-a, .fh-a__copy { display: grid; justify-items: center; text-align: center; gap: 1.1rem; }
.fh-a { padding-bottom: 0.5rem; }
.fh-a .fh-where { margin-top: -0.4rem; }
.fh-a .fh-actions { justify-content: center; }
.fh-count { display: grid; gap: 0.6rem; justify-items: center; margin-top: 0.6rem; }
.fh-count__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.95rem; color: var(--fh-2); }
.fh-count__row { display: flex; gap: 1.5rem; }
.fh-count__unit { display: grid; gap: 0.15rem; justify-items: center; }
.fh-count__unit b { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--fh-text); }
.fh-count__unit b.is-sec { color: var(--fh-gold); }
.fh-count__unit span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.95rem; color: var(--fh-2); }
/* Wide screens: the lockup on the left, the words, buttons and countdown
   beside it, centred together. */
@media (min-width: 1000px) {
  .fh-a { grid-template-columns: auto minmax(0, 36rem); justify-content: center; align-items: center; column-gap: clamp(3rem, 6vw, 6rem); padding-block: 1rem; }
}

/* b: Day by Day */
/* Every day's list sits in one cell, the hidden ones only holding the height. */
:is(.fh-b__rows, .fh-b__sizer) li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid #22201e; }
/* Phones: the eleven days in two rows (6 + 5), so every day and the
   highlighted one are always in view. */

/* c: Number Drop */
/* Below that the nine divisions run three across, so the ladder stays short. */
/* Tablets and phones turned sideways: lockup or number beside the words, so
   the dates and buttons come up sooner. */
/* Phones turned sideways (about 390px tall): a smaller lockup and tighter
   spacing, so the Finale dates and buttons are on the first screen. */
@media (orientation: landscape) and (max-height: 500px) and (min-width: 600px) {
  .fhero__inner { padding-block: 1rem 1.25rem; }
  .fh-a { grid-template-columns: auto minmax(0, 1fr); justify-content: center; align-items: center; column-gap: 2.5rem; padding-bottom: 0; }
  .fh-a__copy { gap: 0.7rem; }
  .fh-lockup { width: calc(min(52vh, 13.5rem) * 1468 / 1706); }
  .fh-date { font-size: 2.2rem; }
  .fh-count { margin-top: 0.2rem; }
}

/* Motion */
@keyframes fh-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fh-fadeUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes fh-logoIn { from { opacity: 0; transform: scale(1.1); filter: blur(10px) brightness(2); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fh-sweepA { from { transform: rotate(-20deg); } to { transform: rotate(14deg); } }
@keyframes fh-sweepB { from { transform: rotate(18deg); } to { transform: rotate(-12deg); } }
@keyframes fh-glow { from { opacity: 0.55; transform: scale(0.92); } to { opacity: 1; transform: scale(1.06); } }
@keyframes fh-float { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 0.9; } 70% { opacity: 0.6; } 100% { transform: translate(24px, -140px); opacity: 0; } }
@keyframes fh-shine { 0% { background-position: 100% 0; } 30%, 100% { background-position: 0% 0; } }
@keyframes fh-rowIn { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
@keyframes fh-roll { from { opacity: 0; transform: translateY(60%); } to { opacity: 1; transform: none; } }
@keyframes fh-drop { from { opacity: 0; transform: translateY(70%); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes fh-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Reduced motion stops the looping motion only. Entrance animations always finish,
   so a paused (or reduced-motion) hero is never left invisible. */
.fhero.is-paused :is(.fh-ambient, .fh-spot, .fh-floor, .fh-dust, .fh-shine, .fh-rail__bar, .fh-ladder__bar) { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .fh-spot, .fh-floor, .fh-dust, .fh-shine { animation: none !important; }
  .fh-dust { display: none; }
}

/* Membership call to action: a gold panel in place of the red Key Card Max
   banner (live .div-horz-cta / .p-horz-cta / a.link-horz-cta). */

/* News list and home news: every photo sits in the same 3:2 frame whatever
   the story's text length, and fills it (cover), held toward the top so faces
   stay in. */
@media (min-width: 640px) { .news-item { grid-template-columns: 240px minmax(0, 1fr); align-items: stretch; height: 13rem; overflow: hidden; } .news-item .news-item__media { aspect-ratio: auto; height: 100%; } }
.news-item__media { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: var(--black); isolation: isolate; }
.news-item__media::before { content: ""; position: absolute; inset: -24px; z-index: -1; background: var(--img) center / cover no-repeat; filter: blur(16px) brightness(0.5) saturate(1.1); }
.news-item .news-item__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* Every row the same height: the headline and the teaser stop at two lines each. */
.news-item .card__title, .news-item .article-card__teaser { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.news-item__media--none { display: grid; place-items: center; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 7px), radial-gradient(90% 120% at 85% 15%, rgba(222,186,100,0.22), transparent 60%), linear-gradient(135deg, var(--black) 0%, #2b2a28 100%); }
.news-item__media--none::before { content: none; }
.news-item__media--none span { font-family: var(--font-display); font-weight: 700; font-size: 3rem; letter-spacing: 0.02em; background: linear-gradient(180deg, #fff 0%, #dcdcdc 40%, #8e8e8e 55%, #efefef 70%, #a6a6a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Contact form: a two-column grid (Name and Email, Phone and Subject), the
   message full width, and the question and Send button on one footer row.
   Field names and ids are unchanged. */
.contact-form { gap: 1.25rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.contact-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 1.25rem; }
@media (min-width: 640px) { .contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact-form__wide { grid-column: 1 / -1; } }
.contact-form__grid .input, .contact-form__grid .textarea { width: 100%; }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.contact-form__answer { width: 5.5em; text-align: center; }
.contact-form__wide-error { flex-basis: 100%; order: 3; }

/* ---- Finale XX schedule (/finale/schedule) --------------------------------
   The official flyer as real text: a dark header, a jump bar of the eleven
   days, then one card per day with the handicap in gold. */
.fs { display: grid; gap: 1.5rem; }
/* The address sits on one slim light line above the day chips; the Finale
   head above already gives the dates, so the first day shows on a phone's
   first screen. */
/* What the handicap numbers and Key Card tags mean, for newcomers. */
.fs-jump { display: grid; grid-template-columns: repeat(11, minmax(3rem, 1fr)); gap: 0.35rem; overflow-x: auto; padding-bottom: 2px; position: sticky; z-index: 4; }
.fs-jump__chip { display: grid; justify-items: center; padding: 0.4rem 0.2rem; border: 1px solid var(--line); border-top: 3px solid var(--gold-fill); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--ink); }
.fs-jump__chip span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.875rem; line-height: 1.1; color: var(--ink-2); }
.fs-jump__chip b { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
@media (hover: hover) { .fs-jump__chip:hover { border-color: var(--ink); border-top-color: var(--gold-fill); } }
.fs-days { list-style: none; display: grid; gap: 0.9rem; }
.fs-day { display: grid; grid-template-columns: min(4.75rem, 24%) minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.fs-day__date { display: grid; align-content: center; justify-items: center; gap: 0.1rem; padding: 0.75rem 0.25rem; background: var(--black); color: #f2efe9; border-right: 3px solid var(--gold-fill); }
.fs-day__date span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.875rem; line-height: 1.1; color: #c9c3b9; }
.fs-day__date b { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; line-height: 0.9; background: linear-gradient(180deg, #fff 0%, #dcdcdc 40%, #8e8e8e 55%, #efefef 70%, #a6a6a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fs-day__body { padding: 0.85rem 1.1rem 0.6rem; min-width: 0; container-type: inline-size; }
.fs-day__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; letter-spacing: 0.02em; padding-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.fs-day__head { display: flex; align-items: center; justify-content: space-between; gap: 0 0.75rem; border-bottom: 1px solid var(--line); }
.fs-day__head .fs-day__title { padding-block: 0.4rem; border-bottom: 0; }
.fs-rows { list-style: none; display: grid; }
.fs-row { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr) auto; gap: 0.75rem; border-bottom: 1px solid var(--line-2); }
.fs-row:last-child { border-bottom: 0; }
.fs-row__hc { font-family: var(--font-display); font-weight: 700; color: var(--gold-deep); }
.fs-row__ev { min-width: 0; font-size: 1.125rem; line-height: 1.3; }
.fs-row__ev b { font-weight: 700; }
.fs-row__ev span { color: var(--ink-2); }
.fs-row--finale .fs-row__ev span { color: var(--ink); font-weight: 600; }
.fs-tag { max-width: 100%; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; line-height: 1.2; padding: 0.25rem 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink-2); white-space: nowrap; }
.fs-tag--finale { background: var(--gold-fill); border-color: var(--gold-fill); color: #1c1508; }
/* Phones: the row text already names each roping type, so the repeated tags
   go; the gold WSTR Finale tag stays as the marker for the main event. */
@media (max-width: 35em) { .fs-row .fs-tag { grid-column: 2; justify-self: start; } .fs-row .fs-tag:not(.fs-tag--finale) { display: none; } .fs-row > span:empty { display: none; } }
/* Too narrow for the handicap beside the name (large text on a phone): the
   handicap, name and tag stack, and the tag may wrap. */
@container (max-width: 12em) { .fs-row { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; } .fs-row .fs-tag { grid-column: 1; white-space: normal; } }

/* ---- Home, in the owner's priority order ---------------------------------
   Finale essentials bar, the Finale day by day, upcoming events, latest news,
   last year's results line. */
.fe { background: var(--black); color: #f2efe9; border-bottom: 1px solid #2e2b28; }
.fe__inner { display: grid; gap: 0.6rem; padding-block: 0.9rem 1rem; }
.fe__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 1.05rem; color: #e6e1d8; }
/* Two tiles a row on phones, four from tablets; a tile never gets narrower
   than 9em, so enlarged text drops to fewer columns instead of being cut.
   Each tile reads as a button: big bright type, a gold edge and an arrow,
   title and subtitle centred together. */
.fe__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(9em, (100% - 1.8rem) / 4)), 1fr)); gap: 0.6rem; }
.fe__item { position: relative; display: grid; align-content: center; gap: 0.15rem; height: 100%; padding: 0.8rem 2.4rem 0.85rem 1rem; border: 1px solid #4a4540; border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius); color: #f2efe9; text-decoration: none; background: #1b1916; transition: background 0.15s, border-color 0.15s; }
.fe__item::after { content: "\203A"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-50%); font-size: 2rem; line-height: 1; color: var(--gold-fill); }
.fe__item b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.05; letter-spacing: 0.02em; color: #fff; }
.fe__item span { font-size: 0.95rem; line-height: 1.25; color: #d6d0c6; }
@media (hover: hover) { .fe__item:hover { background: #2a2622; border-color: var(--gold-fill); } }
.fe__item:active { background: #34302b; }
.fe__item:focus-visible { outline: 3px solid var(--gold-fill); outline-offset: 2px; }

.fw { padding-block: 2rem 1.5rem; background: var(--surface-alt); border-bottom: 1px solid var(--line); }
/* Same head as Upcoming events: the shared section title and "more" link,
   with the Finale eyebrow above. */
.fw__eyebrow { margin-bottom: 0.3rem; }
.fw__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.fw__link { display: grid; grid-template-rows: auto auto auto; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; }
.fw__date { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.5rem 0.75rem; background: var(--black); color: #f2efe9; border-bottom: 3px solid var(--gold-fill); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.95rem; }
.fw__date b { font-size: 1.9rem; line-height: 0.9; letter-spacing: 0; background: linear-gradient(180deg, #fff 0%, #dcdcdc 40%, #8e8e8e 55%, #efefef 70%, #a6a6a6 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fw__rows { list-style: none; display: grid; align-content: start; gap: 0.5rem; min-height: 0; padding: 0.8rem 0.9rem 0.6rem; font-size: 1rem; line-height: 1.3; color: var(--ink-2); }
/* Division numbers big and easy to read; the first line of each name lines
   up with its number. */
.fw__rows li { display: grid; grid-template-columns: 3.75rem minmax(0, 1fr); align-items: first baseline; gap: 0.5rem; }
.fw__rows li > span { grid-column: 2; line-height: 1.3; padding-top: 0; }
.fw__rows b { font-family: var(--font-display); font-weight: 700; line-height: 1; margin: 0; color: var(--gold-deep); }
.fw__rows li.is-finale { color: var(--ink); font-weight: 700; }
.ue { padding-top: 2rem; margin-bottom: var(--s5); }
.ue__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; margin-bottom: 1rem; }
.ue__grid { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
@media (min-width: 640px) { .ue__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .ue__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ue__card { display: flex; gap: 0.85rem; height: 100%; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.ue__date { flex: none; display: grid; justify-items: center; align-content: start; padding-top: 0.3rem; border-top: 3px solid var(--gold-fill); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.875rem; line-height: 1.1; color: var(--ink-2); }
.ue__date b { font-size: 1.9rem; line-height: 1; letter-spacing: 0; color: var(--ink); }
.ue__body { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; min-width: 0; overflow-wrap: break-word; }
.ue__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.ue__when { font-weight: 700; font-size: 1rem; }
/* "Live now" / "Open now" on an event running today (home cards, sidebar, calendar rows). */
.live-tag { display: inline-block; justify-self: start; width: fit-content; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.875rem; line-height: 1.2; color: #fff; background: var(--red-fill); border-radius: 2px; padding: 0.1rem 0.4rem; }

.hn { list-style: none; display: grid; gap: 0.75rem; }
@media (min-width: 640px) { .hn { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hn__card { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); color: var(--ink); text-decoration: none; }
@media (hover: hover) { .hn__card:hover .hn__title { color: var(--accent-deep); } }
/* The picture runs across the top of the card in the shape of the site's
   news banners (1440 x 500), so a banner fills it; any other picture shows
   whole on a blurred copy of itself. Category, title and date then line up
   across a row, with the date at the foot of the card. */
.hn .hn__media { aspect-ratio: 3 / 2; height: auto; min-height: 0; }
.hn .hn__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.hn__body { display: grid; align-content: start; gap: 0.3rem; padding: 0.85rem 1rem 0.9rem; }
.hn__body .hn__date { align-self: end; }
.hn__cat { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: var(--gold-deep); }
.hn__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.15rem; line-height: 1.05; }
.hn__date { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-2); }

/* Finale day row: one line of same-size cards that scrolls sideways.
   Stage padding lets the next card peek in; edge fades and big worded arrow
   buttons say "more this way". Built for older visitors: large text, large
   targets, nothing hidden behind a hover. */
.ds { position: relative; }
.ds__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1rem; margin-bottom: 0.75rem; }
.ds__arrows { display: flex; gap: 0.5rem; }
.ds__btn { min-width: 6.5rem; min-height: 3rem; padding: 0.5rem 1rem; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--surface); color: var(--ink); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.125rem; line-height: 1.05; cursor: pointer; }
.ds__btn span { font-size: 1.5rem; line-height: 0; vertical-align: -0.1em; }
@media (hover: hover) { .ds__btn:hover:not(:disabled) { background: var(--ink); color: #fff; } }
.ds__btn:active:not(:disabled) { background: var(--pressed); }
.ds__btn:disabled { opacity: 0.35; cursor: default; }
.ds__track { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(var(--gutter) * -1); padding: 0.25rem var(--gutter) 0.9rem; scrollbar-width: thin; cursor: grab; }
.ds__track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.ds__track.is-dragging a { pointer-events: none; }
/* max-content: the list's own box overflows the track, so the track's end
   padding counts and the last card stops a gutter short of the edge. Card
   widths are fixed, so about half of the next card always peeks in. */
.fw__days { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100vw - 2 * var(--gutter)) * 0.82); width: max-content; gap: 0.75rem; }
@media (min-width: 640px) { .fw__days { grid-auto-columns: 17.5rem; } }
@media (min-width: 1200px) { .fw__days { grid-auto-columns: 20rem; } }
.fw__day { scroll-snap-align: start; display: flex; container-type: inline-size; }
/* Handicap above the roping name once the card is too narrow for both. */
@container (max-width: 13em) { .fw__day .fw__rows li { grid-template-columns: minmax(0, 1fr); } .fw__day .fw__rows li > span { grid-column: 1; } }
.fw__day .fw__link { flex: 1; display: flex; flex-direction: column; }
/* The fades cover only the gutter beyond the column edge, where a card can
   only ever be peeking, never a whole card. */
.ds::before, .ds::after { content: ""; position: absolute; bottom: 0.9rem; top: 3.75rem; width: var(--gutter); z-index: 1; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.ds::before { left: calc(var(--gutter) * -1); background: linear-gradient(90deg, var(--surface-alt), rgba(244,245,247,0)); }
.ds::after { right: calc(var(--gutter) * -1); background: linear-gradient(270deg, var(--surface-alt), rgba(244,245,247,0)); }
.ds.has-before::before, .ds.has-after::after { opacity: 1; }
@media (max-width: 639px) { .ds__hint { flex-basis: 100%; } .ds__arrows { margin-left: auto; } }

/* Event bar under the header (every page): the next event, or "Live now"
   while one is running, with the TimeTracker ropings once that feed is
   connected. Phones: two rows (badge beside the name with the date and
   place under it, then the buttons). Wider: the date and place follow the
   name, the buttons sit at the right, ropings take the line below. Long
   names wrap, never cut off. */
/* Reserve the bar's height so the page does not shift when the display font lands (measured 45px phone, 66px tablet, 43px desktop). */
.live-bar { background: var(--surface-alt); border-bottom: 1px solid var(--line); color: var(--ink); min-height: 45px; }
@media (min-width: 40em) and (max-width: 63.99em) { .live-bar { min-height: 66px; } }
@media (min-width: 64em) { .live-bar { min-height: 43px; } }
.live-bar.is-live { background: var(--black); color: #f2efe9; border-bottom-color: #2e2b28; }
.live-bar__inner { display: flex; flex-wrap: wrap; align-items: center; line-height: 1.35; }
.live-bar__badge { flex: none; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; line-height: 1.5; color: var(--gold-deep); }
.live-bar.is-live .live-bar__badge { padding: 0.1rem 0.5rem; border-radius: 3px; }
.live-bar__dot { width: 9px; height: 9px; border-radius: 50%; background: #fff; animation: live-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-bar__dot { animation: none; } }
.live-bar__what { flex: 1 1 12rem; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.85rem; }
.live-bar__event { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.03em; color: inherit; text-decoration: underline; text-decoration-color: var(--gold-fill); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .live-bar__event:hover { text-decoration-color: currentColor; } }
.live-bar__event:active { opacity: 0.7; }
.live-bar__meta > span { white-space: nowrap; }
.live-bar.is-live .live-bar__meta { color: #c9c3b9; }
.live-bar__soon { flex: none; }
.live-bar__actions { flex: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-left: auto; }
.live-bar__btn { display: inline-flex; align-items: center; border: 2px solid currentColor; border-radius: var(--radius); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.1; white-space: nowrap; text-decoration: none; }
.live-bar__btn--gold { background: var(--gold-fill); border-color: var(--gold-fill); color: #1c1508; }
@media (hover: hover) { .live-bar__btn:hover { background: rgba(255,255,255,0.12); } .live-bar__btn--gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); } }
.live-bar__btn:active { opacity: 0.7; }
@media (max-width: 759px) {
  .live-bar__inner { gap: 0.45rem 0.75rem; padding-block: 0.55rem; }
  /* The whole name-and-date block opens the event: a big target. */
  .live-bar__what { position: relative; flex: 1 1 10rem; flex-direction: column; align-items: flex-start; gap: 0.2rem; }
  .live-bar__event { font-size: 1.2rem; }
  .live-bar__event::after { content: ""; position: absolute; inset: -0.4rem 0; }
  .live-bar__meta { font-size: 0.9375rem; line-height: 1.3; }
  .live-bar__soon { flex-basis: 100%; font-size: 0.9375rem; }
  /* "+N more live" gets its own line under the buttons, so the name and
     date keep the room beside the badge. */
  .live-bar__more { order: 1; flex: 1 1 100%; }
  .live-bar__actions { flex: 1 1 100%; margin-left: 0; }
  .live-bar__btn { flex: 1 1 auto; justify-content: center; }
  .live-bar:not(.is-live) .live-bar__actions { display: none; }
}
@media (max-width: 359px) { .live-bar__btn-pre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }

.fw__more { margin-top: auto; padding: 0.55rem 0.9rem; border-top: 1px solid var(--line-2); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; color: var(--gold-deep); }
@media (hover: hover) { .fw__link:hover .fw__more { color: var(--ink); } }

/* Every dropdown: one custom chevron with room on the right, and the same
   height as text fields so filter rows line up. Large enough to tap. */
select, .select, .form-select {
  appearance: none; -webkit-appearance: none;
  min-height: 3rem; padding: 0.6rem 2.9rem 0.6rem 0.9rem;
  font-size: max(16px, 1.0625rem); border: 1px solid var(--field-line); border-radius: var(--radius); color: var(--ink);
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1.5 1.5 7 7l5.5-5.5' fill='none' stroke='%23151311' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 14px 9px;
  cursor: pointer; line-height: 1.3;
}
select::-ms-expand { display: none; }
.input { min-height: 3rem; }
/* Filter rows: fields and the button share one bottom line and one height. */
.filter-bar { align-items: end; }
.filter-bar .field label { min-height: 1.25rem; line-height: 1.25rem; }

/* Membership comparison (real table). The table needs about 680px; in a
   narrower column (phones, tablets, or beside the sidebar) each plan is a
   card instead, so no column is ever hidden. */
.mc { container: mc / inline-size; }
.mc__title { margin-bottom: 1rem; }
.mc__table-wrap { border: 1px solid var(--line); border-radius: var(--radius-lg); overflow-x: auto; background: var(--surface); }
.mc__table { width: 100%; border-collapse: collapse; font-size: 1.0625rem; }
.mc__table thead th { background: var(--black); color: #f2efe9; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; line-height: 1.05; padding: 0.85rem 0.6rem; text-align: center; vertical-align: bottom; border-bottom: 3px solid var(--gold-fill); }
.mc__table thead th:first-child { text-align: left; }
.mc__table thead th.is-top { background: linear-gradient(180deg, #3a2c0f, var(--black)); color: var(--gold-fill); }
.mc__price { display: block; margin-top: 0.3rem; font-size: 1.6rem; color: #fff; }
.mc__table thead th.is-top .mc__price { color: var(--gold-fill); }
.mc__table tbody th { text-align: left; font-weight: 600; padding: 0.75rem 0.9rem; line-height: 1.3; }
.mc__table td { text-align: center; padding: 0.75rem 0.75rem; }
.mc__table tbody tr { border-top: 1px solid var(--line-2); }
.mc__table tbody tr:nth-child(even) { background: #f7f8fa; }
.mc__table td.is-top { background: rgba(222,186,100,0.12); }
.mc__rownote { display: block; font-weight: 400; color: var(--ink-2); }
.mc__yes { font-size: 1.35rem; font-weight: 700; color: var(--ok); }
.mc__no { font-size: 1.2rem; }
.mc__note { font-weight: 700; font-size: 0.9375rem; color: var(--gold-deep); }
.mc__cards { display: none; list-style: none; gap: 0.75rem; }
.mc__card { border: 1px solid var(--line); border-top: 4px solid var(--ink); border-radius: var(--radius-lg); background: var(--surface); padding: 1rem 1.1rem; }
.mc__card.is-top { border-top-color: var(--gold-fill); background: linear-gradient(180deg, #fbf3dc 0%, #fff 40%); }
.mc__card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.4rem; margin-bottom: 0.5rem; }
.mc__card-title .mc__price { display: inline; margin: 0; color: var(--ink); font-size: 1.6rem; }
.mc__list { list-style: none; display: grid; gap: 0.45rem; font-size: 1.0625rem; line-height: 1.4; }
.mc__list > li { display: grid; grid-template-columns: 1.25em minmax(0, 1fr); column-gap: 0.4rem; align-items: start; }
.mc__tick { width: 1.1em; height: 1.1em; margin-top: 0.15em; color: var(--ok); }
@container mc (max-width: 719px) { .mc__table-wrap { display: none; } .mc__cards { display: grid; } }
/* Under the comparison: the other options from the 2026 form, a key to the
   abbreviations, and the way to buy. */
.mc__extra { margin-top: 1.25rem; display: grid; gap: 1rem; }
.mc__other { list-style: none; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.mc__other li { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 0.9rem 1.1rem; line-height: 1.5; }
.mc__other b { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; margin-bottom: 0.3rem; }
.mc__key { font-size: 1rem; color: var(--ink-2); line-height: 1.5; max-width: 70ch; }
.mc__buy { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
@media (max-width: 479px) { .mc__buy .btn { width: 100%; } }

/* Data tables converted from images (payout, ground money). */
/* Finale data tables (/finale/qualifying, /finale-info): one look for every
   table, black header with readable labels, row labels on a light band, and
   numbers centred under their headers. The title sits above the scroller so
   it is never cut. Wide tables fit the desktop column; on phones they slide
   sideways with the row labels pinned, a hint above and a fade on the right
   edge while columns are hidden (marked by src/components/finale-html.tsx). */
.table-wrap--scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.table-wrap--scroll[data-more] { -webkit-mask-image: linear-gradient(to left, transparent, #000 2.5rem); mask-image: linear-gradient(to left, transparent, #000 2.5rem); }
.prose .table-title { margin: 1rem 0 0.4rem; font-weight: 700; line-height: 1.35; color: var(--ink); }
.prose .table-hint { margin: 0 0 0.5rem; font-size: 0.9375rem; color: var(--ink-2); }
.table-hint:has(+ .table-wrap--scroll:not([data-overflow])) { display: none; }
.table--data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 1rem; }
.prose .table--data thead th { background: var(--black); color: #f2efe9; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.0625rem; line-height: 1.1; padding: 0.6rem 0.6rem; border-bottom: 3px solid var(--gold-fill); text-align: center; vertical-align: bottom; }
.prose .table--data thead th:first-child { text-align: left; }
.prose .table--data tbody th { font-family: inherit; text-transform: none; letter-spacing: 0; font-size: 1rem; line-height: 1.4; color: var(--ink); text-align: left; font-weight: 700; padding: 0.5rem 0.7rem; background: #fafafa; border-bottom: 1px solid var(--line-2); white-space: nowrap; vertical-align: middle; }
.prose .table--data td { text-align: center; padding: 0.5rem 0.5rem; border-bottom: 1px solid var(--line-2); border-left: 1px solid var(--line-2); vertical-align: middle; }
.prose .table--data tr:last-child > * { border-bottom: 0; }
/* Text tables (divisions, formats, payout scale): left-aligned, wrapping. */
.prose .table--text td { text-align: left; }
.prose .table--text thead th { text-align: left; }
.prose .table--text td.table__note { background: var(--surface-alt); color: var(--ink-2); }
/* Number tables never break a value. */
.table--payout :is(td, th), .table--ground :is(td, tbody th) { white-space: nowrap; }
.table--payout tbody tr:nth-child(even) td { background: #f7f8fa; }
.prose .table--payout thead th { white-space: normal; overflow-wrap: normal; word-break: normal; hyphens: none; padding-inline: 0.3rem; }
.prose .table--payout td { padding-inline: 0.3rem; }
.prose .table--payout tbody th { padding-inline: 0.5rem; }
.table--payout th[scope="row"] { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line); }
.table--payout thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 #3a3632; }
.table--ground { min-width: 34rem; }
.table--ground tbody { border-top: 3px solid var(--line); }
.prose .table--data .table__fee { box-sizing: border-box; width: 4.5rem; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--gold-deep); }
/* Ground money on phones: entry fee and place stay in view while the dollar
   columns slide under them. */
.table--ground tbody th { position: sticky; left: 0; z-index: 1; }
.table--ground tbody th[scope="row"] { left: 4.5rem; box-shadow: 1px 0 0 var(--line); }
.table--ground thead th:nth-child(-n+2) { position: sticky; left: 0; z-index: 2; }
.prose .table--ground thead th:first-child { box-sizing: border-box; width: 4.5rem; min-width: 4.5rem; }
.table--ground thead th:nth-child(2) { left: 4.5rem; box-shadow: 1px 0 0 #3a3632; }
.table__fee { font-family: var(--font-display); font-size: 1.35rem; color: var(--gold-deep); vertical-align: top; }
.table-note { font-size: 1rem; color: var(--ink-2); margin-top: 0.5rem; }

/* Hall of Champions year cards: wide, two across, poster on the left at a
   fixed 3:4 frame (shown whole), year and button on the right. */
/* Seasons: one per row, or three across (poster above the text) once the
   main column is 40rem wide. A last card left alone on its row spans the
   row and keeps the poster on its left, so there is never a lone card. */
.champs-grid.season-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(28%, (40rem - 100%) * 999, 100%), 1fr)); gap: 0.9rem; container-type: inline-size; }
@container (min-width: 40rem) {
  .champs-grid > .season-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
  .champs-grid .season-card.season-card:not(:last-child:nth-child(3n+1)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .champs-grid .season-card:not(:last-child:nth-child(3n+1)) .season-card__poster.season-card__poster { width: 100%; }
  .champs-grid .season-card:not(:last-child:nth-child(3n+1)) .season-card__body { align-content: start; }
}
.champs-grid .season-card { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: stretch; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.champs-grid .season-card__poster { aspect-ratio: 3 / 4; height: auto; display: grid; place-items: center; background: var(--black); padding: 0.35rem; }
.champs-grid .season-card__poster img { width: 100%; height: 100%; object-fit: contain; }
.champs-grid .season-card__poster b { font-family: var(--font-display); font-size: 2.4rem; color: var(--gold-fill); }
.champs-grid .season-card__body { align-content: center; padding: 0.9rem 1rem; gap: 0.25rem; }
.champs-grid .season-card__body > b { font-family: var(--font-display); font-weight: 700; font-size: 2rem; line-height: 1; }
.champs-grid .season-card__body > span { font-size: 1rem; color: var(--ink-2); }
.champs-grid__btn { margin-top: 0.6rem; white-space: nowrap; }
.champs-grid .season-card .season-card__poster { min-width: 0; overflow: hidden; width: 7.5rem; }
.champs-grid .season-card .season-card__body { padding: 1rem 1.1rem; }
.champs-grid .season-card .season-card__poster { position: relative; align-self: start; }
.champs-grid .season-card .season-card__poster img { position: absolute; max-width: none; max-height: none; }

/* Calendar flyers: shown whole beside the contact panel (not full width).
   Tall portrait flyers are capped in height and centred; nothing is cropped.
   On live the flyer is globalhandicaps.com/images/schedule/{eventId}.jpg,
   so every real event shows its own flyer. */
/* Opened event (like NTR): one compact panel, the flyer as a modest image on
   the left (whole, never cropped, never filling the screen), the contact and
   buttons beside it, and a "View full flyer" link for the full-size image. */
/* Phones: the flyer as a thumbnail above the contact card. From 640px it sits
   beside the card and both columns end together. A row with no flyer is the
   contact card alone (the row above already shows its name, date and place). */

.cal-row__cta { margin-top: 0.35rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2; color: var(--gold-deep); }
@media (hover: hover) { .calendar-item:hover .cal-row__cta { text-decoration: underline; } }

/* Flyer lightbox. */
.lightbox { padding: 0; border: 0; background: transparent; max-width: min(96vw, 60rem); max-height: 94vh; overflow: visible; }
.lightbox::backdrop { background: rgba(11,10,9,0.85); }
.lightbox__inner { position: relative; display: grid; gap: 0.6rem; justify-items: end; }
.lightbox__inner img { display: block; max-width: 100%; max-height: calc(94vh - 4rem); width: auto; height: auto; border-radius: var(--radius); background: var(--black); justify-self: center; }
.lightbox__close { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 3rem; padding: 0.6rem 1.2rem; border: 2px solid #fff; border-radius: var(--radius); background: var(--black); color: #fff; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.125rem; line-height: 1.05; cursor: pointer; }
.lightbox__close:focus-visible { outline: 3px solid var(--gold-fill); outline-offset: 2px; }

/* ---- Mobile and comfort pass ---------------------------------------------- */
@media (max-width: 759px) {
  .sponsors__inner { flex-direction: column; align-items: stretch; gap: 0.6rem; }
  .sponsors__row img { height: 46px; max-width: 140px; }
}

/* Concept badge: in the page footer, never floating over content. */

/* The ad never grows past its 300px size, centred (the sidebar widens with
   the text size). Stacked sidebar (under the page, below 64em): the schedule
   spans the width, two events across on tablets; the Hall of Champions card
   is centred. */
@media (max-width: 63.99em) {
  .aside { justify-items: center; gap: 1.5rem; }
  .aside > * { width: 100%; }
}
@media (min-width: 760px) and (max-width: 63.99em) { .aside .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones: the next three events, so the schedule still sits between the
   Hall of Champions card and the ad. */
@media (max-width: 759px) { .aside .event-list > li:nth-child(n+4) { display: none; } }

/* Results tables: the place or name in the first column stays on one line
   (a full-width note row may wrap). */
.table td:first-child:not([colspan]) { white-space: nowrap; }

/* Bigger, easier tap targets everywhere. */
@media (max-width: 759px) {
  .section__more { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* ---- Finale pages: one dark head, a help box at the end ------------------ */
.finale-head { color: #f2efe9; background-color: var(--black); background-image: linear-gradient(90deg, rgba(11,10,9,0.94) 0%, rgba(11,10,9,0.75) 55%, rgba(11,10,9,0.5) 100%), url(/images/finale/finale-hero-bg-960w.jpg); background-size: cover; background-position: 70% 40%; border-bottom: 3px solid var(--gold-fill); padding-block: 1.6rem 1.9rem; margin-bottom: 2rem; }
/* Phones get the 960px copy; FinaleHead preloads whichever one shows. */
.finale-head .crumbs a, .finale-head .crumbs span { color: #c9c3b9; }
.finale-head__eyebrow { margin-top: 0.6rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; color: var(--gold-fill); }
/* The chrome gradient repeats once per line (background-size = line-height),
   so a title that wraps reads as one colour on every line. */
.finale-head__title { margin-top: 0.3rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; line-height: 1.05; }
.finale-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 0; padding: 1.4rem 1.5rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius); background: var(--surface-alt); }
.finale-help__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.6rem; line-height: 1.05; }
.finale-help__sub { margin-top: 0.3rem; }
.finale-help__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.finale-faq .faq-answer { font-size: 1.05rem; line-height: 1.6; }

/* Forms: cards with a small thumbnail, purpose line and a big button. */
.forms-intro { font-size: 1.05rem; color: var(--ink-2); }
/* Two cards across only where each still has a roomy text column (main
   column 46rem and up), otherwise one per row; never three. */
.forms-grid--cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(clamp(40%, (46rem - 100%) * 999, 100%), 1fr)); gap: 0.9rem; container-type: inline-size; }
.forms-grid--cards .form-card { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); grid-template-rows: 1fr; gap: 1rem; align-items: stretch; padding: 1rem; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); }
.forms-grid--cards .form-card__thumb { display: block; align-self: start; aspect-ratio: 8.5 / 11; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface-alt); }
.forms-grid--cards .form-card__thumb img { width: 100%; height: 100%; object-fit: contain; }
.form-card__body { display: grid; gap: 0.35rem; align-content: start; }
/* Buttons line up at the foot of each card. */
.forms-grid--cards .form-card__body { display: flex; flex-direction: column; height: 100%; padding: 0; }
.form-card__group { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.8rem; color: var(--gold-deep); }
.forms-grid--cards .form-card__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; margin: 0; }
.form-card__use { color: var(--ink-2); font-size: 1.0625rem; }
.form-card__btn { justify-self: start; align-self: flex-start; max-width: 100%; margin-top: auto; white-space: nowrap; }
/* Large text: the thumbnail goes above the text once a card is too narrow
   for both side by side. */
@container (max-width: 25em) { .forms-grid--cards .form-card { grid-template-columns: 4.5rem minmax(0, 1fr); gap: 0.85rem; } }
@container (max-width: 18em) { .forms-grid--cards .form-card { grid-template-columns: minmax(0, 1fr); } .forms-grid--cards .form-card__thumb { width: min(6.5rem, 100%); } }

/* Memberships: 5 ways to join as tiles; rules and privacy expandable. */
.join__title { margin-bottom: 1rem; }
.join__grid { list-style: none; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .join__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .join__tile.is-primary { grid-column: 1 / -1; } }
.join__tile { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 0.4rem; align-content: stretch; padding: 1.1rem 1.2rem 1.2rem 4rem; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); }
.join__tile > .join__text:last-child { grid-row: span 2; }
.join__tile.is-primary { background: linear-gradient(120deg, #fbf3dc 0%, #fff 60%); border-color: var(--gold-fill); }
.join__num { position: absolute; left: 1.1rem; top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--gold-deep); }
.join__how { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.join__text { color: var(--ink-2); font-size: 1.0625rem; line-height: 1.5; }
.join__btn { justify-self: start; align-self: end; margin-top: 0.35rem; }
.join__digital { margin-top: 0.9rem; font-size: 1.0625rem; color: var(--ink-2); }
/* Large text on a narrow screen (22em is 352px at the default size, 704px
   at 200%): slimmer side padding, so a phone-number button still fits. */
@media (max-width: 22em) {
  .finale-help, .join__tile, .ls__step { padding-inline: 4vw; }
  .join__num, .ls__num { position: static; }
  .finale-help__actions .btn, .join__btn { padding-inline: 0.75rem; }
}
.more { display: grid; gap: 0.6rem; }

/* Livestream: three numbered steps. */

.ls__lede { font-size: 1.15rem; color: var(--ink-2); margin-top: 0.3rem; }
.ls__steps { list-style: none; display: grid; gap: 0.9rem; margin-top: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .ls__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ls__step { position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 1.1rem 1.2rem 1.2rem 4rem; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); }
/* The same numbered step as the Memberships "ways to join" tiles. */
.ls__num { position: absolute; left: 1.1rem; top: 1rem; font-family: var(--font-display); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--gold-deep); }
.ls__step h3 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.ls__step p { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); }
.ls__step .ls__small { font-size: 1rem; }
.ls__btn { justify-self: start; }
.forms-grid--cards .formHeader.form-card__title { padding: 0; border: 0; margin: 0; text-align: left; }

/* ---- Mobile menu (drawer): restyled for big, clear tapping --------------- */
.site-nav__caret { width: 12px; height: 12px; flex: none; }
.drawer { padding: 0.5rem var(--gutter) 2.5rem; background: var(--black); border-top: 3px solid var(--gold-fill); }
.drawer__item { border-bottom: 1px solid #2e2b28; }
.drawer__link, .drawer__summary { min-height: 3.6rem; padding: 0.6rem 0.25rem; font-size: 1.45rem; letter-spacing: 0.06em; font-weight: 700; }
.drawer__summary .site-nav__caret { width: 18px; height: 18px; color: var(--gold-fill); opacity: 1; transition: transform 0.2s; }
details[open] > .drawer__summary .site-nav__caret { transform: rotate(180deg); }
details[open] > .drawer__summary { color: var(--gold-fill); }
.drawer__sub { padding: 0 0 0.9rem; display: grid; gap: 0.15rem; }
.drawer__sub a { display: flex; align-items: center; padding: 0.5rem 1rem; border-left: 3px solid #3a3633; color: #e6e1d8; }
.drawer__sub a[aria-current="page"] { border-left-color: var(--gold-fill); color: #fff; background: #1b1916; }
@media (hover: hover) { .drawer__sub a:hover { border-left-color: var(--gold-fill); color: #fff; background: #1b1916; } }
.drawer__link:active, .drawer__summary:active, .drawer__sub a:active { background: #1b1916; color: var(--gold-fill); }
.drawer__account { flex-wrap: wrap; padding-top: 1.5rem; }
.drawer__account a, .drawer__account .btn { flex: 1 1 10rem; min-height: 3.25rem; justify-content: center; font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { .drawer__summary .site-nav__caret { transition: none; } }
/* The tapped link while its page loads: it lights up and a small spinner
   turns beside it, and the menu stays until the new page is in. */
.drawer .is-pending { color: var(--gold-fill); }
.drawer__sub a.is-pending { border-left-color: var(--gold-fill); background: #1b1916; }
.drawer .is-pending::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-left: auto; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: drawer-spin 0.7s linear infinite; }
.drawer__account .is-pending::after { margin-left: 0.6rem; }
@keyframes drawer-spin { to { transform: rotate(360deg); } }
/* Tablets: a panel at the right under the Close button, over a dimmed page,
   instead of a full-width sheet. */
.drawer-backdrop { position: fixed; inset: var(--header-h) 0 0 0; z-index: 48; background: rgba(11, 10, 9, 0.6); }
@media (min-width: 760px) {
  .drawer { left: auto; width: min(30rem, 100%); border-left: 1px solid #2e2b28; box-shadow: -18px 0 40px rgba(0, 0, 0, 0.45); }
}

/* ---- Mobile sweep fixes --------------------------------------------------- */
/* Results: the +/- sits inside each card. */
.results-item__head { padding-right: 3rem; }
.results-item .expandableCal::after, .results-item__head::after { right: 1rem; }
.results-item__toggle { width: 100%; }
/* Calendar: room between long titles and the +. */
.expandableCal { padding-right: 2.5rem; }
/* Finale schedule day pills: scroll with comfortable tap sizes on phones. */
@media (max-width: 759px) {
  .fs-jump { grid-template-columns: repeat(11, 3.25rem); gap: 0.4rem; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
/* Short pages: footer sits at the bottom of the screen. */
body { min-height: 100dvh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
li.expandableCal.results-item { padding-right: 0; }
li.expandableCal.results-item::after { top: 1rem; right: 1rem; z-index: 1; pointer-events: none; }

/* Finale day cards on phones: compact, equal height, no reserved gap.
   The swipe itself is the control; a one-line hint replaces the big buttons. */
@media (max-width: 639px) {
  .fw { padding-block: 1.5rem 1.25rem; }
  .fw__days { gap: 0.6rem; }
  .fw__date { padding: 0.4rem 0.75rem; }
  .fw__date b { font-size: 1.6rem; }
  .fw__rows { padding: 0.65rem 0.75rem 0.5rem; gap: 0.4rem; font-size: 1rem; }
  .fw__rows li { grid-template-columns: 3.1rem minmax(0, 1fr); gap: 0.4rem; }
  .fw__rows b { font-size: 1.3rem; line-height: 1; }
  .fw__more { padding: 0.5rem 0.75rem; font-size: 1rem; }
  .ds__bar { margin-bottom: 0.5rem; }
  .ds__arrows { display: none; }
  .ds__hint { font-size: 1rem; color: var(--ink-2); }
  .ds__track { padding-bottom: 0.5rem; }
  .ds::before, .ds::after { top: 2rem; bottom: 0.5rem; }
}

/* Finale schedule day picker: sticks just below the Finale tabs (56px) with
   breathing room above, on a solid background as wide as the main column
   (the day cards are no wider), so it never paints over the sidebar. A day
   picked from it lands just under it: html's scroll-padding clears the
   header and tabs, this clears the chip bar. */
.fs-jump { top: calc(var(--header-h) + 56px); padding-block: 0.75rem 0.6rem; background: var(--surface, #fff); }
.fs-day { scroll-margin-top: 5rem; }

/* /finale head facts: two labelled fact blocks under the h1 on the dark
   Finale head, with a gold rule, in the display face. */
.hub-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 0.9rem 2rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 2px solid var(--gold-fill); max-width: 40rem; }
.hub-facts li { display: grid; gap: 0.15rem; align-content: start; }
.hub-facts span { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.875rem; line-height: 1.1; color: var(--gold-fill); }
.hub-facts b { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.35rem, 2.6vw, 1.7rem); line-height: 1.05; color: #f2efe9; }

/* Footer: breathing room under the logo, no stray white band above it,
   tidier contact block and link lists with comfortable tap targets. */
.site-footer { margin-top: 0; }
.sponsors + .site-footer, .site-footer { border-top-width: 3px; }
.site-footer__brand img { display: block; margin-bottom: 1.1rem; }
.site-footer__office .tel { display: inline-flex; align-items: center; color: #fff; font-weight: 600; text-decoration: underline; text-decoration-color: var(--gold-fill); text-underline-offset: 4px; }
.site-footer ul a { display: inline-flex; align-items: center; }
main.main { padding-bottom: 3rem; }

/* ===== Typography and rhythm pass ======================================== */
/* Display text never inherits body leading (1.6). */
h1, h2, h3, h4, .eyebrow, .section-title, .display, [class*="__eyebrow"], [class*="__label"], .fs-day__title, .fw__date, .fe__label, .news-cats__title, .site-footer h2, .aside__title { line-height: 1.1; }
h1, .display, .page-head__title, .finale-head__title { line-height: 1.05; }
.prose p, .prose li { line-height: 1.6; }

/* One eyebrow style. */
.eyebrow, .form-card__group, .hn__cat, .fe__label b {
  font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; line-height: 1.15; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep);
}
.finale-head__eyebrow { font-size: 0.95rem; line-height: 1.15; letter-spacing: 0.14em; }
.fhe-narrow { display: none; }
@media (max-width: 640px) { .fhe-wide { display: none; } .fhe-narrow { display: inline; } }

/* Headings: one H1 scale, one H2 scale, balanced wrapping. */
.finale-head__title { font-size: clamp(2.6rem, 5.5vw, 4rem); letter-spacing: 0.01em; text-wrap: balance; }
.page-head__title, .display { text-wrap: balance; }
.section-title, .prose h2, .ls__title, .join__title, .mc__title, .rulebook h2.sectionTitle { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1.05; letter-spacing: 0.02em; }
.prose h3 { line-height: 1.1; }

/* Breadcrumbs never start a line with a slash; long last crumb trims. */
.crumbs li { display: inline-flex; align-items: baseline; }
@media (max-width: 640px) { .crumbs li:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .crumbs { flex-wrap: nowrap; overflow: hidden; } }

/* Even rhythm under page heads. */
.prose > :first-child, .flow > :first-child, .flow > :first-child > :first-child { margin-top: 0; }

/* Labels and metadata in the display face. */
.gb-list span { font-family: var(--font-display); letter-spacing: 0.12em; }
.contact-form__solve label { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.95rem; line-height: 1.1; color: var(--ink-2); }
.contact-form__sum { font-size: 1.15rem; color: var(--ink); }
.video-thumb__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.2rem; line-height: 1.05; }
.members-nav a.link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; color: var(--ink); display: flex; align-items: center; min-height: 2.75rem; padding: 0 0.75rem; border-left: 3px solid var(--line); }
@media (hover: hover) { .members-nav a.link:hover { border-left-color: var(--ink); text-decoration: none; } }
.members-nav a.link[aria-current="page"] { border-left-color: var(--gold-fill); text-decoration: none; color: var(--gold-deep); }

/* Section heads: a single rule, everywhere. */
.section__head { border-bottom: 0; padding-bottom: 0; }
.section__links { display: inline-flex; gap: 1.25rem; }


/* Schedule chips line up with names; add-ons intro. */
@media (max-width: 35em) { .fs-row .fs-tag { margin-left: 0; } }
.fs-intro { font-size: 1.05rem; color: var(--ink-2); }
.fs-intro a { color: var(--gold-deep); font-weight: 600; }

/* Small caps labels share one tracking. */
.fw__date, .fs-jump__chip span, .fh-count__unit span, .ue__date, .fs-day__date span { letter-spacing: 0.12em; }

/* ===== UX pass =========================================================== */
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1rem; background: var(--gold-fill); color: #1c1508; font-weight: 700; border-radius: var(--radius); text-decoration: none; }
.skip-link:focus { top: 0.75rem; }
#main:focus { outline: none; }
.icon { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.drawer__link[aria-current="page"] { color: var(--gold-fill); }
/* Hash targets clear the header and Finale tabs through html's
   scroll-padding alone; the targets add no margin of their own (the two
   add together), except a schedule day, which also clears the day chips. */
html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 4.5rem); }
/* Bigger tap targets on phones. */
.site-header__toggle { min-height: min(2.9rem, calc(var(--header-h) - 0.75rem)); justify-content: center; font-size: 1.05rem; }
@media (max-width: 759px) {
  .crumbs a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  /* Every crumb and its "/" on one centre line with the taller links. */
  .crumbs { align-items: center; }
  .crumbs li { align-items: center; }
  .crumbs li:last-child { display: block; }
  .site-footer__social img { width: 44px; height: 44px; }
  .fw__all { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .news-item .card__title a { display: inline-block; padding-block: 0.3rem; }
}
input[type="checkbox"] { width: 1.4rem; height: 1.4rem; accent-color: var(--ink); vertical-align: middle; }
/* Schedule day chips scroll with the page on phones (sticky bars ate a
   third of the screen); they stay sticky on larger screens. */
@media (max-width: 759px) { .fs-jump { position: static; } .fs-day { scroll-margin-top: 0; } }
.subnav-anchor { height: 1px; margin-bottom: -1px; }

/* UX pass: form hints, notices beside the action, calendar empty state */
.field__hint { margin: 0.35rem 0 0; font-size: 1rem; line-height: 1.4; color: var(--muted); }
.contact-form__status:empty { display: none; }
.contact-form__status { margin-top: 1rem; }
.empty p { margin: 0; }
.empty p + p { margin-top: 1rem; }
/* Contrast: the Finale XX label sits on the dark essentials bar; the
   compare-table dash and the Finale hub mark need to read clearly. */
.fe__label b { color: var(--gold-fill); margin-right: 0.5rem; }
.mc__no { color: #6b7178; }

/* Closed video dialogs stay hidden (.modal sets display:grid). */
dialog.modal:not([open]) { display: none; }
dialog.modal { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; color: inherit; }
dialog.modal::backdrop { background: transparent; }

/* ---- Dates and live states ------------------------------------------------
   One office date (src/lib/today.ts) drives the live bar, the event lists,
   the calendar and Finale hero a. The bar links any other events running
   today; hero a says what ropes today during the Finale and thanks everyone
   after it. */
.event-row .live-tag { margin-bottom: 0.25rem; }
.expandableCal .live-tag { order: -2; }
.live-bar__more { flex: none; display: inline-flex; align-items: center; min-height: 2.5rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--gold-fill); text-underline-offset: 4px; }
.live-bar.is-live .live-bar__more { color: var(--gold-fill); }
@media (hover: hover) { .live-bar__more:hover { text-decoration-thickness: 2px; } }
.live-bar__more:active { opacity: 0.7; }
/* During and after the Finale the lockup steps down at every width so the
   day's news and the buttons stay on the first screen. */
:is(.fh-a--on, .fh-a--done) .fh-lockup { width: clamp(140px, 18vw, 260px); }
.fh-now { display: grid; justify-items: center; gap: 0.6rem; max-width: 46rem; }
.fh-now__label { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.1; color: var(--fh-gold); }
.fh-now__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red-fill); animation: live-pulse 1.6s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .fh-now__dot { animation: none; } }
.fh-now__day { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3.4vw, 2.2rem); line-height: 1.05; color: var(--fh-text); }
.fh-now__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.fh-now__rows li { padding: 0.4rem 0.8rem; border: 1px solid #4a4540; border-radius: var(--radius); background: rgba(11, 10, 9, 0.6); font-size: 1.0625rem; line-height: 1.35; color: var(--fh-2); }
.fh-now__rows li.is-finale { border-color: var(--fh-gold); color: var(--fh-text); }
.fh-now__rows b { margin-right: 0.2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--fh-gold); }
.fh-now__more { font-size: 1rem; color: var(--fh-2); }
/* Phones: the day's ropings as a plain list, one line each. */
@media (max-width: 40em) {
  .fh-now__rows { flex-direction: column; align-items: center; gap: 0.2rem; }
  .fh-now__rows li { padding: 0; border: 0; background: none; }
}
.fh-now__text { max-width: 38ch; font-size: 1.0625rem; line-height: 1.5; color: var(--fh-2); }

/* ---- Finale content: past-Finale notes, flyer pages, the /finale hub -----
   Copy carried over from a past Finale is labelled where it sits
   (src/components/past-notice.tsx); pages that are all past say so in the
   head's eyebrow. Near-empty live pages get one plain next step
   (src/components/next-steps.tsx). */
.finale-head__eyebrow--past::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem; margin-right: 0.55rem; border-radius: 50%; background: var(--steel); vertical-align: 0.1em; }

/* Flyer pages: what is current as text, the old flyer as a thumbnail beside it. */
.past-flyer__now { display: grid; gap: 0.75rem; align-content: start; font-size: 1.0625rem; line-height: 1.55; max-width: var(--measure); }
.past-flyer__now p { margin: 0; }
.past-flyer__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.05; letter-spacing: 0.02em; }
.past-flyer__day { display: grid; gap: 0.6rem; justify-items: start; padding: 1rem 1.1rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--radius); background: var(--surface); }
.past-flyer__date { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.25rem; line-height: 1.1; }
.past-flyer__day ul { list-style: none; display: grid; gap: 0.35rem; margin: 0; padding: 0; }
.past-flyer__day li { display: flex; align-items: baseline; gap: 0.6rem; }
.past-flyer__day li b { flex: none; min-width: 2.75rem; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--gold-deep); }

/* Next step on near-empty pages. */
.next-steps { display: grid; gap: 1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--surface); max-width: 46rem; }
.next-steps__text { display: grid; gap: 0.75rem; font-size: 1.0625rem; line-height: 1.55; }
.next-steps__text p { margin: 0; }
.next-steps__text a:not(.btn) { color: var(--gold-deep); font-weight: 600; text-underline-offset: 3px; }
.next-steps__links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; }

/* /finale: the day-by-day cards and the essentials in the main column. */
.fw--col { padding: 0; background: none; border: 0; }
.fw--col .ds::before { background: linear-gradient(90deg, var(--paper), transparent); }
.fw--col .ds::after { background: linear-gradient(270deg, var(--paper), transparent); }
.fe--col { border: 0; border-radius: var(--radius-lg); }
.fe--col .fe__inner { gap: 0.9rem; padding: 1.1rem; }
.fe__heading { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(1.75rem, 3vw, 2rem); line-height: 1; letter-spacing: 0.02em; color: #fff; }

/* One form card on its own (the Legacy page). */
.forms-grid--single { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin-top: 1rem; }
.forms-grid--single .form-card__title { padding: 0; border: 0; }
@media (min-width: 56.25em) { .forms-grid--single { grid-template-columns: minmax(0, 1fr); } }
.finale-vsv { display: grid; gap: 1.25rem; }

/* High-contrast mode: the white Ariat wordmark in the logo keeps its black plate. */
@media (forced-colors: active) { .site-header__logo { forced-color-adjust: none; background: #000; border-radius: var(--radius); } }

/* ---- Header, menus, Finale tabs, event bar, footer (chrome pass) ---------
   Navigation feedback, landscape phones, tap-to-call and tap targets. The
   header, drawer, tab bar and event bar rules themselves are edited in
   place above. */
/* A slim gold bar along the top while a slow page loads
   (src/components/nav-progress.tsx). */
.nav-progress { position: fixed; top: 0; left: 0; z-index: 200; width: 100%; height: 3px; background: var(--gold-fill); box-shadow: 0 0 6px rgba(222, 186, 100, 0.7); transform: scaleX(0); transform-origin: left; opacity: 0; pointer-events: none; }
.nav-progress.is-loading { opacity: 1; transform: scaleX(0.85); transition: transform 8s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.15s; }
/* Pressed feedback on touch, outside any hover query, so a tap shows at once. */
:is(.ue__card, .hn__card, .fw__link, .event-row, .result-card, .RopingLink, .calendar-item, .last-finale,
.news-item, .saddles__item, .fs-jump__chip, .sponsor-grid a):active { border-color: var(--ink); background-color: var(--pressed); }
:is(.video-thumb, .news-item__media, .form-card__thumb):active { opacity: 0.85; }
.site-footer a:active { color: #fff; }
/* Landscape phones: only the header stays pinned, so the Finale tabs do not
   take a third of the screen. */
@media (max-height: 500px) {
  .subnav { position: static; }
  html:has(.subnav) { scroll-padding-top: calc(var(--header-h) + 12px); }
  .fs-jump { top: var(--header-h); }
}
/* Phone numbers never break across lines; every office number is a link. A
   call button may wrap after "Call", never inside the number (.nowrap). */
a[href^="tel:"]:not(.btn) { white-space: nowrap; }
.btn:has(.nowrap) { flex-wrap: wrap; gap: 0.15rem 0.3em; max-width: 100%; }
/* Comfortable targets for small links that stand alone. */
.auth__links a { display: inline-flex; align-items: center; min-height: 2.75rem; }
blockquote > p > a:only-child { display: inline-flex; align-items: center; min-height: 2.75rem; }

/* ---- Two-column pages: sidebar, full-width foot, narrow main column ------
   The breakpoint, sidebar, ad, Hall of Champions card, partner and sponsor
   strip rules are edited in place above. */
.two-col__foot { margin-top: var(--s5); }
/* Calendar filters: while the main column is under about 760px (just past
   720px, and beside the sidebar up to 1140px) four fields in a row clip the
   longest choices, so Series and State share the first row, Keyword and
   Search the second. */
@media (min-width: 720px) and (max-width: 799px), (min-width: 64em) and (max-width: 1139px) {
  .filter-bar { grid-template-columns: 1fr 1fr; }
}

/* ---- Type, forms and focus ------------------------------------------------
   Sizes are in rem so the visitor's text-size setting is respected; the size
   floors are set in place above (body 1.0625rem, labels 0.875rem and up,
   fields 16px and up, prose lines no longer than --measure). This block adds
   the gold focus ring on dark surfaces and the wrapping rules. */
.site-header, .drawer, .site-footer, .live-bar.is-live, .finale-head, .fhero, .fe, .modal { --focus: var(--gold-fill); }
.site-nav__menu { --focus: var(--accent); }
/* Headings and names wrap to even lines; paragraphs avoid a one-word last
   line. Dates, places and office hours are kept whole with no-break spaces
   (src/lib/format.ts) or .nowrap. */
h1, h2, h3, h4, summary, .card__title, .event-row__name, .ue__name, .hn__title, .video-thumb__title,
.fe__item b, .week-info__link b, .join__how, .champ__roping, .result-card__name, .faq-question, .accordion-header { text-wrap: balance; }
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
.nowrap { white-space: nowrap; }

/* ---- Home page polish -------------------------------------------------------
   The hero, day row, news, Empty Saddles and video rules are edited in place
   above. This adds the directions link on the Finale pages. */

/* ---- Events: calendar, results, photo galleries ----------------------------
   The opened calendar row, .facts buttons, month headings, photo viewer and
   tile credits are edited in place above. */
/* Calendar: on phones the filters fold behind one button (calendar-filters.tsx). */
.filter-fold__btn { display: none; }
@media (max-width: 639px) {
  .filter-fold__btn { display: flex; width: 100%; margin-bottom: 1rem; }
  .filter-fold:not(.is-open) .filter-bar { display: none; }
}
.cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 0.5rem; }
.cal-head__title { font-size: 1.25rem; line-height: 1.2; letter-spacing: 0.02em; }
.cal-head__all { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 600; color: var(--gold-deep); text-underline-offset: 3px; }
/* The Finale XX row: a gold edge and a label, so it stands out in the list. */
.calendar-item--finale { border-left: 6px solid var(--gold-fill); }
.cal-row__chip { order: -2; justify-self: start; margin-bottom: 0.25rem; }
/* Flyer lightbox on a landscape phone: the flyer fills the width and the
   dialog scrolls, with Close kept in view. */
@media (max-height: 500px) {
  .lightbox { max-height: 100dvh; overflow-y: auto; }
  .lightbox__inner img { max-height: none; width: min(100%, 36rem); }
  .lightbox__close { position: sticky; top: 0; z-index: 1; }
}

/* Results: a heading per year, the roping named above its placings, steady
   column widths from table to table, the place pinned while the table slides
   sideways on phones, and the way back at the end too. */
.results-year + .results-year { margin-top: 1.75rem; }
.results-year__title { margin-bottom: 0.6rem; padding-bottom: 0.35rem; border-bottom: 2px solid var(--ink); font-size: 1.5rem; line-height: 1.1; }
.placings__title { font-size: 1.5rem; line-height: 1.15; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; }
.placings__amount { font-size: 1.25rem; color: var(--accent-deep); font-variant-numeric: tabular-nums; }
.placings .resultType { margin-bottom: 0.35rem; }
.placings .table-hint { margin: 0 0 0.5rem; font-size: 1rem; color: var(--ink-2); }
.placings .table { table-layout: fixed; width: 100%; min-width: 36rem; }
.placings .table th { position: static; }
.placings th:first-child, .placings td.place { width: 3.5rem; position: sticky; left: 0; z-index: 1; background: var(--surface); }
.placings th:first-child { background: var(--surface-2); }
.placings th.num, .placings td.num { width: 7.5rem; }
.placings th:nth-child(3) { width: 6.5rem; }
.placings .team span, .placings .hometown { font-size: 1rem; }
.placings .small { font-size: 0.9375rem; }
.placings__back-end { margin-top: -0.5rem; }
.placings .table-wrap--scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Location and payout labels line up from card to card. */
@media (min-width: 640px) {
  .results-item__head .gb-list { grid-template-columns: auto auto; column-gap: 0.6rem; row-gap: 0.2rem; align-items: baseline; }
  .results-item__head .gb-list li { display: contents; }
  .results-item__head .gb-list span { text-align: right; margin-right: 0; }
}

/* Photo galleries: with no gallery chosen, every gallery as a cover card. */
.gallery-select label { display: block; }
.gallery-cards { list-style: none; padding: 0; display: grid; gap: 1rem; }
.gallery-card { display: grid; height: 100%; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--lift); }
.gallery-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--surface-2); }
.gallery-card__body { display: grid; gap: 0.25rem; align-content: start; padding: 0.8rem 1rem 1rem; }
.gallery-card__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.35rem; line-height: 1.1; }
.gallery-card__meta { color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
.gallery-card:not(:has(img)) { grid-template-rows: 1fr; border-left: 4px solid var(--gold-fill); }
.gallery-card__cue { margin-top: 0.35rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-deep); }
@media (hover: hover) { .gallery-card:hover { border-color: var(--ink); box-shadow: var(--shadow); } }
.gallery-card:active { border-color: var(--ink); background-color: var(--pressed); }

/* ---- News, contact, sponsors, error pages, video dialog --------------------
   The article picture, video dialog, field alignment, category row, sponsor
   grid and error page rules are edited in place above. */
/* The category over a card's or story's headline. */
.news-tag { margin: 0 0 0.3rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; line-height: 1.2; color: var(--gold-deep); }
.news-more { display: flex; justify-content: center; margin-top: 1.5rem; }
.news-more__btn { min-height: 3rem; width: min(100%, 22rem); }
.news-more__count { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; }
/* Article: the way back at the top and the bottom, and Previous / Next as
   large cards that name the story they lead to. */
.news-back { display: inline-flex; align-items: center; min-height: 2.75rem; margin-bottom: 0.5rem; font-weight: 600; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-fill); text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { .news-back:hover { color: var(--accent-deep); } }
.news-back:active { color: var(--accent-deep); }
.news-back-btn { margin-top: 1.5rem; min-height: 3rem; }
.news-pager__link { display: grid; align-content: start; gap: 0.3rem; min-height: 4.5rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.news-pager__link--next { text-align: right; }
.news-pager__dir { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.875rem; line-height: 1.2; color: var(--ink-2); }
.news-pager__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.125rem; line-height: 1.15; text-wrap: balance; }
@media (hover: hover) { .news-pager__link:hover { border-color: var(--ink); box-shadow: var(--shadow); } }
.news-pager__link:active { border-color: var(--ink); background-color: var(--pressed); }
@media (max-width: 479px) { .news-pager { grid-template-columns: minmax(0, 1fr); } .news-pager > span:empty { display: none; } .news-pager__link--next { text-align: left; } }
/* An unknown story or category. */
.news-missing { display: grid; gap: 1rem; justify-items: start; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-2); }
.news-missing__title { font-size: 1.6rem; line-height: 1.15; }
.news-missing p { margin: 0; }
.news-missing__list { display: grid; gap: 0.6rem; padding-left: 1.25rem; }
.news-missing__list a { font-weight: 600; color: var(--ink); text-underline-offset: 3px; }
.news-missing__date { color: var(--ink-2); white-space: nowrap; }
.news-missing .btn { min-height: 3rem; }
/* Contact: the office's ways in, the per-field limits and the sum check. */
.contact-facts a { color: inherit; font-weight: 600; text-underline-offset: 3px; }
.contact-facts address { font-style: normal; }
.field__error { margin: 0.25rem 0 0; color: var(--red-deep); font-weight: 600; }
/* American Rodeo: one line saying what the videos are. */
/* About: the history ends on this year's Finale. */
.about-now { margin-top: 1.5rem; padding: 1rem 1.25rem; border-left: 4px solid var(--gold-fill); background: var(--gold-soft); font-weight: 500; }
.about-now a { font-weight: 700; color: var(--ink); text-underline-offset: 3px; }

/* ---- Print ------------------------------------------------------------------
   Screen-only bits first, then the paper layout. On paper: no header, live
   bar, Finale tabs, sidebar, sponsors, footer, ads or on-screen controls;
   nothing sticky; one column; black text on white whether or not the browser
   prints backgrounds; closed panels open; cards, rows and fee groups kept on
   one page; addresses printed after the links a printout needs. */
.print-only { display: none; }

@media print {
  @page { margin: 0.5in; }
  html { font-size: 15px; scroll-padding-top: 0; }
  body { display: block; min-height: 0; overflow: visible; line-height: 1.45; }

  /* Ink only: no panels, shadows or clipped gradient text. Card art keeps its picture. */
  *, *::before, *::after { background-color: transparent !important; color: #000 !important; -webkit-text-fill-color: #000 !important; text-shadow: none !important; box-shadow: none !important; filter: none !important; animation: none !important; transition: none !important; }
  *:not(.member-card), *::before, *::after { background-image: none !important; }
  :where(.finale-head, .fhero, .fs-day__date, .fw__date, .prose .table--data thead th) { border-color: #000 !important; }
  .fs-day__date { border-right: 2pt solid #000 !important; }
  html.motion .reveal { opacity: 1; transform: none; }

  /* Chrome, ads and controls that mean nothing on paper. */
  .site-header, .nav-progress, .drawer, .live-bar, .subnav, .subnav-anchor, .crumbs, .aside, .two-col > aside, .sponsors, .site-footer, .modal, .skip-link, .fs-jump, .ds__bar, .ds__hint, .ds__arrows, .fw__more, .fh-count, .fh-ambient, .fh-photo, .fh-actions, .video-swiper, section[aria-labelledby="videos-title"], .filter-fold, #calendarFilters, .cal-row__cta, .flyer-thumb__cta, .jump, .rule-tools, .acc-close, .acc-icon, .RopingLink2, .placings__back-end, .members-nav, .members-season, form.contact-form { display: none !important; }
  .print-only { display: block !important; }
  .expandableCal::after, .rulebook p.ruleHeader::after, .more__item > summary::after { content: none !important; }

  /* Nothing sticky or fixed, and no scroll boxes: paper has no scrollbar. */
  .month__head, .table th, .prose .table--payout :is(th[scope="row"], thead th:first-child) { position: static !important; }
  .table-wrap, .table-wrap--scroll, .mc__table-wrap, .fs-day, .card, .fhero, .ds__track, .video-strip { overflow: visible !important; }
  .table-wrap, .mc__table-wrap { border: 0; }

  /* One column, block flow, so page breaks can fall between cards. */
  .two-col, .flow, .fs, .fs-days, .members-layout, .finale-faq, .finale-topics { display: block !important; }
  .flow > * + *, .fs > * + *, .fs-day + .fs-day, .finale-faq > * + *, .finale-topics > * + * { margin-top: 0.8rem; }
  .container { max-width: none; padding-inline: 0; }
  .section { padding-block: 0.5rem; }
  .site-footer, .main { margin: 0; }

  /* Page heads: plain titles. */
  .finale-head, .page-head { padding-block: 0 0.5rem !important; border-bottom: 2pt solid #000; margin-bottom: 0.75rem; min-height: 0 !important; }
  .finale-head__title { font-size: 24pt !important; line-height: 1.1; }
  .finale-head__eyebrow { margin-top: 0 !important; }
  body:has(.print-head) .finale-head__eyebrow { display: none; }

  /* Closed panels print open: FAQ answers, Finale topics, rules, <details>. */
  :is(.accordion-content, .faq-answer, .finale-topic .detail, .rulebook div.content)[hidden] { display: block !important; content-visibility: visible !important; }
  details::details-content { content-visibility: visible !important; display: block !important; }
  .finale-faq .faq-question, .finale-topic__head button, .accordion-header { padding-right: 0 !important; min-height: 0 !important; }

  /* Keep things whole and headings with what follows. */
  .fs-day, .fw__day, .ue__card, .card, .form-card, .hn__card, .btn, figure, .flyer-thumb, .finale-help, .placings__group .table-hint, .event-row, tr, img { break-inside: avoid; }
  .prose .table--ground tbody { break-inside: avoid; }
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  h2, h3, h4, caption, .fs-day__title, .faq-question, .finale-topic__head, .accordion-header, .finale-faq__group, .resultType, .month__head, .rulebook p.ruleHeader, .prose .table-title, .print-head { break-after: avoid; }
  p, li, dd { orphans: 3; widows: 3; }

  /* A readable paper scale: body about 11-12pt, labels at least 9.5pt. */
  .fs-tag, .fs-day__date span, .eventDay, .crumbs, .small, .muted, .hometown, .table th, .prose .table--data th, .fw__date span, .placings .team span { font-size: max(9.5pt, 0.75rem) !important; }
  .fs-tag { border: 1px solid #000 !important; }

  /* Finale schedule: a plain title block over day cards. */
  .print-head { border: 2pt solid #000; padding: 0.5rem 0.75rem; }
  .print-head p { font-size: 11pt; line-height: 1.35; }
  .print-head .print-head__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 20pt; line-height: 1.05; }
  .print-head .print-head__when { font-weight: 700; font-size: 13pt; }
  .fs-day { border: 1px solid #000; }
  .fs-row { padding-block: 0.3rem; }

  /* Home: the Finale days as a grid, not a sideways scroller. */
  .fhero { border-bottom: 2pt solid #000; }
  .fhero .fh-lockup { width: 140px; }
  .fw__days { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-columns: auto; width: auto; }
  .ds__track { margin: 0; padding: 0; }

  /* Wide tables fit the page: all 20 payout places on Letter. */
  .prose .table--payout { width: 100% !important; min-width: 0 !important; table-layout: fixed; font-size: 9.5pt; }
  .prose .table--payout th, .prose .table--payout td { padding: 2pt 1pt !important; white-space: normal !important; min-width: 0 !important; }
  .placings .table, .table { min-width: 0 !important; }

  /* Maps and flyers: one page, whole. */
  .flyer-thumb img { width: auto !important; max-width: 100%; max-height: 7in; margin-inline: auto; display: block; }

  /* Member reports: whose, when, and the total. */

  /* Where the important links go: PDFs, buying online, outside sites. */
  main a.btn[href$=".pdf"]::after, main a.join__btn[href^="/"]::after, main a.btn[href^="/Members/Membership" i]::after { content: " wstroping.com" attr(href); }
  main a.btn[href^="http"]::after, main .prose a[href^="http"]::after { content: " (" attr(href) ")"; }
  main a.btn[href$=".pdf"]::after, main a.join__btn[href^="/"]::after, main a.btn[href^="/Members/Membership" i]::after, main a.btn[href^="http"]::after { display: block; flex-basis: 100%; min-width: 0; font-family: var(--font-sans); font-weight: 400; font-size: 9.5pt; line-height: 1.3; letter-spacing: 0; text-transform: none; white-space: normal; overflow-wrap: anywhere; }
  /* An address after a link in a sentence stays in the sentence. */
  main .prose a[href^="http"]::after { display: inline; font-size: 9.5pt; overflow-wrap: anywhere; }
  main a[href^="tel:"]::after, main a[href^="mailto:"]::after { content: none; }
  .btn { min-height: 0; height: auto !important; max-width: 100%; padding: 0.2rem 0.5rem; border: 1px solid #000 !important; flex-wrap: wrap; white-space: normal; }
  .print-brand { font-size: 9.5pt; border-bottom: 1px solid #000; padding-bottom: 0.25rem; margin-bottom: 0.5rem; }
}

/* Ivory hero (?hero=d): the default hero on a light, misty ground with soft
   gold type, a gold glow behind the lockup and a giant ghost word, for the
   twentieth. The essentials bar under it turns light to match. */
/* One column (phones, tablets): the ghost word sits behind the lockup, not the dates. */

/* Headline-font preview (?font=tungsten | roboto, see font-preview.tsx). The
   default, Barlow Condensed, is wider than Tungsten, so the extra
   letter-spacing Tungsten needed is dropped from big headline and menu text. */
html[data-font="tungsten"] { --font-display: "Tungsten", "Tungsten Fallback", "Arial Narrow", Impact, sans-serif; }
html[data-font="roboto"] { --font-display: var(--font-roboto-c), "Arial Narrow", sans-serif; }
html:not([data-font="tungsten"]) :is(h1, h2, h3, .display, .section-title, .fh-date, .fe__item b, .fw__title, .site-nav a, .site-nav button, .subnav a, .btn) { letter-spacing: 0; }

/* ---- Light heads (owner's call: a clean, light look everywhere but the dark
   home hero, in silver and white rather than gold). Page heads and Finale
   heads are the brushed-silver gradient with fine diagonal lines the owner
   liked. Gold stays an accent (eyebrows, rules); day labels stay black. ---- */
.page-head, .finale-head { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); border-bottom: 1px solid var(--silver-line);
  background-color: #e6e8ec;
  background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f8f9fa 0%, #e8eaee 50%, #d3d7dd 100%); }
@media (min-width: 48em) { .finale-head { background-image:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #f8f9fa 0%, #e8eaee 50%, #d3d7dd 100%); } }
.finale-head .crumbs a, .finale-head .crumbs span, .page-head .crumbs a, .page-head .crumbs span { color: var(--ink-2); }
.finale-head .crumbs li + li::before { color: var(--steel); }
.finale-head__eyebrow, .page-head .eyebrow { color: var(--accent-deep); letter-spacing: 0.26em; font-weight: 500; }
.finale-head__eyebrow--past { color: var(--ink-2); }
.finale-head__title { background: linear-gradient(180deg, #3a3d42 0%, #0f1012 55%, #4a4e55 100%) 0 0 / 100% 1.05em repeat-y; -webkit-background-clip: text; background-clip: text; color: transparent; }
.page-head__title { color: var(--ink); }
.page-head__title::after, .finale-head__title::after { content: ""; display: block; margin-top: 0.85rem; }
.finale-head, .page-head { --focus: var(--accent); }
.finale-head .btn--outline-light { border-color: var(--ink); color: var(--ink); background: transparent; }
@media (hover: hover) { .finale-head .btn--outline-light:hover { background: var(--ink); color: #fff; } }
.finale-head__title:has(+ .hub-facts)::after { display: none; }

/* Opened calendar event: one compact row (owner's call) — a small flyer that
   opens the full flyer, then View flyer / Share and any event links. */
.cal-actions__btns { flex: 1 1 16rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cal-actions__btns .btn { flex: 0 1 auto; }
.cal-actions__note { flex: 1 1 100%; margin: 0; color: var(--ink-2); }
@media (max-width: 479px) {
  .cal-actions__btns { flex: 1 1 0; min-width: 0; flex-direction: column; }
  .cal-actions__btns .btn { width: 100%; }
}

/* Brushed silver with fine diagonal lines (the page-head finish) on every
   silver band: the home "day by day" section, the event bar, the sponsor
   strip and the Finale help box. */
:root { --brushed: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 1px, transparent 1px 7px), linear-gradient(180deg, #f8f9fa 0%, #e8eaee 50%, #d3d7dd 100%); }
.fw, .sponsors, .finale-help { background-color: #e6e8ec; background-image: var(--brushed); }
/* The event bar: a plain light gradient, no brushed lines, so it reads as
   its own strip beside both the dark home hero and the brushed page heads. */
.live-bar:not(.is-live) { background-color: #f4f5f7; background-image: linear-gradient(180deg, #ffffff 0%, #eef0f3 100%); border-bottom: 1px solid var(--line); }

/* Finale event pages built from one flyer (/finale/rope-horse-rewards, /finale/riata-vegas,
   /finale/horse-sale, /finale/outdoor). */
.ev__note { margin: 0; color: var(--ink-2); font-size: 1rem; }
.ev__list { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.3rem; }
.ev__books { display: grid; margin: 0; padding: 0; list-style: none; }
.ev__books li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.75rem; }
@media (max-width: 30em) { .ev__books li { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.fs-row__link { text-decoration-color: var(--gold-fill); text-underline-offset: 3px; }
.fs-row__link:hover { text-decoration-thickness: 2px; }
.fs-row__terms { display: block; margin-top: 0.25rem; color: var(--ink-2); font-size: 0.975rem; line-height: 1.4; }
/* Password reset: email or text message (live, Oct 2026). */
.field[hidden] { display: none; }
@media (max-width: 639px) { .ev .flyer-thumb { order: -1; max-width: 10rem; } }

/* Titles in Druk Wide (owner's choice, Oct 6, 2026): Bold for main titles,
   Medium for lower titles. Druk Wide is about twice as wide as Barlow
   Condensed, so sizes are set here, smaller, and letter-spacing is 0.
   ?font=barlow|tungsten|roboto previews the old title fonts (font-preview.tsx). */
:root { --font-title: var(--font-druk), "Arial Black", sans-serif; }
html[data-font] { --font-title: var(--font-display); }
:is(.display, .page-head__title, .finale-head__title, .section-title, .prose h2, .ls__title, .join__title, .mc__title, .rulebook h2.sectionTitle, .fe__heading, .past-flyer__title, .fh-date) { font-family: var(--font-title); font-weight: 700; letter-spacing: 0; }
:is(.card__title, .fs-day__title, .past-flyer__date, .prose h3, .promo__title, .hn__title, .result-card__name, .month__head, .aside__title, .modal__title) { font-family: var(--font-title); font-weight: 500; letter-spacing: 0; }
html:not([data-font]) :is(.page-head__title, .finale-head__title, .display) { font-size: clamp(1.55rem, 3.6vw, 2.5rem); line-height: 1.12; }
html:not([data-font]) :is(.section-title, .prose h2, .ls__title, .join__title, .mc__title, .rulebook h2.sectionTitle, .fe__heading, .past-flyer__title) { font-size: clamp(1.2rem, 2.2vw, 1.45rem); line-height: 1.15; }
html:not([data-font]) .fh-date { font-size: clamp(1.5rem, 3.2vw, 2.2rem); line-height: 1.1; }
html:not([data-font]) :is(.card__title, .promo__title, .month__head) { font-size: 1.05rem; line-height: 1.2; }
html:not([data-font]) :is(.fs-day__title, .past-flyer__date, .prose h3, .hn__title, .result-card__name, .aside__title, .modal__title) { font-size: 0.98rem; line-height: 1.25; }
/* Agency FB Bold (owner's, Oct 6, 2026) for nav links and event names: a
   narrower title face that fits where Druk Wide would not. */
:root { --font-nav: var(--font-agency), var(--font-display); }
html[data-font] { --font-nav: var(--font-display); }
:is(.site-nav__link, .drawer__link, .drawer__summary, .subnav a, .event-row__name, .ue__name, .live-bar__event, .cal-head__title, .aside__hoc b) { font-family: var(--font-nav); font-weight: 700; }
html:not([data-font]) :is(.site-nav__link, .subnav a) { font-size: 1.15rem; letter-spacing: 0.03em; }
html:not([data-font]) :is(.drawer__link, .drawer__summary) { font-size: 1.25rem; letter-spacing: 0.03em; }
html:not([data-font]) :is(.event-row__name, .ue__name, .cal-head__title) { font-size: 1.4rem; line-height: 1.1; letter-spacing: 0.01em; }
html:not([data-font]) .live-bar__event { letter-spacing: 0.02em; }
html:not([data-font]) .fh-date { text-wrap: balance; }
html[data-font="barlow"] { --font-display: var(--font-barlow), "Arial Narrow", sans-serif; }
/* Bebas Neue is one bold weight and runs a little narrow: labels get a touch
   more size and spacing than Barlow had. */
html:not([data-font]) :is(.eyebrow, .section__more, .btn, .chip, [class*="__eyebrow"], [class*="__label"]) { letter-spacing: 0.06em; }
html:not([data-font]) :is(.btn) { font-size: 1.2rem; }
/* Phones: flyers at the full width of the screen, not a thumbnail. */
@media (max-width: 639px) {
  .flyer-thumb, .ev .flyer-thumb { max-width: none; width: 100%; justify-self: stretch; justify-items: stretch; }
  .flyer-thumb__btn img { max-height: none; }
  .flyer-thumb figcaption { text-align: center; }
}

/* Event cards (sidebar, home "Upcoming events", calendar), Oct 6 owner pass:
   a solid date tile; the event name, then who produces it; the dates; the
   city and state in bold gold so they never read like the venue; the venue
   quieter underneath. Gold text is #87650f (5.4:1 on white). */
:root { --gold-text: #87650f; }
.event-row__date, .ue__date { display: grid; justify-items: center; align-content: start; gap: 0.05rem; padding: 0.45rem 0.2rem 0.5rem; border-top: 0; border-radius: var(--radius); background: var(--black); color: #fff; box-shadow: inset 0 -3px 0 var(--gold-fill); }
.event-row__day, .ue__date span:first-child { color: var(--gold-fill); }
.event-row__num, .ue__date b { color: #fff; }
.event-row__mon, .ue__date span:last-child { color: #d9dce1; }
.calendar-item .eventDate:has(.event-row__num) { display: grid; justify-items: center; }
.event-row__city, .ue__city { display: block; font-weight: 700; color: var(--gold-text); text-transform: uppercase; }
.event-row__venue, .ue__venue { display: block; overflow-wrap: break-word; }
.event-row__dates, .ue__when { color: var(--ink); font-weight: 700; }
.ue__card, a.event-row { transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.ue__card:hover, a.event-row:hover { border-color: var(--gold-fill); box-shadow: 0 6px 18px rgba(15, 16, 18, 0.1); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .ue__card:hover, a.event-row:hover { transform: none; } }
.ue__date { width: 3.4rem; }
/* "Also at Finale XX": a solid bar, readable over the brushed band. */

/* Copy that is not a title is Gotham (owner, Oct 6): form labels, table
   headers, definition terms, captions and file sizes. */
html:not([data-font]) :is(label, .field__label, .field label, th, .table th, .prose table th, dt, .facts__item b, figcaption, .form-card__size) { font-family: "Gotham", system-ui, sans-serif; font-weight: 700; letter-spacing: 0.02em; }
html:not([data-font]) :is(th, .table th, .prose table th, dt, .facts__item b, figcaption, .form-card__size) { font-size: 0.875rem; }
html:not([data-font]) :is(label, .field__label, .field label) { font-size: 0.95rem; text-transform: none; }
html:not([data-font]) .ue__name { font-size: 1.35rem; line-height: 1.1; }
.ue__date, .event-row__date { align-self: start; }
/* Header dropdowns: the same Agency caps as the bar above, on the header's
   black, with a gold rule and gold hover (owner, Oct 6). */
@media (min-width: 64em) {
  .site-nav__menu { background: #0f1012; color: #fff; border-top: 3px solid var(--gold-fill); padding: 0.35rem 0; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); }
  .site-nav__menu a { font-family: var(--font-nav); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.2rem; line-height: 1.2; color: #fff; padding: 0.65rem 1.5rem 0.65rem 1.2rem; }
  .site-nav__menu a:hover, .site-nav__menu a:focus-visible { background: #1d1f23; color: var(--gold-fill); box-shadow: inset 3px 0 0 var(--gold-fill); }
  .site-nav__menu a[aria-current="page"] { background: #1d1f23; color: var(--gold-fill); box-shadow: inset 3px 0 0 var(--gold-fill); }
  .site-nav__menu a:active { background: #26292e; }
  .site-nav__menu { --focus: var(--gold-fill); }
}

/* Line height for Gotham (owner, Oct 6): Gotham is tall and wide, so 1.6
   left gaps between lines. General copy 1.45, short copy on cards and lists
   1.35, long reading paragraphs 1.55. */
body { line-height: 1.45; }
.prose p, .prose li, .finale-faq .faq-answer, .article__body p { line-height: 1.55; }
:is(.fs-where, .fs-key, .mc__other li, .mc__key, .join__text, .ls__step p, .fh-now__text, .notice, .notice--past, .past-flyer__now, .next-steps__text, .site-footer__office, .lede, .fs-intro, .fs-note) { line-height: 1.45; }
:is(.form-card__use, .field__hint, .event-row__venue, .ue__venue, .event-row__by, .ue__by, .ev__terms, .ev__note, .fs-row__terms, .fw__closes, .hn__date, .article-card__teaser, .finale-help__sub, .fe__item span, .week-info__link span, .gallery-card__meta, .video-thumb__date, .result-card__meta, .promo__sub, .aside__hoc span, td, .table td) { line-height: 1.35; }

/* Featured partner band (Holiday Auto, owner Oct 6): full width, dark, the
   banner large beside its offers and one big button. */
.pfeat { background: radial-gradient(120% 140% at 20% 0%, #3a2410 0%, #17110b 45%, #0f1012 100%); color: #fff; padding: clamp(1.75rem, 4vw, 3rem) 0; border-top: 3px solid var(--gold-fill); border-bottom: 3px solid var(--gold-fill); margin-top: 2rem; }
.pfeat__inner { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center; }
.pfeat__media { display: block; border-radius: var(--radius-lg); overflow: hidden; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); outline-offset: 4px; }
.pfeat__media img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; transition: transform 0.3s; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .pfeat__media:hover img { transform: scale(1.02); } }
.pfeat__body { display: grid; gap: 0.9rem; justify-items: start; }
.pfeat__eyebrow { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 1rem; color: var(--gold-fill); }
.pfeat__title { margin: 0; font-family: var(--font-title); font-weight: 700; text-transform: uppercase; line-height: 1.12; color: #fff; }
.pfeat__points { margin: 0; padding: 0; list-style: none; display: grid; color: #e6e7ea; }
.pfeat__points li { position: relative; }
.pfeat__points li::before { content: ""; position: absolute; left: 0; border-radius: 2px; background: var(--gold-fill); transform: rotate(45deg); }
.pfeat__btn { min-height: 3.4rem; padding-inline: 1.6rem; font-size: 1.3rem; }
/* Event ticker above the header (owner, Oct 6): a slim strip, smaller text,
   no Full calendar button. */
.live-bar__inner { padding-block: 0.3rem; gap: 0.3rem 0.85rem; font-size: 0.9rem; }
html:not([data-font]) .live-bar__event, .live-bar__event { font-size: 1.05rem; letter-spacing: 0.03em; text-underline-offset: 3px; }
.live-bar__badge { font-size: 0.85rem; }
.live-bar__btn { min-height: 2.25rem; padding: 0.2rem 0.75rem; font-size: 0.95rem; }
/* Ticker in black, like EQN Sports' (owner, Oct 6): grey rule under it, gold
   label, white event name with an arrow, silver details. The live state keeps
   its red badge. */
.live-bar, .live-bar:not(.is-live), .live-bar.is-live { background: #0b0c0d; background-image: none; color: #fff; border-bottom: 1px solid #3a3d42; }
.live-bar .live-bar__badge { color: var(--gold-fill); letter-spacing: 0.16em; }
.live-bar.is-live .live-bar__badge { color: #fff; background: var(--red); }
.live-bar__event, html:not([data-font]) .live-bar__event { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.09em; color: #fff; text-decoration: none; }
.live-bar__event::after { content: "\00a0\2192"; color: var(--gold-fill); }
.live-bar__event:hover, .live-bar__event:focus-visible { color: var(--gold-fill); }
.live-bar__meta { color: #b9bdc4; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.95rem; }
.live-bar__soon { color: var(--gold-fill); font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 400; font-size: 0.95rem; }
.live-bar__more { color: #fff; }
.live-bar__btn { color: #fff; border-color: rgba(255, 255, 255, 0.55); }
.live-bar { --focus: var(--gold-fill); }
@media (max-width: 30em) { .live-bar:not(.is-live) .live-bar__soon { display: none; } }

/* ---- Site audit fixes (October 6, 2026) ---- */
/* Finale hub head: the When/Where facts and the directions link were white on the silver band. */
.finale-head .hub-facts b { color: var(--ink); }
.finale-head .hub-facts span { color: var(--gold-deep); font-size: 1rem; }
/* Contact facts: a column is never so narrow that the email breaks mid-word. */
.contact-facts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.contact-facts a { overflow-wrap: normal; word-break: keep-all; }
/* Table headers and short cells never break inside a word; wide tables slide sideways instead. */
.prose table th, .table th, .prose .table--payout thead th { white-space: nowrap; word-break: keep-all; hyphens: none; overflow-wrap: normal; }
.prose .table-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table td { max-width: 60ch; }
.prose .table--payout { font-size: 1rem; }
.prose td.nowrap, .fs-row__terms b { white-space: nowrap; }
/* Long page titles on phones (Druk Wide is wide). */
@media (max-width: 40em) { html:not([data-font]) :is(.finale-head__title--long, .page-head__title--long) { font-size: 1.3rem; line-height: 1.15; } }
/* Breadcrumbs wrap instead of being cut off, and are easy to tap. */
.crumbs li, .crumbs li span, .crumbs li a { white-space: normal; overflow: visible; text-overflow: clip; }
.crumbs a { display: inline-flex; align-items: center; min-height: 2.25rem; }
/* Small Bebas labels and links read small for this audience: a size up, and a thumb-sized target. */
.section__more { font-size: 1.2rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.finale-head__eyebrow, .fe__label, .fw__eyebrow, .hn__cat, .news-tag, .form-card__group, .eyebrow { font-size: 1.05rem; }
.chip, .fs-tag, .event-row__day, .event-row__mon, .ue__date span, .table th, .prose table th, .live-bar__badge, .hub-facts span { font-size: 1rem; }
.cal-row__cta { font-size: 1.1rem; min-height: 2.5rem; display: inline-flex; align-items: center; }
.live-bar__event { align-items: center; }
.ev__books a, .ev__list a, .prose a.tel, a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 2.5rem; }
input[type="checkbox"], input[type="radio"] { width: 1.5rem; height: 1.5rem; }
/* The expand sign on calendar and results rows: a round, button-sized mark. */
.expandableCal::after { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; border: 2px solid var(--gold-fill); border-radius: 50%; font-size: 1.6rem; color: var(--ink); background: #fff; }
.results-item__cta { display: inline-flex; align-items: center; min-height: 2.5rem; margin-top: 0.25rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; color: var(--gold-text); }
/* Who produces an event, dark enough to read. */
/* Hero date in Agency, so "December 3 – 13, 2026" sits on one line. */
.fh-date, html:not([data-font]) .fh-date { font-family: var(--font-nav); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: 0.02em; line-height: 1.05; }
/* Holiday band: a wider text column, a smaller title. */
@media (min-width: 860px) { .pfeat__inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.pfeat__title { font-size: clamp(1.25rem, 2vw, 1.6rem); }
/* "Also at Finale XX" on phones: the label on its own line, the links in two columns. */
/* Member archives: numbers do not wrap. */
td[data-label]:not(.wide) { white-space: nowrap; }
/* Flyer pages: on desktop the flyer floats right so the day cards use the whole column below it;
   on tablets it sits above the cards. */
@media (min-width: 40em) and (max-width: 63.99em) { .ev .flyer-thumb { order: -1; max-width: 16rem; } }
@media (min-width: 64em) { .ev::after { display: block; clear: both; } .ev .past-flyer__now { display: block; } .ev .past-flyer__now > * + * { margin-top: 0.75rem; } }
/* Facility map at full width. */
/* Error page: readable over the photo. */
.error-page img { opacity: 0.4; }
.error-page::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.72)); }
.error-page__body { z-index: 1; }
/* Sponsors wall: even tiles, four across on wide screens. */
@media (min-width: 760px) { .sponsors-page li { flex-basis: calc((100% - 3rem) / 4); } }
@media (min-width: 480px) and (max-width: 759px) { .sponsors-page li { flex-basis: calc((100% - 1.5rem) / 3); } }
@media (max-width: 479px) { .sponsors-page li { flex-basis: calc((100% - 0.75rem) / 2); } }
.sponsor-grid a { aspect-ratio: 4 / 3; padding: 1.25rem; }
.sponsor-grid img { max-height: 76px; }
/* Legal: the opening notice is a paragraph; quoted blocks keep the reading measure. */
.legal-notice { font-weight: 700; font-size: 1.125rem; line-height: 1.45; margin: 0 0 1rem; }
.prose blockquote { max-width: var(--measure); }
/* Notes and intros keep the reading measure. */
.notice, .mc__key, .forms-intro, .fs-intro, .ls__lede { max-width: var(--measure); }
/* Schedule and add-on day cards on phones: the day heading is enough, so no date rail. */
@media (max-width: 35em) { .fs-day { grid-template-columns: minmax(0, 1fr); } .fs-day__date { display: none; } .fs-row { grid-template-columns: 3.4rem minmax(0, 1fr); } }
/* Rodeo page. */
.rodeo__header { width: 100%; height: auto; border-radius: var(--radius); }
.rodeo__cols { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 60em) { .rodeo__cols { grid-template-columns: minmax(0, 1fr) 16rem; } }
.rodeo__videos { display: grid; gap: 0.75rem; }
/* Hall of Champions: payouts, unnamed seasons, story links, posterless seasons. */
.champs-total { margin: 0 0 1rem; font-size: 1.125rem; display: grid; gap: 0.25rem; }
.champs-total__note { color: var(--ink-2); font-size: 1rem; }
.champ__tbd { margin: 0; color: var(--muted); font-style: italic; }
.season-card__stand-in { display: grid; place-items: center; align-content: center; gap: 0.35rem; width: 100%; aspect-ratio: 2 / 3; background: radial-gradient(120% 90% at 50% 0%, #2a2c31 0%, #0f1012 70%); color: var(--gold-fill); font-family: var(--font-title); font-size: 2rem; }
.season-card__stand-in span { font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.14em; color: #fff; text-transform: uppercase; }

/* ---- Site audit fixes, part 2 (October 6, 2026) ---- */
/* Finale tiles under the hero (eight of them): two across on phones, four from tablets up, always full rows. */
.fe:not(.fe--col) .fe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48em) { .fe:not(.fe--col) .fe__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Stacked-table labels, roping notes and member-card labels: a size up for this audience. */
.table--stack td[data-label]::before { font-size: 1rem; }
.mc__rownote { font-size: 1rem; }
.member-card__facts dt { font-size: 1rem; }
/* Contact form: the send button is the gold primary, full width on phones. */
.contact-form__submit { min-height: 3.25rem; font-size: 1.25rem; padding-inline: 2rem; }
@media (max-width: 40em) { .contact-form__submit { width: 100%; } }
/* Day scroller: a card sliding under the right gutter fades, the cue that more follow. */
.ds__track { mask-image: linear-gradient(90deg, #000 calc(100% - var(--gutter) * 1.5), transparent); }
/* Schedule page: the flyer thumbnail beside the intro, a touch bigger (phones keep it full width). */
/* Livestream: the steps and the who-can-watch note keep the reading measure. */
.ls__step p { max-width: var(--measure); }
/* A page banner photo (the jackpots page). */
.page-banner { display: block; width: 100%; height: auto; border-radius: var(--radius); margin-bottom: 1.25rem; }
/* The concept flag reads at 15px. */
/* Practice Pen Qualifiers band on the home page (the live slider's second slide): picture beside the words from tablets up. */
/* Photo galleries: the live EmbedSocial album, with room while it loads. */
.gallery-dates { margin: -0.5rem 0 1rem; color: var(--ink-2); font-size: 1.0625rem; }
.embedsocial-album { min-height: 10rem; }
.gallery-note { margin-top: 1rem; }
/* "Entered? Here is what comes next" on the Finale hub: numbered steps, one tap each. */
.entered__steps { list-style: none; display: grid; gap: 0.75rem; margin-top: 1rem; }
.entered__step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.9rem; padding: 1rem 1.1rem 1.1rem 0.9rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius); background: var(--surface); }
.entered__num { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--black); color: var(--gold-fill); font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1; }
.entered__body { display: grid; gap: 0.45rem; justify-items: start; }
.entered__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.entered__body p { font-size: 1.0625rem; line-height: 1.5; color: var(--ink-2); max-width: var(--measure); }
/* Phones: the home page keeps its sections but shows fewer cards in each (the "more" links lead to the rest):
   two Empty Saddles cards and three news cards. */
@media (max-width: 639px) { .saddles > li:nth-child(n + 3), .hn > li:nth-child(n + 4) { display: none; } }
/* "Also at Finale XX" on phones: one full-width row per link, all the same height, the arrow at the right edge. */
/* Event cards: the gold city/state is a small cap line, smaller than the venue and date. */
/* Ticker bar: the event name wraps as text with its arrow after the last word (as a flex box the arrow
   became its own line); the tap target comes from padding instead of a min-height. */
.live-bar__event { display: inline; min-height: 0; padding-block: 0.35rem; line-height: 1.35; overflow-wrap: normal; }
@media (max-width: 40em) { html:not([data-font]) .live-bar__event, .live-bar__event { font-size: 0.95rem; letter-spacing: 0.06em; } .live-bar__meta { font-size: 0.85rem; } }
@media (max-width: 40em) { .live-bar__event::after { position: static; inset: auto; } }
/* Phones and tablets: the Menu button is a thin three-line icon; the lines fold into an X while the drawer is open. */
.site-header__toggle { min-width: 3rem; width: 3rem; padding: 0; border-color: transparent; }
.burger { position: relative; display: block; width: 1.6rem; height: 1.1rem; }
.burger span { position: absolute; left: 0; width: 100%; height: 1.5px; background: #fff; border-radius: 1px; transition: transform 0.2s, opacity 0.2s, top 0.2s; }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: calc(50% - 0.75px); }
.burger span:nth-child(3) { top: calc(100% - 1.5px); }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(1) { top: calc(50% - 0.75px); transform: rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(2) { opacity: 0; }
.site-header__toggle[aria-expanded="true"] .burger span:nth-child(3) { top: calc(50% - 0.75px); transform: rotate(-45deg); }
/* The drawer and its backdrop start at the header's measured bottom edge (set while open), not at --header-h. */
.drawer, .drawer-backdrop { top: var(--drawer-top, var(--header-h)); }
/* Phone menu: the top-level links a size down, rows a little tighter; the sub-links follow. */
html:not([data-font]) :is(.drawer__link, .drawer__summary), .drawer__link, .drawer__summary { font-size: 1.1rem; letter-spacing: 0.04em; min-height: 3.1rem; }
.drawer__sub a { font-size: 1rem; min-height: 2.75rem; }
/* "The Finale, day by day" inside a page column (the /finale hub): the band runs edge to edge on phones with the
   gutter inside it, and is a rounded panel with its own padding from tablets up. */
.fw.fw--col { padding: 1.5rem var(--gutter) 1.25rem; border: 0; }
@media (max-width: 39.99em) { .fw.fw--col { margin-inline: calc(var(--gutter) * -1); border-radius: 0; } }
@media (min-width: 40em) { .fw.fw--col { border-radius: var(--radius-lg); padding-inline: 1.25rem; } .fw--col .ds__track { margin-inline: -1.25rem; padding-inline: 1.25rem; scroll-padding-inline: 1.25rem; } }
/* Ticker on phones: the date line sits right under the event name. */
@media (max-width: 40em) { .live-bar__what { gap: 0; } .live-bar__event { padding-block: 0.1rem 0; line-height: 1.25; } .live-bar__meta { line-height: 1.2; } .live-bar__inner { padding-block: 0.45rem 0.5rem; } }
/* Schedule rows: the hc and the tag sit at the top of a row that wraps; a linked roping is gold with an arrow instead of
   an underline, and the row's own padding gives the tap height. */
.fs-row { align-items: start; padding: 0.7rem 0; }
.fs-row__link { text-decoration: none; color: var(--gold-text); font-weight: 600; }
.fs-row__link::after { content: "\00a0\203A"; color: var(--gold-fill); font-weight: 700; }
.fs-row__link:hover, .fs-row__link:focus-visible { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-fill); }
/* Breadcrumbs on phones: smaller, on one line; a long current page name is cut with an ellipsis (the h1 below says it in full). */
@media (max-width: 40em) {
  .crumbs { flex-wrap: nowrap; font-size: 0.8125rem; gap: 0.3rem; }
  .crumbs li { flex: none; white-space: nowrap; }
  .crumbs li:last-child, .crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumbs li:last-child { flex: 0 1 auto; min-width: 0; display: block; min-height: 2.25rem; line-height: 2.25rem; }
  .crumbs a { min-height: 2.25rem; }
}
/* Hall of Champions posters: every season's poster fills the same frame (the 2019 poster's proportions, 804x1261),
   cropped to cover with no padding or black surround, so the list reads as a uniform row of posters. */
.champs-grid .season-card .season-card__poster { aspect-ratio: 804 / 1261; padding: 0; background: var(--surface-alt); }
.champs-grid .season-card .season-card__poster img { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.champs-grid .season-card .season-card__stand-in { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
/* The expand mark on calendar and results rows is drawn, not typed: two centred bars (a plus), one when open (a minus),
   so it sits dead centre in its circle regardless of the font's glyph metrics. */
.expandableCal::after, .expandableCal.active::after { content: ""; background-color: #fff; background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink)); background-repeat: no-repeat; background-size: 0.9rem 2px, 2px 0.9rem; background-position: center, center; }
.expandableCal.active::after { background-size: 0.9rem 2px, 0 0; }

/* ---- Strict styling pass (October 7, 2026) ---- */
/* Page titles: one short solid gold bar under every h1 (the faded one read as a smudge). */
.page-head__title::after, .finale-head__title::after { width: 3.5rem; height: 3px; background: var(--gold-fill); }
/* Headings and short copy wrap on whole words with no stubby last line; balanced wrapping is kept for h1s only. */
p, li, dd, .faq-question, .accordion-header, .card__title, .hn__title, .fe__item b, .result-card__name, .champ__roping, .entered__title, .gallery-card__name, .fs-day__title, .join__how, .week-info__link b, .news-pager__title { text-wrap: pretty; }
/* A section title that is not in a .section__head keeps a little room before what follows it. */
:is(.section-title, .prose h2, .mc__title, .ls__title, .join__title):not(.section__head > *) + :is(p, ul, ol, .lede, .finale-faq, .stack, .notice, .prose) { margin-top: 0.9rem; }
/* Phone links inside copy stay inline (they made their line taller and dropped to their own line); the tap area comes from padding. */
.prose a[href^="tel:"], p a[href^="tel:"], li a[href^="tel:"], .contact-facts .tel { display: inline; min-height: 0; padding-block: 0.45rem; line-height: inherit; }
.contact-facts dd { margin-top: 0.1rem; }
/* "Also at Finale XX" on phones: the rows are the tiles, with no second box around them; the same bold arrow as elsewhere. */
/* Finale day cards size to their own rows instead of stretching to the tallest day. */
/* Finale essentials: two tiles across in the /finale column at every width; the home bar keeps four from tablets up. */
.fe--col .fe__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 26em) { .fe__item b { font-size: 1.2rem; } }
/* Sidebar stacked under the page (below 64em): the schedule is a plain list, not a box of boxes; the ad spans the column on phones;
   two events across only from 900px, and an odd last event spans both columns. */
@media (max-width: 63.99em) {
  .aside__block { background: transparent; border: 0; padding: 0; }
  .aside .event-list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 56.25em) and (max-width: 63.99em) {
  .aside .event-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aside .event-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
/* Button rows in notices and the help box: on phones every button is full width, one under the other. */
@media (max-width: 40em) {
  .next-steps__links { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .next-steps__links .btn, .finale-help__actions .btn { width: 100%; }
  .finale-help__actions { flex: 1 1 100%; flex-direction: column; }
}
/* The second gold box on a short page (what to do next) carries its gold on top, so two boxes never read as one doubled box. */
.next-steps { border-left: 1px solid var(--line); border-top: 4px solid var(--gold-fill); }
.notice + .notice { margin-top: 1.25rem; }
/* Calendar rows: the go-to line carries an arrow; the Finale row is one solid tint; the month heading keeps a strip of paper under it
   while it sticks; an opened row and its details are one card. */
.cal-row__cta::after { content: "\00a0\203A"; }
.calendar-item--finale { background: var(--gold-soft); }
.month__head { padding-bottom: 0.5rem; box-shadow: 0 0.25rem 0 var(--paper); } /* 4px: inside the 8px gap above the first card even when hover lifts it 2px */
.calendar-item[aria-expanded="true"] { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.eventFlyer { padding-top: 0; }
@media (max-width: 40em) { .expandableCal { padding-right: 2.4rem; } .expandableCal::after { width: 2rem; height: 2rem; background-size: 0.8rem 2px, 2px 0.8rem; } .expandableCal.active::after { background-size: 0.8rem 2px, 0 0; } }
/* Event cards: the city line a touch larger than the audit found it (13px). */
/* Error page: the four links share one button style. */
.error-page__links .btn.btn--outline-light { background: #fff; border-color: #fff; color: var(--ink); }
/* Footer: one line spacing for the office lines and the link lists. */
.site-footer li, .site-footer__office { line-height: 1.5; }
/* Finale hub head: the facts sit clear of the band's bottom edge. */
.finale-head .hub-facts { margin-bottom: 0.5rem; }
/* Flyer pages on desktop: the flyer sits top right beside the intro, the days use the column below it. */
@media (min-width: 64em) {
  .ev .flyer-thumb { float: none; margin: 0; max-width: 13rem; }
  .ev::after { content: none; }
}
/* Flyer event rows: the time on its own line above the roping, so a wrapping name never starts under the time. */
/* Finale schedule: "All days" keeps its own slot at the right of every day heading. */
.fs-day__head { flex-wrap: nowrap; }
.fs-day__head .fs-day__title { flex: 1 1 auto; min-width: 0; }
/* News: the story headline reads as the page's main title; room before the picture; a story whose body is one link shows it as a button. */
html:not([data-font]) .news-article__title, .news-article__title { font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.12; font-weight: 700; }
.article__lead { margin-top: 1rem; }
/* Results: the location and payout labels read at 15px; no payout line when the amount is unknown (results-schedule.tsx). */
.gb-list span { font-size: 0.9375rem; }
.gb-list b { font-size: 1.2rem; }
/* Legal: a wider reading column at 17px; a bold lead-in after a list starts a new block. */
.legal-body { font-size: 1.0625rem; max-width: 50rem; }
.legal-body :is(p, li, dd) { max-width: none; }
/* Hall of Champions: four posters across from tablets up, two across on big phones, one card template everywhere
   (media queries: a container query cannot size the container itself). */
@media (min-width: 32em) {
  .champs-grid.season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .champs-grid > .season-card:last-child:nth-child(3n+1) { grid-column: auto; }
  .champs-grid .season-card.season-card { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .champs-grid .season-card .season-card__poster.season-card__poster { width: 100%; }
  .champs-grid .season-card .season-card__body { align-content: start; }
}
@media (min-width: 48em) { .champs-grid.season-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.champ-grid { align-items: stretch; }
/* Livestream: the three step cards size to their own text. */
.ls__steps { align-items: start; }
/* Wide tables: a shadow at the edge that still has columns beyond it; payout cells at 16px; plain text tables wrap their cells. */
.prose .table-wrap, .table-wrap, .mc__table-wrap { background: linear-gradient(to right, var(--surface) 30%, rgba(255, 255, 255, 0)), linear-gradient(to left, var(--surface) 30%, rgba(255, 255, 255, 0)) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)), radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0)) 100% 0; background-repeat: no-repeat; background-color: var(--surface); background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
.prose .table--payout :is(td, th) { font-size: 1rem; }
.prose .table--text td { white-space: normal; }
/* American Rodeo page: the carried-over copy at the site's body size whatever its inline styles say. */
.rodeo__prose { font-size: 1.0625rem; }
.rodeo__prose [style] { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; }
/* Photo gallery list: larger cards, a bigger "See photos" line, no orphan card. */
.gallery-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.gallery-card__cue { display: inline-flex; align-items: center; min-height: 2.5rem; font-size: 1.1rem; }
/* Member pages: the link column sits beside the page only from 900px; the buy form matches the width of the rows above it;
   the name and Global ID on their own lines. */
@media (min-width: 768px) and (max-width: 56.24em) { .members-layout { grid-template-columns: minmax(0, 1fr); } }
.members-purchase { max-width: none; }
/* Memberships: the comparison table becomes cards a little sooner (under about 860px of column). */
@container mc (min-width: 720px) and (max-width: 859px) { .mc__table-wrap { display: none; } .mc__cards { display: grid; } }
/* Forms: an odd last card spans the row; the download button sits at the bottom of every card in a row. */
@container (min-width: 46rem) { .forms-grid--cards > .form-card:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.forms-grid--cards .form-card__btn { margin-top: auto; }
/* Sponsors wall: roomier tiles with bigger logos. */
.sponsors-page__tile, .sponsor-grid.sponsors-page a { aspect-ratio: 16 / 10; padding: 1.25rem; }
.sponsors-page img, .sponsor-grid.sponsors-page img { max-height: 110px; }
/* Sponsor strip: a soft fade at both edges on every screen, so no logo is cut hard at the gutter. */
.sponsors__track, .sponsors__track.sponsors__track { -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent); }
/* Schedule rows without a number keep their first column, so the roping name never slides into it. */
.fs-row > .fs-row__hc:empty { display: block; }
/* Hall of Champions: a season's other payouts as a two-column list; the year tile names the Finale only (the year is beside it). */
.champs-total__note { display: grid; gap: 0.35rem; }
.champs-paid { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.champs-paid li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line-2); font-size: 1rem; }
.champs-paid li span:last-child { font-weight: 700; white-space: nowrap; }
.champs-grid .season-card__stand-in { font-size: 1.1rem; }
.champs-grid .season-card__stand-in span { font-size: 1.15rem; letter-spacing: 0.12em; }
/* Empty Saddles: the years under the name instead of a hyphen that could start a line. */
.saddles__years { display: block; margin-top: 0.15rem; font-family: var(--font-sans); font-weight: 500; text-transform: none; font-size: 0.9375rem; color: var(--ink-2); letter-spacing: 0; }
/* Rulebook tools: the section links and the open-all button share one button style; a three-across grid on phones. */
.rule-tools__link { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; border: 2px solid var(--ink); justify-content: center; }
@media (max-width: 40em) { .rule-tools, .rule-tools__nav { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; } .rule-tools__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; } .rule-tools__link { padding-inline: 0.25rem; } .rule-tools__all { width: 100%; } }
/* Stacked member tables: room between one value and the next label, so each field reads as its own group. */
@container members-body (max-width: 719px) { .table--stack tr { gap: 0.55rem 0.75rem; } }
/* Finale rows (owner, Oct 7): a Finale's title in gold, bold; a qualifier bold in black; the division number as before. */
.fw__rows li.is-finale > span, .fw__rows li.is-finale, .fs-row--finale .fs-row__ev, .fs-row--finale .fs-row__ev span, .fs-row--finale .fs-row__ev b { color: var(--gold-text); font-weight: 700; }
.fw__rows li:not(.is-finale) > span, .fs-row:not(.fs-row--finale) .fs-row__ev, .fs-row:not(.fs-row--finale) .fs-row__ev span { color: var(--ink); font-weight: 700; }
.fs-row .fs-row__terms { color: var(--ink-2); font-weight: 400; }
.fw__rows b { font-size: 1.55rem; }
.fs-row__hc { font-size: 1.65rem; line-height: 1; padding-top: 0.05rem; }
.fs-row:not(.fs-row--finale) .fs-row__ev b, .fs-row:not(.fs-row--finale) .fs-row__link { color: var(--ink); }
/* Day-by-day cards all the same height (owner, Oct 7): the row stretches every card to the tallest day; "See this day" stays at the bottom. */
.fw__days { align-items: stretch; }
.fw__day .fw__link { height: 100%; }
/* Schedule rows: the flyer terms under a roping read smaller than the title (owner, Oct 7). */
.fs-row .fs-row__terms { font-size: 0.875rem; line-height: 1.4; margin-top: 0.2rem; max-width: 60ch; }
/* Breadcrumbs (owner, Oct 7): a full-width solid bar at the top of every page head, items centred on one line, small bold text. */
.page-head, .finale-head { padding-top: 0; }
.page-head .crumbs, .finale-head .crumbs { position: relative; z-index: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 0.5rem; width: 100vw; margin-left: calc(50% - 50vw); margin-bottom: 1.5rem; padding: 0 max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter))); min-height: 2.5rem; background: #1d1f23; color: #d9dce1; font-size: 0.8125rem; font-weight: 700; line-height: 1; overflow: hidden; }
.page-head .crumbs li, .finale-head .crumbs li { display: flex; align-items: center; flex: none; white-space: nowrap; min-height: 0; line-height: 1; }
.page-head .crumbs li:last-child, .finale-head .crumbs li:last-child { flex: 0 1 auto; min-width: 0; }
.page-head .crumbs li:last-child span, .finale-head .crumbs li:last-child span { overflow: hidden; text-overflow: ellipsis; }
.page-head .crumbs a, .finale-head .crumbs a, .page-head .crumbs span, .finale-head .crumbs span { color: #d9dce1; min-height: 0; line-height: 1; padding-block: 0.6rem; }
.page-head .crumbs a:hover, .finale-head .crumbs a:hover { color: var(--gold-fill); text-decoration: none; }
.page-head .crumbs li + li::before, .finale-head .crumbs li + li::before { content: "›"; margin-right: 0.5rem; color: var(--gold-fill); font-weight: 700; }
.page-head .crumbs [aria-current="page"], .finale-head .crumbs [aria-current="page"] { color: #fff; }
/* Venue card on the schedule page (owner, Oct 7): name, address and one directions button. */
.venue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-top: 1.5rem; padding: 1.1rem 1.4rem; border: 1px solid var(--line); border-left: 4px solid var(--gold-fill); border-radius: var(--card-radius); background: var(--surface); }
.venue__body { display: grid; gap: 0.15rem; min-width: 0; }
.venue__label { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.95rem; color: var(--gold-deep); }
.venue__name { font-family: var(--font-title); font-weight: 500; text-transform: uppercase; font-size: 1.05rem; line-height: 1.2; }
.venue__addr { color: var(--ink-2); font-size: 1rem; line-height: 1.4; }
@media (max-width: 40em) { .venue__btn { width: 100%; } }
.venue + .venue { margin-top: 0.75rem; }
.venue--note .venue__addr { max-width: 46rem; }
/* Riata horse sale rows carry Riata's red (owner, Oct 7). */
.fs-tag--riata { background: #b0202a; border-color: #b0202a; color: #fff; }
/* Event cards (owner, Oct 7): name, date, city and state, venue, then the producer last and small. */
.event-row__dates, .ue__when { display: block; font-size: 1rem; line-height: 1.3; margin-top: 0.1rem; }
.event-row__city, .ue__city { margin-top: 0.3rem; }
.event-row__by { display: block; margin-top: 0.35rem; color: var(--muted); font-weight: 400; }
.event-row__city, .ue__city { letter-spacing: 0.1em; }
/* The help box at the end of Finale pages is a dark panel (owner, Oct 7): on the silver it matched the sponsor bar below it. */
.finale-help, .fw.finale-help { background: var(--black); background-image: none; border: 0; border-left: 4px solid var(--gold-fill); color: #f2efe9; }
.finale-help__title { color: #fff; }
.finale-help__sub { color: #c9c3b9; }
.finale-help .btn--ghost { border-color: #fff; color: #fff; background: transparent; }
@media (hover: hover) { .finale-help .btn--ghost:hover { background: #fff; color: var(--black); } }
/* Sponsor bar: a plain light gradient, no brushed lines (owner, Oct 7). */
.sponsors { background-image: linear-gradient(180deg, #f8f9fa 0%, #e8eaee 100%); }
/* Event cards (owner, Oct 7): even 4px gaps between the lines, venue small, producer plain. */
.event-row__meta, .expandableCal .event-row__meta { display: grid; }
.event-row__name, .ue__name, .expandableCal .eventName { margin-bottom: 0; }
.event-row__dates, .ue__when, .expandableCal .eventDate.event-row__meta, .event-row__city, .ue__city, .event-row__venue, .ue__venue, .event-row__by { margin-top: 0; }
.event-row__city, .ue__city { font-size: 0.75rem; line-height: 1.2; }
.event-row__venue, .ue__venue { color: var(--ink-2); }
.event-row__by { font-size: 0.8125rem; line-height: 1.3; }
.event-row__by::before { content: none; }
.event-row__dates, .ue__when, .expandableCal .eventDate.event-row__meta { font-size: 0.8125rem; font-weight: 600; color: var(--ink-2); line-height: 1.3; }
/* Event cards: tight line spacing (owner, Oct 7): 2px between lines, the name tight to the first line. */
.event-row__meta, .expandableCal .event-row__meta { gap: 0.1rem; margin-top: 0.15rem; }
.ue__body { gap: 0.1rem; }
.ue__card .ue__name ~ * { margin-top: 0; }
.ue__card .ue__name + * { margin-top: 0.15rem; }
.event-row__dates, .ue__when, .expandableCal .eventDate.event-row__meta, .event-row__city, .ue__city, .event-row__venue, .ue__venue, .event-row__by { line-height: 1.25; }
.event-row__name, .ue__name, .expandableCal .eventName { line-height: 1.05; }
/* Day-by-day lede (owner, Oct 7): one plain sentence in place of the scrolling instructions; the arrows stay for mouse users. */
.ds__hint { font-size: 1.0625rem; color: var(--ink-2); max-width: 36em; }
/* Practice Pen Qualifiers band on the home page (owner, Oct 7): full width, the arena photo under a dark gradient. */
/* Home news cards carry the story's teaser under the headline (owner, Oct 7). */
.hn__body { grid-template-rows: auto auto auto 1fr; }
.hn__teaser { font-size: 0.9375rem; line-height: 1.4; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.two-col__foot > .pfeat:first-child { margin-top: 0; }
.fw + .pfeat { margin-top: 0; }
/* Home, below the partner band: Empty Saddles beside the sponsor banner; the band itself runs edge to edge. */
.two-col__foot > .pfeat { margin-top: 0; }
.home-lower { margin-top: var(--s4); }
/* Event cards: the venue small enough to sit on one line where it can (owner, Oct 7). */
.event-row__venue, .ue__venue { font-size: 0.75rem; line-height: 1.25; letter-spacing: 0; }
/* The partner band below the news runs edge to edge, out of the page container. */
.two-col__foot > .pfeat { width: 100vw; margin-inline: calc(50% - 50vw); }
/* Home Videos: a light silver band edge to edge, the slider still lined up with the page (owner, Oct 7). */
.two-col__foot > .home-videos { width: 100vw; margin-inline: calc(50% - 50vw); padding: var(--s5) max(var(--gutter), calc(50vw - var(--container) / 2 + var(--gutter))); background: var(--surface-alt); border-block: 1px solid var(--line); }
/* The band is the page's last section, so it meets the sponsor bar with no white gap. */
:is(.main, .main > .section):has(.two-col__foot > .home-videos:last-child) { padding-bottom: 0; }
.two-col__foot > .home-videos:last-child { border-bottom: 0; }
/* Footer (owner, Oct 7): links in the menu's condensed caps, smaller and
   closer together; gold column heads; smaller office and legal lines. */
.site-footer h2 { color: var(--gold-fill); font-size: 0.875rem; letter-spacing: 0.14em; margin-bottom: 0.35rem; }
.site-footer ul a { font-family: var(--font-display); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.05rem; line-height: 1; min-height: 2.25rem; color: #d9dce1; }
.site-footer li + li { margin-top: 0; }
.site-footer__office { font-size: 0.875rem; line-height: 1.55; }
.site-footer__office .tel { min-height: 2.25rem; }
.site-footer__brand img { height: 60px; }
.site-footer__grid { padding-block: 2rem; }
.site-footer__legal { font-size: 0.8125rem; padding-block: 0.75rem; }
.site-footer__legal a { min-height: 2.25rem; }
/* Bullet copy on the PPQ and Holiday Auto bands: a size down, smaller diamonds (owner, Oct 7). */
.pfeat__points { font-size: 0.9375rem; gap: 0.35rem; line-height: 1.45; }
.pfeat__points li { padding-left: 1.3rem; }
.pfeat__points li::before { top: 0.5em; width: 0.5rem; height: 0.5rem; }
/* Sidebar Hall of Champions: a 300x250 animated tile like the ads (owner,
   Oct 7). The backlit rider drifts slowly, the buckle settles in and a shine
   sweeps across it (clipped to the buckle's own shape), then the gold bar
   rises; the whole tile links to /hallofchamps. Still for reduced motion. */
.aside__hof { position: relative; display: block; width: 100%; max-width: 300px; aspect-ratio: 300 / 250; margin-inline: auto; overflow: hidden; border-radius: var(--radius); background: radial-gradient(circle at 45% 30%, #f4ecf6 0, #b9a6c0 12%, #3b3240 38%, #0d0b0a 75%); text-decoration: none; color: var(--black); box-shadow: var(--shadow); isolation: isolate; }
.aside__hof-bg, .aside__hof-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.aside__hof-bg img { display: block; object-fit: cover; object-position: center 30%; animation: hof-drift 16s ease-in-out infinite alternate; }
.aside__hof::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(13, 11, 10, 0.1) 0%, rgba(13, 11, 10, 0.15) 45%, rgba(13, 11, 10, 0.8) 100%); pointer-events: none; }
.aside__hof-buckle { position: absolute; z-index: 2; left: 50%; top: 15%; width: 52%; aspect-ratio: 480 / 377; transform: translateX(-50%); filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6)); animation: hof-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both, hof-float 5s 0.9s ease-in-out infinite; }
.aside__hof-buckle picture { display: contents; }
.aside__hof-buckle img { display: block; width: 100%; height: 100%; object-fit: contain; }
.aside__hof-buckle::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.85) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 150% 0; -webkit-mask: url(/images/aside/hof-buckle.webp) center / contain no-repeat; mask: url(/images/aside/hof-buckle.webp) center / contain no-repeat; mix-blend-mode: soft-light; animation: hof-shine 4.5s 1.1s ease-in-out infinite; }
.aside__hof-btn { position: absolute; z-index: 3; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.4rem 0.75rem; background: var(--gold-fill); color: #120d04; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.5rem; line-height: 1; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); transition: background 0.15s; animation: hof-btn 0.6s 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.aside__hof-btn span { font-size: 1.6rem; transition: transform 0.15s; }
@media (hover: hover) { .aside__hof:hover .aside__hof-btn { background: #f3dc9c; } .aside__hof:hover .aside__hof-btn span { transform: translateX(3px); } }
.aside__hof:active .aside__hof-btn { background: #c9a24a; }
.aside__hof:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 3px; }
@keyframes hof-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes hof-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px) scale(0.92); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes hof-float { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } }
@keyframes hof-shine { 0%, 55% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes hof-btn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .aside__hof-bg img, .aside__hof-buckle, .aside__hof-buckle::after, .aside__hof-btn { animation: none; } .aside__hof-bg img { transform: none; } }
@media print { .aside__hof { display: none !important; } }
/* Flyer-based Finale pages (owner, Oct 7): laid out like the schedule page,
   the days at full width and the card row below, no thumbnail beside them. */
.ev > .past-flyer__now { max-width: none; }
.ev__cards { margin-top: 0.25rem; }
/* Calendar: an opened event shows the Finale pages' cards (owner, Oct 7). */
.cal-cards { padding: 0.25rem 0 1rem; }
.cal-cards > .venue:first-child { margin-top: 0.5rem; }
.cal-cards .cal-actions__btns { margin-top: 0.75rem; }
/* Flyer cards (owner, Oct 7): the flyer's thumbnail at the left of the card,
   opening it full size like the button. */
.venue--flyer { flex-wrap: nowrap; justify-content: flex-start; }
.venue--flyer .venue__body { flex: 1 1 auto; }
.venue--flyer .venue__btn { flex: none; }
.venue__thumb { flex: none; display: block; width: 4.5rem; padding: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--black); cursor: zoom-in; box-shadow: var(--lift); }
.venue__thumb img { display: block; width: 100%; height: 5.75rem; object-fit: cover; object-position: top; }
@media (max-width: 40em) {
  .venue--flyer { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: start; }
  .venue--flyer .venue__btn { grid-column: 1 / -1; }
}
.flyer-cards { margin-top: 2rem; }
.flyer-cards__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.35rem; line-height: 1.1; margin-bottom: -0.5rem; }
/* A roping's start time: its own small bold line under the title, above the terms (owner, Oct 7). */
.fs-row__start { display: block; font-weight: 700; }
/* Schedule chips (owner, Oct 7): one colour per kind of event, each with
   AA-contrast text. WSTR Finale stays gold, Rope Horse Rewards silver, the
   Riata horse sales Riata red, Key Card the Key Card flyer's slate and tan. */
.fs-tag--keycard { border-color: #323849; }
.fs-tag--outdoor { background: #fff; border-color: var(--ink); color: var(--ink); }
.fs-tag--addon { background: #1f5f5b; border-color: #1f5f5b; color: #fff; }
.fs-tag--vegas { background: #0f1012; border-color: #0f1012; color: #fff; }
.fs-tag--invite { background: #7a4a24; border-color: #7a4a24; color: #fff; }
/* Horseman's Park USTRC/WSTR dual qualifiers: the Jr. Patriot flyer's navy. */
.fs-tag--dual { background: #1d2a6b; border-color: #1d2a6b; color: #fff; }
/* Rope Horse Rewards chip: the RHR logo's black and gold (owner, Oct 7). */
.fs-tag--rhr { border-color: #c9a24a; }
/* Every schedule chip sits in the vertical middle of its row, its label
   centred inside it (owner, Oct 7). */
.fs-row > .fs-tag { align-self: center; display: inline-flex; align-items: center; justify-content: center; }
/* Start times (owner, Oct 7): all caps, gold, tight under the title. */
.fs-row__start { margin-top: 0.05rem; font-size: 0.8125rem; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-deep); }
/* Chips, final pass (owner, Oct 7): solid fills, no borders, except the
   white Outdoor Qualifier chip, which keeps its black border. */
.fs-tag--keycard { background: #24508f; color: #fff; }
.fs-tag--rhr { background: #0f1012; color: #e6c877; }
.fs-row .fs-tag:not(.fs-tag--outdoor) { border-color: transparent; }
/* Phones (owner, Oct 7): every chip shows, on the same row as its title, at
   the right; a little smaller, and a long label wraps inside the chip. */
@media (max-width: 35em) {
  .fs-days .fs-row { grid-template-columns: 3rem minmax(0, 1fr) auto; gap: 0.6rem; }
  .fs-days .fs-row .fs-tag, .fs-days .fs-row .fs-tag:not(.fs-tag--finale) { display: inline-flex; grid-column: 3; grid-row: 1; justify-self: end; align-self: start; max-width: 5.75rem; padding: 0.2rem 0.35rem; font-size: 0.75rem; letter-spacing: 0.05em; line-height: 1.1; white-space: normal; text-align: center; }
  .fs-days .fs-row > span:empty { display: block; }
}
/* Ticker on phones (owner, Oct 7): one row. Badge, the event name (cut
   with an ellipsis), and "In 3 days" at the right; the date and place
   are on the event the name links to. */
@media (max-width: 40em) {
  .live-bar:not(.is-live) .live-bar__inner { flex-wrap: nowrap; align-items: center; gap: 0.65rem; padding-block: 0.5rem; }
  .live-bar:not(.is-live) .live-bar__badge { font-size: 0.75rem; letter-spacing: 0.14em; line-height: 1; }
  .live-bar:not(.is-live) .live-bar__what { flex: 1 1 auto; min-width: 0; display: block; position: static; }
  .live-bar:not(.is-live) .live-bar__event, html:not([data-font]) .live-bar:not(.is-live) .live-bar__event { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.875rem; letter-spacing: 0.05em; line-height: 1.2; padding-block: 0.35rem; }
  .live-bar:not(.is-live) .live-bar__meta { display: none; }
  .live-bar:not(.is-live) .live-bar__soon { display: inline; flex: none; flex-basis: auto; font-size: 0.75rem; letter-spacing: 0.1em; white-space: nowrap; }
  .live-bar__soon-pre { display: none; }
}
/* Section tabs on long pages (owner, Oct 7): the Finale tabs' look, inside
   the page column. Pinned under the Finale tabs on wide screens (as the
   schedule's day chips are); on phones it scrolls sideways where it is. */
.section-nav { position: sticky; top: calc(var(--header-h) + 56px); z-index: 4; margin-bottom: 1.25rem; background: var(--surface, #fff); border-bottom: 1px solid var(--line); }
.section-nav__inner { display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.section-nav__inner::-webkit-scrollbar { display: none; }
.section-nav a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0.6rem; font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1rem; line-height: 1.1; white-space: nowrap; color: var(--ink); text-decoration: none; border-bottom: 3px solid transparent; }
.section-nav a:first-child { padding-left: 0; }
@media (hover: hover) { .section-nav a:hover { color: var(--accent-deep); } }
.section-nav a[aria-current] { border-bottom-color: var(--accent); color: var(--accent-deep); }
.section-nav a:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (max-width: 759px) {
  .section-nav { position: static; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
}
/* Ad slots (Google Ad Manager, src/components/ad-slot.tsx): a plain
   "Advertisement" label over a box that keeps the ad's height before it
   arrives, so the page never jumps. An empty slot hides entirely. */
.ad { display: grid; justify-items: center; gap: 0.3rem; margin-block: 1.5rem; max-width: 100%; overflow: hidden; }
.ad__label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ad__slot { display: grid; place-items: center; width: 100%; min-height: var(--ad-h); }
@media (min-width: 768px) { .ad__slot { min-height: var(--ad-h-wide); } }
.ad[data-empty] { display: none; }
@media print { .ad { display: none !important; } }
/* ?ads=show: an unfilled slot stays as a dashed box naming its size and pos. */
.ad[data-preview] .ad__slot { border: 2px dashed var(--silver-line); background: var(--surface-2); }
.ad[data-preview] .ad__slot::before { content: attr(data-size); font-family: var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-size: 0.9rem; }
.ad[data-preview].ad--half-page .ad__slot, .ad[data-preview].ad--rectangle .ad__slot { width: 300px; }
.ad[data-preview].ad--leaderboard-column .ad__slot { width: min(728px, 100%); }
/* Footer leaderboard (owner, Oct 7): a full-width band just above the sponsor bar. */
.footer-ad { background: var(--surface); border-top: 1px solid var(--line); }
.footer-ad .ad { margin-block: 1rem; }
.footer-ad:has(.ad[data-empty]) { display: none; }
/* A filled ad slot takes the height of the ad it got (src/components/ad-slot.tsx). */
.ad[data-filled] .ad__slot { min-height: var(--ad-filled); }

/* Venue names that wrap (e.g. "Triple Crown Equestrian Center") sit as one
   tight block, not two loose lines (owner, Oct 7). */
.event-row .event-row__venue, .ue .ue__venue { line-height: 1.15; }

/* Two-column lists (entry dates, contacts) read as a table: a hairline
   between rows, the label and its text on one line (owner, Oct 7). */
.ev__books { gap: 0; margin-block: 0.25rem 0.5rem; border-top: 1px solid var(--line); width: 100%; max-width: none; }
.ev__books li { max-width: none; }
.ev__books li { align-items: center; padding-block: 0.55rem; border-bottom: 1px solid var(--line); }
.ev__books li a { min-height: 0; }

/* A day's note (office hours, arena) under its title: room above it, clear of the divider. */
.fs-day .fs-day__note { margin: 0.55rem 0 0.15rem; }

/* /forms grouped by type: a header per group, a divider between groups. */
.forms-group { display: grid; gap: 0.9rem; }
section.forms-group + section.forms-group { margin-top: -1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.forms-group h2.forms-group__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.6rem; line-height: 1.1; margin: 0; padding: 0; border: 0; }
/* Card copy at the hero bullets' size, set tighter (owner, Oct 7). */
.forms-grid--cards .form-card .form-card__use { font-size: 0.9375rem; line-height: 1.3; margin: 0.3rem 0 0.75rem; }

/* /watch beside the sidebar (owner, Oct 7): three equal step cards, the
   number beside the title, hero-size copy; then the who-pays and stream cards. */
.ls .ls__steps { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: stretch; gap: 0.75rem; }
.ls .ls__step { display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem 1.1rem 3.1rem; }
.ls .ls__num { left: 1rem; top: 0.95rem; font-size: 1.9rem; }
.ls .ls__step h3 { font-size: 1.3rem; }
.ls .ls__step p { font-size: 0.9375rem; line-height: 1.35; }
.ls .ls__step .ls__small { font-size: 0.875rem; }
.ls .ls__btn { align-self: flex-start; margin-top: auto; }
.ls .ls__step h3 + p { margin-top: 0.1rem; }
.ls__cards .venue__body { flex: 1 1 18rem; }
.ls__cards .venue__addr { max-width: 34rem; }
.ls .ls__lede { font-size: 1.0625rem; line-height: 1.4; }
.ls__cards { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.ls__cards .venue { margin-top: 0; }
@media (max-width: 47.99em) { .ls .ls__step { padding-inline: 3.1rem 1.1rem; } .ls .ls__num { position: absolute; } }

/* Hall of Champions cards: the Finale's name as a gold display-font label
   under the year, like the page head's eyebrow (owner, Oct 7). */
.champs-grid .season-card .season-card__body > span { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1rem; line-height: 1.15; color: var(--gold-deep); margin-bottom: 0.35rem; }

/* Sidebar link lists (Recent Results, Latest News on the calendar). */
.aside-links { list-style: none; margin: 0; padding: 0; display: grid; }
.aside-links li + li { border-top: 1px solid var(--line); }
.aside-links__item { display: grid; gap: 0.15rem; padding: 0.6rem 0; color: var(--ink); text-decoration: none; }
.aside-links__item b { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.05rem; line-height: 1.1; }
.aside-links__item span { font-size: 0.8125rem; color: var(--ink-2); line-height: 1.3; }
.aside-links__item:hover b, .aside-links__item:focus-visible b { color: var(--gold-deep); }

/* Calendar: an opened event's flyer sits after the date block, before the
   details (owner, Oct 7). The row's grid gets a middle column the flyer
   (a sibling of the row's button) is laid over. */
.cal-row { position: relative; --cal-flyer: 6.5rem; }
.cal-row .calendar-item--flyer { grid-template-columns: 3.625rem var(--cal-flyer) minmax(0, 1fr); min-height: 11.5rem; }
.cal-row .calendar-item--flyer > .expandableCal { grid-column: 3; }
.cal-row__flyer { position: absolute; top: 0.85rem; left: calc(1px + 0.9rem + 3.625rem + 0.9rem); width: var(--cal-flyer); display: grid; gap: 0.3rem; justify-items: center; padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; }
.cal-row__flyer img { width: 100%; aspect-ratio: 8.5 / 11; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-alt); box-shadow: 0 2px 6px rgb(0 0 0 / 0.12); }
.cal-row__flyer span { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.8rem; color: var(--gold-deep); }
.cal-row__flyer:hover span, .cal-row__flyer:focus-visible span { text-decoration: underline; }
@media (max-width: 40em) {
  .cal-row { --cal-flyer: 4.5rem; }
  .cal-row .calendar-item--flyer { min-height: 9.5rem; }
}

/* /ppq-rules: the entry and How to Qualify cards under the rules. */
.ppq-rules__cards { display: grid; gap: 0.75rem; margin-top: 1.75rem; }
.ppq-rules__cards .venue { margin-top: 0; }
.ppq-rules__toc { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; margin: 1rem 0 0.5rem; padding: 0.75rem 0; border-block: 1px solid var(--line); font-family: var(--font-display); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; }
.ppq-rules__toc a { color: var(--ink); text-decoration: none; }
.ppq-rules__toc a:hover, .ppq-rules__toc a:focus-visible { color: var(--gold-deep); text-decoration: underline; }
.ppq-rules__note { padding: 0.9rem 1.1rem; border-left: 4px solid var(--gold-fill); background: var(--surface-alt); border-radius: var(--radius); }
.ppq-rules__meta { color: var(--ink-2); font-size: 0.9375rem; }

/* News article, laid out like EQN Sports' (owner, Oct 7): a sticky rail on
   the left with the stories around this one and a half page, the story on
   the right with a medium rectangle after its third paragraph. On phones
   the rail follows the story. */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: start; }
.article-layout > * { min-width: 0; }
@media (min-width: 64em) {
  .article-layout { grid-template-columns: 19rem minmax(0, 1fr); gap: 2.5rem; }
  .article-layout__main { order: 2; }
  .article-rail { order: 1; position: sticky; top: 6.5rem; max-height: calc(100vh - 7.5rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 0.25rem; }
}
.article-rail__title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.15rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--ink); margin: 0; }
.article-rail__list { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; }
.article-rail__list li + li { border-top: 1px solid var(--line); }
.article-rail__list--more { margin-top: 1rem; border-top: 1px solid var(--line); }
.article-rail__item { position: relative; display: grid; gap: 0.2rem; padding: 0.7rem 0.5rem 0.7rem 0.9rem; color: var(--ink); text-decoration: none; }
.article-rail__item b { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.02rem; line-height: 1.15; }
.article-rail__item span { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); }
.article-rail__item:hover b, .article-rail__item:focus-visible b { color: var(--gold-deep); }
/* The story being read: a gold bar that fills as the reader scrolls through it (news.js sets --read, 0 to 1), as on EQN Sports. */
.article-rail__item[aria-current]::after { content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 3px; background: var(--line); }
.article-rail__item[aria-current]::before { content: ""; position: absolute; z-index: 1; left: 0; top: 0.7rem; width: 3px; height: calc((100% - 1.4rem) * var(--read, 1)); background: var(--gold-fill); transition: height 0.15s linear; }
.article-rail__item[aria-current] b { color: var(--ink); }
.article-rail__ad { margin-top: 0.75rem; }
.article-rail__all { display: inline-block; margin-top: 1rem; }
.article__body-wrap::after { content: ""; display: block; clear: both; }
.article__body-wrap > .article__body + .article__body { margin-top: 1em; }
.article__ad { margin-block: 1.25rem; }
@media (min-width: 48em) { .article__ad { float: right; width: 300px; margin: 0.35rem 0 1rem 1.5rem; } }
@media (min-width: 48em) { .article__ad--end { float: none; margin: 1.5rem 0 0; } }

/* A `fit` ad (the home feature banner): the creative at full size, scaled to
   the box's width; the box keeps the creative's shape. */
.ad--fit { position: relative; width: 100%; aspect-ratio: 2 / 1; overflow: hidden; margin: 0; }
.ad--fit .ad__slot { position: absolute; top: 0; left: 0; width: var(--ad-fit-w); height: var(--ad-fit-h); min-height: 0 !important; transform: scale(var(--ad-scale, 0.5)); transform-origin: 0 0; }
.ad--fit[data-filled] .ad__slot { min-height: 0; }
/* Home feature: the site's copy of the banner under the ad until it fills. */
.pfeat__media { position: relative; }
.pfeat__fallback { display: block; }
.pfeat__fallback img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; }
.pfeat__ad { position: absolute; inset: 0; }
.pfeat__ad:not([data-filled]) { pointer-events: none; }
.pfeat__ad[data-empty] { display: none; }

/* Day-by-day cards: more room between a day's ropings (owner, Oct 7). */
.fw__day .fw__rows { gap: 0.95rem; padding-top: 1rem; padding-bottom: 0.9rem; }
@media (max-width: 40em) { .fw__day .fw__rows { gap: 0.85rem; } }

/* Day-by-day cards: the division number's cap line meets the title's
   (owner, Oct 8; measured: the number sat 3-4px higher). */
.fw__day .fw__rows b { padding-top: 0.34rem; }
@media (max-width: 40em) { .fw__day .fw__rows b { padding-top: 0.35rem; } }
/* Watch-live panel on the home page: the arena photo fills the partner panel's 2:1 picture. */
/* Hall of Champions result cards without a photo (none exist yet, owner Oct 8): a gold rule on top, like the Finale day cards. */
.champ:not(:has(.champ__photo)) { border-top: 4px solid var(--gold-fill); }
/* Champion cards in a row are one height, and every photo is the same 16:9 box
   whatever the picture's own shape (the picture's size no longer stretches it). */
.champ__photo { position: relative; overflow: hidden; }
.champ__photo img { position: absolute; inset: 0; display: block; }

/* ---- Live site only (not in the concept) --------------------------------
   Google Tag Manager's "Having trouble?" bar (#gtm-support-banner) is not shown;
   its tech-support numbers are a card on the Contact page. GTM also pushes
   <body> down to make room for the bar, so that margin is taken back. */
body { margin-top: 0 !important; }
/* Calendar: the venue and the contact in one card. */
.venue__label--next { margin-top: 0.85rem; }
.venue__btns { display: flex; flex-direction: column; gap: 0.6rem; }
.venue__btns:empty { display: none; }
/* News: the credit on a Team Roping Journal story. */
.article__meta { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.article__source a { text-decoration: underline; }
.article__source a { color: var(--gold-deep); font-weight: 600; text-underline-offset: 3px; }
/* A story heading beside the floated in-story ad stops short of it, divider included. */
.article__body h2 { display: flow-root; }
/* Home on phones and tablets: the sidebar stacks above Love's and the news, so its half page
   would sit between them; the half page after the news is enough there. */
@media (max-width: 63.99em) { .ad[data-ad-pos="rail-second"] { display: none; } }
/* Home: the Key Card MAX band (same frame as the partner bands; the card keeps its own shape). */
.pfeat--keycard { margin-top: 2.5rem; }
.pfeat__media--card { border-radius: 4.5% / 7%; }
.pfeat__media--card img { aspect-ratio: auto; }
/* The videos band sits right under the Key Card band: no white strip from the column gap. */
.pfeat--keycard + .home-videos { margin-top: calc(-1 * var(--s5)); border-top: 0; }
/* A story's embedded video (pasted at 640px wide) fits the column at its own shape. */
.article__body iframe { max-width: 100%; }
.article__body iframe[width][height] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
/* Home, Empty Saddles: the most recent one on its own row above the others. */
.saddles-lead { margin-bottom: 1rem; }
.saddles-lead__link { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: center; padding: 1rem; text-decoration: none; color: inherit; }
.saddles-lead__link img, .saddles-lead__link .saddles__ph { display: block; width: 9rem; aspect-ratio: 4 / 5; object-fit: cover; object-position: top; border-radius: var(--radius); background: var(--steel-soft); }
.saddles-lead__body { display: grid; gap: 0.3rem; align-content: center; }
.saddles-lead__name { font-family: var(--font-display); font-weight: 600; text-transform: uppercase; font-size: 1.7rem; line-height: 1.05; }
.saddles-lead__years { font-weight: 500; color: var(--ink-2); }
.saddles-lead__text { margin-top: 0.35rem; color: var(--ink-2); line-height: 1.45; }
.saddles-lead__more { margin-top: 0.35rem; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-deep); }
.saddles-lead__more::after { content: " ›"; }
@media (hover: hover) { .saddles-lead__link:hover .saddles-lead__name { color: var(--gold-deep); } }
@media (max-width: 30em) { .saddles-lead__link { grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; } .saddles-lead__link img, .saddles-lead__link .saddles__ph { width: 6.5rem; } .saddles-lead__name { font-size: 1.35rem; } }
/* Home: the Watch Live hero, the width of the main column and level with the sidebar's
   Hall of Champions tile (250px) on desktop, so Empty Saddles lines up with the half page ad. */
.live-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: 15rem; overflow: hidden; border-radius: var(--card-radius); background: var(--black); color: #fff; }
.live-hero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 60% 45%; }
.live-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 12, 0.88) 0%, rgba(10, 10, 12, 0.62) 45%, rgba(10, 10, 12, 0.05) 80%); }
.live-hero__body { display: grid; gap: 0.6rem; justify-items: start; max-width: 26rem; padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem); }
.live-hero__eyebrow { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.95rem; color: var(--gold-fill); }
.live-hero__title { margin: 0; font-family: var(--font-title); font-weight: 700; text-transform: uppercase; line-height: 1.08; color: #fff; }
.live-hero__btn { margin-top: 0.35rem; }
@media (min-width: 64em) { .live-hero { height: 250px; min-height: 0; } }
@media (max-width: 39.99em) { .live-hero::before { background: linear-gradient(180deg, rgba(10, 10, 12, 0.2) 0%, rgba(10, 10, 12, 0.85) 70%); } .live-hero { align-items: flex-end; min-height: 20rem; } }
.live-hero { border-bottom: 3px solid var(--gold-fill); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28); }
.live-hero__img { transition: transform 0.6s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .live-hero:hover .live-hero__img { transform: scale(1.04); } }
@media (prefers-reduced-motion: no-preference) { .live-hero__body { gap: 0.45rem; max-width: 24rem; padding-block: 1.25rem; } }
.live-hero__title { font-size: clamp(1.4rem, 2.2vw, 1.75rem); }
.live-hero__dates { margin: 0; font-weight: 600; color: #e6e7ea; }
.saddles-lead__text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@media (max-width: 30em) { .saddles-lead__link { align-items: start; } .saddles-lead__text { -webkit-line-clamp: 4; font-size: 0.95rem; } }
/* Members: the purchase receipt membership.js writes into #PayDisplay. */
.members-receipt { display: grid; gap: 0.75rem; }
.members-receipt__title { margin: 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.3rem; }
.members-receipt__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }
/* Finale schedule: on phones, a hint that the day chips scroll sideways. */
.fs-jump__hint { display: none; margin: -1.25rem 0 0; font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; color: var(--ink-2); text-align: right; }
.fs-jump__hint span { color: var(--gold-deep); }
@media (max-width: 759px) { .fs-jump__hint { display: block; } }
/* Member Links keeps its padding at every width so Log Out clears the box's bottom edge. */
.aside__block.members-nav { padding: 1rem; }
/* Finale page: the seasonal VSV health-papers notice above the week info links. */
.notice#vsv { margin-bottom: 1rem; }
/* The "Having trouble?" tech-support bar that Google Tag Manager injects (shared container with the old site). Hidden until the tag is turned off in GTM; the same help is on the Contact page. */
#gtm-support-banner { display: none !important; }

/* Division filters under a schedule's date cards (wwwroot/js/divfilter.js; owner, Oct 15). */
.fs > .div-filter, .div-filter { margin: -0.6rem 0 -0.5rem; }
.div-filter__field { display: grid; gap: 0.3rem; width: 100%; }
.div-filter__select { width: 100%; }
/* With a division picked, few days remain: no "swipe for more" hint. */
.div-filtered .fs-jump__hint { display: none; }

/* Day titles stay on one line on small phones ("Wednesday, December 9" at 360px). */
@media (max-width: 379px) { html:not([data-font]) .fs-day__head .fs-day__title { font-size: 0.94rem; } }

/* Event titles: tighter lines, ink top level with the division number. */
.fs-row__ev { line-height: 1.15; margin-top: -0.125rem; }
/* Tag chip: vertical centre level with the division number, whatever the row height. */
.fs-days .fs-row > .fs-tag { align-self: start; margin-top: 0.83rem; transform: translateY(-50%); }

/* Long pages: the sidebar's half page sticks under the header (and the Finale
   tab bar) so it stays on screen. Only where it fits in the window. */
@media (min-width: 64em) and (min-height: 50em) {
  .two-col > .aside { align-self: stretch; }
  .aside > .ad--half-page:last-child { position: sticky; top: calc(var(--header-h) + 1rem); }
  body:has(.subnav) .aside > .ad--half-page:last-child { top: calc(var(--header-h) + 3.45rem + 1.25rem); }
}
/* Outdoor page: its column has tighter spacing, so give the filter the same room as the schedule pages. */
.past-flyer__now > .div-filter { margin: 0.125rem 0 0.25rem; }
@media (min-width: 64em) { .ev .past-flyer__now > .div-filter { margin: 0.875rem 0 1rem; } }

/* Day chips match the day cards: black, solid silver number (a gradient was hard to read this small). */
.fs-jump__chip { background: var(--black); border-color: var(--black); border-top-color: var(--gold-fill); color: #f2efe9; }
.fs-jump__chip span { color: #c9c3b9; }
.fs-jump__chip b { color: #ececec; }
@media (hover: hover) { .fs-jump .fs-jump__chip:hover { border-color: var(--gold-fill); } }
.fs-jump .fs-jump__chip:active { background-color: #2a2724; border-color: var(--gold-fill); }

/* Tables: words wrap whole (the prose rule "anywhere" let cells shrink until
   "seconds" broke mid-word), and in text tables the first column may wrap so
   a long date range doesn't push the table off a phone screen. */
.prose td { overflow-wrap: break-word; }
.prose .table--text td:first-child:not([colspan]) { white-space: normal; }
@media (max-width: 400px) { :is(.prose table, .table) :is(td, th) { padding-inline: 0.4rem; } .prose .table--data thead th { white-space: normal; padding-inline: 0.4rem; letter-spacing: 0.05em; } .prose .table--data td { padding-inline: 0.4rem; } }
.prose td a[href^="tel:"], .prose td a[href^="sms:"] { white-space: nowrap; }
/* Phones: the event text runs under the tag chip instead of keeping a narrow
   column beside it all the way down; a float keeps the title clear of the chip. */
@media (max-width: 35em) {
  .fs-days .fs-row:has(> .fs-tag) > .fs-row__ev { grid-column: 2 / 4; grid-row: 1; }
  .fs-days .fs-row:has(> .fs-tag) > .fs-tag { position: relative; z-index: 1; }
  .fs-days .fs-row:has(> .fs-tag) > .fs-row__ev::before { content: ""; float: right; width: var(--tag-space, 6.35rem); height: var(--tag-h, 2.1rem); }
  .fs-days .fs-row:has(> .fs-tag--addon) { --tag-space: 3.4rem; --tag-h: 1.3rem; }
  .fs-days .fs-row:has(> .fs-tag--riata) { --tag-space: 4.55rem; --tag-h: 1.3rem; }
  .fs-days .fs-row:has(> .fs-tag--finale) { --tag-space: 4.8rem; --tag-h: 1.3rem; }
  .fs-days .fs-row:has(> .fs-tag--invite) { --tag-space: 4.95rem; --tag-h: 1.3rem; }
  .fs-days .fs-row:has(> .fs-tag--keycard) { --tag-space: 6.05rem; --tag-h: 1.3rem; }
}
a[href^="tel:"], a[href^="sms:"] { white-space: nowrap; }
/* Contact: the tech support card sits the usual gap below the office facts,
   and its three buttons share a row once there is room. */
.contact-facts:has(+ .venue--support) { margin-bottom: 0; }
.contact-facts + .venue--support { margin-top: 0; }
@media (min-width: 40em) { .venue--support .venue__btns { flex-direction: row; flex-wrap: wrap; } }
@media (max-width: 39.99em) { .venue--support .venue__btns { align-items: stretch; flex: 1 1 100%; } .venue--support .venue__btn { width: 100%; } }
/* Phones: tag chips stay on one line (smaller, tighter) instead of wrapping. */
@media (max-width: 35em) {
  .fs-days .fs-row .fs-tag, .fs-days .fs-row .fs-tag:not(.fs-tag--finale) { white-space: nowrap; max-width: none; font-size: 0.6875rem; letter-spacing: 0.03em; padding: 0.2rem 0.3rem; }
}
@media (max-width: 35em) {
  .fs-days .fs-row:has(> .fs-tag) { --tag-h: 1.3rem; }
  .fs-days .fs-row:has(> .fs-tag--addon) { --tag-space: 3.05rem; }
  .fs-days .fs-row:has(> .fs-tag--riata) { --tag-space: 4.05rem; }
  .fs-days .fs-row:has(> .fs-tag--finale) { --tag-space: 4.25rem; }
  .fs-days .fs-row:has(> .fs-tag--invite) { --tag-space: 4.45rem; }
  .fs-days .fs-row:has(> .fs-tag--keycard) { --tag-space: 5.35rem; }
  .fs-days .fs-row:has(> .fs-tag--outdoor) { --tag-space: 5.8rem; }
  .fs-days .fs-row:has(> .fs-tag--dual) { --tag-space: 5.3rem; }
  .fs-days .fs-row:has(> .fs-tag--rhr) { --tag-space: 6.35rem; }
  .fs-days .fs-row:has(> .fs-tag--vegas) { --tag-space: 6.5rem; }
}
/* A button inside article text keeps its own look, not the prose link style. */
.prose a.btn { text-decoration: none; }
.prose a.btn--red { color: var(--on-gold); }
/* Hall of Champions season page: the year's poster beside its payout summary. */
.champs-season--poster { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.champs-season__poster { display: block; padding: 0.35rem; border: 0; border-radius: var(--radius); background: var(--black); cursor: zoom-in; box-shadow: var(--lift); }
.champs-season__poster img { display: block; width: 100%; height: auto; }
.champs-season__poster:focus-visible { outline: 3px solid var(--gold-fill); outline-offset: 2px; }
.champs-season__summary > :first-child { margin-top: 0; }
@media (min-width: 44em) { .champs-season--poster { grid-template-columns: 14rem minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 26em) { .champs-season--poster { grid-template-columns: minmax(0, 1fr); } .champs-season__poster { width: 11rem; } }
/* Phones: the season poster runs the full width, above the payout summary. */
@media (max-width: 43.99em) { .champs-season--poster { grid-template-columns: minmax(0, 1fr); } .champs-season__poster { width: 100%; } }