@charset "UTF-8";
/* briançon.fr — « Une seule montée »
 * One spectacle, the real relief in 3D, seen from a few belvederes; everything else is type on a plain ground. */

@layer reset, tokens, base, components, sections, pages, motion;

/* ============================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul, fieldset { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  fieldset { padding: 0; border: 0; min-width: 0; }
  img, svg, canvas { display: block; max-width: 100%; }
  button, input, output { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  a { color: inherit; }
  [hidden] { display: none !important; }
}

/* ============================================================ tokens */
@layer tokens {
  @font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/bricolage-grotesque-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: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/instrument-serif-italic-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: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/instrument-serif-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;
  }
  /* while the display face loads, or if it never does, a narrowed system face keeps the big titles inside the screen */
  @font-face {
    font-family: "Title Fallback";
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("Liberation Sans Bold"), local("Roboto Bold"), local("DejaVu Sans Bold");
    font-weight: 700 800;
    size-adjust: 78%;
  }

  :root {
    --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-title: "Bricolage Grotesque", "Title Fallback", ui-sans-serif, system-ui, sans-serif;
    --font-serif: "Instrument Serif", ui-serif, Georgia, Cambria, "Times New Roman", serif;

    /* one night-blue ground, two surfaces */
    --bg: oklch(0.145 0.03 266);
    --bg-2: oklch(0.18 0.034 264);
    --bg-3: oklch(0.23 0.04 262);
    --snow: oklch(0.97 0.008 250);
    --fog: oklch(0.86 0.02 255);
    --mute: oklch(0.72 0.03 256);
    --line: oklch(0.97 0.01 250 / 0.12);
    --line-strong: oklch(0.97 0.01 250 / 0.24);
    --cyan: oklch(0.86 0.11 205);
    --ok: oklch(0.84 0.19 150);
    --warn: oklch(0.88 0.15 90);

    /* one accent, the gold of the larches, whatever the season */
    --accent: oklch(0.83 0.15 78);
    --accent-ink: oklch(0.2 0.05 62);

    /* hike levels and the six elements of the activities page */
    --lv-1: oklch(0.8 0.17 150);
    --lv-2: oklch(0.76 0.13 238);
    --lv-3: oklch(0.7 0.19 28);
    --el-eau: oklch(0.8 0.12 212);
    --el-roc: oklch(0.73 0.16 48);
    --el-air: oklch(0.74 0.15 300);
    --el-neige: oklch(0.9 0.05 235);
    --el-velo: oklch(0.85 0.17 125);
    --el-decouverte: oklch(0.84 0.13 85);

    /* the real sky over Briançon, written by script.js */
    --sky-top: #0d1b4a;
    --sky-mid: #2a3a7a;
    --sky-bottom: #7a6aa0;
    --night: 0.6;
    --day: 0;
    --city: oklch(0.2 0.045 264);
    --city-top: color-mix(in oklch, oklch(0.47 0.06 252) calc(var(--day) * 100%), var(--city));

    /* five sizes, and the title */
    --t-label: 0.75rem;
    --t-small: 0.9rem;
    --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --t-lede: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
    --t-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem);
    --t-h2: clamp(2.4rem, 1.3rem + 4.2vw, 5.4rem);

    --radius: 0.75rem;
    --gutter: clamp(1rem, 5vw, 3rem);
    --hud: 0rem;
    --maxw: 72rem;
    --nav-h: 3.5rem;
    --bar-h: 0px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (min-width: 64em) {
    :root { --hud: 3.5rem; }
  }
}

/* ============================================================ base */
@layer base {
  html {
    color-scheme: dark;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-h) + 1rem);
    hanging-punctuation: first last;
  }
  body {
    min-height: 100svh;
    background: var(--bg);
    color: var(--snow);
    font-family: var(--font);
    font-size: var(--t-body);
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
  }
  ::selection { background: var(--accent); color: var(--accent-ink); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
  a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; text-decoration-color: color-mix(in oklch, currentColor 45%, transparent); transition: color 0.2s, text-decoration-color 0.2s; }
  a:hover { color: var(--accent); text-decoration-color: var(--accent); }
  em { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: 0; }
  strong { font-weight: 700; }
  sup { font-size: 0.6em; line-height: 0; }
  small { font-size: 0.4em; }
  .label { font-variant-numeric: tabular-nums; }
  .sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
  .no-js .js-only { display: none !important; }
  .js .no-js-only { display: none !important; }
}

/* ============================================================ components */
@layer components {
  .wrap { width: min(100% - 2 * var(--gutter) - 2 * var(--hud), var(--maxw)); margin-inline: auto; }

  .skip {
    position: fixed; left: 1rem; top: 1rem; z-index: 200;
    padding: 0.7rem 1.1rem; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; text-decoration: none;
    translate: 0 -250%;
  }
  .skip:focus-visible { translate: 0 0; color: var(--accent-ink); }

  .kicker {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.9rem;
    font-size: var(--t-label); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--mute);
  }
  .kicker__alt { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .kicker__alt::before { content: "▲\00a0"; }
  .kicker__n { color: var(--snow); font-variant-numeric: tabular-nums; }

  .h2 { font-size: var(--t-h2); line-height: 0.95; font-weight: 750; font-stretch: 82%; letter-spacing: -0.025em; text-wrap: balance; }
  .h2 em { font-size: 1.06em; letter-spacing: -0.01em; }
  .lede { max-width: 40rem; font-size: var(--t-lede); line-height: 1.5; color: var(--fog); text-wrap: pretty; }
  .section-head { display: grid; gap: 1.1rem; max-width: 52rem; margin-bottom: clamp(2.5rem, 6vh, 4rem); }

  /* a quote signed luuc.fr: there are two on the whole site */
  .quote blockquote p, .belvedere blockquote p {
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem);
    line-height: 1.2;
    text-wrap: balance;
  }
  :is(.quote, .belvedere) blockquote p::before { content: "«\00a0"; color: var(--accent); }
  :is(.quote, .belvedere) blockquote p::after { content: "\00a0»"; color: var(--accent); }
  :is(.quote, .belvedere) figcaption { margin-top: 0.6rem; font-size: var(--t-small); color: var(--mute); }
  :is(.quote, .belvedere) figcaption::before { content: "— "; }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.7rem 1.2rem;
    border: 1px solid transparent; border-radius: 999px;
    background: var(--accent); color: var(--accent-ink);
    font-weight: 700; font-stretch: 90%; line-height: 1.1;
    text-decoration: none;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
  }
  .btn:hover { background: color-mix(in oklch, var(--accent) 85%, white); color: var(--accent-ink); }
  .btn--ghost { background: transparent; color: var(--snow); border-color: var(--line-strong); }
  .btn--ghost:hover { background: oklch(1 0 0 / 0.06); border-color: var(--fog); color: var(--snow); }
  .btn--small { padding: 0.5rem 0.9rem; font-size: 0.86rem; }
  .btn:disabled { opacity: 0.55; cursor: progress; }

  /* a row of choices, one at a time */
  .filter-pills {
    display: inline-flex; flex-wrap: wrap; gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
  }
  .filter-pills label { position: relative; }
  .filter-pills input, .toggle input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .filter-pills label > span { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border-radius: 999px; font-size: var(--t-small); font-weight: 620; font-stretch: 90%; color: var(--fog); white-space: nowrap; transition: background-color 0.2s, color 0.2s; }
  .filter-pills label:hover > span { background: oklch(1 0 0 / 0.06); color: var(--snow); }
  .filter-pills input:checked + span { background: var(--accent); color: var(--accent-ink); }
  .filter-pills input:focus-visible + span, .toggle input:focus-visible + span { outline: 2px solid var(--snow); outline-offset: 2px; }
  /* an on/off switch */
  .toggle { position: relative; display: inline-flex; }
  .toggle span { display: flex; align-items: center; gap: 0.55rem; padding: 0.55rem 1rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--t-small); font-weight: 620; font-stretch: 90%; color: var(--fog); transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
  .toggle span::before { content: ""; width: 0.85rem; height: 0.85rem; border: 2px solid currentColor; border-radius: 0.25rem; }
  .toggle:hover span { color: var(--snow); border-color: var(--fog); }
  .toggle input:checked + span { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
  .toggle input:checked + span::before { background: currentColor; box-shadow: inset 0 0 0 2px var(--accent); }
  @media (max-width: 40em) {
    .filter-pills { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .filter-pills::-webkit-scrollbar { display: none; }
    .filter-pills label > span { padding: 0.5rem 0.8rem; font-size: 0.86rem; }
  }

  .toasts {
    position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 80;
    display: grid; gap: 0.5rem;
    width: min(26rem, calc(100vw - 2rem));
    translate: -50% 0;
    pointer-events: none;
  }
  .toast {
    padding: 0.8rem 1rem;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-3);
    font-size: var(--t-small); line-height: 1.4;
    animation: fade-up 0.35s var(--ease) both;
  }
  .toast.is-out { animation: fade-out 0.3s both; }
  .toast__title { display: block; font-weight: 750; }
}

