/* ==========================================================================
   KTR · BHUTAN 2026 — Main Stylesheet
   ========================================================================== */

/* Pretendard Variable — single typeface across the entire site.
   Weight is the only axis of hierarchy (300–900); structure/label feel
   comes from size, letter-spacing, uppercase and tabular figures. */
/* --------------------------------------------------------------------------
   Design Tokens
   - Based on KTR Bhutan Poster Guide:
     Mono palette + vivid green accent ("Moments over Miles" tone)
   -------------------------------------------------------------------------- */
:root {
  /* Color — Mono base */
  --c-bg:        #0A0A0A;   /* Near-black (poster contrast) */
  --c-bg-2:      #121212;
  --c-paper:     #F2F2F0;   /* Off-white (slight warm) */
  --c-paper-2:   #DCDCD8;

  /* Color — Accent (Poster Green · pixel-averaged from poster B/C/p7)
     AVG rgb(35,145,92) → #23915C  */
  --c-accent:    #23915C;   /* Poster Green (exact) */
  --c-accent-2:  #1B7548;   /* darker · hover/active */
  --c-accent-3:  #2EAE71;   /* lighter · glow/hover */

  /* Color — Signal (race/red, sparingly) */
  --c-signal:    #D94A2A;

  /* Lines / muted */
  --c-line:      rgba(242, 242, 240, 0.14);
  --c-line-2:    rgba(242, 242, 240, 0.07);
  --c-muted:     rgba(242, 242, 240, 0.70);
  --c-muted-2:   rgba(242, 242, 240, 0.40);

  /* Legacy alias (existing markup compatibility) — these resolve to GREEN */
  --c-gold:      var(--c-accent);
  --c-gold-2:    var(--c-accent-2);
  --c-forest:    #0F2A1F;

  /* Color — Amber/Gold (the real gold; brand's 2nd key colour).
     One canonical hue + a brighter glow variant (mirrors the green pair). */
  --c-amber:        #C9A86A;   /* primary gold · banners, cultural pages */
  --c-amber-bright: #E6C074;   /* brighter · markers, glows, peaks */

  /* Color — raised dark surface (cards, fallbacks) */
  --c-surface:      #0C1216;

  /* Weather semantic glows — a FUNCTIONAL sub-palette (meteorological coding,
     intentionally outside the brand green/gold, like signal-red). */
  --wx-overcast:    #B4C4D2;   /* cool grey · cloud / fog */
  --wx-rain:        #6FA8DC;   /* blue · rain */
  --wx-snow:        #AAD2EB;   /* ice · snow */
  --wx-storm:       #BE96E6;   /* violet · thunderstorm */

  /* Typography — Pretendard only. All roles map to one family; the aliases
     remain so per-token weight/spacing can still be tuned independently. */
  --ff-display:     "Pretendard Variable", system-ui, -apple-system, sans-serif;
  --ff-display-alt: "Pretendard Variable", system-ui, -apple-system, sans-serif;
  --ff-body:        "Pretendard Variable", system-ui, -apple-system, sans-serif;
  --ff-mono:        "Pretendard Variable", system-ui, -apple-system, sans-serif;

  /* Sizes — fluid · bigger, more confident scale.
     Mins are tuned so the largest words still fit a ~360px screen. */
  --fs-hero:     clamp(42px, 11vw, 150px);
  --fs-display:  clamp(36px, 7.6vw, 112px);
  --fs-h1:       clamp(34px, 5vw, 78px);
  --fs-h2:       clamp(28px, 3.6vw, 54px);
  --fs-h3:       clamp(21px, 2.5vw, 38px);
  --fs-body-l:   clamp(18px, 1.4vw, 22px);
  --fs-body:     17px;
  --fs-caption:  13px;
  --fs-micro:    11px;

  /* data-component scale — tables · cards · schedule (PC/MO consistent) */
  --fs-note:     15px;   /* emphasised data prose (schedule notes, card copy) */
  --fs-data:     14px;   /* primary data text (tables, card names, schedule) */
  --fs-data-sm:  13px;   /* secondary data (specs, notes, sub-labels) */
  --fs-meta:     12px;   /* mono meta labels (times, coords, crumbs) */

  /* Rhythm scale (SSOT for new/refactored components; existing per-context
     values are kept — they are already tuned to text length). */
  --lh-heading:  1.2;    /* short titles / card names */
  --lh-snug:     1.5;    /* data notes, captions */
  --lh-body:     1.65;   /* general body copy */
  --lh-relaxed:  1.8;    /* long-form paragraphs */
  --tracking-tight:   -0.02em;  /* large display headings */
  --tracking-normal:  0;        /* body */
  --tracking-label:   0.1em;    /* small uppercase labels */
  --tracking-eyebrow: 0.2em;    /* eyebrows / mono meta */
  /* Spacing (8pt) — for new layout work; legacy uses fluid clamp padding. */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 40px;
  /* Status colours (reuse the brand palette so status reads on-brand). */
  --c-success: var(--c-accent);   /* brand green */
  --c-error:   var(--c-signal);   /* #D94A2A */
  --c-warning: var(--c-amber);    /* gold */
  --c-info:    var(--wx-rain);    /* muted sky blue */

  /* Layout */
  --container:   1440px;
  --gutter:      max(24px, 3vw);
  --radius-xs:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;

  /* Liquid glass surface system (iOS-26-style frosted glass) */
  --glass-bg:     rgba(242, 242, 240, 0.055);  /* faint light film over dark */
  --glass-bg-2:   rgba(242, 242, 240, 0.10);   /* hover / stronger panels    */
  --glass-blur:   18px;
  --glass-sat:    1.7;                           /* saturation boost = "liquid" */
  --glass-border: rgba(242, 242, 240, 0.20);    /* hairline light edge        */
  --glass-hi:     rgba(255, 255, 255, 0.58);    /* specular top highlight     */
  --glass-shadow: 0 10px 34px rgba(0, 0, 0, 0.42);

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-fast:      0.3s;
  --t-base:      0.6s;
  --t-slow:      1.2s;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
/* Kill the translucent blue tap-flash on touch so the dark theme stays clean. */
* { -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--c-paper);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Clip horizontal overflow WITHOUT becoming a scroll container. `overflow-x:
     hidden` here forced overflow-y:auto, which made <body> the scroll ancestor and
     BROKE every position:sticky scene in Safari (himala/pinscale/ascent stopped
     pinning → blank/empty while scrolling; Chromium tolerated it). `clip` does not
     create a scroll container, so sticky keeps working. (hidden kept first as the
     fallback for pre-16 Safari that lacks `clip`.) */
  overflow-x: hidden;
  overflow-x: clip;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* Link underline wipe — premium hover for text links (scoped: nav / footer /
   inline links only, never buttons or card links). Uses background-size so
   there is no layout shift and no ::after conflict. */
.gnb__menu a, .gnb-overlay__menu a, .footer__col a, .link-inline {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0% 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--ease-out, ease-out), color 0.3s ease;
}
.gnb__menu a:hover, .gnb-overlay__menu a:hover, .footer__col a:hover, .link-inline:hover { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) {
  .gnb__menu a, .gnb-overlay__menu a, .footer__col a, .link-inline { transition: none; }
}
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

/* Keyboard focus — visible ring for a11y (mouse clicks stay clean). */
:focus { outline: none; }
:focus-visible,
a:focus-visible, button:focus-visible, input:focus-visible,
[tabindex]:focus-visible, [role="tab"]:focus-visible {
  outline: 2px solid var(--c-accent-3);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link — first focusable element; off-screen until focused so keyboard /
   screen-reader users can jump past the global nav straight to <main>. */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 10px 18px; border-radius: var(--radius);
  background: var(--c-accent-3); color: #0a0a0a;
  font-family: var(--ff-display); font-weight: 700; font-size: 14px;
  letter-spacing: 0.02em; text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.2s var(--ease-out, ease);
}
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--c-paper); outline-offset: 2px; }

/* Selection */
::selection { background: var(--c-gold); color: var(--c-bg); }

/* Scrollbar (kept minimal — Lenis takes over) */
::-webkit-scrollbar { width: 0; height: 0; }

/* --------------------------------------------------------------------------
   Typography Helpers
   -------------------------------------------------------------------------- */
.t-display {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-display);
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.t-hero {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: 0.82;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.t-h1 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 0.92;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.t-h2 {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: var(--fs-h2);
  line-height: 0.98;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.t-h3 {
  font-family: var(--ff-display-alt);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}
.t-body-l { font-size: clamp(20px, 1.5vw, 24px); line-height: 1.55; font-weight: 500; }
.t-body   { font-size: var(--fs-body); line-height: 1.7; }
.t-cap {
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--ff-display-alt);
}
.t-micro {
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--ff-display-alt);
}
.t-mono { font-family: var(--ff-mono); letter-spacing: 0; }

/* Pretendard isn't monospaced — keep figures aligned where numbers animate or
   sit in tabular contexts so widths don't jitter. */
.t-mono,
[data-counter],
.course-ctl__value,
.cp-tag__meta,
.keyinfo__tile .val,
.race__stat .val,
.hero__sub-item .val { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }

.t-muted  { color: var(--c-muted); }
.t-gold   { color: var(--c-accent); }   /* legacy alias */
.t-accent { color: var(--c-accent); }
.t-paper  { color: var(--c-paper); }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { position: relative; padding-block: clamp(72px, 9vh, 132px); }
.section--tight  { padding-block: clamp(52px, 7vh, 92px); }
.section--full   { padding-block: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.section__head { margin-bottom: clamp(28px, 4vh, 48px); display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.section__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--c-accent-3); }
.section__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--c-accent-3); }

/* --------------------------------------------------------------------------
   Typography hierarchy rebalance (SITE-WIDE): larger section eyebrows (accent
   labels) + smaller section headlines, so section headings sit clearly below
   the page/hero title and the eyebrow reads. Applied to every page for one
   consistent hierarchy (was home-only, which left sub-pages like race with a
   15px eyebrow + 52px h2 that competed with the 56px page title). Hero
   (.t-hero), page-hero titles, and the final CTA (.t-display) keep their sizes.
   -------------------------------------------------------------------------- */
body {
  --fs-h1: clamp(28px, 3.8vw, 58px);   /* was clamp(34px, 5vw, 78px) */
  --fs-h2: clamp(24px, 2.8vw, 42px);   /* was clamp(28px, 3.6vw, 54px) */
}
.section__eyebrow,
.race__head .title > .t-cap,
.subsection__head > .t-cap,
.two-col__aside > .t-cap {
  font-size: 18px;   /* was 15px (.t-cap) */
}

/* Helpers */
.flex { display: flex; }
.grid { display: grid; }
.gap-1 { gap: 8px; } .gap-2 { gap: 16px; } .gap-3 { gap: 24px; } .gap-4 { gap: 40px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --------------------------------------------------------------------------
   Global Navigation
   -------------------------------------------------------------------------- */
.gnb {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  /* clear the status bar / notch on viewport-fit=cover phones (0 elsewhere).
     Horizontal: align the logo/nav to the .container grid (1440px + gutter) —
     above 1440px the bar stays full-bleed but its content pulls in to match
     the body sections instead of hugging the viewport edges. */
  padding: calc(20px + env(safe-area-inset-top))
           max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)))
           20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: background var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.gnb--scrolled {
  background: rgba(10, 10, 10, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding-top: calc(14px + env(safe-area-inset-top));   /* keep the notch clearance when condensed */
  padding-bottom: 14px;
  border-bottom-color: var(--c-line-2);
}
.gnb--solid {
  background: var(--c-bg);
  border-bottom-color: var(--c-line-2);
}

.gnb__logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ff-display);
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 16px;
  text-transform: uppercase;
}
.gnb__logo-mark {
  /* Symbol aspect ratio ≈ 1.26 (1375×1094, recut with safe area).
     Box matches that ratio so contain renders crisp, no clipping. */
  width: 46px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 2px;
  flex: 0 0 auto;
}
.gnb__logo-dot { color: var(--c-accent); margin: 0 4px; }

.gnb__menu {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}
.gnb__menu a {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-paper);
  position: relative;
  padding: 8px 4px;
  opacity: 0.78;
  transition: opacity var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  font-family: var(--ff-display-alt);
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
/* Bracket-style hover: [ MENU ] reveal on hover/active */
.gnb__menu a::before,
.gnb__menu a::after {
  content: "";
  display: inline-block;
  width: 0;
  color: var(--c-accent);
  opacity: 0;
  transform: translateX(0);
  transition: width var(--t-fast) var(--ease-out), opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  font-family: var(--ff-mono);
  font-weight: 700;
}
.gnb__menu a::before { content: "["; margin-right: 0; }
.gnb__menu a::after  { content: "]"; margin-left: 0; }
.gnb__menu a:hover,
.gnb__menu a.is-active {
  opacity: 1;
  color: var(--c-accent);
}
.gnb__menu a:hover::before,
.gnb__menu a.is-active::before { width: 0.6em; opacity: 1; transform: translateX(-2px); margin-right: 6px; }
.gnb__menu a:hover::after,
.gnb__menu a.is-active::after  { width: 0.6em; opacity: 1; transform: translateX( 2px); margin-left: 6px; }

.gnb__cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border: 1px solid var(--c-accent);
  color: var(--c-paper);
  background: var(--c-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--ff-display-alt);
  border-radius: 999px;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.gnb__cta:hover { transform: translateY(-1px); background: var(--c-paper); border-color: var(--c-paper); color: var(--c-accent); }
.gnb__cta .arr { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.gnb__cta:hover .arr { transform: translateX(3px); }

/* Mobile Toggle */
.gnb__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
}
.gnb__toggle span {
  display: block;
  width: 22px; height: 1px;
  background: var(--c-paper);
  position: relative;
  transition: background var(--t-fast) var(--ease-out);
}
.gnb__toggle span::before,
.gnb__toggle span::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: var(--c-paper);
  transition: top var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.gnb__toggle span::before { top: -7px; }
.gnb__toggle span::after  { top:  7px; }
/* Open state — the three bars collapse into an X (aria-expanded is set by the JS toggle) */
.gnb__toggle[aria-expanded="true"] span { background: transparent; }
.gnb__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.gnb__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1024px) {
  /* `.gnb .gnb__cta` outweighs the global `[data-magnetic]` display rule
     so the Apply pill stays hidden behind the hamburger on every page.
     Collapse at 1024px so the horizontal nav never crowds/clips on tablets. */
  .gnb__menu, .gnb .gnb__cta { display: none; }
  .gnb__toggle { display: inline-flex; }
}

/* Mobile Overlay Menu */
.gnb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--c-bg);
  padding: calc(100px + env(safe-area-inset-top)) var(--gutter) calc(40px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  /* the whole menu scrolls when its content (e.g. an expanded "More") is taller
     than the screen, so every item stays reachable */
  overflow-y: auto;
  overscroll-behavior: contain;     /* don't scroll-chain to the page behind on iOS */
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease-out);
}
.gnb-overlay__cta { margin-top: auto; padding-top: 40px; }
.gnb-overlay.is-open { opacity: 1; pointer-events: auto; }
.gnb-overlay__menu a {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(36px, 8vw, 64px);
  text-transform: uppercase;
  padding: 18px 0;
  border-bottom: 1px solid var(--c-line-2);
  line-height: 1;
}
.gnb-overlay__menu a:last-child { border-bottom: 0; }
.gnb-overlay__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.gnb-overlay__cta a {
  padding: 16px 24px;
  /* match the site-wide Apply CTA (.gnb__cta / .btn--gold): green + paper text +
     accent border, so the mobile-menu button reads identically to the PC one */
  background: var(--c-accent);
  color: var(--c-paper);
  /* glass rim + specular sheen so it reads as the same glossy liquid pill as the
     desktop APPLY (was flat green — every other chrome got the glass pass). */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 15px;
  flex: 1;
  text-align: center;
}
.gnb-overlay__cta a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.22), transparent 44%);
  z-index: -1;
}
.gnb-overlay__cta .arr { display: inline-block; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  font-family: var(--ff-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--c-paper);
  color: var(--c-paper);
  border-radius: 999px;        /* fully-rounded pill */
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.btn .arr { display: inline-block; transition: transform var(--t-fast) var(--ease-out); }
.btn:hover .arr { transform: translateX(4px); }
.btn:hover { background: var(--c-paper); color: var(--c-bg); }

.btn--gold {
  background: var(--c-accent);
  color: var(--c-paper);
  border-color: var(--c-accent);
}
.btn--gold:hover { background: var(--c-paper); color: var(--c-accent); border-color: var(--c-paper); }

.btn--ghost { border-color: var(--c-line); color: var(--c-paper); }
.btn--ghost:hover { border-color: var(--c-paper); }

.btn--lg { padding: 19px 34px; font-size: 16px; }

.link-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-gold);
  font-family: var(--ff-display);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 13px;
  border-bottom: 1px solid var(--c-gold);
  padding-bottom: 4px;
  transition: gap var(--t-fast) var(--ease-out);
}
.link-inline:hover { gap: 14px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;           /* track the small viewport so the URL bar doesn't crop the hero */
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
}
/* On short/landscape phones a 720px floor pushes the headline + CTA off-screen —
   drop the floor and follow the dynamic viewport there. */
@media (max-height: 620px) {
  .hero { min-height: 0; height: 100dvh; }
}
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
}
/* Flying dragon canvas — fixed full-screen overlay, soars across the
   whole page above content but below the header/controls. */
.hero__dragon {
  position: fixed; inset: 0; z-index: 8;
  display: block; width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.3;           /* very subtle — gait detail fades into the scene */
}

/* Hover caption that follows the flying dragon */
.dragon-caption {
  position: fixed; left: 0; top: 0; z-index: 9;
  pointer-events: none; max-width: 250px;
  padding: 12px 15px 13px; border-radius: var(--radius-md);
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(46, 174, 113, 0.42);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity .32s ease, transform .32s ease;
  will-change: opacity, transform;
}
.dragon-caption.is-on { opacity: 1; transform: translateY(0) scale(1); }
.dragon-caption strong {
  display: block; font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c-accent-3); margin-bottom: 6px;
}
.dragon-caption span {
  display: block; font-size: 12.5px; line-height: 1.55;
  color: var(--c-paper); opacity: .92;
}
.dragon-caption em { color: var(--c-accent-3); font-style: normal; }
/* Ambient drifting motes — soft atmosphere behind the hero type */
.hero__ambient {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* Legacy targets — now hidden in favor of .hero__art */
.hero__mountains, .hero__stars { display: none !important; }

/* ABSTRACT BLOB ART — full-bleed, parallax-aware */
.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  filter: blur(40px);
  will-change: transform;
}
.hero {
  /* Mouse-position CSS vars (-1..1), set by JS */
  --mx: 0;
  --my: 0;
}
.art-blob {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  mix-blend-mode: screen;
}
.art-blob--a { transform: translate(calc(var(--mx) *  18px), calc(var(--my) *  10px)); }
.art-blob--b { transform: translate(calc(var(--mx) * -28px), calc(var(--my) * -18px)); }
.art-blob--c { transform: translate(calc(var(--mx) *  36px), calc(var(--my) *  24px)); }
.art-blob--d { transform: translate(calc(var(--mx) * -52px), calc(var(--my) * -32px)); }

/* Hero content layers react subtly to mouse */
.hero__content {
  transform: translate3d(calc(var(--mx) * -8px), calc(var(--my) * -6px), 0);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero__datestamp {
  top: 50%;
  transform: translate(calc(var(--mx) * 14px), calc(-50% + var(--my) * 8px));
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (prefers-reduced-motion: reduce) {
  .art-blob, .hero__content, .hero__datestamp {
    transition: none;
  }
}
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.hero__tag {
  font-family: var(--ff-display-alt);
  font-weight: 500;
  font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.04em;
  margin-bottom: 36px;
  max-width: 54ch;
  color: var(--c-paper);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-up 1.2s 1.1s var(--ease-out) forwards;
}
/* Dawn glow — soft blue-violet at the top, warm green-gold near the horizon */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, color-mix(in srgb, var(--c-amber) 13%, transparent) 0%, transparent 50%),
    radial-gradient(ellipse 60% 50% at 50% 75%, color-mix(in srgb, var(--c-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 70%, transparent 0%, rgba(10, 10, 10, 0.20) 70%, rgba(10, 10, 10, 0.65) 100%);
  z-index: 2;
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.50) 0%, transparent 22%),
    linear-gradient(180deg, transparent 60%, rgba(10, 10, 10, 0.80) 100%),
    /* cinematic vignette */
    radial-gradient(ellipse 120% 90% at 50% 50%, transparent 60%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 2;
  pointer-events: none;
}

/* Removed: hero__fog (drift was distracting) */
.hero__fog { display: none !important; }

/* Noomo-inspired tiny decorative stars used near CTAs/captions */
.deco-star {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: middle;
  margin: 0 8px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14.4 9.6L24 12L14.4 14.4L12 24L9.6 14.4L0 12L9.6 9.6Z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 0L14.4 9.6L24 12L14.4 14.4L12 24L9.6 14.4L0 12L9.6 9.6Z'/></svg>") center/contain no-repeat;
  color: var(--c-accent);
  animation: star-twinkle 3s ease-in-out infinite;
}
@keyframes star-twinkle {
  0%, 100% { transform: rotate(0) scale(1);   opacity: 0.85; }
  50%      { transform: rotate(45deg) scale(1.12); opacity: 1; }
}

/* Removed: hero__bird (distracting floating object) */
.hero__bird { display: none !important; }
.hero__content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 var(--gutter) clamp(60px, 10vh, 120px);
  /* Align the headline/stats block to the .container grid used by the body
     sections below (edge decorations — vnav dots, datestamp — stay full-bleed). */
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  flex-wrap: wrap;   /* narrow screens: drop BHUTAN to its own line instead of
                        wrapping "KOLON TRAIL RUN 2026" mid-phrase and floating it */
  gap: 14px;
  margin-bottom: 28px;
  opacity: 0;
  transform: translateY(20px);
  animation: hero-up 1.2s 0.4s var(--ease-out) forwards;
}
.hero__eyebrow::before {
  content: "";
  width: 40px;
  height: 1px;
  background: var(--c-gold);
}
.hero__eyebrow .t-cap { font-size: 16px; white-space: nowrap; }
.hero__title {
  margin-bottom: 24px;
  max-width: 18ch;
}
.hero__title .ln {
  display: block;
  overflow: hidden;
}
.hero__title .ln > span {
  display: inline-block;
  transform: translateY(110%);
  animation: hero-rise 1.4s var(--ease-out) forwards;
}
.hero__title .ln:nth-child(1) > span { animation-delay: 0.6s; }
.hero__title .ln:nth-child(2) > span { animation-delay: 0.8s; color: var(--c-gold); }

.hero__sub {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 64px);
  padding-top: 24px;
  margin-top: 28px;
  border-top: 1px solid var(--c-line-2);
  opacity: 0;
  transform: translateY(20px);
  animation: hero-up 1.2s 1.4s var(--ease-out) forwards;
}
.hero__sub-item .lbl { display: block; margin-bottom: 7px; color: var(--c-muted-2); font-size: 14px; letter-spacing: 0.14em; }
.hero__sub-item .val { font-family: var(--ff-display); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; }

.hero__scroll {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--c-muted);
  opacity: 0;
  animation: hero-up 1.2s 1.6s var(--ease-out) forwards;
}
.hero__scroll .ln {
  width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--c-gold), transparent);
  animation: scroll-pulse 2s var(--ease-in-out) infinite;
}

@keyframes hero-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0%); }
}
@keyframes hero-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scroll-pulse {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  50%      { transform: scaleY(0.4); opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   Intro Statement
   -------------------------------------------------------------------------- */
.intro {
  padding-block: clamp(120px, 18vh, 220px);
  position: relative;
  background:
    radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--c-amber) 6%, transparent), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(15, 42, 31, 0.18), transparent 50%);
}
.intro__statement {
  max-width: 22ch;
  margin: 0 auto;
}
.intro__statement .ln {
  display: block;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.intro__statement.is-inview .ln { opacity: 1; transform: translateY(0); }
.intro__statement.is-inview .ln:nth-child(1) { transition-delay: 0.0s; }
.intro__statement.is-inview .ln:nth-child(2) { transition-delay: 0.15s; }
.intro__statement.is-inview .ln:nth-child(3) { transition-delay: 0.3s; }
.intro__lead {
  text-align: center;
  max-width: 48ch;
  margin: 48px auto 0;
  color: var(--c-muted);
}

/* Format block — "what this is" dry facts (reuses the intro shell + art-mega) */
.format__facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  max-width: 920px;
  margin: clamp(40px, 6vh, 72px) auto 0;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-line);
}
.format__fact {
  background: var(--c-bg);
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.format__fact .lbl {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-accent-3);
}
.format__fact .val {
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--c-paper);
}
.format__incl {
  max-width: 74ch;
  margin: 22px auto 0;
  text-align: center;
  color: var(--c-muted);
  font-size: 14px;
  line-height: 1.7;
}
.format__incl .link-inline { margin-left: 6px; white-space: nowrap; }
@media (max-width: 760px) {
  .format__facts { grid-template-columns: repeat(2, 1fr); max-width: 460px; }
}

/* Course controls — named legs row (Circle of Life / Karma / Temptation / Nirvana) */
.course-ctl__row--legs { align-items: flex-start; }
.course-ctl__legs {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.course-ctl__legs li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-paper);
}
.course-ctl__legs em {
  margin-left: auto;
  font-style: normal;
  color: var(--c-muted);
  font-size: 12px;
}
.course-ctl__legs .lg-n {
  flex: none;
  width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--c-accent);
  color: var(--c-bg);
  font-size: 10px; font-weight: 700;
}
@media (max-width: 640px) {
  .course-ctl__legs { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Key Info — 4 grid
   -------------------------------------------------------------------------- */
.keyinfo__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-line);
}
.keyinfo__tile {
  padding: 56px 32px;
  border-right: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 340px;
  transition: background var(--t-base) var(--ease-out);
}
.keyinfo__tile:last-child { border-right: 0; }
.keyinfo__tile:hover { background: rgba(242, 242, 240, 0.02); }
.keyinfo__tile .num {
  font-size: 18px;                 /* was 13 — too small to read on the glass/photo */
  font-family: var(--ff-mono);
  font-weight: 600;
  color: var(--c-accent);          /* was c-muted-2 (near-invisible) — brand green index */
  margin-bottom: 28px;
  letter-spacing: 0.1em;
}
.keyinfo__tile .val {
  font-family: var(--ff-display);
  font-weight: 800;
  /* slightly smaller cap so a 5-digit value + its unit (e.g. 7,570 M) stays on
     ONE line; nowrap keeps the unit from dropping below the number */
  font-size: clamp(48px, 5.6vw, 84px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  white-space: nowrap;
}
.keyinfo__tile .val .u {
  display: inline-block;
  font-size: 0.32em;
  color: var(--c-accent);
  margin-left: 8px;
  letter-spacing: 0.04em;
  vertical-align: 0.4em;
}
.keyinfo__tile .lbl {
  display: block;                  /* was inline — lbl + sub were colliding on one line */
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-paper);
  margin-bottom: 8px;
  font-weight: 700;
  font-family: var(--ff-display-alt);
}
.keyinfo__tile .sub {
  display: block;                  /* own line, stacked under the label */
  font-size: 14px;
  color: var(--c-muted);
  letter-spacing: 0.01em;
  line-height: 1.45;
  /* reserve two lines so every tile's value block is the same height → the big
     numbers (01–04) line up across the row even when some captions are shorter */
  min-height: 2.9em;
}

