/* Hallmark · route: custom (bespoke) · structure: continuous world · nav: route map card (custom) · footer: colophon line
 * pre-emit critique: P5 H4 E4 S5 R4 V5 · contrast: measured per element on the composited frame (build/verify.mjs audit)
 */
/* Summit · page layer. The engine stylesheet is untouched; everything here is
   this world's own markup. Tokens live in tokens.css. */

html, body { overflow-x: clip; background: var(--color-paper); }
html[data-ground="dark"] body { background: var(--color-night); }
body { font-family: var(--font-text); color: var(--color-ink); }

/* ------------------------------------------------------------ chrome ---- */
.skip {
  position: fixed; left: var(--space-4); top: var(--space-4); z-index: 80;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm);
  background: var(--color-ink); color: var(--color-paper);
  font-size: var(--text-sm); text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5);
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--sc-gutter);
  pointer-events: none;
  color: var(--color-ink);
  transition: color var(--dur-slow) var(--ease-out);
}
/* the chrome follows what is actually behind its corners: from the treeline on,
   dark trunks and night sky, so it turns to snow */
html[data-chrome="dark"] .bar { color: var(--color-snow); }
/* the treeline's sun shafts and trunks run up behind both corners; a soft band
   in the chrome's opposite tone holds the bar legible there (--bar-shade, 0..1) */
.bar::before {
  content: ""; position: absolute; inset: 0 0 -5rem 0; z-index: -1; pointer-events: none;
  /* eased falloff: a two-stop ramp ends in a visible edge and reads as a band */
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-paper) 84%, transparent) 0%, color-mix(in oklab, var(--color-paper) 74%, transparent) 30%, color-mix(in oklab, var(--color-paper) 46%, transparent) 55%, color-mix(in oklab, var(--color-paper) 18%, transparent) 78%, transparent);
  opacity: var(--bar-shade, 0);
}
html[data-chrome="dark"] .bar::before {
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-night) 84%, transparent) 0%, color-mix(in oklab, var(--color-night) 74%, transparent) 30%, color-mix(in oklab, var(--color-night) 46%, transparent) 55%, color-mix(in oklab, var(--color-night) 18%, transparent) 78%, transparent);
}
.bar a { pointer-events: auto; color: inherit; text-decoration: none; white-space: nowrap; }
.bar__mark {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-sm); letter-spacing: 0.32em; text-transform: uppercase;
  transition: opacity var(--dur-slow) var(--ease-out);
}
html[data-hero="1"] .bar__mark { opacity: 0; }
.bar__credit {
  font-size: var(--text-sm); letter-spacing: 0.01em;
  padding-block: var(--space-2);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bar__credit:hover, .bar__mark:hover { background-size: 100% 1px; }
}
.bar__mark { background-image: linear-gradient(currentColor, currentColor); background-size: 0% 1px;
  background-repeat: no-repeat; background-position: 0 100%; padding-block: var(--space-2); }

/* ------------------------------------------------------------- stage ---- */
.world { background: var(--color-paper); }
.world__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 130; pointer-events: none; display: none;
}
.gl-on .world__gl { display: block; }
/* With the live world running, the stills only exist as texture sources and as
   the fallback film. They stop compositing. The hero is always real DOM. */
.gl-on .leg:not(.leg--hero) .sc-world__poster { visibility: hidden !important; }

.hero__hold { display: none; }
.leg--hero > img { will-change: transform; transform-origin: 50% 60%; }
.hero__sky { z-index: 0; }
.hero__peak { z-index: 2; }
.hero__name {
  position: absolute; inset-inline: 0; top: var(--name-top, 18%); z-index: 1;
  margin: 0; text-align: center;
  font-family: var(--font-display); font-weight: 200;
  font-size: var(--text-name); line-height: 1;
  overflow-wrap: anywhere; min-width: 0;
  letter-spacing: var(--track-name); text-transform: uppercase;
  color: var(--color-ink);
  will-change: transform;
  pointer-events: none;
}
.hero__name span {
  display: inline-block; padding-left: var(--track-name);
  opacity: 0; transform: translateY(0.08em);
  transition: opacity 1400ms var(--ease-out), transform 1600ms var(--ease-out);
}
.fonts-ready .hero__name span { opacity: 1; transform: none; }

/* --------------------------------------------------------------- copy ---- */
.copy .sc-copy { max-width: none; }
.scrim { opacity: 0; }

