/* ============================================================
   THROTTLECROSS — events layer
   /events/ season board + /events/<slug>/ event files.
   Extends pages.css. Token-driven, hand-authored.
   ============================================================ */

/* ------------------------------------------------------------
   NEXT-GATE STRIP (hub) — countdown + dual conversion
   ------------------------------------------------------------ */
.next-gate {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 880px) { .next-gate { grid-template-columns: 1fr; } }
.next-gate__card {
  position: relative;
  border-top: 3px solid var(--bone);
  padding: var(--space-4) 0 0;
  display: grid;
  align-content: center;
  gap: var(--space-3);
}
.next-gate__card::before { /* thick-thin print rule */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--bone-ghost);
}
.next-gate__city {
  font-size: clamp(2.2rem, 1.2rem + 3.6vw, 4.6rem);
  font-weight: 900;
  color: var(--bone);
  line-height: .92;
}
.next-gate__city span { color: var(--throttle-red); font-size: .42em; vertical-align: .58em; margin-left: .18em; }
.next-gate__meta { color: var(--bone-dim); display: flex; flex-wrap: wrap; gap: .3rem .8rem; }
.next-gate__meta .dot { color: var(--throttle-red); }
.next-gate__count {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  color: var(--bone);
}
.next-gate__days { font-size: clamp(2.4rem, 1.4rem + 3vw, 4rem); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.next-gate__days-lbl { font-size: .62rem; letter-spacing: .075em; color: var(--bone-mute); text-transform: uppercase; }
.next-gate__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* ------------------------------------------------------------
   SEASON BOARD (hub) — the entry list
   The season as the official entry sheet: ruled rows on bare ink,
   date column as the scan edge, dot leaders, stamped status,
   registration as red italic handwriting. No boxes, no bars.
   ------------------------------------------------------------ */
.board-rows {
  display: block;
  border-bottom: 1px solid var(--bone-ghost);
}
.entry {
  position: relative;
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) 15.5rem;
  gap: 1rem 2.2rem;
  align-items: center;
  border-top: 1px solid var(--bone-ghost);
  padding: 1.7rem .6rem;
  transition: background var(--dur-fast) ease;
}
.entry:hover, .entry:has(a:focus-visible) { background: oklch(17.5% 0.022 55 / .55); }
@media (hover: none) { .entry:active { background: oklch(17.5% 0.022 55 / .55); } }

/* date column — the scan edge */
.entry__date { display: grid; justify-items: start; gap: .1rem; align-content: center; }
.entry__mo {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--throttle-red-bright);
}
.entry__day {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.9rem;
  line-height: .92;
  letter-spacing: 0;
  color: var(--bone);
}
.entry__yr { font-family: var(--font-data); font-weight: 500; font-size: .8rem; color: var(--bone-mute); font-variant-numeric: tabular-nums; }
/* postponed: the strike lives in the data itself */
.entry--postponed .entry__mo { color: var(--caution); }
.entry--postponed .entry__day { position: relative; color: var(--bone-mute); }
.entry--postponed .entry__day::after {
  content: "";
  position: absolute;
  left: -6%; right: -6%; top: 50%;
  border-top: 3px solid var(--caution);
  transform: rotate(-5deg);
}
.entry__tba { font-family: var(--font-data); font-weight: 700; font-size: .78rem; letter-spacing: .06em; color: var(--caution); text-transform: uppercase; }

/* main column */
.entry__main { min-width: 0; display: grid; gap: .5rem; }
.entry__folio {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.entry__folio b { color: var(--throttle-red-bright); font-weight: 700; }
.entry__cityline { display: flex; align-items: center; gap: 1.4rem; min-width: 0; }
.entry__city {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem);
  letter-spacing: .01em;
  line-height: .95;
  text-transform: uppercase;
  color: var(--bone);
  white-space: nowrap;
}
.entry__city a { text-decoration: none; color: inherit; transition: color var(--dur-fast) ease; }
.entry__city a:hover { color: var(--throttle-red-bright); }
.entry--postponed .entry__city a:hover { color: var(--caution); }
.entry__city .st {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--bone-mute);
  vertical-align: .78em;
  margin-left: .35em;
}
.entry__venue { font-family: var(--font-data); font-weight: 600; font-size: 1.02rem; color: var(--bone); }
.entry__venue small { font-weight: 400; font-size: .92em; color: var(--bone-dim); }
.entry__addr { font-family: var(--font-data); font-weight: 400; font-size: .88rem; color: var(--bone-mute); }
.entry__note { font-style: italic; font-size: .95rem; color: var(--caution); max-width: 52ch; }