@media (max-width: 900px) {
  .keyinfo__grid { grid-template-columns: repeat(2, 1fr); }
  .keyinfo__tile:nth-child(2) { border-right: 0; }
  .keyinfo__tile { min-height: 220px; padding: 32px 20px; }
}

/* --------------------------------------------------------------------------
   Experience Overview
   -------------------------------------------------------------------------- */
.experience { position: relative; }
.experience__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.experience__visual {
  aspect-ratio: 1 / 1;
  background-color: var(--c-surface);
  border: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.experience__visual::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img, linear-gradient(135deg, rgba(15, 42, 31, 0.4), rgba(10, 10, 10, 0.7)));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.8s var(--ease-out);
}
.experience__visual::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0.0) 38%, rgba(10,10,10,0.55) 100%);
}
.experience__visual:hover::before { transform: scale(1.06); }

.experience__copy h2 { margin-bottom: 14px; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.05; }
.experience__copy .lead { color: var(--c-muted); margin-bottom: 22px; max-width: 40ch; }
/* Lead paragraphs read as supporting intro, not a headline: dial the .t-body-l
   utility (clamp 20–24px) down so the lead sits with the 18px eyebrow and yields to
   the 24px card titles. .lead is only used on trip + the home "What's Included"
   teaser, so this is safe without touching the global .t-body-l. */
.lead { font-size: clamp(16px, 1.25vw, 18px); }

.exp-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
  margin-bottom: 22px;
}
.exp-card {
  background: var(--c-bg);
  padding: 32px 24px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
  transform-style: preserve-3d;
  perspective: 1000px;
  cursor: default;
}
.exp-card:hover {
  background: var(--c-bg-2);
}
.exp-card__icon {
  width: 36px; height: 36px;
  border: 1px solid var(--c-gold);
  display: grid; place-items: center;
  color: var(--c-gold);
  font-size: 14px;
  font-family: var(--ff-mono);
  margin-bottom: 20px;
}
.exp-card__title {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.12;
}
.exp-card__desc { color: var(--c-muted); font-size: 16px; line-height: 1.55; }
.exp-card { padding: 22px 20px; min-height: 0; }
.exp-card__icon { width: 40px; height: 40px; font-size: 15px; margin-bottom: 14px; }

@media (max-width: 900px) {
  .experience__layout { grid-template-columns: 1fr; gap: 48px; }
  .experience__visual { aspect-ratio: 4 / 5; }
}
@media (max-width: 560px) {
  /* Stack the four pillars in one column — 2-up can't shrink below its
     min content width on phones and was overflowing the viewport. */
  .exp-cards { grid-template-columns: 1fr; }
  .exp-card { min-height: 0; }
}

/* --------------------------------------------------------------------------
   Race Overview (with 3D)
   -------------------------------------------------------------------------- */
.race { position: relative; }
.race__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.race__head .title h2 { margin-bottom: 12px; }
.race__head .title .t-cap { color: var(--c-accent-3); }

.race__layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.race__stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--c-line);
}
.race__stat {
  padding: 22px 0;
  border-bottom: 1px solid var(--c-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.race__stat .lbl {
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
}
.race__stat .val {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: -0.015em;
}
.race__stat .val .u { color: var(--c-accent); font-size: 0.5em; margin-left: 4px; }
.race__stat { padding: 28px 0; }

.race__visual {
  position: relative;
  aspect-ratio: 2 / 1;
  border: 1px solid var(--c-line);
  background:
    radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--c-amber) 6%, transparent), transparent 60%),
    linear-gradient(180deg, rgba(10, 10, 10, 0.4), rgba(10, 10, 10, 0.95));
  overflow: hidden;
}
.race__visual canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }  /* let vertical swipes scroll the page (was touch-action:none → scroll trap on phones); only horizontal drag rotates the model */
.race__visual-fallback {
  position: absolute; inset: 0;
  display: grid; grid-auto-flow: column; gap: 2px; place-items: center;
  color: var(--c-muted-2); font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em;
}
.race__visual-retry {
  background: none; border: 0; padding: 8px 6px; min-height: 44px;
  font: inherit; font-size: 11px; letter-spacing: 0.2em;
  color: var(--c-accent-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.race__visual-retry:hover { color: var(--c-accent-2); }
.race__visual-hint {
  position: absolute;
  left: 24px; top: 24px;
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  z-index: 2;
}
.race__visual-hint .dot {
  display: inline-block; width: 8px; height: 8px; background: var(--c-accent); border-radius: 50%;
  margin-right: 8px; box-shadow: 0 0 12px var(--c-accent);
}

/* CP infographic labels — projected over the 3D canvas, leader-lined */
.cp-leaders {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 2;
  overflow: visible;
}
.cp-leader {
  stroke: rgba(242, 242, 240, 0.32);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.cp-leader--major { stroke: color-mix(in srgb, var(--c-amber) 50%, transparent); }
.cp-labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.cp-tag {
  position: absolute;
  left: 0; top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 5px 10px;
  background: rgba(10, 10, 10, 0.88);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-xs);
  font-family: var(--ff-mono);
  white-space: nowrap;
  -webkit-backdrop-filter: blur(5px);
          backdrop-filter: blur(5px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  will-change: transform;
  transition: opacity 0.25s ease;
}
.cp-tag__name {
  font-size: 11px;
  letter-spacing: 0.14em;
  font-weight: 600;
  color: var(--c-paper);
  line-height: 1;
}
.cp-tag__meta {
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--c-muted);
  line-height: 1;
}
.cp-tag--major {
  border-color: color-mix(in srgb, var(--c-amber) 55%, transparent);
  background: color-mix(in srgb, var(--c-amber) 12%, var(--c-bg));
}
.cp-tag--major .cp-tag__name { color: var(--c-amber); }

/* --------------------------------------------------------------------------
   Course Controls — slider, CP jumps, play/pause/reset
   -------------------------------------------------------------------------- */
.course-ctl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 28px;
  padding: 24px 28px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: rgba(242, 242, 240,0.02);
}
.course-ctl__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.course-ctl__row + .course-ctl__row { border-top: 1px solid var(--c-line-2); padding-top: 16px; }

.course-ctl__label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-muted);
  flex: 0 0 auto;
}
.course-ctl__value {
  font-family: var(--ff-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.005em;
  color: var(--c-accent);
  margin-left: auto;
  flex: 0 0 auto;
}

.course-ctl__slider {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  height: 4px;
  background: var(--c-line);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
  flex: 1;
}
.course-ctl__slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-paper);
  box-shadow: 0 0 16px color-mix(in srgb, var(--c-accent) 60%, transparent);
  cursor: grab;
}
.course-ctl__slider::-webkit-slider-thumb:active { cursor: grabbing; }
.course-ctl__slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--c-accent);
  border: 2px solid var(--c-paper);
  cursor: grab;
}

.course-ctl__cps {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}
.course-ctl__cp {
  padding: 8px 14px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-paper);
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.course-ctl__cp:hover { border-color: var(--c-accent); color: var(--c-accent); }
.course-ctl__cp.is-active { background: var(--c-accent); border-color: var(--c-accent); color: var(--c-bg); }

.course-ctl__playbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--c-accent);
  background: transparent;
  color: var(--c-accent);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease-out);
}
.course-ctl__playbtn:hover { background: var(--c-accent); color: var(--c-bg); }
.course-ctl__playbtn[data-state="play"]::before { content: "▶"; font-size: 11px; margin-left: 2px; }
.course-ctl__playbtn[data-state="pause"]::before { content: "❚❚"; font-size: 10px; letter-spacing: -2px; }

.race__cta { margin-top: 56px; }
/* The elevation profile closes the 3D course block (its CTA sits below the chart),
   so tighten the seam between #race-overview and #elevation instead of leaving two
   full screens of padding. ~58px instead of ~162px. */
#race-overview { padding-bottom: clamp(24px, 4vh, 48px); }
#elevation { padding-top: clamp(16px, 2.5vh, 32px); padding-bottom: clamp(20px, 3vh, 36px); }
/* And keep the elevation CTA close to the Terrain accordion below it. The
   accordion's own 54px margin-top stacks on the section padding, so zero it
   here (the section padding-top already provides the spacing). */
#terrain { padding-top: clamp(16px, 2.5vh, 28px); }
#terrain .acc-item { margin-top: 0; }
/* The home terrain aside is a one-line intro inside the accordion, so the sticky
   drift just misaligns it with the first section. Pin it static and zero the first
   heading's top margin so the aside top-aligns with "Section 1". Home only — the
   race.html terrain keeps its sticky aside. */
body[data-page="home"] #terrain .two-col__aside { position: static; }
body[data-page="home"] #terrain .two-col__main h3:first-child { margin-top: 0; }

@media (max-width: 900px) {
  .race__layout { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Journey Timeline
   -------------------------------------------------------------------------- */
.journey { background: var(--c-bg-2); border-block: 1px solid var(--c-line-2); }
.journey__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-bottom: 56px;
  border: 1px solid var(--c-line);
}
.journey__tab {
  padding: 28px 24px;
  text-align: left;
  border-right: 1px solid var(--c-line);
  position: relative;
  background: transparent;
  color: var(--c-paper);
  transition: background var(--t-fast) var(--ease-out);
}
.journey__tab:last-child { border-right: 0; }
.journey__tab:hover { background: rgba(242, 242, 240, 0.03); }
.journey__tab.is-active { background: color-mix(in srgb, var(--c-amber) 8%, transparent); }
.journey__tab.is-active::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: var(--c-gold);
}
.journey__tab .day { display: block; font-family: var(--ff-mono); color: var(--c-gold); font-size: 11px; letter-spacing: 0.16em; margin-bottom: 12px; }
.journey__tab .date { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin-bottom: 4px; }
.journey__tab .sub  { display: block; color: var(--c-muted); font-size: var(--fs-meta); letter-spacing: 0.08em; text-transform: uppercase; }

.journey__panels { position: relative; min-height: 480px; }
.journey__panel {
  display: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px);
}
.journey__panel.is-active { display: grid; animation: fade-up 0.6s var(--ease-out); }
.journey__panel-visual {
  aspect-ratio: 16 / 11;
  border: 1px solid var(--c-line);
  background-color: var(--c-surface);
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.0) 30%, rgba(10,10,10,0.80) 100%),
    var(--img, linear-gradient(135deg, rgba(15, 42, 31, 0.4), rgba(10, 10, 10, 0.7)));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.journey__panel-visual::after {
  content: attr(data-label);
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; color: var(--c-paper);
  border-top: 1px solid var(--c-line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.6));
}
/* Day 01 photo (Paro arrival) is a vertical composition with the runner
   low in the frame — anchor to the bottom so she reads fully (head to feet),
   rather than cropped at the lower edge. */
body[data-page="home"] .journey__panel[data-panel="d1"] .journey__panel-visual { background-position: center bottom; }

.journey__schedule { display: flex; flex-direction: column; }
.journey__schedule h3 { margin-bottom: 24px; }
.journey__schedule ul { display: flex; flex-direction: column; }
.journey__schedule li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  align-items: baseline;
}
.journey__schedule li:last-child { border-bottom: 0; }
.journey__schedule .time {
  font-family: var(--ff-mono);
  color: var(--c-gold);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.journey__schedule .activity .ttl { display: block; font-family: var(--ff-display); font-weight: 600; font-size: 16px; margin-bottom: 4px; letter-spacing: -0.005em; }
.journey__schedule .activity .desc { color: var(--c-muted); font-size: 13px; line-height: 1.55; }

@media (max-width: 900px) {
  .journey__tabs { grid-template-columns: repeat(2, 1fr); }
  .journey__tab:nth-child(2) { border-right: 0; }
  .journey__tab:nth-child(1), .journey__tab:nth-child(2) { border-bottom: 1px solid var(--c-line); }
  .journey__panel { grid-template-columns: 1fr; }
  .journey__schedule li { grid-template-columns: 80px 1fr; gap: 20px; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   About Bhutan
   -------------------------------------------------------------------------- */
.bhutan { position: relative; }
.bhutan__head { text-align: center; margin-bottom: 72px; }
.bhutan__head h2 { max-width: 16ch; margin: 0 auto 24px; }
.bhutan__head p  { max-width: 56ch; margin: 0 auto; color: var(--c-muted); }

.bhutan__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.bhutan__card {
  position: relative;
  aspect-ratio: 3 / 4;
  border: 1px solid var(--c-line);
  overflow: hidden;
  background-color: var(--c-surface);
  display: flex;
  align-items: end;
  padding: 28px;
  cursor: pointer;
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.bhutan__card:hover { transform: translateY(-6px); border-color: color-mix(in srgb, var(--c-gold) 55%, transparent); }
/* Image layer (zooms on hover) */
.bhutan__card::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img, linear-gradient(180deg, rgba(10, 10, 10, 0.3), rgba(10, 10, 10, 0.9)));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.8s var(--ease-out);
}
.bhutan__card:hover::before { transform: scale(1.08); }
/* Scrim layer */
.bhutan__card::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, transparent 28%, rgba(10, 10, 10, 0.88) 100%);
}
.bhutan__card-content { position: relative; z-index: 2; transition: transform var(--t-base) var(--ease-out); }
.bhutan__card:hover .bhutan__card-content { transform: translateY(-4px); }
/* Sits over a photo — frosted dark pill + white text stays legible on ANY
   image (bright sky, green prayer flags, warm murals), not just the scrim. */
.bhutan__card .tag {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid color-mix(in srgb, var(--c-paper) 30%, transparent);
  background: color-mix(in srgb, var(--c-bg) 62%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-paper);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.bhutan__card .ttl {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 40px;
  line-height: 0.95;
  margin-bottom: 16px;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.bhutan__card .desc { color: var(--c-muted); font-size: 16px; line-height: 1.55; }
.bhutan__card { padding: 36px; }
.bhutan__cta { text-align: center; }

@media (max-width: 900px) {
  .bhutan__grid { grid-template-columns: 1fr; }
  .bhutan__card { aspect-ratio: 4/3; }
}

/* --------------------------------------------------------------------------
   Past Edition / Heritage
   -------------------------------------------------------------------------- */
.heritage { position: relative; }
.heritage__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.heritage__slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 16px;
  margin: 0 calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
}
.heritage__slide {
  flex: 0 0 clamp(280px, 36vw, 520px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: start;
  border: 1px solid var(--c-line);
  background-color: var(--c-surface);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: end;
  padding: 28px;
  transition: border-color var(--t-base) var(--ease-out);
}
.heritage__slide::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img, linear-gradient(135deg, rgba(15, 42, 31, 0.3), rgba(10, 10, 10, 0.8)));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.8s var(--ease-out);
}
.heritage__slide::after {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,10,10,0.30) 0%, rgba(10,10,10,0.0) 42%, rgba(10,10,10,0.85) 100%);
}
.heritage__slide:hover { border-color: color-mix(in srgb, var(--c-accent) 50%, transparent); }
.heritage__slide:hover::before { transform: scale(1.06); }
.heritage__slide > div { position: relative; z-index: 2; }
.heritage__slide-meta { font-family: var(--ff-mono); font-size: 13px; color: var(--c-muted); letter-spacing: 0.1em; margin-bottom: 16px; }
.heritage__slide-ttl { font-family: var(--ff-display); font-weight: 900; font-size: 36px; line-height: 0.95; text-transform: uppercase; letter-spacing: -0.01em; }

/* --------------------------------------------------------------------------
   News
   -------------------------------------------------------------------------- */
.news { position: relative; }
.news__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: 56px; gap: 24px; flex-wrap: wrap; }
.news__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.news__card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-2);
  border: 1px solid var(--c-line);
  transition: transform var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out);
}
.news__card:hover { transform: translateY(-6px); border-color: var(--c-gold); }
.news__card-img {
  aspect-ratio: 16 / 10;
  background-color: var(--c-surface);
  border-bottom: 1px solid var(--c-line);
  position: relative;
  overflow: hidden;
}
.news__card-img::before {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.40) 100%),
    var(--img, linear-gradient(135deg, rgba(15, 42, 31, 0.4), rgba(10, 10, 10, 0.85)));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transition: transform 0.8s var(--ease-out);
}
.news__card:hover .news__card-img::before { transform: scale(1.08); }
.news__card-img::after {
  content: attr(data-label);
  position: absolute;
  top: 16px; left: 16px;
  z-index: 2;
  padding: 4px 10px;
  background: rgba(10, 10, 10, 0.7);
  color: var(--c-gold);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: 1px solid var(--c-line);
}
.news__card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.news__card-date { font-family: var(--ff-mono); color: var(--c-muted); font-size: var(--fs-caption); letter-spacing: 0.1em; }
.news__card-ttl  { font-family: var(--ff-display); font-weight: 900; font-size: 22px; line-height: 1.15; letter-spacing: -0.005em; text-transform: uppercase; }
.news__card-arr  { margin-top: auto; color: var(--c-accent); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; }
.news__card-body { padding: 32px 28px; gap: 16px; }

@media (max-width: 900px) {
  .news__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Partners
   -------------------------------------------------------------------------- */
.partners { background: var(--c-bg); }
.partners__row { margin-bottom: 56px; }
.partners__row:last-child { margin-bottom: 0; }
.partners__lbl {
  display: block;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 28px;
  font-weight: 700;
  font-family: var(--ff-display-alt);
}

/* HOST band — separate visual hierarchy, full-bleed lockup */
.partners__host {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 56px 48px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c-accent) 8%, transparent), rgba(255,255,255,0));
}
.partners__host-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.partners__host-meta .role {
  font-family: var(--ff-display-alt);
  font-size: 13px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-accent);
  font-weight: 700;
}
.partners__host-meta .name {
  font-family: var(--ff-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
}
.partners__host-lockup {
  width: clamp(220px, 28vw, 380px);
  height: auto;
  aspect-ratio: 8 / 1;                 /* horizontal logo true ratio */
  background: url("../assets/kolon-horizontal-white.png") no-repeat center center;
  background-size: contain;
  flex: 0 0 auto;
}

@media (max-width: 900px) {
  .partners__host { flex-direction: column; align-items: flex-start; padding: 36px 28px; gap: 28px; }
  .partners__host-lockup { width: 100%; }
}

.partners__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);   /* match the 4 partner cells — no empty trailing track */
  border: 1px solid var(--c-line);
}
.partners__cell {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-right: 1px solid var(--c-line);
  color: var(--c-paper);
  padding: 24px;
  transition: color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
  position: relative;
}
.partners__cell:last-child { border-right: 0; }
.partners__cell:hover { background: rgba(242, 242, 240, 0.03); }
.partners__cell .pmark {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  color: var(--c-accent);
  font-family: var(--ff-mono);
  font-size: 11px;
  font-weight: 700;
}
.partners__cell .pname {
  font-family: var(--ff-display);
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 800;
  line-height: 1;
}
.partners__cell .prole {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.partners__cell[data-logo] .pmark { display: none; }
.partners__cell[data-logo] .pname { display: none; }
.partners__cell[data-logo] .prole { display: none; }
.partners__cell[data-logo]::before {
  content: "";
  width: 80%;
  height: 60%;
  background: var(--logo-url) center/contain no-repeat;
}

@media (max-width: 900px) {
  .partners__grid { grid-template-columns: repeat(2, 1fr); }
  .partners__cell:nth-child(2n) { border-right: 0; }
  .partners__cell { border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 560px) {
  /* The 16/9 aspect forced cell width from its content height, blowing the
     2-up tracks past the viewport (2nd column was clipped). Let cells size
     to content on phones. */
  .partners__cell { aspect-ratio: auto; min-height: 96px; padding: 18px 12px; gap: 8px; }
  .partners__cell .pname { font-size: 13px; letter-spacing: 0.06em; text-align: center; }
}

/* Remove old Title Partner styling override */
.partners__cell--title { display: none; }

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.cta-final {
  position: relative;
  min-height: 80vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.cta-final__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--c-amber) 18%, transparent), transparent 60%),
    linear-gradient(180deg, var(--c-bg) 0%, var(--c-bg-2) 50%, var(--c-bg) 100%);
}
.cta-final__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(10, 10, 10, 0.4) 100%);
}
.cta-final__content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 var(--gutter);
}
.cta-final__title { margin-bottom: 24px; max-width: 16ch; margin-inline: auto; }
.cta-final__sub { color: var(--c-muted); margin-bottom: 48px; }
.cta-final__btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--c-bg);
  border-top: 1px solid var(--c-line-2);
  /* Background/border full-bleed; content aligned to the .container grid
     (same treatment as .gnb / .hero__content). */
  padding: 80px max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))) 32px;
}
/* Home has a fixed bottom action-bar (~40px) overlaying the page foot —
   add clearance so the footer copyright is never hidden beneath it. */
body[data-page="home"] .footer { padding-bottom: 72px; }
.footer__top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 80px;
}
/* Stacked wordmark — right-aligned lockup matching the reference:
   the longest word (BHUTAN) sets the width; KOLON/TRAIL/RUN align to its
   right edge, forming a clean right-justified staircase. */
.footer__wordmark {
  display: inline-block;
  text-align: right;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 100px);
  line-height: 0.86;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin-bottom: 24px;
  color: var(--c-paper);
}
.footer__wordmark span { display: block; }
.footer__brand p  { color: var(--c-muted); max-width: 34ch; font-size: 15px; line-height: 1.6; }

.footer__col h4 { font-family: var(--ff-display); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 20px; font-weight: 700; }
.footer__col ul li { margin-bottom: 14px; font-size: 15px; }
.footer__col ul li a { color: var(--c-paper); opacity: 0.78; transition: opacity var(--t-fast) var(--ease-out); }
.footer__col ul li a:hover { opacity: 1; color: var(--c-gold); }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 32px;
  border-top: 1px solid var(--c-line-2);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--c-muted);
  gap: 24px;
  flex-wrap: wrap;
}
.footer__bottom a { color: var(--c-muted); transition: color var(--t-fast) var(--ease-out); }
.footer__bottom a:hover { color: var(--c-paper); }
.footer__legal { display: flex; gap: 24px; }

@media (max-width: 900px) {
  .footer__top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer__brand { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   Sub Page — Page Hero
   -------------------------------------------------------------------------- */
.page-hero {
  /* Horizontal gutter comes from the inner .container so hero content aligns
     to the same grid as every section below (no double-gutter). */
  /* Minimal page-title banner: a short, low band — just breadcrumbs + page name. */
  padding: 120px 0 48px;
  min-height: 32vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-bottom: 1px solid var(--c-line-2);
  position: relative;
  overflow: hidden;
  --page-tint: var(--c-accent-3);
  background:
    radial-gradient(ellipse at 78% 24%, color-mix(in srgb, var(--page-tint) 16%, transparent), transparent 56%),
    radial-gradient(ellipse at 8% 92%, rgba(15, 42, 31, 0.16), transparent 55%);
}
.page-hero > .container { position: relative; z-index: 2; }
/* Giant page-name watermark — removed for the minimal page-title banner.
   (display:none keeps the per-page content rules inert rather than deleting them.) */
.page-hero::before {
  display: none;
  content: "";
  position: absolute;
  right: -0.05em; bottom: -0.16em;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(96px, 19vw, 320px);
  line-height: 0.74;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--page-tint) 12%, transparent);
  pointer-events: none;
  z-index: 0;
  white-space: nowrap;
}
.page-hero .t-accent { color: var(--page-tint); }
/* Optional sub-page hero photo — scrim keeps the headline legible, and the
   giant watermark is hidden when a real photo is present. */
.page-hero[style*="--hero-img"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.6) 52%, rgba(10,10,10,0.86) 100%),
    var(--hero-img);
  background-size: cover; background-position: center;
}
/* ---- Per-page identity ----
   StyleSeed single-accent: every sub-page hero uses the master Kolon green
   (--page-tint defaults to --c-accent-3, set on .page-hero above). The former
   per-page rainbow tints (gold/amber/terracotta/violet/rose/slate/teal/mint)
   are removed — one accent, greyscale elsewhere. Page identity now comes from
   the hero photo + page-name label, not colour. */

/* Bring the giant page-name watermark back ON the photo (it was hidden): tinted,
   low-opacity, above the photo scrim but behind the headline → big wayfinding. */
.page-hero[style*="--hero-img"]::before {
  color: color-mix(in srgb, var(--page-tint) 32%, transparent);
  z-index: 1;
}
/* Soft page-hue wash over the photo — darkened for the minimal banner so the
   small title stays crisp and the band reads "low and quiet". */
.page-hero[style*="--hero-img"]::after {
  background-image:
    radial-gradient(ellipse at 80% 16%, color-mix(in srgb, var(--page-tint) 16%, transparent), transparent 58%),
    linear-gradient(180deg, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.72) 52%, rgba(10,10,10,0.92) 100%),
    var(--hero-img);
}

/* --------------------------------------------------------------------------
   Lookbook — editorial photo gallery (masonry, hover zoom)
   -------------------------------------------------------------------------- */
.lookbook { padding: clamp(48px, 7vh, 96px) var(--gutter); }
.lb-grid { column-count: 3; column-gap: 16px; max-width: var(--container); margin: 0 auto; }
.lb-figure {
  break-inside: avoid; margin: 0 0 16px; overflow: hidden;
  border-radius: var(--radius-xs); position: relative; background: var(--c-surface);
}
.lb-figure picture { display: block; }
.lb-figure img { width: 100%; height: auto; display: block; transition: transform 0.9s var(--ease-out); }
.lb-figure:hover img { transform: scale(1.05); }
.lb-figure__cap {
  position: absolute; left: 14px; bottom: 12px; z-index: 2;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-paper); opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out); text-shadow: 0 1px 10px rgba(0,0,0,0.6);
}
.lb-figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 62%, rgba(10,10,10,0.45));
  opacity: 0; transition: opacity 0.4s var(--ease-out);
}
.lb-figure:hover::after, .lb-figure:hover .lb-figure__cap { opacity: 1; transform: none; }
@media (max-width: 900px) { .lb-grid { column-count: 2; } }
@media (max-width: 560px) { .lb-grid { column-count: 1; } }

