/* ThrottleCross Front Range Series landing page (/front-range/). Self-contained: no global.css. */
/* Layout: race-night poster. Full-bleed photo hero, a telemetry strip, then hard-edged slabs
   that alternate ink and dirt. The ridge from the logo recurs as section dividers. */
:root {
  --ink: #0B0A0C;
  --ink-raise: #17151A;
  --ink-line: #34303A;
  --dirt: #2A1C13;
  --dirt-high: #7A5A3E;
  --red: #D42127;
  --red-deep: #A8171C;
  --red-text: #F0545A;
  --blue: #1B74C4;
  --blue-text: #7FB3E6;
  --bone: #F4F1EC;
  --bone-dim: #CFC9BF;
  --bone-mute: #A39D93;
  --caution: #E8A33D;
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --text: "Saira", "Helvetica Neue", Arial, sans-serif;
  --stamp: "Saira Stencil One", "Saira Condensed", sans-serif;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 76rem;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body { background: var(--ink); color: var(--bone); font: 400 1.0625rem/1.6 var(--text); margin: 0; overflow-x: hidden; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--blue-text); outline-offset: 3px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.label { font: 700 .78rem/1.2 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-mute); }
.label.red { color: var(--red-text); }
h1, h2, h3 { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .92; margin: 0; text-wrap: balance; letter-spacing: .005em; }
h1 em, h2 em { font-style: normal; color: var(--red); }
.slant { transform: skewX(-9deg); display: inline-block; }
.btn { display: inline-flex; align-items: center; gap: .6em; font: 800 1.05rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; padding: 1.05em 1.6em; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); transition: background .15s, transform .15s; }
.btn-red { background: var(--red-deep); color: var(--bone); }
.btn-red:hover { background: var(--red); }
.btn-ghost { background: transparent; color: var(--bone); box-shadow: inset 0 0 0 2px var(--bone-mute); clip-path: none; }
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--bone); }
.deadlines { font: 600 .82rem/1.4 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--bone-dim); display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.deadlines b { color: var(--caution); font-weight: 700; }
.draft { display: inline-block; justify-self: start; width: max-content; font: 400 .8rem/1 var(--stamp); letter-spacing: .14em; color: var(--caution); border: 2px solid var(--caution); padding: .45em .7em .35em; transform: rotate(-3deg); }

/* top bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(11,10,12,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ink-line); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 21; background: var(--ink); }
.bar .wrap { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }
.bar .tx { height: 34px; width: auto; }
.bar .ama { height: 22px; width: auto; margin-right: auto; }
.bar .btn { padding: .75em 1.1em; font-size: .9rem; }

/* intro: the logo owns the first screen, then hands off to the hero as you scroll.
   --p runs 0 to 1 across the pinned stretch (set by script). Without script it all stacks. */
.intro { --p: 0; position: relative; background: var(--ink); }
.stage { position: relative; isolation: isolate; overflow: hidden; display: grid; }
.hero-photo, .stage::before { position: absolute; inset: 0; }
.hero-photo { z-index: -2; background: url(../img/photos/archive/red-rail-turn-1600.webp) 70% 40% / cover no-repeat; filter: saturate(.85) contrast(1.05); opacity: calc(.16 + var(--p) * .95); transform: scale(calc(1.12 - var(--p) * .12)); }
.stage::before { content: ""; z-index: -1; background: linear-gradient(100deg, var(--ink) 18%, rgba(11,10,12,.86) 46%, rgba(11,10,12,.25) 78%), linear-gradient(0deg, var(--ink) 0%, transparent 30%); opacity: var(--p); }
.logo-layer { display: grid; justify-items: center; align-content: center; gap: clamp(1.2rem, 3vw, 2rem); padding: 5rem max(var(--gutter), env(safe-area-inset-left, 0px)) 3rem; text-align: center;
  opacity: calc(1 - var(--p) * 2.5); transform: translateY(calc(var(--p) * -9vh)) scale(calc(1 + var(--p) * .18)); }
