/* =============================================================================
   Cursafosca - site.css
   One stylesheet, no build step. Reads every value from tokens.css (the design
   system) - no colour, size, weight, tracking or duration is written here.
   Sections, in order:
   3 Reset · 4 Typography · 5 Layout · 6 Chrome · 7 Components · 8 Home
   9 Route pages · 10 Documents · 11 Motion
   Night is the brand: `html` is dark by default, `[data-theme="day"]` is the
   opt-in paper theme. Every colour is a token so the two themes stay honest.
   ========================================================================== */

/* 3 ── Reset ─────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  interpolate-size: allow-keywords;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
  background: var(--ink);
}

body {
  min-block-size: 100svh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
}

ul,
ol {
  padding-inline-start: 0;
  list-style: none;
}

:where(:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent);
  color: var(--on-accent);
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-bold);
  text-decoration: none;
  transform: translateY(-110%);
}
.skip:focus {
  transform: none;
}

/* 4 ── Typography ────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-weight: var(--w-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}

.t-hero {
  font-size: var(--fs-hero);
  font-weight: var(--w-black);
  line-height: var(--lh-hero);
  letter-spacing: var(--track-tight);
}
.t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
}
.t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
}
.t-h3 {
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-snug);
}

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-snug);
  max-inline-size: var(--measure, 40ch);
  text-wrap: pretty;
}

.prose {
  max-inline-size: 62ch;
  text-wrap: pretty;
}
.prose > * + * {
  margin-block-start: 1.1em;
}
.prose a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size var(--t-micro) var(--ease);
}
.prose a:hover {
  background-size: 0% 1px;
}

/* The poster tagline: Light, uppercase, +0.25em. Never set any other way. */
.tagline {
  font-weight: var(--w-light);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  font-size: var(--fs-tagline);
  line-height: var(--lh-lead);
  color: var(--text-dim);
}

/* Section kicker: a tabular index and a name, in condensed caps. */
.kicker {
  display: flex;
  align-items: baseline;
  gap: 0.75em;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--s3);
}
.kicker::before {
  content: attr(data-n);
  color: var(--accent);
}
.kicker::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--rule);
}

.num {
  font-variant-numeric: tabular-nums;
}
.display {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  letter-spacing: var(--track-num);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-num);
}

.dim {
  color: var(--text-dim);
}
.accent {
  color: var(--accent);
}

/* 5 ── Layout ────────────────────────────────────────────────────────────── */

/* Content maxes out at 1280px; the ≥6vw margins are added outside that cap, so
   wide screens get air instead of a stretched measure. The explicit width keeps
   the box honest when .wrap is a grid item (auto margins would shrink-wrap it). */
.wrap {
  inline-size: 100%;
  max-inline-size: calc(1280px + 2 * max(6vw, 1.25rem));
  margin-inline: auto;
  padding-inline: max(6vw, 1.25rem);
}

/* Sections only ever pad their top: consecutive sections then leave exactly
   one gap, and no `+` selector has to undo anything. */
.section {
  padding-block: var(--pad-section) var(--s5);
  position: relative;
}
.section--tight {
  padding-block-start: clamp(3.5rem, 9vh, 6rem);
}
main > .section:last-child {
  padding-block-end: var(--pad-section);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

.col-half {
  grid-column: span 12;
}
.col-main {
  grid-column: span 12;
}
.col-side {
  grid-column: span 12;
}

@media (min-width: 60rem) {
  .col-half {
    grid-column: span 6;
  }
  .col-main {
    grid-column: 1 / span 7;
  }
  .col-side {
    grid-column: 9 / span 4;
  }
}

.stack > * + * {
  margin-block-start: var(--s3);
}
.stack-sm > * + * {
  margin-block-start: var(--s2);
}

.hairline {
  border: 0;
  block-size: 1px;
  background: var(--rule);
}

.bleed {
  inline-size: 100%;
  position: relative;
}

/* 6 ── Chrome: header, nav sheet, footer, mobile bar ─────────────────────── */

.header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  view-transition-name: header;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  /* Hairline as a shadow, not a border: a border adds 1px to the flow height
     and the hero's -header-h pull-up would leave a bare line of page above. */
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--t-micro) var(--ease);
}
.header[data-scrolled] {
  box-shadow: 0 1px 0 var(--rule);
}
.home .header:not([data-scrolled]) {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Over the daylight frame the header reads dark, then turns with the sky. */
@media (prefers-reduced-motion: no-preference) {
  .js .home:has(.hero:not(.is-dusk)) .header:not([data-scrolled]) :is(.logo, .nav__link, .theme, .burger) {
    color: var(--dusk-0);
  }
  /* Only while the scene is settling: once .is-settled lands the animation is
     gone, so scrolling back to the top can never replay the dark from-color. */
  .js .home:has(.hero.is-dusk:not(.is-settled)) .header:not([data-scrolled]) :is(.logo, .nav__link, .theme, .burger) {
    animation: header-turn 1200ms var(--ease) 800ms backwards;
  }
}
@keyframes header-turn {
  from {
    color: var(--dusk-0);
  }
}
.header__in {
  display: flex;
  align-items: center;
  gap: var(--s3);
  block-size: var(--header-h);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--text);
  margin-inline-end: auto;
}
.header .logo {
  view-transition-name: logo; /* only one element may carry the name: not the footer logo */
}
.logo__mark {
  inline-size: 2.95rem;
  block-size: 2.15rem;
  background: currentColor;
  mask: url("/img/brand/mark.svg") no-repeat center / contain;
  -webkit-mask: url("/img/brand/mark.svg") no-repeat center / contain;
  flex: none;
}
.logo__word {
  font-weight: var(--w-black);
  font-size: var(--fs-body);
  letter-spacing: var(--track-display);
  text-transform: uppercase;
  line-height: 1;
}

.nav {
  display: none;
}
@media (min-width: 60rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: var(--s3);
  }
  button.nav__link {
    background: none;
    border: 0;
    cursor: pointer;
  }
  .nav__link {
    font-size: var(--fs-small);
    font-weight: var(--w-bold);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--text-dim);
    padding-block: 0.4rem;
    position: relative;
    transition: color var(--t-micro) var(--ease);
  }
  .nav__link::after {
    content: "";
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    block-size: 1px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--t-micro) var(--ease);
  }
  .nav__link:hover,
  .nav__link[aria-current="page"] {
    color: var(--text);
  }
  .nav__link:hover::after,
  .nav__link[aria-current="page"]::after {
    transform: none;
  }
}

.header .header__cta {
  display: none;
}
@media (min-width: 60rem) {
  .header .header__cta {
    display: inline-flex;
    view-transition-name: cta;
  }
}

.burger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: 0;
  padding: 0.5rem 0;
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
@media (min-width: 60rem) {
  .burger {
    display: none;
  }
}
.burger__bars {
  inline-size: 1.35rem;
  block-size: 0.7rem;
  position: relative;
}
.burger__bars::before,
.burger__bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 1.5px;
  background: currentColor;
}
.burger__bars::before {
  inset-block-start: 0;
}
.burger__bars::after {
  inset-block-end: 0;
}