/* --------------------------------------------------------------------------
   Notice — official announcement board (date · category · title rows)
   -------------------------------------------------------------------------- */
.notice-list { max-width: 1000px; margin: 0 auto; border-top: 1px solid var(--c-line); }
.notice-item {
  display: grid; grid-template-columns: 116px 132px 1fr auto; align-items: center; gap: 24px;
  padding: 22px 26px; border-bottom: 1px solid var(--c-line);
  transition: background var(--t-fast) var(--ease-out);
}
.notice-item:hover { background: rgba(242, 242, 240, 0.03); }
.notice-item__date { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--c-muted); font-variant-numeric: tabular-nums; position: relative; padding-left: 15px; }
.notice-item__tag {
  justify-self: start; font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--c-accent);
  border: 1px solid var(--c-line); padding: 4px 11px; border-radius: 999px;
}
.notice-item__title { font-family: var(--ff-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--c-paper); transition: color var(--t-fast) var(--ease-out); }
.notice-item__title:hover { color: var(--c-accent); }
.notice-item__arr { color: var(--c-muted-2); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.notice-item:hover .notice-item__arr { color: var(--c-paper); transform: translateX(4px); }
.notice-item--pin { background: color-mix(in srgb, var(--c-accent) 7%, transparent); }
.notice-item--pin .notice-item__date::before { content: "●"; position: absolute; left: 0; top: 50%; transform: translateY(-50%); color: var(--c-accent); font-size: 9px; line-height: 1; }
.notice-foot { margin-top: 28px; font-size: 13px; }
@media (max-width: 700px) {
  .notice-item { grid-template-columns: 1fr auto; gap: 8px 12px; padding: 18px 20px; }
  .notice-item__date { grid-column: 1; grid-row: 1; }
  .notice-item__tag { grid-column: 2; grid-row: 1; justify-self: end; }
  .notice-item__title { grid-column: 1 / -1; grid-row: 2; font-size: 16px; }
  .notice-item__arr { display: none; }
}

/* Notice detail — article reading column */
.article { padding: 150px var(--gutter) clamp(64px, 10vh, 120px); }
.article__col { max-width: 740px; margin: 0 auto; }
.article__crumbs { font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; color: var(--c-muted); margin-bottom: 26px; }
.article__crumbs a { color: var(--c-muted); }
.article__crumbs a:hover { color: var(--c-paper); }
.article__meta { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.article__tag { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent); border: 1px solid var(--c-line); padding: 4px 11px; border-radius: 999px; }
.article__date { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--c-muted); font-variant-numeric: tabular-nums; }
.article__col h1 { font-family: var(--ff-display); font-weight: 800; font-size: clamp(30px, 4vw, 56px); line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 24px; }
.article__lead { font-size: clamp(17px, 1.6vw, 20px); line-height: 1.7; color: var(--c-paper); margin-bottom: 32px; }
.article__col h2 { font-family: var(--ff-display); font-weight: 800; font-size: clamp(20px, 2.2vw, 26px); text-transform: uppercase; letter-spacing: -0.005em; margin: 40px 0 14px; }
.article__col p { font-size: 17px; line-height: 1.78; color: var(--c-paper-2); margin-bottom: 20px; }
.article__col ul { margin: 0 0 22px; display: flex; flex-direction: column; gap: 10px; }
.article__col li { position: relative; padding-left: 22px; color: var(--c-paper-2); line-height: 1.6; }
.article__col li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); }
.article__box { border: 1px solid var(--c-line); border-radius: var(--radius-md); padding: 22px 24px; margin: 30px 0; background: color-mix(in srgb, var(--c-accent) 6%, transparent); }
.article__box .t-cap { display: block; margin-bottom: 10px; }
.article__back { display: inline-flex; gap: 10px; align-items: center; font-family: var(--ff-mono); font-size: var(--fs-caption); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); margin-top: 44px; transition: color var(--t-fast) var(--ease-out); }
.article__back:hover { color: var(--c-paper); }

/* ==========================================================================
   PER-PAGE CHARACTER — each page keeps the key colours but gets a distinct
   layout personality (driven by body[data-page]).
   ========================================================================== */

/* RACE · technical blueprint / dashboard ---------------------------------- */
/* (race blueprint background grid removed) */
/* (race telemetry HUD removed — it duplicated the THE NUMBERS stat grid) */
/* cards become a hairline-ruled instrument cluster */
body[data-page="race"] .cards-grid { gap: 1px; background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden; }
body[data-page="race"] .cards-grid > div { background: var(--c-bg); padding: 30px 26px; position: relative; }
body[data-page="race"] .cards-grid > div::after {
  content: ""; position: absolute; top: 12px; right: 12px; width: 9px; height: 9px;
  border-top: 1px solid var(--c-line); border-right: 1px solid var(--c-line); opacity: 0.7;
}
body[data-page="race"] .card-icon {
  width: auto; height: auto; border: 0; border-radius: 0; place-items: start;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.18em; color: var(--c-accent);
  margin-bottom: 18px;
}
body[data-page="race"] .card-icon::before { content: "// "; opacity: 0.6; }
body[data-page="race"] .card-ttl { font-family: var(--ff-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-caption); }
body[data-page="race"] .card-desc { font-variant-numeric: tabular-nums; }
/* Deterministic columns so 4-card clusters never leave orphan/empty cells */
@media (min-width: 1024px) { body[data-page="race"] .cards-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 601px) and (max-width: 1023px) { body[data-page="race"] .cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { body[data-page="race"] .cards-grid { grid-template-columns: 1fr; } }

/* STAT DASHBOARD — big-figure "by the numbers" infographic (Race summary).
   6 figures in a clean 3×2 hairline cluster — no orphan cells. */
.statgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--c-line); border: 1px solid var(--c-line); border-radius: var(--radius); overflow: hidden;
}
.stat { background: var(--c-bg); padding: clamp(26px, 3vw, 40px) clamp(22px, 2.4vw, 32px); position: relative; }
.stat__idx { position: absolute; top: 16px; right: 18px; font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.14em; color: var(--c-accent); opacity: 0.5; }
.stat__idx::before { content: "// "; }
.stat__big { display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px; }
.stat__val { font-family: var(--ff-display); font-weight: 800; font-size: clamp(46px, 6vw, 78px); line-height: 0.85; letter-spacing: -0.03em; color: var(--c-paper); font-variant-numeric: tabular-nums; }
.stat__unit { font-family: var(--ff-mono); font-size: clamp(15px, 1.4vw, 20px); font-weight: 600; color: var(--c-accent-3); letter-spacing: 0.02em; }
.stat__label { font-family: var(--ff-mono); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--fs-caption); color: var(--c-paper); margin-bottom: 8px; }
.stat__sub { font-size: var(--fs-data-sm); line-height: 1.55; color: var(--c-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .statgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .statgrid { grid-template-columns: 1fr; } }

/* JOURNEY FLOW — day-stage cards (Experience). No timeline rail / node dots:
   the DAY 01–04 labels carry the sequence, and faint mono dots/rail just read
   as clutter against the cards. */
.journey-flow { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 40px); }
.journey-flow::before { content: none; }
.jstage { position: relative; padding-top: 22px; }
.jstage::before, .jstage--peak::before { content: none; }
.jstage__day { font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-accent); display: block; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.jstage__ttl { font-family: var(--ff-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -0.015em; text-transform: uppercase; line-height: 1.2; margin-bottom: 8px; }
.jstage__loc { font-family: var(--ff-mono); font-size: var(--fs-meta); color: var(--c-accent-3); letter-spacing: 0.03em; display: block; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.jstage__desc { font-size: var(--fs-data-sm); line-height: 1.6; color: var(--c-muted); }
@media (max-width: 760px) {
  /* single column of separated cards (no rail to keep them flush) */
  .journey-flow { grid-template-columns: 1fr; gap: 14px; }
}

/* PER-PAGE 3D OBJECT — a CC0 glTF specimen mounted via WebGPU/WebGL */
.obj3d-section { padding: clamp(52px, 9vh, 110px) 0; border-top: 1px solid var(--c-line-2); position: relative; }
.obj3d-stage { position: relative; width: 100%; height: clamp(340px, 50vh, 540px); }
.obj3d { width: 100%; height: 100%; display: block; touch-action: pan-y; position: relative; z-index: 1; }
/* Load poster: a capture of the actual 3D render, shown BEHIND the transparent
   canvas until the GLB finishes loading, then cross-faded out (initPageObjects
   adds .is-loaded once the model is in). Keeps the stage from sitting empty
   during the ~8.8MB model fetch — phones now load the live object too. */
.obj3d-still {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  z-index: 0; pointer-events: none;
  transition: opacity 0.7s var(--ease-out);
}
.obj3d-stage.is-loaded .obj3d-still { opacity: 0; }
/* StyleSeed error state — poster stays, a quiet caption + Retry sits at the base. */
.obj3d-fail {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 4;
  text-align: center; font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-muted);
}
.obj3d-retry {
  background: none; border: 0; padding: 6px 8px; min-height: 44px;
  font: inherit; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-accent-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.obj3d-retry:hover { color: var(--c-accent-2); }
.obj3d-label {
  display: block; text-align: center; margin-top: 20px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted);
}
.obj3d-label b { color: var(--c-accent-3); font-weight: 600; letter-spacing: 0.16em; }
@media (max-width: 700px) { .obj3d-stage { height: clamp(280px, 42vh, 380px); } }

/* ROUTE MAP — multi-leg journey diagram (Travel: ICN → BKK → Paro) */
.routemap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 30px clamp(20px, 3vw, 36px); margin-bottom: 48px;
  border: 1px solid var(--c-line); border-radius: var(--radius); background: rgba(255,255,255,0.012);
}
.rm-node { display: flex; flex-direction: column; gap: 5px; text-align: center; flex: 0 0 auto; }
.rm-code { font-family: var(--ff-display); font-weight: 800; font-size: clamp(26px, 3vw, 42px); letter-spacing: -0.01em; line-height: 1; }
.rm-city { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-muted); }
.rm-node--dest .rm-code { color: var(--c-accent); }
.rm-leg { flex: 1 1 90px; min-width: 80px; display: flex; justify-content: center; position: relative; padding: 0 10px; }
.rm-leg::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, var(--c-accent) 0 7px, transparent 7px 13px); opacity: 0.55;
}
.rm-leg--charter::before { background: var(--c-accent); opacity: 0.7; }
.rm-leg__mode {
  position: relative; z-index: 1; background: var(--c-bg); padding: 4px 10px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-accent-3);
  white-space: nowrap;
}
.rm-leg__mode::before { content: "✈ "; }
.rm-leg--charter .rm-leg__mode::before { content: "⤳ "; }
@media (max-width: 620px) {
  /* Stacked timeline: ONE continuous dashed spine in a left gutter with a
     station dot per code row — replaces the disconnected per-leg dashes that
     left a gap at every node. Content is indented so the spine never crosses
     the airport codes. */
  .routemap { flex-direction: column; align-items: stretch; gap: 0; position: relative; padding-left: 24px; }
  .routemap::before {
    content: ""; position: absolute; left: 7px; top: 16px; bottom: 16px; width: 2px;
    background: repeating-linear-gradient(180deg, var(--c-accent) 0 7px, transparent 7px 13px); opacity: 0.55;
  }
  .rm-node { flex-direction: row; align-items: baseline; gap: 12px; padding: 6px 0; position: relative; }
  .rm-node::after {
    content: ""; position: absolute; left: -20px; top: 14px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-accent);
  }
  .rm-node--dest::after { background: var(--c-accent); }
  /* reset the desktop `flex: 1 1 90px`: in this column layout the 90px basis
     becomes HEIGHT, stretching each leg into a tall empty box. Let it size to
     its label instead. */
  .rm-leg { flex: 0 0 auto; width: 100%; min-height: 38px; justify-content: flex-start; padding: 0; }
  .rm-leg::before { content: none; }
  .rm-leg__mode { margin-left: 0; }
}

/* EXPERIENCE · concierge day-stage passage -------------------------------- */
/* Refined hospitality eyebrow — a hairline kicker with extra air */
body[data-page="experience"] .subsection__head .t-cap { letter-spacing: 0.24em; }
body[data-page="experience"] .subsection__head .t-cap::after {
  content: ""; display: block; width: 40px; height: 2px; background: var(--c-accent);
  margin-top: 14px; opacity: 0.8;
}

/* ELIGIBILITY · checklist / intake-form ----------------------------------- */
/* Lists become tick-able checklists */
body[data-page="eligibility"] .two-col__main ul li { padding-left: 38px; }
body[data-page="eligibility"] .two-col__main ul li::before {
  content: ""; left: 0; top: 13px; width: 18px; height: 18px;
  border: 1.5px solid var(--c-accent); border-radius: var(--radius-xs); background: transparent;
}
body[data-page="eligibility"] .two-col__main ul li::after {
  content: "✓"; position: absolute; left: 0; top: 13px;
  width: 18px; height: 18px; display: grid; place-items: center;   /* centre the tick in the 18px box (was floating ~7px high) */
  font-size: 12px; font-weight: 800; color: var(--c-accent); line-height: 1;
}
/* The four pillars get a "requirement met" check badge */
body[data-page="eligibility"] #pillars .cards-grid > div { position: relative; }
/* Badge on ::before so the glass-sheen ::after (floating-card rule) survives. */
body[data-page="eligibility"] #pillars .cards-grid > div::before {
  content: "✓"; position: absolute; top: 18px; right: 18px;
  width: 22px; height: 22px; border: 1px solid var(--c-accent); border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  color: var(--c-accent); opacity: 0.65; z-index: 1;
}
body[data-page="eligibility"] #pillars .card-icon { border-radius: 6px; border-width: 1.5px; }
/* Document table rows feel like fillable fields */
body[data-page="eligibility"] .tbl tbody tr { transition: background var(--t-fast) var(--ease-out); }
body[data-page="eligibility"] .tbl tbody tr:hover { background: color-mix(in srgb, var(--c-accent) 5%, transparent); }
body[data-page="eligibility"] .tbl td:first-child {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--c-accent);
}

/* BHUTAN · editorial / magazine ------------------------------------------- */
/* Editorial column rule between standfirst aside and the body column */
@media (min-width: 901px) {
  body[data-page="bhutan"] .two-col { gap: clamp(48px, 6vw, 96px); }
  /* Rule on the always-full-height body column, not the short sticky aside
     (whose border-right stopped a third of the way down the row). */
  body[data-page="bhutan"] .two-col__main {
    border-left: 1px solid var(--c-line); padding-left: clamp(24px, 3vw, 48px);
  }
}
/* Drop cap opens each editorial passage */
body[data-page="bhutan"] .two-col__main > p:first-of-type::first-letter {
  float: left; font-family: var(--ff-display); font-weight: 800;
  font-size: 3.4em; line-height: 0.72; padding: 6px 12px 0 0; color: var(--c-paper);
}
/* More generous, literary body measure + leading */
body[data-page="bhutan"] .two-col__main p { font-size: 16px; line-height: 1.85; max-width: 60ch; color: var(--c-paper-2); }
body[data-page="bhutan"] .two-col__main h3 {
  font-style: italic; text-transform: none; letter-spacing: -0.01em;
  color: var(--c-paper); font-size: 22px;
}
body[data-page="bhutan"] .two-col__aside h2 em,
body[data-page="bhutan"] .two-col__aside .t-cap { letter-spacing: 0.04em; }

/* CONTACT · minimal — type-led, near-empty canvas ------------------------- */
body[data-page="contact"] .cards-grid { background: transparent; border: 0; gap: 0; grid-template-columns: 1fr; }
body[data-page="contact"] .cards-grid > * { background: transparent; padding: 0; }
body[data-page="contact"] .news__card {
  border: 0; border-top: 1px solid var(--c-line); border-radius: 0;
  display: flex; align-items: center; transition: padding-left var(--t-base) var(--ease-out);
}
body[data-page="contact"] .cards-grid > a:last-child .news__card,
body[data-page="contact"] .cards-grid > .news__card:last-child { border-bottom: 1px solid var(--c-line); }
body[data-page="contact"] .news__card:hover { transform: none; padding-left: 14px; border-color: var(--c-accent); }
body[data-page="contact"] .news__card-body { padding: clamp(26px, 4vw, 46px) 0; gap: 8px; width: 100%; }
body[data-page="contact"] .news__card-ttl { font-size: clamp(26px, 4.4vw, 52px); text-transform: none; letter-spacing: -0.02em; font-weight: 800; }
body[data-page="contact"] .news__card-arr { margin-top: 4px; }
body[data-page="contact"] .news__card .tag { position: absolute; top: clamp(26px, 4vw, 46px); right: 0; margin: 0 !important; }
body[data-page="contact"] .news__card-body { position: relative; }

/* RULES · formal legal document ------------------------------------------- */
/* A ruled left margin runs the length of the articles, like legal paper */
body[data-page="rules"] .acc-item { padding-left: clamp(20px, 4vw, 56px); border-left: 1px solid var(--c-line); }
body[data-page="rules"] .acc-item:first-of-type { border-top: 1px solid var(--c-line); }
/* Every article is open by default, so its panel must not clip at the 1000px cap. */
body[data-page="rules"] .acc-item.is-open .acc-panel { max-height: none; }
body[data-page="rules"] .acc-trigger .num {
  min-width: 92px; color: var(--c-accent); font-variant-numeric: tabular-nums;
}
body[data-page="rules"] .acc-trigger .ttl { text-transform: none; font-style: italic; letter-spacing: -0.01em; }
/* Justified, indented clause text — the legal-prose signature */
body[data-page="rules"] .acc-panel-inner { text-align: justify; hyphens: auto; max-width: 78ch; }
body[data-page="rules"] .acc-panel-inner strong { font-style: normal; letter-spacing: 0.02em; }

.page-hero__crumbs {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 32px;
  font-family: var(--ff-mono);
  font-size: 13px;
  color: var(--c-muted);
  letter-spacing: 0.07em;
}
.page-hero__crumbs a { transition: color var(--t-fast) var(--ease-out); }
.page-hero__crumbs a:hover { color: var(--c-gold); }
.page-hero h1 { margin-bottom: 24px; }
/* Minimal page-title — small, clean page name that replaces the old hero headline. */
.page-hero__title {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(30px, 4.2vw, 56px);
  line-height: 1.02;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--c-paper);
}
.page-hero__lead { color: var(--c-muted); max-width: 56ch; font-size: var(--fs-body-l); }

/* Per-page identity. Brand palette ONLY (green + gold — the two key colours);
   each banner differs by COMPOSITION, not just colour. */

/* Watermark fallback words (hidden when a hero photo is present) */
body[data-page="experience"]  .page-hero::before { content: "EXPERIENCE"; }
body[data-page="race"]        .page-hero::before { content: "RACE"; left: -0.05em; right: auto; }
body[data-page="eligibility"] .page-hero::before { content: "ENTRY"; }
body[data-page="bhutan"]      .page-hero::before { content: "DRUK YUL"; left: -0.05em; right: auto; }
body[data-page="news"]        .page-hero::before { content: "NEWS"; left: -0.05em; right: auto; }
body[data-page="contact"]     .page-hero::before { content: "CONTACT"; }
body[data-page="rules"]       .page-hero::before { content: "RULES"; left: -0.05em; right: auto; }

/* Unified sub-page hero — every banner shares ONE composition for
   consistency: left-aligned, content anchored low, single green accent
   (--page-tint defaults to --c-accent-3). Per-page colour and structure
   variants were removed so headers read as one system. */

/* Sub-page section spacing */
.subsection {
  padding-block: clamp(44px, 6vh, 76px);
  border-bottom: 1px solid var(--c-line-2);
}
.subsection:last-child { border-bottom: 0; }
/* Avoid a doubled 2px seam where a subsection meets a .obj3d-section (which
   draws its own border-top) — drop the subsection's bottom rule there. */
.subsection:has(+ .obj3d-section) { border-bottom: 0; }
.subsection__head {
  margin-bottom: 32px;
}
.subsection__head .t-cap { color: var(--c-accent-3); }
.subsection__head h2 { margin-top: 12px; }

/* Tables (race CP, eligibility docs) */
.tbl-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-data);
}
.tbl-wrap .tbl { min-width: 440px; }
.tbl th, .tbl td {
  padding: 16px 16px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.tbl th {
  font-family: var(--ff-display);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--c-paper);
}
.tbl td .em { color: var(--c-gold); font-family: var(--ff-mono); }

/* Phone: the two 3-column PROSE tables (bhutan Essentials · eligibility Fee &
   Refund) crammed to ~110px columns and wrapped every cell to 6-8 lines. Stack
   each row into a readable block instead. The race table (numeric, 5-col) keeps
   its own mobile treatment (drops the Note column), so it's untouched here. */
@media (max-width: 560px) {
  body[data-page="bhutan"] .tbl,
  body[data-page="bhutan"] .tbl tbody,
  body[data-page="bhutan"] .tbl tr,
  body[data-page="bhutan"] .tbl td,
  body[data-page="eligibility"] #refund .tbl,
  body[data-page="eligibility"] #refund .tbl tbody,
  body[data-page="eligibility"] #refund .tbl tr,
  body[data-page="eligibility"] #refund .tbl td { display: block; width: auto; min-width: 0; }
  body[data-page="bhutan"] .tbl thead,
  body[data-page="eligibility"] #refund .tbl thead { display: none; }
  body[data-page="bhutan"] .tbl tr,
  body[data-page="eligibility"] #refund .tbl tr {
    padding: 16px 20px; border-bottom: 1px solid var(--glass-border);
  }
  body[data-page="bhutan"] .tbl tbody tr:last-child,
  body[data-page="eligibility"] #refund .tbl tbody tr:last-child { border-bottom: 0; }
  body[data-page="bhutan"] .tbl td,
  body[data-page="eligibility"] #refund .tbl td { padding: 0; border: 0; }
  /* first cell → row heading */
  body[data-page="bhutan"] .tbl td:first-child {
    font-family: var(--ff-display); font-weight: 700; font-size: 16px;
    color: var(--c-paper); margin-bottom: 7px;
  }
  body[data-page="eligibility"] #refund .tbl td:first-child { margin-bottom: 7px; }
  /* last (tip / note) cell → muted, set off from the value above it */
  body[data-page="bhutan"] .tbl td:last-child,
  body[data-page="eligibility"] #refund .tbl td:last-child {
    color: var(--c-muted); font-size: var(--fs-data-sm); margin-top: 5px;
  }
}

/* Accordion (rules) */
.acc-item { border-bottom: 1px solid var(--c-line); }
.acc-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  text-align: left;
}
.acc-trigger .num { font-family: var(--ff-mono); color: var(--c-gold); font-size: var(--fs-meta); letter-spacing: 0.1em; margin-right: 24px; }
.acc-trigger .ttl { flex: 1; font-family: var(--ff-display); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; text-transform: uppercase; }
.acc-trigger .icon {
  width: 28px; height: 28px;
  border: 1px solid var(--c-line);
  display: grid; place-items: center;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.acc-item.is-open .acc-trigger .icon { transform: rotate(45deg); border-color: var(--c-gold); color: var(--c-gold); }
.acc-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--t-base) var(--ease-out);
  color: var(--c-muted);
}
.acc-item.is-open .acc-panel { max-height: 1000px; }
/* phones wrap the same answer ~2x taller (narrow + 18px body); the 1000px cap
   clipped the longest answers (e.g. the rules medical clause). Uncap on mobile. */
@media (max-width: 760px) { .acc-item.is-open .acc-panel { max-height: 3000px; } }
.acc-panel-inner { padding: 0 0 28px; max-width: 70ch; line-height: 1.7; }

/* Homepage journey — the hour-by-hour schedule collapsed into an accordion.
   The table is taller than the default 1000px open cap, so raise it; the inner
   wrapper's 70ch text width is overridden inline so the table spans full width. */
.sched-acc { margin-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--c-line); }
.sched-acc.is-open .acc-panel { max-height: 1600px; }
@media (max-width: 760px) { .sched-acc.is-open .acc-panel { max-height: 2600px; } }

/* Part dividers — split the home page into "The Race" and "The Trip" blocks.
   scroll-margin-top clears the fixed GNB when the #trip / #race anchor is jumped to. */
.part-divider {
  display: flex; align-items: center; gap: 18px;
  margin-top: clamp(48px, 8vh, 96px);
  padding-top: clamp(36px, 5vh, 64px);
  border-top: 1px solid var(--c-line);
  scroll-margin-top: 88px;
}
.part-divider > span { font-size: clamp(18px, 2vw, 24px); letter-spacing: 0.18em; white-space: nowrap; }
.part-divider::after { content: ""; flex: 1; height: 1px; background: var(--c-line-2); }

/* Terrain & Highlights collapsed into an accordion (tall prose → generous cap) */
.terrain-acc { margin-top: clamp(40px, 6vh, 64px); border-top: 1px solid var(--c-line); }
.terrain-acc.is-open .acc-panel { max-height: 2800px; }
@media (max-width: 760px) { .terrain-acc.is-open .acc-panel { max-height: 5200px; } }

/* FAQ — question-style accordion (no uppercase, readable questions) */
body[data-page="faq"] .acc-trigger { align-items: flex-start; }
body[data-page="faq"] .acc-trigger .ttl { text-transform: none; font-weight: 600; letter-spacing: -0.01em; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.45; }
body[data-page="faq"] .acc-trigger .num { color: var(--c-accent-3); min-width: 32px; line-height: calc(clamp(15px, 1.6vw, 18px) * 1.45); }
/* flex-start top-aligns the chip; nudge it onto the question's first line */
body[data-page="faq"] .acc-trigger .icon { margin-top: -2px; }

/* Card grid for sub-pages */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--c-line);
  border: 1px solid var(--c-line);
}
.cards-grid > * { background: var(--c-bg); padding: 32px 28px; }
/* Orphan-cell guard — even columns by exact card count so a partial last row
   never leaves line-coloured empty cells (the "hole"). :where() keeps these at
   .cards-grid specificity, so per-page overrides (race/contact) still win. */
