/* Безенги: шрифты шаблона (Archivo, Space Mono) без кириллицы. Вместо них Roboto Flex —
   те же оси ширины и веса — и JetBrains Mono; файлы лежат локально, знак ₽ — отдельным файлом. */
@font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; src: url(../fonts/roboto-flex-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; src: url(../fonts/roboto-flex-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Flex"; font-style: normal; font-weight: 100 1000; font-stretch: 25% 151%; font-display: swap; src: url(../fonts/roboto-flex-rub.woff2) format("woff2"); unicode-range: U+20BD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/jetbrains-mono-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/jetbrains-mono-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/jetbrains-mono-rub.woff2) format("woff2"); unicode-range: U+20BD; }

/* Сброс вместо Tailwind CDN: классов Tailwind в вёрстке нет, но экспорт грузил его preflight. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -.5em }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }
ol, menu { list-style: none }
button { font: inherit; letter-spacing: inherit; color: inherit }
/* ============================================================
БЕЗЕНГИ — альплагерь. Стили шаблона MASSIF; правки под лагерь —
в начале файла (шрифты) и в конце, в блоке «Правки шаблона под Безенги».

MASSIF — Alpine Guiding Bureau
Creative direction (the contract):
— Mood: pre-dawn, precise, humble, weighted
— Palette: ink #0B0E14 · glacier #F2F4F1 · expedition orange #FF4D00
— Type: Archivo (condensed black display / normal body) + Space Mono (data)
— Motion: ONE ease (expo.out), heavy Lenis, one pin (The Line)
============================================================ */
:root {
/* Palette — base, ONE accent, text */
--ink:        #0B0E14;   /* pre-dawn, blue-cast — never pure black */
--ink-2:      #07090D;   /* footer night */
--glacier:    #F2F4F1;   /* lights-on */
--white:      #FAFBFA;   /* whiteout fog */
--accent:     #FF4D00;   /* expedition orange — rope markers, bivvy tents */
--txt-dark:   #E9EDF2;   /* text on ink */
--txt-light:  #12161D;   /* text on glacier */
/* Type */
--font-sans: "Roboto Flex", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
--step-body: clamp(1rem, .95rem + .3vw, 1.125rem);
--step-display: clamp(2.6rem, 1.4rem + 5.2vw, 7rem);      /* section display */
--step-mega: clamp(4rem, 33vw, 40rem);                    /* full-bleed wordmark */
/* Motion — ONE easing personality; mirrored as EASE in main.js */
--ease: cubic-bezier(0.16, 1, 0.3, 1);   /* expo.out */
--dur: 1.1s;
--grain-opacity: 0.05;
/* Layout */
--gutter: clamp(1.25rem, 4vw, 4rem);
}
/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; scrollbar-width: none; }        /* native bar hidden — the rope rail replaces it */
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
background: var(--ink);
color: var(--txt-dark);
font-family: var(--font-sans);
font-size: var(--step-body);
line-height: 1.55;
font-weight: 420;
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; max-width: 100%; }
.visually-hidden {
position: absolute; width: 1px; height: 1px;
clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
/* type voices */
.mono { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .06em; line-height: 1.7; }
.display {
font-family: var(--font-sans);
font-stretch: 66%;                 /* Archivo condensed via width axis */
font-weight: 840;
line-height: .94;
letter-spacing: -0.005em;
text-transform: uppercase;
}
.acc { color: var(--accent); font-style: normal; }
/* sections share side padding; the slate is each section's opening rule */
section, footer { padding: clamp(4rem, 10vh, 8rem) var(--gutter); position: relative; }
.sec--dark { color: var(--txt-dark); }
.sec--light { color: var(--txt-light); }
.slate {
--rule: 1;   /* hairline draw progress; animated mode sets 0 then draws to 1 */
position: relative;
display: flex; justify-content: space-between; gap: 1rem;
padding-top: .65rem; margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
opacity: .92;
}
.slate::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: currentColor; transform: scaleX(var(--rule)); transform-origin: left;
}
.slate span:nth-child(2) { text-align: center; }
.slate span:nth-child(3) { text-align: right; }
/* ============================================================
Atmosphere: grain, cursor, HUD, loader
============================================================ */
.grain {
position: fixed; inset: 0; z-index: 9999; pointer-events: none;
opacity: var(--grain-opacity); mix-blend-mode: overlay;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* survey-reticle cursor: hairline crosshair + dot */
.cursor {
position: fixed; left: 0; top: 0; z-index: 9998; pointer-events: none;
width: 34px; height: 34px; margin: -17px 0 0 -17px;
mix-blend-mode: difference;
/* centre dot: over photography the difference-blended hairlines can wash
out, and the eye then reads the arms instead of the point. */
background: radial-gradient(circle at 50% 50%, #fff 0 1.5px, transparent 1.6px);
}
.cursor::before, .cursor::after {
content: ""; position: absolute; background: #fff;
transition: scale .35s var(--ease);
}
.cursor::before { left: 50%; top: 0; width: 1px; height: 100%; }
.cursor::after  { top: 50%; left: 0; height: 1px; width: 100%; }
/* The hover affordance scales the ARMS, never .cursor itself. The `scale`
property composes OUTSIDE the transform property — scale(s)·translate(x,y)
— so scaling the positioned element multiplies its translate too and
throws the reticle to (s·x, s·y): 30% of its distance from the screen's
top-left corner, ~200px mid-screen. The pseudos carry no translate, so
they can grow freely around their own centres. */
.cursor.is-hover::before, .cursor.is-hover::after { scale: 1.3; }
/* The reticle IS the cursor. This has to cover descendants, not just body:
any element declaring `cursor: pointer` (faq summaries, roster rows, rail
waypoints) re-summons the native cursor, and you then see two — the native
one pinned to the pointer and the reticle trailing by its lerp, which
reads as the reticle being broken. `cursor: pointer` still applies on
coarse pointers, where the reticle is hidden and the native one is right. */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
html:not(.is-static) body,
html:not(.is-static) body * { cursor: none; }
}
@media (pointer: coarse) { .cursor { display: none; } }
/* fixed altimeter HUD */
.hud {
position: fixed; right: var(--gutter); bottom: 1.1rem; z-index: 100;
mix-blend-mode: difference; color: #fff; pointer-events: none;
}
/* ------------------------------------------------------------
THE ROPE RAIL — custom scroll indicator, replaces the native bar.
A hairline rope down the right edge; one diamond per waypoint at
its true page position; accent rope "pays out" as you descend;
a marker rides it. Diamonds are clickable waypoint navigation.
Built in main.js from the sections' data-alt values.
------------------------------------------------------------ */
.rail {
position: fixed; right: 16px; top: 15vh; bottom: 15vh; width: 20px;
z-index: 95; pointer-events: none;
color: #fff; mix-blend-mode: difference;
}
.rail__line {                                    /* slack rope */
position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
translate: -50% 0; background: currentColor; opacity: .25;
}
.rail__paid {                                    /* rope paid out so far */
position: absolute; left: 50%; top: 0; width: 1px; height: 100%;
translate: -50% 0; background: var(--accent);
transform: scaleY(var(--paid, 0)); transform-origin: top center;
mix-blend-mode: normal;
}
.rail__wp {                                      /* a waypoint on the rope */
position: absolute; left: 50%; width: 20px; height: 20px;
translate: -50% -50%; pointer-events: auto; cursor: pointer;
background: none; border: 0; padding: 0;
display: grid; place-items: center;
}
.rail__wp::after {
content: ""; width: 5px; height: 5px; rotate: 45deg;
background: currentColor; opacity: .4;
transition: opacity .5s var(--ease), scale .5s var(--ease);
}
.rail__wp:hover::after,
.rail__wp:focus-visible::after { opacity: 1; scale: 1.6; }
.rail__wp.is-passed::after { opacity: .9; }
.rail__wp.is-active::after { opacity: 1; scale: 1.9; }
.rail__marker {                                  /* the climber on the rope */
position: absolute; left: 50%; top: 0; width: 9px; height: 9px;
translate: -50% -50%; rotate: 45deg;
background: var(--accent); mix-blend-mode: normal;
box-shadow: 0 0 9px 2px rgba(255,77,0,.5);
}
.rail__label {                                   /* rides beside the marker */
position: absolute; right: 24px; top: 0; translate: 0 -50%;
white-space: nowrap; color: var(--accent); mix-blend-mode: normal;
opacity: 0; transition: opacity .5s var(--ease);
}
.rail:hover .rail__label,
.rail.is-scrolling .rail__label { opacity: 1; }
@media (max-width: 700px) { .rail { display: none; } }
/* loader — altimeter initialising */
.loader {
position: fixed; inset: 0; z-index: 10000;
background: var(--ink); color: var(--txt-dark);
display: grid; place-content: center; text-align: center; gap: .9rem;
}
.loader__alt { font-size: clamp(1.6rem, 4vw, 2.6rem); }
.loader__line {
width: clamp(140px, 22vw, 280px); height: 1px; margin: 0 auto;
background: rgba(233,237,242,.25); position: relative; overflow: hidden;
}
.loader__line::after {
content: ""; position: absolute; inset: 0;
background: var(--accent); transform: scaleX(0); transform-origin: left;
animation: loadline .5s var(--ease) forwards;
}
@keyframes loadline { to { transform: scaleX(1); } }
/* ============================================================
Nav
============================================================ */
.nav {
position: fixed; inset: 0 0 auto 0; z-index: 90;
display: flex; justify-content: space-between; align-items: baseline;
padding: 1.1rem var(--gutter);
mix-blend-mode: difference; color: #fff;
transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.nav.is-retired { opacity: 0; transform: translateY(-115%); pointer-events: none; }
.nav__brand { font-family: var(--font-sans); font-stretch: 66%; font-weight: 840; letter-spacing: .02em; font-size: 1.05rem; }
.nav__links { display: flex; gap: clamp(.9rem, 2.4vw, 2.2rem); }
.nav__links a { position: relative; }
.nav__links sup { color: var(--accent); font-size: .55rem; margin-left: .15em; }
.nav__links a::after {
content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.nav__links a:hover::after { transform: scaleX(1); }
@media (max-width: 768px) { .nav__links a:not(:last-child) { display: none; } }
/* ============================================================
WP 01 — HERO
============================================================ */
.hero {
min-height: 100svh;
display: flex; flex-direction: column; justify-content: flex-end;
overflow: clip; padding-bottom: 0;
}
.hero__sky { position: absolute; inset: 0; z-index: -1; overflow: clip; background:
linear-gradient(to bottom, #04060B 0%, #0B0E14 52%, #131A28 78%, #1B2434 100%); }
.hero__photo {
position: absolute; inset: -6% 0; width: 100%; height: 112%;
object-fit: cover; object-position: center 35%;
}
/* the daylight frame sits on top of the night one and is faded up by scroll */
.hero__photo--day { opacity: 0; }
/* Starts light — the night frame is already dark and this gradient was
built for a bright one; at full strength it crushed the stars to black.
The scroll timeline deepens it as the daylight frame fades up, which is
when the white type actually needs protecting. */
.hero__shade {
position: absolute; inset: 0; opacity: .5;
background: linear-gradient(to bottom,
rgba(4,6,11,.42) 0%, rgba(11,14,20,.12) 38%,
rgba(11,14,20,.55) 68%, rgba(11,14,20,.94) 88%, #0B0E14 100%);
}
.stars {
position: absolute; inset: 0; opacity: .85;
background-size: 53% 47%;   /* tile the field for density without listing 40 stars */
background-image:
radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.8) 50%, transparent 51%),
radial-gradient(1px 1px at 34% 8%,  rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 56% 24%, rgba(255,255,255,.7) 50%, transparent 51%),
radial-gradient(1px 1px at 71% 12%, rgba(255,255,255,.5) 50%, transparent 51%),
radial-gradient(1px 1px at 84% 30%, rgba(255,255,255,.65) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 23% 38%, rgba(255,255,255,.45) 50%, transparent 51%),
radial-gradient(1px 1px at 92% 6%,  rgba(255,255,255,.75) 50%, transparent 51%),
radial-gradient(1px 1px at 44% 44%, rgba(255,255,255,.4) 50%, transparent 51%),
radial-gradient(1px 1px at 64% 52%, rgba(255,255,255,.3) 50%, transparent 51%),
radial-gradient(1.5px 1.5px at 6% 55%, rgba(255,255,255,.5) 50%, transparent 51%);
}
.ridge { position: absolute; left: 0; right: 0; bottom: 0; height: 62%; width: 100%; }
.ridge path { fill: #05070B; }
/* image wipe-reveal containers — JS scrubs clip-path + a scale settle */
.reveal-img { overflow: clip; }
.reveal-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero__copy { margin-bottom: clamp(2rem, 6vh, 4rem); max-width: 34rem; }
.hero__tag { font-size: clamp(1.35rem, 1rem + 1.6vw, 2.1rem); line-height: 1.3; font-weight: 500; margin-bottom: 2rem; }
/* masked line reveal: each .l wrapped by JS in an overflow-hidden box */
[data-lines] .l { display: block; }
.cta {
display: inline-block; padding-bottom: .5rem; position: relative;
border-bottom: 1px solid currentColor;
}
.cta span { color: var(--accent); }
.cta::after {
content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
background: var(--accent); transform: scaleX(0); transform-origin: left;
transition: transform .6s var(--ease);
}
.cta:hover::after { transform: scaleX(1); }
.hero__cue { position: absolute; right: var(--gutter); bottom: calc(var(--step-mega) * .8); opacity: .6; }
/* giant wordmark crashing the bottom edge — full-bleed masthead */
.wordmark {
font-family: var(--font-sans); font-stretch: 63%; font-weight: 900;
font-size: var(--step-mega); line-height: .72; letter-spacing: -0.01em;
text-transform: uppercase; white-space: nowrap;
margin: 0 calc(var(--gutter) * -1) -0.06em;
user-select: none;
}
/* each letter gets a clip box so it can climb out from behind the edge */
.wordmark .ltr {
display: inline-block; overflow: hidden; vertical-align: bottom;
padding-top: .06em;              /* room for the cap so the mask doesn't shave it */
margin-top: -.06em;
}
.wordmark .ltr > span { display: block; will-change: transform; }
/* ============================================================
WP 02 — BUREAU
============================================================ */
.manifesto { font-size: var(--step-display); margin-bottom: clamp(3rem, 8vh, 5rem); }
/* ------------------------------------------------------------
STICKY PITCHES — the three principles, stacked like pitches on
a route. Each band sticks in turn; the next climbs over it while
JS scales and dims the one being covered. No pin is used here —
The Line stays the page's only pinned section.
------------------------------------------------------------ */
/* All three pitches occupy ONE grid cell, so they are a true deck: the
container is as tall as the tallest card and nothing is in flow behind
the others. The stage is pinned briefly while cards 02 and 03 climb in
(main.js); a card, once placed, never moves again — which `position:
sticky` cannot guarantee, because its containing block ends at the last
card's bottom and forces the earlier cards to release and travel. */
.pitches {
display: grid;
margin-bottom: clamp(4rem, 10vh, 7rem);
}
.pitch {
grid-area: 1 / 1;                           /* the deck */
display: grid; grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 4vw, 4rem); align-items: center;
min-height: 56svh;
background: var(--ink);                     /* occludes the card beneath */
border-top: 1px solid rgba(233,237,242,.22);
padding: clamp(1.6rem, 3.5vh, 2.6rem) 0 clamp(2rem, 4vh, 3rem);
/* explicit base so GSAP interpolates brightness FROM 1 — with the
default `filter: none` it starts from 0 and the band flashes black */
filter: brightness(1);
transform-origin: 50% 0%;                   /* recede upward, like a deck */
will-change: transform, filter;
}
.pitch:nth-child(1) { z-index: 1; }
.pitch:nth-child(2) { z-index: 2; }
.pitch:nth-child(3) { z-index: 3; }
/* static + reduced-motion: no deck, just read them as three stacked bands */
.is-static .pitches { display: block; }
.is-static .pitch { min-height: 0; margin-bottom: 3rem; }
.pitch__media {
aspect-ratio: 5 / 4; overflow: clip; border-radius: 2px;
filter: saturate(.85) contrast(1.05);
}
.pitch__media img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 1.4s var(--ease);
}
.pitch:hover .pitch__media img { transform: scale(1.04); }
.pitch__label {
display: flex; justify-content: space-between; gap: 1rem;
color: var(--accent); margin-bottom: 1.1rem;
padding-bottom: .6rem; border-bottom: 1px solid rgba(233,237,242,.18);
}
.pitch__n { color: rgba(233,237,242,.45); }
.pitch__title {
font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.6rem);
margin-bottom: 1rem;
}
.pitch__text { color: rgba(233,237,242,.72); max-width: 34ch; margin-bottom: 1.2rem; }
.pitch__spec { color: rgba(233,237,242,.5); }
@media (max-width: 820px) {
.pitch { grid-template-columns: 1fr; gap: 1.2rem; }
.pitch__media { aspect-ratio: 16 / 9; }
.pitch:not(:last-child) { margin-bottom: 8vh; }
}
.stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.stat { border-top: 1px solid rgba(233,237,242,.25); padding-top: 1.1rem; }
.stat__n { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 6rem); }
.stat__unit { font-size: .5em; vertical-align: .5em; }
.stat__label { color: var(--accent); margin: .4rem 0 .5rem; }
.stat__note { color: rgba(233,237,242,.55); font-size: .9rem; max-width: 22ch; }
@media (max-width: 900px) { .stats { grid-template-columns: 1fr 1fr; } }
/* ============================================================
WP 03 — THE ROPE TEAM (sticky roster)
The names carry the section; one sticky plate swaps behind them.
Type-forward on purpose — every other section here is a photo
composition, and this is the contrast the page was missing.
============================================================ */
/* The headline is measured against its OWN column, not the viewport, so the
long line fills the width of the rule beneath it at any size. cqw keeps
that relationship fixed; a vw-based clamp would drift as the grid
proportions change. nowrap guards the masks — a line that wraps inside
its own clip box breaks the line-by-line reveal. */
.guides__col { container-type: inline-size; }
.guides__title {
font-size: 8.7cqw;      /* tuned so the long line meets the rule below it */
margin-bottom: clamp(2rem, 5vh, 3.2rem);
}
.guides__title .l { white-space: nowrap; }
.guides__col .chip { margin-top: clamp(1.5rem, 3vh, 2.2rem); display: inline-block; }
.chip--dark { border-color: rgba(233,237,242,.4); }
.chip--dark:hover { background: var(--glacier); color: var(--ink); }
.guides__grid {
display: grid; grid-template-columns: 1.3fr 1fr;
gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.roster { border-top: 1px solid rgba(233,237,242,.18); }
.guide {
position: relative;
display: grid; grid-template-columns: 3.2rem 1fr; gap: .2rem 1rem;
align-items: baseline;
padding: clamp(1.3rem, 3.2vh, 2.1rem) 0;
border-bottom: 1px solid rgba(233,237,242,.18);
opacity: .3;                                  /* the roster reads as a list; one is lit */
transition: opacity .55s var(--ease), padding-left .55s var(--ease);
}
.guide { cursor: pointer; }
.guide.is-active { opacity: 1; padding-left: 1.4rem; }
.guide:hover { opacity: .72; }
.guide.is-active:hover { opacity: 1; }
.guide::before {                                /* the marker that finds the live name */
content: ""; position: absolute; left: 0; top: 50%;
width: 7px; height: 7px; background: var(--accent);
rotate: 45deg; translate: 0 -50%; scale: 0;
transition: scale .5s var(--ease);
}
.guide.is-active::before { scale: 1; }
.guide__no { color: var(--accent); }
.guide__name {
font-size: clamp(1.6rem, 1rem + 2.4vw, 3.1rem);
text-transform: none; font-stretch: 74%; font-weight: 700;
}
.guide__role { grid-column: 2; color: rgba(233,237,242,.5); }
/* Sticky and sized in vh so the whole plate — image AND caption — always
fits the viewport, whatever the screen height. */
.guides__plate { position: sticky; top: 11vh; }
.plate__stack {
position: relative; height: 72vh; overflow: clip;
border-radius: 2px; background: #10141b;
}
.plate__img { position: absolute; inset: 0; margin: 0; opacity: 0; }
.plate__img img {
width: 100%; height: 100%; object-fit: cover; display: block;
/* was grayscale(.6) brightness(.92) — 60% desaturated read as flat next to
the full-colour plates elsewhere. The scrim below carries the caption's
legibility, so the portraits don't need to be dimmed for it. */
filter: contrast(1.06) saturate(1.06);
}
.plate__scrim {
position: absolute; inset: auto 0 0 0; height: 58%; pointer-events: none;
background: linear-gradient(to top, rgba(7,10,15,.94) 0%, rgba(7,10,15,.72) 34%, rgba(7,10,15,0) 100%);
}
/* the caption rides inside the frame, so it can never be scrolled away
from the portrait it describes */
.plate__specs {
position: absolute; inset: auto 0 0 0; display: grid;
padding: clamp(1rem, 2.2vw, 1.5rem);
}
.spec { grid-area: 1 / 1; display: grid; gap: .4rem; opacity: 0; }
.spec p { color: rgba(233,237,242,.72); }
.spec p:first-child { color: var(--accent); }
.spec__note { font-family: var(--font-sans); font-size: .95rem; letter-spacing: 0; color: rgba(233,237,242,.9); }
@media (max-width: 900px) {
.guides__grid { grid-template-columns: 1fr; }
.guides__plate { position: static; margin-bottom: 2rem; }
.plate__stack { height: 56vh; }
.guides__title { max-width: none; }
}
/* ============================================================
WP 04 — THE LINE (pinned signature)
============================================================ */
.line-sec { padding: 0; }
.line-stage { position: relative; height: 100svh; overflow: clip; }
/* the ascent's photography: stacked full-bleed stages. Each one waits off
the right edge and is slid in by the pin timeline, then stays put. */
.line-imgs { position: absolute; inset: 0; overflow: clip; background: var(--ink); }
/* each frame clips its OWN photo: the parallax pre-positions the image
left of centre and oversized, which would otherwise paint outside a
frame still waiting off-screen and show as a strip at the right edge */
.line-img { position: absolute; inset: 0; margin: 0; overflow: clip; }
.line-img img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.line-img[data-stage] { transform: translateX(100%); will-change: transform; }
/* keeps the instruments legible on the bright summit frames */
.line-scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background:
linear-gradient(to bottom, rgba(6,9,14,.62) 0%, rgba(6,9,14,.12) 26%,
rgba(6,9,14,.18) 62%, rgba(6,9,14,.78) 100%);
}
/* every instrument in the stage starts night-white; the pin timeline
tweens .line-ui to ink as day breaks (see main.js, t≈0.60) */
.line-ui { color: #F4F6F8; }
.line-slate {
position: absolute; top: 3.6rem; left: var(--gutter); right: var(--gutter);
z-index: 6; border-color: currentColor;
}
.profile { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; }
.profile__path { stroke: var(--accent); stroke-width: 2.5px; }
.wp-marker { position: absolute; z-index: 4; transform: translate(-50%, -50%); }
.wp-marker__dot {
display: block; width: 9px; height: 9px; margin: 0 auto;
background: var(--accent); rotate: 45deg;      /* survey diamond */
}
/* The label is taken out of flow so the marker's centred box is the dot
alone — the diamond then sits exactly on the route. Refuge, col and arête
caption ABOVE their dot (clear sky there); biased left so the climbing
line, which leaves each dot up-and-right, never runs through the text. */
.wp-marker__label {
position: absolute; left: 50%; bottom: calc(100% + .5rem);
transform: translateX(-68%);
white-space: nowrap;
}
.wp-marker--summit .wp-marker__dot { width: 12px; height: 12px; }
/* the summit keeps its caption below, tucked in from the right edge */
.wp-marker--summit .wp-marker__label {
bottom: auto; top: calc(100% + .5rem);
left: auto; right: 0; transform: none;
}
/* The two lines run in sequence, not together: the first is INK — read
against the pale dusk sky while the rope is still in the dark — and the
second is full glacier-white once the light has arrived. The colour
change is the same idea as the copy. */
.drift {
position: absolute; z-index: 5; white-space: nowrap;
font-size: clamp(2.4rem, 7vw, 7rem);
line-height: .9; letter-spacing: -0.015em;
will-change: filter, opacity, transform;
}
.drift--a {
top: 14%; left: 6vw;
color: #080B10;
text-shadow: 0 0 60px rgba(226,234,244,.28);   /* lifts it off the darker frames */
}
.drift--b {
top: 61%; right: 6vw;
color: var(--glacier);
text-shadow: 0 0 52px rgba(6,9,14,.6);          /* holds up over bright cloud */
}
.line-alt { position: absolute; right: var(--gutter); top: 42%; z-index: 6; text-align: right; }
.line-alt__n { font-size: clamp(1.8rem, 4vw, 3.2rem); font-weight: 700; }
.line-alt__t { opacity: .7; }
.line-ticker {
position: absolute; left: var(--gutter); right: var(--gutter); bottom: 2.6rem; z-index: 6;
display: flex; gap: clamp(1.2rem, 4vw, 3.5rem); flex-wrap: wrap;
}
.line-progress {
--rope: 0;   /* rope progress 0→1, tweened by the pin timeline */
position: absolute; left: var(--gutter); right: var(--gutter); bottom: 1.7rem; z-index: 6;
height: 1px; background: rgba(255,255,255,.28);
}
.line-progress::after {
content: ""; position: absolute; inset: 0;
background: var(--accent); transform: scaleX(var(--rope, 0)); transform-origin: left;
}
/* ============================================================
WP 05 — SUMMIT BOOK (routes)
============================================================ */
.book__head {
display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem;
margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
.book__head .display { font-size: var(--step-display); }
.chip {
padding: .55rem .9rem; border: 1px solid currentColor; border-radius: 99px;
white-space: nowrap; transition: background .45s var(--ease), color .45s var(--ease);
}
.chip:hover { background: var(--txt-light); color: var(--glacier); }
.routes { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.route { grid-column: 1 / span 7; margin-bottom: clamp(2.5rem, 7vh, 5rem); }
.route--offset { grid-column: 6 / span 7; margin-top: clamp(-2rem, -4vh, -1rem); }
.route__scene {
position: relative; aspect-ratio: 8 / 5; overflow: clip; border-radius: 2px;
background: #DFE3E0;
}
/* The plate is oversized with slack above and below, so the photo can
counter-scroll inside its frame — it holds still in space while the card
travels up over it. The slack (15% each way) is what the scrub spends;
it must exceed the tween's range or an edge would show. */
.route__scene img {
position: absolute; left: 0; width: 100%;
top: -15%; height: 130%;
object-fit: cover; will-change: transform;
}
.route__info { display: grid; grid-template-columns: auto 1fr auto; gap: .35rem 1.2rem; padding-top: 1rem; align-items: baseline; }
.route__n { color: var(--accent); }
.route__name { font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); }
.route__desc { grid-column: 2; color: rgba(18,22,29,.62); font-size: .95rem; }
.route__spec { grid-column: 3; grid-row: 1 / span 2; text-align: right; color: rgba(18,22,29,.78); }
@media (max-width: 820px) {
.route, .route--offset { grid-column: 1 / -1; margin-top: 0; }
.route__spec { grid-column: 2; grid-row: auto; text-align: left; }
}
/* ============================================================
WP 06 — DISCIPLINES
============================================================ */
/* Rows arrive in sequence and only one is lit at a time: the live row
comes to full strength with its photo in colour, the others sit back
in grayscale. That contrast is what the section was missing — the
accent now marks WHERE YOU ARE rather than only appearing on hover. */
.disc {
position: relative;
display: grid;
grid-template-columns: 5.5rem 10rem 14rem minmax(0, 1fr) auto;
gap: 1rem clamp(1.25rem, 2.6vw, 2.6rem);
align-items: center;
padding: clamp(2rem, 5vh, 3.5rem) 0;
opacity: .42;
transition: opacity .6s var(--ease);
}
.disc::after {                     /* the rule draws itself as the row lands */
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: rgba(18,22,29,.22);
transform: scaleX(var(--rule, 0)); transform-origin: left;
}
.disc:last-of-type::after { display: none; }
.disc.is-live { opacity: 1; }
.disc__no { color: rgba(18,22,29,.45); transition: color .5s var(--ease); }
.disc__no em { font-style: normal; opacity: .55; }
.disc.is-live .disc__no { color: var(--accent); }
.disc__dot {                       /* accent diamond marks the live row */
display: inline-block; width: 6px; height: 6px; margin-right: .5rem;
background: var(--accent); rotate: 45deg;
scale: 0; transition: scale .5s var(--ease);
}
.disc.is-live .disc__dot { scale: 1; }
.disc__spec { color: rgba(18,22,29,.6); }
.disc__media { aspect-ratio: 4 / 3; border-radius: 2px; }
.disc__media img {
filter: grayscale(1) contrast(1.04);
transition: filter .7s var(--ease), transform 1.2s var(--ease);
}
.disc.is-live .disc__media img { filter: grayscale(0) contrast(1.04); }
.disc:hover .disc__media img { transform: scale(1.05); }
.disc__name {
font-size: clamp(2rem, 1.2rem + 3.4vw, 4.6rem);
transition: color .45s var(--ease);
}
.disc.is-live .disc__name { color: var(--accent); }
.disc__desc { max-width: 42ch; color: rgba(18,22,29,.66); }
/* the rate and the way in — fills the right of the row and gives each
discipline somewhere to go, without duplicating the tariff board */
.disc__offer { text-align: right; white-space: nowrap; }
.disc__from { color: rgba(18,22,29,.45); margin-bottom: .3rem; }
.disc__price {
font-size: clamp(1.5rem, 1rem + 1.5vw, 2.4rem);
text-transform: none; font-stretch: 74%;
transition: color .45s var(--ease);
}
.disc.is-live .disc__price { color: var(--accent); }
.disc__unit { font-size: .68rem; opacity: .55; letter-spacing: .06em; }
.disc__link {
display: inline-block; margin-top: .7rem; padding-bottom: .3rem;
border-bottom: 1px solid rgba(18,22,29,.3);
transition: color .4s var(--ease), border-color .4s var(--ease);
}
.disc__link span { color: var(--accent); }
.disc__link:hover { color: var(--accent); border-bottom-color: var(--accent); }
@media (max-width: 1100px) {
/* the offer drops under the copy before the row gets cramped */
.disc { grid-template-columns: 5.5rem 10rem 14rem minmax(0, 1fr); }
.disc__offer { grid-column: 4; text-align: left; margin-top: .8rem; }
}
@media (max-width: 820px) {
.disc { grid-template-columns: 5rem 1fr; align-items: start; }
.disc__media { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.disc__text, .disc__offer { grid-column: 1 / -1; }
.disc__offer { text-align: left; }
}
/* ============================================================
THE VISTA — a window in the page over a viewport-fixed image.
The section is a tall spacer whose inner clip (clip-path) crops
fixed-position children: the page scrolls over a held view.
============================================================ */
/* The extra travel is the scrub budget: eight seconds of footage unrolls
across the first ~71% of it, and what remains (~80vh) is the freeze —
the last frame held still while the closing line arrives over it. */
.vista { height: 300svh; padding: 0; }
.vista__clip { position: absolute; inset: 0; clip-path: inset(0); }
.vista__img {
position: fixed; inset: 0; width: 100%; height: 100vh;
object-fit: cover;
}
.vista__shade {
position: fixed; inset: 0; height: 100vh;
background: linear-gradient(to bottom, rgba(6,8,12,.34), rgba(6,8,12,.06) 34%, rgba(6,8,12,.38) 100%);
}
.vista__cross { position: fixed; width: 22px; height: 22px; opacity: .85; }
.vista__cross::before, .vista__cross::after { content: ""; position: absolute; background: #fff; }
.vista__cross::before { left: 50%; top: 0; width: 1px; height: 100%; }
.vista__cross::after  { top: 50%; left: 0; height: 1px; width: 100%; }
.vista__label {
position: fixed; left: var(--gutter); bottom: 1.6rem;
color: #fff; opacity: .85;
}
.vista__line {
position: fixed; inset: 0; height: 100vh; display: grid; place-items: center;
color: #fff; font-size: clamp(2.4rem, 1.2rem + 5vw, 6.5rem);
pointer-events: none; text-align: center; padding: 0 var(--gutter);
}
/* beats 2 and 3 break on purpose: statement on the first line, the turn
on the second in accent — not left to where the viewport happens to wrap */
.vista__l { display: block; }
/* ============================================================
WP 07 — TARIFF
============================================================ */
.tariff__boards {
display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
gap: clamp(1.2rem, 2.5vw, 2rem); align-items: start;
}
/* Cards are full sheets now, not price chips: code, name, blurb, rate,
inclusions and the terms a real bureau would post. Deeper padding and a
terms footer pinned to the bottom give them the height to carry it. */
.board {
position: relative;
display: flex; flex-direction: column;
background: #FFFFFF; border: 1px solid rgba(18,22,29,.12); border-radius: 2px;
padding: clamp(1.6rem, 2.4vw, 2.4rem);
will-change: transform, opacity;
}
.board:nth-child(2) { margin-top: clamp(1rem, 2.5vh, 2rem); }
.board:nth-child(3) { margin-top: clamp(2rem, 5vh, 4rem); }
.board__flagtag {                       /* the one card that carries the accent */
position: absolute; top: 0; right: clamp(1.6rem, 2.4vw, 2.4rem);
translate: 0 -50%;
background: var(--accent); color: #fff;
padding: .3rem .55rem; letter-spacing: .1em;
}
.board__head { margin-bottom: 1.6rem; }
.board__code { color: var(--accent); margin-bottom: .9rem; }
.board__name {
font-size: clamp(1.5rem, 1rem + 1.6vw, 2.3rem);
text-transform: none; font-stretch: 74%; margin-bottom: .5rem;
}
.board__blurb { font-size: .95rem; color: rgba(18,22,29,.6); max-width: 30ch; }
.board__price {
font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.8rem);
text-transform: none;
}
.board__unit { font-size: .62rem; opacity: .5; letter-spacing: .08em; }
.board__per { opacity: .55; margin: .35rem 0 1.6rem; }
.board__label { color: rgba(18,22,29,.4); margin-bottom: .8rem; }
.board__list {
border-top: 1px solid rgba(18,22,29,.14);
padding-top: 1.1rem; margin-bottom: 1.6rem; display: grid; gap: .6rem;
}
.board__list li { position: relative; padding-left: 1.1rem; color: rgba(18,22,29,.78); }
.board__list li::before {               /* accent tick instead of a plain + */
content: ""; position: absolute; left: 0; top: .45em;
width: 5px; height: 5px; background: var(--accent); rotate: 45deg;
}
/* the terms row a guiding bureau actually posts — and the thing that gives
the card its extra height without padding it with filler copy */
.board__terms {
margin-top: auto; padding-top: 1.2rem;
border-top: 1px solid rgba(18,22,29,.14);
display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem;
margin-bottom: 1.8rem;
}
.board__terms dt { color: rgba(18,22,29,.4); margin-bottom: .25rem; }
.board__terms dd { margin: 0; color: rgba(18,22,29,.85); }
.board--flag { background: var(--ink); color: var(--txt-dark); border-color: transparent; }
.board--flag .board__blurb { color: rgba(233,237,242,.6); }
.board--flag .board__label { color: rgba(233,237,242,.42); }
.board--flag .board__list { border-color: rgba(233,237,242,.2); }
.board--flag .board__list li { color: rgba(233,237,242,.8); }
.board--flag .board__terms { border-color: rgba(233,237,242,.2); }
.board--flag .board__terms dt { color: rgba(233,237,242,.42); }
.board--flag .board__terms dd { color: rgba(233,237,242,.9); }
@media (max-width: 900px) {
.tariff__boards { grid-template-columns: 1fr; }
.board:nth-child(2), .board:nth-child(3) { margin-top: 0; }
}
/* ============================================================
WHITEOUT
============================================================ */
.whiteout {
min-height: 130svh; display: grid; place-items: center;
color: var(--txt-light); overflow: clip;
/* Painted, not transparent. Every other section lets the crossfading
body show through, but this one sits on the light→dark boundary: any
pixel not covered by the plate would show the body mid-transition as
grey. Tariff's exact colour, so there is no seam above it either. */
background-color: #F2F4F1;
}
.whiteout__inner { position: relative; z-index: 1; text-align: center; padding: 0 var(--gutter); }
.whiteout__tag { color: rgba(18,22,29,.45); margin-bottom: clamp(1.2rem, 3vh, 2rem); }
.whiteout__stats {
margin-top: clamp(1.8rem, 4vh, 3rem);
display: flex; justify-content: center; flex-wrap: wrap;
gap: clamp(1.5rem, 5vw, 4.5rem);
}
.whiteout__stats dt { color: rgba(18,22,29,.42); margin-bottom: .35rem; }
.whiteout__stats dd { margin: 0; color: var(--txt-light); font-size: 1.05rem; }
/* Masked, not sized: --rev is the reveal edge in percent, driven from 100
(nothing showing, pinned to the bottom edge) to 0 (full bleed) on scrub.
A mask rather than clip-path or height because the edge has to FEATHER —
a razor line across a whiteout reads as a wipe, not as weather — and
because the photograph must never squash while it grows. At rest the
same 130px falloff softens the plate into the white section above. */
.whiteout__bg {
position: absolute; inset: 0; z-index: 0;
--rev: 100;
-webkit-mask-image: linear-gradient(180deg, transparent calc(var(--rev) * 1%), #000 calc(var(--rev) * 1% + 130px));
mask-image: linear-gradient(180deg, transparent calc(var(--rev) * 1%), #000 calc(var(--rev) * 1% + 130px));
}
.whiteout__img {
/* framed on the rope team and the camp below them — a tall section keeps
only ~25% of a 21:9 plate's width, and centring drops the team off the
right edge */
width: 100%; height: 100%; object-fit: cover; object-position: 64% 60%;
display: block;
/* The plate is graded up; the veil is what keeps the centre washed. Lifting
contrast under a fixed veil buys detail at the edges — the ridgelines and
the rope team — without touching the whiteout the line sits in. */
filter: contrast(1.12) saturate(1.18);
}
/* strongest through the middle, where the line sits — the edges stay
photographic so the plate doesn't read as a flat wash */
.whiteout__veil {
position: absolute; inset: 0;
background:
radial-gradient(ellipse 66% 52% at 50% 48%,
rgba(242,244,241,.93) 0%, rgba(242,244,241,.72) 42%, rgba(242,244,241,.16) 100%),
linear-gradient(180deg, #F2F4F1 0%, rgba(242,244,241,0) 16%),
/* faint vignette under the white — sits closest to the plate, so it only
reads where the veil has thinned out at the edges */
radial-gradient(ellipse 80% 70% at 50% 50%,
rgba(20,26,34,0) 56%, rgba(20,26,34,.14) 100%);
}
/* static/reduced-motion never runs the scrub, so the plate is simply there */
.is-static .whiteout__bg { --rev: 0; }
.whiteout__line { font-size: clamp(2.2rem, 1.2rem + 4.4vw, 6rem); text-align: center; }
/* ============================================================
WP 08 — LOG
============================================================ */
.log__note { color: var(--accent); margin-bottom: 2.4rem; }
.row {
display: grid; grid-template-columns: 5rem 1fr auto minmax(14rem, auto);
gap: 1rem 2rem; align-items: baseline;
padding: 1.05rem 0; border-bottom: 1px solid rgba(233,237,242,.16);
transition: padding-left .5s var(--ease);
position: relative;
}
.row:first-of-type { border-top: 1px solid rgba(233,237,242,.16); }
.row::before {
content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
background: var(--accent); rotate: 45deg; translate: 0 -50%; scale: 0;
transition: scale .4s var(--ease);
}
.row:hover { padding-left: 1.6rem; }
.row:hover::before { scale: 1; }
/* thumbnail fan — rises on hover, staggered */
/* Big enough to actually read the route: the pair fans out of the row's dead
space and is allowed to break the row's bounds — the hovered row is lifted
above its neighbours so the photos overlay them rather than being clipped
between the rules. */
.row__thumbs {
position: absolute; right: clamp(10rem, 17vw, 17rem); top: 50%;
translate: 0 -50%; display: flex; align-items: center;
/* a real gap, not an overlap — each frame stays fully previewable. It has
to clear the tilt too: at ±2° a 290px-wide frame throws its corner out
by ~7px, so the gap must exceed that or the angles would kiss. */
gap: clamp(.9rem, 1.3vw, 1.3rem);
pointer-events: none; z-index: 6;
}
.row__thumbs img {
width: clamp(180px, 17vw, 290px); height: auto; aspect-ratio: 3 / 2;
object-fit: cover; border-radius: 2px;
box-shadow: 0 26px 70px rgba(0,0,0,.55);
opacity: 0; transform: translateY(26px) scale(.92) rotate(-4deg);
transition: opacity .55s var(--ease), transform .65s var(--ease);
}
.row__thumbs img:nth-child(2) {
transform: translateY(26px) scale(.92) rotate(3.5deg);
transition-delay: .07s;
}
.row:hover .row__thumbs img { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); }
.row:hover .row__thumbs img:nth-child(2) { transform: translateY(0) scale(1) rotate(2deg); }
/* lift the hovered row so its photos sit over the rows above and below */
.row { z-index: 1; }
.row:hover { z-index: 7; }
@media (max-width: 1100px) { .row__thumbs { display: none; } }
.row__y { opacity: .55; }
.row__r { font-size: clamp(1.2rem, .9rem + 1.6vw, 2.2rem); }
.row__g { opacity: .75; }
.row__o { text-align: right; opacity: .75; }
.row__o--ret { color: var(--accent); opacity: 1; }
@media (max-width: 760px) {
.row { grid-template-columns: 3.4rem 1fr; }
.row__g, .row__o { grid-column: 2; text-align: left; }
}
/* ============================================================
WP 09 — REGISTER
============================================================ */
/* Light section — the descent was four dark blocks in a row to the footer.
The entry block sets the quote as what it is: a line from a signed page. */
.register__grid {
display: grid; grid-template-columns: 1.25fr .95fr;
gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.register__quote {
font-size: clamp(1.6rem, 1rem + 2.6vw, 3.3rem);
text-transform: none; font-stretch: 74%; font-weight: 640;
margin: 0;
}
.register__quote .w { opacity: .13; }   /* words lift to 1 on scroll */
/* Facts under the voice — a ledger strip, not a second card. */
.register__foot {
margin-top: clamp(2rem, 3.4vw, 3.2rem);
border-top: 1px solid rgba(18,22,29,.16);
padding-top: clamp(1.2rem, 2vw, 1.7rem);
}
.register__sig {
display: flex; align-items: baseline; gap: 1rem;
flex-wrap: wrap; margin-bottom: clamp(1.1rem, 1.8vw, 1.6rem);
}
.register__siglabel { color: var(--accent); }
.register__name {
font-size: clamp(1.25rem, 1rem + 1vw, 1.8rem);
text-transform: none; font-stretch: 74%;
}
.register__meta {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .9rem clamp(1.2rem, 2.4vw, 2.4rem);
}
.register__meta > div { display: grid; gap: .3rem; }
.register__meta dt { color: rgba(18,22,29,.4); font-size: .62rem; }
.register__meta dd { margin: 0; color: rgba(18,22,29,.85); }
/* ---- Postcard ------------------------------------------------- */
.register__card { margin: 0; position: relative; }
.register__print {
background: #FFFFFF;
padding: clamp(.7rem, 1.1vw, 1rem) clamp(.7rem, 1.1vw, 1rem) 0;
box-shadow: 0 1px 2px rgba(18,22,29,.10), 0 22px 46px -18px rgba(18,22,29,.36);
transform: rotate(-2.6deg);
transition: transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1);
will-change: transform;
}
.register__photo { overflow: clip; aspect-ratio: 3 / 2; }
.register__photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
transform: scale(1.04);
transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.register__cap {
display: flex; justify-content: space-between; gap: 1rem;
padding: .85rem .1rem .95rem;
color: rgba(18,22,29,.5);
}
.register__stamp {
display: block; text-align: right;
margin-top: clamp(1.4rem, 2.2vw, 2rem);
color: var(--accent); font-size: .6rem; letter-spacing: .22em;
}
@media (hover: hover) {
.register__card:hover .register__print {
transform: rotate(0deg);
box-shadow: 0 1px 2px rgba(18,22,29,.10), 0 34px 60px -20px rgba(18,22,29,.42);
}
.register__card:hover .register__photo img { transform: scale(1); }
}
@media (max-width: 900px) {
.register__grid { grid-template-columns: 1fr; }
.register__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.register__card { order: -1; }
}
/* ============================================================
WP 10 — REPORTS
============================================================ */
/* ---- Live ropes ------------------------------------------------
Same table as the bulletin below it, one register brighter: these are
the ropes still out. Six stations — VALLEY · HUT · HIGH CAMP ·
SUMMIT PUSH · ON TOP · DOWN — so the progress track reads against the
scale printed underneath rather than as a decorative bar. */
.live__head {
display: flex; justify-content: space-between; align-items: baseline;
gap: 1rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.live__title { color: var(--accent); }
.live__count { color: rgba(233,237,242,.4); }
.live__ping { color: rgba(233,237,242,.4); display: flex; align-items: center; gap: .5rem; }
.live__dot {
width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
animation: ping 2.6s ease-in-out infinite;
}
@keyframes ping {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255,77,0,.45); }
70%      { opacity: .55; box-shadow: 0 0 0 7px rgba(255,77,0,0); }
}
.live { border-top: 1px solid rgba(233,237,242,.2); padding-top: 1.4rem; }
.live__cols,
.live__row {
display: grid;
grid-template-columns:
minmax(0, 1.35fr) 7.5rem 3rem minmax(120px, 1.15fr) 11rem 5.5rem;
gap: .5rem clamp(1rem, 2vw, 2.2rem);
align-items: center;
}
.live__cols {
color: rgba(233,237,242,.32);
padding: .7rem 0; border-bottom: 1px solid rgba(233,237,242,.14);
}
.live__row {
padding: clamp(1rem, 2.2vh, 1.35rem) 0;
border-bottom: 1px solid rgba(233,237,242,.14);
transition: padding-left .5s var(--ease), background-color .5s var(--ease);
}
.live__row:hover { padding-left: .9rem; background-color: rgba(233,237,242,.026); }
.live__route { font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); text-transform: none; font-stretch: 74%; }
.live__guide, .live__party { color: rgba(233,237,242,.55); }
.live__alt { color: rgba(233,237,242,.8); text-align: right; }
.live__note {
grid-column: 1 / -1; color: rgba(233,237,242,.5); font-size: .92rem;
margin-top: .55rem; max-width: 62ch;
}
/* the bar is read against the station scale, so ticks sit at each fifth */
.track {
--p: 0;                    /* inherited by fill + pin; JS drives this one */
position: relative; display: block; height: 3px; border-radius: 2px;
background:
repeating-linear-gradient(90deg,
rgba(233,237,242,.34) 0 1px, transparent 1px 25%),
rgba(233,237,242,.13);
}
.track__fill {
position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%);
background: var(--accent); border-radius: 2px;
}
.track__pin {
position: absolute; top: 50%; left: calc(var(--p) * 100%);
width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px;
border-radius: 50%; background: var(--accent);
box-shadow: 0 0 0 3px rgba(11,14,20,1);
}
.live__state { justify-self: start; white-space: nowrap; }
.live__state.is-push { color: rgba(233,237,242,.9); }
.live__state.is-top  { color: #fff; background: var(--accent); padding: .28rem .55rem; border-radius: 99px; }
.live__state.is-down { color: rgba(233,237,242,.62); }
.live__state.is-hold { color: var(--accent); }
/* A legend, not an axis: the track column is ~200px, and six station names
printed under it would collide long before they lined up with the ticks.
The row's STATE column already names where each rope actually is. */
.live__scale {
color: rgba(233,237,242,.26); font-size: .58rem; letter-spacing: .16em;
margin-top: 1rem;
}
.reports__label {
color: rgba(233,237,242,.6);
margin: clamp(2.6rem, 6vh, 4.2rem) 0 1rem;
}
@media (max-width: 980px) {
.live__cols { display: none; }
.live__row { grid-template-columns: minmax(0, 1fr) 6rem; row-gap: .8rem; }
.live__guide { grid-column: 1; }
.live__party { grid-column: 2; text-align: right; }
.track { grid-column: 1 / -1; }
.live__state { grid-column: 1; }
.live__alt { grid-column: 2; }
}
/* A posted bulletin rather than three cards: one scannable status column,
the note alongside. Reads like the board on the bureau wall. */
.bulletin { border-top: 1px solid rgba(233,237,242,.2); }
.bulletin__head,
.bulletin__row {
display: grid;
grid-template-columns: 6rem minmax(0, 1fr) 9rem minmax(0, 1.6fr);
gap: 1rem clamp(1rem, 2.4vw, 2.4rem);
align-items: baseline;
}
.bulletin__head {
color: rgba(233,237,242,.38);
padding: .9rem 0; border-bottom: 1px solid rgba(233,237,242,.14);
}
.bulletin__row {
padding: clamp(1rem, 2.4vh, 1.5rem) 0;
border-bottom: 1px solid rgba(233,237,242,.14);
transition: padding-left .5s var(--ease);
}
.bulletin__row:hover { padding-left: .9rem; }
.bulletin__date { color: rgba(233,237,242,.55); }
.bulletin__route { font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); text-transform: none; font-stretch: 74%; }
.bulletin__note { color: rgba(233,237,242,.66); font-size: .95rem; }
.bulletin__status {
justify-self: start; white-space: nowrap;
padding: .28rem .55rem; border: 1px solid currentColor; border-radius: 99px;
}
.bulletin__status.is-good { color: rgba(233,237,242,.75); }
.bulletin__status.is-warn { color: var(--accent); }
.bulletin__status.is-shut { color: var(--accent); background: var(--accent); color: #fff; border-color: var(--accent); }
.bulletin__foot { color: rgba(233,237,242,.38); margin-top: 1.4rem; }
@media (max-width: 860px) {
.bulletin__head { display: none; }
.bulletin__row { grid-template-columns: 5.5rem 1fr; }
.bulletin__status { grid-column: 2; }
.bulletin__note { grid-column: 1 / -1; }
}
/* ============================================================
WP 11 — REFUGE
============================================================ */
/* Full-bleed plate. The photograph runs edge to edge behind the whole
section; a horizontal scrim buys legibility on the right without
flattening the hut, and vertical fades hand off to the dark sections
above and below so the image reads as a window, not a panel. */
.refuge { overflow: clip; min-height: 100vh; display: flex; flex-direction: column; }
.refuge__bg { position: absolute; inset: 0; z-index: 0; }
.refuge__img {
width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%;
display: block; filter: brightness(1);
will-change: transform;
}
.refuge__scrim {
position: absolute; inset: 0;
background:
linear-gradient(180deg, #0B0E14 0%, rgba(11,14,20,0) 22%, rgba(11,14,20,0) 74%, #0B0E14 100%),
linear-gradient(96deg, rgba(11,14,20,.44) 0%, rgba(11,14,20,.14) 20%, rgba(11,14,20,.48) 40%, rgba(11,14,20,.66) 58%, rgba(11,14,20,.62) 100%);
}
.refuge .slate, .refuge__grid { position: relative; z-index: 1; }
.refuge__grid {
flex: 1;
display: grid; grid-template-columns: 1fr 1.06fr;
gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.refuge__side { align-self: end; padding-bottom: clamp(1rem, 4vh, 3rem); }
.refuge__place { color: rgba(233,237,242,.72); }
.refuge__place::before {
content: ""; display: block; width: 2.2rem; height: 1px;
background: var(--accent); margin-bottom: .9rem;
}
.refuge__title {
font-size: clamp(1.7rem, 1rem + 2.2vw, 3rem);
text-transform: none; font-stretch: 74%; font-weight: 700;
margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.faq details { border-bottom: 1px solid rgba(233,237,242,.16); }
.faq details:first-of-type { border-top: 1px solid rgba(233,237,242,.16); }
.faq summary {
display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
padding: 1.15rem 0; cursor: pointer; list-style: none;
font-weight: 560; font-size: 1.05rem;
transition: color .4s var(--ease);
}
.faq summary:hover { color: var(--accent); }
.faq summary::-webkit-details-marker { display: none; }
.faq__mark { color: var(--accent); transition: rotate .4s var(--ease); }
.faq details[open] .faq__mark { rotate: 45deg; }
.faq details p { padding: 0 0 1.3rem; color: rgba(233,237,242,.66); max-width: 52ch; }
/* the answer opens into reserved space (see stabiliseFaq), so it can
settle in rather than shove the section open */
.faq details[open] p { animation: faqOpen .55s var(--ease) both; }
@keyframes faqOpen {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .faq details[open] p { animation: none; } }
/* Kit reads as the note by the door, not a boxed sidebar. */
.kit { margin-top: clamp(1.8rem, 3.2vw, 2.6rem); }
.kit__title { color: var(--accent); margin-bottom: 1.1rem; }
.kit__list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .5rem clamp(1rem, 2.4vw, 2.4rem);
margin-bottom: 1.5rem; color: rgba(233,237,242,.78);
}
@media (max-width: 820px) {
.refuge { min-height: 0; }
.refuge__grid { grid-template-columns: 1fr; }
.refuge__side { align-self: start; padding-bottom: 0; }
.kit__list { grid-template-columns: 1fr; }
/* one column: the scrim has to run top-to-bottom instead of left-to-right */
.refuge__img { object-position: 26% 45%; }
.refuge__scrim {
background: linear-gradient(180deg,
rgba(11,14,20,.55) 0%, rgba(11,14,20,.28) 12%,
rgba(11,14,20,.86) 34%, #0B0E14 62%, #0B0E14 100%);
}
}
/* ============================================================
WP 12 — FOOTER
============================================================ */
.footer { padding-bottom: 0; overflow: clip; }
.footer__line { font-size: var(--step-display); margin-bottom: 1.2rem; }
.footer__mail {
display: inline-block;
font-size: clamp(1.6rem, 1rem + 3vw, 4rem);
color: transparent; -webkit-text-stroke: 1px rgba(233,237,242,.85);
transition: color .5s var(--ease);
margin-bottom: clamp(3rem, 8vh, 5rem);
}
.footer__mail:hover { color: var(--accent); -webkit-text-stroke-color: var(--accent); }
.footer__meta {
display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
color: rgba(233,237,242,.6);
margin-bottom: clamp(3rem, 8vh, 5rem);
}
.footer__tel { margin-top: 1.1rem; }
.footer__tel a { color: rgba(233,237,242,.88); transition: color .4s var(--ease); }
.footer__tel a:hover { color: var(--accent); }
.footer__tel span { color: rgba(233,237,242,.42); }
/* the index column carries the accent — the one lit path back up the page */
.footer__nav { display: grid; gap: .4rem; text-align: center; }
.footer__nav a {
color: var(--accent); position: relative;
transition: opacity .4s var(--ease);
opacity: .82;
}
.footer__nav a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
background: currentColor; transform: scaleX(0); transform-origin: left;
transition: transform .5s var(--ease);
}
.footer__nav a:hover { opacity: 1; }
.footer__nav a:hover::after { transform: scaleX(1); }
.footer__end { display: grid; justify-items: end; gap: 1.2rem; }
.footer__social { display: flex; gap: .6rem; }
.footer__social a {
display: grid; place-items: center; width: 34px; height: 34px;
border: 1px solid rgba(233,237,242,.2); border-radius: 50%;
color: rgba(233,237,242,.7);
transition: color .45s var(--ease), border-color .45s var(--ease), translate .45s var(--ease);
}
.footer__social svg { width: 14px; height: 14px; fill: currentColor; display: block; }
.footer__social a:hover {
color: var(--accent); border-color: var(--accent); translate: 0 -2px;
}
/* once the three columns wrap they are no longer columns — the centre and
right alignments read as stray indents, so everything squares left */
@media (max-width: 640px) {
.footer__meta { flex-direction: column; gap: 2.4rem; }
.footer__nav { text-align: left; justify-items: start; }
.footer__end { justify-items: start; }
.footer__wp { text-align: left; }
}
.footer__wp { text-align: right; }
.wordmark--footer { opacity: .97; }
/* ============================================================
Reduced motion + static verification mode (?static)
Both paths: everything visible, nothing animated, no pin.
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; }
.grain { display: none; }
body { cursor: auto; }
.cursor { display: none; }
}
.is-static *, .is-static *::before, .is-static *::after { animation: none !important; transition: none !important; }
.is-static .loader, .is-static .cursor, .is-static .hud, .is-static .rail { display: none; }
.is-static body, .is-static { cursor: auto; }
.is-static .line-img[data-stage] { transform: none; }   /* summit frame on top */
/* the roster is JS-lit; statically it reads as a plain list, first guide shown */
/* no scroll to break the day: show the lit frame */
.is-static .hero__photo--day { opacity: 1; }
.is-static .guide { opacity: 1; }
/* discipline rows are JS-lit too: statically they all read at full strength */
.is-static .board { opacity: 1; transform: none; }
.is-static .disc { opacity: 1; --rule: 1; }
.is-static .disc__media img { filter: grayscale(0) contrast(1.04); }
.is-static .disc__dot { scale: 1; }
.is-static .line-progress { --rope: 1; }
.is-static .reveal-img { clip-path: none !important; }
.is-static .vista__img, .is-static .vista__shade, .is-static .vista__cross,
.is-static .vista__label, .is-static .vista__line { position: absolute; }
.is-static .vista { height: 100svh; }


/* ============================================================
   Правки шаблона под «Безенги»
   ============================================================ */

/* шаблон: заставка уходит только из скрипта — если он не загрузился, страница закрыта навсегда */
.loader { animation: loaderBail .4s 6s forwards; }
@keyframes loaderBail { to { opacity: 0; visibility: hidden; } }

/* шаблон: строки заголовков сидят в масках overflow:hidden при интерлиньяже .94 —
   у кириллицы срезало кратку у Й и хвосты у Д, Ц, Щ, р, у. Маске добавлены поля. */
[data-lines] .l { padding: .16em 0 .1em; margin: -.16em 0 -.1em; }

/* шаблон: значка ◮ и стрелки ↗ нет в веб-подмножествах шрифтов — рисуем их сами */
.tri {
  display: inline-block; width: .6em; height: .6em; margin-right: .6em;
  background: currentColor; clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.arr {
  display: inline-block; width: .62em; height: .62em; margin-left: .3em;
  background: currentColor;
  clip-path: polygon(22% 0, 100% 0, 100% 78%, 82% 78%, 82% 31%, 13% 100%, 0 87%, 69% 18%, 22% 18%);
}
.cta .arr, .disc__link .arr { background: var(--accent); }

/* шаблон: подписи моноширинным 9–10 px и серые на грани контраста */
.board__unit, .disc__unit, .register__meta dt, .register__stamp { font-size: .69rem; }
.pitch__n, .pitch__spec, .guide__role, .live__note, .live__count, .live__ping,
.footer__tel span, .board--flag .board__label, .board--flag .board__terms dt { color: rgba(233,237,242,.62); }
.live__cols { color: rgba(233,237,242,.58); }
.bulletin__foot { color: rgba(233,237,242,.6); max-width: 90ch; }
.disc__from, .disc__no, .board__terms dt, .board__label, .whiteout__tag,
.whiteout__stats dt, .register__meta dt, .register__cap { color: rgba(18,22,29,.62); }
.live__scale {
  font-size: .72rem; letter-spacing: .06em; line-height: 1.8;
  color: rgba(233,237,242,.62); max-width: 96ch; margin-top: 1.3rem;
}

/* ---------- первый экран ---------- */
/* шаблон: слово подобрано под шесть латинских букв Archivo; «БЕЗЕНГИ» — семь, и Roboto Flex шире */
:root { --step-mega: clamp(4rem, 23vw, 30rem); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; }
.cta--quiet { border-bottom-color: rgba(233,237,242,.4); }
.cta--quiet .arr { background: currentColor; }
/* лагерь на ночном кадре стоит в нижней половине — поднимаем кадр, чтобы огни не ушли под слово */
.hero__photo { object-position: center 62%; }

/* ---------- лагерь ---------- */
.manifesto { margin-bottom: clamp(1.4rem, 3.5vh, 2.2rem); }
.bureau__src { color: rgba(233,237,242,.62); max-width: 74ch; margin-bottom: clamp(3rem, 8vh, 5rem); }
/* единицы у цифр: в шаблоне здесь был только знак процента, поднятый над строкой */
.stat__unit { font-size: .34em; vertical-align: baseline; margin-left: .2em; }

/* ---------- база: кадр и подпись меняет класс, а не твин ---------- */
.guides__title { font-size: 7.2cqw; }
.guide { opacity: .46; }
.guide:focus-visible { outline: 1px solid var(--accent); outline-offset: 6px; opacity: 1; }
.plate__img { transition: opacity .65s var(--ease); }
.spec { transform: translateY(10px); transition: opacity .55s var(--ease), transform .55s var(--ease); }
.plate__img.is-on { opacity: 1; }
.spec.is-on { opacity: 1; transform: none; }

/* ---------- шапка ----------
   шаблон: шапка без подложки красилась через mix-blend-mode: difference — текст секций проезжал
   прямо под логотипом и пунктами, а на фото (липкий кадр базы на телефоне) шапка серела и терялась.
   Под шапкой теперь размытие с тоном, цвет текста ставит скрипт по data-tone (main.js, «тон шапки»).
   На самом верху страницы (is-top) под шапкой ничего не проезжает — подложки нет. */
.nav {
  mix-blend-mode: normal; color: var(--txt-dark);
  transition: opacity .55s var(--ease), transform .55s var(--ease), color .4s var(--ease);
}
.nav::before {
  content: ""; position: absolute; inset: 0 0 -1rem 0; z-index: -1; pointer-events: none;
  background-color: rgba(11,14,20,.66);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  -webkit-mask-image: linear-gradient(#000 72%, transparent); mask-image: linear-gradient(#000 72%, transparent);
  transition: opacity .4s var(--ease), background-color .4s var(--ease);
}
.nav[data-tone="light"] { color: var(--txt-light); }
.nav[data-tone="light"]::before { background-color: rgba(242,244,241,.74); }
.nav.is-top::before { opacity: 0; }

/* шаблон: счётчик «05 / 12» в углу лежит поверх текста страницы; на телефоне, где текст идёт
   во всю ширину, — почти всегда. Номер раздела там и так стоит в плашке каждой секции. */
@media (max-width: 700px) { .hud { display: none; } }

/* ---------- база: подписи на кадре ----------
   шаблон: затемнение кадра слабеет кверху, а подпись в четыре-пять строк начинается высоко —
   оранжевая строка ложилась на оранжевую палатку и руку. Затемнение несёт сам блок подписи. */
.plate__specs {
  padding-top: 3.4rem;
  background: linear-gradient(to bottom, rgba(7,10,15,0) 0, rgba(7,10,15,.62) 3.2rem, rgba(7,10,15,.78) 100%);
}

/* ---------- тропа ---------- */
.line-alt__t { max-width: 17ch; margin-left: auto; }
.line-ticker { row-gap: .2rem; }
/* шаблон: линия и точки занимали всю сцену — верхняя точка упиралась в плашку секции, а её подпись
   стояла под точкой, ровно там, откуда приходит линия («3 200 М» перечёркнуто). Рамка линии
   отодвинута от плашки, подпись верхней точки стоит слева от неё. */
.line-route { position: absolute; inset: 2.5rem 0 1.5rem 0; }
.wp-marker--summit .wp-marker__label {
  top: 50%; bottom: auto; left: auto; right: calc(100% + .7rem); transform: translateY(-55%);
}
/* шаблон: подписи сцены — белым по кадру; на светлой осыпи и снегу не читались */
.wp-marker__label, .line-alt, .line-ticker {
  text-shadow: 0 0 .5rem rgba(6,9,14,.9), 0 0 2px rgba(6,9,14,.75);
}
.line-alt__t { opacity: .94; }
/* шаблон: заголовки сцены стояли на 6vw от края и к концу твина уезжали за поле — в верёвку справа,
   на телефоне в край экрана. Якорь — поле страницы, твин (main.js) приводит строку ровно к нему. */
.drift--a { left: var(--gutter); }
.drift--b { right: var(--gutter); }
@media (min-width: 701px) {
  /* справа верёвка-индикатор (36px от края): на планшете поле страницы уже неё.
     Строка опущена с 61 % до 70 %: там она целиком под линией, а не поперёк неё. */
  .drift--b { right: max(var(--gutter), 3.2rem); top: 70%; }
  .line-alt { right: max(var(--gutter), 3.2rem); }
  /* шаблон: линия прогресса сцены шла сквозь счётчик «04 / 12» в углу */
  .line-progress { right: calc(var(--gutter) + 4.6rem); }
}

/* ---------- вид: три строки цитаты в одной закреплённой рамке ---------- */
.vista__lines {
  position: fixed; inset: 0; height: 100vh; margin: 0;
  display: grid; place-items: center; pointer-events: none;
}
.vista__line {
  position: static; inset: auto; height: auto; display: block; grid-area: 1 / 1;
  font-size: clamp(2rem, 1rem + 4.2vw, 5.6rem); max-width: 22ch;
}
/* шаблон: без анимаций показывалась только первая строка из трёх. Здесь цитата встаёт столбцом. */
.is-static .vista { height: auto; min-height: 100svh; }
.is-static .vista__clip { position: relative; min-height: 100svh; }
.is-static .vista__lines {
  position: relative; height: auto; min-height: 100svh; align-content: center;
  gap: .5em; padding: 6rem var(--gutter);
}
.is-static .vista__line { position: static; grid-area: auto; font-size: clamp(1.7rem, 1rem + 2.6vw, 3.6rem); }
.is-static .vista__img, .is-static .vista__shade { height: 100%; }

/* ---------- программы ---------- */
.disc__name { font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); }

/* ---------- проживание ---------- */
.tariff__more { margin-top: clamp(2.2rem, 5vh, 3.6rem); color: rgba(18,22,29,.66); line-height: 1.9; max-width: 120ch; }

/* ---------- смены и дорога ---------- */
/* только на широком экране: ниже 980px шаблон сам складывает строку в две колонки */
@media (min-width: 981px) {
  .live__cols, .live__row {
    grid-template-columns: minmax(0, 1.5fr) 7.5rem 3rem minmax(110px, 1fr) 11.5rem 6.5rem;
  }
}
/* точка в шаблоне мигала как «прямой эфир» — здесь это просто метка */
.live__dot { animation: none; }
.fares { border-top: 1px solid rgba(233,237,242,.2); }
.fares__head, .fares__row {
  display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: .5rem clamp(1rem, 2.4vw, 2.4rem); align-items: baseline;
}
.fares__head { color: rgba(233,237,242,.58); padding: .9rem 0; border-bottom: 1px solid rgba(233,237,242,.14); }
.fares__row {
  padding: clamp(1rem, 2.4vh, 1.5rem) 0; border-bottom: 1px solid rgba(233,237,242,.14);
  transition: padding-left .5s var(--ease);
}
.fares__row:hover { padding-left: .9rem; }
.fares__route { font-size: clamp(1.1rem, .9rem + .9vw, 1.7rem); text-transform: none; font-stretch: 74%; }
.fares__p { color: rgba(233,237,242,.88); font-size: .84rem; white-space: nowrap; }
.fares__p i { display: none; font-style: normal; color: rgba(233,237,242,.58); }
@media (max-width: 980px) {
  /* без шапки таблицы числу дней нужна подпись */
  .live__party::after { content: " ДН."; }
}
@media (max-width: 860px) {
  .fares__head { display: none; }
  .fares__row { grid-template-columns: 1fr; }
  .fares__p { display: flex; justify-content: space-between; gap: 1rem; }
  .fares__p i { display: inline; }
}

/* ---------- подвал: ссылки на мессенджеры словами, а не значками ---------- */
.footer__social { flex-wrap: wrap; justify-content: flex-end; }
.footer__social a { width: auto; height: auto; padding: .5rem .85rem; border-radius: 99px; }
@media (max-width: 640px) { .footer__social { justify-content: flex-start; } }

/* ---------- узкий экран ---------- */
/* шаблон: заголовок района и кнопка стоят в одну строку — с длинным русским словом
   они шире телефона, и вся страница получает горизонтальную прокрутку */
@media (max-width: 820px) {
  .book__head { flex-direction: column; align-items: flex-start; gap: 1.4rem; }
}
@media (max-width: 900px) {
  /* шаблон: на телефоне кадр базы уезжал под список — пока листаешь пункты, его не видно,
     и четыре кадра из пяти оставались непоказанными. Кадр встаёт над списком и липнет к верху. */
  .guides__col { display: contents; }
  .guides__title { order: 0; font-size: calc((100vw - 2 * var(--gutter)) / 14.2); margin-bottom: 0; }
  .guides__plate { order: 1; position: sticky; top: 0; z-index: 3; margin-bottom: 0; }
  .roster { order: 2; }
  .guides__col .chip, .guides__grid > .chip { order: 3; justify-self: start; margin-top: 0; }
  .plate__stack { height: 46svh; }
}
@media (max-width: 768px) {
  /* текст первого экрана на телефоне ложится на огни лагеря — затемнение сразу плотнее */
  .hero__shade { opacity: .86; }
}
@media (max-width: 700px) {
  /* тропа: строки-пометки вставали в четыре ряда поверх линии */
  .line-ticker span:nth-child(1), .line-ticker span:nth-child(4) { display: none; }
  .drift { font-size: 8.6vw; }
  /* на узком экране линия сжата по ширине и идёт круто: подписи над точками, таймер на 34 % высоты
     и плашка секции оказывались прямо на ней. Рамка линии — между плашкой и нижними строками;
     подписи стоят слева от своих точек (там линии ещё нет), у первой точки слева места нет —
     её подпись под «ступенькой» справа; таймер — в правом нижнем углу, куда линия не заходит. */
  .line-route { inset: 5.4rem 0 3.4rem 0; }
  .wp-marker__label,
  .wp-marker--summit .wp-marker__label {
    left: auto; right: calc(100% + .6rem); bottom: auto; top: 50%; transform: translateY(-50%);
    white-space: normal; width: max-content; text-align: right; letter-spacing: .02em;
    max-width: calc(var(--x) * 1vw - var(--gutter) - .85rem);
  }
  .wp-marker__label .nw { white-space: nowrap; }
  .wp-marker--start .wp-marker__label {
    right: auto; left: .5rem; top: calc(2.4svh + .6rem); transform: none;
    text-align: left; max-width: none; white-space: nowrap;
  }
  .line-alt { top: 68%; }
  .line-alt__n { line-height: 1.2; }
  .line-alt__t { max-width: 25ch; }
  /* первый заголовок стоял на высоте подписи верхней точки (в виде без движения они видны вместе) */
  .drift--a { top: 22%; }
  /* хроника: пустую категорию трудности отдельной строкой не показываем */
  .row__g--none { display: none; }
  /* плашки секций: номер «04 / 12» рвался на две строки */
  .slate span:nth-child(-n+2) { white-space: nowrap; }
}
@media (max-width: 640px) {
  /* шаблон: правило .footer__wp { text-align: right } стоит после мобильного блока и перебивает его */
  .footer__wp { text-align: left; }
}
@media (max-width: 480px) {
  /* «АЛЬПИНИСТСКОЕ» при 2.6rem не помещалось в строку и срезалось маской */
  :root { --step-display: clamp(2rem, 9.4vw, 2.6rem); }
}