.theme {
  background: none;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
  color: var(--text-dim);
  line-height: 0;
  transition: color var(--t-micro) var(--ease);
}
.theme:hover {
  color: var(--text);
}
.theme svg {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  transition: transform var(--t-reveal) var(--ease);
}
html[data-theme="day"] .theme svg {
  transform: rotate(180deg);
}
.theme__moon,
.theme__sun {
  transition: opacity var(--t-micro) var(--ease);
}
.theme__sun {
  opacity: 0;
}
html[data-theme="day"] .theme__moon {
  opacity: 0;
}
html[data-theme="day"] .theme__sun {
  opacity: 1;
}

/* Nav sheet - a real <dialog>, so Esc and the top layer come free. It rises
   from the bottom edge like a system sheet: grabber, grouped rows, one action. */
.sheet {
  position: fixed;
  inset: auto 0 0;
  border: 0;
  padding: 0;
  margin: 0;
  inline-size: 100%;
  max-inline-size: 100%;
  max-block-size: 92svh;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--ink-2);
  color: var(--text);
  translate: 0 100%;
  transition:
    translate var(--t-reveal) var(--ease),
    display var(--t-reveal) allow-discrete,
    overlay var(--t-reveal) allow-discrete;
}
.sheet[open] {
  translate: 0 0;
}
@starting-style {
  .sheet[open] {
    translate: 0 100%;
  }
}
.sheet::backdrop {
  background: rgb(5 6 9 / 55%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease);
}
.sheet[open]::backdrop {
  opacity: 1;
}
@starting-style {
  .sheet[open]::backdrop {
    opacity: 0;
  }
}
.sheet__in {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  max-block-size: 92svh;
  overflow-y: auto;
  padding: 0.6rem max(5vw, 1.25rem) calc(var(--s3) + env(safe-area-inset-bottom));
}
.sheet__grab {
  align-self: center;
  inline-size: 2.4rem;
  block-size: 0.3rem;
  border-radius: 999px;
  background: var(--rule-strong);
}
.sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sheet__close {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--text);
  cursor: pointer;
}
.sheet__close svg {
  inline-size: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}
.sheet__nav {
  display: grid;
  gap: 0.5rem;
}
.sheet__group {
  border-radius: 1rem;
  overflow: clip;
  background: color-mix(in srgb, var(--text) 6%, transparent);
}
.sheet__link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 1rem;
  text-decoration: none;
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
}
.sheet__link + .sheet__link {
  border-block-start: 1px solid var(--rule);
}
.sheet__link::after {
  content: "";
  margin-inline-start: auto;
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-inline-end: 1.5px solid var(--text-dim);
  border-block-start: 1.5px solid var(--text-dim);
  rotate: 45deg;
  flex: none;
}
.sheet__link small {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  color: var(--text-dim);
}
.sheet__link small + ::after,
.sheet__link:has(small)::after {
  margin-inline-start: 0;
}
.sheet__link[aria-current="page"] {
  color: var(--accent);
}
.sheet__label {
  padding-inline-start: 1rem;
  margin-block-start: 0.5rem;
  font-family: var(--font-display);
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.sheet__foot {
  display: grid;
  gap: 0.75rem;
  justify-items: center;
  padding-block-start: var(--s2);
}
.sheet__foot .btn {
  inline-size: 100%;
  justify-content: center;
}
.sheet__when {
  font-family: var(--font-display);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

.footer {
  background: var(--ink-2);
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s5) var(--s4);
  margin-block-start: 0;
}
.footer__word {
  font-family: var(--font-condensed);
  font-weight: var(--w-regular);
  font-size: var(--fs-footer-word);
  line-height: var(--lh-num);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule-strong);
  text-align: center;
  white-space: nowrap;
  margin-block-end: var(--s5);
  user-select: none;
}
.footer__grid {
  display: grid;
  gap: var(--s4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s3);
  }
}
.footer h2,
.footer h3 {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  font-weight: var(--w-regular);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-block-end: var(--s2);
}
.footer__h2 {
  margin-block-start: 1.75rem;
}
.footer li + li {
  margin-block-start: 0.4rem;
}
.footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-block-start: var(--s2);
  font-size: var(--fs-small);
}
.footer__social li + li {
  margin-block-start: 0;
}
.footer__grid p {
  font-size: var(--fs-small);
}
.footer a {
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.footer a:hover {
  color: var(--accent);
}
.footer__bottom {
  margin-block-start: var(--s5);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.footer__bottom .logo {
  margin-inline-end: 0;
}

/* Logo wall, by tier. Sponsors read biggest; supporters sit last. */
.wall {
  margin-block-end: var(--s5);
}
.wall__tier + .wall__tier {
  margin-block-start: var(--s4);
}
.wall__grid {
  display: grid;
  gap: var(--s3) var(--s2);
  align-items: center;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
}
.wall--sponsor .wall__grid {
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: var(--s4) var(--s3);
}
.wall--supporter .wall__grid {
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
}
.wall__item {
  display: grid;
  place-items: center;
  min-block-size: 3rem;
  text-decoration: none;
}
.wall__logo {
  inline-size: 100%;
  block-size: 2.6rem;
  object-fit: contain;
  opacity: 0.82;
  transition: opacity var(--t-micro) var(--ease);
}
.wall--sponsor .wall__logo {
  block-size: 3.6rem;
}
.wall--supporter .wall__logo {
  block-size: 3.2rem;
}
.wall__item:hover .wall__logo {
  opacity: 1;
}
/* The PNG logos were supplied white-on-transparent for the dark footer. */
html[data-theme="day"] .wall__logo[data-invert] {
  filter: invert(1);
}
/* SVG logos referenced by <img> cannot inherit currentColor: they are black
   artwork, so the night theme inverts them instead. */
.wall__logo[data-mono] {
  filter: invert(1);
}
html[data-theme="day"] .wall__logo[data-mono] {
  filter: none;
}
.wall__text {
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-num);
  color: var(--text-dim);
  text-align: center;
}

/* Mobile bar: Track · Info · Inscriu-te. One accent action. */
/* Floating tab bar: a glass capsule with four tabs and a detached action,
   the way a system tab bar sits over content. Desktop never sees it. */
.mbar {
  position: fixed;
  inset-block-end: calc(0.75rem + env(safe-area-inset-bottom));
  inset-inline: 0.75rem;
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Own stacking context with explicit orders: WebKit otherwise composites
     the backdrop-filtered pill above the CTA and cuts its glow. */
  isolation: isolate;
}
.mbar__tabs {
  position: relative;
  z-index: 0;
  flex: 1;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr); /* labels never widen the bar */
  block-size: 3.75rem;
  padding: 0.35rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--rule);
  box-shadow: 0 10px 30px rgb(5 6 9 / 35%);
}
.mbar__tabs a {
  display: grid;
  place-items: center;
  gap: 0.15rem;
  border-radius: 999px;
  text-decoration: none;
  color: var(--text-dim);
  font-size: calc(var(--fs-micro) * 0.85);
  font-weight: var(--w-bold);
  line-height: 1;
  transition: color var(--t-micro) var(--ease), background var(--t-micro) var(--ease);
}
.mbar__tabs a[aria-current="page"] {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.mbar svg {
  inline-size: 1.3rem;
  block-size: 1.3rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mbar__cta {
  flex: none;
  position: relative; /* above the tabs pill, so the glow is never cut by it */
  z-index: 1;
  display: grid;
  place-items: center;
  block-size: 3.75rem;
  padding-inline: 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: calc(var(--fs-small) * 0.72);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent) 45%, transparent);
}
body:has(.mbar) {
  padding-block-end: var(--mbar-h);
}
@media (min-width: 60rem) {
  .mbar {
    display: none;
  }
}
body:has(.mbar) {
  padding-block-end: var(--mbar-h);
}
@media (min-width: 60rem) {
  body:has(.mbar) {
    padding-block-end: 0;
  }
}

