/* SAR 8 — sixth edition. An alpine poster and a folded survey sheet. White paper and black ink; every photograph
   in one ice blue, and blue for nothing else; a cool stone grey for large secondary type; each mountain's
   photograph across the screen with its route in white; a charcoal band wherever there is a map. Geist for
   everything read, Geist Mono for what
   annotates a drawing, the way a route topo labels its camps. */

@font-face {
  font-family: "Geist";
  src: url("assets/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("assets/fonts/GeistMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #ffffff;
  --mist: #f4f5f6; /* the band of the Tour to Eight */
  --ink: #000000;
  --map: #ebebe8;          /* symbol tiles, the live map before its tiles */
  --stone: #878d98;        /* large secondary type, 3.3:1 on white */
  --quiet: #5a5f69;        /* small secondary text, 6.4:1 on white */
  --hair: #d3d6da;         /* hairlines */
  --rule: #b9bdc3;         /* the dotted lines of a scale, every 1,000 m */
  --pale: #d5d8dd;         /* the huge pale numerals and the footer word */
  --ice: #2c69b0;          /* the tone of the photographs; the focus ring and the summit pin. 5.6:1 on white */
  --ice-deep: #0f2f57;
  --charcoal: #262626;     /* the band behind a map */
  --on-dark: #ffffff;
  --on-dark-quiet: #b3b3b3;

  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* One scale: a giant size for names, a display size for the few titles, h2, lead, body, small and the mono
     annotation size. */
  --t-giant: clamp(3.1rem, 9vw, 9.25rem);
  --t-display: clamp(2.75rem, 7vw, 8rem);
  --t-h2: clamp(2rem, 4.4vw, 5rem);
  --t-lead: clamp(1.0625rem, 1.5vw, 1.3125rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-mono: 0.6875rem;

  --w-big: 540;
  --col: 100%;
  /* On a phone turned sideways the gutter clears the notch and the rounded corners (viewport-fit=cover). */
  --gutter: max(clamp(16px, 3.4vw, 64px), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
  --chapter: clamp(72px, 9vw, 144px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.5; overflow-x: clip; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: var(--w-big); }
b, strong { font-weight: 560; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
a { color: inherit; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 2px solid var(--ice); outline-offset: 3px; }
h1, h2, .sec-lede, .poster-lede, .day-title { text-wrap: balance; }
p, li { text-wrap: pretty; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(*), ::view-transition-new(*), ::view-transition-group(*) { animation: none !important; } }

.skip { position: fixed; z-index: 2000; left: 16px; top: -100px; padding: 10px 14px; background: var(--ink); color: var(--paper); font-size: var(--t-small); text-decoration: none; }
.skip:focus { top: 8px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ice { filter: url(#ice); }

/* Iconography: one thin line */
.ic { display: inline-block; width: 24px; height: 24px; flex: none; vertical-align: -0.4em; fill: none; stroke: currentColor; stroke-width: 1px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic text { font-family: var(--sans); font-weight: 450; fill: currentColor; stroke: none; text-anchor: middle; dominant-baseline: central; }
.ic-grade { width: 18px; }
.ic-grade-wide { width: 22px; }
.ic-grade text { font-size: 9px; letter-spacing: -0.01em; }
.ic-mark { stroke-width: 1.5px; }
.ic-mark circle { fill: currentColor; stroke: none; }
.bars { display: inline-block; flex: none; vertical-align: -1px; overflow: visible; }
.bars rect { fill: none; stroke: currentColor; stroke-width: 1px; }
.bars rect.on { fill: currentColor; }
.compass, .north, .peak-art { display: block; fill: none; stroke: currentColor; stroke-width: 1.3px; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.north .north-n { fill: currentColor; stroke: none; }

/* Page columns. Everything but the full-bleed poster and the bands sits on one column. */
.road-in, .register, .why, .plan, .tdays, .pager, .sym, .sym-intro, .foot-row, .foot-fine { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.road, .register, .why, .plan, .tdays, .pager { margin-top: var(--chapter); }
.plan + .before, .tdays + .plan { margin-top: clamp(56px, 7vw, 104px); }

.sec-head { display: grid; gap: 14px 24px; margin-bottom: clamp(24px, 3.4vw, 48px); }
.sec-head h2 { max-width: 16ch; font-size: var(--t-h2); letter-spacing: -0.045em; line-height: 0.98; }
.sec-lede { max-width: 46ch; font-size: var(--t-lead); line-height: 1.35; color: var(--quiet); }
.sec-lede b { color: var(--ink); font-weight: 500; }
@media (min-width: 900px) {
  .sec-head { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}

/* ——— Header ——— */
.site-head { position: relative; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px var(--gutter); font-size: 0.9375rem; line-height: 1.2; }
.site-head-over { position: absolute; top: 0; left: 0; right: 0; color: var(--on-dark); }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 520; text-decoration: none; }
.brand .ic { width: 18px; height: 18px; vertical-align: 0; }
.nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px clamp(14px, 2.4vw, 32px); }
.nav a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .nav a:hover, .brand:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; } }

/* ——— Home: the poster ——— */
/* --tw: the name's width, gutter to gutter, but never so wide that its capitals pass 43% of the screen's height;
   --th: its height, the outline's height (--ar, from the build) times the stretch (--st, set by assets/poster.js as
   the page scrolls). The caption reads --th too, to stand clear of the name on a phone. */
.poster-photo { --tw: min(100cqw - 2 * var(--gutter), 43vh / var(--ar)); --th: calc(var(--tw) * var(--ar) * var(--st, 1)); position: relative; height: clamp(560px, 94vh, 1040px); overflow: hidden; background: var(--ice-deep); color: #fff; isolation: isolate; container-type: inline-size; }
/* Anchored at the top: the summit is near the top of every poster photo, and the name covers the foot. */
.poster-photo img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
/* The halftone assets/poster.js draws over the photo as the page scrolls; hidden until it starts. */
.poster-dots { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; visibility: hidden; }
.poster-dots.on { visibility: visible; }
/* A little depth at the top for the white type; the title stands on the rock at the foot of the photo. */
.poster-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(rgb(5 20 42 / 0.72), rgb(5 20 42 / 0.5) 34%, rgb(5 20 42 / 0.08) 58%, rgb(5 20 42 / 0.3)); }
.poster-lede { position: absolute; left: var(--gutter); right: var(--gutter); top: clamp(112px, 19vh, 220px); max-width: 30ch; font-size: clamp(1.375rem, 2.6vw, 2.375rem); font-weight: 560; line-height: 1.08; letter-spacing: -0.03em; }
/* The navy shadow keeps the small caption legible over the halftone's white dots. */
.poster-cap { position: absolute; right: var(--gutter); top: clamp(112px, 19vh, 220px); font-size: var(--t-small); line-height: 1.3; text-align: right; text-shadow: 0 0 4px rgb(5 20 42 / 0.9), 0 0 10px rgb(5 20 42 / 0.6); }
/* The name as an outline standing on the photo's edge at the baseline; the round feet of S and 8 dip past it and are
   cut by the edge. preserveAspectRatio="none" lets the height grow alone. */
.poster-title { position: absolute; left: var(--gutter); bottom: 0; width: var(--tw); height: var(--th); margin: 0; }
.poster-title svg { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
@media (max-width: 640px) {
  .poster-photo { height: clamp(540px, 86vh, 760px); }
  .poster-lede { top: 104px; right: 18%; }
  .poster-cap { top: auto; bottom: calc(var(--th) + 16px); left: var(--gutter); right: auto; max-width: none; text-align: left; }
}

/* ——— Home: the owner's own words, between the poster and the list ———
   Large text across the page from the gutter. With script
   (.intro-on, assets/intro.js) the text is set a line at a time: as it comes into view each line is wiped in from
   left to right by a soft mask edge (--p, from -25 to 100), a line every 0.08s; after Made With GSAP's effect 066,
   played on a timer rather than tied to the scroll. Reduced motion, or no script: the plain text. */
@property --p { syntax: "<number>"; inherits: false; initial-value: -25; }
.intro { margin-top: clamp(48px, 6vw, 96px); }
.intro-stage { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; }
.intro-text { display: grid; gap: 0.6em; font-size: clamp(1.25rem, 3.2vw, 3.5rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.intro-text p { text-wrap: pretty; }
.intro-text p:last-child { color: var(--stone); }
@media (max-width: 759px) {
  .intro-text { font-size: clamp(1.1875rem, 5.4vw, 1.5rem); }
}
.intro-on .intro-line { display: block; --p: -25; -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--p) * 1%), transparent calc(var(--p) * 1% + 25%)); mask-image: linear-gradient(90deg, #000 calc(var(--p) * 1%), transparent calc(var(--p) * 1% + 25%)); transition: --p 0.7s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--i, 0) * 0.08s); }
.intro-on.intro-play .intro-line { --p: 100; }
.list { margin-top: var(--chapter); }
.list .alt { margin-top: 0; }

/* The list by height, with its ruler, across the whole width. Three columns: the ruler, a gutter the leaders cross,
   then the names. The names are set as large as the page allows: --k is the width of the longest name in em, measured
   at build time, so it just fits. Every row is one height (--row), so a leader reaches the ruler with nothing but its
   offset in rows (--dy, --h). Above the first row, --sky rows of open ruler for Everest, K2 and the airliner. */
.alt { --rw: clamp(64px, 7vw, 128px); --gut: clamp(14px, 3vw, 52px); display: grid; grid-template-columns: var(--rw) var(--gut) minmax(0, 1fr); width: calc(100% - 2 * var(--gutter)); margin: clamp(28px, 4vw, 64px) auto 0; container-type: inline-size; }
.ruler, .roll, .peek { --name: calc((100cqw - var(--rw) - var(--gut)) / var(--k)); --row: calc(var(--name) * 1.08 + 30px); }
/* With a mouse the height readout rides beside the spine; the gutter is wide enough to hold it clear of the names. */
@media (hover: hover) and (pointer: fine) {
  .alt { --gut: 72px; }
}

/* The ruler: an ink spine the heights stand on, and the scale every ruler shares (the chart of the whole climb
   too): a tick every 100 m at the ruler's outer edge, and every 1,000 m a figure standing on a dotted line that runs
   across the whole list behind the names. */
.ruler { position: relative; grid-column: 1; border-right: 1px solid var(--ink); }
/* One tile per 100 m, so a ruler whose top is not a round hundred (--tick0 > 0, on the mountain pages) shifts every
   tick by the same amount; a single tall tile would wrap its own end in above the first tick as a second one. */
.ruler-ticks { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: linear-gradient(var(--ink) 0 1px, transparent 1px) 0 calc(var(--tick0, 0) * var(--row)) / 100% calc(var(--row) * 100 / var(--per)) repeat-y; }
.ruler-k { position: absolute; left: 0; width: 100cqw; height: 1px; background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 5px); }
.ruler-k > span { position: absolute; left: 13px; bottom: 5px; font-size: 0.75rem; line-height: 1; }
.ruler-read { position: absolute; right: 0; z-index: 3; display: none; transform: translate(calc(100% + 6px), -50%); padding: 3px 6px; background: var(--ink); color: var(--paper); font-size: 0.75rem; line-height: 1.2; white-space: nowrap; pointer-events: none; }
.ruler-live .ruler-read { display: block; }

/* Heights to read the plan against: a ring on the spine with a name that appears on the left as the cursor passes,
   and the plane above the top with its name in the open sky to its right. Where there is no mouse they are always
   shown, and Annapurna, down among the rows, keeps its name above its ring, clear of the 8,000 m figure. */
.ruler-ref { position: absolute; right: 0; z-index: 2; width: 0; height: 0; }
.ruler-ref > i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border: 1px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background-color 0.2s ease, transform 0.3s var(--ease-out); }
.ruler-ref > .ic { position: absolute; left: -10px; top: -26px; width: 20px; height: 20px; stroke-width: 1.1px; }
.ruler-ref-above::after { content: ""; position: absolute; left: -0.5px; top: -6px; height: 6px; border-left: 1px dotted var(--ink); }
.ruler-ref-lab { position: absolute; right: 14px; top: 0; display: grid; justify-items: end; gap: 1px; padding: 2px 0 2px 4px; background: var(--paper); transform: translate(8px, -50%); opacity: 0; font-size: 0.75rem; font-weight: 500; line-height: 1.25; white-space: nowrap; transition: opacity 0.25s ease, transform 0.35s var(--ease-out); pointer-events: none; }
.ruler-ref-lab b { font-weight: 400; color: var(--quiet); }
.ruler-ref-above .ruler-ref-lab { right: auto; left: 18px; top: -16px; justify-items: start; transform: translate(-8px, -50%); }
.ruler-ref.near > i { background: var(--ink); transform: scale(1.2); }
.ruler-ref.near .ruler-ref-lab { opacity: 1; transform: translate(0, -50%); }
@media (hover: none), (pointer: coarse) {
  .ruler-ref-lab { opacity: 1; transform: translate(0, -50%); }
  .ruler-ref-low .ruler-ref-lab { transform: translate(0, -82%); }
}
/* On a phone the ruler stands on the screen's left edge, narrower and with smaller figures, so the names get the
   room it gives up. */
@media (max-width: 640px) {
  .alt { --rw: 44px; width: calc(100% - var(--gutter)); margin-left: 0; }
  .ruler-k > span { left: 9px; font-size: 0.625rem; }
  .ruler-k-under > span { display: none; }
  /* No room left of the spine for the reference heights: in the sky they stand right of their rings, on one line;
     Annapurna, level with the first row, stands at the list's right edge, clear of the name. */
  .ruler-ref-lab { right: auto; left: 12px; display: flex; gap: 5px; padding: 2px 4px 2px 0; font-size: 0.6875rem; }
  .ruler-ref-low .ruler-ref-lab { left: calc(100cqw - var(--rw)); padding: 2px 0 2px 4px; transform: translate(-100%, -50%); }
}

.roll { --base: var(--stone); --fill: var(--ink); grid-column: 3; padding-top: calc(var(--sky) * var(--row)); }
.roll li { position: relative; height: var(--row); }
.roll-done { --base: var(--ink); --fill: var(--ice); }
/* The gap under a name grows with it, so a tail of g, y or p (0.06em below the name's line box) clears the details. */
.roll a { display: grid; align-content: center; gap: calc(var(--name) * 0.06 + 3px); height: 100%; text-decoration: none; color: var(--base); }
/* The tight leading cuts the line box short of the tails of g, y and p (0.16em below the baseline in Geist), and the
   hover fill paints only inside the box. Padding, taken back by margins, stretches the box over every glyph without
   moving anything. */
.roll-name { padding: 0.15em 0 0.1em; margin: -0.15em 0 -0.1em; font-size: var(--name); font-weight: 560; line-height: 0.92; letter-spacing: -0.055em; white-space: nowrap; }
.roll-meta { display: flex; flex-wrap: wrap; gap: 0 18px; padding-left: 0.04em; font-size: clamp(0.8125rem, 1.05vw, 1.0625rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.005em; color: var(--quiet); transition: transform 0.35s var(--ease-out), color 0.2s ease; }
.roll-done .roll-meta { color: var(--ink); }
.roll a:focus-visible { outline-offset: 4px; }

/* A leader from the row to its true height on the ruler, and the square that marks that height. */
.roll-ldr { position: absolute; right: 100%; top: 50%; width: var(--gut); height: max(1px, calc(var(--h) * var(--row))); pointer-events: none; }
.roll-ldr-up { transform: translateY(-100%); }
.roll-ldr svg { display: block; width: 100%; height: 100%; overflow: visible; }
.roll-ldr path { fill: none; stroke: var(--hair); stroke-width: 1px; transition: stroke 0.2s ease; }
.roll-done .roll-ldr path { stroke: var(--stone); }
.roll-alt .roll-ldr path { stroke-dasharray: 3 3; }
.roll-mk { position: absolute; right: calc(100% + var(--gut)); top: calc(50% + var(--dy) * var(--row)); z-index: 1; width: 9px; height: 9px; transform: translate(50%, -50%); background: var(--paper); border: 1px solid var(--ink); transition: background-color 0.2s ease, transform 0.35s var(--ease-out); pointer-events: none; }
.roll-done .roll-mk { background: var(--ink); }
@media (max-width: 759px) {
  .roll-meta { font-size: 0.8125rem; }
}
/* The home list (.alt-side) from 760px: the details stand in a 15rem column on the right of each row, a line each,
   as in the first version, and the names are set smaller: as large as fits beside that column, at most 8vw
   (9.25rem). Rows no longer carry the details under the name, so they close up to the name plus 8px. The name's
   padded box then reaches into the rows beside it, so only the link, which is exactly its row, takes the pointer. */
@media (min-width: 760px) {
  .alt-side :is(.ruler, .roll, .peek) { --name: min(calc((100cqw - var(--rw) - var(--gut) - 15rem - 32px) / var(--k)), clamp(2.75rem, 8vw, 9.25rem)); --row: calc(var(--name) + 8px); }
  .alt-side .roll a { grid-template-columns: minmax(0, 1fr) 15rem; align-items: center; column-gap: 32px; }
  .alt-side .roll-name { pointer-events: none; }
  .alt-side .roll-meta { position: relative; z-index: 3; display: grid; gap: 2px; }
}
/* The longest line of details (4,478 m, 2027, Switzerland–Italy) needs 226px at 13px; the smallest phones get 12px. */
@media (max-width: 349px) {
  .roll-meta { gap: 0 10px; font-size: 0.75rem; }
}

/* Hover, for a mouse: the name fills from its foot to its top like a rising altitude, the leader and the square on
   the ruler light up, the details step aside. */
@media (hover: hover) and (pointer: fine) {
  .roll-name { color: transparent; background: linear-gradient(to top, var(--fill) 50%, var(--base) 50%) 0 0 / 100% 200% no-repeat; -webkit-background-clip: text; background-clip: text; transition: background-position 0.6s var(--ease-out); }
  .roll a:hover .roll-name, .roll a:focus-visible .roll-name { background-position: 0 100%; }
  .roll li:hover .roll-ldr path { stroke: var(--fill); }
  .roll li:hover .roll-mk { background: var(--fill); border-color: var(--fill); transform: translate(50%, -50%) scale(1.35); }
  .roll a:hover .roll-meta { transform: translateX(6px); color: var(--fill); }
}
@media (prefers-reduced-motion: reduce) {
  .roll-name, .roll-meta, .roll-mk, .roll-ldr path, .ruler-ref-lab, .ruler-ref > i { transition: none; }
}

/* The photographs beside a name (assets/list.js, mouse only): three squares as tall as the name's capitals, standing
   on its baseline after the name and running on under the details, which stay on top. Each square holds one photo of every mountain, stacked;
   the hovered mountain's fades in on top. The squares spring from row to row on their own random times (--d, set by
   the script) with a slight overshoot, GSAP's back.out(1) sampled into linear(); one that would pass the list's
   right edge shrinks away. As taken, square, no shadow. */
.alt-side { position: relative; }
.peek { position: absolute; inset: 0; z-index: 2; font-size: var(--name); line-height: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s cubic-bezier(0.45, 0, 0.55, 1), visibility 0.2s; }
.peek-on { opacity: 1; visibility: visible; }
.peek-f { position: absolute; left: 0; top: 0; width: 0.7em; width: 1cap; aspect-ratio: 1; opacity: 0; visibility: hidden; transform: scale(0); transition: transform var(--d, 0s) cubic-bezier(0.25, 1.3, 0.5, 1), opacity 0.2s cubic-bezier(0.45, 0, 0.55, 1), visibility 0.2s; }
.peek-f { transition-timing-function: linear(0, 0.188, 0.352, 0.494, 0.616, 0.719, 0.804, 0.873, 0.928, 0.97, 1, 1.02, 1.032, 1.037, 1.036, 1.031, 1.024, 1.016, 1.008, 1.002, 1), cubic-bezier(0.45, 0, 0.55, 1), linear; }
.peek-f.on { opacity: 1; visibility: visible; }
.peek-f img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.2s cubic-bezier(0.45, 0, 0.55, 1); }
.peek-base { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
@media (prefers-reduced-motion: reduce) {
  .peek, .peek-f, .peek-f img { transition: none; }
}

/* ——— The cursor: a plus and two faint lines across the page. Difference blending keeps them visible on paper,
   on the charcoal bands and on the photographs. ——— */
.xh { position: fixed; left: 0; top: 0; z-index: 3000; opacity: 0; pointer-events: none; mix-blend-mode: difference; will-change: transform; }
.xh-on .xh { opacity: 1; }
.xh-h { width: 100vw; height: 1px; margin-top: -0.5px; background: rgb(255 255 255 / 0.16); }
.xh-v { width: 1px; height: 100vh; margin-left: -0.5px; background: rgb(255 255 255 / 0.16); }
/* Over a link the plus changes in four steps: its arms draw in (0–100ms), a 4px square stands where they meet
   (80–100ms), the square rounds to a dot (110–150ms), and the dot opens into a disc --xh-disc across (150–370ms).
   Like the rest of the cursor it is white blended by difference, so the disc inverts whatever it covers. Leaving
   plays it back: the disc closes to the dot, the dot squares and goes, and the arms draw out (0–240ms). Each state's
   transition times the move into it, so the delays sit on the side that waits. */
.xh-p { --xh-disc: 16px; }
.xh-arm, .xh-dot, .xh-disc { position: absolute; background: #fff; }
.xh-arm { transition: transform 0.14s var(--ease-out) 0.1s; }
.xh-arm-h { left: -9.5px; top: -0.75px; width: 19px; height: 1.5px; }
.xh-arm-v { left: -0.75px; top: -9.5px; width: 1.5px; height: 19px; }
.xh-dot { left: -2px; top: -2px; width: 4px; height: 4px; border-radius: 0; transform: scale(0); transition: transform 0.02s linear 0.1s, border-radius 0.03s linear 0.07s; }
.xh-disc { left: calc(var(--xh-disc) / -2); top: calc(var(--xh-disc) / -2); width: var(--xh-disc); height: var(--xh-disc); border-radius: 50%; transform: scale(0); transition: transform 0.09s cubic-bezier(0.5, 0, 0.75, 0); }
.xh-link .xh-arm { transition: transform 0.1s cubic-bezier(0.5, 0, 0.75, 0); }
.xh-link .xh-arm-h { transform: scaleX(0.1); }
.xh-link .xh-arm-v { transform: scaleY(0.1); }
.xh-link .xh-dot { border-radius: 50%; transform: scale(1); transition: transform 0.02s linear 0.08s, border-radius 0.04s linear 0.11s; }
.xh-link .xh-disc { transform: scale(1); transition: transform 0.22s var(--ease-out) 0.15s; }
.xh-link .xh-h, .xh-link .xh-v { background: rgb(255 255 255 / 0.3); }
html.xh-on, html.xh-on * { cursor: none !important; }
@media (prefers-reduced-motion: reduce) { .xh-arm, .xh-dot, .xh-disc, .xh-link :is(.xh-arm, .xh-dot, .xh-disc) { transition: none; } }

/* ——— Home: the Tour to Eight ———
   One band of pale grey (--mist) after the list, edge to edge: the pale 8,163 and the heading, the chart of the whole
   climb, the year panels under its columns, then the motto. Inside it --paper is the band's grey, so the ruler's
   panel and the figures' halos match it. */
.road { --paper: var(--mist); --rw: 80px; padding-block: clamp(56px, 7vw, 112px); background: var(--mist); }
.range-head { display: grid; gap: 8px 32px; align-items: end; }
.range-num { margin-left: -0.07em; font-size: clamp(6.5rem, 21vw, 19rem); font-weight: 200; line-height: 0.78; letter-spacing: -0.07em; color: var(--pale); }
.range-text { display: grid; gap: 14px; padding-bottom: 0.4em; }
.range-text h2 { font-size: var(--t-h2); letter-spacing: -0.045em; line-height: 0.98; }
@media (min-width: 900px) { .range-head { grid-template-columns: auto minmax(0, 1fr); } }

/* The whole climb, to scale: every summit a dot on a stem at its true height, year by year, on a scale from sea
   level, --ph tall. Figures and lines run to the airplane's 10,000 m; the plot runs on to --top thousand metres for
   the tallest names, with only ticks and dots up there. The left side follows the owner's Figma frame: a black tick
   every 200 m at the outer edge (every 100 m would crowd into a bar at this height), each figure standing on its
   line, a dotted vertical line closing the ruler. The lines cross the plot, dotted every 1,000 m, solid at
   10,000 m, with a very small dot in the middle of every 1,000 m square. Stems fade toward the ground; the walked
   one is filled, an alternative's is dashed, and the other eight-thousanders, beyond the plan, are grey. It does not
   answer the pointer; each summit links to its page. Narrower than the plot, it scrolls sideways and the ruler
   stays. */
.cc { --ph: clamp(480px, 70vh, 760px); margin-top: clamp(28px, 4vw, 56px); }
.cc-scroll { overflow-x: auto; overscroll-behavior-x: contain; padding: 40px 0 68px; }
.cc-plot { --cell: calc(var(--ph) / var(--top)); position: relative; isolation: isolate; display: grid; grid-template-columns: var(--rw) minmax(0, 1fr); min-width: 880px; height: var(--ph); }
.cc-lines { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cc-line { position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 5px); }
.cc-line-major { background: var(--stone); }
.cc-walked { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed var(--ink); }
.cc-walked > span, .cc-air { position: absolute; left: calc(var(--rw) + 12px); font-size: 0.75rem; line-height: 1; white-space: nowrap; }
.cc-walked > span { top: 6px; }
.cc-air { margin-bottom: 6px; }
.cc-ruler { position: sticky; left: 0; z-index: 2; grid-column: 1; }
.cc-ruler::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: linear-gradient(var(--stone) 0 1px, transparent 1px) 0 0 / 1px 8px repeat-y; }
.cc-ticks { position: absolute; top: 0; bottom: 0; left: 0; width: 6px; background: linear-gradient(to top, var(--ink) 0 1px, transparent 1px) 0 100% / 100% calc(var(--cell) / 5) repeat-y; }
.cc-fig { position: absolute; left: 13px; margin-bottom: 5px; font-size: 0.75rem; line-height: 1; text-shadow: 0 0 3px var(--paper), 0 0 3px var(--paper); }
.cc-field { position: relative; z-index: 1; grid-column: 2; container-type: inline-size; }
.cc-field::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle, var(--stone) 0.6px, transparent 1px) 0 100% / var(--cell) var(--cell); }
.cc-groups, .cc-items { margin: 0; padding: 0; list-style: none; }
.cc-groups, .cc-items { position: absolute; inset: 0; }
.cc-group { position: absolute; top: 0; bottom: 0; left: calc(var(--g0) * 100%); width: calc(var(--gw) * 100%); }
.cc-year { position: absolute; left: 0; top: calc(100% + 22px); font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 600; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.cc-beyond .cc-year { color: var(--stone); }
.cc-item { position: absolute; bottom: 0; left: calc(var(--x) * 100%); width: 0; height: calc(var(--y) * 100%); }
.cc-hit { position: absolute; z-index: 2; left: -16px; width: 32px; top: -12.5rem; bottom: 0; }
.cc-stem { position: absolute; left: -0.5px; top: 0; bottom: 0; width: 1px; background: linear-gradient(var(--stone), transparent 94%); pointer-events: none; }
.cc-done .cc-stem { background: var(--ink); }
.cc-alt .cc-stem { -webkit-mask: repeating-linear-gradient(#000 0 4px, transparent 4px 7px); mask: repeating-linear-gradient(#000 0 4px, transparent 4px 7px); }
.cc-ref .cc-stem { background: linear-gradient(var(--pale), transparent 80%); }
.cc-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); pointer-events: none; }
.cc-ref .cc-dot { background: var(--pale); }
.cc-lab { position: absolute; left: 0; bottom: calc(100% + 13px); writing-mode: vertical-rl; transform: translateX(-50%) rotate(180deg); font-size: 0.8125rem; font-weight: 450; line-height: 1; white-space: nowrap; pointer-events: none; }
.cc-ref .cc-lab { color: var(--quiet); }
.cc-hit:focus-visible { outline-offset: 4px; }
/* Where the plot scrolls, the ruler is a paper panel the summits slide behind, drawing its own stretch of each
   figure's line. */
@media (max-width: 959px) {
  .cc-ruler { background: var(--paper); }
  .cc-fig::after { content: ""; position: absolute; left: -13px; bottom: -5px; width: var(--rw); height: 1px; background: repeating-linear-gradient(to right, var(--rule) 0 1px, transparent 1px 5px); }
  .cc-fig-major::after { background: var(--stone); }
}
@media (max-width: 640px) {
  .road { --rw: 56px; }
  .cc-lab { font-size: 0.75rem; }
}

/* ——— Home: the register ——— */
.reg-head { display: none; }
.reg-rows > li { border-bottom: 1px solid var(--hair); }
.reg-rows > .reg-stage { display: flex; gap: 16px; align-items: baseline; padding: 26px 0 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); font-weight: 500; letter-spacing: -0.01em; }
.reg-rows > .reg-stage:first-child { padding-top: 12px; }
.reg-stage span:first-child { min-width: 2.5rem; font: var(--t-mono) / 1.6 var(--mono); color: var(--quiet); }
.reg-row { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "n name status" ". grade grade" ". me me" ". days days" ". big big" ". when when" ". gear gear"; gap: 8px 12px; padding: 20px 0; text-decoration: none; }
.reg-n { grid-area: n; font: var(--t-mono) / 2.3 var(--mono); color: var(--quiet); }
.reg-name { grid-area: name; display: grid; gap: 2px; }
.reg-title { font-size: 1.625rem; font-weight: var(--w-big); line-height: 1.1; letter-spacing: -0.035em; }
.reg-place { font-size: var(--t-small); color: var(--quiet); }
.reg-grade { grid-area: grade; } .reg-me { grid-area: me; } .reg-days { grid-area: days; } .reg-big { grid-area: big; } .reg-when { grid-area: when; } .reg-gear { grid-area: gear; }
.reg-status { grid-area: status; }
.reg-grade, .reg-me, .reg-days, .reg-big, .reg-when, .reg-gear { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: baseline; gap: 4px 12px; font-size: var(--t-small); }
.reg-gear { align-items: start; }
.cell-label { font: var(--t-mono) / 1.6 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--quiet); }
.cell-sub { display: block; color: var(--quiet); }
.lvl { display: inline-flex; align-items: center; gap: 10px; }
/* On a phone a level word too long to sit beside its squares ("Expedition" at 320px) drops below them instead of
   running off the screen. */
@media (max-width: 479px) {
  .lvl { flex-wrap: wrap; row-gap: 4px; }
}
.reg-done .reg-title { color: var(--ink); }
.gear-item { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); }
.gear-item .ic { width: 20px; height: 20px; vertical-align: 0; }
.gear-row { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.reg-gear .gear-row { gap: 6px; }
.reg-gear .gear-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 1080px) {
  .reg { display: grid; grid-template-columns: 2.25rem minmax(0, 1.9fr) minmax(0, 1.5fr) minmax(0, 1.35fr) minmax(0, 0.95fr) minmax(0, 1.25fr) minmax(0, 0.8fr) minmax(0, 1.15fr) auto; column-gap: 20px; margin-inline: -12px; }
  .reg-head, .reg-rows, .reg-rows > li, .reg-row { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; }
  .reg-head { padding: 0 12px 12px; font: var(--t-mono) / 1.2 var(--mono); letter-spacing: 0.02em; text-transform: uppercase; color: var(--quiet); }
  .reg-rows > li { margin-inline: 12px; }
  .reg-rows > .reg-stage { gap: 0; column-gap: 20px; display: grid; }
  .reg-row { grid-template-areas: "n name grade me days big when gear status"; align-items: center; margin-inline: -12px; padding: 16px 12px; }
  .reg-n { line-height: 1; }
  .reg-grade, .reg-me, .reg-days, .reg-big, .reg-when, .reg-gear { display: block; }
  .reg-grade .lvl, .reg-me .lvl { align-items: flex-start; }
  .cell-label { display: none; }
}
@media (hover: hover) and (pointer: fine) {
  .reg-row { transition: background-color 0.15s ease; }
  .reg-row:hover { background: #f4f4f2; }
}


/* Status: a square, then the word. Ink for done, ice for ready, outlined for the rest. */
.status { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-small); line-height: 1.2; white-space: nowrap; }
.status i { width: 9px; height: 9px; flex: none; border: 1px solid currentColor; }
.status-done i { background: var(--ink); }
.status-planned { color: var(--quiet); }
.status-alt i { border-style: dashed; }

/* ——— Footer ——— */
.site-foot { margin-top: var(--chapter); overflow: hidden; container-type: inline-size; }
.foot-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px; padding: 20px 0 0; border-top: 1px solid var(--ink); font-size: var(--t-small); }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.foot-links a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } }
/* Fitted like the poster title. The 0.02em under the baseline keeps the round feet of S and 8 (they dip 0.016em
   below it) from being cut by the edge of the page. */
.foot-word { margin: clamp(32px, 5vw, 72px) 0 0 calc(var(--gutter) - var(--l) * 1em); padding-bottom: 0.02em; font-size: calc((100cqw - 2 * var(--gutter)) / var(--fit)); font-weight: 560; font-variant-numeric: proportional-nums; line-height: 0.8; letter-spacing: -0.065em; color: var(--pale); white-space: nowrap; user-select: none; }
@supports (text-box: trim-both cap alphabetic) { .foot-word { text-box: trim-both cap alphabetic; } }
@supports not (text-box: trim-both cap alphabetic) { .foot-word { margin-bottom: -0.064em; } }
/* The small print under the name, from gutter to gutter: 12px grey, a hairline between its parts, the way Apple
   sets the foot of a page. Headings at the same size, in ink. */
.foot-fine { display: grid; gap: 14px; padding: 14px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--hair); font-size: 0.75rem; line-height: 1.4; color: var(--quiet); }
.foot-fine > * + * { padding-top: 14px; border-top: 1px solid var(--hair); }
.fine-sec, .fine-end { display: grid; gap: 6px; }
.fine-sec h2 { font-size: inherit; font-weight: 600; letter-spacing: 0; line-height: inherit; color: var(--ink); }
.fine-list { display: grid; gap: 4px; }
.fine-list b { font-weight: 600; color: var(--ink); }
.fine-num { counter-reset: fine; }
.fine-num li { counter-increment: fine; }
.fine-num li::before { content: counter(fine) ". "; font-variant-numeric: tabular-nums; }
.foot-fine a { color: inherit; text-decoration: underline; text-decoration-color: var(--rule); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
@media (hover: hover) and (pointer: fine) { .foot-fine a:hover { color: var(--ink); text-decoration-color: currentColor; } }

/* ——— Mountain pages: the charcoal band behind the live map ——— */
.band { background: var(--charcoal); color: var(--on-dark); }
.band-note { margin: 14px var(--gutter) 0; font-size: 0.8125rem; line-height: 1.4; color: var(--on-dark-quiet); }
@media (max-width: 640px) { .band-note { padding-inline: 6px; } }
/* The route line as the Symbols page draws it: solid where walked, dotted where schematic. */
.route { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.route-track { stroke-width: 2.5px; }
.route-plan { stroke-width: 2px; stroke-dasharray: 1 6; }

/* ——— Mountain pages: the climb, to scale ——— */
/* The route's points against the home page's ruler (.alt, .ruler and .roll above): rows of one height, highest first,
   each name as large as the longest allows. The rows are not links, so a paragraph stands in for the list's anchor. */
.climb { margin-top: var(--chapter); }
.climb .sec-head { width: min(100% - 2 * var(--gutter), var(--col)); margin-inline: auto; }
.climb .alt { margin-top: 0; }
.roll-row { display: grid; align-content: center; gap: calc(var(--name) * 0.06 + 3px); height: 100%; color: var(--base); }

/* ——— Mountain pages: how hard ——— */
/* One row across the page, mono keys over large values, as the register sets them but at display size; then the four
   axes, the verdict and the gear side by side. The figures share one size, --big: the display size, or smaller where
   the widest (--fit em, measured at build time) would not fit its column. Each column is a container, so 100cqw is
   its width. */
.hard { width: min(100% - 2 * var(--gutter), var(--col)); margin: var(--chapter) auto 0; }
.hard-row { --big: min(clamp(2.25rem, 4vw, 4rem), calc(100cqw / var(--fit, 4))); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr)); gap: 36px 40px; padding-top: 24px; border-top: 1px solid var(--ink); }
.hard-row > div { display: grid; align-content: start; gap: 12px; container-type: inline-size; }
.hard-row dt { font: var(--t-mono) / 1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--quiet); }
.hard-row dd { margin: 0; }
.hard-big { font-size: var(--big); font-weight: 500; line-height: 0.95; letter-spacing: -0.045em; font-variant-numeric: normal; white-space: nowrap; }
.hard-big span { display: block; }
.hard-sub { margin-top: -4px; font-size: var(--t-small); line-height: 1.35; color: var(--quiet); }
.hard-mark { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: var(--big); font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
/* The word sits beside its mark, on two lines if it must, and drops below it only when its longest word would not fit
   beside it ("Expedition" beside seven squares). */
.hard-mark > span { flex: 1 1 auto; width: min-content; }
.hard-mark .ic-grade { width: 30px; height: 40px; }
.hard-mark .ic-grade-wide { width: 37px; }
.hard-more { display: grid; gap: 28px 56px; margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--hair); }
.hard-verdict { max-width: 52ch; font-size: var(--t-lead); line-height: 1.35; }
.hard-verdict a { text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.haz { display: grid; gap: 9px; align-content: start; }
.haz li { display: flex; align-items: center; gap: 14px; font: var(--t-mono) / 1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; }
.gear-list { display: flex; flex-wrap: wrap; align-content: start; gap: 8px 18px; }
@media (min-width: 900px) { .hard-more { grid-template-columns: auto minmax(0, 1.2fr) minmax(0, 1fr); } }

/* ——— The ground: the live map on its band ——— */
/* The live map across the whole screen, edge to edge; the credits keep to the gutter. */
.band-live { margin-top: var(--chapter); padding: 0 0 clamp(24px, 3vw, 40px); }
.lmap { height: clamp(420px, 78vh, 860px); background: var(--map); isolation: isolate; }
.lmap .tiles { filter: grayscale(1) contrast(1.02); }
.lmap .tiles-topo { filter: grayscale(1) contrast(1.12) brightness(1.06); }
.lmap .tiles-aerial { filter: url(#ice) contrast(1.05); }
/* On the aerial view the track and the grid are drawn in white, which reads on the blue. */
.lmap[data-base="aerial"] .leaflet-overlay-pane path { stroke: #fff; }
.lmap.leaflet-container { font-family: var(--sans); }
.lmap.leaflet-container:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.lmap.leaflet-container:focus:not(:focus-visible) { outline: none; }
.map-switch, .map-zoom { position: absolute; z-index: 900; top: 12px; display: flex; }
.map-switch { left: max(12px, env(safe-area-inset-left, 0px)); }
.map-zoom { right: max(12px, env(safe-area-inset-right, 0px)); }
.map-switch button, .map-zoom button { height: 34px; padding: 0 14px; border: 0; border-radius: 0; background: var(--paper); color: var(--quiet); font-size: var(--t-small); line-height: 1; cursor: pointer; }
.map-switch button + button, .map-zoom button + button { border-left: 1px solid var(--hair); }
.map-switch button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.map-zoom button { width: 34px; padding: 0; color: var(--ink); font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .map-switch button:not([aria-pressed="true"]):hover, .map-zoom button:hover { color: var(--ink); background: #f0f0ee; } }
.map-switch button:focus-visible, .map-zoom button:focus-visible { position: relative; z-index: 1; outline-offset: -2px; }
.map-scale { position: absolute; z-index: 900; left: max(12px, env(safe-area-inset-left, 0px)); bottom: 12px; min-width: 2rem; height: 0.6rem; padding-top: 0.75rem; box-sizing: content-box; border: 1px solid var(--ink); border-top: 0; background: linear-gradient(var(--paper), var(--paper)) padding-box; font: 10px / 1 var(--mono); text-indent: 0.25rem; color: var(--ink); }
.map-scale::before { content: ""; position: absolute; left: -1px; right: -1px; top: 0; height: 0.6rem; border-left: 1px solid var(--ink); border-right: 1px solid var(--ink); }

/* Markers on the live map */
.pin { pointer-events: none; }
.pin-mark { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--ink); }
.pin-lead { position: absolute; left: 0; top: 0; width: 22px; height: 1px; background: var(--ink); transform-origin: 0 0; transform: rotate(-35deg); }
.pin-label { position: absolute; left: 20px; top: -30px; display: grid; gap: 1px; padding: 3px 6px; background: var(--paper); font: 10.5px / 1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.pin-sub, .pin-val { color: var(--quiet); }
@media (max-width: 480px) { .pin-name { max-width: 128px; white-space: normal; } }
.lmap-far :is(.pin-dot, .pin-high, .pin-peak-off) :is(.pin-label, .pin-lead) { display: none; }
.pin-o1 .pin-lead { transform: rotate(35deg); }
.pin-o1 .pin-label { top: 10px; }
.pin-o2 .pin-lead { transform: rotate(-145deg); }
.pin-o2 .pin-label { left: auto; right: 20px; top: -30px; text-align: right; }
.pin-o3 .pin-lead { transform: rotate(145deg); }
.pin-o3 .pin-label { left: auto; right: 20px; top: 10px; text-align: right; }
.pin-peak .pin-mark { left: -7px; top: -9px; width: 14px; height: 13px; background: none; fill: var(--ice); stroke: var(--ink); stroke-width: 1px; stroke-linejoin: round; }
.pin-peak-off .pin-mark { width: 0; height: 0; background: none; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--stone); left: -5px; top: -8px; }
.pin-peak-off .pin-name, .pin-dot .pin-name { color: var(--quiet); }
.pin-dot .pin-mark { width: 5px; height: 5px; left: -2.5px; top: -2.5px; border-radius: 50%; }
.pin-hut .pin-mark, .pin-camp .pin-mark { width: 10px; height: 10px; left: -5px; top: -5px; background: var(--paper); border: 1.5px solid var(--ink); }
.pin-start .pin-mark, .pin-end .pin-mark { border-radius: 50%; }

/* ——— Plan, checklist, the Olympus record ——— */
.rows { border-top: 1px solid var(--ink); }
.rows li { display: grid; gap: 6px 24px; padding: 20px 0 22px; border-bottom: 1px solid var(--hair); }
.rows-k { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.rows-v { max-width: 64ch; }
@media (min-width: 760px) { .rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: baseline; } }

/* A small mono key over a group ("What it adds"). */
.sub-k { font: var(--t-mono) / 1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--quiet); }

.days { display: grid; border-top: 1px solid var(--ink); }
.day { display: grid; gap: 8px; align-content: start; padding: 24px 0 32px; border-bottom: 1px solid var(--hair); }
.day-n { font-size: clamp(2.75rem, 5vw, 4.5rem); font-weight: 560; line-height: 0.9; letter-spacing: -0.055em; }
.day-date, .day-route { font-size: var(--t-small); color: var(--quiet); }
.day-title { margin-top: 12px; font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.day-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair); }
.day-stats dt { font: var(--t-mono) / 1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--quiet); }
.day-stats dd { margin: 2px 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; white-space: nowrap; }
.day-stats dd i { margin-left: 3px; font-style: normal; font-size: 0.75rem; font-weight: 400; letter-spacing: 0; color: var(--quiet); }
.day-effort { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: var(--t-mono) / 1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; }
.day-note { margin-top: 4px; max-width: 46ch; font-size: var(--t-small); color: var(--quiet); }
@media (min-width: 1000px) {
  .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .day { padding: 28px 28px 32px; border-bottom: 0; }
  .day:first-child { padding-left: 0; }
  .day + .day { border-left: 1px solid var(--hair); }
}

/* Previous and next: the next name as large as the list on the home page. */
.pager { display: grid; gap: 20px; padding-top: 24px; border-top: 1px solid var(--ink); }
.pager-prev { display: inline-flex; align-items: center; gap: 10px; justify-self: start; font-size: var(--t-small); text-decoration: none; }
.pager-prev .ic { width: 16px; height: 16px; vertical-align: 0; }
.pager-next { display: grid; gap: 6px; text-decoration: none; color: var(--stone); }
.pager-k { font: var(--t-mono) / 1 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--quiet); }
.pager-name { font-size: var(--t-giant); font-weight: 560; line-height: 0.92; letter-spacing: -0.055em; transition: color 0.18s ease; }
@media (hover: hover) and (pointer: fine) { .pager-next:hover { color: var(--ink); } .pager-prev:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; } }