.fr-logo { width: min(980px, 92vw, 108svh); height: auto; display: block; overflow: visible; filter: drop-shadow(0 24px 50px rgba(0,0,0,.6)); }
.logo-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.6rem; font: 700 clamp(.78rem, .7rem + .3vw, .95rem)/1.2 var(--display); letter-spacing: .2em; text-transform: uppercase; color: var(--bone-dim); }
.logo-meta span + span { color: var(--red-text); }
.cue { display: none; }
.hero-layer { display: grid; align-content: center; }
.hero-layer .wrap { display: grid; gap: 2rem; padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3.5rem, 8vw, 6rem); }
.hero-layer h1 { font-size: clamp(2.9rem, 1.4rem + 6.2vw, 6.4rem); max-width: 13ch; }
.hero-layer h1 .sub { display: block; color: var(--bone-dim); font-size: .42em; letter-spacing: .06em; margin-bottom: .35em; }
.hero-layer p.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); max-width: 40ch; color: var(--bone-dim); margin: 0; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

/* scripted: pin the stage for one extra screen and cross-fade */
.pin .intro { height: 200svh; }
.pin .stage { position: sticky; top: 0; height: 100svh; }
.pin .logo-layer, .pin .hero-layer { grid-area: 1 / 1; min-height: 0; }
.pin .logo-layer { padding-block: 4rem 3rem; }
.pin .hero-layer { opacity: calc((var(--p) - .3) * 2.9); transform: translateY(calc((1 - var(--p)) * 6vh)); }
.pin .intro:not(.handoff) .hero-layer { pointer-events: none; }
.pin .hero-layer { padding-top: 64px; }
.pin .hero-layer .wrap { padding-block: 1.5rem; }
.pin .cue { display: grid; justify-items: center; gap: .5rem; margin-top: clamp(1rem, 4vh, 3rem); font: 700 .72rem/1 var(--display); letter-spacing: .3em; text-transform: uppercase; color: var(--bone-mute); opacity: calc(1 - var(--p) * 6); }
.cue i { width: 2px; height: 46px; background: linear-gradient(var(--red), transparent); }
@media (max-width: 560px) { .pin .hero-layer h1 { font-size: 2.7rem; } .pin .hero-layer .wrap { gap: 1.3rem; padding-block: 4.5rem 2rem; } }

/* telemetry strip */
.strip { background: var(--red-deep); }
.strip .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-block: 0; }
.strip .rd { padding: 1rem 1.2rem; border-left: 1px solid rgba(244,241,236,.22); font-family: var(--display); text-transform: uppercase; }
.strip .rd:first-child { border-left: 0; }
.strip .rd .n { font-weight: 700; font-size: .78rem; letter-spacing: .18em; opacity: .85; }
.strip .rd .c { font-weight: 900; font-size: 1.55rem; line-height: 1.05; }
.strip .rd .d { font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.strip .rd.clock { background: var(--ink); color: var(--bone); }
.strip .rd.clock .c { color: var(--caution); font-variant-numeric: tabular-nums; }

section { padding-block: clamp(4rem, 3rem + 6vw, 8rem); }
.sec-head { display: grid; gap: .9rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 48rem; }
.sec-head h2 { font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.6rem); }
.sec-head p { margin: 0; color: var(--bone-dim); font-size: 1.15rem; max-width: 56ch; }
.ridge-div { height: 46px; background: var(--ink); }
.ridge-div svg { display: block; width: 100%; height: 100%; }

/* altitude */
.alt { background: var(--ink); }
.alt-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .alt-grid { grid-template-columns: 1fr 1.15fr; } }
.alt-copy { display: grid; gap: 1.2rem; max-width: 60ch; }
.alt-copy p { margin: 0; color: var(--bone-dim); }
.alt-copy strong { color: var(--bone); }
.big-stat { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.big-stat .v { font: 900 clamp(4rem, 2rem + 8vw, 7.5rem)/.85 var(--display); color: var(--red); }
.big-stat .t { font: 700 1rem/1.3 var(--display); text-transform: uppercase; letter-spacing: .1em; max-width: 18ch; }
.chart { min-width: 0; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .cap { margin-top: .8rem; font-size: .82rem; color: var(--bone-mute); }

/* story */
.story { background: var(--dirt); position: relative; overflow: hidden; }
.story-grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .story-grid { grid-template-columns: .9fr 1.1fr; } }
.story figure { margin: 0; position: relative; }
.story figure img { width: 100%; aspect-ratio: 4/5; object-fit: cover; clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%); }
.story figure figcaption { position: absolute; left: 0; bottom: 1rem; background: var(--ink); padding: .4rem .7rem; font: 600 .72rem/1.2 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-mute); }
.story-body { display: grid; gap: 1.15rem; max-width: 62ch; min-width: 0; }
.story-body p { margin: 0; color: var(--bone-dim); }
.story-body p strong { color: var(--bone); font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.15em; }
.story-body .pull { font: 900 clamp(1.8rem, 1rem + 2.6vw, 2.8rem)/1 var(--display); text-transform: uppercase; color: var(--bone); border-left: 6px solid var(--red); padding-left: 1rem; }