.cards-grid:where(:has(> :nth-child(3):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid:where(:has(> :nth-child(4):last-child)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cards-grid:where(:has(> :nth-child(6):last-child)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .cards-grid:where(:has(> :nth-child(4):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cards-grid:where(:has(> :nth-child(6):last-child)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .cards-grid:where(:has(> :nth-child(3):last-child)) { grid-template-columns: 1fr; } }
@media (max-width: 560px)  {
  .cards-grid:where(:has(> :nth-child(4):last-child)),
  .cards-grid:where(:has(> :nth-child(6):last-child)) { grid-template-columns: 1fr; }
}
.card-ttl { font-family: var(--ff-display); font-weight: 700; font-size: 18px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: -0.005em; }
.card-desc { color: var(--c-muted); font-size: var(--fs-note); line-height: 1.62; }
.card-icon {
  /* Auto-grow to fit any short label or time string */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  font-family: var(--ff-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  white-space: nowrap;
  border-radius: var(--radius-xs);
  flex: 0 0 auto;
  align-self: flex-start;
}

/* Two-column with sticky aside */
.two-col {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
.two-col__aside { position: sticky; top: 120px; }
.two-col__aside .t-cap { color: var(--c-gold); display: block; margin-bottom: 12px; }
.two-col__aside h2 { margin-bottom: 16px; }
.two-col__aside p { color: var(--c-muted); }
.two-col__main p { color: var(--c-muted); margin-bottom: 18px; line-height: 1.75; max-width: 64ch; }
.two-col__main h3 { font-family: var(--ff-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: -0.005em; margin: 40px 0 16px; }
.two-col__main ul { margin: 18px 0; }
.two-col__main ul li {
  padding: 12px 0;
  border-bottom: 1px solid var(--c-line);
  color: var(--c-muted);
  position: relative;
  padding-left: 24px;
}
.two-col__main ul li::before {
  content: "";
  position: absolute;
  left: 0; top: calc(12px + 0.8em);   /* line-box centre = padding-top + half line-height */
  width: 8px; height: 1px;
  background: var(--c-gold);
}
.two-col__main ul li:last-child { border-bottom: 0; }

@media (max-width: 900px) {
  .two-col { grid-template-columns: 1fr; }
  .two-col__aside { position: static; }
}

/* Tag */
.tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  color: var(--c-muted);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--ff-display);
}
.tag--gold { color: var(--c-gold); border-color: var(--c-gold); }
.tag--signal { color: var(--c-signal); border-color: var(--c-signal); }

/* Utility blocks */
.notice {
  border: 1px solid var(--c-signal);
  background: color-mix(in srgb, var(--c-signal) 6%, transparent);
  padding: 24px 28px;
  margin: 32px 0;
  color: var(--c-paper);
}
.notice .t-cap { color: var(--c-signal); display: block; margin-bottom: 8px; }

/* Reveal on scroll */
/* Apple-style entrance: fade + rise + a whisper of scale, smooth decel. */
[data-reveal] { opacity: 0; transform: translateY(34px) scale(0.985); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
[data-reveal].is-inview { opacity: 1; transform: none; }

/* never-blank failsafe: the inline <head> script adds html.ktr-failsafe if main.js
   hasn't booted within 3s (blocked CDN / JS error / unsupported browser). Reveal
   everything main.js would have shown and dismiss the splash, so no page is ever
   stuck blank — present on ALL pages, not just index. */
html.ktr-failsafe #splash { display: none !important; }
html.ktr-failsafe [data-reveal],
html.ktr-failsafe .intro__statement,
html.ktr-failsafe .mask-rv,
html.ktr-failsafe .statgrid .stat,
html.ktr-failsafe .journey-flow .jstage,
html.ktr-failsafe .routemap .rm-node,
html.ktr-failsafe .routemap .rm-leg__mode { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.ktr-failsafe .acc-panel { max-height: none !important; }   /* rules.html clauses readable without JS */
[data-reveal-delay="1"].is-inview { transition-delay: 0.09s; }
[data-reveal-delay="2"].is-inview { transition-delay: 0.18s; }
[data-reveal-delay="3"].is-inview { transition-delay: 0.27s; }

/* ==========================================================================
   MOTION LAYER — premium scroll-triggered reveals (JS adds the trigger class).
   ========================================================================== */

/* Masked heading rise — section titles wipe up from behind their own edge */
.mask-rv { clip-path: inset(-4% -6% 100% -6%); transform: translateY(0.24em); opacity: 0; will-change: clip-path, transform; }
.mask-rv.is-shown {
  clip-path: inset(-30% -6% -16% -6%); transform: none; opacity: 1;
  transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out), opacity 0.7s var(--ease-out);
}

/* Stat dashboard — figures rise in sequence (counters count up via JS) */
.statgrid .stat { opacity: 0; transform: translateY(26px); }
.statgrid.is-inview .stat { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out); }
.statgrid.is-inview .stat:nth-child(2) { transition-delay: 0.07s; }
.statgrid.is-inview .stat:nth-child(3) { transition-delay: 0.14s; }
.statgrid.is-inview .stat:nth-child(4) { transition-delay: 0.21s; }
.statgrid.is-inview .stat:nth-child(5) { transition-delay: 0.28s; }
.statgrid.is-inview .stat:nth-child(6) { transition-delay: 0.35s; }

/* Journey flow — rail draws across, stages rise, nodes pop in sequence */
.journey-flow::before { transform: scaleX(0); transform-origin: left center; }
.journey-flow.is-inview::before { transform: scaleX(1); transition: transform 1.2s var(--ease-out) 0.1s; }
.journey-flow .jstage { opacity: 0; transform: translateY(22px); }
.journey-flow.is-inview .jstage { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.journey-flow.is-inview .jstage:nth-child(2) { transition-delay: 0.13s; }
.journey-flow.is-inview .jstage:nth-child(3) { transition-delay: 0.26s; }
.journey-flow.is-inview .jstage:nth-child(4) { transition-delay: 0.39s; }
.journey-flow .jstage::before { transform: scale(0); }
.journey-flow.is-inview .jstage::before { transform: scale(1); transition: transform 0.5s var(--ease-out) 0.35s; }
.journey-flow.is-inview .jstage:nth-child(2)::before { transition-delay: 0.48s; }
.journey-flow.is-inview .jstage:nth-child(3)::before { transition-delay: 0.61s; }
.journey-flow.is-inview .jstage:nth-child(4)::before { transition-delay: 0.74s; }
@media (max-width: 760px) {
  .journey-flow::before { transform: scaleY(0); transform-origin: top center; }
  .journey-flow.is-inview::before { transform: scaleY(1); }
}

/* Route map — legs draw, airport codes pop along the path */
.rm-leg::before { transform: scaleX(0); transform-origin: left center; }
.routemap.is-inview .rm-leg::before { transform: scaleX(1); transition: transform 0.85s var(--ease-out) 0.15s; }
.routemap .rm-node, .routemap .rm-leg__mode { opacity: 0; transform: translateY(10px); }
.routemap.is-inview .rm-node, .routemap.is-inview .rm-leg__mode { opacity: 1; transform: none; transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out); }
.routemap.is-inview .rm-leg:nth-child(2) .rm-leg__mode { transition-delay: 0.18s; }
.routemap.is-inview .rm-node:nth-child(3) { transition-delay: 0.30s; }
.routemap.is-inview .rm-leg:nth-child(4) .rm-leg__mode { transition-delay: 0.45s; }
.routemap.is-inview .rm-node:nth-child(5) { transition-delay: 0.55s; }
@media (max-width: 620px) {
  .rm-leg::before { transform: scaleY(0); transform-origin: top center; }
  .routemap.is-inview .rm-leg::before { transform: scaleY(1); }
}

/* Elevation profile — the line draws itself, then fill + markers settle in */
#elevationProfile .ep-line { stroke-dasharray: 2600; stroke-dashoffset: 2600; }
#elevationProfile.is-drawn .ep-line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.1s var(--ease-out); }
#elevationProfile .ep-area { opacity: 0; }
#elevationProfile.is-drawn .ep-area { opacity: 1; transition: opacity 1.4s var(--ease-out) 0.5s; }
#elevationProfile .ep-dot, #elevationProfile .ep-stem,
#elevationProfile .ep-name, #elevationProfile .ep-meta, #elevationProfile .ep-leg,
#elevationProfile .ep-zone { opacity: 0; }
#elevationProfile.is-drawn .ep-zone { opacity: 0.06; transition: opacity 0.8s var(--ease-out) 1.8s; }
#elevationProfile.is-drawn .ep-dot { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.4s; }
#elevationProfile.is-drawn .ep-stem { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.5s; }
#elevationProfile.is-drawn .ep-name { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.6s; }
#elevationProfile.is-drawn .ep-meta { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.7s; }
#elevationProfile.is-drawn .ep-leg { opacity: 1; transition: opacity 0.6s var(--ease-out) 1.8s; }

/* Reduced motion: show everything, no transitions */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .intro__statement,
  .mask-rv, .statgrid .stat, .journey-flow .jstage,
  .routemap .rm-node, .routemap .rm-leg__mode {
    opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important;
  }
  .journey-flow::before, .rm-leg::before, .journey-flow .jstage::before { transform: none !important; }
  #elevationProfile .ep-line { stroke-dashoffset: 0 !important; }
  #elevationProfile .ep-area, #elevationProfile .ep-dot, #elevationProfile .ep-stem,
  #elevationProfile .ep-name, #elevationProfile .ep-meta, #elevationProfile .ep-leg { opacity: 1 !important; }
  #elevationProfile .ep-zone { opacity: 0.06 !important; }
}

/* Full-screen "moment" sections — one section, one screen (Apple-style). */
.section--screen { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
.section--screen > * { min-width: 0; }  /* flex children may shrink (prevents min-content overflow) */
.object3d.object3d { min-height: 100svh; align-content: center; }
.cta-final { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 700px) {
  /* Drop the full-screen flex centring on phones — revert to normal block
     flow so content sizes naturally (and no flex min-width overflow). */
  .section--screen, .object3d.object3d, .cta-final { min-height: 0; }
  .section--screen, .cta-final { display: block; }
}

/* --------------------------------------------------------------------------
   Pinned scale reveal (Apple-style) — media scales from an inset card to
   full-bleed while pinned; a headline fades through. JS: initPinScale().
   -------------------------------------------------------------------------- */
.pinscale { position: relative; height: 220vh; }
.pinscale__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.pinscale__media {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--img); background-size: cover; background-position: center;
  transform: scale(0.62); border-radius: 28px; will-change: transform, border-radius;
}
.pinscale__sticky::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 50%, rgba(10, 10, 10,0.55), transparent 75%),
    linear-gradient(180deg, rgba(10, 10, 10,0.55) 0%, rgba(10, 10, 10,0.34) 50%, rgba(10, 10, 10,0.66) 100%);
}
.pinscale__overlay { position: relative; z-index: 2; text-align: center; padding: 0 6vw; }
.pinscale__eyebrow { display: block; margin-bottom: 18px; color: var(--c-accent-3); text-shadow: 0 1px 16px rgba(0,0,0,0.6); }
.pinscale__title { color: var(--c-paper); line-height: 1.0; text-shadow: 0 2px 30px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.45); }
/* Variations: pan travels across a wide image; zoomout recedes from full-bleed. */
.pinscale--pan .pinscale__media { right: auto; width: 130%; transform: translateX(0); border-radius: 0; }
.pinscale--zoomout .pinscale__media { transform: scale(1.18); border-radius: 0; }
@media (max-width: 700px) {
  .pinscale { height: auto; }
  .pinscale__sticky { position: relative; height: 72vh; }
  /* Reset every variant to a contained full-bleed still on phones. */
  .pinscale__media { transform: none; border-radius: 0; left: 0; right: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .pinscale { height: auto; }
  .pinscale__sticky { position: static; height: 80vh; }
  .pinscale__media { transform: none; border-radius: 0; }
}
[data-reveal-delay="1"] { transition-delay: 0.12s; }
[data-reveal-delay="2"] { transition-delay: 0.24s; }
[data-reveal-delay="3"] { transition-delay: 0.36s; }

/* --------------------------------------------------------------------------
   Kolon Sport Logo Mark (from BI guidelines)
   ⚠ Always preserve aspect ratio and add safe-area padding to avoid clipping.
   -------------------------------------------------------------------------- */
.gnb__logo-mark {
  background: url("../assets/kolon-symbol-white.png") no-repeat center center;
  background-size: contain;             /* never clip · uses the rectangular aspect */
  text-indent: -9999px;
  border: 0;
  overflow: hidden;
  flex: 0 0 auto;
}

.kolon-mark {
  display: inline-block;
  width: 32px; height: 32px;
  background: url("../assets/kolon-symbol-white.png") center/75% auto no-repeat;
  vertical-align: middle;
}
.kolon-horizontal-logo {
  display: inline-block;
  height: 28px;
  width: auto;
  vertical-align: middle;
}

/* Title Partner cell — real KOLON SPORT signature, safe-area padded */
.partners__cell--title {
  font-size: 0;
  background: url("../assets/kolon-horizontal-white.png") no-repeat center center;
  background-size: contain;             /* never clip */
  padding: 32px 48px;                   /* safe area around the mark */
  min-height: 88px;
  aspect-ratio: 16 / 6;                 /* horizontal logo is wide */
}

/* --------------------------------------------------------------------------
   01 · Marquee Ticker (DMZ-style infinite horizontal strip)
   -------------------------------------------------------------------------- */
.marquee {
  border-block: 1px solid var(--c-line);
  background: var(--c-bg);
  overflow: hidden;
  position: relative;
}
.marquee--accent { background: var(--c-accent); color: var(--c-bg); border-color: var(--c-accent); }
.marquee__track {
  display: flex;
  gap: 0;
  will-change: transform;
  animation: marquee-scroll 14s linear infinite;
}
.marquee--accent .marquee__track { animation-duration: 11s; }
.marquee__item {
  display: inline-flex;
  align-items: center;
  gap: 32px;
  padding: 22px 0;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 52px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
  line-height: 1;
}
.marquee__item::after {
  content: "";
  display: inline-block;
  width: 14px; height: 14px;
  margin-left: 32px;
  background: currentColor;
  border-radius: 50%;
}
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* marquee runs continuously — no hover pause (scroll velocity still modulates speed) */

/* --------------------------------------------------------------------------
   02 · Vertical Sidebar Nav (left-edge section indicator)
   -------------------------------------------------------------------------- */
.vnav {
  position: fixed;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  pointer-events: none;
}
.vnav__item {
  display: flex;
  align-items: center;
  gap: 14px;
  pointer-events: auto;
  text-decoration: none;
  color: var(--c-muted);
  transition: color var(--t-fast) var(--ease-out);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vnav__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border: 1px solid var(--c-muted-2);
  background: transparent;
  border-radius: 50%;
  transition: all var(--t-fast) var(--ease-out);
}
.vnav__label {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.vnav__item:hover .vnav__label,
.vnav__item.is-active .vnav__label {
  opacity: 1;
  transform: translateX(0);
}
.vnav__item:hover .vnav__dot { border-color: var(--c-paper); }
.vnav__item.is-active { color: var(--c-paper); }
.vnav__item.is-active .vnav__dot { background: var(--c-accent); border-color: var(--c-accent); }
@media (max-width: 1100px) { .vnav { display: none; } }

/* Side rail labels (vertical text on right edge) */
.side-rail {
  position: fixed;
  right: 18px;
  top: 0;
  bottom: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.side-rail__text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(80px, 12vw, 200px);
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line);
  text-stroke: 1px var(--c-line);
  opacity: 0.6;
  user-select: none;
}
@media (max-width: 1100px) { .side-rail { display: none; } }

/* --------------------------------------------------------------------------
   03 · Custom Cursor
   -------------------------------------------------------------------------- */
/* Hide system cursor ONLY when JS has successfully mounted the custom one.
   Without this guard, a failed JS load would leave the page with no cursor at all. */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor { cursor: none; }
  body.has-custom-cursor a,
  body.has-custom-cursor button,
  body.has-custom-cursor [data-cursor] { cursor: none; }
}
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 12px; height: 12px;
  background: var(--c-paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100002;   /* always topmost — above the "opening soon" modal (100000) */
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: difference;
  transition: width 0.25s var(--ease-out), height 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.cursor--hover {
  width: 56px; height: 56px;
  background: var(--c-accent);
  mix-blend-mode: normal;
  opacity: 0.85;
}
/* Contextual label disc (Drag / Explore) */
.cursor__label {
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  color: transparent; transition: color 0.2s var(--ease-out);
}
.cursor--label {
  width: 74px; height: 74px;
  background: var(--c-accent);
  mix-blend-mode: normal; opacity: 0.96;
  display: grid; place-items: center;
}
.cursor--label .cursor__label { color: var(--c-bg); }
.cursor__ring {
  position: fixed;
  top: 0; left: 0;
  width: 40px; height: 40px;
  border: 1px solid var(--c-paper);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100001;   /* topmost ring — above the "opening soon" modal (100000) */
  transform: translate3d(-50%, -50%, 0);
  mix-blend-mode: difference;
  opacity: 0.5;
  transition: opacity 0.25s var(--ease-out);
}
.cursor__ring.is-hidden { opacity: 0; }
@media (hover: none), (max-width: 760px) { .cursor, .cursor__ring { display: none; } }

/* --------------------------------------------------------------------------
   04 · Wipe / Mask reveal (GSAP-friendly classes — also CSS fallback)
   -------------------------------------------------------------------------- */
[data-wipe] {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1s var(--ease-out);
}
[data-wipe].is-inview { clip-path: inset(0 0 0 0); }

[data-mask] {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
[data-mask] > .ln {
  display: inline-block;
  transform: translateY(102%);
  transition: transform 1s var(--ease-out);
}
[data-mask].is-inview > .ln { transform: translateY(0); }

/* --------------------------------------------------------------------------
   05 · Magnetic CTAs
   -------------------------------------------------------------------------- */
[data-magnetic] {
  display: inline-flex;
  will-change: transform;
  transition: transform 0.4s var(--ease-out);
}

/* --------------------------------------------------------------------------
   06 · Vertical Date Stamp (Hero right edge)
   -------------------------------------------------------------------------- */
.hero__datestamp {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  writing-mode: vertical-rl;
  transform-origin: right center;
  text-orientation: mixed;
}
.hero__datestamp .ds-line {
  display: block;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-block: 28px;
}
.hero__datestamp .ds-line:first-child { color: var(--c-accent); }
@media (max-width: 900px) { .hero__datestamp { display: none; } }

/* --------------------------------------------------------------------------
   07 · Section index numbers (corner big number)
   -------------------------------------------------------------------------- */
.sec-idx {
  position: absolute;
  top: 24px;
  right: var(--gutter);
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--c-muted-2);
  z-index: 2;
}
.section { position: relative; }

/* --------------------------------------------------------------------------
   Artwork — outline mega-type, mountain silhouettes, trail patterns
   -------------------------------------------------------------------------- */

/* Giant outline display text that bleeds across a section */
.art-mega {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.art-mega__txt {
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(120px, 22vw, 360px);
  line-height: 0.78;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--c-line);
  white-space: nowrap;
  opacity: 0.6;
  transform: translateY(6%);
  user-select: none;
  max-width: 100%;
}
.art-mega--filled .art-mega__txt {
  color: color-mix(in srgb, var(--c-accent) 5%, transparent);
  -webkit-text-stroke: 0;
}

/* Vertical brand strip running on a section edge */
.art-rail {
  position: absolute;
  top: 0; bottom: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.art-rail--left  { left: 12px; }
.art-rail--right { right: 12px; }
.art-rail__txt {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.4em;
  color: var(--c-muted-2);
  text-transform: uppercase;
}

/* Mountain SVG band — used as section divider or hero floor */
.art-mountains {
  width: 100%;
  height: clamp(180px, 28vh, 360px);
  display: block;
  pointer-events: none;
}

/* Trail dotted path */
.art-trail {
  position: absolute;
  inset: auto 0 0 0;
  height: 80px;
  pointer-events: none;
  opacity: 0.5;
}

/* Compass mark · corner ornament */
.art-compass {
  position: absolute;
  top: clamp(88px, 12vh, 128px);   /* clear the fixed GNB header */
  right: clamp(20px, 4vw, 48px);
  width: 64px;
  height: 64px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--c-muted);
}
.art-compass::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--c-line-2);
  border-radius: 50%;
}
.art-compass span { position: relative; z-index: 2; }
.art-compass .n { position: absolute; top: -16px; color: var(--c-accent); font-weight: 700; }

/* Decorative grid lines */
.art-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, var(--c-line-2) 1px, transparent 1px) 0 0 / 12.5% 100%,
    linear-gradient(180deg, var(--c-line-2) 1px, transparent 1px) 0 0 / 100% 200px;
  opacity: 0.6;
  z-index: 0;
}

/* Topo lines (etched contours) */
.art-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-radial-gradient(
    circle at 60% 40%,
    transparent 0,
    transparent 28px,
    var(--c-line-2) 28px,
    var(--c-line-2) 29px
  );
  opacity: 0.4;
  z-index: 0;
}

/* --------------------------------------------------------------------------
   Soft Edges — applied broadly to cards, visuals, table, accordions
   -------------------------------------------------------------------------- */
.keyinfo__tile { border-radius: var(--radius-md); }
.keyinfo__grid { border-radius: var(--radius-lg); overflow: hidden; }

.exp-card { border-radius: var(--radius); }
.exp-cards { border-radius: var(--radius-lg); overflow: hidden; }
.exp-card__icon { border-radius: var(--radius-xs); }

.race__visual { border-radius: var(--radius-lg); }
.experience__visual { border-radius: var(--radius-lg); }
.race__stat { border-radius: 0; }

.journey__tabs { border-radius: var(--radius-lg); overflow: hidden; }
.journey__panel-visual { border-radius: var(--radius-lg); }

.bhutan__card { border-radius: var(--radius-md); }

.heritage__slide { border-radius: var(--radius-md); }

.news__card { border-radius: var(--radius-md); overflow: hidden; }

.partners__grid { border-radius: var(--radius-lg); overflow: hidden; }

.cards-grid { border-radius: var(--radius-lg); overflow: hidden; }

.notice { border-radius: var(--radius); }
.tag { border-radius: 999px; }

.acc-trigger .icon { border-radius: var(--radius-xs); }

.card-icon { border-radius: var(--radius-xs); }

.gnb__logo-mark { border-radius: var(--radius-xs); }
.gnb-overlay__cta a { border-radius: 999px; }

.hero__sub { border-radius: var(--radius); }
.section__eyebrow + h2,
.section__eyebrow + h1 { /* spacing only */ }

.hero { /* keep hero square — full bleed */ }

/* Subtle hover lift consistency */
.exp-card, .news__card, .bhutan__card, .heritage__slide, .keyinfo__tile {
  transition: transform var(--t-base) var(--ease-out), background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}

/* --------------------------------------------------------------------------
   Bottom Action Bar — fixed strip (Noomo/DMZ-inspired)
   -------------------------------------------------------------------------- */
.action-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  /* keep the bar clear of the home-indicator / gesture area on notched phones */
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line-2);
  pointer-events: auto;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-paper);
}
.action-bar__progress {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  background: var(--c-accent);
  width: 0%;
  box-shadow: 0 0 12px var(--c-accent);
  transition: width 0.18s linear;
  pointer-events: none;
}
.action-bar__left,
.action-bar__center,
.action-bar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.action-bar__center {
  /* Pinned to viewport centre so the copy never shifts when the left
     section label changes width on scroll. */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  justify-content: center;
  text-align: center;
  color: var(--c-muted);
  white-space: nowrap;
  pointer-events: none;
}
.action-bar__center .sec {
  color: var(--c-accent);
  margin-right: 10px;
  font-weight: 700;
}
.action-bar__hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--c-muted);
}
.action-bar__hint .arr { animation: hint-arrow 1.6s ease-in-out infinite; }
@keyframes hint-arrow {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}
@media (max-width: 700px) {
  /* keep the safe-area inset the base rule had, or the bar sits under the
     home-indicator / gesture bar on notched phones */
  .action-bar { font-size: 11px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); }
  .action-bar__center { display: none; }
  /* Compass collides with the hamburger toggle on small screens */
  .art-compass { display: none; }
  /* Hero content vertical fit (iOS Safari).
     The block is bottom-anchored on desktop, but on a phone the visible viewport
     is shorter (dynamic URL bar → 100svh) AND the header is taller (notch
     safe-area), so the bottom-anchored block rode UP under the fixed header —
     the eyebrow overlapped the logo. Reserve the header at the top, clear the
     bottom action bar, and center the block in that band so it never collides
     with either bar on any iPhone height. Rhythm is tightened a touch so the
     whole block fits the band without clipping. */
  .hero__content {
    justify-content: center;
    padding-top: calc(92px + env(safe-area-inset-top));
    padding-bottom: calc(50px + env(safe-area-inset-bottom));
  }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__title   { margin-bottom: 12px; }
  .hero__tag     { margin-bottom: 16px; }
  /* Hero meta — clean two-up grid instead of cramped wrap */
  .hero__sub {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
    margin-top: 12px;
    padding-top: 14px;
  }
  .hero__sub-item .val { font-size: 15px; }
  /* Scroll cue duplicates the action bar's; drop it to free hero space */
  .hero__scroll { display: none; }
  /* Course viz — taller canvas + smaller tags so 5 labels de-overlap cleanly */
  .race__visual { aspect-ratio: 3 / 4; }
  .cp-tag { padding: 4px 8px; }
  .cp-tag__name { font-size: 10px; letter-spacing: 0.1em; }
  .cp-tag__meta { font-size: 9px; }
}

/* Short phones (iPhone SE / older 4.7" portrait): the hero block is just tall
   enough that, boxed between the fixed header and the bottom action bar, the
   last meta row tucked under the bar. Drop the 720px height floor so the hero
   tracks the real (smaller) viewport, and tighten the vertical rhythm a step so
   the whole block fits without clipping. Taller phones are unaffected. */
@media (max-width: 700px) and (max-height: 720px) {
  .hero { min-height: 0; }
  .hero__eyebrow { margin-bottom: 10px; }
  .hero__title   { font-size: 36px; margin-bottom: 8px; }
  .hero__tag     { font-size: 14px; margin-bottom: 12px; }
  .hero__sub     { gap: 8px 24px; margin-top: 8px; padding-top: 10px; }
  .hero__sub-item .lbl { margin-bottom: 3px; }
}

/* --------------------------------------------------------------------------
   Spiritual 3D object (CC0 glTF + HDRI, WebGPU) — home
   -------------------------------------------------------------------------- */