/* ============================================================ sections */
@layer sections {
  /* ---------- the note that this is not the town hall ---------- */
  .notice {
    position: relative; z-index: 60;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 0.9rem;
    padding: 0.45rem 2.75rem;
    border-bottom: 1px solid var(--line);
    background: var(--bg);
    color: var(--mute);
    font-size: 0.8rem; line-height: 1.35; text-align: center;
  }
  .notice strong { color: var(--fog); font-weight: 650; }
  .notice a { color: var(--fog); }
  .notice__close {
    position: absolute; right: 0.5rem; top: 50%; translate: 0 -50%;
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; border-radius: 50%;
    font-size: 1.15rem; line-height: 1; color: var(--mute);
  }
  .notice__close:hover { background: oklch(1 0 0 / 0.08); color: var(--snow); }
  [data-notice="off"] .notice { display: none; }
  @media (max-width: 40em) {
    .notice { padding-inline: 1rem 2.6rem; justify-content: flex-start; text-align: left; }
    .notice__more { display: none; }
  }

  /* ---------- nav ---------- */
  .nav {
    position: sticky; top: 0; z-index: 50;
    height: var(--nav-h);
    display: flex; align-items: center; gap: 1rem;
    padding-inline: var(--gutter);
    border-bottom: 1px solid var(--line);
    background: oklch(0.145 0.03 266 / 0.84);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .brand { font-size: 1.12rem; font-weight: 750; font-stretch: 86%; letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; }
  .brand:hover { color: var(--snow); }
  .brand__c { color: var(--accent); }
  .brand__tld { color: var(--mute); font-weight: 500; }
  .nav__pages { display: none; gap: 0.2rem; margin-inline: auto; }
  .nav__pages a { padding: 0.4rem 0.85rem; border-radius: 999px; color: var(--fog); font-size: 0.92rem; font-weight: 560; text-decoration: none; }
  .nav__pages a:hover { background: oklch(1 0 0 / 0.06); color: var(--snow); }
  .nav__pages a[aria-current="page"] { color: var(--accent); }
  .nav__alt { margin-left: auto; color: var(--accent); font-size: 0.8rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .nav__menu { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-right: -0.5rem; border-radius: 50%; }
  .nav__menu:hover { background: oklch(1 0 0 / 0.08); }
  .nav__menu svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
  @media (min-width: 48em) {
    .nav__pages { display: flex; }
    .nav__alt { margin-left: 0; }
  }
  /* on a wide screen the altimeter on the right edge says the altitude */
  @media (min-width: 64em) {
    .nav__alt { display: none; }
  }

  /* ---------- the table of contents ---------- */
  .menu {
    position: fixed; inset: 0;
    width: 100%; height: 100%; max-width: none; max-height: none;
    margin: 0;
    padding: calc(env(safe-area-inset-top, 0px) + 1.5rem) var(--gutter) 2rem;
    border: 0;
    background: oklch(0.13 0.03 268 / 0.98);
    color: var(--snow);
    overflow-y: auto;
  }
  .menu__title { margin-bottom: 1rem; color: var(--accent); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .menu__list { display: grid; max-width: 40rem; }
  .menu__list a {
    display: flex; align-items: baseline; gap: 1rem;
    padding-block: 0.6rem;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.4rem, 5vw, 2.2rem); font-weight: 700; font-stretch: 80%; letter-spacing: -0.02em; line-height: 1.15;
    text-decoration: none;
  }
  .menu__list span { min-width: 5.4rem; color: var(--accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; font-variant-numeric: tabular-nums; }
  .menu__pages { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-weight: 650; }
  .menu__close {
    position: absolute; top: calc(env(safe-area-inset-top, 0px) + 0.9rem); right: var(--gutter);
    display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border: 1px solid var(--line-strong); border-radius: 50%;
    font-size: 1.6rem; line-height: 1; color: var(--fog);
  }
  .menu__close:hover { color: var(--snow); border-color: var(--fog); }

  /* ---------- altimeter: one thin line on the right edge, one figure ---------- */
  .alti {
    --ruler-h: min(40vh, 20rem);
    position: fixed; right: 1.5rem; top: 50%; z-index: 40;
    display: none;
    width: 1px; height: var(--ruler-h);
    translate: 0 -50%;
    background: var(--line-strong);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
  }
  .past-hero .alti { opacity: 1; }
  .alti__ruler { position: absolute; inset: 0; }
  .alti__tick { position: absolute; right: 0; width: 0.35rem; height: 1px; background: var(--line-strong); }
  .alti__tick--major { width: 0.7rem; background: oklch(1 0 0 / 0.4); }
  .alti__cursor {
    position: absolute; right: -0.28rem; bottom: 0;
    width: 0.56rem; height: 0.56rem; margin-bottom: -0.28rem;
    border-radius: 50%;
    background: var(--accent);
    transform: translate3d(0, calc(var(--alti, 0) * var(--ruler-h) * -1), 0);
  }
  .alti__value {
    position: absolute; right: 1.1rem; top: 50%; translate: 0 -50%;
    color: var(--accent); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
    text-shadow: 0 1px 6px oklch(0.1 0.03 265 / 0.9);
  }
  @media (min-width: 64em) {
    .alti { display: block; }
  }

  /* ---------- 3D scene, fixed behind the page, seen only where the page opens ---------- */
  .scene {
    position: fixed; top: 0; left: 0; z-index: -1;
    display: none;
    width: 100%; height: 100lvh; max-width: none;
  }
  .scene-on .scene { display: block; }
  /* the still of the view the scene opens on, over it while the relief and the real world load, then gone;
     it stays where the relief is invented (tiles out of reach) and where the scene cannot start (no WebGL2) */
  .poster {
    position: absolute; top: 0; left: 0; z-index: -1;
    display: none;
    width: 100%; height: 100lvh;
    background: var(--poster-large) 50% 50% / cover no-repeat;
    pointer-events: none;
    transition: opacity 1.2s ease, visibility 0s 1.2s;
  }
  @media (orientation: portrait) {
    .poster { background-image: var(--poster-haut); }
  }
  .has-poster .poster { display: block; }
  .scene-in:not([data-relief="procedural"]) .poster { opacity: 0; visibility: hidden; }
  .places {
    position: fixed; top: 0; left: 0; z-index: -1;
    width: 100%; height: 100lvh;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse 130% 95% at 50% 42%, transparent 60%, oklch(0.1 0.03 265 / 0.4));
  }
  .place { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.5s; }
  .places.is-on .place.is-on { opacity: 1; }
  .place::before {
    content: ""; position: absolute; left: -4px; top: -4px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px color-mix(in oklch, var(--accent) 30%, transparent);
  }
  .place::after {
    content: ""; position: absolute; left: -0.5px; bottom: 5px;
    width: 1px; height: 1.4rem;
    background: linear-gradient(oklch(1 0 0 / 0.9), oklch(1 0 0 / 0.2));
  }
  .place__card {
    position: absolute; left: 0; bottom: 1.65rem;
    translate: -50% 0;
    display: grid; justify-items: center;
    padding: 0.25rem 0.7rem 0.3rem;
    border-radius: 0.5rem;
    background: var(--accent); color: var(--accent-ink);
    line-height: 1.15; white-space: nowrap;
  }
  .place__name { font-size: 0.8rem; font-weight: 750; }
  .place__sub { font-size: 0.66rem; font-variant-numeric: tabular-nums; opacity: 0.8; }
  .place--start::before { background: var(--snow); border-radius: 2px; box-shadow: none; }
  .place--start .place__card { background: var(--bg-3); color: var(--snow); }

  /* ---------- sections: plain ground, generous space ---------- */
  .section { position: relative; padding-block: clamp(4.5rem, 11vh, 8rem); background: var(--bg); }

  /* ---------- hero ---------- */
  .hero {
    position: relative; isolation: isolate;
    min-height: calc(100svh - var(--nav-h) - var(--bar-h));
    display: grid; align-content: end;
    padding-block: 5rem clamp(4.5rem, 12vh, 7rem);
    overflow: clip;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  }
  :is(.scene-on, .has-poster) .hero { background: linear-gradient(180deg, transparent 45%, oklch(0.145 0.03 266 / 0.5) 82%, var(--bg)); }
  .hero__city, .hero__range {
    position: absolute; inset-inline: 0; bottom: -1px; z-index: -1;
    width: 100%; height: clamp(150px, 36vh, 420px); max-width: none;
    pointer-events: none;
  }
  :is(.scene-on, .has-poster) :is(.hero__city, .hero__range) { display: none; }
  .city__land, .city__shapes { fill: url(#city-grad); }
  .city__trees { fill: color-mix(in oklch, var(--city) 86%, var(--accent)); }
  .win { fill: oklch(0.88 0.13 80); opacity: calc(var(--night) * 0.9); }
  .win:nth-child(3n) { opacity: calc(var(--night) * 0.4); }
  .hero__inner { display: grid; gap: clamp(0.6rem, 1.6vh, 1.1rem); }
  .hero .kicker { color: oklch(1 0 0 / 0.8); }
  .hero__title {
    margin-block: 0.05em 0.1em;
    font-family: var(--font-title);
    font-size: clamp(3.4rem, 19vw, 19rem);
    line-height: 0.8;
    font-weight: 790; font-stretch: 84%;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 40px oklch(0.15 0.05 265 / 0.35);
  }
  .hero--hikes .hero__title { font-size: clamp(3rem, 17vw, 17rem); }
  .hero__letters { display: flex; justify-content: space-between; }
  .l { position: relative; display: inline-block; }
  .cedilla {
    position: absolute; left: 50%; top: 91%;
    width: 0.22em; height: auto; max-width: none;
    overflow: visible;
    translate: -40% 0;
    transform-origin: 55% 4%;
    transform: rotate(var(--swing, 0rad));
  }
  .cedilla path { fill: none; stroke: currentColor; stroke-width: 12; stroke-linecap: round; stroke-linejoin: round; }
  .l--c { cursor: pointer; }
  .hero__sub { max-width: 32ch; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.4rem, 1rem + 1.8vw, 2.5rem); line-height: 1.15; text-wrap: balance; text-shadow: 0 1px 16px oklch(0.15 0.05 265 / 0.6); }
  .hero__live { max-width: 44rem; color: var(--fog); font-size: var(--t-small); line-height: 1.5; text-shadow: 0 1px 10px oklch(0.15 0.05 265 / 0.8); }
  .hero__live:empty { display: none; }
  .hero__live b { color: var(--snow); }
  .hero__live a { color: var(--snow); }
  .hero__cue {
    position: absolute; right: var(--gutter); bottom: clamp(1.25rem, 4vh, 2rem);
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--fog); font-size: 0.85rem; font-weight: 600; text-decoration: none;
  }
  .hero__cue svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: nudge 2.4s var(--ease) infinite; }

  /* ---------- belvederes: the landscape alone, one line ---------- */
  .belvedere {
    position: relative;
    min-height: 88svh;
    display: grid; align-content: end;
    padding-block: 6rem clamp(3rem, 9vh, 5.5rem);
    background: linear-gradient(var(--bg), transparent 16%, transparent 66%, oklch(0.145 0.03 266 / 0.72) 90%, var(--bg));
  }
  .belvedere__line { max-width: 40rem; font-size: var(--t-lede); line-height: 1.45; text-wrap: balance; text-shadow: 0 1px 14px oklch(0.1 0.03 265 / 0.85); }
  .belvedere .kicker__alt { display: block; margin-bottom: 0.5rem; font-size: var(--t-label); letter-spacing: 0.12em; }
  /* no 3D (no WebGL, reduced motion, data saver): a band of the real sky instead */
  :is(.no-js, .no-scene) .belvedere { min-height: 0; padding-block: clamp(4rem, 12vh, 7rem); background: linear-gradient(180deg, var(--bg), var(--sky-mid) 45%, var(--sky-bottom) 72%, var(--bg)); }

  /* ---------- manifesto and figures ---------- */
  .manifesto .kicker { margin-bottom: 1.5rem; }
  .manifesto__text { max-width: 24em; font-size: clamp(1.6rem, 1rem + 2.6vw, 3.4rem); line-height: 1.14; font-weight: 600; font-stretch: 88%; letter-spacing: -0.02em; text-wrap: pretty; }
  .manifesto__text em { font-size: 1.06em; }
  .manifesto .quote { margin-top: clamp(2rem, 5vh, 3rem); }
  .figures {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem;
    margin-top: clamp(3rem, 9vh, 5.5rem); padding-top: 2rem;
    border-top: 1px solid var(--line);
  }
  @media (min-width: 56em) {
    .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .figures div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 0.6rem; }
  .figures dd { font-size: clamp(2.6rem, 1.8rem + 2.8vw, 4.6rem); line-height: 0.9; font-weight: 800; font-stretch: 78%; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
  .figures div:first-child dd { color: var(--accent); }
  .figures dd small { font-weight: 600; color: var(--mute); letter-spacing: 0; }
  .figures dt { max-width: 16rem; color: var(--fog); font-size: var(--t-small); line-height: 1.45; }

  /* ---------- the Cité: the plan, and seven stops on foot ---------- */
  .cite__grid { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
  @media (min-width: 60em) {
    .cite__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .plan { position: sticky; top: calc(var(--nav-h) + 2rem); }
  }
  .plan {
    --ink: oklch(0.37 0.07 52);
    margin: 0;
    padding: clamp(0.75rem, 2vw, 1.5rem);
    border-radius: var(--radius);
    background:
      linear-gradient(oklch(0.45 0.06 60 / 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
      linear-gradient(90deg, oklch(0.45 0.06 60 / 0.07) 1px, transparent 1px) 0 0 / 28px 28px,
      radial-gradient(ellipse at 50% 45%, oklch(0.94 0.035 85), oklch(0.85 0.05 76));
  }
  .plan figcaption { margin-top: 0.5rem; text-align: center; color: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 1rem; }
  .fort { width: 100%; height: auto; overflow: visible; }
  .fort path[pathLength] { fill: none; stroke: var(--ink); stroke-linejoin: round; stroke-linecap: round; }
  .fort__wall { stroke-width: 3.4; }
  .fort__ravelins { stroke-width: 2.2; }
  .fort__ditch { stroke-width: 1.5; opacity: 0.8; }
  .fort__glacis { stroke-width: 1; opacity: 0.6; }
  .fort__town, .fort__church { fill: oklch(0.55 0.07 60 / 0.16); stroke: oklch(0.4 0.07 55 / 0.7); stroke-width: 1; }
  .fort__grid { fill: none; stroke: oklch(0.45 0.06 60 / 0.22); stroke-dasharray: 3 7; }
  .fort__label path { fill: none; stroke: oklch(0.4 0.07 55 / 0.75); stroke-width: 1; }
  .fort__label circle { fill: var(--ink); }
  .fort__label text { fill: var(--ink); font-family: var(--font-serif); font-style: italic; font-size: 23px; }
  .fort__compass circle { fill: none; stroke: oklch(0.4 0.07 55 / 0.6); }
  .fort__compass path { fill: var(--ink); }
  .fort__compass text { fill: var(--ink); font-family: var(--font-serif); font-size: 18px; }
  .walk__title { font-size: var(--t-h3); line-height: 1.1; font-weight: 720; font-stretch: 86%; letter-spacing: -0.012em; }
  .walk__intro { margin-top: 0.5rem; color: var(--fog); }
  .stops { margin-top: 1.75rem; counter-reset: stop; }
  .stops li { position: relative; padding: 1.1rem 0 1.15rem 3rem; border-top: 1px solid var(--line); counter-increment: stop; }
  .stops li::before { content: counter(stop); position: absolute; left: 0; top: 1.05rem; color: var(--accent); font-size: 1.2rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .stops h4 { font-size: 1.12rem; font-weight: 720; line-height: 1.25; }
  .stops p { margin-top: 0.3rem; color: var(--fog); font-size: var(--t-small); }

  /* ---------- pont d'Asfeld ---------- */
  .gorge { max-width: 60rem; margin: 0 auto; }
  .gorge__svg { width: 100%; height: auto; overflow: visible; }
  .gorge__air { fill: url(#g-air); }
  .gorge__strata { fill: none; stroke: oklch(1 0 0 / 0.06); stroke-width: 1.2; }
  .gorge__houses, .gorge__fortr { fill: oklch(0.3 0.04 258); }
  .gorge__fortr { stroke: oklch(0.3 0.04 258); stroke-width: 2; }
  .gorge__spandrel { fill: oklch(0.5 0.03 70); }
  .stone { fill: oklch(0.67 0.035 75); stroke: oklch(0.42 0.03 70); stroke-width: 1; }
  .stone--key { fill: var(--accent); }
  .gorge__deck { fill: oklch(0.56 0.03 72); }
  .gorge__parapet { fill: oklch(0.5 0.03 72); }
  .gorge__waves { fill: none; stroke: oklch(0.92 0.05 210 / 0.6); stroke-width: 2; stroke-dasharray: 10 8; }
  .gorge__measure path { fill: none; stroke: var(--accent); stroke-width: 1.5; }
  .gorge__measure text { fill: var(--accent); font-family: var(--font); font-size: 24px; font-weight: 700; }
  .gorge__label { fill: var(--mute); font-family: var(--font); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
  .gorge__label--river { fill: oklch(0.95 0.04 210); font-family: var(--font-serif); font-style: italic; font-size: 19px; letter-spacing: 0.02em; text-transform: none; }
  .gorge__pebble { fill: var(--snow); stroke: var(--bg); stroke-width: 1.5; opacity: 0; }
  .is-dropping .gorge__pebble { opacity: 1; }
  .gorge__splash ellipse { fill: none; stroke: oklch(0.92 0.05 210); stroke-width: 2; opacity: 0; }
  .gorge__hud { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1.5rem; }
  .gorge__readout { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem; font-size: var(--t-small); color: var(--fog); font-variant-numeric: tabular-nums; }
  .gorge__readout output { color: var(--accent); font-weight: 700; }
  .gorge__note { flex: 1 1 100%; max-width: 40rem; color: var(--mute); font-size: 0.82rem; line-height: 1.45; }
  @media (max-width: 44em) {
    .gorge__label { font-size: 28px; }
    .gorge__label--river { font-size: 30px; }
    .gorge__measure text { font-size: 40px; }
  }

  /* ---------- history: nine dates ---------- */
  .timeline li {
    display: grid; gap: 0.35rem 2rem;
    padding-block: 1.4rem;
    border-top: 1px solid var(--line);
  }
  @media (min-width: 48em) {
    .timeline li { grid-template-columns: minmax(9rem, 14rem) minmax(0, 40rem); }
  }
  .timeline__when { color: var(--accent); font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1; font-weight: 800; font-stretch: 80%; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .timeline h3 { font-size: 1.2rem; font-weight: 720; line-height: 1.25; }
  .timeline div p { margin-top: 0.3rem; color: var(--fog); }

  /* ---------- seasons: four columns, the current one first ---------- */
  .seasons__grid { display: grid; gap: 2.25rem 2rem; }
  @media (min-width: 40em) {
    .seasons__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (min-width: 68em) {
    .seasons__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
  .season { display: grid; align-content: start; gap: 0.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .season__title { color: var(--accent); font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: clamp(2.2rem, 1.6rem + 1.6vw, 3.2rem); line-height: 0.95; }
  .season > p { color: var(--fog); }
  .season li { padding-block: 0.4rem; border-top: 1px dashed var(--line); color: var(--fog); font-size: var(--t-small); }
  .js[data-season="hiver"] [data-season-panel="hiver"],
  .js[data-season="printemps"] [data-season-panel="printemps"],
  .js[data-season="ete"] [data-season-panel="ete"],
  .js[data-season="automne"] [data-season-panel="automne"] { order: -1; border-top: 2px solid var(--accent); }
  .js[data-season="hiver"] [data-season-panel="hiver"]::before,
  .js[data-season="printemps"] [data-season-panel="printemps"]::before,
  .js[data-season="ete"] [data-season-panel="ete"]::before,
  .js[data-season="automne"] [data-season-panel="automne"]::before { content: "En ce moment"; color: var(--accent); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

  /* ---------- plan your visit ---------- */
  .visit__cols { display: grid; gap: 2.25rem 2.5rem; }
  @media (min-width: 56em) {
    .visit__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .visit__cols > div { padding-top: 1.25rem; border-top: 1px solid var(--line); }
  .visit__cols h3 { font-size: var(--t-h3); line-height: 1.1; font-weight: 720; font-stretch: 86%; }
  .visit__cols li { margin-top: 0.75rem; color: var(--fog); }
  .visit__cols strong { color: var(--snow); }

  .meteo { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 8vh, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
  @media (min-width: 56em) {
    .meteo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; column-gap: 3rem; }
    .meteo__title { grid-column: 1 / -1; }
  }
  .meteo__title { color: var(--mute); font-size: var(--t-label); font-weight: 650; letter-spacing: 0.12em; text-transform: uppercase; }
  .wx { flex: none; width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--snow); }
  .wx--xl { width: 3.6rem; height: 3.6rem; stroke-width: 1.7; color: var(--accent); }
  .now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.25rem; }
  .now__temp { font-size: clamp(3.2rem, 2.4rem + 2.6vw, 4.8rem); line-height: 0.9; font-weight: 800; font-stretch: 78%; letter-spacing: -0.03em; }
  .now__temp span { margin-left: 0.08em; font-size: 0.4em; font-weight: 600; color: var(--mute); }
  .now__label { font-size: 1.15rem; font-weight: 650; }
  .now__meta p + p { color: var(--fog); font-size: var(--t-small); }
  .meteo__days { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
  .day { display: grid; justify-items: center; gap: 0.3rem; padding: 0.75rem 0.25rem; border-left: 1px solid var(--line); text-align: center; }
  .day:first-child { border-left: 0; }
  .day__name { color: var(--fog); font-size: 0.8rem; font-weight: 650; }
  .day__t b { font-size: 1.15rem; }
  .day__t span { color: var(--mute); }
  .day__p { color: var(--cyan); font-size: 0.76rem; }
  .meteo__air { grid-column: 1 / -1; color: var(--fog); font-size: var(--t-small); }
  .meteo__air b { color: var(--snow); }

  .doors { display: grid; gap: 1rem; margin-top: clamp(3rem, 8vh, 4.5rem); }
  @media (min-width: 48em) {
    .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .door {
    display: grid; gap: 0.4rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-2);
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
  }
  .door:hover { border-color: var(--accent); color: var(--snow); background: var(--bg-3); }
  .door__alt { color: var(--accent); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
  .door__name { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.6rem); line-height: 1; font-weight: 750; font-stretch: 82%; letter-spacing: -0.02em; }
  .door__sub { color: var(--fog); font-size: var(--t-small); }

  /* ---------- home: one door per page, and four ideas for the season ---------- */
  /* the grid makes room for any door added later */
  .doors--hub { margin-top: 0; }
  @media (min-width: 48em) {
    .doors--hub { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
  }
  .door--small { height: 100%; align-content: start; }
  .door--small .door__name { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.55rem); line-height: 1.1; }
  .picks { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  /* only the panel of the season set on <html>: it is there from the start, so this works without JavaScript */
  .moment__panel { display: none; }
  [data-season="hiver"] [data-moment="hiver"],
  [data-season="printemps"] [data-moment="printemps"],
  [data-season="ete"] [data-moment="ete"],
  [data-season="automne"] [data-moment="automne"] { display: block; }
  .moment__more { margin-top: 2rem; color: var(--fog); }
  .today .meteo { margin-top: 0; }

  /* ---------- the summit: the sky, then a plain base ---------- */
  .summit__sky {
    min-height: 72svh;
    display: grid; align-content: end;
    padding-block: 7rem clamp(3rem, 8vh, 5rem);
    background: linear-gradient(var(--bg), transparent 28%);
  }
  :is(.no-js, .no-scene) .summit__sky { min-height: 0; background: linear-gradient(180deg, var(--bg), var(--sky-top) 40%, var(--sky-mid)); }
  .summit__motto {
    margin-block: 1.25rem 0.6rem;
    max-width: 14em;
    font-family: var(--font-serif); font-style: italic;
    font-size: clamp(2.6rem, 1rem + 7vw, 8rem);
    line-height: 0.95; letter-spacing: -0.02em;
    text-wrap: balance;
    text-shadow: 0 2px 30px oklch(0.1 0.03 265 / 0.5);
  }
  .summit__source { max-width: 40rem; color: var(--fog); font-size: var(--t-small); text-shadow: 0 1px 10px oklch(0.1 0.03 265 / 0.8); }
  .summit__base { padding-block: 2.5rem calc(2.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg); }
  .summit__grid { display: grid; gap: 1.25rem; }
  .brand--lg { font-size: clamp(2rem, 1.5rem + 2vw, 3.2rem); line-height: 1; font-weight: 800; font-stretch: 80%; letter-spacing: -0.03em; }
  .summit__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-weight: 600; }
  .summit__links a { text-decoration: none; color: var(--fog); }
  .summit__links a:hover { color: var(--accent); }
  .summit__legal, .summit__credits { max-width: 52rem; color: var(--mute); font-size: 0.82rem; line-height: 1.55; }
  .summit__credits summary { width: fit-content; color: var(--fog); cursor: pointer; }
  .summit__credits p { margin-top: 0.6rem; }
}

/* ============================================================ pages: hikes and activities */
@layer pages {
  /* hero: a ridge line, for the moments without 3D */
  .range__far { fill: color-mix(in oklch, var(--city-top) 55%, var(--sky-bottom)); opacity: 0.5; }
  .range__near { fill: url(#range-grad); }
  .range__snow { fill: oklch(0.96 0.01 250 / 0.8); }
  .range__trees { fill: color-mix(in oklch, var(--city) 84%, var(--accent)); }
  .range__trail { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 0.012 0.009; }
  .range__flag { fill: var(--accent); }
  .range__hiker { fill: var(--snow); stroke: var(--accent); stroke-width: 2.5; }
  .range__river { fill: color-mix(in oklch, var(--cyan) 22%, var(--city)); }
  .range__ripples { fill: none; stroke: color-mix(in oklch, var(--cyan) 70%, transparent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.018 0.03; }
  .glider__wing { fill: var(--accent); }
  .glider__lines { fill: none; stroke: oklch(1 0 0 / 0.55); stroke-width: 0.9; }
  .glider__pilot { fill: var(--snow); }
  .hero--hikes { min-height: min(78svh, calc(100svh - var(--nav-h) - var(--bar-h))); }

  .hikes__nojs { color: var(--mute); }

  /* filters: one line */
  .hfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; margin-bottom: 1.5rem; }
  .hfilters__count { margin-left: auto; color: var(--fog); font-size: var(--t-small); font-weight: 650; }
  @media (max-width: 40em) {
    .hfilters__count { margin-left: 0; }
  }
  .lv { font-style: normal; font-weight: 800; letter-spacing: -0.06em; }
  .lv--1 { color: var(--lv-1); }
  .lv--2 { color: var(--lv-2); }
  .lv--3 { color: var(--lv-3); }
  .filter-pills input:checked + span .lv { color: inherit; }

  /* the relief map and the index side by side */
  .hikes-overview { display: grid; gap: clamp(1rem, 2.5vw, 2rem); align-items: start; }
  @media (min-width: 64em) {
    .hikes-overview { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  }
  .hmap {
    position: relative; isolation: isolate;
    margin: 0;
    aspect-ratio: 1;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 40%, oklch(0.24 0.045 262), oklch(0.15 0.035 266));
  }
  .hmap__canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; transition: opacity 1s; }
  .hmap.is-drawn .hmap__canvas { opacity: 1; }
  .hmap__deco, .hmap__pins { position: absolute; inset: 0; z-index: 2; margin: 0; pointer-events: none; }
  .hmap__town {
    position: absolute; left: var(--x); top: var(--y);
    padding-left: 0.75rem; translate: -0.25rem -50%;
    color: oklch(0.96 0.01 250 / 0.85);
    font-size: 0.7rem; font-weight: 600; line-height: 1;
    text-shadow: 0 1px 3px oklch(0.1 0.03 265 / 0.95), 0 0 10px oklch(0.1 0.03 265 / 0.7);
    white-space: nowrap;
  }
  .hmap__town::before {
    content: ""; position: absolute; left: 0; top: 50%;
    width: 5px; height: 5px; margin-top: -2.5px;
    border-radius: 50%; background: var(--snow);
    box-shadow: 0 0 0 2px oklch(0.12 0.03 265 / 0.75);
  }
  /* Briançon writes itself to the west of its dot: the pins of the nearest hikes sit to the east */
  .hmap__town--big { padding: 0 0.85rem 0 0; translate: calc(-100% + 0.3rem) -50%; color: var(--snow); font-size: 0.86rem; font-weight: 800; }
  .hmap__town--big::before { left: auto; right: 0; width: 9px; height: 9px; margin-top: -4.5px; background: var(--accent); }
  /* on the activities map, pins crowd around Briançon: its name goes below and to the east of its dot */
  .hmap__town--se { padding: 0.72rem 0 0 0.72rem; translate: -4.5px -4.5px; color: var(--snow); font-size: 0.86rem; font-weight: 800; }
  .hmap__town--se::before { top: 0; width: 9px; height: 9px; margin-top: 0; background: var(--accent); }
  .hmap__town--pass { color: oklch(0.9 0.02 250 / 0.7); font-style: italic; }
  .hmap__town--pass::before { border-radius: 1px; rotate: 45deg; background: oklch(0.9 0.02 250 / 0.8); }
  .hmap__area {
    position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
    color: oklch(0.93 0.02 250 / 0.5);
    font-family: var(--font-serif); font-style: italic; font-size: clamp(0.95rem, 0.7rem + 0.6vw, 1.3rem); letter-spacing: 0.02em;
    text-shadow: 0 1px 8px oklch(0.1 0.03 265 / 0.9);
    white-space: nowrap;
  }
  .hmap__start {
    position: absolute; left: var(--x); top: var(--y);
    width: 9px; height: 9px; translate: -50% -50%;
    border: 2px solid var(--lv); border-radius: 2px;
    background: oklch(0.14 0.03 265);
    transition: scale 0.25s var(--ease), background-color 0.25s, opacity 0.3s;
  }
  .hmap__start.is-hot { scale: 1.7; background: var(--lv); }
  .hmap__pin { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; pointer-events: auto; transition: opacity 0.3s, scale 0.3s var(--ease); }
  .hmap__pin a {
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem;
    border-radius: 50%;
    background: var(--lv); color: oklch(0.17 0.035 265);
    font-size: 0.8rem; font-weight: 800;
    text-decoration: none;
    box-shadow: 0 0 0 2px oklch(0.14 0.03 265 / 0.9);
  }
  .hmap__pin a:hover { color: oklch(0.17 0.035 265); }
  .hmap__pin.is-hot { scale: 1.3; z-index: 2; }
  .hmap__pin.is-current a { box-shadow: 0 0 0 2px oklch(0.14 0.03 265 / 0.9), 0 0 0 4px var(--lv); }
  .hmap__pin.is-dim, .hmap__start.is-dim { opacity: 0.22; }
  .hmap__north { position: absolute; top: 0.9rem; right: 1rem; z-index: 2; display: grid; justify-items: center; color: var(--fog); font-family: var(--font-serif); font-size: 1.05rem; line-height: 1; }
  .hmap__north span { color: var(--accent); font-size: 0.7rem; }
  .hmap__scale { position: absolute; left: 1rem; bottom: 2.7rem; z-index: 2; display: flex; align-items: center; gap: 0.5rem; color: var(--fog); font-size: 0.7rem; }
  .hmap__scale span { display: block; width: var(--w, 4rem); height: 5px; border: 1.5px solid var(--fog); border-top: 0; }
  .hmap__cap { position: absolute; inset: auto 0 0; z-index: 2; padding: 1.4rem 1rem 0.6rem; color: var(--mute); font-size: 0.68rem; line-height: 1.35; background: linear-gradient(transparent, oklch(0.12 0.03 265 / 0.9)); }
  @media (max-width: 40em) {
    .hmap { aspect-ratio: 4 / 5; }
    .hmap__pin a { width: 1.5rem; height: 1.5rem; font-size: 0.7rem; }
    .hmap__town { font-size: 0.62rem; }
    .hmap__town--big, .hmap__town--se { font-size: 0.74rem; }
    .hmap__area { font-size: 0.85rem; }
    .hmap__cap { padding-inline: 0.8rem; font-size: 0.6rem; }
    .hmap__scale { left: 0.8rem; bottom: 2.9rem; }
  }

  /* the index of the hikes: one line each, on a shared altitude scale */
  .hindex-box { display: grid; gap: 1rem; }
  .hindex__row a {
    display: grid; align-items: center;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    grid-template-areas: "n name lv" "n zone meta" "n bar alt";
    gap: 0.15rem 0.9rem;
    padding: 0.7rem 0.6rem 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--snow); text-decoration: none;
    transition: background-color 0.2s;
  }
  .hindex__row a:hover, .hindex__row.is-hot a { background: oklch(1 0 0 / 0.04); color: var(--snow); }
  .hindex__n { grid-area: n; align-self: start; padding-top: 0.15rem; color: var(--mute); font-size: 0.86rem; font-weight: 800; }
  .hindex__row.is-hot .hindex__n, .hindex__row.is-current .hindex__n { color: var(--lv); }
  .hindex__name { display: contents; }
  .hindex__name b { grid-area: name; font-size: 1.04rem; font-weight: 750; font-stretch: 88%; line-height: 1.15; }
  .hindex__name span { grid-area: zone; color: var(--mute); font-size: 0.8rem; }
  .hindex__lv { grid-area: lv; justify-self: end; color: var(--fog); font-size: 0.78rem; font-weight: 650; white-space: nowrap; }
  .hindex__lv span { color: var(--lv); font-weight: 800; letter-spacing: -0.06em; }
  .hindex__meta { grid-area: meta; justify-self: end; color: var(--mute); font-size: 0.78rem; white-space: nowrap; }
  .hindex__bar { grid-area: bar; position: relative; height: 4px; margin-top: 0.35rem; border-radius: 999px; background: oklch(1 0 0 / 0.08); }
  .hindex__bar i { position: absolute; inset-block: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); border-radius: inherit; background: var(--lv); }
  .hindex__alt { grid-area: alt; justify-self: end; margin-top: 0.35rem; font-size: 0.82rem; font-weight: 700; }
  .hindex__legend { color: var(--mute); font-size: 0.8rem; line-height: 1.55; }

  /* before leaving: four lines */
  .checklist { display: grid; gap: 0 2.5rem; }
  @media (min-width: 56em) {
    .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .checklist li { padding-block: 1rem; border-top: 1px solid var(--line); color: var(--fog); }
  .checklist strong { display: block; margin-bottom: 0.2rem; color: var(--snow); font-size: 1.1rem; font-weight: 720; }
  .checklist .sos { color: var(--accent); font-size: 1.6rem; font-weight: 800; line-height: 1; }

  /* ---------- the cards: a plain column on a phone, one side of the landscape on a wide screen ---------- */
  .hikes__list { display: grid; }
  .hike {
    display: grid; align-content: start; gap: 1.1rem;
    padding-block: clamp(2rem, 5vh, 3rem);
    border-top: 1px solid var(--line);
    background: var(--bg);
  }
  @media (min-width: 64em) {
    .scene-on .hikes { padding-block: 0; background: none; }
    /* the plain ground of the page above and below fades into the landscape */
    .scene-on .hikes::before, .scene-on .hikes::after { content: ""; position: absolute; inset-inline: 0; height: 22vh; pointer-events: none; }
    .scene-on .hikes::before { top: 0; background: linear-gradient(var(--bg), transparent); }
    .scene-on .hikes::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
    .scene-on .hikes__list { position: relative; z-index: 1; gap: 16vh; padding-block: 20vh; }
    .scene-on .hike {
      width: min(38rem, 48%); margin-left: auto;
      padding: clamp(1.5rem, 2.5vw, 2.25rem);
      border: 1px solid var(--line-strong); border-radius: var(--radius);
    }
    .scene-on .acts__bar { width: min(38rem, 48%); margin-left: auto; }
  }
  .hike.is-off { opacity: 0.6; }
  .hike__head { display: grid; gap: 0.5rem; }
  .hike__title { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3rem); line-height: 0.98; font-weight: 750; font-stretch: 82%; letter-spacing: -0.022em; text-wrap: balance; }
  .hike__title em { font-size: 1.05em; }
  .hike__level { color: var(--fog); font-size: 0.86rem; font-weight: 650; }
  .hike__level .lv { margin-right: 0.35rem; letter-spacing: 0.04em; }
  .hike__lede { color: var(--fog); text-wrap: pretty; }
  .hike__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; padding-block: 0.9rem; border-block: 1px solid var(--line); }
  .hike__stats dt { color: var(--mute); font-size: 0.66rem; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
  .hike__stats dd { margin-top: 0.15rem; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); line-height: 1.15; font-weight: 800; font-stretch: 80%; letter-spacing: -0.01em; }
  .hike__stats div:last-child dd { color: var(--lv); }
  @media (max-width: 30em) {
    .hike__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  .act__ico, .acal__ico, .pick__ico, .carnet__ico {
    display: inline-block; flex: none;
    width: 1.15em; height: 1.15em; vertical-align: -0.2em;
    fill: none; stroke: var(--lv, currentColor); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  }
  .act__level .act__ico { margin-right: 0.25rem; width: 1.3em; height: 1.3em; }

  /* the schematic cut of the climb */
  .hike__cut { display: grid; gap: 0.35rem; margin: 0; }
  .hike__steps { display: grid; gap: 0.2rem; }
  .hike__steps li { position: relative; padding-left: 1.1rem; color: var(--fog); }
  .hike__steps li::before { content: "▲"; position: absolute; left: 0; top: 0.45em; color: var(--lv); font-size: 0.6em; }
  .hike__cut.is-drawn .hike__steps { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .hike__cutcap { color: var(--mute); font-size: 0.72rem; line-height: 1.4; }
  .hcut { width: 100%; height: auto; overflow: visible; }
  .hcut__belt--0 { fill: oklch(0.62 0.1 150 / 0.08); }
  .hcut__belt--1 { fill: oklch(0.7 0.12 110 / 0.07); }
  .hcut__belt--2 { fill: oklch(0.75 0.06 80 / 0.05); }
  .hcut__belt--3 { fill: oklch(0.97 0.01 250 / 0.08); }
  .hcut__beltname { fill: oklch(0.75 0.03 256 / 0.75); font-family: var(--font); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
  .hcut__grid { stroke: oklch(1 0 0 / 0.08); stroke-dasharray: 2 6; }
  .hcut__tick { fill: oklch(0.75 0.03 256 / 0.7); font-family: var(--font); font-size: 10px; }
  .hcut__line { fill: none; stroke: var(--lv); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
  .hcut__flag { fill: var(--lv); }
  .hcut__step circle { fill: var(--bg); stroke: var(--lv); stroke-width: 2.5; }
  .hcut__step--top circle { fill: var(--lv); stroke: var(--snow); }
  .hcut text { paint-order: stroke; stroke: oklch(0.15 0.03 266 / 0.9); stroke-width: 4px; stroke-linejoin: round; }
  .hcut__name { fill: var(--snow); font-family: var(--font); font-size: 13.5px; font-weight: 700; }
  .hcut__val { fill: var(--fog); font-family: var(--font); font-size: 11.5px; font-weight: 600; }
  /* on a phone the cut is drawn small: bigger print, only the ends named, the steps spelled out below */
  @media (max-width: 40em) {
    .hcut__name { font-size: 25px; }
    .hcut__val { font-size: 21px; }
    .hcut__beltname { font-size: 18px; }
    .hcut__tick { font-size: 17px; }
    .hcut__step:not(:first-of-type, .hcut__step--top) .hcut__name { display: none; }
    .hike__cut.is-drawn .hike__steps { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; display: flex; flex-wrap: wrap; gap: 0.2rem 0.45rem; font-size: 0.8rem; }
    .hike__cut.is-drawn .hike__steps li { padding-left: 0; }
    .hike__cut.is-drawn .hike__steps li::before { content: "→\00a0"; position: static; font-size: 1em; }
    .hike__cut.is-drawn .hike__steps li:first-child::before { content: none; }
  }

  /* today, on the spot */
  .hike__live { display: grid; gap: 0.35rem; padding-left: 0.9rem; border-left: 2px solid color-mix(in oklch, var(--ok) 55%, transparent); color: var(--fog); font-size: var(--t-small); line-height: 1.45; }
  .hike__live b { color: var(--snow); }
  .hike__live p:empty { display: none; }
  .hchip { display: inline-block; margin: 0.1rem 0.15rem 0 0; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; }
  .hchip--ice { background: oklch(0.86 0.11 205 / 0.18); color: var(--cyan); }
  .hchip--snow { background: oklch(0.97 0.01 250 / 0.14); color: var(--snow); }
  .hchip--storm { background: oklch(0.88 0.15 90 / 0.18); color: var(--warn); }
  .act__verdict { position: relative; padding-left: 0.95rem; }
  .act__verdict::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
  .act__verdict--meh::before { background: var(--warn); }
  .act__verdict--no::before { background: var(--lv-3); }
  .act__verdict--off::before { background: var(--mute); }
  .act__live:has(.act__verdict--no) { border-left-color: color-mix(in oklch, var(--lv-3) 60%, transparent); }
  .act__live:has(.act__verdict--off) { border-left-color: var(--line-strong); }
  .act__live:has(.act__verdict--meh) { border-left-color: oklch(0.88 0.15 90 / 0.6); }

  /* everything else, one tap away */
  .hike__more summary { width: fit-content; color: var(--fog); font-size: var(--t-small); font-weight: 650; cursor: pointer; }
  .hike__more summary:hover { color: var(--snow); }
  .hike__facts { display: grid; margin-top: 0.5rem; }
  .hike__facts > div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 0.2rem 1rem; padding-block: 0.65rem; border-top: 1px solid var(--line); }
  .hike__facts dt { padding-top: 0.2rem; color: color-mix(in oklch, var(--lv) 70%, var(--snow)); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; }
  .hike__facts dd { color: var(--fog); font-size: 0.95rem; line-height: 1.5; }
  @media (max-width: 34em) {
    .hike__facts > div { grid-template-columns: minmax(0, 1fr); }
  }
  .hike__months { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 0.6rem; }
  .hike__months:empty { display: none; }
  .hmonths { display: grid; grid-template-columns: repeat(12, 1.3rem); gap: 3px; }
  .hmonths li { display: grid; place-items: center; height: 1.3rem; border-radius: 4px; background: oklch(1 0 0 / 0.05); color: var(--mute); font-size: 0.6rem; font-weight: 700; }
  .hmonths li.is-on { background: color-mix(in oklch, var(--lv) 60%, transparent); color: oklch(0.16 0.03 265); }
  .hmonths li.is-now { outline: 2px solid var(--snow); outline-offset: 1px; }
  .hmonths__now { color: var(--mute); font-size: 0.74rem; font-weight: 700; }
  .hmonths__now.is-on { color: var(--ok); }
  .hike__links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

  /* ---------- activities: the choice panel ---------- */
  .advisor__box {
    display: grid; gap: 1.25rem;
    padding: clamp(1.1rem, 3vw, 2rem);
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-2);
  }
  .advisor__box, .advisor__form { grid-template-columns: minmax(0, 1fr); }
  .advisor__box > *, .advisor__form > *, .advisor__row > fieldset { min-width: 0; max-width: 100%; }
  .advisor__form { display: grid; gap: 0.6rem; }
  .advisor__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; }
  .advisor__legend { width: 5.4rem; color: var(--mute); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
  @media (max-width: 40em) {
    .advisor__row { gap: 0.3rem; }
    .advisor__legend { width: 100%; }
  }
  .advisor__wx { color: var(--fog); font-size: 0.95rem; line-height: 1.45; }
  .advisor__wx b { color: var(--snow); }
  .advisor__picks { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  .pick {
    position: relative;
    display: grid; align-content: start; gap: 0.45rem;
    padding: 1rem 1.1rem 1.05rem;
    border: 1px solid color-mix(in oklch, var(--lv) 40%, var(--line)); border-radius: var(--radius);
    background: var(--bg);
    transition: border-color 0.2s;
  }
  .pick:hover, .pick.is-hot { border-color: var(--lv); }
  .pick__top { display: flex; align-items: center; gap: 0.45rem; padding-right: 2.4rem; color: var(--fog); font-size: 0.76rem; font-weight: 650; }
  .pick__rank { display: inline-grid; place-items: center; flex: none; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--lv); color: oklch(0.17 0.035 265); font-size: 0.78rem; font-weight: 800; }
  .pick__name { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.55rem); line-height: 1.05; font-weight: 750; font-stretch: 84%; letter-spacing: -0.015em; text-wrap: balance; }
  .pick__name a { text-decoration: none; }
  .pick__name a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .pick__name a:focus-visible { outline: none; }
  .pick:has(.pick__name a:focus-visible) { outline: 2px solid var(--snow); outline-offset: 2px; }
  .pick__why { color: var(--fog); font-size: 0.95rem; line-height: 1.4; }
  .pick__meta { color: var(--mute); font-size: 0.78rem; line-height: 1.45; }
  .pick__warn { color: var(--warn); }
  .pick--none { grid-column: 1 / -1; color: var(--fog); }
  .pick__save, .carnet__del {
    position: absolute; z-index: 1; top: 0.7rem; right: 0.7rem;
    display: grid; place-items: center;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    border: 1px solid var(--line-strong);
    color: var(--snow); font-size: 1.05rem; line-height: 1;
    transition: background-color 0.2s, color 0.2s;
  }
  .pick__save:hover { background: oklch(1 0 0 / 0.1); }
  .pick__save[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .advisor__avoid { color: var(--fog); font-size: var(--t-small); line-height: 1.45; }
  .advisor__avoid:empty { display: none; }
  .advisor__avoid b { color: var(--warn); }

  /* the list follows the panel: what fits first, the rest one tap away */
  .acts__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 1rem 0; color: var(--fog); font-size: var(--t-small); }
  .scene-on .acts__bar { padding: 0.9rem 1.1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--bg); }
  .acts__bar b { color: var(--snow); }

  /* the calendar */
  .acal { display: grid; }
  .acal__head, .acal__row a { display: grid; align-items: center; gap: 0.15rem 0.8rem; grid-template-columns: 1.7rem minmax(0, 1fr) auto; }
  .acal__head { padding: 0 0.6rem 0.35rem; }
  .acal__head .acal__months { grid-column: 3; }
  .acal__row a { padding: 0.5rem 0.6rem 0.55rem; border-top: 1px solid var(--line); color: var(--snow); text-decoration: none; transition: background-color 0.2s, opacity 0.2s; }
  .acal__row a:hover, .acal__row.is-hot a { background: oklch(1 0 0 / 0.04); color: var(--snow); }
  .acal__row.is-dim a { opacity: 0.4; }
  .acal__n { color: var(--mute); font-size: 0.78rem; font-weight: 800; }
  .acal__row.is-hot .acal__n, .acal__row.is-current .acal__n { color: var(--lv); }
  .acal__name { display: grid; min-width: 0; }
  .acal__name b { overflow: hidden; font-size: 0.95rem; font-weight: 700; font-stretch: 88%; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
  .acal__name span { color: var(--mute); font-size: 0.74rem; }
  .acal__ico { margin-right: 0.3rem; }
  .acal__months { display: grid; grid-template-columns: repeat(12, 0.95rem); gap: 2px; }
  .acal__months i { display: grid; place-items: center; height: 1.05rem; border-radius: 3px; background: oklch(1 0 0 / 0.06); color: var(--mute); font-size: 0.56rem; font-style: normal; font-weight: 700; }
  .acal__head .acal__months i { background: none; }
  .acal__months i.is-on { background: color-mix(in oklch, var(--lv) 75%, transparent); }
  .acal__months i.is-now { box-shadow: inset 0 -2px 0 var(--snow); }
  .acal__head .acal__months i.is-now { color: var(--snow); }
  @media (max-width: 30em) {
    .acal__head, .acal__row a { grid-template-columns: 1.5rem minmax(0, 1fr); }
    .acal__head .acal__months, .acal__row .acal__months { grid-column: 2; }
    .acal__months { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  }

  /* the notebook */
  .act__save[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
  .carnet-pill {
    position: fixed; right: 1rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 1rem); z-index: 45;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.6rem 0.95rem 0.6rem 0.85rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: var(--bg-3);
    font-size: 0.86rem; font-weight: 700; color: var(--snow);
    animation: fade-up 0.35s var(--ease) both;
  }
  .carnet-pill:hover { border-color: var(--fog); }
  .carnet-pill__star { color: var(--accent); }
  .carnet-pill b { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 0.78rem; }
  .carnet {
    position: fixed; inset: auto 1rem calc(env(safe-area-inset-bottom, 0px) + 1rem) auto;
    width: min(27rem, calc(100vw - 2rem)); max-height: min(80vh, 44rem);
    margin: 0; padding: 1.3rem 1.2rem 1.2rem;
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--snow);
  }
  .carnet::backdrop { background: oklch(0.1 0.03 265 / 0.45); }
  .carnet .menu__title { padding-right: 2.5rem; }
  .carnet .menu__close { top: 0.8rem; right: 0.8rem; width: 2.2rem; height: 2.2rem; font-size: 1.3rem; }
  .carnet__list { display: grid; }
  .carnet__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 0.7rem; padding: 0.7rem 3rem 0.75rem 0; border-top: 1px solid var(--line); }
  .carnet__ico { width: 1.4rem; height: 1.4rem; margin-top: 0.1rem; }
  .carnet__item a { display: grid; gap: 0.15rem; text-decoration: none; }
  .carnet__item b { font-weight: 700; line-height: 1.2; }
  .carnet__item .label { color: var(--mute); font-size: 0.72rem; line-height: 1.35; }
  .carnet__del { top: 50%; right: 0; translate: 0 -50%; width: 1.9rem; height: 1.9rem; font-size: 1.2rem; color: var(--mute); }
  .carnet__del:hover { background: oklch(1 0 0 / 0.1); color: var(--snow); }
  .carnet__empty { padding: 0.5rem 0; color: var(--fog); line-height: 1.45; }
  .carnet__sum { display: grid; gap: 0.35rem; margin-top: 0.9rem; color: var(--fog); font-size: var(--t-small); line-height: 1.45; }
  .carnet__sum:empty { display: none; }
  .carnet__sum b { color: var(--snow); }
  .carnet__ok b { color: var(--ok); }
  .carnet__warn { color: var(--warn); }
  .carnet__tools { display: grid; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
  .carnet__label { color: var(--mute); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
  .carnet__link { width: 100%; padding: 0.55rem 0.8rem; border: 1px solid var(--line-strong); border-radius: 0.5rem; background: var(--bg); color: var(--fog); font: 0.8rem/1.3 var(--font); }
  .carnet__btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  @media (max-width: 40em) {
    .carnet { inset: auto 0.5rem calc(env(safe-area-inset-bottom, 0px) + 0.5rem); width: auto; max-height: 85vh; }
    .carnet-pill { right: 0.75rem; bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem); }
  }
}

/* ============================================================ page: webcams */
@layer pages {
  /* hero: the road climbs to the pass in hairpins, a webcam watches it */
  .range__road { fill: none; stroke: oklch(0.93 0.015 250 / 0.55); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .range__car { fill: var(--accent); stroke: oklch(0.14 0.03 265); stroke-width: 1.5; }
  .range__cam rect { fill: var(--snow); }
  .range__mast { fill: none; stroke: var(--snow); stroke-width: 2.5; stroke-linecap: round; }
  .range__lens { fill: oklch(0.2 0.04 265); stroke: var(--snow); stroke-width: 1.5; }
  .range__rec { fill: oklch(0.68 0.21 25); animation: rec 2s steps(1) infinite; }

  /* the index: road by road, in the colours of the pins */
  .cindex { columns: 2 14rem; column-gap: 2rem; }
  .cindex__group { break-inside: avoid; margin-bottom: 1.1rem; }
  .cindex__head {
    display: block; padding-bottom: 0.35rem;
    border-bottom: 2px solid var(--lv);
    color: var(--snow); font-size: 0.74rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none;
  }
  .cindex__row a {
    display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.5rem;
    padding: 0.35rem 0.25rem;
    border-bottom: 1px solid var(--line);
    color: var(--fog); font-size: 0.86rem; line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
  }
  .cindex__row a:hover, .cindex__row.is-hot a { background: oklch(1 0 0 / 0.04); color: var(--snow); }
  .cindex__n { color: var(--lv); font-size: 0.78rem; font-weight: 800; }
  .cindex__alt { color: var(--mute); font-size: 0.74rem; white-space: nowrap; }

  /* one section per road, its cameras in a grid */
  .cams-axis + .cams-axis { border-top: 1px solid var(--line); }
  .cams-axis .kicker__alt { color: var(--ax); }
  .cams-axis__title { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.2rem); }
  .cams-axis__state {
    display: inline-flex; align-items: center; gap: 0.5rem; width: fit-content;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--fog); font-size: 0.8rem; font-weight: 650;
  }
  .cams-axis__state::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
  .cams-axis__state--warn::before { background: var(--warn); }
  .cams { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: start; gap: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2.5vw, 1.75rem); }
  .cam { display: grid; gap: 0.75rem; margin: 0; scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
  .cam__frame {
    position: relative;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-2);
    transition: border-color 0.25s;
  }
  .cam__frame img { display: block; width: 100%; height: auto; }
  .cam:hover .cam__frame { border-color: var(--ax); }
  .cam.is-off .cam__frame img { visibility: hidden; }
  .cam.is-off .cam__frame::after { content: "Image indisponible"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-size: var(--t-small); font-weight: 650; }
  .cam__cap { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n name" "n meta" "n time"; gap: 0.1rem 0.7rem; }
  .cam__n { grid-area: n; padding-top: 0.15rem; color: var(--ax); font-size: 0.86rem; font-weight: 800; }
  .cam__name { grid-area: name; font-size: 1.05rem; font-weight: 720; font-stretch: 88%; line-height: 1.2; text-wrap: balance; }
  .cam__meta { grid-area: meta; color: var(--fog); font-size: 0.8rem; }
  .cam__time { grid-area: time; color: var(--mute); font-size: 0.74rem; }
  .cam__time:empty { display: none; }
  .cam.is-off .cam__time { color: var(--warn); }
  .cam.is-stale .cam__time { color: var(--warn); }

  /* the archive: each camera opens its last 24 hours */
  .cam__play {
    position: absolute; top: 0.55rem; right: 0.55rem; z-index: 1;
    display: none; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem 0.35rem 0.5rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    background: oklch(0.14 0.03 265 / 0.82);
    color: var(--snow); font-size: 0.78rem; font-weight: 700; font-stretch: 90%;
    transition: border-color 0.2s, background-color 0.2s;
  }
  .cam__play svg { width: 0.85rem; height: 0.85rem; fill: var(--ax); }
  .cam__play:hover { border-color: var(--ax); background: oklch(0.14 0.03 265 / 0.95); }
  .is-archive .cam__play { display: inline-flex; }
  .is-archive .cam__frame img { cursor: zoom-in; }

  /* the player */
  html:has(.camplayer[open]) { overflow: hidden; }
  .camplayer {
    --ax: var(--accent);
    --ar: 1.11;
    width: min(72rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
    margin: auto; padding: 0;
    overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--line-strong); border-radius: var(--radius);
    background: var(--bg-2);
    color: var(--snow);
  }
  .camplayer::backdrop { background: oklch(0.1 0.03 265 / 0.78); }
  .camplayer__box { display: grid; gap: 0.9rem; padding: 1rem 1.1rem 1.1rem; }
  .camplayer__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 0.75rem; }
  .camplayer__n { padding-top: 0.2rem; color: var(--ax); font-size: 0.9rem; font-weight: 800; }
  .camplayer__title { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); font-weight: 720; font-stretch: 88%; line-height: 1.15; text-wrap: balance; }
  .camplayer__meta { margin-top: 0.15rem; color: var(--fog); font-size: 0.8rem; }
  .camplayer__nav { display: flex; gap: 0.4rem; }
  .camplayer__icon {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--line-strong); border-radius: 50%;
    font-size: 1.45rem; line-height: 1; color: var(--fog);
    transition: color 0.2s, border-color 0.2s;
  }
  .camplayer__icon:hover { color: var(--snow); border-color: var(--fog); }
  .camplayer__icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

  .camplayer__stage {
    position: relative;
    width: min(100%, calc((100dvh - 20.5rem) * var(--ar))); min-width: min(100%, 16rem);
    aspect-ratio: var(--ar);
    margin-inline: auto;
    overflow: hidden;
    border-radius: calc(var(--radius) - 0.25rem);
    background: oklch(0.1 0.02 265);
    cursor: pointer;
  }
  .camplayer__video, .camplayer__still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
  .camplayer__msg {
    position: absolute; inset: auto 0.75rem 0.75rem;
    padding: 0.5rem 0.75rem; border-radius: 0.5rem;
    background: oklch(0.14 0.03 265 / 0.88);
    color: var(--warn); font-size: var(--t-small); font-weight: 650; text-align: center;
  }
  .camplayer__wait {
    position: absolute; top: 0.75rem; left: 50%; translate: -50% 0;
    padding: 0.35rem 0.75rem; border-radius: 999px;
    background: oklch(0.14 0.03 265 / 0.85);
    color: var(--fog); font-size: 0.8rem; font-weight: 650;
    opacity: 0; transition: opacity 0.2s;
    pointer-events: none;
  }
  .camplayer.is-loading .camplayer__wait, .camplayer.is-waiting .camplayer__wait { opacity: 1; transition-delay: 0.3s; }

  .camplayer__bar {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "play when live" "track track track" "tools tools tools";
    align-items: center; gap: 0.35rem 0.8rem;
  }
  .camplayer__play {
    grid-area: play;
    display: grid; place-items: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    background: var(--accent); color: var(--accent-ink);
    transition: background-color 0.2s;
  }
  .camplayer__play:hover { background: color-mix(in oklch, var(--accent) 85%, white); }
  .camplayer__play svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
  .camplayer__play .i-pause, .camplayer.is-playing .camplayer__play .i-play { display: none; }
  .camplayer.is-playing .camplayer__play .i-pause { display: inline; }
  .camplayer.no-video .camplayer__play { opacity: 0.4; cursor: not-allowed; }
  .camplayer__when { grid-area: when; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; min-width: 0; }
  .camplayer__when b { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); font-weight: 760; font-stretch: 88%; }
  .camplayer__when span { color: var(--mute); font-size: 0.86rem; }
  .camplayer__live {
    grid-area: live;
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.45rem 0.85rem;
    border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--fog); font-size: 0.82rem; font-weight: 700; font-stretch: 90%;
    transition: color 0.2s, border-color 0.2s;
  }
  .camplayer__live::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--mute); }
  .camplayer__live:hover { color: var(--snow); border-color: var(--fog); }
  .camplayer.is-live .camplayer__live { color: var(--snow); border-color: oklch(0.68 0.21 25 / 0.6); }
  .camplayer.is-live .camplayer__live::before { background: oklch(0.68 0.21 25); animation: rec 2s steps(1) infinite; }

  /* the timeline: a rail with the hours under it, holes in the colour of warnings, the thumb on top */
  .camplayer__track { --thumb: 1.15rem; --p: 1; grid-area: track; position: relative; height: 2.9rem; }
  .camplayer__rail {
    position: absolute; top: 0.78rem; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2);
    height: 0.32rem; border-radius: 999px;
    background: linear-gradient(to right, var(--ax) calc(var(--p) * 100%), var(--line-strong) 0);
  }
  .camplayer__gaps { position: absolute; inset: 0; border-radius: inherit; }
  .camplayer__ticks { position: absolute; top: 1.4rem; left: calc(var(--thumb) / 2); right: calc(var(--thumb) / 2); pointer-events: none; }
  .camplayer__ticks li { position: absolute; left: calc(var(--x) * 100%); width: 1px; height: 0.3rem; background: var(--line-strong); }
  .camplayer__ticks span { position: absolute; top: 0.4rem; translate: -50% 0; color: var(--mute); font-size: 0.7rem; white-space: nowrap; }
  .camplayer__range {
    position: absolute; inset: 0 0 auto; width: 100%; height: 1.9rem; margin: 0;
    appearance: none; -webkit-appearance: none; background: none;
    cursor: pointer;
  }
  .camplayer__range::-webkit-slider-runnable-track { height: 100%; background: none; }
  .camplayer__range::-moz-range-track { background: none; }
  .camplayer__range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: var(--thumb); height: var(--thumb); margin-top: calc((1.9rem - var(--thumb)) / 2);
    border: 3px solid var(--ax); border-radius: 50%; background: var(--snow);
    box-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
  }
  .camplayer__range::-moz-range-thumb {
    box-sizing: border-box; width: var(--thumb); height: var(--thumb);
    border: 3px solid var(--ax); border-radius: 50%; background: var(--snow);
    box-shadow: 0 1px 4px oklch(0 0 0 / 0.5);
  }
  .camplayer__range:focus-visible { outline: none; }
  .camplayer__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }
  .camplayer__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent); outline-offset: 2px; }

  .camplayer__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem; }
  .camplayer__pace { color: var(--mute); font-size: 0.8rem; }
  .camplayer.no-video :is(.camplayer__speed, .camplayer__pace) { display: none; }
  /* a wide screen: the buttons and the hour on one line, the image as tall as it can */
  @media (min-width: 60em) {
    .camplayer__stage { width: min(100%, calc((100dvh - 17.5rem) * var(--ar))); }
    .camplayer__bar { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "play when tools live" "track track track track"; column-gap: 1rem; }
    .camplayer__tools { justify-self: end; flex-wrap: nowrap; }
  }
  @media (max-width: 40em) {
    .camplayer { width: 100vw; height: 100dvh; max-height: none; border: 0; border-radius: 0; }
    .camplayer__box { min-height: 100%; align-content: start; padding: calc(env(safe-area-inset-top, 0px) + 0.75rem) 0.85rem calc(env(safe-area-inset-bottom, 0px) + 1rem); }
    .camplayer__stage { width: calc(100% + 1.7rem); max-width: none; margin-inline: -0.85rem; border-radius: 0; }
  }
}

/* ============================================================ motion: only the climb moves */
@layer motion {
  @keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 4px; } }
  @keyframes rec { 50% { opacity: 0.15; } }
  @keyframes fade-up { from { opacity: 0; translate: 0 10px; } }
  @keyframes fade-out { to { opacity: 0; } }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0s !important;
    }
  }
}