/* rahiride.com — design system
 *
 * ── THE PROBLEM THIS IS SOLVING ──────────────────────────────────────────
 *
 * The first cut of this site looked like every other page a machine writes:
 * near-black ground, one orange accent, a grid of rounded cards, and huge
 * empty gaps between them. Nothing in it came from what Rahi actually is.
 *
 * So the vocabulary here is taken from the rider's own world instead:
 *
 *   milestone   the yellow-and-white kilometre stone on every Indian highway
 *   route       an orange polyline threading between sections, with stops on it
 *   centre-line the dashed white road marking, used as a rule
 *   contour     map elevation lines, as a ground texture
 *   cluster     tabular figures and tick marks from the instrument panel
 *
 * The ground is black and stays black — every section, every element, every
 * panel. Separation comes from rules, spacing and the instruments, never
 * from a lighter block.
 */

:root{
  /* Warm, not neutral. A grey with no hue in it is the surest sign nobody chose it. */
  --ink:#000000;
  --ink-2:#0B0B0B;
  --ink-3:#141414;
  --on-ink:#F2F2F2;
  --on-ink-dim:#9A9A9A;
  --orange:#FF5A1F;
  --orange-deep:#D2410E;
  --moss:#2E3A2C;
  --dust:#C9BBA8;

  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --wrap:1160px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ink);color:var(--on-ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--orange);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:14px;z-index:99;background:var(--orange);color:#000;padding:10px 16px;border-radius:8px}

section{
  position:relative;padding:74px 0;
  /* `clip`, not `hidden`. Both hide the instruments where they bleed past
   * the edge, but `hidden` silently makes the section a scroll container,
   * and a scroll container kills `position:sticky` on everything inside it.
   * That is why the pinned run would not pin. */
  overflow:clip;
}
/* A page's opening section is usually an eyebrow, a headline and one line.
 * Padded like a full section it leaves a band of dead space under the title,
 * which is most of what "too much empty space" meant. */
main > section:first-child{padding:60px 0 42px}
main > section:first-child:only-child{padding-bottom:74px}
section.moss{background:var(--moss)}

/* ── the centre-line rule ─────────────────────────────────────
 * Between sections, the dashed white marking down the middle of a road —
 * not a 1px hairline, which is what every generated page uses.
 */
section + section::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,
    rgba(246,241,234,0.16) 0 26px, transparent 26px 52px);
}


/* ── masthead ─────────────────────────────────────────────── */
.masthead{position:sticky;top:0;z-index:60;background:rgba(0,0,0,0.9);backdrop-filter:blur(14px);border-bottom:1px solid rgba(246,241,234,0.09)}
.bar{display:flex;align-items:center;gap:22px;height:70px}
.mark{display:flex;align-items:center;gap:10px;color:var(--orange);font-weight:800;font-size:21px;letter-spacing:-0.03em;text-decoration:none}
.mark span{color:var(--on-ink)}
.mark:hover{text-decoration:none}
nav.desk{display:flex;gap:24px;margin-left:auto}
nav.desk a{color:var(--on-ink-dim);font-size:15px;font-weight:500;position:relative;padding:4px 0}
nav.desk a:hover{color:var(--on-ink);text-decoration:none}
nav.desk a[aria-current]{color:var(--on-ink);font-weight:650}
nav.desk a[aria-current]::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--orange);border-radius:2px}
.bar-end{display:flex;align-items:center;gap:12px}
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer}
.burger span{display:block;width:21px;height:2px;background:var(--on-ink);margin:4px 0;border-radius:2px}
nav.mob{border-top:1px solid rgba(242,242,242,0.09);padding:12px 0 20px;background:#000}
nav.mob .wrap{display:flex;flex-direction:column}
nav.mob a{color:var(--on-ink-dim);padding:13px 0;border-bottom:1px solid rgba(246,241,234,0.07);font-size:16px}
nav.mob a:hover{text-decoration:none;color:var(--on-ink)}

/* ── buttons ─────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;background:var(--orange);color:#000;font-weight:750;font-size:16px;padding:15px 28px;border-radius:999px;white-space:nowrap;border:2px solid var(--orange)}
.btn:hover{text-decoration:none;background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.btn.sm{font-size:14.5px;padding:9px 19px}
.btn.ghost{background:transparent;color:var(--on-ink);border-color:rgba(246,241,234,0.22)}
.btn.ghost:hover{background:transparent;border-color:var(--on-ink);color:var(--on-ink)}

/* ── type ─────────────────────────────────────────────────── */
h1,h2,h3{color:var(--on-ink)}
h1{font-size:clamp(38px,6vw,66px);line-height:1.02;letter-spacing:-0.04em;font-weight:300;margin:0 0 22px;text-wrap:balance}
h1 strong{display:block;font-weight:800;letter-spacing:-0.045em}
h2{font-size:clamp(27px,3.6vw,40px);line-height:1.1;letter-spacing:-0.032em;font-weight:750;margin:0 0 16px;text-wrap:balance}
h3{font-size:19.5px;letter-spacing:-0.015em;margin:0 0 9px;font-weight:700}
p{margin:0 0 18px;color:var(--on-ink-dim)}
.lede{font-size:clamp(17px,1.9vw,20px);max-width:56ch}
.sub{max-width:60ch;margin:0 0 40px}
.small{font-size:14.5px}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--orange);margin:0 0 18px;font-weight:700;
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--orange);border-radius:2px}

