/* FORGE Ride page (ride.html): Montréal 2026 scene, Québec track, Alpe d'Huez scene, climbs to scale, the 36-route catalogue, online, real power, workouts, moods & music, garage, where to play, and the link to the app. */

/* ── hero ── */
figure.frame, figure.card { margin: 0; }
.phero--img .h-hero { font-size: clamp(52px, min(8.4vw, 13vh), 150px); }

/* ── 01 / 03 · sticky scenes (Montréal 2026, Alpe d'Huez) ── */
.rd-scene { height: 440vh; }
.rd-scene--5 { height: 540vh; }
@media (max-width: 800px) {
  .rd-scene { height: 400vh; } .rd-scene--5 { height: 480vh; }
  .rd-scene .scene__shade { background: linear-gradient(180deg, rgba(7, 9, 11, .72), rgba(7, 9, 11, .62) 40%, rgba(7, 9, 11, .94)); }
}
@media (max-width: 600px) { .rd-scene .scene__top .chip { display: none; } .rd-scene .scene__meter { gap: 18px; } }
.rd-scene .h-2 { font-size: clamp(30px, 3.4vw, 56px); }
.rd-bigs > .scene__big { display: flex; align-items: flex-start; gap: 0; font-size: clamp(76px, 13vw, 210px); }
.rd-bigs > .scene__big sup { font-family: var(--mono); font-size: max(12px, .075em); font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin: .55em 0 0 .35em; color: var(--on-ink-2); max-width: 11ch; line-height: 1.3; }
.rd-scene .scene__stage.rd-bigs { margin-bottom: -6px; }
.rd-moments { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; flex: 1; }
.rd-moments li { display: grid; gap: 10px; }
.rd-moments li::before { content: ""; height: 3px; border-radius: 3px; background: var(--ink-line); transform: skewX(var(--skew)); transition: background .5s var(--ease); }
.rd-moments li.is-on::before { background: var(--ride); }
.rd-moments li .label { transition: color .4s; }
.rd-moments li.is-on .label { color: var(--on-ink); }
@media (max-width: 800px) { .rd-moments { padding-right: 36px; gap: 8px; } .rd-moments .label { font-size: 9.5px; letter-spacing: .1em; } }

/* ── 02 · Québec track ── */
#quebec .world > img { object-position: center; }

