/* ============================================================
   THROTTLECROSS — homepage B (A/B test arm, ticket-first)
   Photo-led and static: no pin, no scrub, no reveals. The look
   borrows the approved fan ads: full-bleed archive photography,
   condensed type, a red venue chip, slanted cuts and colour
   fields. Red and dirt duotones only; holeshot blue stays data
   and focus (design contract). Every rule is scoped to .hb-*;
   shared parts (.btn, .kicker, .pick, .sticky-register) come
   from global.css and pages.css.
   ============================================================ */

.hb-tag {
  position: absolute;
  z-index: 3;
  padding: .3em .6em;
  font-size: .62rem;
  color: var(--bone-dim);
  background: var(--ink-veil);
  border-radius: var(--radius-chip);
}

/* shared photo backdrop for a section: warm, dark, behind the copy */
.hb-backdrop {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(.55) brightness(.5) contrast(1.1);
}

/* slanted top edge: the section overlaps the one above by --cut and
   the clipped corner shows it through */
.hb-cut {
  --cut: clamp(1.5rem, 4vw, 4rem);
  margin-top: calc(-1 * var(--cut));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.hb-cut--rev { clip-path: polygon(0 0, 100% var(--cut), 100% 100%, 0 100%); }

/* ---- hero: copy on ink, the photo on a slant ------------------ */
.hb-hero {
  --colw: 38vw;
  --city-max: 12rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
  min-height: min(100svh, 62rem);
  background:
    radial-gradient(90% 70% at 0% 110%, var(--dirt-deep), transparent 60%),
    var(--ink);
}
.hb-hero__copy {
  position: relative;
  z-index: 2;
  align-self: end;
  padding:
    calc(var(--head-total) + clamp(3rem, 2rem + 4vw, 6rem))
    clamp(1.25rem, .5rem + 2vw, 2.5rem)
    clamp(2.5rem, 2rem + 3vw, 4.5rem)
    max(var(--gutter), calc((100vw - var(--page-max)) / 2));
}
.hb-hero__photo {
  position: relative;
  margin: 0;
  background: var(--throttle-red);  /* shows as the red slash along the cut */
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
}
.hb-hero__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 32%;
  clip-path: polygon(calc(16% + 14px) 0, 100% 0, 100% 100%, 14px 100%);
}
.hb-hero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, oklch(13.5% 0.005 300 / .75), transparent 22%),
    linear-gradient(to top, oklch(13.5% 0.005 300 / .85), transparent 46%);
  pointer-events: none;
}
.hb-hero__punch {
  position: absolute;
  z-index: 2;
  left: 14%;
  right: var(--gutter);
  bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  font-size: clamp(2.6rem, 1rem + 3.4vw, 5.2rem);
  font-weight: 900;
  line-height: .9;
  color: var(--bone);
  text-shadow: 0 10px 40px oklch(0% 0 0 / .6);
}
.hb-hero__photo .hb-tag { top: calc(var(--head-total) + 1rem); right: var(--gutter); }

.hb-hero__eyebrow {
  font-size: var(--text-small);
  letter-spacing: .16em;
  color: var(--bone-dim);
}
.hb-hero__eyebrow b {
  background: var(--throttle-red-deep);
  color: var(--bone);
  padding: .25em .6em;
  margin-right: .3em;
  border-radius: var(--radius-chip);
}
.hb-hero__title { margin-top: var(--space-4); line-height: .8; }
.hb-hero__brand {
  display: block;
  font-weight: 800;
  font-style: italic;
  font-size: clamp(1.4rem, 1rem + 2vw, 3rem);
  letter-spacing: .01em;
  color: var(--throttle-red-bright);
  transform: skewX(var(--slant));
  transform-origin: left;
}
.hb-hero__city {
  display: block;
  font-weight: 900;
  /* sized to the longest word and the column, so COLORADO SPRINGS
     fits as well as RENO */
  font-size: min(var(--city-max), calc(var(--colw) * 2.05 / var(--len, 6)));
  letter-spacing: -.03em;
  margin-left: -.04em;
  color: var(--bone);
  text-wrap: balance;
}
/* the venue chip, as on the approved ads */
.hb-hero__when {
  margin-top: var(--space-4);
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0 .5rem;
  padding: .4em .75em;
  background: var(--throttle-red-deep);
  border-radius: var(--radius-chip);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(1rem, .9rem + .6vw, 1.4rem);
  letter-spacing: .04em;
  color: var(--bone);
}
.hb-hero__when .dot { opacity: .7; }
.hb-hero__lede {
  margin-top: var(--space-4);
  max-width: 44ch;
  font-size: var(--text-lead);
  color: var(--bone-dim);
  text-wrap: pretty;
}