/* ── the milestone ───────────────────────────────────────────
 * The kilometre stone on every Indian highway: a rounded head over a
 * square body, yellow band on white. Used wherever something is numbered,
 * because a journey is what this app is about and a milestone is how a
 * road counts one.
 */
.milestone{
  flex:none;width:58px;height:68px;border-radius:29px 29px 6px 6px;
  background:#141414;position:relative;overflow:hidden;border:1px solid rgba(242,242,242,0.16);
  display:flex;align-items:flex-end;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}
.milestone::before{content:'';position:absolute;top:0;left:0;right:0;height:29px;background:var(--orange)}
.milestone b{position:relative;font-family:var(--mono);font-size:19px;font-weight:800;color:var(--on-ink);padding-bottom:9px;line-height:1}
.milestone i{position:absolute;top:6px;left:0;right:0;text-align:center;font-style:normal;font-family:var(--mono);font-size:9px;letter-spacing:0.1em;color:#000;font-weight:800}

/* single masked photo */
.squircle{overflow:hidden;border-radius:140px 140px 26px 26px;box-shadow:0 24px 60px rgba(0,0,0,0.4)}
.squircle img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.round{overflow:hidden;border-radius:50%;aspect-ratio:1/1;box-shadow:0 20px 50px rgba(0,0,0,0.35)}
.round img{width:100%;height:100%;object-fit:cover}
.media{overflow:hidden;border-radius:28px;box-shadow:0 22px 56px rgba(0,0,0,0.4)}
.media img{width:100%;height:100%;object-fit:cover}
.media.tall img{aspect-ratio:4/5}
.media.wide img{aspect-ratio:16/10}
.media.strip img{aspect-ratio:21/9}

/* ── layout ──────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center}
.split.rev>*:first-child{order:2}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(266px,1fr))}

.card{background:#0B0B0B;border:1px solid rgba(246,241,234,0.09);border-radius:22px;padding:28px}
.card p{margin:0;font-size:15.5px}
.card.pad{padding:32px}
.tag{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:0.13em;text-transform:uppercase;color:var(--orange);border:1px solid currentColor;padding:4px 10px;border-radius:999px;margin-bottom:14px;font-weight:700}
.card.shot-card{padding:0;overflow:hidden;display:flex;flex-direction:column}
.card.shot-card .ph{aspect-ratio:16/9;overflow:hidden}
.card.shot-card .ph img{width:100%;height:100%;object-fit:cover}
.card.shot-card .in{padding:28px}
.card.shot-card .in p:last-child{margin-bottom:0}

/* ── cluster figures ─────────────────────────────────────── */
.stats{display:flex;gap:38px;flex-wrap:wrap}
.stat .n{font-family:var(--mono);font-size:clamp(30px,3.8vw,42px);font-weight:800;color:var(--orange);font-variant-numeric:tabular-nums;line-height:1}
.stat .l{font-size:13.5px;color:var(--on-ink-dim);margin-top:8px;max-width:19ch}

ul.plain{list-style:none;padding:0;margin:0}
ul.plain li{padding:15px 0;border-bottom:1px solid rgba(246,241,234,0.09);font-size:15.5px;display:flex;gap:13px;color:var(--on-ink-dim)}
ul.plain li:last-child{border-bottom:0}
ul.plain b{color:var(--on-ink);font-weight:650}
.tick{color:#4FAE6A;flex:none;font-weight:700}
.cross{color:var(--on-ink-dim);flex:none;font-weight:700}
.dot{color:var(--orange);flex:none;font-weight:800;font-family:var(--mono)}

/* steps that use milestones */
ul.route{list-style:none;padding:0;margin:0;position:relative}
ul.route li{display:flex;gap:20px;padding:0 0 30px;position:relative}
ul.route li::before{
  content:'';position:absolute;left:28px;top:68px;bottom:0;width:2px;
  background:repeating-linear-gradient(180deg,var(--orange) 0 7px,transparent 7px 15px);opacity:0.5;
}
ul.route li:last-child{padding-bottom:0}
ul.route li:last-child::before{display:none}
ul.route .txt{padding-top:4px}
ul.route h3{margin-bottom:5px}
ul.route p{margin:0;font-size:15.5px}

/* ── shot: type over a photograph ───────────────────────── */
.shot{position:relative;border-radius:32px;overflow:hidden;min-height:clamp(360px,48vw,520px);display:flex;align-items:flex-end}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.12) 0%,rgba(0,0,0,0.58) 48%,rgba(0,0,0,0.95) 100%)}
.shot .on{position:relative;z-index:2;padding:clamp(26px,4vw,48px);max-width:60ch}
.shot h2,.shot p{color:#F2F2F2}
.shot p{margin:0}

/* ── faq ─────────────────────────────────────────────────── */
details{border-bottom:1px solid rgba(246,241,234,0.1);padding:19px 0}
details summary{cursor:pointer;font-weight:650;font-size:16.5px;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--on-ink)}
details summary::-webkit-details-marker{display:none}
details summary::after{content:'+';color:var(--orange);font-family:var(--mono);font-size:21px;line-height:1}
details[open] summary::after{content:'−'}
details p{margin:14px 0 0;font-size:15.5px;max-width:70ch}