/* plaque */
.plaque-sec { background: var(--ink); }
.plaque-grid { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .plaque-grid { grid-template-columns: 1fr 1fr; } }
.plaque-wrap { display: grid; place-items: center; padding: 2rem 0; background: radial-gradient(closest-side, rgba(232,163,61,.18), transparent 75%); }
.plaque { width: min(420px, 100%); aspect-ratio: 4/5; padding: 7%; background: linear-gradient(150deg, #4A2C1A, #2B170C 60%, #3B2214); border-radius: 6px; box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 3px #5C3A22, inset 0 0 0 10px #2B170C, inset 0 0 0 12px #6B4A2C; display: grid; grid-template-rows: auto 1fr auto; gap: 6%; transform: rotate(-2deg); }
.plaque .panel { background: var(--ink); padding: 8% 7%; box-shadow: inset 0 0 0 3px #8C7B5B; }
.plaque .plate { background: linear-gradient(180deg, #E8DFC8, #B8A57C 45%, #E2D6B8 55%, #A89468); color: #2B1F10; text-align: center; padding: 6% 5%; font-family: var(--display); text-transform: uppercase; box-shadow: 0 2px 0 #2B170C; }
.plaque .plate .k { font-weight: 900; font-size: clamp(1.05rem, .7rem + 1.2vw, 1.5rem); letter-spacing: .06em; line-height: 1; }
.plaque .plate .s { font-weight: 700; font-size: .8rem; letter-spacing: .14em; margin-top: .4em; }
.plaque .ama-plate { display: grid; place-items: center; }
.plaque .ama-plate img { width: 78%; }
.plaque-list { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.plaque-list li { display: grid; grid-template-columns: 3.2rem 1fr; gap: 1rem; align-items: start; padding-top: 1rem; border-top: 1px solid var(--ink-line); }
.plaque-list .k { font: 900 2rem/1 var(--display); color: var(--red); }
.plaque-list p { margin: 0; color: var(--bone-dim); }
.plaque-list b { color: var(--bone); }

/* rounds */
.rounds { background: var(--ink-raise); }
.round-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.round { background: var(--ink); border-top: 4px solid var(--ink-line); padding: 1.6rem 1.5rem 1.5rem; display: grid; gap: 1rem; align-content: start; position: relative; }
.round.final { border-top-color: var(--red); }
.round .tag { font: 700 .78rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--bone-mute); display: flex; justify-content: space-between; }
.round.final .tag span:last-child { color: var(--red-text); }
.round h3 { font-size: 2.5rem; }
.round .date { font: 800 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.round .venue { color: var(--bone-dim); font-size: .95rem; line-height: 1.45; }
.round .venue b { color: var(--bone); display: block; font-weight: 600; }
.round .el { font: 700 .8rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-text); }
.round .links { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; font: 700 .85rem/1 var(--display); letter-spacing: .1em; text-transform: uppercase; }
.round .links a { text-decoration: none; border-bottom: 2px solid var(--red); padding-bottom: .2em; }

/* points */
.points { background: var(--ink); }
.pts-grid { display: grid; gap: 3rem; }
@media (min-width: 960px) { .pts-grid { grid-template-columns: 1.2fr 1fr; } }
.pts-table-wrap { overflow-x: auto; min-width: 0; }
.pts-table { display: grid; grid-template-columns: repeat(10, minmax(3.2rem, 1fr)); gap: 3px; min-width: 34rem; }
.pts-table div { background: var(--ink-raise); text-align: center; padding: .55rem .2rem; font-variant-numeric: tabular-nums; }
.pts-table .p { font: 700 .72rem/1 var(--display); letter-spacing: .12em; color: var(--bone-mute); }
.pts-table .v { font: 900 1.6rem/1 var(--display); margin-top: .25rem; }
.pts-table div.top { background: var(--red-deep); }
.pts-table div.top .p { color: var(--bone); }
.pts-rules { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: r; }
.pts-rules li { padding: 1rem 0; border-top: 1px solid var(--ink-line); display: grid; grid-template-columns: 2.2rem 1fr; gap: .8rem; color: var(--bone-dim); }
.pts-rules li::before { counter-increment: r; content: counter(r, decimal-leading-zero); font: 800 1rem/1.5 var(--display); color: var(--red-text); }
.pts-rules b { color: var(--bone); }
.pts-note { margin-top: 1rem; color: var(--bone-mute); font-size: .9rem; }

/* classes */
.classes { background: var(--dirt); }
.cls-groups { display: grid; gap: 1.4rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.cls-g h3 { font-size: 1.3rem; color: var(--bone); margin-bottom: .6rem; letter-spacing: .06em; }
.cls-g ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.cls-g li { font: 700 .8rem/1 var(--display); letter-spacing: .08em; background: rgba(11,10,12,.55); border: 1px solid var(--dirt-high); padding: .5em .7em; }

/* faq */
.faq { background: var(--ink); }
.faq-list { display: grid; gap: 0; max-width: 52rem; }
.faq details { border-top: 1px solid var(--ink-line); padding: 1.1rem 0; }
.faq summary { cursor: pointer; font: 800 1.25rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .03em; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.5rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .7rem 0 0; color: var(--bone-dim); max-width: 60ch; }

/* final cta */
.final-cta { position: relative; isolation: isolate; overflow: hidden; text-align: left; }
.final-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--ink) 25%, rgba(11,10,12,.55)), url(../img/photos/archive/whip-finish-truss-1600.webp) center 35% / cover; }
.final-cta .wrap { display: grid; gap: 1.6rem; }
.final-cta h2 { font-size: clamp(2.6rem, 1.2rem + 5.5vw, 5.6rem); max-width: 14ch; }

footer { background: var(--ink); border-top: 1px solid var(--ink-line); padding-block: 2rem; color: var(--bone-mute); font-size: .85rem; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; }
footer img { height: 22px; width: auto; }

@media (max-width: 560px) {
  .bar .ama { display: none; }
  .bar .tx { margin-right: auto; height: 20px; }
  .strip .rd { border-left: 0; border-top: 1px solid rgba(244,241,236,.22); }
}
@media (prefers-reduced-motion: no-preference) {
  /* the build: high peaks rise, the Front Range rises in front, the name slams in, the band cuts across */
  .r-back { animation: ridge 1s .1s cubic-bezier(.2,.8,.2,1) both; }
  .r-front { animation: ridge 1s .35s cubic-bezier(.2,.8,.2,1) both; }
  .fr-word { transform-box: fill-box; transform-origin: 50% 100%; animation: slam .55s .8s cubic-bezier(.3,1.4,.5,1) both; }
  .fr-plate { transform-box: fill-box; transform-origin: 0 50%; animation: cut .45s 1.15s cubic-bezier(.7,0,.2,1) both; }
  .fr-series, .fr-flank { animation: fade .4s 1.45s ease-out both; }
  .logo-meta { animation: fade .5s 1.7s ease-out both; }
  .cue i { animation: drip 1.6s 2s ease-in-out infinite; transform-origin: top; }
  @keyframes ridge { from { transform: translateY(70px); opacity: 0; } }
  @keyframes slam { from { transform: scale(1.6) skewX(-14deg); opacity: 0; } }
  @keyframes cut { from { transform: scaleX(0); } }
  @keyframes fade { from { opacity: 0; } }
  @keyframes drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
}
.bar .wrap > a:first-child { display: flex; }
@media (max-width: 560px) { .bar .wrap > a:first-child { margin-right: auto; } }
.pin .hero-layer .wrap { gap: 1.4rem; }
@media (max-height: 900px) { .pin .hero-layer h1 { font-size: clamp(2.6rem, 8.5svh, 5.4rem); } }