.block { color: var(--color-ink); }
.block--night, .block--finale { color: var(--color-snow); }

.lede, .head {
  margin: 0; overflow-wrap: anywhere; min-width: 0;
  font-family: var(--font-display); font-weight: 300;
  line-height: 1.04; letter-spacing: var(--track-tight);
  text-wrap: balance;
}
.lede { font-size: var(--text-xl); max-width: 21ch; }
.head { font-size: var(--text-xl); max-width: 18ch; }
.head--xl { font-size: var(--text-2xl); max-width: 14ch; line-height: 0.98; }
.body {
  margin: var(--space-4) 0 0; max-width: 46ch;
  font-size: var(--text-base); line-height: 1.6; text-wrap: pretty;
  color: var(--color-ink-soft);
}
.block--night .body, .block--finale .body { color: var(--color-snow-soft); }
/* over a live photograph the secondary ink steps up to full ink: the frame
   under it moves, and the softer tone loses to the darkest rock it crosses */
.block--route .body, .block--ground dd { color: var(--color-ink); }

.hint { display: none; margin-top: var(--space-2); color: var(--color-ink); font-weight: 500; }
/* the invitation only exists where the wind does: never on the still film */
.gl-on .hint--fine { display: block; }
@media (hover: none), (pointer: coarse) {
  .gl-on .hint--fine { display: none; }
  .gl-on .hint--touch { display: block; }
}

/* block placement: each one is anchored where its frame leaves room */
.block--hero  { left: var(--sc-gutter); right: auto; bottom: clamp(2rem, 6.5vh, 4.75rem); top: auto; max-width: min(40rem, calc(100vw - 15.5rem - var(--sc-gutter) * 3)); }
.block--cloud { left: var(--sc-gutter); right: auto; top: 30vh; max-width: 40rem; }
.block--open  { left: var(--sc-gutter); right: auto; top: clamp(5rem, 13vh, 9rem); }
.block--route { left: auto; right: var(--sc-gutter); top: clamp(5.5rem, 14vh, 10rem); max-width: 30rem; }
.block--ground { left: clamp(1.25rem, 25vw, 26rem); right: auto; top: clamp(5.5rem, 17vh, 11rem); max-width: 34rem; }
.block--night { left: var(--sc-gutter); right: auto; top: clamp(5.5rem, 15vh, 10rem); max-width: 36rem; }
.block--finale { left: var(--sc-gutter); right: auto; top: clamp(5.5rem, 12vh, 9rem); max-width: 40rem; }
/* a short, wide window crops the blue-hour plate so the summit rides high: the
   headline takes its size from the height there, so it ends in sky, not on snow */
@media (min-width: 761px) {
  .block--finale .head--xl { font-size: min(var(--text-2xl), 8.2vh); }
}
@media (min-aspect-ratio: 11/6) and (min-width: 761px) {
  .block--finale .head--xl { font-size: min(var(--text-2xl), 7.2vh); }
}

/* the still film (reduced motion, no WebGL) has no shader haze: the canyon plate
   gets the same morning haze over its top, where the canyon copy sits, and the
   hero's small print steps up to full ink over the raw cloud sea */
html:not(.gl-on) .leg--canyon::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--color-paper) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper) 74%, transparent) 24%, color-mix(in oklab, var(--color-paper) 34%, transparent) 46%, transparent 64%);
}
html:not(.gl-on) .block--hero .body { color: var(--color-ink); }

/* scrims: each shaped to the copy it serves, never a full-frame wash */
.scrim--hero  { background: radial-gradient(70rem 32rem at 0% 100%, color-mix(in oklab, var(--color-paper) 72%, transparent), transparent 70%); }
.scrim--open  { background: radial-gradient(60rem 26rem at 0% 0%, color-mix(in oklab, var(--color-paper) 80%, transparent), transparent 72%); }
.scrim--route { background: radial-gradient(64rem 34rem at 100% 0%, color-mix(in oklab, var(--color-paper) 92%, transparent) 0%, color-mix(in oklab, var(--color-paper) 70%, transparent) 40%, transparent 76%); }
.scrim--ground { background: radial-gradient(56rem 34rem at 40% 30%, color-mix(in oklab, var(--color-paper) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper) 74%, transparent) 45%, transparent 78%); }
.scrim--night { background: radial-gradient(60rem 30rem at 0% 0%, color-mix(in oklab, var(--color-night) 70%, transparent), transparent 72%); }
/* the second gradient is the colophon's: the cloud sea drifts under it, and a
   bright billow passing behind small text must not wash it out */