/* ——— Symbols ——— */
.sym-intro { display: grid; gap: 20px; padding-top: clamp(48px, 8vw, 120px); }
.sym-title { font-size: var(--t-giant); font-weight: 560; line-height: 0.9; letter-spacing: -0.055em; }
.sym, .symbols .register { margin-top: clamp(56px, 6vw, 96px); }
:is(.sym, .symbols .register) .sec-head h2 { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 100%), 1fr)); gap: 28px 16px; }
.sym-grid li { display: grid; gap: 8px; align-content: start; }
.sym-ic { display: grid; place-items: center; height: 104px; background: var(--map); }
.sym-ic .ic { width: 40px; height: 40px; vertical-align: 0; }
.sym-ic .ic-grade { width: 30px; }
.sym-ic .ic-grade-wide { width: 37px; }
.sym-ic .compass { width: 64px; }
.sym-ic .north { width: 22px; height: auto; stroke-width: 1.5px; }
.sym-ic .status { font-size: 1rem; }
.sym-ic .bars-5, .sym-ic .bars-4 { transform: scale(1.4); }
.sym-name { font-weight: 500; }
.sym-line { font-size: var(--t-small); color: var(--quiet); }
.sym-sum, .sym-pt { position: relative; width: 0; height: 0; }
.sym-sum i { position: absolute; left: -10px; top: -9px; width: 20px; height: 17px; background: var(--ink); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.sym-pt i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; background: var(--ink); }
.sym-pt.pl-hut i { background: var(--paper); border: 1.5px solid var(--ink); }
.sym-pt.pl-lift i { left: -5px; top: -5px; width: 10px; height: 10px; }
.sym-pt.pl-start i { border-radius: 50%; }
.sym-pt.pl-dot i { left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; }
.sym-line-ic { width: 80px; height: 40px; overflow: visible; }

