:root {
  --ink: #0c0d10;
  --ink-2: #16181d;
  --paper: #f3f2ee;
  --muted: #9c9ea6;
  --sky: #27a8e6;
  --blue: #1f3fc4;
  --red: #e5162a;
  --line: rgba(243, 242, 238, .16);
  --pad: clamp(20px, 5vw, 76px);
  --display: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --text: "Barlow", Arial, sans-serif;
  --tiles: repeating-conic-gradient(#14161a 0 25%, #0c0d10 0 50%) 0 0 / 34px 34px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font: 400 18px/1.5 var(--text); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; line-height: .96; text-wrap: balance; }
h2 { font-size: clamp(46px, 7vw, 112px); font-style: italic; text-transform: uppercase; }
p { margin: 0; }
a { color: inherit; }
img { display: block; max-width: 100%; }
cite { display: block; font-style: normal; font-size: 15px; color: var(--muted); }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 3px; }

.demo { position: fixed; inset: 0 0 auto; z-index: 30; padding: 6px var(--pad); background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.3; text-align: center; }

.top { position: fixed; top: 30px; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 30px; padding: 14px var(--pad); background: linear-gradient(rgba(12, 13, 16, .78), transparent); }
.brand { margin-right: auto; font: italic 800 30px/1 var(--display); text-decoration: none; }
.brand span { font-style: normal; font-weight: 600; font-size: 18px; opacity: .78; }
.top nav { display: flex; gap: 26px; font-size: 16px; font-weight: 500; }
.top nav a { text-decoration: none; }
.top nav a:hover { color: var(--sky); }
.top-cta { padding: 9px 18px; background: var(--paper); color: var(--ink); font-weight: 600; font-size: 16px; text-decoration: none; transform: skewX(-10deg); }
.top-cta:hover { background: var(--sky); }
.past .top { background: var(--ink); }

.rail { position: fixed; top: 0; bottom: 0; left: 0; z-index: 15; width: 6px; }
.rail i { display: block; width: 100%; height: 100%; transform: scaleY(var(--p, 0)); transform-origin: top; background: linear-gradient(90deg, var(--sky) 33%, var(--blue) 33% 66%, var(--red) 66%); }

.hero { position: relative; height: 170svh; }
.hero-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; filter: saturate(.8) brightness(.46); will-change: transform; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 13, 16, .88), rgba(12, 13, 16, .12) 62%), linear-gradient(0deg, rgba(12, 13, 16, .9), transparent 40%); }
.hero-word { position: absolute; top: 7svh; left: -1.5vw; margin: 0; font: italic 800 min(38vw, 60svh)/.86 var(--display); letter-spacing: -.02em; color: var(--paper); will-change: transform; white-space: nowrap; }
.hero-bike { position: absolute; right: -3vw; bottom: 3svh; width: min(76vw, 128svh); height: auto; transform-origin: 100% 100%; filter: drop-shadow(0 30px 26px rgba(0, 0, 0, .7)); will-change: transform; }
.hero-copy { position: absolute; left: var(--pad); right: var(--pad); bottom: 38px; display: grid; gap: 18px; }
.hero-copy h1 { max-width: 15ch; font-size: clamp(34px, 3.8vw, 58px); font-weight: 600; line-height: 1; }
.hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font-size: 17px; }
.hero-row b { font: italic 800 30px/1 var(--display); color: var(--sky); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 30px; background: var(--red); color: #fff; font: italic 800 23px/1 var(--display); text-decoration: none; text-transform: uppercase; transform: skewX(-10deg); transition: background .2s, transform .2s; }
.btn:hover { background: var(--blue); transform: skewX(-10deg) translateX(5px); }
.btn.wide { width: 100%; }
.btn.ghost { background: none; box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); }

.same { position: relative; padding: 130px var(--pad) 210px; background: var(--paper); color: var(--ink); overflow: hidden; }
.big { font: italic 800 clamp(60px, 11.5vw, 190px)/.92 var(--display); text-transform: uppercase; max-width: 11ch; }
.same-foot { display: flex; flex-wrap: wrap; gap: 18px 40px; align-items: baseline; margin-top: 36px; }
.same-foot p { max-width: 46ch; font-size: 20px; }
.link { font-weight: 600; text-underline-offset: 5px; }
.chevron { position: absolute; left: -6vw; right: -6vw; bottom: 0; display: grid; }
.chevron i { display: block; height: 30px; transform: translateX(calc(-100% + var(--run, 0) * 100%)); }
.chevron i:nth-child(1) { background: var(--sky); }
.chevron i:nth-child(2) { background: var(--blue); transition-delay: .05s; }
.chevron i:nth-child(3) { background: var(--red); }