.hb-hero__buy {
  margin-top: var(--space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-5);
}
.hb-buy { font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem); padding: 1.15rem 2.2rem; }
.hb-btn--ink { background: var(--ink); color: var(--bone); }
.hb-btn--ink:hover { background: oklch(8% 0.005 300); box-shadow: 0 10px 34px -12px oklch(0% 0 0 / .8); }
.hb-hero__price,
.hb-ticket__price {
  font-family: var(--font-data);
  font-size: var(--text-small);
  letter-spacing: .06em;
  color: var(--bone-dim);
  line-height: 1.25;
}
.hb-hero__price strong,
.hb-ticket__price strong {
  color: var(--bone);
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0;
}
.hb-hero__price small,
.hb-ticket__price small {
  display: block;
  font-size: var(--text-micro);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bone-mute);
}

.hb-hero__facts {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--ink-line);
}
.hb-hero__facts li { padding: var(--space-3) var(--space-5) 0 0; margin-right: var(--space-5); display: grid; gap: .15rem; }
.hb-hero__facts li + li { border-left: 1px solid var(--ink-line); padding-left: var(--space-5); }
.hb-hero__facts li[hidden] { display: none; }
.hb-hero__facts .k { font-family: var(--font-data); font-size: var(--text-micro); letter-spacing: .2em; color: var(--bone-mute); }
.hb-hero__facts .v {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  font-variant-numeric: tabular-nums;
}
.hb-hero__facts [data-days-until] { color: var(--throttle-red-bright); }

.hb-hero__else {
  margin-top: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-6);
  font-size: var(--text-small);
}
.hb-hero__else a {
  color: var(--bone-dim);
  text-decoration: underline;
  text-decoration-color: var(--bone-ghost);
  text-underline-offset: 4px;
  padding-block: .55rem; /* ≥44px tap height with the line box */
}
.hb-hero__else a:hover { color: var(--bone); text-decoration-color: var(--throttle-red); }

/* ---- ticker: one red strip of the night's facts, static -------- */
.hb-ticker {
  position: relative;
  z-index: 4;
  overflow: clip;
  padding: 1.4rem 0;
  margin: -1.6rem 0 -2.2rem;
  pointer-events: none;
}
.hb-ticker__row {
  width: 112%;
  margin-left: -6%;
  padding: .75rem 0;
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-1.8deg);
  background: var(--throttle-red-deep);
  border-block: 3px solid var(--ink);
  box-shadow: 0 16px 34px -14px oklch(0% 0 0 / .8);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, .8rem + .9vw, 1.6rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--bone);
}
.hb-ticker__row i { font-style: normal; margin: 0 .9em; color: var(--ink); }