/* ── 04 · 12 climbs to scale + 2 stages ── */
.rd-real { display: grid; gap: clamp(32px, 5vw, 80px); align-items: start; }
@media (min-width: 1000px) { .rd-real { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.rd-real__side { display: grid; gap: 28px; }
.rd-real__img { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) { .rd-real__side { position: sticky; top: 110px; } }
@media (max-width: 999px) { .rd-real__img { aspect-ratio: 16 / 11; } }
figure.screen.rd-real__menu { margin: 0 0 30px; }
.rd-real__menu figcaption { position: absolute; left: 0; top: calc(100% + 22px); color: var(--faint); }
@media (max-width: 999px) { figure.screen.rd-real__menu { margin-bottom: 44px; } .rd-real__menu figcaption { top: calc(100% + 14px); } }
.rd-bars__legend { margin-bottom: 18px; }
.rd-bars { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.rd-bars li { display: grid; gap: 10px; padding: 18px 0 16px; border-bottom: 1px solid var(--line); }
.rd-bars__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.rd-bars__top h3 { font-size: clamp(19px, 1.5vw, 23px); letter-spacing: -.025em; font-variation-settings: "wdth" 90; }
.rd-bars__top span { font-size: 14px; color: var(--faint); }
.rd-bars__track { height: 10px; border-radius: 10px; background: var(--paper-2); overflow: hidden; }
.rd-bars__track i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--ride); border-radius: 10px; transform-origin: left; transform: scaleX(1); transition: transform 1.3s var(--ease); transition-delay: calc(var(--i) * 70ms + 200ms); }
.js .rd-bars[data-reveal]:not(.is-in) .rd-bars__track i { transform: scaleX(0); }
.rd-bars__nums { display: flex; gap: 22px; font-family: var(--mono); font-size: 13px; color: var(--mute); }
.rd-bars__nums b { color: var(--on-paper); font-weight: 500; }
.rd-bars__nums span:last-child { margin-left: auto; }
.rd-stages { margin-top: clamp(56px, 9vh, 100px); }
.rd-feat-num { font-size: clamp(36px, 3vw, 48px); }

/* ── 04b · the whole world track ── */
.rd-world__aside { display: grid; gap: 22px; justify-items: end; max-width: 44ch; }
.rd-world__aside p { font-size: 15px; }
@media (max-width: 900px) { #monde .hs__head { flex-direction: column; align-items: start; } .rd-world__aside { justify-items: start; } }

/* ── 05 · route catalogue ── */
.rd-cat-tabs .tabs { margin-bottom: 28px; }
.rd-cat-tabs .tabs button { font-size: 16px; }
.rd-cat-tabs .tabs sup { font-family: var(--mono); font-size: 10.5px; color: var(--pink); margin-left: 3px; vertical-align: super; }
.rd-panel__lead { color: var(--mute); max-width: 62ch; margin-bottom: 28px; }
.rd-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rd-grid .world { width: auto; aspect-ratio: 5 / 6; }
.rd-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rd-grid--4 .world { aspect-ratio: 3 / 4; }
.rd-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rd-grid--2 .world { aspect-ratio: 16 / 11; }
.rd-grid .world__in .label { color: rgba(243, 241, 234, .66); }
.rd-grid .world__in h3 { font-size: clamp(24px, 2vw, 32px); }
.rd-grid--4 .world__in h3 { font-size: clamp(22px, 1.7vw, 28px); }
@media (max-width: 1100px) and (min-width: 761px) {
  .rd-grid, .rd-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-grid .world, .rd-grid--4 .world, .rd-grid--2 .world { aspect-ratio: 4 / 5; }
}
@media (max-width: 760px) {
  .rd-grid, .rd-grid--4, .rd-grid--2 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 12px; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 6px; scroll-padding: 0 var(--gutter); }
  .rd-grid::-webkit-scrollbar { display: none; }
  .rd-grid .world, .rd-grid--4 .world, .rd-grid--2 .world { width: 78vw; aspect-ratio: 4 / 5; scroll-snap-align: start; flex: none; }
}

/* ── 06 · online: the events board on a monitor, then three image-led cards ── */
.rd-online { box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); }
.rd-online .chip .dot { background: #fff; }
.rd-live { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; margin: clamp(70px, 11vh, 130px) 0; }
@media (min-width: 1000px) { .rd-live { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.rd-trio { display: grid; gap: 18px; }
@media (min-width: 900px) { .rd-trio { grid-template-columns: 1fr 1.3fr 1fr; } }
.rd-trio .feat__img, .rd-trio .feat__img.crop { aspect-ratio: 16 / 10; }

/* shared: short editorial lines beside a screen (online, workouts) */
.rd-lines { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); }
.rd-lines li { display: grid; gap: 6px; padding: 20px 0 18px; border-bottom: 1px solid var(--line); }
.rd-lines .label { color: var(--pink); }
.s-paper .rd-lines .label { color: var(--pink-ink); }
.rd-lines p { color: var(--mute); font-size: 15.5px; }

/* .crop shows one region of a 1920×1080 capture: --x/--y/--w/--h are pixels of the source. */
.crop { position: relative; display: block; overflow: hidden; aspect-ratio: var(--w) / var(--h); border-radius: clamp(9px, .9vw, 14px); background: #f4f5f7; }
.crop img { position: absolute; max-width: none; width: calc(1920 / var(--w) * 100%) !important; height: auto !important; left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); border-radius: 0 !important; object-fit: fill !important; }
.feat__img.crop { border-radius: 0; }
@media (max-width: 700px) { .crop--half { --w: 740 !important; } .crop--zoom { --w: 1000 !important; } }
figure.screen { margin: 0; }

/* catalogue: the game's route picker above the tabs */
.rd-menu { display: grid; gap: 28px; align-items: center; margin-bottom: clamp(56px, 9vh, 100px); }
@media (min-width: 1000px) { .rd-menu { grid-template-columns: minmax(0, 2.2fr) minmax(0, .7fr); gap: 56px; } }

/* ── 07 · real power ── */
.rd-power { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .rd-power { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.rd-cap { position: absolute; left: clamp(18px, 2vw, 30px); bottom: clamp(18px, 2vw, 30px); z-index: 1; }
.rd-ticks { list-style: none; margin: 0; padding: 0; display: grid; border-top: 1px solid var(--line); width: 100%; }
.rd-ticks li { display: flex; align-items: baseline; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--mute); }
.rd-ticks li b { color: var(--on-ink); font-weight: 600; }
.rd-ticks li::before { content: ""; width: 16px; height: 3px; margin-top: .7em; background: var(--ride); transform: skewX(var(--skew)); flex: none; align-self: flex-start; }

/* ── 08 · workouts (paper): the workout picker on a monitor ── */
.rd-wo { display: grid; gap: clamp(36px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .rd-wo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); } .rd-wo__screen { order: 2; } }
.rd-wo__screen { box-shadow: 0 60px 110px -50px rgba(7, 9, 11, .55), 0 24px 40px -24px rgba(7, 9, 11, .4), inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* ── 09 · moods & music ── */
.rd-mood { display: grid; gap: clamp(32px, 5vw, 80px); align-items: center; }
@media (min-width: 1000px) { .rd-mood { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.rd-mood .tabs { margin-bottom: 22px; }
.rd-mood__img { aspect-ratio: 16 / 9; box-shadow: 0 50px 90px -50px rgba(0, 0, 0, .9); }
.rd-lists { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; }
.rd-lists li { display: flex; align-items: center; gap: 20px; padding: 18px 22px; }
.rd-lists li::before { content: ""; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--ride); transform: skewX(var(--skew)); }
.rd-lists li:nth-child(2)::before { background: linear-gradient(100deg, #5cb8ff, #c38bff); }
.rd-lists b { display: block; font-size: 20px; letter-spacing: -.02em; }
.rd-lists span:not(.num) { font-size: 14.5px; color: var(--mute); }

/* ── 10 · garage ── */
.rd-garage { display: grid; gap: 18px; align-items: stretch; }
@media (min-width: 1000px) { .rd-garage { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.rd-garage { align-items: center; }
.rd-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.rd-items li { display: grid; justify-items: center; align-content: end; gap: 4px; padding: 14px 10px; border: 1px solid var(--line); border-radius: var(--r); background: radial-gradient(80% 60% at 50% 35%, rgba(255, 255, 255, .07), transparent 70%), rgba(255, 255, 255, .02); text-align: center; }
.rd-items img { width: 100%; max-width: 120px; aspect-ratio: 1; object-fit: cover; border-radius: 14px; margin-bottom: 6px; transition: transform .8s var(--ease); }
.rd-items li:hover img { transform: scale(1.05) rotate(-2deg); }
.rd-items b { font-size: 14.5px; font-weight: 600; letter-spacing: -.01em; }
.rd-items span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; }
.r-leg { color: var(--gold); } .r-epic { color: #c38bff; } .r-rare { color: #5cb8ff; }

/* ── 11 · where to play ── */
#jouer .feat .h-2 { font-size: clamp(30px, 2.8vw, 46px); }
#jouer .feat .actions { margin-top: 8px; }

/* ── 12 · the app (white, app pink) ── */
.rd-app__phone { display: grid; place-items: center; }
.rd-app .lead { max-width: 52ch; }

/* ── closing band ── */
.band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.band .eyebrow::before { background: #fff; }