.box { position: relative; height: 340svh; background: var(--tiles); }
.box-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; gap: 26px; overflow: hidden; padding-top: 70px; }
.box-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 18px 50px; padding-inline: var(--pad); }
.box-head p { max-width: 36ch; font-size: 19px; }
.track { display: flex; gap: 16px; width: max-content; padding-inline: var(--pad); will-change: transform; }
.track figure { position: relative; flex: none; margin: 0; width: min(46vh, 80vw); height: min(58svh, 560px); overflow: hidden; background: var(--ink-2); }
.track figure.wide { width: min(82vh, 86vw); }
.track img { width: 100%; height: 100%; object-fit: cover; }
figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 14px; background: var(--ink); font: italic 800 22px/1 var(--display); text-transform: uppercase; }

.bikes { padding: 120px var(--pad); background: var(--blue); }
.bikes h2 { margin-bottom: 44px; }
.bike-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 34px; }
.bike-list article { display: flex; flex-direction: column; gap: 12px; padding: 24px 0 34px; border-top: 2px solid rgba(255, 255, 255, .5); }
.bike-list h3 { font-size: clamp(32px, 3.2vw, 48px); font-style: italic; text-transform: uppercase; }
.bike-list p { flex: 1; font-size: 19px; }
.bike-list cite { color: #d7dcf5; }

.crew { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding: 120px var(--pad); background: var(--paper); color: var(--ink); }
.crew img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.crew > div { display: grid; gap: 20px; }
.crew h2 { font-size: clamp(44px, 5.4vw, 88px); }
.tag { width: max-content; padding: 4px 12px; background: var(--red); color: #fff; font: italic 800 22px/1.1 var(--display); text-transform: uppercase; }
.sub { padding-top: 16px; border-top: 1px solid rgba(12, 13, 16, .2); }
.crew cite { color: #55565c; margin-top: 4px; }

.quote { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 60px; padding: 120px var(--pad); background: var(--tiles); }
.quote > div { display: grid; gap: 16px; align-content: start; }
.quote > div p { color: #c7c8cd; max-width: 38ch; }
form { display: grid; gap: 22px; padding: 26px; background: var(--ink-2); }
fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
legend { padding: 0; margin-bottom: 10px; font-weight: 600; }
fieldset label { cursor: pointer; }
fieldset input { position: absolute; opacity: 0; }
fieldset span { display: flex; align-items: center; min-height: 46px; padding: 0 16px; box-shadow: inset 0 0 0 1px var(--line); }
fieldset input:checked + span { background: var(--sky); box-shadow: none; color: var(--ink); font-weight: 600; }
fieldset input:focus-visible + span { outline: 2px solid var(--paper); outline-offset: 2px; }
.field { display: grid; gap: 10px; font-weight: 600; }
.field input { min-height: 50px; padding: 0 14px; border: 1px solid var(--line); border-radius: 0; background: var(--ink); color: var(--paper); font: inherit; font-weight: 400; }
output { display: block; padding: 14px; background: var(--ink); color: var(--muted); font-size: 16px; }

.place { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 26px; padding: 64px var(--pad); background: var(--paper); color: var(--ink); }
.place h2 { font-size: clamp(36px, 4.6vw, 70px); margin-bottom: 8px; }

footer { padding: 24px var(--pad) 40px; background: var(--ink); color: var(--muted); font-size: 14px; }
footer p { max-width: 90ch; }
.float { display: none; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.on { opacity: 1; transform: none; }

@media (max-width: 860px) {
  body { font-size: 17px; }
  .demo { font-size: 12px; }
  .top { top: 42px; padding-block: 10px; }
  .top nav, .top-cta { display: none; }
  .rail { width: 4px; }
  .hero { height: 140svh; }
  .hero-bike { width: 150vw; right: -30vw; bottom: 37svh; }
  .hero-word { top: 13svh; left: -2vw; font-size: 62vw; }
  .hero-shade { background: linear-gradient(0deg, rgba(12, 13, 16, .96) 12%, rgba(12, 13, 16, .1) 52%); }
  .hero-copy { bottom: 22px; }
  .same { padding-block: 90px 160px; }
  .box { height: auto; }
  .box-pin { position: static; height: auto; padding-block: 80px; overflow: visible; }
  .track { width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .track figure, .track figure.wide { width: 82vw; height: 60vw; min-height: 240px; scroll-snap-align: center; }
  .bikes, .crew, .quote { padding-block: 84px; }
  .bike-list, .crew, .quote { grid-template-columns: minmax(0, 1fr); }
  .crew, .quote { gap: 32px; }
  form { padding: 18px; }
  .past .float { display: inline-flex; }
  .float { position: fixed; right: 16px; bottom: 16px; z-index: 25; align-items: center; min-height: 48px; padding: 0 22px; background: var(--red); color: #fff; font: italic 800 21px/1 var(--display); text-transform: uppercase; text-decoration: none; transform: skewX(-10deg); }
  footer { padding-bottom: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn { transition: none; }
  .hero { height: 100svh; }
  .box { height: auto; }
  .box-pin { position: static; height: auto; padding-block: 90px; }
  .track { width: 100%; overflow-x: auto; }
  .chevron i { transform: none; }
}