/* ---- sections --------------------------------------------------- */
.hb-section { position: relative; isolation: isolate; padding: clamp(4.5rem, 3rem + 5vw, 8.5rem) 0; }
.hb-section .kicker,
.hb-racers .kicker,
.hb-receipts .kicker { white-space: normal; flex-wrap: wrap; }
.hb-section__title {
  margin-top: var(--space-5);
  max-width: 18ch;
  font-size: var(--text-display);
  font-weight: 900;
  color: var(--bone);
  text-wrap: balance;
}
.hb-section__title em { font-style: normal; color: var(--throttle-red); }
.hb-section__intro {
  margin-top: var(--space-4);
  max-width: 52ch;
  font-size: var(--text-lead);
  color: var(--bone-dim);
  text-wrap: pretty;
}

/* pick your city: the /tickets/ cards over a dark archive photo */
.hb-pick { overflow: clip; padding-top: clamp(5rem, 3.5rem + 5vw, 8.5rem); }
.hb-pick::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, var(--ink) 0%, oklch(13.5% 0.005 300 / .55) 40%, oklch(13.5% 0.005 300 / .92) 100%);
}
.hb-pick .pick-grid { margin-top: var(--space-6); }
.hb-pick .pick {
  background: oklch(17% 0.006 300 / .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.hb-pick .pick--live { background: linear-gradient(160deg, oklch(30% .11 27 / .92), oklch(17% 0.006 300 / .85) 70%); }

/* race night: one photo per beat, staggered, then the ticket */
.hb-stops {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: clamp(1rem, .5rem + 1.2vw, 1.75rem);
  align-items: start;
}
.hb-stop:nth-child(even) { margin-top: clamp(1.5rem, 1rem + 2vw, 3.5rem); }
.hb-stop__photo {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--ink-raise);
}
.hb-stop__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale var(--dur-slow) var(--ease-out-expo); }
.hb-stop:hover .hb-stop__photo img { scale: 1.04; }
html.motion-reduced .hb-stop__photo img { transition: none; }
.hb-stop__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, oklch(13.5% 0.005 300 / .88), transparent 50%);
}
.hb-stop__photo::before { /* the gate bar */
  content: "";
  position: absolute;
  z-index: 2;
  left: 0; top: 0;
  width: 38%;
  height: 5px;
  background: var(--throttle-red);
}
.hb-stop__time {
  position: absolute;
  z-index: 2;
  left: .9rem;
  bottom: .7rem;
  font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3.6rem);
  font-weight: 900;
  line-height: .85;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.hb-stop__time small { font-size: .38em; margin-left: .15em; letter-spacing: .06em; color: var(--throttle-red-bright); }
.hb-stop__what { margin-top: .9rem; font-size: 1.35rem; font-weight: 800; color: var(--bone); }
.hb-stop__body { margin-top: .35rem; font-size: var(--text-small); color: var(--bone-dim); text-wrap: pretty; }

.hb-ticket {
  position: relative;
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 23rem);
  border: 1px solid var(--throttle-red-dim);
  border-radius: var(--radius-card);
  background: linear-gradient(160deg, oklch(26% .09 27), var(--ink-raise) 70%);
  box-shadow: var(--shadow-deep);
}
.hb-ticket__main { padding: var(--space-5) clamp(1.25rem, 1rem + 2vw, 2.5rem); display: grid; gap: var(--space-3); align-content: center; }
.hb-ticket__key { color: var(--bone-mute); }
.hb-ticket__city {
  font-size: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  font-weight: 800;
  font-style: italic;
  color: var(--throttle-red-bright);
  line-height: .9;
}
.hb-ticket__city span {
  display: block;
  font-style: normal;
  font-weight: 900;
  font-size: 2.4em;
  color: var(--bone);
}
.hb-ticket__rows {
  margin: var(--space-2) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--space-3) var(--space-5);
}
.hb-ticket__rows dt { font-family: var(--font-data); font-size: var(--text-micro); letter-spacing: .14em; color: var(--bone-mute); }
.hb-ticket__rows dd { margin: .15rem 0 0; font-size: var(--text-small); color: var(--bone); }
.hb-ticket__stub {
  position: relative;
  padding: var(--space-5);
  display: grid;
  gap: var(--space-3);
  align-content: center;
  border-left: 2px dashed var(--bone-ghost); /* the perforation */
}
.hb-ticket__stub::before,
.hb-ticket__stub::after { /* punched notches */
  content: "";
  position: absolute;
  left: -.95rem;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: var(--ink);
}
.hb-ticket__stub::before { top: -.95rem; }
.hb-ticket__stub::after { bottom: -.95rem; }
.hb-ticket__btn { width: 100%; }
.hb-ticket__fine { color: var(--bone-mute); text-align: center; }