/* Touch screens: every control at least 44px. */
@media (pointer: coarse) {
  .map-switch button, .map-zoom button { height: 44px; }
  .map-zoom button { width: 44px; }
  .nav a, .foot-links a, .brand, .pager-prev { min-height: 44px; }
  .foot-links a { display: inline-flex; align-items: center; }
  /* The tour's mountain links reach 44px into the gaps around them, without moving anything. */
  a.st-peak { padding-block: 10px; margin-block: -10px; }
}


/* The year panels: stacked on a phone, two across on a tablet; from 1200px each stands exactly under its column of
   the chart (--cols, the columns' widths from the build), and hairlines divide the panels (not the chart); the
   chart's own year labels give way to the panels' years. */
.stages { display: grid; border-top: 1px solid var(--ink); }
.st { display: grid; gap: 10px; align-content: start; padding: 24px 0 32px; border-bottom: 1px solid var(--hair); }
.st-year { font-size: var(--t-display); font-weight: 560; line-height: 0.9; letter-spacing: -0.055em; color: var(--stone); }
.st-done .st-year { color: var(--ink); }
.st-name { font-size: 1.375rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; }
.st-line { max-width: 42ch; font-size: var(--t-small); color: var(--quiet); }
.st-peaks { display: grid; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--hair); }
.st-peaks li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; }
.st-peak { font-weight: 500; letter-spacing: -0.01em; text-decoration: none; }
a.st-peak { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.st-beyond .st-peak { font-weight: 400; color: var(--quiet); }
.st-h { font: var(--t-mono) / 1 var(--mono); color: var(--quiet); white-space: nowrap; }
.st-alt { grid-column: 1 / -1; font-size: 0.8125rem; line-height: 1.35; color: var(--quiet); }
.st-key { display: grid; gap: 4px; margin-top: 10px; font-size: var(--t-small); }
.st-key span { font: var(--t-mono) / 1.3 var(--mono); letter-spacing: 0.03em; text-transform: uppercase; color: var(--quiet); }
@media (hover: hover) and (pointer: fine) { a.st-peak:hover { text-decoration: underline; } }
@media (min-width: 640px) and (max-width: 1199px) {
  .stages { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (min-width: 1200px) {
  .cc-scroll { padding-bottom: 0; }
  .cc-year { display: none; }
  .stages { grid-template-columns: var(--cols); margin-left: var(--rw); }
  .st { gap: 8px; padding: 22px 14px 8px; border-bottom: 0; }
  .st + .st { border-left: 1px solid var(--hair); }
  .st-year { font-size: clamp(2.25rem, 3.4vw, 4.5rem); }
  .st-name { font-size: 1.0625rem; }
  .st-line, .st-key { font-size: 0.8125rem; line-height: 1.4; }
  .st-peaks { gap: 8px; font-size: 0.875rem; }
}
.principle { margin-top: clamp(48px, 6vw, 88px); }
.principle-motto { max-width: 18ch; font-size: var(--t-h2); font-weight: 540; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }

/* ——— Mountain pages: why it is in the plan ——— */
/* Set like the principle of the tour on the home page: the goals on the left, and on the right the six things a
   stage can add, with a filled square where this mountain adds it and an open one where it does not. The right
   column lines up with the lede above it. */
.why-body { display: grid; gap: 36px 24px; padding-top: 24px; border-top: 1px solid var(--ink); }
.why-list { display: grid; gap: 12px; align-content: start; max-width: 46ch; }
.why-list li { position: relative; padding-left: 26px; font-size: var(--t-lead); line-height: 1.35; }
.why-list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 9px; height: 9px; background: var(--ink); }
.why-adds .sub-k { margin-bottom: 14px; }
.adds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; max-width: 34rem; color: var(--quiet); }
.adds li { display: flex; gap: 11px; }
.adds i { flex: none; width: 9px; height: 9px; margin-top: 0.45em; border: 1px solid currentColor; }
.adds .on { color: var(--ink); }
.adds .on i { background: var(--ink); border-color: var(--ink); }
@media (min-width: 900px) { .why-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sym-adds .bars { transform: scale(1.4); }

/* ——— Mountain pages: the photo hero ——— */
/* The mountain's photograph across the whole screen, as taken, darkening to black at the foot. At the lower left
   the name and, on the line below, the height, at one size for both: --size, or smaller for a name that would not
   fit one line (--fit is the wider line's width in em, from Geist's glyph widths). Under them the route drawn in
   white at the right, north up and true to its scale bar; the range and coordinates at the left, under the name. */
.hero { container-type: inline-size; }
.hero-photo { --mw: min(40vw, 580px); --mh: min(30vh, 300px); position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 3.2vh, 36px); min-height: max(100svh, 620px); padding: clamp(84px, 12vh, 132px) var(--gutter) clamp(20px, 3.4vh, 40px); overflow: hidden; background: var(--charcoal); color: var(--on-dark); isolation: isolate; }
.hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgb(0 0 0 / 0.68), rgb(0 0 0 / 0.42) 30%, rgb(0 0 0 / 0.18) 56%, rgb(0 0 0 / 0) 76%); }
/* A wide, faint glow behind the letters keeps the name legible where it crosses snow. */
.hero-title { --size: clamp(4.5rem, 14vw, 16rem); font-size: min(var(--size), calc((100cqw - 2 * var(--gutter)) / var(--fit))); font-weight: 560; line-height: 0.95; letter-spacing: -0.055em; white-space: nowrap; font-variant-numeric: normal; text-shadow: 0 0 0.35em rgb(0 0 0 / 0.28); }
.ht-l { display: block; margin-left: calc(var(--l) * -1em); }
@supports (text-box: trim-both cap alphabetic) { .hero-title { text-box: trim-both cap alphabetic; } }
/* As the page scrolls, the name and height stretch upward from their baseline, like the poster's name (--st, set on
   .hero-photo by assets/poster.js; 1 without script or with reduced motion). */