/* 7 ── Components ────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.5rem;
  border: 1px solid var(--rule-strong);
  background: none;
  color: inherit;
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--r-pill);
  transition:
    transform var(--t-micro) var(--ease),
    background-color var(--t-micro) var(--ease),
    border-color var(--t-micro) var(--ease),
    color var(--t-micro) var(--ease);
}
.btn:hover {
  border-color: currentColor;
}
.btn:active {
  transform: scale(0.98);
}
.btn__arrow {
  transition: transform var(--t-micro) var(--ease);
}
.btn:hover .btn__arrow {
  transform: translateX(4px);
}
.btn:hover .btn__arrow--ext {
  transform: translate(3px, -3px);
}
.btn--accent {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn--accent:hover {
  background: color-mix(in srgb, var(--accent) 88%, #fff);
  border-color: transparent;
}
.btn--big {
  padding: 1.1rem 2rem;
  font-size: var(--fs-body);
}
.btn--ghost {
  border-color: var(--rule);
  color: var(--text-dim);
}
.btn--ghost:hover {
  color: var(--text);
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Ticker - the identity as a moving line of type. */
.ticker {
  border-block: 1px solid var(--rule);
  padding-block: 0.9rem;
  overflow: hidden;
  --ticker-speed: 46s;
}
.ticker__track {
  display: flex;
  inline-size: max-content;
  animation: ticker var(--ticker-speed) linear infinite;
}
.ticker:hover .ticker__track,
.ticker:focus-within .ticker__track {
  animation-play-state: paused;
}
.ticker__group {
  display: flex;
  flex: none;
}
.ticker__item {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
  padding-inline: 1.1rem;
  white-space: nowrap;
  color: var(--text-dim);
}
.ticker__item::after {
  content: "·";
  color: var(--accent);
  padding-inline-start: 1.1rem;
}
@keyframes ticker {
  to {
    transform: translateX(-50%);
  }
}
@media (max-width: 59.99rem) {
  .ticker {
    display: none;
  }
}

/* Stats - figures that count up once. */
.stats {
  display: grid;
  gap: var(--s3) var(--gutter);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 48rem) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
  }
}
.stat {
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--s2);
}
.stat__n {
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-num-m);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  display: block;
}
.stat__n sup {
  font-size: 0.42em;
  vertical-align: super;
  letter-spacing: var(--track-caps);
}
.stat__l {
  display: block;
  margin-block-start: 0.5rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
  text-wrap: balance;
}

/* Proof strip: seals and circuits, as text. */
.proof {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
}
.proof a {
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.proof a:hover {
  color: var(--text);
}
.proof li + li::before {
  content: "·";
  padding-inline: 0.75rem;
  color: var(--accent);
}
.proof li {
  display: inline;
}

/* Checklist - hairlines, two columns, no boxes. */
.checklist {
  columns: 1;
  column-gap: var(--s5);
}
@media (min-width: 48rem) {
  .checklist {
    columns: 2;
  }
}
.checklist li {
  display: grid;
  grid-template-columns: 1.75rem 1fr;
  column-gap: var(--s2);
  break-inside: avoid;
  border-block-start: 1px solid var(--rule);
  padding-block: var(--s2);
}
.checklist svg {
  grid-row: span 2;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-block-start: -0.05em;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.checklist b,
.checklist span {
  grid-column: 2;
}
.checklist b {
  display: block;
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
}
.checklist span {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-small);
  margin-block-start: 0.15rem;
  text-wrap: pretty;
}

/* Price table. The live tier is the only accent thing on the screen. */
.prices {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.prices th,
.prices td {
  border-block-end: 1px solid var(--rule);
  padding: var(--s2) 0.5rem;
  text-align: start;
  vertical-align: baseline;
}
.prices th:first-child,
.prices td:first-child {
  padding-inline-start: 0;
}
.prices th:last-child,
.prices td:last-child {
  padding-inline-end: 0;
}
.prices td,
.prices thead th:not(:first-child) {
  text-align: end;
}
.prices th:first-child {
  inline-size: 42%;
}
.prices thead th {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
}
.prices tbody th {
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.prices td {
  font-size: var(--fs-lead);
  font-weight: var(--w-bold);
}
[data-prices] tr[data-tier] {
  transition: color var(--t-micro) var(--ease);
}
[data-prices] tr.is-now {
  color: var(--accent);
}
[data-prices] tr.is-now th::before {
  content: "";
  display: inline-block;
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: currentColor;
  margin-inline-end: 0.5rem;
  vertical-align: 0.1em;
}
[data-prices] tr.is-now th,
[data-prices] tr.is-now td {
  font-weight: var(--w-bold);
}
[data-prices] tr.is-past {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--rule-strong);
}

.price-note {
  margin-block-start: var(--s3);
  font-size: var(--fs-small);
  color: var(--text-dim);
}
.price-note strong {
  color: var(--accent);
  font-weight: var(--w-bold);
}

/* Countdown */
.countdown {
  display: flex;
  gap: clamp(0.9rem, 3vw, 2rem);
}
.cd {
  text-align: start;
}
.cd__n {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--fs-num-m);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.cd__l {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: var(--track-kicker);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-block-start: 0.35rem;
}
.cd__n.is-rolling {
  animation: roll var(--t-micro) var(--ease);
}
@keyframes roll {
  from {
    transform: translateY(0.28em);
    opacity: 0;
  }
}

/* FAQ */
.faq {
  border-block-start: 1px solid var(--rule);
}
.faq details {
  border-block-end: 1px solid var(--rule);
}
.faq summary {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding-block: var(--s2);
  cursor: pointer;
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
  line-height: var(--lh-snug);
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  margin-inline-start: auto;
  flex: none;
  inline-size: 0.85rem;
  block-size: 0.85rem;
  background: currentColor;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2v16H7z'/%3E%3Cpath d='M0 7h16v2H0z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M7 0h2v16H7z'/%3E%3Cpath d='M0 7h16v2H0z'/%3E%3C/svg%3E")
    no-repeat center / contain;
  transform: rotate(0deg);
  transition: transform var(--t-micro) var(--ease);
  align-self: center;
  color: var(--accent);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq__body {
  overflow: hidden;
}
@supports selector(::details-content) {
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition:
      block-size var(--t-micro) var(--ease),
      content-visibility var(--t-micro) allow-discrete;
  }
  .faq details[open]::details-content {
    block-size: auto;
  }
}
.faq__body p {
  padding-block-end: var(--s3);
  max-inline-size: 62ch;
  color: var(--text-dim);
  text-wrap: pretty;
}

/* Media mosaic - real masonry from the photographs' own proportions. */
.mosaic {
  columns: 2;
  column-gap: var(--s1);
}
@media (min-width: 48rem) {
  .mosaic {
    columns: 4;
    column-gap: var(--gutter);
  }
}
.mosaic li {
  break-inside: avoid;
  margin-block-end: var(--s1);
}
@media (min-width: 48rem) {
  .mosaic li {
    margin-block-end: var(--gutter);
  }
}
.mosaic img {
  inline-size: 100%;
}

.figure {
  margin: 0;
}
.figure img {
  inline-size: 100%;
}
.figure figcaption {
  margin-block-start: 0.75rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
}

/* Full-bleed cinematic photo with an ink gradient top and bottom. */
.cinema {
  position: relative;
  inline-size: 100vw;
  margin-inline-start: 50%;
  translate: -50% 0;
  overflow: clip;
}
.cinema img {
  inline-size: 100%;
  block-size: clamp(18rem, 60vh, 40rem);
  object-fit: cover;
}
.cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    var(--ink) 0%,
    transparent 22%,
    transparent 60%,
    color-mix(in srgb, var(--ink) 92%, transparent) 100%
  );
  pointer-events: none;
}
/* Scenes with a night and a day take (home cinema figures, Trail hero); the
   theme picks one. The hidden take is lazy, so it is never fetched. */