/* the plain answers: a bone field, a photo per answer */
.hb-answers {
  color: var(--ink);
  background: var(--bone);
  padding-top: calc(clamp(4.5rem, 3rem + 5vw, 8.5rem) + var(--cut, 0px));
}
.hb-answers .kicker { color: oklch(42% 0.012 85); }
.hb-answers .kicker__no { color: var(--throttle-red-press); }
.hb-answers .hb-section__title { color: var(--ink); max-width: 16ch; }
.hb-answers .hb-section__title em { color: var(--throttle-red-deep); }
.hb-tiles {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.hb-tile img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-card);
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
}
.hb-tile__q { margin-top: .8rem; color: var(--throttle-red-press); }
.hb-tile__a { margin-top: .3rem; font-size: 1.65rem; font-weight: 900; line-height: .95; color: var(--ink); }
.hb-tile__body { margin-top: .45rem; font-size: var(--text-small); color: oklch(34% 0.01 85); text-wrap: pretty; }

/* receipts: the three reviews on a red field */
.hb-receipts {
  position: relative;
  padding: calc(clamp(4.5rem, 3rem + 5vw, 8rem) + var(--cut, 0px)) 0 clamp(4.5rem, 3rem + 5vw, 8rem);
  background: var(--throttle-red-deep);
  color: var(--bone);
}
.hb-receipts .kicker { color: oklch(95.5% 0.007 90 / .85); }
.hb-receipts .kicker__no { color: var(--bone); }
.hb-receipts__title { margin-top: var(--space-5); max-width: 18ch; font-size: var(--text-display); font-weight: 900; text-wrap: balance; }
.hb-quotes {
  list-style: none;
  margin: var(--space-6) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr;
  gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  align-items: end;
}
.hb-quote { border-top: 2px solid oklch(95.5% 0.007 90 / .35); padding-top: var(--space-4); display: grid; gap: .7rem; }
.hb-quote blockquote { margin: 0; }
.hb-quote blockquote p { font-size: clamp(1.2rem, 1rem + .8vw, 1.7rem); line-height: 1.25; font-style: italic; text-wrap: pretty; }
.hb-quote--big blockquote p {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem);
  line-height: .88;
}
.hb-quote__src { color: oklch(95.5% 0.007 90 / .9); }