/* actions column */
.entry__act { display: grid; gap: .55rem; justify-items: end; text-align: right; align-content: center; }
.entry__register {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.35rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--throttle-red-bright);
  text-decoration: none;
  padding-bottom: .12em;
  position: relative;
  line-height: 1;
}
.entry__register::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: var(--throttle-red);
  transform: scaleX(.35);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-snap);
}
.entry__register:hover::after, .entry__register:focus-visible::after { transform: scaleX(1); }
.entry__alerts {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: italic;
  font-size: 1.2rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--caution);
  text-decoration: none;
  border-bottom: 3px solid oklch(76% 0.128 75 / .6);
  padding-bottom: .12em;
  line-height: 1;
}
.entry__alerts:hover { border-bottom-color: var(--caution); }
.entry__utils { display: flex; gap: 1.1rem; }
.entry__file {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--bone-mute);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
.entry__file .btn__arrow { transition: translate var(--dur-fast) var(--ease-out-expo); }
.entry__file:hover { color: var(--bone); }
.entry__file:hover .btn__arrow { translate: .3rem 0; color: var(--throttle-red); }

@media (max-width: 960px) {
  .entry { grid-template-columns: 5.2rem minmax(0, 1fr); padding-inline: 0; align-items: start; }
  .entry__day { font-size: 2.1rem; }
  .entry__city { white-space: normal; }
  .entry__cityline .leader { display: none; }
  /* the stamp drops to its own line instead of running off the
     screen edge next to a wrapping city name */
  .entry__cityline { flex-wrap: wrap; gap: .55rem .9rem; }
  /* actions align under the event's own information, not out in
     the date gutter: date | (info, then what you can do about it) */
  .entry__act {
    grid-column: 2 / -1;
    justify-items: start;
    text-align: left;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 1.6rem;
    margin-top: .35rem;
    padding-top: .9rem;
    border-top: 1px solid var(--bone-ghost);
    width: 100%;
  }
}
@media (max-width: 540px) {
  .entry__act { grid-auto-flow: row; gap: .85rem; }
  .entry__utils { gap: 1.4rem; }
}

.hub-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-6);
}
.hub-foot__note { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .075em; color: var(--bone-mute); text-transform: uppercase; }

/* ------------------------------------------------------------
   EVENT FILE — detail hero
   ------------------------------------------------------------ */
.event-hero { padding-bottom: clamp(2.4rem, 2rem + 2vw, 4rem); }
.event-hero__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
/* file-cover folio line — round, season, and the D3.8 days-out
   clock as one printed line (JS fills [data-days-until]) */