.cinema__day,
.rhero__day,
.scene__day,
html[data-theme="day"] :is(.cinema__night, .rhero__night, .scene__night) {
  display: none;
}
html[data-theme="day"] :is(.cinema__day, .rhero__day, .scene__day) {
  display: block;
}
.cinema__cap {
  position: absolute;
  inset-block-end: var(--s4);
  color: var(--text);
  text-shadow: 0 1px 12px rgb(5 6 9 / 80%);
  inset-inline-start: max(6vw, 1.25rem);
  z-index: 1;
  max-inline-size: 28ch; /* two lines at most, breaking at the dot */
}

/* 8 ── Home ──────────────────────────────────────────────────────────────── */

.hero,
.rhero {
  --text: #eceaf4;
  --text-dim: #bcb9cb;
  --rule: rgb(236 234 244 / 18%);
  --rule-strong: rgb(236 234 244 / 32%);
  color: var(--text);
}
.hero {
  position: relative;
  min-block-size: 100svh;
  margin-block-start: calc(-1 * var(--header-h)); /* the nav floats over the photo */
  display: grid;
  grid-template-rows: 1fr auto auto; /* content, horizon, scroll cue */
  padding-block: calc(var(--header-h) + var(--s5)) var(--s4);
  overflow: clip;
  isolation: isolate;
}
.hero__sky {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: linear-gradient(
    180deg,
    var(--dusk-1) 0%,
    var(--dusk-2) 48%,
    var(--dusk-3) 100%
  );
}
/* With JS the sky waits for the scene: while the photos decode, the page keeps
   its own background instead of flashing the bare gradient. No JS keeps it. */
.js .hero__sky {
  opacity: 0;
  transition: opacity 1.2s var(--ease-io);
}
.js .hero.is-dusk .hero__sky {
  opacity: 1;
}
/* The photo stack. .hero__scene is the cover box; .hero__frame keeps the photo's
   own aspect ratio and is sized like object-fit: cover (position 50% 42%), so
   the moon can be placed in photo coordinates and stays glued to the sky. */
.hero__scene {
  position: absolute;
  inset: 0;
  z-index: -2;
  container-type: size;
  overflow: clip;
}
.hero__frame {
  --ratio: 2500 / 1668;
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 42%;
  inline-size: 100%;
  inline-size: max(100cqw, calc(100cqh * var(--ratio)));
  aspect-ratio: var(--ratio);
  translate: -50% -42%;
  transition: scale 5s var(--ease-land);
}
.hero__frame > picture {
  position: absolute;
  inset: 0;
}
.hero__frame > picture > img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.hero__night {
  transition: opacity 2.2s var(--ease-io) 300ms;
}
/* The moon rides behind the foliage: its layer is masked to the sky (a matte
   cut from the frames) and screened onto it. X and Y settle on two different
   curves, so the path bends like a real arc instead of a straight slide. */
.hero__skymask {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  mask-image: url("/img/hero-sky.webp");
  mask-size: 100% 100%;
}
.hero__orbit {
  position: absolute;
  inset-inline-start: 28.574%;
  inset-block-start: 27.617%;
  inline-size: 6.039%;
  transition: translate 2.4s var(--ease-land) 2000ms;
}
.hero__moon {
  display: block;
  inline-size: 100%;
  block-size: auto;
  transition:
    translate 2.4s var(--ease-rise) 2000ms,
    opacity 1.2s var(--ease-io) 2100ms;
}
@media (max-aspect-ratio: 3/4) {
  .hero__frame {
    --ratio: 1250 / 1668;
  }
  .hero__orbit {
    inset-inline-start: 25.149%;
    inline-size: 12.079%;
  }
  .hero__skymask {
    mask-size: 200% 100%; /* the portrait frame is the middle of the same photo */
    mask-position: 32% 0;
  }
}
.hero__scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(5 6 9 / 30%) 0%,
    rgb(5 6 9 / 0%) 22%,
    rgb(5 6 9 / 20%) 58%,
    rgb(5 6 9 / 66%) 86%,
    var(--ink) 100%
  );
  transition: opacity 2.2s var(--ease-io) 300ms;
}
/* Before dusk: daylight, no moon, no stars, camera slightly pushed in. The
   text and the horizon wait for the night. Without JS the night is simply there. */
.hero {
  --dusk-text: 1200ms;
}
.js .hero:not(.is-dusk) .hero__frame {
  scale: 1.045;
}
.js .hero:not(.is-dusk) .hero__night,
html[data-theme="day"] .hero__night {
  opacity: 0;
}
.js .hero:not(.is-dusk) .hero__orbit,
html[data-theme="day"] .hero__orbit {
  translate: -140% 0;
}
.js .hero:not(.is-dusk) .hero__moon,
html[data-theme="day"] .hero__moon {
  opacity: 0;
  translate: 0 230%;
}
.js .hero:not(.is-dusk) .hero__scene::after,
html[data-theme="day"] .hero__scene::after {
  opacity: 0.55;
}
.js .hero:not(.is-dusk) .hero__stars,
html[data-theme="day"] .hero__stars {
  opacity: 0;
}
/* Once the entrance has played, a theme change is only a crossfade: the same
   scene, lighter or darker. The moon holds its place and simply fades. */
.hero.is-settled .hero__night,
.hero.is-settled .hero__scene::after,
.hero.is-settled .hero__stars,
.hero.is-settled .hero__orbit,
.hero.is-settled .hero__moon {
  transition: opacity 1s var(--ease-io) 0ms;
}
html[data-theme="day"] .hero.is-settled .hero__orbit,
html[data-theme="day"] .hero.is-settled .hero__moon {
  translate: none;
}