.object3d {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
  /* this section skipped .container, so its content sat flush at 0px while every
     other section aligns to the --gutter — align it to the same grid */
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.object3d__visual {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 540px;
  margin-inline: auto;
  border-radius: 6px;
  overflow: hidden;
  background-image: var(--img);
  background-size: cover;
  background-position: center;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8);
}
.object3d__visual::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, 0.45));
  pointer-events: none;
}
.object3d__copy h2 { margin-bottom: 20px; }
@media (max-width: 900px) {
  .object3d { grid-template-columns: 1fr; gap: 24px; }
  .object3d__copy { order: -1; }
  .object3d__visual { max-width: 420px; }
}

/* --------------------------------------------------------------------------
   The Ascent — pinned scroll-telling
   -------------------------------------------------------------------------- */
.ascent {
  position: relative; height: 360vh;
  background: linear-gradient(180deg, var(--c-bg), color-mix(in srgb, var(--c-forest) 45%, var(--c-bg)) 55%, var(--c-bg));
}
.ascent__sticky {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  /* Solid base + photos on absolute children (.ascent__bg) instead of on the
     sticky itself — that, not a transform, is what keeps iOS from blanking to
     green. A translateZ(0) here re-introduced scroll jitter on mobile (transform
     on a position:sticky element), so it's intentionally NOT used. */
  background: #0a0a0a;
}
/* Per-chapter photo backdrop: one image per scroll-story chapter, crossfading as
   the active chapter changes (driven by initPinnedStory). A scrim keeps the white
   type legible; a slight scale settle adds life as each image comes in. */
.ascent__bgs { position: absolute; inset: 0; z-index: 0; }
.ascent__bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.28) 45%, rgba(10,10,10,0.74) 100%),
    var(--img);
  background-size: cover;
  background-position: center;
  /* Pure opacity crossfade — NO transform. A scale() here promoted all five
     full-screen layers to GPU layers, and a scaled background-image shimmers
     while scrolling on mobile (the reported jitter). Opacity-0 layers without a
     transform drop out of compositing, so only the active photo is painted. */
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.ascent__bg.is-active {
  opacity: 1;
  /* iOS paint fix: GPU-promote ONLY the active photo so Safari keeps painting it
     during momentum scroll (the blank was Safari dropping the sticky scene). No
     scale here — a scaled bg shimmers; a plain translateZ does not. Applied to the
     absolute child, not the sticky (a transform on the sticky itself jitters). */
  -webkit-transform: translateZ(0); transform: translateZ(0);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.ascent__canvas { display: none; }   /* 3D boulder retired */
.ascent__rail {
  position: absolute; left: 44px; top: 18vh; bottom: 18vh; width: 2px; z-index: 2;
  background: rgba(242, 242, 240, 0.14);
}
.ascent__rail-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0;
  background: linear-gradient(180deg, var(--c-accent), var(--c-amber-bright));
  box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 60%, transparent);
}
.ascent__alt {
  position: absolute; left: 66px; bottom: 13vh; z-index: 3;
  display: flex; align-items: baseline; gap: 10px; font-variant-numeric: tabular-nums;
}
.ascent__alt-num { font-size: clamp(40px, 8vw, 92px); font-weight: 800; line-height: 0.95; }
.ascent__alt-u { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--c-muted); }
.ascent__progress {
  position: absolute; right: 30px; top: 50%; z-index: 3;
  transform: translateY(-50%) rotate(90deg); transform-origin: right center;
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.22em; color: var(--c-muted);
}
.ascent__chapters { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 0 8vw; }
.ascent__ch {
  /* constrain to the gutter so the copy never runs past the screen edges on
     phones (absolute children ignore the parent's padding) */
  position: absolute; left: 0; right: 0; margin-inline: auto;
  width: calc(100% - 2 * var(--gutter)); max-width: 700px; text-align: center;
  opacity: 0; transform: translateY(30px); pointer-events: none;
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.ascent__ch.is-active { opacity: 1; transform: none; }
.ascent__k { display: inline-block; margin-bottom: 14px; }
.ascent__h { margin: 0 0 16px; }
.ascent__p { color: var(--c-muted); font-size: clamp(15px, 2vw, 19px); line-height: 1.7; max-width: 48ch; margin-inline: auto; }
@media (max-width: 700px) {
  .ascent__rail { left: 18px; }
  .ascent__alt { left: 30px; bottom: 11vh; }
  .ascent__progress { right: 12px; }
}
/* Mobile + reduced-motion → static stacked layout (NO position:sticky). On iOS
   Safari the pinned 360vh sticky scene intermittently fails to paint its absolute
   photo layers during momentum scroll, flashing the dark base = "blank screen
   while scrolling". A static section can't hit that sticky-paint bug; the photo
   layers stay (one crossfades in per chapter as you scroll, driven by JS). */
@media (prefers-reduced-motion: reduce) {
  .ascent { height: auto; }
  .ascent__sticky { position: static; height: auto; padding: 0; }
  /* Reduced-motion: each chapter becomes its OWN full-bleed photo scene (its --img),
     stacked — no pinned crossfade. (Mobile keeps the pinned scroll-telling.) */
  .ascent__canvas, .ascent__rail, .ascent__progress, .ascent__alt, .ascent__bgs { display: none; }
  .ascent__chapters { position: relative; z-index: 2; display: block; padding: 0; }
  .ascent__ch {
    position: relative; opacity: 1; transform: none;
    width: 100%; max-width: none; margin: 0;
    min-height: 88svh; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(48px, 14vw, 96px) var(--gutter); text-align: center;
    background-image:
      linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.34) 45%, rgba(10,10,10,0.74) 100%),
      var(--img);
    background-size: cover; background-position: center;
  }
}

/* --------------------------------------------------------------------------
   Live Mountain Weather (Travel page)
   -------------------------------------------------------------------------- */
.weather { display: grid; gap: 16px; }
.weather__status { color: var(--c-muted); font-size: 16px; line-height: 1.6; padding: 24px 0; max-width: 60ch; }
.weather__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.weather__card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 28px;
  background: var(--c-bg-2);
  display: grid; gap: 12px;
}
.weather__loc { display: flex; flex-direction: column; gap: 3px; }
.weather__city { font-family: var(--ff-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase; }
.weather__sub { font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: 0.1em; color: var(--c-muted); }
.weather__now { display: flex; align-items: center; gap: 14px; }
.weather__icon { font-size: 34px; line-height: 1; position: relative; display: inline-block; transform-origin: center; }
.weather__icon::before {
  content: ""; position: absolute; inset: -45%; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle, var(--wx-glow, transparent), transparent 70%);
  filter: blur(11px); pointer-events: none;
}
/* Mono line weather icon — sizes to the span's font-size, colour from currentColor; the glow (::before) carries condition colour. */
.wx-ic { width: 1em; height: 1em; display: block; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.weather__temp { font-family: var(--ff-display); font-weight: 800; font-size: 52px; line-height: 1; font-variant-numeric: tabular-nums; }
.weather__cond { font-size: var(--fs-note); color: var(--c-paper); }
.weather__meta { display: flex; gap: 18px; font-family: var(--ff-mono); font-size: var(--fs-meta); letter-spacing: 0.04em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.weather__outlook {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  border: 1px dashed var(--c-line); border-radius: var(--radius-md);
  padding: 20px 24px; background: color-mix(in srgb, var(--c-accent) 6%, transparent);
}
.weather__outlook .weather__icon { font-size: 26px; }
.weather__owk { font-family: var(--ff-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--fs-data); }
.weather__ovals { font-family: var(--ff-display); font-weight: 800; font-size: 22px; font-variant-numeric: tabular-nums; color: var(--c-accent); }
.weather__onote { color: var(--c-muted); font-size: var(--fs-data); line-height: 1.55; flex: 1 1 220px; }

/* Condition-driven weather animation — glow colour + motion per code class.
   Classes (wx-clear/partly/cloud/fog/rain/snow/storm) set by initWeather. */
.wx-clear  { --wx-glow: color-mix(in srgb, var(--c-amber-bright) 55%, transparent); }
.wx-partly { --wx-glow: color-mix(in srgb, var(--c-amber-bright) 38%, transparent); }
.wx-cloud  { --wx-glow: color-mix(in srgb, var(--wx-overcast) 30%, transparent); }
.wx-fog    { --wx-glow: color-mix(in srgb, var(--wx-overcast) 22%, transparent); }
.wx-rain   { --wx-glow: color-mix(in srgb, var(--wx-rain) 42%, transparent); }
.wx-snow   { --wx-glow: color-mix(in srgb, var(--wx-snow) 44%, transparent); }
.wx-storm  { --wx-glow: color-mix(in srgb, var(--wx-storm) 45%, transparent); }

.wx-clear .weather__icon, .wx-partly .weather__icon { animation: wx-breathe 4.5s ease-in-out infinite; }
.wx-clear .weather__icon::before, .wx-partly .weather__icon::before { animation: wx-glow-pulse 4.5s ease-in-out infinite; }
.wx-cloud .weather__icon, .wx-fog .weather__icon { animation: wx-drift 7s ease-in-out infinite; }
.wx-rain .weather__icon  { animation: wx-bob 1.7s ease-in-out infinite; }
.wx-snow .weather__icon  { animation: wx-float 3.4s ease-in-out infinite; }
.wx-storm .weather__icon { animation: wx-flicker 4s steps(1, end) infinite; }

@keyframes wx-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes wx-glow-pulse { 0%, 100% { opacity: 0.55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.14); } }
@keyframes wx-drift { 0%, 100% { transform: translateX(-3px); } 50% { transform: translateX(3px); } }
@keyframes wx-bob { 0% { transform: translateY(-2px); } 50% { transform: translateY(2.5px); } 100% { transform: translateY(-2px); } }
@keyframes wx-float { 0%, 100% { transform: translateY(-2px) rotate(-3deg); } 50% { transform: translateY(2px) rotate(3deg); } }
@keyframes wx-flicker { 0%, 41%, 47%, 59%, 63%, 100% { filter: brightness(1); } 44% { filter: brightness(1.9); } 61% { filter: brightness(1.6); } }
@media (prefers-reduced-motion: reduce) {
  .weather__icon, .weather__icon::before { animation: none !important; }
}
@media (max-width: 700px) {
  .weather__cards { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Elevation Profile infographic
   -------------------------------------------------------------------------- */
.elevation {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  background: linear-gradient(180deg, rgba(10, 10, 10,0.4), rgba(10, 10, 10,0.85));
  padding: 24px 20px 12px;
}
.ep-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ep-grid { stroke: var(--c-line-2); stroke-width: 1; }
.ep-axis {
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  fill: var(--c-muted-2);
  font-variant-numeric: tabular-nums;
}
/* Draw + fade are scroll-triggered via #elevationProfile.is-drawn (Motion layer) */
.ep-line {
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.ep-stem { stroke: var(--c-line); stroke-width: 1; stroke-dasharray: 2 3; }
.ep-stem.is-peak { stroke: color-mix(in srgb, var(--c-amber-bright) 60%, transparent); }
.ep-dot { fill: var(--c-paper); }
.ep-dot.is-peak { fill: var(--c-amber-bright); }
.ep-name {
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  fill: var(--c-paper);
}
.ep-name.is-peak { fill: var(--c-amber-bright); }
/* Section (leg) band — alternating zone tints between the CP stems + numbered labels */
.ep-zone { fill: var(--c-paper); }
.ep-leg {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  fill: var(--c-muted);
}
.ep-leg-num { fill: var(--c-accent-3); font-weight: 700; }
.ep-meta {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  fill: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
/* Legibility without an outlined look — one soft, downward shadow lifts the
   labels off the chart. No stroke and no symmetric glow (both read as an
   outline ring); this stays as clean page type with a whisper of depth. */
.ep-name, .ep-meta, .ep-leg {
  paint-order: normal;
  stroke: none;
  filter: drop-shadow(0 1px 1.5px rgba(10, 10, 10, 0.7));
}
@media (prefers-reduced-motion: reduce) {
  .ep-line { animation: none; stroke-dashoffset: 0; }
  .ep-area { animation: none; opacity: 1; }
}
/* Mobile: a wide chart can't shrink to phone width and stay legible —
   keep it at a readable width and let it scroll horizontally, with
   larger label sizes (SVG text is in viewBox units). */
@media (max-width: 700px) {
  .elevation { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 20px 14px 10px; }
  .ep-svg { min-width: 580px; }
  .ep-axis { font-size: 17px; }
  .ep-name { font-size: 20px; }
  .ep-meta { font-size: 16px; }
  .ep-line { stroke-width: 4; }
}

/* --------------------------------------------------------------------------
   Image mask reveal — card images wipe in (clip-path) on scroll-in.
   Tied to .is-inview (added by the reveal observer, or immediately under
   reduced-motion) so the image always ends up visible.
   -------------------------------------------------------------------------- */
.experience__visual::before,
.bhutan__card::before {
  clip-path: inset(0 0 100% 0);
  transition: transform 0.8s var(--ease-out), clip-path 1.1s var(--ease-out);
}
.experience__visual.is-inview::before,
.bhutan__card.is-inview::before { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .experience__visual::before,
  .bhutan__card::before { clip-path: none; }
}

/* --------------------------------------------------------------------------
   Kinetic typography — display lines wipe up from a mask on scroll-in
   -------------------------------------------------------------------------- */
.kt-line { display: block; overflow: hidden; padding-bottom: 0.05em; }
.kt-line__i {
  display: inline-block;
  transform: translateY(115%);
  transition: transform 0.95s var(--ease-out);
  will-change: transform;
}
.kt-in .kt-line:nth-child(1) .kt-line__i { transition-delay: 0.04s; }
.kt-in .kt-line:nth-child(2) .kt-line__i { transition-delay: 0.12s; }
.kt-in .kt-line:nth-child(3) .kt-line__i { transition-delay: 0.20s; }
.kt-in .kt-line:nth-child(4) .kt-line__i { transition-delay: 0.28s; }
.kt-in .kt-line__i { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .kt-line { overflow: visible; }
  .kt-line__i { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Acclimatization countdown timeline (travel page)
   -------------------------------------------------------------------------- */
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.countdown__step { position: relative; padding-top: 30px; }
.countdown__step::before {
  content: ""; position: absolute; top: 5px; left: 0;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent); z-index: 1;
}
.countdown__step::after {
  content: ""; position: absolute; top: 11px; left: 13px; right: -18px; height: 1px; background: var(--c-line);
}
.countdown__step:last-child::after { display: none; }
.countdown__step--arrive::before { background: var(--c-amber-bright); box-shadow: 0 0 12px var(--c-amber-bright); }
.countdown__when { display: block; font-family: var(--ff-display); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); line-height: 1; letter-spacing: -0.01em; }
.countdown__when small { display: block; font-family: var(--ff-mono); font-size: var(--fs-meta); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-muted); margin-top: 7px; }
.countdown__what { display: block; margin-top: 16px; font-size: var(--fs-data); line-height: 1.5; color: var(--c-muted); }
@media (max-width: 700px) {
  .countdown { grid-template-columns: 1fr; gap: 0; }
  .countdown__step { padding: 0 0 26px 24px; }
  .countdown__step::before { top: 3px; left: 0; }
  .countdown__step::after { top: 3px; left: 6px; right: auto; bottom: -3px; width: 1px; height: auto; }
}

/* --------------------------------------------------------------------------
   Mandatory Gear — checklist grid (race page)
   -------------------------------------------------------------------------- */
.gearlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.gearlist__cat {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 24px 24px 28px;
  background: linear-gradient(180deg, rgba(10, 10, 10,0.4), rgba(10, 10, 10,0.8));
}
.gearlist__cat-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--c-line-2); }
.gearlist__cat-num { font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--c-accent); }
.gearlist__cat-head h3 { font-family: var(--ff-display); font-weight: 700; font-size: 16px; letter-spacing: 0.03em; text-transform: uppercase; margin: 0; }
.gearlist__cat ul { display: flex; flex-direction: column; gap: 12px; }
.gearlist__cat li { position: relative; padding-left: 28px; font-size: var(--fs-data); line-height: 1.45; color: var(--c-paper); }
.gearlist__cat li::before {
  content: "\2713"; /* check */
  position: absolute; left: 0; top: 1px;
  width: 17px; height: 17px; line-height: 16px; text-align: center;
  font-size: 10px; color: var(--c-accent);
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, transparent);
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   Cut-off Time Gates timeline (race page)
   -------------------------------------------------------------------------- */
.cutoff {
  margin-top: 40px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  padding: 28px 32px 32px;
  background: linear-gradient(180deg, rgba(10, 10, 10,0.4), rgba(10, 10, 10,0.8));
}
.cutoff__win { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 30px; flex-wrap: wrap; }
.cutoff__win-val { font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.08em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.cutoff__legs { display: flex; align-items: flex-start; gap: 0; position: relative; }
.cutoff__node { flex: 0 0 auto; min-width: 96px; display: flex; flex-direction: column; gap: 5px; position: relative; padding-top: 20px; }
.cutoff__node::before {
  content: ""; position: absolute; top: 6px; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--c-accent); box-shadow: 0 0 12px var(--c-accent);
  z-index: 2;
}
/* Continuous connector rail: each node draws a hairline from its dot to its
   right edge; each gap draws the segment between nodes. With gap:0 on the row
   the pieces touch, forming ONE unbroken line dot→dot at the dot centre-line.
   The finish node draws nothing (no line past the last dot); pills sit on the
   rail with an opaque background that masks it. */
.cutoff__node::after {
  content: ""; position: absolute; top: 11px; left: 5px; right: 0;
  height: 1px; background: var(--c-line); z-index: 0;
}
.cutoff__node--finish::after { display: none; }
.cutoff__node--finish::before { background: var(--c-amber-bright); box-shadow: 0 0 12px var(--c-amber-bright); }
.cutoff__time { font-family: var(--ff-display); font-weight: 800; font-size: 22px; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.cutoff__name { font-family: var(--ff-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c-accent); }
.cutoff__node--finish .cutoff__name { color: var(--c-amber-bright); }
.cutoff__meta { font-family: var(--ff-mono); font-size: 12px; color: var(--c-muted); letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.cutoff__gap { flex: 1 1 auto; min-width: 40px; display: flex; align-items: center; justify-content: center; position: relative; height: 22px; }
.cutoff__gap::before { content: ""; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: var(--c-line); z-index: 0; }
.cutoff__gap-hrs {
  position: relative; z-index: 1;
  background: var(--c-bg); padding: 3px 11px;
  font-family: var(--ff-mono); font-size: 12px; color: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: 999px; letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 700px) {
  .cutoff { padding: 24px 22px 26px; }
  .cutoff__legs { flex-direction: column; align-items: stretch; gap: 0; }
  .cutoff__node { padding: 0 0 0 24px; min-width: 0; }
  .cutoff__node::before { top: 3px; left: 0; }
  .cutoff__node::after { display: none; }   /* horizontal rail is desktop-only; mobile uses the vertical gap line */
  .cutoff__gap { flex: 0 0 auto; height: auto; min-height: 34px; margin: 0; padding: 6px 0 6px 24px; justify-content: flex-start; }
  .cutoff__gap::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
}

/* --------------------------------------------------------------------------
   Splash Screen — static markup (#splash) covers the first paint.
   Logo + event title shown together. Revisits within a session are hidden
   before paint by the <head> guard (html.is-revisit).
   -------------------------------------------------------------------------- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: clip-path;
}
.is-revisit .splash { display: none; }
.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  text-align: center;
}
.splash__mark {
  position: relative;
  width: clamp(96px, 12vw, 164px);
  height: clamp(96px, 12vw, 164px);
  opacity: 0;
  transform: scale(0.92);
  animation: splash-mark-in 0.7s var(--ease-out) 0.05s forwards;
}
/* Two masked layers of the KOLON mark: a dim "empty" ghost, then a green
   fill that rises bottom-to-top — the logo charges up like a loading meter. */
.splash__mark::before,
.splash__mark::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/kolon-symbol-white.png") center / contain no-repeat;
  mask: url("../assets/kolon-symbol-white.png") center / contain no-repeat;
}
.splash__mark::before { background: color-mix(in srgb, var(--c-paper) 16%, transparent); }   /* empty vessel — dim white */
.splash__mark::after {
  background: var(--c-paper);   /* logo fills solid white */
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c-paper) 28%, transparent));
  clip-path: inset(100% 0 0 0);
  animation: splash-fill 1s var(--ease-in-out) 0.3s forwards;
}
.splash__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 30px);
  line-height: 1.05;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-paper);
  opacity: 0;
  transform: translateY(10px);
  animation: splash-name-in 0.7s var(--ease-out) 0.35s forwards;
}
.splash__title span {
  color: var(--c-accent);
  font-size: 0.62em;
  letter-spacing: 0.24em;
}
.splash__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--c-accent-2), var(--c-accent-3));
  transform-origin: left center;
  transform: scaleX(0);
  animation: splash-bar 1.1s var(--ease-in-out) 0.2s forwards;
}
.splash.is-leaving {
  animation: splash-leave 0.7s var(--ease-out) forwards;
}

@keyframes splash-mark-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes splash-name-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes splash-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes splash-fill {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes splash-leave {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }   /* wipe up */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee__track { animation: none; }
  .splash { display: none !important; }
}

/* ==========================================================================
   PC/MO sensibility QA pass — cross-page polish
   (mobile nav lockup, race table & controls, contact tags, FAQ rhythm,
    footer tap targets, card scrims, lookbook captions, focus states)
   ========================================================================== */

/* Keyboard focus — visible, on-brand (was browser default) */
:focus-visible {
  outline: 2px solid var(--c-accent-3);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Bhutan cards (home) — protect type on bright photos: deeper bottom scrim */
.bhutan__card::after {
  background: linear-gradient(180deg, transparent 14%, rgba(10, 10, 10, 0.5) 56%, rgba(10, 10, 10, 0.94) 100%);
}
.bhutan__card .desc { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55); }

/* Lookbook captions — legible size; on touch screens hover never fires,
   so captions (and their scrim) stay on */
.lb-figure__cap { font-size: 12px; }
@media (hover: none) {
  .lb-figure::after, .lb-figure .lb-figure__cap { opacity: 1; transform: none; }
}

/* Footer links — real tap targets without changing the visual rhythm */
.footer__col ul li { margin-bottom: 4px; }
.footer__col ul li a { display: inline-block; padding: 7px 0; }

/* Accordion — keep the "+" clear of the question text at every width */
.acc-trigger .icon { flex: 0 0 auto; margin-left: 18px; }

@media (max-width: 560px) {
  /* One-line logo lockup on phones (was wrapping to two lines) */
  .gnb__logo { font-size: 13px; gap: 10px; letter-spacing: 0.035em; }
  .gnb__logo > span:last-child { white-space: nowrap; }
  .gnb__logo-mark { width: 38px; height: 30px; }
}