/* ── prose ───────────────────────────────────────────────── */
.prose{max-width:740px}
.prose h2{font-size:23px;margin:44px 0 14px;padding-top:24px;border-top:2px dashed rgba(246,241,234,0.14)}
.prose h3{margin:26px 0 8px}
.prose ul{padding-left:22px}
.prose li{margin:9px 0;color:var(--on-ink-dim)}
.prose table{width:100%;border-collapse:collapse;margin:20px 0;font-size:15.5px;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid rgba(246,241,234,0.1);vertical-align:top}
.prose th{color:var(--on-ink);font-size:12.5px;letter-spacing:0.08em;text-transform:uppercase;font-family:var(--mono);font-weight:700}
.prose td:first-child{color:var(--on-ink);font-weight:650}
.callout{background:#0B0B0B;border:1px solid rgba(246,241,234,0.1);border-left:4px solid var(--orange);border-radius:16px;padding:22px 24px;margin:26px 0}
.callout p{margin:0}
code{font-family:var(--mono);font-size:14px;background:var(--ink-3);padding:2px 6px;border-radius:5px;color:var(--on-ink)}

/* ── closing band ────────────────────────────────────────── */
.band{position:relative;background:#000;border:2px solid var(--orange);border-radius:32px;padding:56px 44px;text-align:center;overflow:hidden}
.band h2{color:var(--on-ink);margin-bottom:12px}
.band p{color:var(--on-ink-dim)}
.band .btn{background:var(--orange);border-color:var(--orange);color:#000}
.band .btn:hover{background:var(--orange-deep);border-color:var(--orange-deep);color:#fff}
.band .btn.ghost{background:transparent;border-color:rgba(242,242,242,0.28);color:var(--on-ink)}
.band .btn.ghost:hover{border-color:var(--on-ink);background:transparent}
.band .actions{justify-content:center}
.actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* ── footer ──────────────────────────────────────────────── */
.site-foot{padding:62px 0 46px;background:#070707;color:var(--on-ink-dim);font-size:15px;border-top:2px dashed rgba(246,241,234,0.12)}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:36px}
.foot-brand p{font-size:14.5px;max-width:33ch;margin-top:14px}
.site-foot h4{font-size:12.5px;font-family:var(--mono);letter-spacing:0.13em;text-transform:uppercase;color:var(--on-ink);margin:0 0 13px;font-weight:700}
.site-foot a{display:block;color:var(--on-ink-dim);font-size:14.5px;padding:5px 0}
.site-foot a:hover{color:var(--on-ink);text-decoration:none}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:24px;border-top:1px solid rgba(246,241,234,0.1);font-size:14px}
.foot-base a{display:inline}

@media (max-width:880px){
  nav.desk{display:none}
  .burger{display:block}
  .split{grid-template-columns:1fr;gap:38px}
  .split.rev>*:first-child{order:0}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  section{padding:54px 0}
  .band{position:relative;background:#000;border:2px solid var(--orange);border-radius:32px;padding:56px 44px;text-align:center;overflow:hidden}
  }
@media (max-width:520px){
  .foot-grid{grid-template-columns:1fr}
  .stats{gap:24px}
  }


/* ── INSTRUMENTS AS FURNITURE ─────────────────────────────────
 *
 * The page is dressed with the things a rider actually looks at: a
 * speedometer face behind the opening, a tacho sweep under a headline, a
 * sprocket bleeding off a corner, tyre tread as a rule, chain as a divider.
 *
 * All of it sits behind the content at low contrast and is aria-hidden. It
 * is scenery, and scenery must never make the words harder to read.
 */
.decor{position:absolute;pointer-events:none;z-index:0;color:var(--on-ink);opacity:0.10}
.wrap{position:relative;z-index:1}

.decor.speedo-tr{width:min(46vw,500px);right:-13%;top:-22%}
.decor.speedo-bl{width:min(44vw,470px);left:-12%;bottom:-20%}
.decor.sprocket-r{width:min(40vw,440px);right:-12%;bottom:-18%}
.decor.sprocket-l{width:min(36vw,400px);left:-13%;top:-14%}
.decor.fuel-r{width:min(24vw,280px);right:6%;bottom:9%}
.decor svg{width:100%;height:auto;display:block}

/* Tread and chain, used as rules rather than decoration in a corner. */
.rule-tread{height:30px;color:var(--orange);opacity:0.3;overflow:hidden;background:#000}
.rule-tread svg{width:220%;height:30px;display:block}
.rule-chain{height:22px;color:var(--on-ink);opacity:0.22;overflow:hidden;margin:0}
.rule-chain svg{width:100%;height:22px;display:block}

/* The tacho sits behind a headline, pinned to its left. */
.with-tacho{position:relative}
.with-tacho .tach{position:absolute;left:-120px;top:-56px;width:280px;color:var(--on-ink);opacity:0.16;pointer-events:none}
@media (max-width:980px){.with-tacho .tach{display:none}}

/* ── READOUT ROWS ─────────────────────────────────────────────
 * What the card grid was doing, done as instrument readings instead: a
 * label, a big figure, a line of text, separated by rules rather than boxed
 * in six identical rounded rectangles.
 */
.readouts{border-top:2px solid rgba(246,241,234,0.14)}
.readout{
  display:grid;grid-template-columns:130px 1fr minmax(0,1.15fr);gap:28px;align-items:start;
  padding:30px 0;border-bottom:2px solid rgba(246,241,234,0.14);
}
.readout .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--orange);font-weight:700;padding-top:7px;
}
.readout h3{margin:0;font-size:clamp(20px,2.3vw,26px);letter-spacing:-0.02em}
.readout p{margin:0;font-size:15.5px}
@media (max-width:820px){
  .readout{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .readout .k{padding-top:0}
}

/* ── single photograph, masked ────────────────────────────── */
.frame{position:relative;border-radius:170px 170px 28px 28px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,0.45)}
.frame img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;display:block}
.frame.wide{border-radius:28px}
.frame.wide img{aspect-ratio:16/10}

/* A guide's category, set like a gauge label rather than a pill. */
.k-lead{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
.k-lead::before{content:'';width:20px;height:2px;background:var(--orange);border-radius:2px}

/* ── restored after the redesign ──────────────────────────────
 * These were orphaned when the stylesheet was rewritten: the markup still
 * used them, so the download page's store chips and the About photo strip
 * rendered unstyled — the strip at full natural size, which made a 3,352px
 * section of nothing but photographs. build.mjs now fails on an unstyled
 * class so this cannot happen quietly again.
 */
.muted{color:var(--on-ink-dim)}

.stores{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.store{
  border:2px solid rgba(246,241,234,0.16);border-radius:16px;padding:14px 20px;min-width:170px;
}
.store-k{display:block;font-size:15.5px;font-weight:700;color:var(--on-ink)}
.store-v{
  display:block;font-family:var(--mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--orange);margin-top:5px;font-weight:700;
}

.strip-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.strip-row .media{border-radius:22px;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,0.35)}
.strip-row .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1;display:block}
@media (max-width:760px){
  .strip-row{grid-template-columns:1fr 1fr}
  .strip-row .media:last-child{display:none}
}


/* On a phone the instruments were rendering at up to 46% of the screen —
 * at that size a half-cropped dial behind a paragraph stops being
 * atmosphere and becomes something in the way. Smaller, and quieter.
 */
@media (max-width:760px){
  .decor{opacity:0.06}
  .decor.speedo-tr{width:64vw;right:-26%;top:-8%}
  .decor.speedo-bl{width:60vw;left:-26%;bottom:-10%}
  .decor.sprocket-r{width:52vw;right:-22%;bottom:-10%}
  .decor.sprocket-l{width:50vw;left:-24%;top:-8%}
  .decor.fuel-r{width:38vw;right:-8%;bottom:4%}
}

/* ── MOTION ───────────────────────────────────────────────────
 *
 * Everything here is transform and opacity only — the two things a browser
 * can animate on the compositor without touching layout. A reveal that
 * animates height or top is how a page drops frames on the mid-range phone
 * a rider actually owns.
 *
 * The finished state is the default and the *pre*-animation state is opt-in
 * via [data-reveal], so if the script never runs the page still reads.
 */
[data-reveal]{
  opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms),
             transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
  will-change:opacity,transform;
}
[data-reveal].is-in{opacity:1;transform:none}

/* The decor and photographs are driven from script; give them a transition
 * so a resize settles rather than snaps. */
.decor{transition:transform .12s linear}
.frame,.media,.shot{transition:transform .18s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}

/* Anyone who asked for less motion gets none of it. */
.motion-off [data-reveal]{opacity:1;transform:none;transition:none}
.motion-off .decor,.motion-off .frame,.motion-off .media,.motion-off .shot{transition:none}

/* ── THE PINNED RUN ───────────────────────────────────────────
 *
 * One long section that holds still while the reader scrolls through it,
 * the way a product page holds a device and changes what it says about it.
 * Here the thing held is the road ahead, and what changes is what Rahi is
 * doing about it at that point in the ride.
 */
.run{position:relative}
/* The sticky element must be a CHILD of a column that spans the whole row.
 * Making the grid item itself sticky pins it only until its own box ends,
 * which is why the panel let go a third of the way down the steps. */
.run-track{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:stretch}
.run-sticky{align-self:stretch}
.run-sticky .frame{
  position:sticky;top:96px;height:min(74vh,620px);
  border-radius:170px 170px 28px 28px;
}
.run-sticky .frame img{height:100%;aspect-ratio:auto}
.run-steps{display:flex;flex-direction:column}
.run-step{min-height:66vh;display:flex;flex-direction:column;justify-content:center;padding:10px 0}
.run-step .k{
  font-family:var(--mono);font-size:11.5px;letter-spacing:0.17em;text-transform:uppercase;
  color:var(--orange);font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:9px;
}
.run-step .k::before{content:'';width:20px;height:2px;background:var(--orange);border-radius:2px}
.run-step h3{font-size:clamp(24px,3vw,34px);letter-spacing:-0.025em;margin:0 0 12px;line-height:1.1}
.run-step p{margin:0;font-size:16.5px;max-width:46ch}
.run-readout{
  margin-top:22px;display:inline-flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-variant-numeric:tabular-nums;
}
.run-readout b{font-size:clamp(30px,4vw,44px);color:var(--orange);font-weight:800;line-height:1}
.run-readout span{font-size:12px;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-ink-dim);font-weight:700}

@media (max-width:880px){
  .run-track{grid-template-columns:1fr;gap:26px}
  .run-sticky{align-self:auto}
  .run-sticky .frame{position:relative;top:0;height:auto}
  .run-sticky .frame img{aspect-ratio:4/5}
  .run-step{min-height:0;padding:26px 0}
}

/* ── THE 3D RUN ───────────────────────────────────────────────
 *
 * A tall section whose canvas is pinned to the viewport, so scrolling through
 * it flies the camera along the route rather than moving the page past a
 * picture. The stage captions ride over the top of it.
 *
 * Everything degrades: no WebGL and the canvas is replaced by a still frame;
 * reduced motion and the scene renders one frame and stops.
 */
.ride3d{position:relative;height:340vh;padding:0;background:#000}
.ride3d .stick{position:sticky;top:0;height:100vh;overflow:clip}
.ride3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.ride3d .still{
  position:absolute;inset:0;background:#000 center/cover no-repeat;
  opacity:0;transition:opacity .4s;
}
.ride3d.no-webgl .still{opacity:1;background-image:url('/assets/img/ph-pass.jpg')}
.ride3d.no-webgl canvas{display:none}

/* A vignette keeps the captions legible over whatever the scene is doing. */
.ride3d .stick::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,0.85) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,0) 62%,rgba(0,0,0,0.9) 100%);
}
.ride3d .stage{
  position:absolute;left:0;right:0;bottom:9vh;z-index:3;
  display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;
}
.ride3d .stage p{max-width:44ch;margin:0;color:#CFCFCF;font-size:16.5px}
.ride3d h2{font-size:clamp(30px,5vw,58px);margin:0 0 12px}
.ride3d .top{
  position:absolute;left:0;right:0;top:11vh;z-index:3;text-align:center;padding:0 24px;
}
.ride3d .odo{
  display:inline-flex;align-items:baseline;gap:10px;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--orange);font-weight:800;
  font-size:clamp(28px,4vw,46px);line-height:1;
}
.ride3d .odo span{font-size:11.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-ink-dim);font-weight:700}
@media (max-width:820px){ .ride3d{height:280vh} }