.js .hero:not(.is-dusk) .rise__l > span,
.js .hero:not(.is-dusk) .horizon {
  animation-play-state: paused;
}
.js .hero:not(.is-dusk) .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
}
.hero .reveal {
  transition-delay: calc(var(--dusk-text) + var(--d, 0ms));
}
/* Star field: three drifting depths, masked to the sky band. */
.hero__stars {
  position: absolute;
  inset-block: 0 40%;
  inset-inline: 0;
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: screen;
  transition: opacity 2s var(--ease-io) 1400ms;
  mask-image: linear-gradient(to bottom, #000 35%, transparent 100%);
}
.hero__stars i {
  position: absolute;
  inset: -10% 0;
  display: block;
  background-repeat: repeat;
  opacity: 0.6;
}
.hero__stars i:nth-child(1) {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 37% 8%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 62% 31%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 81% 14%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 92% 41%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 24% 47%, #fff, transparent);
  background-size: 100% 100%;
  animation: drift 90s linear infinite alternate, twinkle 7s ease-in-out infinite;
}
.hero__stars i:nth-child(2) {
  background-image:
    radial-gradient(1px 1px at 6% 36%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 29% 18%, #dfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 48% 45%, #dfe6ff, transparent),
    radial-gradient(1px 1px at 70% 6%, #dfe6ff, transparent),
    radial-gradient(1.1px 1.1px at 88% 27%, #dfe6ff, transparent);
  background-size: 100% 100%;
  opacity: 0.45;
  animation: drift 140s linear infinite alternate-reverse,
    twinkle 11s ease-in-out infinite 1.5s;
}
.hero__stars i:nth-child(3) {
  background-image:
    radial-gradient(0.9px 0.9px at 17% 9%, #c9d4ff, transparent),
    radial-gradient(0.9px 0.9px at 43% 33%, #c9d4ff, transparent),
    radial-gradient(0.9px 0.9px at 58% 12%, #c9d4ff, transparent),
    radial-gradient(0.9px 0.9px at 76% 38%, #c9d4ff, transparent),
    radial-gradient(0.9px 0.9px at 97% 17%, #c9d4ff, transparent);
  background-size: 100% 100%;
  opacity: 0.3;
  animation: drift 200s linear infinite alternate,
    twinkle 9s ease-in-out infinite 3s;
}
@keyframes drift {
  to {
    transform: translate3d(-3%, 1.5%, 0);
  }
}
@keyframes twinkle {
  50% {
    opacity: 0.18;
  }
}

.hero__in {
  display: grid;
  grid-template-rows: 1fr auto auto auto; /* the kicker up in the sky, the rest at the foot */
  justify-items: center;
  gap: var(--s3);
  text-align: center;
}
.hero__tag {
  align-self: start;
  font-size: var(--fs-h3);
  color: var(--text);
}
.hero__tag,
.hero__meta {
  text-shadow:
    0 0 0.3em color-mix(in srgb, var(--text) 55%, transparent),
    0 0 1em color-mix(in srgb, var(--accent) 50%, transparent);
}
.hero .btn--accent {
  box-shadow: 0 0 1.6rem color-mix(in srgb, var(--accent) 50%, transparent);
}
html[data-theme="day"] .hero__tag {
  color: var(--dusk-0); /* the hero keeps its night text; on the pale day sky the line reads like the header */
  text-shadow: 0 0 0.5em color-mix(in srgb, var(--ink) 70%, transparent);
}
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.75em;
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-num-s);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.hero__meta .sep {
  color: var(--accent);
}
.hero__seals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s4);
  margin: var(--s2) 0 0;
  padding: 0;
  list-style: none;
  opacity: 0.82;
  margin-block-end: var(--s4); /* clear of the horizon */
}
.hero__seals a {
  display: block;
  transition: opacity var(--t-micro) var(--ease);
}
.hero__seals a:hover {
  opacity: 0.7;
}
.hero__seals img {
  display: block;
  block-size: 3.25rem;
  inline-size: auto;
  filter: drop-shadow(0 0 0.4rem color-mix(in srgb, var(--text) 40%, transparent));
}
.hero__seals .hero__seal--wide {
  block-size: 1.5rem;
}
@media (max-width: 47.99rem) {
  .hero {
    /* the kicker higher in the sky, the info at the very foot (clear of the
       fixed bar), and no horizon line: the castle owns the middle */
    padding-block-start: calc(var(--header-h) + var(--s2));
    padding-block-end: calc(var(--s2) + var(--mbar-h));
  }
  .hero .horizon {
    display: none;
  }
  .hero__meta .sep {
    display: none; /* two lines on a phone */
  }
  .hero__seals {
    gap: var(--s3);
  }
  .hero__seals img {
    block-size: 2.5rem;
  }
  .hero__seals .hero__seal--wide {
    block-size: 1.2rem;
  }
  .scroll-cue {
    display: none;
  }
}
/* A single accent hairline: the horizon, drawn once on load. */
.horizon {
  block-size: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--accent) 12%,
    var(--accent) 88%,
    transparent
  );
  box-shadow:
    0 0 12px 1px color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 40px 4px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  animation: draw-x var(--t-draw) var(--ease) 1600ms forwards;
}
@keyframes draw-x {
  to {
    transform: scaleX(1);
  }
}

.scroll-cue {
  justify-self: center;
  inline-size: 1px;
  block-size: 3rem;
  background: var(--rule-strong);
  overflow: hidden;
  margin-block-start: var(--s3);
}
.scroll-cue::after {
  content: "";
  display: block;
  inline-size: 100%;
  block-size: 40%;
  background: var(--accent);
  animation: cue 2.4s var(--ease-io) infinite;
}
@keyframes cue {
  0% {
    transform: translateY(-100%);
  }
  60%,
  100% {
    transform: translateY(250%);
  }
}

/* Route scenes: a pinned numeral, facts scrolling past. */
.routes {
  display: grid;
}
.scene {
  --c: var(--text);
  display: grid;
  gap: var(--s3);
  padding-block: var(--s5);
  border-block-start: 1px solid var(--rule);
}
@media (min-width: 60rem) {
  .scene {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
    padding-block: var(--s6);
  }
}
.scene__num {
  font-family: var(--font-display);
  font-size: var(--fs-numeral);
  line-height: var(--lh-num);
  color: var(--c);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-snug);
}
.scene__num sup {
  font-size: 0.28em;
  vertical-align: super;
  letter-spacing: var(--track-num);
}
@media (min-width: 60rem) {
  .scene__pin {
    position: sticky;
    inset-block-start: calc(var(--header-h) + 3rem);
    align-self: start;
  }
  .scene__num {
    font-size: clamp(8rem, 21vw, 17rem);
  }
}
.scene__name {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-block-start: var(--s2);
  padding-block-start: var(--s2);
  border-block-start: 2px solid var(--c);
  display: inline-block;
}
.scene__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s2) var(--gutter);
  margin-block: var(--s3);
}
@media (min-width: 40rem) {
  .scene__facts {
    grid-template-columns: repeat(4, 1fr);
  }
}
.scene__fact {
  border-block-start: 1px solid var(--rule);
  padding-block-start: 0.6rem;
}
.scene__fact b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-data);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.scene__fact b small {
  font-family: var(--font-body);
  font-size: 0.42em;
  font-weight: var(--w-regular);
  letter-spacing: 0;
  margin-inline-start: 0.16em;
}
.scene__fact span {
  display: block;
  font-size: var(--fs-caption);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  margin-block-start: 0.3rem;
}
.scene__photo img {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

@media (max-width: 59.99rem) {
  .routes {
    display: flex;
    gap: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(6vw, 1.25rem);
    padding-inline: max(6vw, 1.25rem);
    margin-inline: calc(max(6vw, 1.25rem) * -1);
    scrollbar-width: none;
    padding-block-end: var(--s2);
  }
  .routes::-webkit-scrollbar {
    display: none;
  }
  .scene {
    flex: 0 0 min(84vw, 26rem);
    scroll-snap-align: start;
    border-block-start: 0;
    border-block-start: 2px solid var(--c);
    padding-block: var(--s3) var(--s4);
  }
  .scene__num {
    font-size: clamp(5.5rem, 22vw, 9rem);
  }
  .scene__facts {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Manifesto: lines lift out of the dark as they cross the viewport. */
/* Timeline 2016 → 2026 */
.timeline {
  position: relative;
}
.timeline__strip {
  display: flex;
  gap: clamp(2rem, 6vw, 5rem);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-inline: max(6vw, 1.25rem);
  margin-inline: calc(max(6vw, 1.25rem) * -1);
  padding-block-end: var(--s3);
  scrollbar-width: none;
}
.timeline__strip::-webkit-scrollbar {
  display: none;
}
.timeline__item {
  flex: 0 0 min(72vw, 20rem);
  scroll-snap-align: center;
}
.timeline__y {
  font-family: var(--font-display);
  font-size: var(--fs-num-l);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: color var(--t-reveal) var(--ease);
}
.timeline__item:hover .timeline__y {
  color: var(--text);
}
.timeline__item--now .timeline__y {
  color: var(--accent);
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 40%, transparent);
}
.timeline__item--off .timeline__y {
  color: var(--rule-strong);
}
.timeline__note {
  margin-block-start: var(--s2);
  padding-block-start: var(--s2);
  border-block-start: 1px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--text-dim);
  text-wrap: pretty;
}
.timeline__note b {
  color: var(--text);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.timeline__progress {
  block-size: 1px;
  background: var(--rule);
  margin-block-start: var(--s2);
}
.timeline__progress i {
  display: block;
  block-size: 100%;
  background: var(--accent);
  transform-origin: 0 50%;
}

/* Media page rows: giant year, entries alongside. */
.years {
  border-block-start: 1px solid var(--rule);
}
.year {
  display: grid;
  gap: var(--s2);
  padding-block: var(--s4);
  border-block-end: 1px solid var(--rule);
  align-items: center;
  overflow: clip; /* the scaled preview must not widen the page */
}
@media (min-width: 48rem) {
  .year {
    grid-template-columns: 5fr 7fr;
    gap: var(--gutter);
  }
}
.year__side {
  position: relative;
  isolation: isolate;
}
.year__n {
  font-family: var(--font-display);
  font-size: var(--fs-num-l);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  transition: color var(--t-reveal) var(--ease);
  position: relative;
}
.year:hover .year__n,
.year:focus-within .year__n {
  color: var(--text);
}
/* The year's own photograph surfaces behind the numeral on hover. */
.year__preview {
  position: absolute;
  inset: -12% 0;
  inline-size: 100%;
  block-size: 124%;
  object-fit: cover;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-draw) var(--ease);
  mask-image: linear-gradient(to right, #000 55%, transparent 100%);
}
.year:hover .year__preview,
.year:focus-within .year__preview {
  opacity: 0.42;
  transform: none;
}
.year__list {
  display: grid;
}
.year__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  padding-block: 0.7rem;
  border-block-start: 1px solid var(--rule);
}
.year__who {
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
  text-decoration: none;
  transition: color var(--t-micro) var(--ease);
}
.year__who:hover {
  color: var(--accent);
}
.year__what {
  margin-inline-start: auto;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  gap: 0.5rem;
  align-items: baseline;
  transition: color var(--t-micro) var(--ease);
}
.year__what:hover {
  color: var(--accent);
}
.year__what .btn__arrow {
  transition: transform var(--t-micro) var(--ease);
}
.year__what:hover .btn__arrow {
  transform: translateX(4px);
}

/* Final CTA screen */
.close {
  min-block-size: 80svh;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--s3);
  text-align: start;
}