.scrim--finale { background:
  radial-gradient(70rem 40rem at 0% 0%, color-mix(in oklab, var(--color-night) 76%, transparent), transparent 74%),
  radial-gradient(60rem 22rem at 0% 100%, color-mix(in oklab, var(--color-night) 82%, transparent) 0%, color-mix(in oklab, var(--color-night) 70%, transparent) 50%, color-mix(in oklab, var(--color-night) 32%, transparent) 78%, transparent 100%); }

.tenets { margin: var(--space-6) 0 0; display: grid; gap: 0; max-width: 30rem; }
.tenets div {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 22%, transparent);
}
.tenets dt {
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--track-caps); text-transform: uppercase; padding-top: 0.2em;
}
.tenets dd { margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--color-ink-soft); }

/* on desktop the finale breaks at its comma, not after "the"; the measure widens
   just enough to hold the second phrase. Phones keep the natural two-line wrap. */
@media (min-width: 761px) {
  .block--finale { max-width: 48rem; }
  .block--finale .head--xl { max-width: 16ch; }
  .block--finale .phrase { display: inline-block; }
}
.finale__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-6); }
.cta {
  display: inline-flex; align-items: center; min-height: 2.9rem;
  padding: 0 var(--space-5); border-radius: var(--radius-sm);
  background: var(--color-accent); color: var(--color-accent-ink);
  font-weight: 500; font-size: var(--text-base); text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 0 var(--color-edge-light) inset, 0 10px 24px -12px var(--color-shadow-deep);
  transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cta:hover { background: var(--color-accent-hover); }
  .again:hover { background-color: var(--color-night-2); border-color: color-mix(in oklab, var(--color-snow) 34%, transparent); }
}
.cta:active { transform: translateY(1px) scale(0.985); }
/* the quiet twin of the CTA, in the route card's glass: a bare link over the
   blue-hour sky failed contrast, and the summit's plume streams behind it on phones */
.again {
  appearance: none; display: inline-flex; align-items: center; min-height: 2.9rem;
  padding: 0 var(--space-5); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap;
  background: color-mix(in oklab, var(--color-night-2) 90%, transparent);
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-snow) 18%, transparent);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--color-snow); font: inherit; font-size: var(--text-base);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.again:active { transform: translateY(1px); }
.block--colophon { left: var(--sc-gutter); right: auto; top: auto; bottom: clamp(1.25rem, 4vh, 2.5rem); max-width: 30rem; }
.colophon { margin: 0; max-width: 48ch; font-size: var(--text-xs); line-height: 1.6; color: var(--color-snow-soft); }

:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-sm); }
html[data-ground="dark"] :focus-visible, .block--finale :focus-visible { outline-color: var(--color-focus-night); }
.bar :focus-visible { outline-color: currentColor; }
button:disabled, .cta[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* -------------------------------------------------------------- route ---- */
.route {
  position: fixed; right: var(--sc-gutter); bottom: clamp(1rem, 3vh, 2rem); z-index: 60;
  width: 15.5rem; padding: var(--space-3) var(--space-4) var(--space-4);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--color-paper) 90%, transparent);
  border: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 14%, transparent);
  box-shadow: 0 1px 2px var(--color-shadow-soft), 0 12px 30px -16px var(--color-shadow-card);
  color: var(--color-ink);
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
html[data-ground="dark"] .route {
  background: color-mix(in oklab, var(--color-night-2) 90%, transparent);
  border-color: color-mix(in oklab, var(--color-snow) 16%, transparent);
  color: var(--color-snow);
}
.route__now {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display); font-weight: 400; font-size: var(--text-xs);
  letter-spacing: var(--track-caps); text-transform: uppercase;
}
.route__map { position: relative; height: 3.6rem; }
.route__profile { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.route__ridge { fill: none; stroke: currentColor; stroke-opacity: 0.22; stroke-width: 1; vector-effect: non-scaling-stroke; }
.route__trail { fill: none; stroke: currentColor; stroke-opacity: 0.55; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.route__stops { list-style: none; margin: 0; padding: 0; }
.route__stops button {
  position: absolute; left: var(--x); top: var(--y);
  width: 1.6rem; height: 1.6rem; margin: -0.8rem 0 0 -0.8rem;
  border: 0; padding: 0; background: none; cursor: pointer; color: inherit;
  border-radius: 50%;
}
.route__stops button::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: currentColor; opacity: 0.55;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.route__stops button[aria-current="true"]::before { opacity: 1; }
.route__stops button span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.route__stops button:focus-visible::before { transform: scale(1.5); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .route__stops button:hover::before { transform: scale(1.5); opacity: 1; }
}
.route__now.is-preview { opacity: 0.7; }
.route__stops button:active::before { transform: scale(0.85); }
.route__marker {
  position: absolute; left: 0; top: 0; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; border: 2px solid var(--color-accent-deep); background: var(--color-paper);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-accent) 22%, transparent);
  will-change: transform; pointer-events: none;
}
html[data-ground="dark"] .route__marker { border-color: var(--color-accent); background: var(--color-night); }