@media (max-width: 700px) {
  /* Race checkpoint table: the Note column was clipped off-canvas yet
     still inflating row height — drop it on phones, tighten cells */
  body[data-page="race"] .tbl th:nth-child(5),
  body[data-page="race"] .tbl td:nth-child(5) { display: none; }
  .tbl th, .tbl td { padding: 13px 12px; }
  .tbl-wrap .tbl { min-width: 0; }

  /* Course controls: stack the JUMP TO label above full-width chip row */
  .course-ctl__row:has(.course-ctl__cps) {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .course-ctl__cps { width: 100%; }
  .course-ctl__cp { padding: 9px 14px; }

  /* Contact: tag pill was overlapping the long email titles — flow it
     above the title instead, and let emails wrap gracefully */
  body[data-page="contact"] .news__card .tag {
    position: static;
    order: -1;
    align-self: flex-start;
    margin: 0 !important;
  }
  body[data-page="contact"] .news__card-ttl { font-size: 22px; overflow-wrap: anywhere; }

  /* FAQ: tighter question indent on phones */
  .acc-trigger .num { margin-right: 14px; }

  /* Final CTA: breathing room so the button never kisses the footer */
  .cta-final { min-height: 0; padding: 96px 0 110px; }
}

@media (max-width: 900px) {
  /* Stacked two-col: the desktop column gap + first h3 top margin piled
     into ~100px of dead air between an aside heading and its body */
  .two-col { gap: 28px; }
  .two-col__main > h3:first-child { margin-top: 0; }
}

@media (max-width: 700px) {
  /* Eligibility documents table: NOTE (real content) was clipped off-screen;
     drop the CATEGORY label column instead so all facts fit the phone */
  body[data-page="eligibility"] .tbl:has(thead th:nth-child(4)) th:first-child,
  body[data-page="eligibility"] .tbl:has(thead th:nth-child(4)) td:first-child { display: none; }

  /* Rules accordion: "§ Article NN" (min-width 92px) squeezed titles into
     3-line wraps — stack the number above a full-width title instead */
  body[data-page="rules"] .acc-trigger { flex-wrap: wrap; position: relative; padding-right: 44px; }
  body[data-page="rules"] .acc-trigger .num { min-width: 0; flex: 0 0 100%; margin: 0 0 6px; }
  body[data-page="rules"] .acc-trigger .icon {
    /* centre on the TITLE row, not the whole wrapped trigger (which sat ~13px
       high, between the stacked "§ Article NN" line and the title). */
    position: absolute; right: 0; top: calc(24px + 25.2px + 14.4px);
    margin-left: 0; transform: translateY(-50%);
  }
  body[data-page="rules"] .acc-item.is-open .acc-trigger .icon {
    transform: translateY(-50%) rotate(45deg);
  }
}

/* --------------------------------------------------------------------------
   Footer wordmark — per the official emblem guide:
   Wix Madefor Text ExtraBold, left-anchored staircase. KOLON and BHUTAN
   share the left edge; TRAIL steps in ~0.42em; RUN steps in ~1.83em so its
   right edge breaks past the lines above. (Self-hosted woff2, latin subset.)
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Wix Madefor Text";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../assets/fonts/wix-madefor-text-800.woff2") format("woff2");
}
.footer__wordmark {
  font-family: "Wix Madefor Text", var(--ff-display);
  font-weight: 800;
  text-align: left;
  line-height: 0.84;
  letter-spacing: -0.01em;
}
.footer__wordmark span:nth-child(2) { margin-left: 0.42em; }  /* TRAIL  */
.footer__wordmark span:nth-child(3) { margin-left: 1.83em; }  /* RUN    */
.footer__wordmark span:nth-child(4) { margin-left: 0; }       /* BHUTAN */

/* --------------------------------------------------------------------------
   Ambient scene light — scroll-driven colour journey (JS sets --tint).
   A whisper of light over the dark base; screen-blend keeps type crisp.
   -------------------------------------------------------------------------- */
.scene-tint {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  --tint: #2EAE71;
  background:
    radial-gradient(110% 80% at 82% -8%, color-mix(in srgb, var(--tint) 9%, transparent), transparent 58%),
    radial-gradient(90% 70% at 6% 108%, color-mix(in srgb, var(--tint) 6%, transparent), transparent 52%);
  mix-blend-mode: screen;
}

/* Marquee skews with scroll (JS) — keep its own axis stable */
.marquee { will-change: transform; }

/* --------------------------------------------------------------------------
   Race schedule — one shared time axis, four day columns (reference layout).
   Single green accent; the Race Day window is outlined from start to finish.
   -------------------------------------------------------------------------- */
/* The schedule is a frozen-column table: a fixed time column (.sched-times)
   sits beside a horizontally-scrolling days grid (.sched inside .sched-wrap).
   Because the time column is OUTSIDE the scroller it never moves during a swipe
   — a jitter-free frozen column that CSS position:sticky can't deliver inside a
   grid. initSchedFreeze() copies the days grid's resolved row heights onto the
   time column so the two stay row-aligned. */
.sched-frame {
  display: flex; align-items: flex-start;
  /* Round the WHOLE frozen-column table (frozen TIME column + scrolling days grid)
     as one unit and clip the square cell corners — otherwise the TIME corner cell
     stays square while the rest reads rounded, like the .tbl tables. overflow:hidden
     clips only the corners; rows aren't clipped (frame height is auto) and the inner
     .sched-wrap keeps its own horizontal scroll. */
  border-radius: var(--radius-md);
  overflow: hidden;
}
.sched-frame > .sched-wrap { flex: 1 1 auto; min-width: 0; }  /* min-width:0 lets it scroll rather than stretch the frame */
.sched-times {
  flex: 0 0 84px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(46px, auto);  /* fallback until JS syncs exact row heights */
}
.sched-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sched {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  grid-auto-rows: minmax(46px, auto);
  min-width: 600px;
  position: relative;
}
.sched__corner {
  grid-row: 1; display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-accent-3);
  background: rgba(242, 242, 240, 0.03);
  border-bottom: 1px solid var(--c-line);
}
.sched__col-h {
  grid-row: 1; text-align: center; padding: 14px 10px 16px;
  background: rgba(242, 242, 240, 0.02);
  border-left: 1px solid var(--c-line-2);
  border-bottom: 1px solid var(--c-line);
}
.sched__col-h .d {
  display: block; font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-accent-3);
  margin-bottom: 5px;
}
.sched__col-h .p {
  font-family: var(--ff-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(15px, 1.5vw, 20px); letter-spacing: -0.005em; color: var(--c-paper);
}
.sched__col-h--race {
  background: color-mix(in srgb, var(--c-accent-3) 7%, transparent);
  border-bottom: 2px solid var(--c-accent-3);
}
.sched__time {
  grid-column: 1; display: grid; place-items: center;
  font-family: var(--ff-mono); font-size: 12px; font-weight: 600;
  color: var(--c-muted); font-variant-numeric: tabular-nums;
  background: rgba(242, 242, 240, 0.02);
  border-bottom: 1px solid var(--c-line-2);
}
.sched__ev {
  display: grid; place-items: center; text-align: center;
  padding: 8px 12px; font-size: var(--fs-data); line-height: 1.45;
  color: var(--c-paper-2);
}
.sched__ev--b { font-weight: 700; color: var(--c-paper); }
.sched__ev--hl { font-weight: 700; color: var(--c-accent-3); }
/* The race window: 04:00 Race Start through 19:00 Race Finish */
.sched__racebox {
  grid-column: 3; grid-row: 3 / 15;
  border: 1px solid var(--c-accent);
  border-radius: var(--radius); margin: 3px 8px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Partner logos — real marks, unified as white monochrome on the dark base.
   Linked cells (Running Connect, Trans Bhutan Trail) lift on hover.
   -------------------------------------------------------------------------- */
.partners__cell .pmark--logo {
  width: auto; height: 34px;
  border: 0; border-radius: 0;
  display: grid; place-items: center;
}
.pmark--logo img {
  display: block; height: 100%; width: auto; max-width: 150px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.88;
  transition: opacity var(--t-fast) var(--ease-out);
}
a.partners__cell:hover .pmark--logo img { opacity: 1; }
a.partners__cell:hover .pname { color: var(--c-accent-3); }
.partners__tbd {
  font-family: var(--ff-mono);
  font-size: var(--fs-data-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted-2);
  border: 1px dashed var(--c-line);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  text-align: center;
}

/* Cursor light-trail canvas — beneath the dot (9999) and ring (9998) */
.cursor-trail {
  position: fixed; inset: 0; z-index: 9997;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (hover: none), (max-width: 760px) { .cursor-trail { display: none; } }

/* Fluid smoke cursor (WebGL2) — same layer slot as the 2D trail */
.cursor-fluid {
  position: fixed; inset: 0; z-index: 9997;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (hover: none), (max-width: 760px) { .cursor-fluid { display: none; } }

/* ==========================================================================
   APPLE iOS-26 LIQUID GLASS — full pass (per component group). Surface only;
   structure/layout untouched. Tokens in :root (--glass-*).
   ========================================================================== */

/* ==========================================================================
   APPLE iOS-26 "LIQUID GLASS" — Navigation & fixed bars (floating chrome)
   Surface-only restyle. No layout/positioning/sizing touched.
   Brand green (#23915C/#2EAE71) + gold (#C9A86A) accents preserved.
   ========================================================================== */

/* --- Top nav bar (scrolled state) — strong glass, floats over content ----- */
.gnb--scrolled {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.gnb--scrolled::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
  z-index: -1;
}
/* keep the solid variant readable but glass-consistent */
.gnb--solid {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* --- Primary CTA pill — keep brand-green fill (contrast first),
       add liquid specular sheen so it reads as glass-green ------------------ */
.gnb__cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.gnb__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.22), transparent 44%);
  z-index: -1;
}

/* --- Mobile full-screen overlay menu — strong glass panel ----------------- */
.gnb-overlay {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
  backdrop-filter: blur(calc(var(--glass-blur) + 6px)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  isolation: isolate;
}
.gnb-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
  z-index: -1;
}

/* --- Vertical section nav — interactive chips get glass, container stays --- */
.vnav__item {
  position: relative;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.vnav__item:hover,
.vnav__item.is-active {
  background: var(--glass-bg-2);
}
/* dot reads as a tiny liquid pip; active keeps brand-green fill */
.vnav__dot {
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-sat));
  backdrop-filter: blur(8px) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

/* --- Bottom action bar — strong glass, floats over content ---------------- */
.action-bar {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.action-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
  z-index: -1;
}

/* --- Side rail (decorative outlined wordmark) — left as-is (not a panel) --- */
/* .side-rail / .side-rail__text intentionally untouched: outline text relies
   on transparency + text-stroke; glassing it would harm legibility.         */

/* ==========================================================================
   APPLE iOS-26 "LIQUID GLASS" — Content cards & tiles group
   Surfaces: .news__card · .exp-card · .keyinfo (whole strip) ·
             .partners__cell · .card (.cards-grid panels)
   VISUAL SURFACE ONLY — no layout/positioning/sizing changes.
   Full-bleed photo layers (.news__card-img, .bhutan__card img) left intact.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KEY INFO — treat the whole row/group as ONE continuous glass strip.
   Glass lives on .keyinfo__grid; tiles become transparent dividers so the
   panel reads as a single sheet of glass rather than four separate ones.
   -------------------------------------------------------------------------- */
.keyinfo__grid {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-top: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.keyinfo__grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}
/* Tiles: keep their dividing rules but make them translucent so the strip
   stays one piece of glass; soften hover into the glass-2 tint. */
.keyinfo__tile {
  background: transparent;
  border-radius: 0;                 /* square cells → one continuous strip, not 4 rounded cards */
  border-right-color: var(--glass-border);
  border-bottom-color: var(--glass-border);
}
/* Single row already framed by the grid's border — drop the tiles' own bottom
   hairline so it doesn't double the strip's bottom edge. Restored as a row
   divider only when the grid wraps to multiple rows (tablet/mobile). */
.keyinfo__tile { border-bottom: 0; }
@media (max-width: 900px) {
  /* 2-col layout → the first row (tiles 1–2) needs a bottom divider */
  .keyinfo__tile:nth-child(-n+2) { border-bottom: 1px solid var(--glass-border); }
}
@media (max-width: 480px) {
  .keyinfo__tile { border-bottom: 1px solid var(--glass-border); border-right: 0; }  /* 1-col: no vertical divider (was doubling the grid's right border) */
  .keyinfo__tile:last-child { border-bottom: 0; }
}
.keyinfo__tile:hover { background: var(--glass-bg-2); }

/* --------------------------------------------------------------------------
   EXPERIENCE CARDS — individual glass panels (upgrade to full token set).
   .exp-cards is a hairline grid (background = line colour shows through gaps);
   make that gutter transparent so glass tiles float on the page, not on a slab.
   -------------------------------------------------------------------------- */
/* Float each .exp-card as a self-contained rounded glass tile (mirrors the
   .cards-grid fix). The old 1px gutter + container border doubled against every
   card's own border and clipped the rounded corners against the rounded frame. */
.exp-cards { gap: 16px; background: transparent; border: 0; border-radius: 0; overflow: visible; }
.exp-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.exp-card:hover { background: var(--glass-bg-2); }
.exp-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* --------------------------------------------------------------------------
   NEWS / CONTACT CARDS — glass panel (default grid usage).
   Photo image layer (.news__card-img + its ::before/::after) is NOT touched.
   The contact-page variant is a borderless full-bleed list — it is reset
   back to transparent further below so the list look is preserved.
   -------------------------------------------------------------------------- */
.news__card {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.news__card:hover { background: var(--glass-bg-2) !important; }
.news__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* Contact page: keep the editorial full-bleed divider list — no glass slab. */
body[data-page="contact"] .news__card {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
}
body[data-page="contact"] .news__card:hover { background: transparent !important; }
body[data-page="contact"] .news__card::after { display: none; }

/* --------------------------------------------------------------------------
   PARTNERS CELLS — glass tile. Logo ::before image fill stays untouched.
   -------------------------------------------------------------------------- */
.partners__cell {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  /* No full border — the grid container frames the strip and a single
     border-right divides cells. A full per-cell border on a no-gap grid
     doubled every vertical seam + the outer frame. */
  border: 0;
  border-right: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  isolation: isolate;
}
/* Tablet/mobile 2-col: strip the bottom hairline from the final row so it
   doesn't double the grid's own bottom border. */
@media (max-width: 900px) {
  .partners__grid .partners__cell:nth-last-child(-n+2) { border-bottom: 0; }
}
.partners__cell:hover { background: var(--glass-bg-2); }
.partners__cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* --------------------------------------------------------------------------
   GENERIC CARDS — the painted .cards-grid panels (".card") and the race
   variant. These set a solid var(--c-bg), so !important is required.
   The line-coloured grid gutter is dropped to a hairline glass border so the
   tiles read as floating glass instead of sitting on a dark slab.
   -------------------------------------------------------------------------- */
/* Old look: a 1px hairline grid (gap + grid border) with each cell ALSO
   carrying its own 1px glass border + drop-shadow → between cells you got
   border+gap+border (a tripled seam), square cell corners poked through the
   rounded strip, and 4 shadows stacked. Resolve by dropping the grid frame and
   letting each cell be a self-contained, rounded, floating glass panel (the
   same treatment as .exp-card) separated by a real gap — zero doubling.
   Scoped to exclude race (intentional hairline strip) and contact (editorial
   full-bleed list), which keep their own page-scoped treatments below. */
body:not([data-page="race"]):not([data-page="contact"]) .cards-grid {
  gap: 16px;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
body:not([data-page="race"]):not([data-page="contact"]) .cards-grid > * {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
body:not([data-page="race"]):not([data-page="contact"]) .cards-grid > *:hover { background: var(--glass-bg-2) !important; }
body:not([data-page="race"]):not([data-page="contact"]) .cards-grid > *::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* Race page: panels are the inner > div with a solid var(--c-bg) fill. */
body[data-page="race"] .cards-grid {
  background: transparent;
  border-color: var(--glass-border);
}
body[data-page="race"] .cards-grid > div {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  isolation: isolate;
}
body[data-page="race"] .cards-grid > div:hover { background: var(--glass-bg-2) !important; }

/* Contact page: cards-grid is an intentional transparent list — keep it bare. */
body[data-page="contact"] .cards-grid {
  background: transparent;
  border: 0;
}
body[data-page="contact"] .cards-grid > * {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  border-top: 1px solid var(--c-line);   /* restore the editorial divider rail (the bare border:0 erased it) */
  box-shadow: none;
}
body[data-page="contact"] .cards-grid > *::after { display: none; }

/* ==========================================================================
   LIQUID GLASS — Buttons & interactive controls
   Surface-only restyle. No layout/positioning/sizing touched.
   Brand green (#23915C / #2EAE71) + gold (#C9A86A) accents preserved.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Base pill button — gains a hairline glass edge + specular inset highlight.
   Keeps its 999px pill radius and uppercase type. The pill is small chrome,
   so it uses a lighter 12px blur to stay crisp.
   -------------------------------------------------------------------------- */
.btn {
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border-color: var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 16px rgba(0, 0, 0, 0.22);
}
/* faint specular sheen across the pill (clipped by overflow:hidden) */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.16), transparent 44%);
  z-index: 0;
}
/* keep label/arrow above the sheen */
.btn > * { position: relative; z-index: 1; }
.btn:hover {
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 22px rgba(0, 0, 0, 0.30);
}

/* --------------------------------------------------------------------------
   Gold/green CTA — KEEPS its brand green fill; gains glass border + specular
   inset highlight so it reads as a glossy liquid pill, not flat paint.
   -------------------------------------------------------------------------- */
.btn--gold {
  background: var(--c-accent);
  border-color: color-mix(in srgb, var(--c-accent) 60%, var(--glass-border));
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 2px rgba(0, 0, 0, 0.20),
    0 6px 20px color-mix(in srgb, var(--c-accent) 30%, transparent),
    0 4px 16px rgba(0, 0, 0, 0.24);
}
.btn--gold::after {
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.28), transparent 46%);
}
.btn--gold:hover {
  background: var(--c-paper);
  color: var(--c-accent);
  border-color: var(--c-paper);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 8px 26px rgba(0, 0, 0, 0.30);
}

/* --------------------------------------------------------------------------
   Ghost button — FULL liquid glass film.
   -------------------------------------------------------------------------- */
.btn--ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border-color: var(--glass-border);
  color: var(--c-paper);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 16px rgba(0, 0, 0, 0.22);
}
.btn--ghost::after {
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.12), transparent 44%);
}
.btn--ghost:hover {
  background: var(--glass-bg-2);
  border-color: rgba(242, 242, 240, 0.32);
  color: var(--c-paper);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 22px rgba(0, 0, 0, 0.30);
}

/* --------------------------------------------------------------------------
   Course control panel — full liquid-glass panel + diagonal specular sheen.
   -------------------------------------------------------------------------- */
.course-ctl {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative;
  isolation: isolate;
}
.course-ctl::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
  z-index: -1;
}

/* Checkpoint chips — small glass pills (lighter blur), brand green when active */
.course-ctl__cp {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.course-ctl__cp:hover {
  background: var(--glass-bg-2);
  border-color: color-mix(in srgb, var(--c-accent) 55%, var(--glass-border));
  color: var(--c-accent);
}
.course-ctl__cp.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-bg);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 4px 14px color-mix(in srgb, var(--c-accent) 30%, transparent);
}