.hero-title { transform: scaleY(var(--st, 1)); transform-origin: 0 100%; }
.hero-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; }
/* From 641px the name stands on the details, not on the map: the name and then the details at the foot of the left
   column, the map in a column of its own at the right, standing on the same line. The name's row takes the spare
   height, so the map never pushes the name up. The name shrinks, if it must, to keep clear of the map (the map's
   width comes from its shape, --ar); the gap leaves room for labels that hang off the map's left edge. */
@media (min-width: 641px) {
  .hero-photo { --gap-x: clamp(72px, 8vw, 128px); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; column-gap: var(--gap-x); }
  .hero-title { grid-area: 1 / 1; align-self: end; font-size: min(var(--size), calc((100cqw - 2 * var(--gutter) - min(var(--mw), var(--mh) * var(--ar, 0)) - var(--gap-x)) / var(--fit))); }
  .hero-foot { display: contents; }
  .hero-info { grid-area: 2 / 1; justify-self: start; width: min(100%, 380px); }
  .hero-map { grid-area: 1 / 2 / 3 / 3; align-self: end; margin-left: 0; }
}

/* The route map: white line and marks straight on the photograph, a map's glyphs, a soft black halo. */
.hero-map { flex: none; width: min(var(--mw), var(--mh) * var(--ar)); margin-left: auto; }
.hm-draw { position: relative; aspect-ratio: var(--ar); }
.hm-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgb(0 0 0 / 0.5)); }
.hm-route { fill: none; stroke: #fff; stroke-width: 2.25px; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hm-plan { stroke-width: 2.5px; stroke-dasharray: 0.5 7; }
.hm-pt, .hm-sum { position: absolute; width: 0; height: 0; }
.hm-pt > i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; background: #fff; box-shadow: 0 0 6px rgb(0 0 0 / 0.45); }
.hm-hut > i, .hm-camp > i { background: rgb(0 0 0 / 0.3); border: 1.5px solid #fff; }
.hm-lift > i { left: -4px; top: -4px; width: 8px; height: 8px; }
.hm-start > i, .hm-end > i { border-radius: 50%; }
.hm-dot > i { left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; }
.hm-high > i { left: -7px; top: -8px; width: 14px; height: 12px; box-shadow: none; clip-path: path(evenodd, "M7 0L14 12H0Z M7 4.2L10.4 10.3H3.6Z"); }
/* Each label carries its corner from the build for three ranges: --l… on a large screen, --t… on a tablet or small
   laptop, --m… on a phone. hm-?hide leaves a label off in that range, hm-?short cuts it to its name. */
.hm-lab { position: absolute; left: 0; top: 0; display: grid; gap: 1px; justify-items: var(--la); transform: translate(var(--lx), var(--ly)); text-align: var(--la); white-space: nowrap; text-shadow: 0 0 3px rgb(0 0 0 / 0.6), 0 0 12px rgb(0 0 0 / 0.45), 0 0 26px rgb(0 0 0 / 0.35); }
.hm-lhide .hm-lab, .hm-lshort .hm-sub { display: none; }
.hm-name { font-size: 15px; font-weight: 520; line-height: 1.1; letter-spacing: -0.015em; }
.hm-town .hm-name { font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.hm-sub { font-size: 12px; line-height: 1.3; color: rgb(255 255 255 / 0.9); }
.hm-sum > i { position: absolute; left: -8px; top: -12px; width: 16px; height: 14px; background: #fff; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.hm-sum .hm-lab { font-size: clamp(18px, 1.6vw, 22px); font-weight: 500; line-height: 1.02; letter-spacing: -0.03em; }
.hm-sum-minor > i { left: -6px; top: -9px; width: 12px; height: 10px; }
.hm-sum-minor .hm-lab { font-size: 14px; }
.hm-foot { display: flex; align-items: flex-end; gap: 14px; margin-top: 16px; }
.hm-foot .north { flex: none; width: 9px; height: auto; stroke-width: 1.5px; }
.hm-scale { position: relative; flex: none; width: var(--sw); padding-top: 15px; font-size: 11px; line-height: 1; }
.hm-nums span { position: absolute; top: 0; transform: translateX(-50%); }
.hm-bar { display: flex; height: 5px; border: 1px solid #fff; }
.hm-bar i { flex: 1; }
.hm-bar i.on { background: #fff; }
.hm-unit { position: absolute; left: calc(100% + 16px); bottom: -2px; }

/* Range and coordinates, under the sheet and stage. */
.hero-info { flex: 0 1 380px; display: grid; gap: 12px; min-width: 280px; line-height: 1.2; text-shadow: 0 0 14px rgb(0 0 0 / 0.35); }
.hi-top { display: flex; justify-content: space-between; gap: 16px; font: 0.6875rem / 1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.hi-geo { display: grid; gap: 2px; font-size: clamp(1rem, 1.25vw, 1.1875rem); letter-spacing: -0.015em; }
.hi-geo div { display: flex; flex-wrap: wrap; column-gap: 0.28em; }
.hi-geo dd { margin: 0; }
.hero-cap { width: min(100% - 2 * var(--gutter), var(--col)); margin: 12px auto 0; font-size: 0.8125rem; line-height: 1.4; color: var(--quiet); }
.hero-cap a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

@media (max-width: 1279px) {
  .hm-lab { justify-items: var(--ta); transform: translate(var(--tx), var(--ty)); text-align: var(--ta); }
  .hm-lhide .hm-lab { display: grid; }
  .hm-lshort .hm-sub { display: block; }
  .hm-thide .hm-lab, .hm-tshort .hm-sub { display: none; }
}
@media (max-width: 640px) {
  .hero-photo { gap: 22px; padding-top: 84px; }
  .hero-map { --mw: 100%; --mh: 190px; }
  .hero-info { flex-basis: 100%; min-width: 0; gap: 10px; }
  .hm-lab { justify-items: var(--ma); transform: translate(var(--mx), var(--my)); text-align: var(--ma); white-space: normal; }
  .hm-lhide .hm-lab, .hm-thide .hm-lab { display: grid; }
  .hm-mhide .hm-lab, .hm-pt .hm-sub { display: none; }
  .hm-name { width: max-content; max-width: 130px; font-size: 13px; }
  .hm-town .hm-name { font-size: 15px; }
  .hm-sum .hm-lab { font-size: 17px; white-space: nowrap; }
  .hm-sum-minor .hm-lab { font-size: 13px; }
}

/* A phone turned sideways (a short landscape screen): what was set to fill a tall screen fits this one instead.
   The poster and each mountain's hero take the screen's height, with the hero's name capped by it; the live map
   stays shorter than the screen, so the page can still be scrolled past it; the chart fits the screen. Last in the
   file, so it wins over the rules it adjusts. */
@media (orientation: landscape) and (max-height: 540px) {
  .poster-photo { height: max(100svh, 320px); }
  .poster-lede { top: 76px; }
  .hero-photo { min-height: max(100svh, 320px); padding-top: 68px; gap: 14px; }
  .hero-title { --size: min(clamp(4.5rem, 14vw, 16rem), 21svh); }
  /* The route map gets more of the short height, and its labels are names only, placed as on a phone. */
  .hero-photo { --mw: 46vw; --mh: 46svh; }
  .hm-lab { justify-items: var(--ma); transform: translate(var(--mx), var(--my)); text-align: var(--ma); white-space: normal; }
  .hm-lhide .hm-lab, .hm-thide .hm-lab { display: grid; }
  .hm-mhide .hm-lab, .hm-pt .hm-sub { display: none; }
  .hm-name { width: max-content; max-width: 130px; font-size: 13px; }
  .hm-town .hm-name { font-size: 15px; }
  .hm-sum .hm-lab { font-size: 17px; white-space: nowrap; }
  .hm-sum-minor .hm-lab { font-size: 13px; }
  .lmap { height: 80svh; }
  .cc { --ph: max(320px, 86svh); }
}
@media (orientation: landscape) and (max-height: 540px) and (min-width: 641px) {
  .poster-cap { top: 76px; }
}