/* 9 ── Route pages ───────────────────────────────────────────────────────── */

.rhero {
  position: relative;
  padding-block: var(--s5) var(--s4);
  overflow: clip;
  isolation: isolate;
  min-block-size: min(78svh, 44rem);
  display: grid;
  align-content: end;
}
.rhero__photo {
  position: absolute;
  inset: 0;
  z-index: -1;
}
/* <picture> is inline by default: give it the box, or the img's 100% is auto
   and a wide pano letterboxes instead of covering. */
.rhero__photo picture {
  display: block;
  block-size: 100%;
}
.rhero__photo img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.rhero__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgb(5 6 9 / 58%) 0%,
    rgb(5 6 9 / 28%) 34%,
    rgb(5 6 9 / 80%) 74%,
    rgb(5 6 9 / 94%) 90%,
    #050609 96%,
    var(--ink) 100%
  );
}
.rhero__num {
  font-family: var(--font-display);
  font-size: var(--fs-num-xl);
  line-height: var(--lh-num);
  color: var(--c, var(--text));
  font-variant-numeric: tabular-nums;
}
.rhero__num sup {
  font-size: 0.26em;
  vertical-align: super;
}
.rhero__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: #eceaf4;
}

/* Facts table - hairlines and tabular figures, no boxes. */
.facts {
  inline-size: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.facts th,
.facts td {
  border-block-end: 1px solid var(--rule);
  padding: 0.85rem 0.5rem;
  text-align: start;
  vertical-align: baseline;
}
.facts th {
  font-weight: var(--w-regular);
  color: var(--text-dim);
  font-size: var(--fs-small);
  padding-inline-start: 0;
  inline-size: 45%;
}
.facts td {
  text-align: end;
  padding-inline-end: 0;
  font-weight: var(--w-bold);
}
.facts caption {
  text-align: start;
  padding-block-end: var(--s2);
  color: var(--text-dim);
  font-size: var(--fs-small);
}

/* Terrain bar: the 80/15/5 split as one line, not three pie charts. */
.terrain {
  display: flex;
  block-size: 4px;
  gap: 2px;
  margin-block: var(--s2);
}
.terrain i {
  display: block;
  background: var(--c, var(--text));
}
.terrain i:nth-child(2) {
  opacity: 0.55;
}
.terrain i:nth-child(3) {
  opacity: 0.28;
}
.terrain-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  font-size: var(--fs-small);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
/* Each label wears the dot of its bar segment, same colour and same fade. */
.terrain-key span::before {
  content: "";
  display: inline-block;
  inline-size: 0.55em;
  block-size: 0.55em;
  border-radius: 50%;
  margin-inline-end: 0.45em;
  vertical-align: 0.05em;
  background: var(--c, var(--text));
}
.terrain-key span:nth-child(2)::before {
  opacity: 0.55;
}
.terrain-key span:nth-child(3)::before {
  opacity: 0.28;
}

/* Elevation profile + track map */
.profile {
  position: relative;
  touch-action: pan-y;
  cursor: crosshair;
}
.profile svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  overflow: visible;
}
.profile__line {
  fill: none;
  stroke: var(--c, var(--text));
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.profile__fill {
  fill: var(--c, var(--text));
  opacity: 0.11;
}
.profile__grid {
  stroke: var(--rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.profile__tick {
  fill: var(--text-dim);
  font-family: var(--font-body);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.profile__aid {
  fill: var(--ink);
  stroke: var(--c, var(--text));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.profile__cursor {
  stroke: var(--c, var(--accent));
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  opacity: 0;
}
.profile__dot {
  fill: var(--c, var(--accent));
  opacity: 0;
}
.profile.is-live .profile__cursor,
.profile.is-live .profile__dot {
  opacity: 1;
}
.profile__axis {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  margin-block-start: 0.4rem;
}
.readout {
  display: flex;
  gap: var(--s3);
  margin-block-end: var(--s2);
  font-variant-numeric: tabular-nums;
  min-block-size: 2.5rem;
}
.readout div {
  display: grid;
}
.readout b {
  font-family: var(--font-display);
  font-size: var(--fs-data);
  font-weight: var(--w-bold);
  line-height: 1;
}
.readout > div > span {
  font-size: var(--fs-micro);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.map {
  position: relative;
}
.map svg {
  inline-size: 100%;
  block-size: auto;
  max-block-size: 26rem;
}
/* With the basemap up, the box takes a fixed frame and the outline steps aside.
   The basemap follows the theme: paper-light by day, night-blue dark by night
   (map.js derives the dark palette from the same style.json). */
.map.is-gl {
  aspect-ratio: 4 / 5;
  max-block-size: 30rem;
}
.map.is-gl > svg {
  display: none;
}
.map__gl {
  block-size: 100%;
  border-radius: 1rem;
  overflow: clip;
  border: 1px solid var(--rule);
  background: #243230; /* the dark style's land colour, so the frame matches while tiles load */
}
html[data-theme="day"] .map__gl {
  background: #f2efea; /* the light style's land colour */
}
.map__gl .maplibregl-ctrl-attrib {
  font-size: 11px;
}
/* By night the basemap goes dark and MapLibre's white controls follow. The
   surface hexes mirror the dark map palette in map.js, like the land colour
   above; text reads the theme tokens. */
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl-group {
  background: #2c3b38;
}
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl-group button + button {
  border-top-color: rgb(236 234 244 / 12%);
}
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl button .maplibregl-ctrl-icon,
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl-attrib-button {
  filter: invert(1) brightness(1.4);
}
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl-attrib {
  background: rgb(36 50 48 / 78%);
  color: var(--text-dim);
}
html:not([data-theme="day"]) .map__gl .maplibregl-ctrl-attrib a {
  color: var(--text);
}
/* Aid-station tip: what is on the table there. Sits over the profile and the map. */
.tip {
  position: absolute;
  z-index: 5;
  translate: -50% calc(-100% - 0.7rem);
  display: grid;
  padding: 0.45rem 0.7rem;
  border-radius: 0.6rem;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--rule-strong);
  box-shadow: 0 8px 24px rgb(5 6 9 / 25%);
  font-size: var(--fs-micro);
  line-height: 1.35;
  white-space: nowrap;
  pointer-events: none;
}
.tip[hidden] {
  display: none;
}
.tip b {
  font-weight: var(--w-bold);
}
.tip span {
  color: var(--text-dim);
}
.map__track {
  fill: none;
  stroke: var(--c, var(--text));
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.map__aid {
  fill: var(--ink);
  stroke: var(--c, var(--text));
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.map__here {
  fill: var(--c, var(--accent));
  opacity: 0;
}
.map.is-live .map__here {
  opacity: 1;
}
.map__start {
  fill: var(--c, var(--accent));
}

/* 10 ── Editorial documents (reglament, route sections, entorn) ──────────── */

.doc {
  display: grid;
  gap: var(--s4);
}
@media (min-width: 60rem) {
  .doc {
    grid-template-columns: 3fr 9fr;
    gap: var(--s5) var(--gutter);
    align-items: start;
  }
}
.doc__index {
  display: none;
}
@media (min-width: 60rem) {
  .doc__index {
    display: block;
    position: sticky;
    inset-block-start: calc(var(--header-h) + 2rem);
  }
  .doc__index ol {
    counter-reset: idx;
    border-block-start: 1px solid var(--rule);
  }
  .doc__index a {
    display: block;
    padding-block: 0.55rem;
    border-block-end: 1px solid var(--rule);
    text-decoration: none;
    font-size: var(--fs-small);
    color: var(--text-dim);
    transition: color var(--t-micro) var(--ease);
  }
  .doc__index a::before {
    counter-increment: idx;
    content: counter(idx, decimal-leading-zero) " ";
    font-variant-numeric: tabular-nums;
    color: var(--rule-strong);
    padding-inline-end: 0.5rem;
  }
  .doc__index a:hover,
  .doc__index a[aria-current="true"] {
    color: var(--text);
  }
  .doc__index a[aria-current="true"]::before {
    color: var(--accent);
  }
}
.doc__body {
  min-inline-size: 0; /* a wide table scrolls inside .table-scroll instead of widening the page */
}
.doc__body > section + section {
  margin-block-start: var(--s5);
}
.doc__body h2 {
  font-size: var(--fs-h2);
  margin-block-end: var(--s3);
}
.doc__body h3 {
  font-size: var(--fs-h3);
  margin-block: var(--s3) var(--s1);
}
.doc__body p,
.doc__body li {
  max-inline-size: 62ch;
  text-wrap: pretty;
}
.doc__body p + p {
  margin-block-start: 1.1em;
}
.doc__body ul {
  margin-block-start: var(--s2);
}
.doc__body ul li {
  padding-inline-start: 1.25rem;
  position: relative;
  margin-block-start: 0.5rem;
  color: var(--text-dim);
}
.doc__body ul li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.75em;
  inset-inline-start: 0;
  inline-size: 0.5rem;
  block-size: 1px;
  background: var(--rule-strong);
}
.doc__body dl {
  margin-block-start: var(--s2);
}
.doc__body dt {
  font-weight: var(--w-bold);
  border-block-start: 1px solid var(--rule);
  padding-block-start: 0.75rem;
  margin-block-start: 0.75rem;
}
.doc__body dd {
  margin: 0.2rem 0 0;
  color: var(--text-dim);
  max-inline-size: 62ch;
}

.datatable {
  inline-size: 100%;
  border-collapse: collapse;
  margin-block-start: var(--s2);
  font-variant-numeric: tabular-nums;
  text-align: start;
}
.datatable th,
.datatable td {
  border-block-end: 1px solid var(--rule);
  padding: 0.7rem 0.5rem;
  text-align: start;
  vertical-align: baseline;
}
.datatable th:first-child,
.datatable td:first-child {
  padding-inline-start: 0;
}
.datatable th:last-child,
.datatable td:last-child {
  padding-inline-end: 0;
  text-align: end;
}
.datatable thead th {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-dim);
}
.datatable tbody th {
  font-weight: var(--w-regular);
}
.datatable td:last-child {
  font-weight: var(--w-bold);
  white-space: nowrap;
}
.table-scroll {
  overflow-x: auto;
}

/* At a glance: four short facts under a kicker-style label. */
.glance {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s3) var(--s4);
  margin: 0;
  padding-block: var(--s3);
  border-block: 1px solid var(--rule);
}
.glance dt {
  font-family: var(--font-display);
  font-size: var(--fs-kicker);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--accent);
}
.glance dd {
  margin: 0.4rem 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  text-wrap: pretty;
}
.glance dd b {
  font-weight: var(--w-bold);
}

/* Cut-off times: one track per route, drawn to scale, a dot per control.
   Labels alternate below/above the line so neighbours never collide; on a
   phone the track turns into a vertical timeline. */
.cuts {
  display: grid;
  gap: var(--s4);
  margin-block-start: var(--s3);
}
.cuts__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
  font-size: var(--fs-h3);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-snug);
}
.cuts__name::before {
  content: "";
  inline-size: 0.6rem;
  block-size: 0.6rem;
  border-radius: 50%;
  background: var(--c);
  align-self: center;
}
.cuts__name small {
  font-size: var(--fs-small);
  font-weight: var(--w-regular);
  color: var(--text-dim);
}
.cuts__track {
  position: relative;
  inline-size: calc(var(--len) / 21 * 100%);
  block-size: 2px;
  margin: 5.5rem 0 6rem;
  padding: 0;
  list-style: none;
  background: var(--rule-strong);
}
.cuts__track li {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(var(--km) / var(--len) * 100%);
  translate: -50% 0;
  inline-size: max-content;
  max-inline-size: 7.5rem;
  padding-block-start: 1.1rem;
  text-align: center;
  font-size: var(--fs-small);
  line-height: 1.3;
}
.cuts__track li:nth-child(even) {
  inset-block-start: auto;
  inset-block-end: 0;
  padding-block: 0 1.1rem;
}
.cuts__track li::before {
  content: "";
  position: absolute;
  inset-block-start: -0.35rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border-radius: 50%;
  background: var(--c);
}
.cuts__track li:nth-child(even)::before {
  inset-block-start: auto;
  inset-block-end: -0.45rem;
}
.cuts__track li > * {
  display: block;
}
.cuts__track b {
  font-size: var(--fs-body);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.cuts__track small {
  color: var(--text-dim);
  font-size: var(--fs-caption);
}
.cuts__track .cuts__start {
  translate: 0 0;
  text-align: start;
}
.cuts__track .cuts__start::before {
  inset-inline-start: 0;
  translate: 0 0;
}
.cuts__track .cuts__end {
  translate: -100% 0;
  text-align: end;
}
.cuts__track .cuts__end::before {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: 0 0;
}
@media (max-width: 47.99rem) {
  .cuts__track {
    display: grid;
    gap: var(--s2);
    inline-size: auto;
    block-size: auto;
    margin: var(--s2) 0 0 0.3rem;
    padding-inline-start: var(--s3);
    border-inline-start: 2px solid var(--rule-strong);
    background: none;
  }
  .cuts__track li,
  .cuts__track li:nth-child(even),
  .cuts__track .cuts__start,
  .cuts__track .cuts__end {
    position: relative;
    inset: auto;
    translate: none;
    max-inline-size: none;
    padding: 0;
    text-align: start;
  }
  .cuts__track li::before,
  .cuts__track li:nth-child(even)::before,
  .cuts__track .cuts__start::before,
  .cuts__track .cuts__end::before {
    inset: 0.3rem auto auto calc(-1 * var(--s3) - 0.5rem);
    translate: none;
  }
}

.note {
  font-size: var(--fs-small);
  color: var(--text-dim);
  margin-block-start: var(--s2);
  max-inline-size: 62ch;
}

/* 404 */
.oops {
  min-block-size: 70svh;
  display: grid;
  align-content: center;
  gap: var(--s3);
}

/* 11 ── Motion ───────────────────────────────────────────────────────────── */

/* Day/night switch: every element crossfades together, nothing slides. */
html.theming::view-transition-group(*),
html.theming::view-transition-old(*),
html.theming::view-transition-new(*) {
  animation-duration: var(--t-theme);
  animation-timing-function: var(--ease-io);
}

@view-transition {
  navigation: auto;
}

/* Masked line rise: the one reveal primitive. Wrap each line in .rise__l. */
.rise__l {
  display: block;
  overflow: hidden;
  padding-block-end: 0.12em;
  margin-block-end: -0.12em;
}
.rise__l > span {
  display: block;
  transition: transform var(--t-hero) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rise__l > span {
  transform: translateY(110%);
}
.is-in .rise__l > span {
  transform: none;
}
/* The hero is above the fold: it plays on load instead of waiting for scroll. */
.js .hero .rise__l > span {
  transform: none;
  animation: rise-in var(--t-hero) var(--ease) calc(var(--dusk-text) + var(--d, 0ms)) both;
}
@keyframes rise-in {
  from {
    /* 140%: the wordmark's glyphs overshoot its 0.86 line box. */
    transform: translateY(140%);
  }
}

/* Everything else fades up once, staggered by --d. */
.reveal {
  transition:
    opacity var(--t-reveal) var(--ease),
    transform var(--t-reveal) var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Images arrive with a 1.04 → 1 settle. */
.reveal-img {
  overflow: clip;
}
.js .reveal-img > img {
  transform: scale(1.04);
  opacity: 0;
}
.reveal-img > img {
  transition:
    transform var(--t-draw) var(--ease),
    opacity var(--t-hero) var(--ease);
}
.reveal-img.is-in > img {
  transform: none;
  opacity: 1;
}

/* Profile draws itself on entry. */
.profile__line {
  stroke-dasharray: var(--len, 4000);
  stroke-dashoffset: var(--len, 4000);
}
.profile.is-in .profile__line {
  transition: stroke-dashoffset var(--t-draw) var(--ease-io);
  stroke-dashoffset: 0;
}
.profile__fill,
.profile__aid {
  opacity: 0;
  transition: opacity var(--t-reveal) var(--ease) var(--d, 0ms);
}
.profile.is-in .profile__fill {
  opacity: 0.11;
  transition-delay: 700ms;
}
.profile.is-in .profile__aid {
  opacity: 1;
}
.profile__aid {
  transform-box: fill-box;
  transform-origin: center;
  scale: 0;
  transition:
    scale var(--t-reveal) var(--ease) var(--d, 0ms),
    opacity var(--t-reveal) var(--ease) var(--d, 0ms);
}
.profile.is-in .profile__aid {
  scale: 1;
}

/* Scroll-driven where the browser has it; IntersectionObserver otherwise. */
@supports (animation-timeline: view()) {
    to {
      opacity: 1;
    }
  }
  .timeline__progress i {
    transform: scaleX(0);
    animation: fill-x linear both;
    animation-timeline: scroll(nearest inline);
  }
  @keyframes fill-x {
    to {
      transform: scaleX(1);
    }
  }
}
@supports not (animation-timeline: view()) {
  .timeline__progress i {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
  }
  .rise__l > span,
  .reveal,
  .reveal-img > img {
    transform: none;
    opacity: 1;
  }
  .manifesto p {
    opacity: 1;
    animation: none;
  }
  .ticker__track {
    animation: none;
    transform: none;
  }
  .horizon {
    transform: none;
    animation: none;
  }
  .profile__line {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  .profile__fill {
    opacity: 0.11;
  }
  .profile__aid {
    opacity: 1;
    scale: 1;
  }
  .scroll-cue::after {
    animation: none;
  }
  .hero__stars i {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .header,
  .mbar__tabs {
    background: var(--ink);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media print {
  .header,
  .mbar,
  .ticker,
  .scroll-cue,
  .footer__word {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* Language selector - in the footer it whispers like the copyright line,
   sitting alone at the far end; the sheet keeps its louder pills. */
.footer__lang,
.sheet__lang {
  display: flex;
  gap: var(--s3);
}
.footer__lang {
  margin-inline-start: auto;
  gap: var(--s2);
}
.footer__lang a,
.sheet__lang a {
  text-decoration: none;
  color: var(--text-dim);
  transition: color var(--t-micro) var(--ease);
}
.sheet__lang a {
  font-size: var(--fs-small);
  font-weight: var(--w-bold);
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.footer__lang a:hover,
.sheet__lang a:hover {
  color: var(--text);
}
.footer__lang a[aria-current] {
  color: var(--text);
}
.sheet__lang a[aria-current] {
  color: var(--accent);
}
.sheet__lang {
  justify-content: center;
  padding-block: 0.25rem 0.75rem;
}