/* Play/pause control — round glass button, brand green outline + fill on hover */
.course-ctl__playbtn {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--c-accent) 55%, var(--glass-border));
  color: var(--c-accent);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 3px 12px rgba(0, 0, 0, 0.22);
}
.course-ctl__playbtn:hover {
  background: var(--c-accent);
  color: var(--c-bg);
  border-color: var(--c-accent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 5px 18px color-mix(in srgb, var(--c-accent) 34%, transparent);
}

/* Clear, tactile press + selection feedback on the course controls.
   Before, a click had no immediate response and the selected CP read only as a
   colour swap; now pressing squishes the button and selecting it pops + goes bold. */
.course-ctl__cp:active,
.course-ctl__playbtn:active { transform: scale(0.93); }
.course-ctl__cp,
.course-ctl__playbtn { will-change: transform; }
.course-ctl__cp.is-active {
  font-weight: 700;
  border-color: var(--c-accent);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 0 1px var(--c-accent),
    0 6px 20px color-mix(in srgb, var(--c-accent) 42%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  /* re-runs every time .is-active is (re)applied on click → a clear "selected!" pop */
  .course-ctl__cp.is-active { animation: ctlPop 0.34s var(--ease-out); }
  .course-ctl__playbtn:active { transition: transform 0.05s var(--ease-out); }
  @keyframes ctlPop {
    0%   { transform: scale(0.9); }
    55%  { transform: scale(1.08); }
    100% { transform: scale(1); }
  }
}

/* --------------------------------------------------------------------------
   FAQ / Rules accordion — glass icon affordance.
   Triggers stay text-on-dark for contrast (no film over the question rows);
   only the small toggle icon becomes a glass chip.
   -------------------------------------------------------------------------- */
.acc-trigger .icon {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.acc-trigger:hover .icon {
  background: var(--glass-bg-2);
  border-color: rgba(242, 242, 240, 0.32);
}
.acc-item.is-open .acc-trigger .icon {
  border-color: var(--c-gold);
  color: var(--c-gold);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    0 0 14px color-mix(in srgb, var(--c-gold) 24%, transparent);
}

/* --------------------------------------------------------------------------
   Journey day-tabs — the tab strip becomes a glass control surface.
   Active tab keeps the gold underline + a faint amber-tinted glass wash.
   -------------------------------------------------------------------------- */
.journey__tabs {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.journey__tab { border-right-color: var(--glass-border); }
.journey__tab:hover {
  background: var(--glass-bg-2);
}
.journey__tab.is-active {
  background: color-mix(in srgb, var(--c-amber) 8%, var(--glass-bg-2));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
@media (max-width: 760px) {
  .journey__tab:nth-child(1),
  .journey__tab:nth-child(2) { border-bottom-color: var(--glass-border); }
}

/* ==========================================================================
   iOS-26 LIQUID GLASS — GROUP: Panels, tables, overlays
   Surfaces: .sched grid columns/cells, .elevation chart panel, .tbl / .tbl-wrap,
   .dragon-caption, .tag pills, .countdown panel, .stat tiles, .jstage tiles,
   modals (.modal / .news-modal), page-hero info blocks.
   Visual surface only — no layout/positioning/sizing touched.
   Brand green (#23915C / #2EAE71) + gold (#C9A86A) + amber accents preserved.
   ========================================================================== */

/* --- SCHEDULE GRID -------------------------------------------------------
   The .sched container itself already carries glass from an earlier block;
   here we turn the interior cells into a cohesive liquid-glass grid and keep
   the race-day column / race window on their amber (--c-accent-3) accent. */
.sched { position: relative; isolation: isolate; }
.sched__corner,
.sched__col-h,
.sched__time {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
}
.sched__col-h { border-left: 1px solid var(--glass-border); }
.sched__time { border-bottom: 1px solid var(--glass-border); }

/* Race day header keeps its amber identity, now over glass */
.sched__col-h--race {
  background: color-mix(in srgb, var(--c-accent-3) 12%, var(--glass-bg-2)) !important;
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border-bottom: 2px solid var(--c-accent-3);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

/* The race window box — amber outline, faint glass fill behind it */
.sched__racebox {
  border: 1px solid var(--c-accent);
  background: color-mix(in srgb, var(--c-accent) 8%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(var(--glass-sat));
  backdrop-filter: blur(8px) saturate(var(--glass-sat));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 18%, transparent),
              0 0 18px color-mix(in srgb, var(--c-accent) 20%, transparent);
}
.sched__ev--hl { color: var(--c-accent-3); }

/* --- ELEVATION CHART PANEL ----------------------------------------------
   Override its solid dark gradient with the canonical liquid-glass surface. */
.elevation {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative; isolation: isolate;
}
.elevation::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* --- DATA TABLES ( .tbl / .tbl-wrap ) ------------------------------------
   Wrap the table in a glass card; header row reads as a frosted bar,
   rows sit on faint film with light hairlines. Gold .em accents preserved. */
.tbl-wrap {
  position: relative; isolation: isolate;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.tbl-wrap::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}
.tbl th {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
  border-bottom: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.tbl th, .tbl td { border-bottom: 1px solid var(--glass-border); }
.tbl tbody tr:last-child td { border-bottom: 0; }   /* the rounded glass wrap is the only bottom edge */
body[data-page="eligibility"] .tbl tbody tr { transition: background var(--t-fast) var(--ease-out); }
body[data-page="eligibility"] .tbl tbody tr:hover {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(10px) saturate(var(--glass-sat));
  backdrop-filter: blur(10px) saturate(var(--glass-sat));
}
.tbl td .em { color: var(--c-gold); }

/* --- DRAGON CAPTION OVERLAY ----------------------------------------------
   Floating caption → frosted glass, keeping the green (--c-accent-3) edge. */
.dragon-caption {
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--c-accent-3) 40%, var(--glass-border));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.dragon-caption strong, .dragon-caption em { color: var(--c-accent-3); }

/* --- TAG / PILL CHROME ---------------------------------------------------
   Small chips get a lighter blur; colored variants keep their semantic edge. */
.tag {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.tag:hover { background: var(--glass-bg-2); }
.tag--gold {
  color: var(--c-gold);
  border-color: color-mix(in srgb, var(--c-gold) 55%, var(--glass-border));
}
.tag--gold:hover { border-color: var(--c-gold); }
.tag--signal {
  color: var(--c-signal);
  border-color: color-mix(in srgb, var(--c-signal) 55%, var(--glass-border));
}
.tag--signal:hover { border-color: var(--c-signal); }

/* --- COUNTDOWN PANEL -----------------------------------------------------
   Lift each step onto a glass tile while preserving the timeline rail dots
   (::before) and connector (::after) and the amber arrive marker. */
.countdown__step {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 20px rgba(0, 0, 0, 0.24);
  padding-left: 16px; padding-right: 16px; padding-bottom: 16px;
  isolation: isolate;
  transition: background var(--t-fast) var(--ease-out);
}
.countdown__step:hover { background: var(--glass-bg-2); }
.countdown__step--arrive {
  border-color: color-mix(in srgb, var(--c-amber-bright) 38%, var(--glass-border));
}
.countdown__step--arrive::before { background: var(--c-amber-bright); box-shadow: 0 0 12px var(--c-amber-bright); }

/* --- STAT PANELS ( .stat ) -----------------------------------------------
   Replace the solid --c-bg fill with a liquid-glass tile + specular sheen.
   Numerals / labels / accents keep their existing colors. */
.stat {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  isolation: isolate;
  transition: background var(--t-fast) var(--ease-out);
}
.stat::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}
.stat:hover { background: var(--glass-bg-2) !important; }
.stat__unit { color: var(--c-accent-3); }

/* --- JOURNEY STAGE TILES ( .jstage ) -------------------------------------
   Frost each stage card; keep the green/amber timeline node (::before)
   and the green day label / location accents. */
.jstage {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 20px rgba(0, 0, 0, 0.24);
  padding-left: 18px; padding-right: 18px; padding-bottom: 18px;
  isolation: isolate;
  transition: background var(--t-fast) var(--ease-out);
}
.jstage::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}
.jstage:hover { background: var(--glass-bg-2); }
.jstage__day, .jstage__loc { color: var(--c-accent); }
.jstage--peak::before { background: var(--c-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 18%, transparent); }

/* --- MODALS / OVERLAYS ( .modal / .news-modal ) --------------------------
   Defensive glass surfacing for any modal dialog chrome; the dimmed backdrop
   stays opaque for contrast, only the dialog panel becomes liquid glass. */
.modal__dialog, .news-modal__dialog,
.modal__panel, .news-modal__panel,
.modal__content, .news-modal__content {
  background: var(--glass-bg-2) !important;
  -webkit-backdrop-filter: blur(26px) saturate(var(--glass-sat));
  backdrop-filter: blur(26px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow), 0 24px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 var(--glass-hi);
  position: relative; isolation: isolate;
}
.modal__dialog::after, .news-modal__dialog::after,
.modal__panel::after, .news-modal__panel::after,
.modal__content::after, .news-modal__content::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* --- PAGE-HERO INFO BLOCKS -----------------------------------------------
   Breadcrumb chip → frosted pill; lead text legibility preserved (untouched). */
.page-hero__crumbs {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.page-hero__crumbs a:hover { color: var(--c-gold); }

/* Ambient glass light — faint fixed sheen so glass over flat dark sections
   still has a gradient to refract. Very subtle, behind all content. */
/* ===== Ambient backdrop — gives frosted glass luminance to refract =========
   Flat #0A0A0A leaves backdrop-filter nothing to blur, so glass reads as a dead
   panel. These fixed, slowly-drifting light pools (+ fine grain) sit BEHIND all
   content (z-index:-1) so every glass surface samples real tonal variation,
   while text on top is never washed. Cool whisper = mountain-air atmosphere. */
/* Per-page pastel ambient — a soft, light version of each page's hero tint.
   The drifting light pools take this hue, so the dark stays but every page
   carries its own dreamy pastel atmosphere that the glass refracts. */
body                          { --ambient: #AEC2DC; }   /* soft periwinkle default */
body[data-page="home"]        { --ambient: #B6C4DE; }
body[data-page="experience"]  { --ambient: #E6D4A6; }   /* butter   */
body[data-page="race"]        { --ambient: #A9DEC4; }   /* mint     */
body[data-page="eligibility"] { --ambient: #ECC9A0; }   /* peach-amber */
body[data-page="bhutan"]      { --ambient: #E8B89A; }   /* peach    */
body[data-page="faq"]         { --ambient: #C9B8EA; }   /* lavender */
body[data-page="lookbook"]    { --ambient: #EAB2C6; }   /* rose     */
body[data-page="rules"]       { --ambient: #AAB9D6; }   /* slate periwinkle */
body[data-page="news"]        { --ambient: #A6D6D6; }   /* aqua     */
body[data-page="contact"]     { --ambient: #AED8BE; }   /* sage     */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(72% 56% at 76% 6%,   color-mix(in srgb, var(--ambient) 24%, transparent), transparent 66%),
    radial-gradient(66% 56% at 10% 28%,  color-mix(in srgb, var(--ambient) 19%, transparent), transparent 62%),
    radial-gradient(60% 52% at 90% 86%,  rgba(236, 230, 218, 0.08), transparent 64%),
    radial-gradient(78% 62% at 34% 104%, color-mix(in srgb, var(--ambient) 17%, transparent), transparent 64%);
  animation: ambient-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
@keyframes ambient-drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2.5%, 1.5%, 0) scale(1.07); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }
/* Phones: drop the perpetual full-screen drift (and its promoted compositor
   layer) — continuous battery/GPU cost for a barely-visible effect on small screens. */
@media (max-width: 760px) { body::after { animation: none; will-change: auto; } }

/* Phones: key-info to a single column so the big figures never clip */
@media (max-width: 480px) {
  .keyinfo__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   LIQUID GLASS — regression fixes. The per-group pass added position:relative
   (for ::after sheen) onto fixed chrome and glass-boxed non-card elements,
   which detached bars and made floating empty pills. Restore correct behaviour:
   fixed bars stay full-width frosted (no card box); point-nav + page-hero
   crumbs are NOT glass panels.
   ========================================================================== */

/* 1) Fixed chrome MUST keep fixed positioning (was broken to relative) */
.gnb, .gnb--scrolled { position: fixed !important; }
.action-bar { position: fixed !important; left: 0; right: 0; bottom: 0; }
.gnb--scrolled::after, .action-bar::after { display: none !important; }

/* 2) Full-width bars: frosted surface only — drop the floating-card shadow.
      action-bar keeps its darker tint for legibility over bright content. */
.gnb--scrolled {
  box-shadow: inset 0 -1px 0 var(--glass-border), inset 0 1px 0 var(--glass-hi) !important;
}
.action-bar {
  background: rgba(10, 10, 10, 0.55) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi) !important;
  border-top: 1px solid var(--glass-border);
}

/* 3) Point-nav (vnav): minimal dots, never glass pills */
.vnav__item {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
}
.vnav__dot {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important;
}

/* 4) Breadcrumbs are not a glass box — but page-hero KEEPS its photo layer
      (.page-hero[--hero-img]::after) and tint, so only the crumbs are reset. */
.page-hero__crumbs {
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 0 !important; box-shadow: none !important;
}
.page-hero__crumbs::after { display: none !important; }

/* 5) Schedule table — the Race Day outline box must NOT blur (it sits over the
      cells and was hiding Race Start / CP cut-offs / Finish). Phones keep the
      TIME column pinned while the day columns scroll sideways. */
.sched__racebox, .sched__day--race {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.sched__racebox { background: transparent !important; }
@media (max-width: 760px) {
  .sched__corner, .sched__time {
    position: sticky; left: 0; z-index: 6;
    background: var(--c-surface) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
}

/* 6) Buttons — liquid-glass consistency. The header CTA matches the other
      green buttons' frosted treatment, and gold/green CTAs brighten IN-HUE
      on hover (glossy) instead of flipping to flat opaque white. */
.gnb__cta {
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
}
.btn--gold:hover, .gnb__cta:hover {
  background: color-mix(in srgb, var(--c-accent) 78%, #fff) !important;
  color: var(--c-bg) !important;
  border-color: color-mix(in srgb, var(--c-accent) 50%, var(--glass-hi)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 8px 26px color-mix(in srgb, var(--c-accent) 28%, transparent) !important;
}

/* ============================================================
   MONOCHROME PASS · STEP 1 — eyebrows / kicker labels
   Green was plastered on the small uppercase label above almost
   every section. Pull these to a neutral grey so green reads as a
   POINT colour again. Heading accent words (.t-accent inside h1/h2),
   buttons, and interactive states stay green; the hero keeps its
   per-page tint (re-asserted below).
   ============================================================ */
.t-cap.t-accent            { color: var(--c-muted); }
.page-hero .t-cap.t-accent { color: var(--page-tint); font-size: 16px; }   /* keep hero eyebrow on-brand per page */
.section__eyebrow          { color: var(--c-muted); }
.section__eyebrow::before  { background: var(--c-muted-2); }
.subsection__head .t-cap   { color: var(--c-muted); }      /* the main offender — every section eyebrow */
.race__head .title .t-cap                         { color: var(--c-muted); }
body[data-page="race"] .subsection__head .t-cap   { color: var(--c-muted); }
.pinscale__eyebrow         { color: var(--c-muted); }
.gearlist__cat-num         { color: var(--c-muted); }
.obj3d-label b             { color: var(--c-muted); }
.sched__corner             { color: var(--c-muted); }
.sched__col-h .d           { color: var(--c-muted); }

/* ============================================================
   MONOCHROME PASS · STEP 2 — data figures & small labels
   Small green text scattered through stat blocks, timelines, tags
   and accordion numbers → neutral grey. Interactive readouts
   (.course-ctl__*) and the brand splash stay green.
   ============================================================ */
.race__stat .val .u        { color: var(--c-muted); }
.stat__unit                { color: var(--c-muted); }
.stat__idx                 { color: var(--c-muted); }   /* retains its opacity */
.keyinfo__tile .val .u     { color: var(--c-muted); }
.jstage__day               { color: var(--c-muted); }
.jstage__loc               { color: var(--c-muted); }
.cutoff__name              { color: var(--c-muted); }   /* finish stays amber via its own rule */
.rm-leg__mode              { color: var(--c-muted); }
.article__tag              { color: var(--c-muted); }
.notice-item__tag          { color: var(--c-muted); }
.partners__host-meta .role { color: var(--c-muted); }
.action-bar__center .sec   { color: var(--c-muted); }
.acc-trigger .num          { color: var(--c-muted); }
body[data-page="rules"] .acc-trigger .num         { color: var(--c-muted); }
body[data-page="faq"] .acc-trigger .num           { color: var(--c-muted); }
body[data-page="eligibility"] .tbl td:first-child { color: var(--c-muted); }
/* card mini-badges (G/B/L/P · 01 · 03:00 · arrows) — outlined green on every
   card → neutral hairline badge */
.card-icon                       { border-color: var(--c-line); color: var(--c-muted); }
body[data-page="race"] .card-icon{ color: var(--c-muted); }
.news__card-arr                  { color: var(--c-muted); }
.rm-node--dest .rm-code          { color: var(--c-muted); }

/* ============================================================
   MONOCHROME PASS · STEP 3 — decorative dots / rails / borders / glows
   → neutral; glows removed. Semantic green (✓ checks, RACE DAY box),
   buttons, hero identity, and the interactive cursor/controls stay green.
   ============================================================ */
/* dots → soft neutral marker, no glow (finish dot keeps amber via its rule) */
.cutoff__node:not(.cutoff__node--finish)::before { background: var(--c-muted); box-shadow: none; }
.cutoff__node--finish::before { box-shadow: none; }   /* keep amber, drop the glow */
.jstage::before           { border-color: var(--c-muted); }
.jstage--peak::before     { background: var(--c-muted); box-shadow: none; }
.race__visual-hint .dot   { background: var(--c-muted); box-shadow: none; }
.weather__ovals           { color: var(--c-muted); }
.rm-node::after           { border-color: var(--c-muted); }
.rm-node--dest::after     { background: var(--c-muted); }
/* connector rails → flat neutral / neutral dashes */
.journey-flow::before     { background: var(--c-muted-2); }
.routemap::before         { background: repeating-linear-gradient(180deg, var(--c-muted-2) 0 7px, transparent 7px 13px); }
.rm-leg::before           { background: repeating-linear-gradient(90deg, var(--c-muted-2) 0 7px, transparent 7px 13px); }
.rm-leg--charter::before  { background: var(--c-muted-2); }
/* borders / bars / flourishes → neutral hairline */
body[data-page="race"] .subsection__head        { border-left-color: var(--c-line); }
body[data-page="race"] .cards-grid > div::after  { border-top-color: var(--c-line); border-right-color: var(--c-line); }
body[data-page="experience"] .subsection__head .t-cap::after { background: var(--c-muted-2); }
.deco-star                { color: var(--c-muted-2); }
.art-compass .n           { color: var(--c-muted); }
.action-bar__progress     { background: var(--c-muted-2); box-shadow: none; }
.marquee--accent          { background: var(--c-bg-2); color: var(--c-muted); border-color: var(--c-line); }

/* ============================================================
   HEADER — no bar background; each nav item is a floating
   liquid-glass pill (logo stays plain, APPLY stays the green CTA).
   Auto-hides on scroll-down, reveals on scroll-up (JS toggles
   .gnb--hidden). Replaces the full-width glass bar that felt heavy.
   ============================================================ */
/* 1) Kill the bar background in every state — page shows through */
.gnb, .gnb--scrolled, .gnb--solid {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.gnb--scrolled::after, .gnb--solid::after { display: none !important; }

/* 2) Auto-hide transform */
.gnb { transition: transform var(--t-base) var(--ease-out), padding var(--t-base) var(--ease-out); }
.gnb--hidden { transform: translateY(-118%); }

/* 3) Keep the plain logo legible over any backdrop */
.gnb__logo { text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6); }

/* 4) Each nav item → rounded liquid-glass pill */
.gnb__menu { gap: 8px; }
.gnb__menu a {
  padding: 9px 15px;
  border-radius: 999px;
  opacity: 1;
  color: var(--c-paper);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.gnb__menu a::before, .gnb__menu a::after { display: none; }   /* drop the [bracket] hover */
/* clear hover: lift + brighten glass + brighter rim */
.gnb__menu a:hover {
  background: var(--glass-bg-2);
  border-color: var(--glass-hi);
  color: var(--c-paper);
  transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(0, 0, 0, 0.34);
}
/* active page: green-tinted glass + green rim, but WHITE text (legible over
   any backdrop — green text on translucent glass washed out over photos) */
.gnb__menu a.is-active {
  background: color-mix(in srgb, var(--c-accent-3) 16%, var(--glass-bg-2));
  border-color: color-mix(in srgb, var(--c-accent-3) 55%, var(--glass-border));
  color: var(--c-paper);
}
.gnb__menu a.is-active:hover { transform: translateY(-2px); }

/* APPLY pill — match the nav-pill height exactly (was 44px vs the pills' 42px:
   vertical padding 10 vs 9 read as "bigger" next to them). Keep it a touch wider
   than a plain pill for the arrow, but level the height. */
.gnb__cta { padding: 9px 18px; }
.gnb__cta:hover { transform: translateY(-2px); }

/* Journey overview: clean dark section (the trial photo band was removed —
   it bled behind the schedule table and hurt readability). The day cards keep
   their plain glass; the schedule is its own solid panel (see SCHEDULE REDESIGN). */
body[data-page="experience"] #journey { position: relative; isolation: isolate; }

/* ============================================================
   GLASS CONSISTENCY PASS — bring every card / panel / chip / box up to
   the header-pill liquid-glass standard (token-only). Last in source so
   it wins over base / glass-pass / monochrome-pass. Photo tiles get
   EDGE-ONLY glass (no fill over the image). Sanctioned non-glass
   (contact list, photo heroes, CTA/marquee/footer/3D stages, brand CTAs)
   are left untouched.
   ============================================================ */

/* 1 — flat CARD / PANEL boxes the glass pass never reached → full glass */
.weather__card, .gearlist__cat, .cutoff, .routemap, .article__box,
.race__visual, .partners__host {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative; isolation: isolate;
}
.weather__card::after, .gearlist__cat::after, .cutoff::after, .routemap::after,
.article__box::after, .race__visual::after, .partners__host::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.10), transparent 44%);
}

/* 2 — .notice alert box → glass, but keep the semantic signal as a tinted edge */
.notice {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid color-mix(in srgb, var(--c-signal) 40%, var(--glass-border)) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* 3 — weather outlook sub-panel → glass (removes the only dashed edge) */
.weather__outlook {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

/* 4 — announcements (notice.html) → one-sheet glass strip, transparent rows */
.notice-list {
  background: var(--glass-bg) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  position: relative; isolation: isolate;
}
.notice-item { border-bottom: 1px solid var(--glass-border) !important; }
.notice-item:hover { background: var(--glass-bg-2); }
.notice-item--pin { background: var(--glass-bg-2) !important; }

/* 5 — chips / pills / badges → glass chip (lighter blur tier) */
.notice-item__tag, .article__tag, .card-icon {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.bhutan__card .tag {
  background: var(--glass-bg-2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(var(--glass-sat));
  backdrop-filter: blur(12px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border) !important;
  box-shadow: inset 0 1px 0 var(--glass-hi);
}

/* 6 — race stats → glass panel + token dividers */
.race__stats {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  padding: 6px clamp(24px, 2.4vw, 34px);   /* inset so rows aren't flush to the glass edge */
}
.race__stat { background: transparent; border-bottom-color: var(--glass-border) !important; }
.race__stat:last-child { border-bottom: 0; }   /* glass frame is the bottom edge */

/* 7 — card-family token drift: tokenise jstage + countdown shadow/blur */
.jstage, .countdown__step {
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}

/* 8 — statgrid: drop the line-coloured slab so glass tiles float */
.statgrid { gap: 14px !important; background: transparent !important; border: 0 !important; overflow: visible !important; }
.stat { border-radius: var(--radius-md); }

/* 9 — photo tiles → EDGE-ONLY glass (fill stays the image; ::after is taken) */
.lb-figure, .bhutan__card {
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
}
.lb-figure:hover, .bhutan__card:hover { border-color: var(--glass-hi); }

/* 10 — schedule cells: add the missing specular rim */
.sched__corner, .sched__col-h, .sched__time { box-shadow: inset 0 1px 0 var(--glass-hi); }

/* 11 — small snaps: cp-tag radius/edge, dragon-caption off-scale radius */
.cp-tag { border-radius: var(--radius-xs); border-color: var(--glass-border) !important; }
.dragon-caption { border-radius: var(--radius-md); }

/* 12 — uniform hover lift across the floating-card family (like the nav pill) */
.exp-card, .keyinfo__tile, .stat, .jstage, .weather__card, .gearlist__cat,
.cutoff, .routemap, .article__box {
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.exp-card:hover, .keyinfo__tile:hover, .stat:hover, .jstage:hover, .weather__card:hover,
.gearlist__cat:hover, .cutoff:hover, .routemap:hover, .article__box:hover {
  transform: translateY(-2px); border-color: var(--glass-hi);
  box-shadow: var(--glass-shadow), 0 6px 18px rgba(0, 0, 0, 0.30), inset 0 1px 0 var(--glass-hi);
}

/* ============================================================
   READABILITY PASS — brighter, airier body text for comfortable
   reading. Long-form paragraphs sat in a dim muted grey on most pages
   (only bhutan used the brighter paper tone); normalise every page to
   the readable treatment + a touch more leading.
   ============================================================ */
/* Long-form body + standfirst → brighter paper-2 (≈13:1), generous leading.
   (.two-col__main is prose <p> on some pages, list rows on others — cover both.) */
.two-col__main p   { color: var(--c-paper-2); line-height: 1.8; max-width: 64ch; }
.two-col__main ul li { color: var(--c-paper-2); line-height: 1.6; }
.two-col__aside p  { color: var(--c-paper-2); line-height: 1.7; }
.page-hero__lead   { color: var(--c-paper-2); line-height: 1.6; }
.article__col p    { line-height: 1.8; }
.intro__lead       { line-height: 1.6; }
/* Card / supporting descriptions → a touch more leading (stay secondary) */
.exp-card__desc, .bhutan__card .desc { line-height: 1.62; }
.card-desc         { line-height: 1.66; }
.jstage__desc      { font-size: var(--fs-note); line-height: 1.62; }
.news__card-desc, .news__card p { line-height: 1.62; }

/* ============================================================
   READABILITY FIXES — make every text run clear WCAG AA. Pulls the
   small green-on-dark type (~3.4:1) the monochrome pass missed, the
   --c-muted-2 leaking onto real content, and the sub-11px content tags
   up to readable tones/sizes. Decorative glyphs / watermarks / ordinals
   are intentionally left. (Last in source so it beats the duplicates.)
   ============================================================ */
/* 1 — small GREEN type on dark → readable paper/muted */
.tbl td .em               { color: var(--c-paper); font-weight: 600; }   /* checkpoint km, deadlines, refund rates */
.two-col__aside .t-cap    { color: var(--c-muted); }                     /* aside eyebrows the mono pass missed */
.tag--gold                { color: var(--c-paper-2); }                   /* keep the green hairline border */
.sched__ev--hl            { color: var(--c-paper-2); font-weight: 700; } /* race-day cells (start/cut-off/finish) */
.course-ctl__value        { color: var(--c-paper); }                     /* live scrub readout */
.notice-item__title:hover { color: var(--c-paper); text-decoration: underline; }

/* 2 — inline links → paper + a persistent green underline (AA colour + clear affordance) */
.link-inline,
p a.t-accent, li a.t-accent, .card-desc a.t-accent,
.article__box a.t-accent, .notice a.t-accent, .news__card a.t-accent {
  color: var(--c-paper);
  text-decoration: underline;
  text-decoration-color: var(--c-accent-3);
  text-underline-offset: 3px;
}

/* 3 — --c-muted-2 (~3.8:1) leaking onto real content → --c-muted (~9:1) */
.partners__tbd            { color: var(--c-muted); }
.hero__sub-item .lbl      { color: var(--c-muted); }
.race__visual-fallback    { color: var(--c-muted); }

/* 4 — sub-11px CONTENT tags → 11px floor */
.tag, .article__tag, .notice-item__tag, .partners__cell .prole,
.cp-tag__name, .cp-tag__meta { font-size: 11px; }

/* 5 — accordion answers/articles → same readable prose as all other long-form */
.acc-panel-inner          { color: var(--c-paper-2); }
body[data-page="rules"] .acc-panel-inner { text-align: left; hyphens: none; max-width: 70ch; }

/* ============================================================
   SCHEDULE REDESIGN — a clean, scannable time-grid. Removes the journey
   photo bleed (solid dark panel), turns every event into a discrete chip
   so the grid reads at a glance, and makes the race-day window a soft
   filled block instead of a bare outline.
   ============================================================ */
/* solid panel — the journey photo band no longer shows through the table */
.sched {
  background: var(--c-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* un-frosted, solid axis cells for maximum legibility */
.sched__corner, .sched__col-h, .sched__time {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.sched__corner { background: rgba(242, 242, 240, 0.05) !important; color: var(--c-muted); }
.sched__col-h  { background: rgba(242, 242, 240, 0.022) !important; }
.sched__time   { background: rgba(242, 242, 240, 0.018) !important; }
.sched__col-h--race {
  background: color-mix(in srgb, var(--c-accent-3) 9%, transparent) !important;
  border-bottom: 2px solid color-mix(in srgb, var(--c-accent-3) 60%, var(--glass-border));
}
/* each event → a discrete chip so the grid is easy to scan */
.sched__ev {
  place-self: stretch; align-content: center;
  margin: 5px 7px; padding: 8px 10px; border-radius: var(--radius-xs);
  background: var(--glass-bg-2); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  font-size: var(--fs-data); line-height: 1.35; color: var(--c-paper-2);
}
.sched__ev--b  { color: var(--c-paper); font-weight: 700; }
.sched__ev--hl {
  color: var(--c-paper); font-weight: 700;
  background: color-mix(in srgb, var(--c-accent-3) 18%, var(--glass-bg-2)) !important;
  border-color: color-mix(in srgb, var(--c-accent-3) 50%, var(--glass-border));
}
/* race-day window → soft filled block (was a bare green outline) */
.sched__racebox {
  background: color-mix(in srgb, var(--c-accent-3) 7%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--c-accent-3) 36%, var(--glass-border)) !important;
  border-radius: var(--radius); margin: 4px 6px;
}

/* ============================================================
   GEAR BOARD — visual mandatory-gear infographic (race #gear)
   Reusable infographic card system: icon + name + spec + status.
   Criticality colour-coding: DSQ (red) / Penalty (amber) / Required (neutral).
   ============================================================ */
.gearboard { margin-top: 4px; }
.gearboard__legend {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 26px;
  font-family: var(--ff-mono); font-size: 11.5px; letter-spacing: 0.03em;
  color: var(--c-muted);
}
.gearkey { display: inline-flex; align-items: center; gap: 8px; }
.gearkey::before { content: ""; width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.gearkey--dsq::before { background: var(--c-signal); }
.gearkey--pen::before { background: var(--c-amber); }
.gearkey--req::before { background: color-mix(in srgb, var(--c-paper) 42%, transparent); }

.gearboard__cat { margin-top: 26px; }
.gearboard__cat:first-of-type { margin-top: 0; }
.gearboard__cat-ttl {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px;
  font-family: var(--ff-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-paper);
}
.gearboard__cat-num { font-family: var(--ff-mono); font-size: 12px; color: var(--c-muted); font-weight: 400; }
.gearboard__grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(244px, 1fr)); gap: 12px;
}

.gearcard {
  display: flex; align-items: center; gap: 14px; padding: 14px 15px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  transition: transform var(--t-fast, .18s) ease, background var(--t-fast, .18s) ease, border-color var(--t-fast, .18s) ease;
}
.gearcard:hover { transform: translateY(-2px); background: var(--glass-bg-2); border-color: var(--glass-hi); }
.gearcard__icon {
  width: 34px; height: 34px; flex: 0 0 auto; color: var(--c-paper-2);
  fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.gearcard__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.gearcard__name { font-weight: 700; font-size: var(--fs-data); line-height: 1.25; color: var(--c-paper); }
.gearcard__spec { font-size: var(--fs-data-sm); line-height: 1.5; color: var(--c-muted); }
.gearcard__tag {
  flex: 0 0 auto; align-self: flex-start; margin-top: 1px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--glass-border); color: var(--c-muted);
}

/* criticality colour-coding — carried by the icon + badge (no left colour bar) */
.gearcard--dsq .gearcard__icon { color: color-mix(in srgb, var(--c-signal) 78%, var(--c-paper)); }
.gearcard--dsq .gearcard__tag {
  color: color-mix(in srgb, var(--c-signal) 72%, var(--c-paper));
  border-color: color-mix(in srgb, var(--c-signal) 48%, var(--glass-border));
  background: color-mix(in srgb, var(--c-signal) 13%, transparent);
}
.gearcard--pen .gearcard__tag {
  color: var(--c-amber-bright);
  border-color: color-mix(in srgb, var(--c-amber) 50%, var(--glass-border));
  background: color-mix(in srgb, var(--c-amber) 13%, transparent);
}

@media (max-width: 560px) {
  .gearboard__grid { grid-template-columns: 1fr; }
  .gearcard { padding: 13px 14px; }
}

/* ============================================================
   ELIGIBILITY INFOGRAPHICS — pillar icons + document timeline
   ============================================================ */
/* Icon tile — shared by eligibility pillars & travel packing (replaces letter badges) */
.pillar__ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin-bottom: 18px;
  border-radius: var(--radius-md);
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
.pillar__ic svg {
  width: 26px; height: 26px; fill: none; stroke: var(--c-paper-2);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

/* 02 · Required Documents — vertical submission timeline */
.docflow { position: relative; margin-top: 6px; padding-left: 2px; }
.docflow__stage {
  position: relative; padding: 0 0 26px 30px;
  border-left: 2px solid var(--glass-border);
}
.docflow__stage--last { border-left-color: transparent; padding-bottom: 0; }
.docflow__node {
  position: absolute; left: -8px; top: 2px; width: 14px; height: 14px; border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent-3) 70%, var(--c-bg));
  border: 2px solid var(--c-bg);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-accent-3) 20%, transparent);
}
.docflow__stage--key .docflow__node {
  background: var(--c-accent-3);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-accent-3) 28%, transparent);
}
.docflow__when { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: -3px 0 14px; }
.docflow__deadline {
  font-family: var(--ff-display); font-weight: 700; font-size: 15px;
  letter-spacing: 0.02em; color: var(--c-paper);
}
.docflow__stage--key .docflow__deadline { color: var(--c-accent-3); }
.docflow__count { font-family: var(--ff-mono); font-size: var(--fs-micro); letter-spacing: 0.03em; color: var(--c-muted); }
.docflow__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }

/* doc cards — same infographic card system as gear board */
.doccard {
  display: flex; align-items: center; gap: 14px; padding: 14px 15px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  transition: transform var(--t-fast, .18s) ease, background var(--t-fast, .18s) ease, border-color var(--t-fast, .18s) ease;
}
.doccard:hover { transform: translateY(-2px); background: var(--glass-bg-2); border-color: var(--glass-hi); }
.docflow__stage--key .doccard { border-color: color-mix(in srgb, var(--c-accent-3) 24%, var(--glass-border)); }
.doccard__icon {
  width: 32px; height: 32px; flex: 0 0 auto; color: var(--c-paper-2);
  fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.doccard__body { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.doccard__name { font-weight: 700; font-size: var(--fs-data); line-height: 1.25; color: var(--c-paper); }
.doccard__note { font-size: var(--fs-data-sm); line-height: 1.5; color: var(--c-muted); }
.doccard__cat {
  flex: 0 0 auto; align-self: flex-start; margin-top: 1px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--glass-border); color: var(--c-muted);
}
@media (max-width: 560px) {
  .docflow__grid { grid-template-columns: 1fr; }
  .docflow__stage { padding-left: 24px; }
}

/* ============================================================
   CARD-ICON BADGES → rounded liquid-glass chips
   .card-icon labels each card with a short token (time 03:00 · letter A ·
   arrow → · symbol ★) on bhutan / experience / race / travel cards.
   It was an angular mono box — square-cornered on race with a "// " prefix.
   Round it to a pill and align it to the glass chip family (gear tags,
   header pills) so it matches the site's liquid-glass tone.
   (glass surface + hairline border come from the chip pass above.)
   ============================================================ */
.card-icon {
  min-width: 0;
  height: auto;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--c-paper-2);
}
/* race used a borderless square + "// " prefix — bring it fully in line */
body[data-page="race"] .card-icon {
  width: auto;
  height: auto;
  border-radius: 999px;
  place-items: center;
  color: var(--c-paper-2);
  letter-spacing: 0.06em;
}
body[data-page="race"] .card-icon::before { content: none; }

/* ============================================================
   NO-EMPTY-CELL GRIDS — fill the last row by item count
   1) race .cards-grid forced repeat(4) → a 3-card cluster (#infrastructure)
      left a bordered orphan cell. Make 3-card race grids 3-up.
   2) gear board categories hold 4 or 5 cards; auto-fill at 4 cols left a
      lone card in the 5-card rows (Clothing, Safety). Size each category's
      columns to its own count so every row is full at desktop.
   ============================================================ */
/* 1 — race cards-grid: 3 cards fill a 3-up row (no orphan cell) */
@media (min-width: 760px) {
  body[data-page="race"] .cards-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 759px) {
  body[data-page="race"] .cards-grid:has(> :nth-child(3):last-child) {
    grid-template-columns: 1fr;
  }
}

/* 2 — gear board: per-category column count so each row fills */
@media (min-width: 1080px) {
  .gearboard__grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gearboard__grid:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gearboard__grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 1079px) {
  .gearboard__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 480px) and (max-width: 719px) {
  .gearboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 479px) {
  .gearboard__grid { grid-template-columns: 1fr; }
}

/* 5-up gear cards are narrower — tighten internals so names wrap less */
@media (min-width: 1080px) {
  .gearboard__grid:has(> :nth-child(5):last-child) .gearcard { padding: 12px 12px; gap: 10px; }
  .gearboard__grid:has(> :nth-child(5):last-child) .gearcard__icon { width: 28px; height: 28px; }
  .gearboard__grid:has(> :nth-child(5):last-child) .gearcard__name { font-size: var(--fs-data-sm); }
}

/* ============================================================
   HEADER "MORE" OVERFLOW DROPDOWN — keeps the primary nav at 6 pills
   and surfaces the secondary pages (Travel · Contact · Rules · Notice)
   in a liquid-glass dropdown. Lives inside .gnb__menu so it only shows
   on desktop (>1024px); the hamburger overlay covers mobile.
   ============================================================ */
.gnb__more { position: relative; display: inline-flex; }
.gnb__more-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-paper); cursor: pointer;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(var(--glass-sat));
  backdrop-filter: blur(14px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi);
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.gnb__more-btn:hover {
  background: var(--glass-bg-2); border-color: var(--glass-hi); transform: translateY(-2px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 6px 18px rgba(0, 0, 0, 0.34);
}
.gnb__more.is-open .gnb__more-btn { background: var(--glass-bg-2); border-color: var(--glass-hi); }
/* current page lives inside More → tint the button like an active pill */
.gnb__more-btn.is-active {
  background: color-mix(in srgb, var(--c-accent-3) 16%, var(--glass-bg-2));
  border-color: color-mix(in srgb, var(--c-accent-3) 55%, var(--glass-border));
}
.gnb__more-caret { font-size: 10px; line-height: 1; transition: transform var(--t-fast) var(--ease-out); }
.gnb__more.is-open .gnb__more-caret { transform: rotate(180deg); }

/* the dropdown panel */
.gnb__more-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 188px; display: flex; flex-direction: column; gap: 3px;
  padding: 8px; border-radius: var(--radius-md);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(18px) saturate(var(--glass-sat));
  backdrop-filter: blur(18px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 14px 40px rgba(0, 0, 0, 0.46);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out),
              visibility var(--t-fast) var(--ease-out);
  z-index: 60;
}
.gnb__more.is-open .gnb__more-menu { opacity: 1; visibility: visible; transform: translateY(0); }
/* dropdown items — flat rows (reset the inherited .gnb__menu a pill styling) */
.gnb__more-menu a {
  display: block; padding: 9px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-paper-2); white-space: nowrap; text-align: left;
  background: transparent !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.gnb__more-menu a:hover { background: var(--glass-bg) !important; color: var(--c-paper); transform: none; }
.gnb__more-menu a.is-active {
  background: color-mix(in srgb, var(--c-accent-3) 16%, var(--glass-bg-2)) !important;
  border-color: color-mix(in srgb, var(--c-accent-3) 50%, var(--glass-border)) !important;
  color: var(--c-paper);
}

/* ============================================================
   MOBILE OVERLAY "MORE" GROUP — mirrors the desktop dropdown.
   Primary links (Experience·Race·Eligibility·Lookbook) stay top-level;
   the rest collapse under a tappable "More" that expands in place.
   ============================================================ */
.gnb-overlay__menu { flex: 0 0 auto; }   /* natural height; the overlay scrolls */
.gnb-overlay__more { border-bottom: 1px solid var(--c-line-2); }
.gnb-overlay__more-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(36px, 8vw, 64px); text-transform: uppercase;
  padding: 18px 0; line-height: 1; color: var(--c-paper);
}
.gnb-overlay__more-caret {
  font-size: 0.42em; color: var(--c-muted);
  transition: transform var(--t-base) var(--ease-out);
}
.gnb-overlay__more.is-open .gnb-overlay__more-caret { transform: rotate(180deg); }
.gnb-overlay__more-list {
  max-height: 0; overflow: hidden;
  transition: max-height var(--t-base) var(--ease-out);
}
.gnb-overlay__more.is-open .gnb-overlay__more-list { max-height: 70vh; }
/* sublist items — smaller + indented to read as secondary (override the big
   .gnb-overlay__menu a styling) */
.gnb-overlay__menu .gnb-overlay__more-list a {
  display: block; font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(22px, 5.5vw, 33px); text-transform: uppercase;
  padding: 13px 0 13px 24px; line-height: 1; color: var(--c-paper-2);
  border-bottom: 0; border-top: 1px solid var(--c-line-2);
}
.gnb-overlay__more-list a:first-child { border-top: 0; }
.gnb-overlay__menu .gnb-overlay__more-list a.is-active,
.gnb-overlay__menu > a.is-active { color: var(--c-accent-3); }

/* ============================================================
   TIGHTER SECTION RHYTHM (home) — stop forcing every section to 100vh.
   Short-content sections (key-info, elevation, weather, object, intro) were
   floating centered inside a full-screen box, which read as oversized gaps.
   Let content + the .section padding set the height; tall sections are
   unaffected (their content already exceeds the viewport). The final CTA
   keeps its full-screen finale.
   ============================================================ */
@media (min-width: 701px) {
  .section--screen { min-height: 0; justify-content: flex-start; }
  .object3d.object3d { min-height: 0; }
}
/* intro statement: airy but not a near-empty screen (was 18vh + 100vh) */
.intro { padding-block: clamp(96px, 11vh, 150px); }

/* ============================================================
   NOTICE — empty state (placeholder notices removed; real ones land later)
   ============================================================ */
.notice-empty {
  text-align: center;
  padding: clamp(48px, 8vh, 100px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}
.notice-empty__mark {
  display: block; width: 38px; height: 38px; margin: 0 auto 22px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--c-accent-3) 55%, var(--glass-border));
  position: relative;
}
.notice-empty__mark::before {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 13px; height: 1.5px; border-radius: 2px;
  background: var(--c-accent-3);
}
.notice-empty__title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px); color: var(--c-paper);
  margin-bottom: 12px; letter-spacing: -0.005em;
}
.notice-empty__sub {
  color: var(--c-muted); max-width: 56ch; margin: 0 auto;
  line-height: 1.65; font-size: var(--fs-body, 17px);
}

/* ============================================================
   COUNTDOWN (travel #altitude) — declutter. The steps became glass cards,
   so the vestigial timeline dot (::before glow) and connector line (::after)
   from the old borderless layout clash with the card edges. Remove both —
   progression reads from left-to-right order + the "weeks out" labels, and
   Day 1 keeps its amber border. Also drop the 30px top padding the dot
   reserved, so the card padding is even (16px all round).
   ============================================================ */
.countdown__step::before,
.countdown__step::after { display: none !important; }
.countdown__step { padding-top: 16px; }

/* ============================================================
   FULL SCHEDULE — detailed day-by-day timeline (experience #journey).
   Harmonizes with the .sched table: same solid panel + glass borders,
   mono time labels, RACE DAY in accent green, cautions flagged in signal.
   ============================================================ */
.fsched { display: flex; flex-direction: column; gap: 16px; }
.fsched__day {
  background: var(--c-bg-2);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.fsched__dhead {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  padding: 17px clamp(18px, 2.2vw, 28px);
  background: rgba(242, 242, 240, 0.03);
  border-bottom: 1px solid var(--glass-border);
}
.fsched__dnum {
  font-family: var(--ff-display); font-weight: 800; font-size: 17px;
  letter-spacing: 0.02em; color: var(--c-paper);
}
.fsched__ddate {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-muted);
}
.fsched__dttl {
  margin-left: auto; font-family: var(--ff-mono); font-size: 12px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted);
}
/* RACE DAY header — green accent, echoing .sched__col-h--race */
.fsched__day--race .fsched__dhead {
  background: color-mix(in srgb, var(--c-accent-3) 9%, transparent);
  border-bottom-color: color-mix(in srgb, var(--c-accent-3) 50%, var(--glass-border));
}
.fsched__day--race .fsched__dnum,
.fsched__day--race .fsched__dttl { color: var(--c-accent-3); }

.fsched__list { list-style: none; margin: 0; padding: 4px clamp(16px, 2vw, 26px) 12px; }
.fsched__ev {
  display: grid; grid-template-columns: 118px 1fr; gap: clamp(14px, 2vw, 30px);
  padding: 17px 0; border-top: 1px solid var(--glass-border);
}
.fsched__ev:first-child { border-top: 0; }
.fsched__time {
  font-family: var(--ff-mono); font-weight: 700; font-size: 15px;
  color: var(--c-paper); letter-spacing: 0.01em; padding-top: 2px;
  font-variant-numeric: tabular-nums;
}
.fsched__time small {
  display: block; margin-top: 4px; font-weight: 400; font-size: 10.5px;
  letter-spacing: 0.08em; color: var(--c-muted);
}
.fsched__ttl {
  font-family: var(--ff-display); font-weight: 700; font-size: 16px;
  color: var(--c-paper); margin-bottom: 6px; letter-spacing: -0.005em;
}
.fsched__desc { color: var(--c-paper-2); line-height: 1.6; font-size: var(--fs-note); max-width: 72ch; }
.fsched__note {
  margin-top: 11px; padding: 9px 13px;
  border: 1px solid color-mix(in srgb, var(--c-signal) 30%, var(--glass-border));
  background: color-mix(in srgb, var(--c-signal) 8%, transparent);
  border-radius: var(--radius-xs);
  color: var(--c-paper-2); font-size: var(--fs-note); line-height: 1.55;
}
.fsched__note::before { content: "\203B  "; color: var(--c-signal); font-weight: 700; }
/* race-highlight events — green time */
.fsched__ev--hl .fsched__time { color: var(--c-accent-3); }

@media (max-width: 640px) {
  .fsched__ev { grid-template-columns: 1fr; gap: 5px; }
  .fsched__time { display: flex; align-items: baseline; gap: 9px; }
  .fsched__time small { margin-top: 0; }
  .fsched__dttl { margin-left: 0; flex-basis: 100%; }
}

/* ============================================================
   GPX DOWNLOAD — race elevation section
   ============================================================ */
.gpx-dl {
  margin-top: clamp(26px, 4vh, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  text-align: center;
}
.gpx-dl__note {
  font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--c-muted);
}

/* Document download — medical form in eligibility aside (left-aligned).
   Mandatory form: the button stays on ONE line and gently pulses to draw the eye. */
.doc-dl {
  margin-top: clamp(18px, 2.6vh, 28px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
}
.doc-dl a.btn {
  /* keep the label on a single line even in the narrow two-col aside (~280px) */
  white-space: nowrap;
  letter-spacing: 0.05em;
  padding: 14px 22px;
  gap: 9px;
  /* attention pulse — soft brand-green breathing glow */
  animation: doc-dl-pulse 2.6s ease-in-out infinite;
}
.doc-dl a.btn:hover { animation-play-state: paused; }
.doc-dl a.btn .arr {
  /* downward bounce signalling "download" */
  animation: doc-dl-arrow 1.5s ease-in-out infinite;
}
.doc-dl__note {
  font-family: var(--ff-mono); font-size: 12px; line-height: 1.5;
  letter-spacing: 0.03em; color: var(--c-muted); max-width: 30ch;
}
@keyframes doc-dl-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(46, 174, 113, 0); }
  50%      { box-shadow: inset 0 1px 0 var(--glass-hi), 0 4px 16px rgba(0, 0, 0, 0.22), 0 0 20px 2px rgba(46, 174, 113, 0.42); border-color: rgba(46, 174, 113, 0.55); }
}
@keyframes doc-dl-arrow {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .doc-dl a.btn, .doc-dl a.btn .arr { animation: none; }
}

/* ============================================================
   HERO BACKGROUND FILM  +  relocated 3D scene under Key Info
   The hero now plays a full-bleed video; its former 3D Himalaya
   canvas + abstract glow art moved down to back the Key Info numbers.
   ============================================================ */
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* ── Continuous 3D Himalaya stage ──────────────────────────────
   ONE sticky scene spans BOTH Key Info and the course reveal, so the live 3D
   (not a static photo) backs both. The backdrop lives in an absolutely-
   positioned wrapper (out of flow) whose sticky child stays pinned for the
   whole stage; the section content scrolls over it. */
.himala-stage { position: relative; }
.himala-stage__bgwrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Static Himalaya photo backdrop (replaces the heavy 3D scene) — a single
   pinned image behind both the Key Info numbers and the course reveal, with a
   scrim so the white type stays legible. */
.himala-stage__bg {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background-color: #0a0a0a;   /* dark base if the photo ever fails to paint (so iOS never shows a wrong colour) */
}
/* The photo (with its scrim) lives on an inner layer so the Ken-Burns zoom can
   scale THIS layer while the sticky box above clips it (overflow: hidden).
   Scaling the sticky element itself painted 101px past the viewport at 1440
   and gave the whole page a horizontal scrollbar; a transform on a sticky
   element also jitters on mobile scroll. JS writes --kb-scale only. */
.himala-stage__bg::before {
  content: "";
  position: absolute; inset: 0;
  will-change: transform;      /* JS Ken-Burns zoom/drift (desktop) — see initHimalaKenBurns */
  /* top-center origin: the Ken-Burns zoom overscans DOWNWARD only (clipped by the
     sticky box), never above the stage into the transparent #intro — that upward
     bleed showed as a bright band missing the key-info scrim. */
  transform-origin: top center;
  transform: scale(var(--kb-scale, 1));
  background-image:
    linear-gradient(180deg, rgba(10,10,10,0.62) 0%, rgba(10,10,10,0.42) 45%, rgba(10,10,10,0.72) 100%),
    url('../assets/photos/30.webp');   /* distinct from the course reveal card (24.webp) so the same shot isn't shown twice back-to-back */
  background-size: cover;
  background-position: center;
}
/* the old 3D canvas + glow art are no longer rendered (hero-3d.js isn't loaded) */
.himala-stage__bg .hero__canvas,
.himala-stage__bg .hero__art { display: none; }
.himala-stage > section { position: relative; z-index: 1; background: transparent; }

/* Key Info numbers ride over the shared 3D backdrop */
@media (min-width: 760px) { #key-info { min-height: 86vh; justify-content: center; } }
#key-info::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Fades to near-opaque page colour at the bottom so the stage blends seamlessly
     into the (page-coloured) #reveal-course below — no brightness step at the seam.
     The 42% midpoint stays light so the numbers keep their legibility. */
  background: linear-gradient(180deg, rgba(10,10,10,0.42) 0%, rgba(10,10,10,0.10) 42%, rgba(10,10,10,0.32) 78%, rgba(10,10,10,0.95) 100%);
}
#key-info > .container { position: relative; z-index: 1; }

/* #journey follows the himala-stage (the cinematic course-reveal that used to sit here
   was removed in the homepage overhaul). The stage is shorter than its 100svh sticky
   backdrop, so the backdrop photo overscans BELOW the stage and would show through the
   next section as a bright strip. An opaque page-coloured background on #journey occludes
   that bleed. */
#journey { background: var(--c-bg); position: relative; z-index: 1; }

/* (mobile) [data-mobile-scale] sections (Course reveal + Shangri-La) keep the
   PC-style pinned card→full-bleed scale on phones too — phone-tuned 180vh pin.
   JS opts in via the same [data-mobile-scale] flag. */
@media (max-width: 700px) {
  .pinscale[data-mobile-scale] { height: 180vh; }
  .pinscale[data-mobile-scale] .pinscale__sticky {
    position: sticky; top: 0; height: 100svh;
    /* iOS paint fix: promote the pinned scene to its own GPU layer so Safari keeps
       painting it during momentum scroll instead of dropping to a blank. */
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    -webkit-transform: translateZ(0); transform: translateZ(0);
  }
  .pinscale[data-mobile-scale] .pinscale__media { transform: scale(0.62); border-radius: 28px; }
}
@media (max-width: 700px) and (prefers-reduced-motion: reduce) {
  .pinscale[data-mobile-scale] { height: auto; }
  .pinscale[data-mobile-scale] .pinscale__sticky { position: relative; height: 72vh; transform: none; }
  .pinscale[data-mobile-scale] .pinscale__media { transform: none; border-radius: 0; }
}

/* ============================================================
   "Opening soon" modal — registration CTAs (no live URL yet)
   ============================================================ */
.cs-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center;
  padding: 24px;
}
.cs-modal[hidden] { display: none; }
.cs-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 8, 7, 0.62);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 0.3s var(--ease-out);
}
.cs-modal.is-open .cs-modal__backdrop { opacity: 1; }
.cs-modal__panel {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  padding: 42px 36px 34px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg-2);
  -webkit-backdrop-filter: blur(22px) saturate(var(--glass-sat));
  backdrop-filter: blur(22px) saturate(var(--glass-sat));
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 30px 80px rgba(0, 0, 0, 0.5);
  opacity: 0; transform: translateY(14px) scale(0.985);
  transition: opacity 0.34s var(--ease-out), transform 0.34s var(--ease-out);
}
.cs-modal.is-open .cs-modal__panel { opacity: 1; transform: none; }
.cs-modal__close {
  position: absolute; top: 14px; right: 16px;
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center;
  background: transparent; border: 0; cursor: pointer;
  color: var(--c-muted); font-size: 22px; line-height: 1;
  transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.cs-modal__close:hover { color: var(--c-paper); background: rgba(242, 242, 240, 0.08); }
.cs-modal__eyebrow { display: block; margin-bottom: 14px; }
.cs-modal__title {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(26px, 4vw, 34px); line-height: 1.0; letter-spacing: -0.01em;
  color: var(--c-paper); margin-bottom: 14px;
}
.cs-modal__body {
  font-size: 15px; line-height: 1.6; color: var(--c-paper-2);
  margin-bottom: 26px; max-width: 38ch;
}
.cs-modal__ok { width: fit-content; font-size: 15px; }
@media (prefers-reduced-motion: reduce) {
  .cs-modal__backdrop, .cs-modal__panel { transition: none; }
}

/* ============================================================
   MOBILE QA FIXES (verified) — interior top-padding, footer, crumbs
   (schedule/table swipe is fixed via Lenis syncTouch:false in main.js)
   ============================================================ */
@media (max-width: 700px) {
  /* Interior hero/article top padding was desktop-fixed (180px / 150px) with no
     mobile override, pushing the headline ~280px down the viewport. */
  .page-hero { padding: 96px 0 36px; min-height: auto; }
  .article   { padding-top: 92px; padding-bottom: 56px; }
  /* Breadcrumbs wrap gracefully instead of forcing width on narrow phones */
  .page-hero__crumbs { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .page-hero { padding: 88px 0 28px; }
  /* Footer stacks to one column on small phones (was 2-up at ~155px, cramped) */
  .footer__top { grid-template-columns: 1fr; gap: 26px; }
}

/* ============================================================
   MOBILE PERFORMANCE PACKAGE (≤760px) — batch 4
   backdrop-filter is the heaviest scroll-jank source on phones; disable it
   everywhere and compensate. The himala 3D backdrop + fluid cursor are not
   loaded at all on mobile (see three-boot.js); the hero plays a poster.
   ============================================================ */
@media (max-width: 760px) {
  /* in-flow glass gets a touch more fill so cards stay defined without blur */
  :root { --glass-bg: rgba(242, 242, 240, 0.10); --glass-bg-2: rgba(242, 242, 240, 0.16); }
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  /* Scrolled / sub-page header: liquid glass on mobile too (SP — match the
     global-ecom look). This re-enables the backdrop blur that was previously
     dropped for scroll performance, so keep the fill dark and the blur moderate
     to stay light on the GPU. ⚠ If a low-end Android stutters up/down during
     scroll, revert to the jank-free solid tint (git history):
       background: rgba(12,12,11,0.97) !important; backdrop-filter: none. */
  .gnb--solid, .gnb--scrolled {
    background: rgba(10, 10, 10, 0.6) !important;
    -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
    backdrop-filter: blur(16px) saturate(1.4) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  }
  /* Top scrim behind the TRANSPARENT header (home top): a soft top-down vignette
     keeps the white logo/menu legible over any backdrop and softens the
     transparent→solid transition. It fades out once the header becomes its solid
     dark bar (scrolled, or any sub-page which is gnb--solid). */
  .gnb::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 220%;
    background: linear-gradient(to bottom, rgba(8, 8, 7, 0.62) 0%, rgba(8, 8, 7, 0.30) 48%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    transition: opacity var(--t-base) var(--ease-out);
  }
  .gnb--scrolled::before, .gnb--solid::before { opacity: 0; }
  .action-bar       { background: rgba(12, 12, 11, 0.92) !important; }
  /* Liquid-glass menu — frosted blur ONLY while open. The overlay is full-screen
     (inset:0) and, when closed, stays in the render tree at opacity:0 (not
     display:none, for the fade). A backdrop-filter on it therefore keeps blurring
     the whole viewport every scroll frame even though it's invisible — a major,
     silent scroll-jank source. Scoping the blur to .is-open means zero
     backdrop-filter anywhere on the page during normal scrolling. */
  /* Liquid-glass menu (SP — match the global-ecom look). The overlay is
     scroll-locked while open, so the blur costs nothing per frame. Known
     iOS Safari bug: a backdrop-filter over a scroll-locked page can fail to
     re-composite on the SECOND open (hamburger → X → hamburger), painting a
     grey blur with no text. Mitigations: (1) translateZ(0) forces its own
     compositing layer; (2) main.js nudges the filter off→on each open to
     force a fresh snapshot. ⚠ Verify on a real iPhone; if the second open
     ever shows a blank grey blur, revert to the solid fill:
       background:#0e0e0d !important; backdrop-filter:none !important; */
  .gnb-overlay.is-open {
    background: rgba(10, 10, 10, 0.55) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
    backdrop-filter: blur(24px) saturate(1.5) !important;
    transform: translateZ(0);
  }
  /* While the menu is open, drop the header's OWN glass + scrim so the overlay's
     glass is the single surface behind both the bar and the menu — no seam, no
     double-blur where the two overlap. */
  body.menu-open .gnb {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom-color: transparent !important;
  }
  body.menu-open .gnb::before { opacity: 0 !important; }
  .cs-modal__panel  { background: rgba(22, 22, 20, 0.97); }

  /* Hero video plays on mobile too, but JS swaps it to the lighter ~1.2 MB
     mobile encode (see initHeroVideoLite); the poster covers the buffer. */
  /* himala backdrop 3D canvas isn't loaded on mobile — but the photo MUST fill the
     whole pinned viewport. The old 78vh left a black band below the photo behind the
     100svh pinned title ("40km, written by the Himalayas"), and on iOS the band grew
     with the dynamic toolbar (vh = large viewport) — reading as broken empty space.
     Use 100vh (largest viewport) so the photo always covers the visible area in every
     toolbar state; plain height, no transform, so it stays jank-free on scroll. */
  .himala-stage__bg { height: 100vh; height: 100lvh; }
}

/* ============================================================
   MOBILE TYPOGRAPHY — phone-readability pass.
   1) Looser title leading: at the clamped-down mobile sizes the uppercase
      display titles wrap to 2-4 lines and at lh 0.82-0.98 those lines nearly
      touched. Desktop keeps its tight single-line display look (mobile-scoped).
   2) Lift body + small labels a step so descriptions/captions read comfortably
      on a phone.
   ============================================================ */
@media (max-width: 760px) {
  .t-hero    { line-height: 0.92; }
  .t-display { line-height: 0.95; }
  .t-h1      { line-height: 1.0; }
  .t-h2      { line-height: 1.06; }

  :root { --fs-body: 18px; }          /* body / .t-body / two-col / accordion / notice prose: 17 → 18 */
  .t-micro           { font-size: 14px; }   /* was 13 */
  .lb-figure__cap    { font-size: 13px; }   /* was 12 */
  .tbl th            { font-size: var(--fs-meta); }
  .tag               { font-size: 11px; }    /* was 10 */
  .course-ctl__label { font-size: 12px; }    /* was 11 */
}

/* ── Pressed (:active) feedback ─────────────────────────────────
   Buttons and tappable rows had hover states but no press response.
   data-magnetic elements carry an inline translate from JS, so the press
   cue is brightness (a transform here would be overridden); it also fires
   on touch, where hover never shows. Release snaps back instantly. */
.btn:active,
.gnb__cta:active,
.gnb-overlay__cta a:active { filter: brightness(0.86); }
.gnb__menu a:active,
.gnb__more-menu a:active,
.gnb-overlay__menu a:active,
.acc-trigger:active,
.notice-item:active { filter: brightness(0.82); }

/* Elevation chart scrolls sideways on phones (see the 700px rule above) —
   without a cue the 4,000 m high point off-screen right goes unnoticed. */
.ep-swipe-hint { display: none; }
@media (max-width: 700px) {
  .ep-swipe-hint {
    display: block; margin: 6px 14px 0;
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--c-muted);
  }
}

/* Units stay lowercase even inside uppercase titles/labels (km, m).
   The title keeps its uppercase design; only the unit token opts out. */
.unit { text-transform: none; }

/* Reusable button motion (same feel as the medical-form download).
   .btn--pulse: soft brand-green breathing glow to draw the eye (CTAs).
   .btn--dl:    downward-bouncing arrow signalling "download".
   Keyframes doc-dl-pulse / doc-dl-arrow are defined once, above. */
.btn--pulse { animation: doc-dl-pulse 2.6s ease-in-out infinite; }
.btn--pulse:hover, .btn--pulse:focus-visible { animation-play-state: paused; }
.btn--dl .arr { animation: doc-dl-arrow 1.5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .btn--pulse, .btn--dl .arr { animation: none; }
}

/* ── Accessibility: reduced transparency ─────────────────────────
   Users who set "Reduce Transparency" (macOS/iOS) get opaque surfaces
   instead of frosted glass — drop every backdrop blur and give the key
   glass surfaces a solid fill so text contrast is guaranteed. */
@media (prefers-reduced-transparency: reduce) {
  *, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .gnb--solid, .gnb--scrolled { background: rgba(12, 12, 11, 0.98) !important; }
  .gnb-overlay.is-open        { background: #0e0e0d !important; }
  .gnb__menu a                { background: var(--c-bg-2) !important; }
  .action-bar                 { background: rgba(12, 12, 11, 0.98) !important; }
}