/* ── THE WORLD BEHIND EVERYTHING ──────────────────────────────
 *
 * One fixed canvas, every page, content scrolling over it.
 *
 * The hard part is not drawing it — it is that body text over a moving 3D
 * scene is unreadable. So sections carry a scrim by default and only the
 * ones marked `.vista` let the world through. Scrolling the site then
 * alternates: something to read, then the country it is about.
 */
canvas.world{
  position:fixed;inset:0;width:100vw;height:100vh;display:block;
  z-index:0;pointer-events:none;
}
.has-world .masthead{background:rgba(0,0,0,0.82)}
.has-world main,.has-world .site-foot{position:relative;z-index:1}
.has-world main > section{background:rgba(0,0,0,0.86)}
.has-world .site-foot{background:rgba(4,4,4,0.94)}

/* A vista lets the scene through and carries its type on a gradient instead. */
.has-world main > section.vista{background:transparent}
.has-world main > section.vista::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.72) 0%,rgba(0,0,0,0.30) 32%,rgba(0,0,0,0.34) 62%,rgba(0,0,0,0.86) 100%);
}
/* Where a vista carries real reading, the text gets its own soft backing. */
.vista .wrap > *{position:relative}
.vista .lede,.vista p,.vista h1,.vista h2{text-shadow:0 2px 22px rgba(0,0,0,0.85)}