.grain { z-index: 5; opacity: 0.035; }

/* -------------------------------------------------------------- phone ---- */
@media (max-width: 760px) {
  :root { --text-name: clamp(3.6rem, 0.5rem + 17.5vw, 9rem); }
  .lede { font-size: clamp(1.6rem, 1.2rem + 2.2vw, 2.1rem); }
  .head { font-size: clamp(1.55rem, 1.2rem + 2.2vw, 2.1rem); }
  .head--xl { font-size: clamp(2.1rem, 1.5rem + 3vw, 2.8rem); }
  .block--hero { bottom: calc(7.5rem + env(safe-area-inset-bottom)); right: var(--sc-gutter); max-width: none; }
  .block--hero .body { color: var(--color-ink); }
  .block--cloud { top: 26svh; right: var(--sc-gutter); }
  .block--open { top: 13svh; right: var(--sc-gutter); }
  .block--route { left: var(--sc-gutter); right: var(--sc-gutter); top: 13svh; }
  .block--ground { left: var(--sc-gutter); right: var(--sc-gutter); top: 13svh; }
  .block--night, .block--finale { top: 12svh; right: var(--sc-gutter); }
  .block--colophon { right: var(--sc-gutter); bottom: calc(7.25rem + env(safe-area-inset-bottom)); }
  .tenets div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .scrim--hero  { background: linear-gradient(to top, color-mix(in oklab, var(--color-paper) 90%, transparent) 0%, color-mix(in oklab, var(--color-paper) 72%, transparent) 30%, color-mix(in oklab, var(--color-paper) 30%, transparent) 46%, transparent 60%); }
  .scrim--open, .scrim--route { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-paper) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper) 55%, transparent) 40%, transparent 66%); }
  .scrim--ground { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-paper) 88%, transparent) 0%, color-mix(in oklab, var(--color-paper) 76%, transparent) 50%, transparent 74%); }
  .scrim--night { background: linear-gradient(to bottom, color-mix(in oklab, var(--color-night) 80%, transparent) 0%, color-mix(in oklab, var(--color-night) 45%, transparent) 45%, transparent 70%); }
  /* the finale's scrim stops above the summit: the copy sits in sky, and the
     peak is the one bright thing the page ends on */
  .scrim--finale { background:
    linear-gradient(to bottom, color-mix(in oklab, var(--color-night) 80%, transparent) 0%, color-mix(in oklab, var(--color-night) 52%, transparent) 20%, transparent 38%),
    /* the colophon's band, in rem like the colophon's own offset, so it holds on short screens */
    linear-gradient(to top, transparent calc(6rem + env(safe-area-inset-bottom)), color-mix(in oklab, var(--color-night) 72%, transparent) calc(7rem + env(safe-area-inset-bottom)), color-mix(in oklab, var(--color-night) 72%, transparent) calc(13.5rem + env(safe-area-inset-bottom)), transparent calc(17rem + env(safe-area-inset-bottom))); }
  .route { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; bottom: max(0.75rem, env(safe-area-inset-bottom)); padding: var(--space-2) var(--space-4) var(--space-3); }
  .route__map { height: 2.6rem; }
  .bar__credit { font-size: var(--text-xs); }
  /* both buttons on one row from 360px up, so neither lands on the summit */
  .finale__actions { gap: var(--space-4); }
  .cta, .again { padding-inline: var(--space-4); }
  /* solid on phones: the plume streams right behind it, and below 360px it wraps onto the snow */
  .again { background: var(--color-night-2); }
}
@media (max-width: 380px) {
  .colophon { margin-top: var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .leg--hero > img, .hero__name { transform: none !important; }
  .hero__name span { transform: none; transition: opacity 150ms linear; }
  .route__marker { transition: transform 150ms linear; }
}