.event-hero__folio {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--bone-mute);
  font-variant-numeric: tabular-nums;
}
.event-hero__folio b { color: var(--throttle-red-bright); font-weight: 700; }
.page-hero--amber .event-hero__folio b { color: var(--caution); }
.event-hero__cta { margin-top: var(--space-4); }
@media (max-width: 760px) {
  /* CTA economy (R3 guardrail C): on phones the fixed sticky bar is
     THE red register — the hero button is desktop's answer to having
     no bar (D3.8's own rationale). The days chip stays: facts aren't
     affordances. GJ's ghost alerts anchor stays — alerts, not
     register. */
  .event-hero__cta--register { display: none; }
}
.event-hero__title-block { display: grid; gap: var(--space-3); }
.event-hero__city {
  font-size: clamp(2.8rem, 1.2rem + 8vw, 8.5rem);
  font-weight: 900;
  color: var(--bone);
  letter-spacing: 0; /* was -.012em — 2/1000em from a TT/LL collision */
  line-height: .9;
}
.event-hero__city .st { color: var(--throttle-red); font-size: .4em; vertical-align: .6em; margin-left: .2em; letter-spacing: .02em; }
.event-hero__date {
  font-family: var(--font-data);
  font-weight: 500;
  font-size: clamp(1.05rem, .9rem + .8vw, 1.45rem);
  letter-spacing: 0;
  color: var(--bone-dim);
  font-variant-numeric: tabular-nums;
}
.event-hero__date strong { color: var(--bone); font-weight: 600; }
.event-hero__venue { color: var(--bone-dim); font-size: var(--text-lead); }
.event-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 720px) {
  .event-hero__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   REGISTER BAND — the program's printed insert. The page's only
   filled area: full-bleed throttle red, ink CTA, deadlines fused
   to the button. Replaces the slab race-window.
   ------------------------------------------------------------ */
.register-band {
  background: var(--throttle-red-deep);
  color: var(--bone);
  padding: clamp(2.6rem, 2rem + 3vw, 4.6rem) 0;
}
.register-band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--space-6);
  align-items: center;
}
@media (max-width: 880px) { .register-band__grid { grid-template-columns: 1fr; } }
.register-band__kicker {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: oklch(13.5% 0.005 300 / .85);
}
.register-band__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem);
  line-height: .95;
  text-transform: uppercase;
  color: var(--bone);
  margin: .2rem 0 .7rem;
}
.register-band__note { max-width: 46ch; color: oklch(97% 0.005 90 / .92); }
.register-band__note strong { color: var(--bone); }
.register-band__side { display: grid; gap: var(--space-3); justify-items: start; align-content: center; }
.register-band__cta {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--ink);
  text-decoration: none;
  padding: 1rem 1.7rem;
  transition: background var(--dur-fast) ease, translate var(--dur-fast) var(--ease-impact);
}
.register-band__cta:hover { background: oklch(8% 0.005 300); }
.register-band__cta:active { translate: 0 1px; }
.register-band__cta .btn__arrow { color: var(--throttle-red-bright); }
.register-band__deadline {
  display: flex;
  gap: .8rem;
  align-items: baseline;
  font-size: .95rem;
  color: oklch(97% 0.005 90 / .92);
}
.register-band__deadline b {
  font-family: var(--font-data);
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: oklch(13.5% 0.005 300 / .9);
  white-space: nowrap;
}
.register-band__alt {
  font-family: var(--font-data);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: oklch(97% 0.005 90 / .92);
  text-underline-offset: 4px;
}
.register-band__alt:hover { color: var(--bone); }


/* ------------------------------------------------------------
   PREV / NEXT — the gate chain
   ------------------------------------------------------------ */
.event-chain {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  border-top: 3px solid var(--bone);
  border-bottom: 1px solid var(--bone-ghost);
  position: relative;
}
.event-chain::before { /* thick-thin print rule */
  content: "";
  position: absolute;
  left: 0; right: 0; top: 3px;
  border-top: 1px solid var(--bone-ghost);
}
.chain-link {
  background: transparent;
  padding: var(--space-5) 0;
  text-decoration: none;
  display: grid;
  gap: .4rem;
  align-content: center;
  transition: background var(--dur-fast) ease;
}
.chain-link:hover, .chain-link:active { background: oklch(17.5% 0.022 55 / .5); }
.chain-link:active .chain-link__city { color: var(--throttle-red); }
.chain-link--next { text-align: right; }
.chain-link__dir {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--bone-mute);
}
.chain-link__city {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.2rem, 1rem + 1.2vw, 1.8rem);
  text-transform: uppercase;
  color: var(--bone);
  line-height: 1;
  transition: color var(--dur-fast) ease;
}
.chain-link:hover .chain-link__city { color: var(--throttle-red); }
.chain-link__date { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .075em; color: var(--bone-dim); }
.chain-link__date .is-amber { color: var(--caution); font-weight: 700; }
.chain-link--hub {
  display: grid;
  place-items: center;
  padding-inline: var(--space-6);
  background: transparent;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .075em;
  color: var(--bone-mute);
  text-transform: uppercase;
  transition: color var(--dur-fast) ease, background var(--dur-fast) ease;
}
.chain-link--hub:hover { color: var(--bone); background: var(--ink-raise); }
.chain-link--end { pointer-events: none; }
.chain-link--end .chain-link__city { color: var(--bone-mute); }
@media (max-width: 720px) {
  .event-chain { grid-template-columns: 1fr; }
  .chain-link--next { text-align: left; }
  .chain-link--hub { padding-block: var(--space-4); }
}