/* The tall staged run on the home page is now just a window on the world —
 * the canvas is global, so this section holds nothing but its captions. */
.ride3d{position:relative;height:320vh;padding:0;background:transparent!important}
.has-world .ride3d::after{display:none}
.ride3d .stick{position:sticky;top:0;height:100vh;overflow:clip;display:block}
.ride3d .stick::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 58%,rgba(0,0,0,0.92) 100%);
}

/* ── THE RIDING CURSOR ────────────────────────────────────────
 *
 * A hard dot at the true pointer position, and a motorcycle riding behind it
 * that leans into the turns. The dot is the part that matters: a lagging
 * illustration on its own makes it impossible to tell what you are about to
 * click, which is a pretty page and a worse one.
 */
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor summary{cursor:none}
/* Text fields keep their I-beam — it is doing a real job. */
.has-cursor input,.has-cursor textarea,.has-cursor select{cursor:auto}

.cur{position:fixed;inset:0;z-index:9999;pointer-events:none}
.cur.is-out{opacity:0;transition:opacity .2s}

.cur-dot{
  position:absolute;top:0;left:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;
  border-radius:50%;background:var(--orange);
  transition:width .18s,height .18s,margin .18s,background .18s,border .18s;
}
.cur.is-hot .cur-dot{
  width:34px;height:34px;margin:-17px 0 0 -17px;
  background:transparent;border:2px solid var(--orange);
}
.cur.is-text .cur-dot{opacity:0}

.cur-bike{
  position:absolute;top:0;left:0;width:56px;height:32px;margin:-16px 0 0 -28px;
  color:var(--orange);opacity:0.85;
  transition:opacity .2s,filter .2s;
  filter:drop-shadow(0 0 10px rgba(255,90,31,0.35));
}
.cur-bike svg{width:100%;height:100%;display:block}
.cur.is-hot .cur-bike{opacity:1;filter:drop-shadow(0 0 16px rgba(255,90,31,0.6))}
.cur.is-text .cur-bike{opacity:0.35}