/* racers: the guardrail band over a dark archive photo */
.hb-racers {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(clamp(3.5rem, 2.5rem + 3vw, 6rem) + var(--cut, 0px)) 0 clamp(3.5rem, 2.5rem + 3vw, 6rem);
  background: var(--dirt-deep);
}
.hb-racers::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, oklch(13.5% 0.005 300 / .92) 0%, oklch(13.5% 0.005 300 / .7) 55%, oklch(13.5% 0.005 300 / .35) 100%);
}
.hb-racers__row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-5) var(--space-6);
}
.hb-racers__title { margin-top: var(--space-3); font-size: var(--text-title); font-weight: 900; color: var(--bone); }
.hb-racers__title span { color: var(--bone-mute); }
.hb-racers__deadlines { margin-top: var(--space-3); color: var(--bone-dim); }
.hb-racers__deadlines .dot { margin-inline: .6em; color: var(--throttle-red-bright); }
.hb-racers__act { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.hb-racers__more { color: var(--bone-dim); font-size: var(--text-small); padding: .55rem .4rem; }
.hb-racers__more:hover { color: var(--bone); }

/* last call: a red duotone of the archive */
.hb-last {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: calc(clamp(5rem, 4rem + 6vw, 10rem) + var(--cut, 0px)) 0 clamp(5rem, 4rem + 6vw, 10rem);
  text-align: center;
  background: var(--throttle-red-deep);
}
.hb-last .hb-backdrop {
  filter: grayscale(1) contrast(1.25) brightness(.95);
  mix-blend-mode: multiply;
}
.hb-last::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(60% 70% at 50% 50%, oklch(13.5% 0.005 300 / .55), transparent 75%);
}
.hb-last__inner { display: grid; justify-items: center; gap: var(--space-5); }
.hb-last__title {
  max-width: 16ch;
  font-size: var(--text-display);
  font-weight: 900;
  color: var(--bone);
  text-wrap: balance;
  text-shadow: 0 8px 30px oklch(0% 0 0 / .5);
}
.hb-last__title span {
  display: inline-block;
  margin-top: .12em;
  padding: .04em .22em .02em;
  background: var(--bone);
  color: var(--ink);
  text-shadow: none;
  transform: skewX(var(--slant));
}
.hb-last__meta { max-width: 60ch; color: var(--bone); text-shadow: 0 2px 10px oklch(0% 0 0 / .6); }

/* ---- breakpoints ---------------------------------------------- */
@media (max-width: 1100px) {
  .hb-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-quotes { grid-template-columns: 1fr 1fr; }
  .hb-quote--big { grid-column: 1 / -1; padding-top: var(--space-5); margin-top: var(--space-5); }
}
@media (max-width: 960px) {
  .hb-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-stop:nth-child(even) { margin-top: clamp(1.5rem, 1rem + 2vw, 3.5rem); }
}
@media (max-width: 860px) {
  .hb-ticket { grid-template-columns: 1fr; }
  .hb-ticket__stub { border-left: 0; border-top: 2px dashed var(--bone-ghost); }
  .hb-ticket__stub::before { top: -.95rem; left: -.95rem; }
  .hb-ticket__stub::after { top: -.95rem; bottom: auto; left: auto; right: -.95rem; }
}
@media (max-width: 760px) {
  .hb-hero {
    --colw: 88vw;
    --city-max: 4.8rem;
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hb-hero__photo {
    order: -1;
    height: calc(var(--head-total) + 30svh);
    clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%);
  }
  .hb-hero__photo img { clip-path: polygon(0 0, 100% 0, 100% calc(84% - 8px), 0 calc(100% - 8px)); object-position: 55% 30%; }
  .hb-hero__punch { left: var(--gutter); bottom: 22%; font-size: clamp(1.9rem, 1.2rem + 3.4vw, 2.6rem); }
  .hb-hero__photo .hb-tag { top: calc(var(--head-total) + .4rem); right: var(--gutter); }
  .hb-hero__copy { padding: var(--space-3) var(--gutter) var(--space-6); }
  .hb-hero__when { font-size: 1rem; }
  .hb-buy { width: 100%; }
  .hb-hero__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--space-3); }
  .hb-hero__facts li, .hb-hero__facts li + li { margin: 0; padding: var(--space-3) 0 0; border-left: 0; }
  .hb-hero__facts .k { letter-spacing: .12em; }
  .hb-hero__else { flex-direction: column; }
  .hb-quotes { grid-template-columns: 1fr; gap: var(--space-5); }
  .hb-quote--big { margin-top: 0; }
  .hb-racers__row { align-items: flex-start; }
  /* the fixed ticket bar must never cover the last line of the page */
  .site-foot { padding-bottom: calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 560px) {
  .hb-tiles { grid-template-columns: 1fr; }
  .hb-stops { grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-3); }
  .hb-stop__what { font-size: 1.1rem; }
  .hb-stop__body { font-size: .8rem; }
}