/* KAISAR Home, first screen. Measured from the approved comp (.impeccable/mocks/home-d-halftone.png, 2528 px wide):
   one comp pixel is 100vw / 2528, written below as calc(N * var(--px)). */

@font-face {
  font-family: "Lexend";
  src: url("fonts/lexend.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Zalando Sans";
  src: url("fonts/zalando-sans.woff2") format("woff2");
  font-weight: 200 900;
  font-display: swap;
}

:root {
  --ground: #fbfafb;
  --ink: #320d47;            /* the wordmark's purple: all text */
  --ink-soft: #5b3a6b;
  --copper: #a5502f;         /* the one filled action */
  --copper-ink: #94472a;     /* copper as text on the white ground */
  --ghost: #f4eaee;          /* the pale words behind the figure */
  --display: "Lexend", "Trebuchet MS", sans-serif;
  --text: "Zalando Sans", "Segoe UI", system-ui, sans-serif;
  --px: min(calc(100vw / 2528), max(calc(100vh / 1696), 0.47px));      /* one comp pixel; capped so the first screen fits the window's height */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

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

html { background: var(--ground); scrollbar-color: var(--ink) var(--ground); }

body {
  margin: 0;
  color: var(--ink);
  font: 400 1rem/1.5 var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--ground); }

a { color: inherit; text-underline-offset: 0.22em; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

img { display: block; max-width: 100%; height: auto; }

.skip {
  position: absolute; left: 1rem; top: -4rem; z-index: 10;
  padding: 0.6rem 1rem; background: var(--ink); color: var(--ground); text-decoration: none;
  transition: top 0.2s var(--ease-out);
}
.skip:focus { top: 1rem; }

/* ---------- Navigation ---------- */

.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 3;
  height: calc(196 * var(--px));
  display: flex; align-items: center;
  padding: 0 calc(52 * var(--px)) 0 calc(51 * var(--px));
  gap: calc(38 * var(--px));
}
.nav__logo { width: calc(354 * var(--px)); flex: none; margin-right: auto; }
.nav__links { display: flex; gap: calc(54 * var(--px)); }
.nav__links a, .nav__lang a {
  font: 500 calc(25.5 * var(--px))/1 var(--text);
  letter-spacing: 0.035em; text-transform: uppercase;
  padding: 0.6em 0;
  text-decoration: underline 1.5px transparent; text-underline-offset: 0.55em;
  transition: text-decoration-color 0.35s var(--ease-out);
}
.nav__links a:hover, .nav__lang a:hover { text-decoration-color: currentColor; }
.nav__lang { display: flex; align-items: center; gap: 0.45em; font: 500 calc(25.5 * var(--px))/1 var(--text); }
.nav__lang a:not([aria-current]) { color: var(--ink-soft); }

/* ---------- Buttons and links ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--text); text-decoration: none; white-space: nowrap;
  border-radius: calc(10 * var(--px));
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
.button:active { transform: translateY(1px); }
.button--outline {
  height: calc(63 * var(--px)); padding: 0 calc(26 * var(--px));
  font-weight: 500; font-size: calc(25.5 * var(--px)); letter-spacing: 0.035em; text-transform: uppercase;
  color: var(--copper-ink); border: 1.5px solid var(--copper);
}
.button--outline:hover { background: var(--copper); color: #fff; }
.button--solid {
  height: calc(90 * var(--px)); padding: 0 calc(46 * var(--px));
  font-weight: 500; font-size: calc(37 * var(--px));
  background: var(--copper); color: #fff;
}
.button--solid:hover { background: var(--ink); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  font: 400 calc(37 * var(--px))/1 var(--text); text-decoration: none;
}
.arrow-link svg { width: 0.95em; height: 0.95em; transition: transform 0.35s var(--ease-out); }
.arrow-link:hover svg { transform: translateX(0.3em); }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: calc(1696 * var(--px));
  overflow: hidden;
  isolation: isolate;
}

.hero__words {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  animation: drift 16s ease-in-out infinite alternate;
}
.hero__word { font: 800 165px/1 var(--display); fill: var(--ghost); text-anchor: middle; }
.hero__word--far { font-size: 120px; opacity: 0.8; }
.hero__word--near { font-size: 205px; }
.hero__word--low { font-size: 165px; }
@keyframes drift {
  from { transform: translate3d(-0.5vw, 0.25vw, 0); }
  to { transform: translate3d(0.6vw, -0.3vw, 0); }
}

.hero__k, .hero__stream, .hero__figure { position: absolute; z-index: 1; }
.hero__k { left: calc(458 * var(--px)); top: calc(425 * var(--px)); width: calc(415 * var(--px)); height: calc(459 * var(--px)); object-fit: contain; }
.hero__stream { left: calc(880 * var(--px)); top: calc(430 * var(--px)); width: calc(436 * var(--px)); height: calc(750 * var(--px)); object-fit: fill; }
.hero__figure { left: calc(1331 * var(--px)); top: calc(236 * var(--px)); width: calc(843 * var(--px)); height: calc(1011 * var(--px)); }

.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; opacity: 0; }

/* Once the canvas is drawing, it replaces the still dots, and the K arrives with them. */
.hero.is-live .hero__canvas { opacity: 1; }
.hero.is-live .hero__figure, .hero.is-live .hero__stream { visibility: hidden; }
.hero.is-live .hero__k { animation: k-arrive 1.5s var(--ease-out) 0.55s both; }
@keyframes k-arrive {
  from { clip-path: inset(0 0 0 100%); filter: blur(calc(14 * var(--px))); transform: translateX(calc(40 * var(--px))); }
  to { clip-path: inset(0 0 0 0); filter: blur(0); transform: none; }
}

.hero__copy { position: absolute; z-index: 2; left: calc(57 * var(--px)); top: calc(986 * var(--px)); }
.hero__title {
  margin: 0;
  font: 800 calc(226 * var(--px))/0.815 var(--display);
  letter-spacing: -0.012em;
  margin-left: calc(-9 * var(--px));     /* optical: the s overhangs its side bearing */
}
.hero__sub { margin: calc(46 * var(--px)) 0 0; font: 400 calc(53 * var(--px))/1.15 var(--text); }
.hero__actions { margin: calc(34 * var(--px)) 0 0; display: flex; align-items: center; gap: calc(44 * var(--px)); }

.hero__label {
  position: absolute; z-index: 2; margin: 0; top: calc(1621 * var(--px));
  font: 500 calc(25.5 * var(--px))/1.2 var(--text); letter-spacing: 0.08em; text-transform: uppercase;
}
.hero__label--end { right: calc(55 * var(--px)); }

/* The map version: Sarawak in dots takes the figure's place and runs wide across the right. */
.hero--map .hero__figure { left: calc(1050 * var(--px)); top: calc(262 * var(--px)); width: calc(1420 * var(--px)); height: auto; }
.hero--map .hero__stream { display: none; }

/* ---------- Narrow screens: the same parts, stacked, figure first ---------- */

@media (max-width: 820px) {
  :root { --px: calc(100vw / 780); }

  .nav { height: 76px; padding: 0 16px; gap: 12px; }
  .nav__logo { width: 132px; }
  .nav__links { display: none; }
  .nav__lang, .nav__lang a { font-size: 13px; }
  .button--outline { height: 40px; padding: 0 14px; font-size: 13px; border-radius: 6px; }

  .hero { height: auto; padding: 84px 16px 28px; display: grid; }
  .hero__words { inset: 60px 0 auto 0; height: 118vw; }
  .hero__word { font-size: 240px; }
  .hero__word--far, .hero__word--low { display: none; }

  .hero__figure { position: relative; left: auto; top: auto; width: 80vw; height: auto; justify-self: end; margin: 34px -16px 0 0; }
  .hero__k { left: 16px; top: 92px; width: 19vw; height: auto; }
  .hero__stream { display: none; }

  .hero__copy { position: relative; left: auto; top: auto; margin-top: 3vw; }
  .hero__title { font-size: 17.4vw; line-height: 0.84; margin-left: -0.7vw; }
  .hero__sub { margin-top: 18px; font-size: 1.125rem; line-height: 1.35; max-width: 24ch; }
  .hero__actions { margin-top: 22px; gap: 22px; flex-wrap: wrap; }
  .button--solid { height: 52px; padding: 0 26px; font-size: 1.0625rem; border-radius: 6px; }
  .arrow-link { font-size: 1.0625rem; padding: 14px 0; }

  .hero__label { position: static; margin-top: 30px; font-size: 11px; }
}

@media (max-width: 820px) {
  .hero--map .hero__figure { width: 100%; margin: 96px 0 0; justify-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__words { animation: none; }
  .hero.is-live .hero__k { animation: none; }
  * { transition-duration: 0.01ms !important; }
}

/* The living map: the hero when Sarawak in dots is its subject, the division buttons and card that ride on it,
   and the text version of the same map below. Loaded after styles.css. */

.hero--live .hero__figure { left: auto; right: calc(53 * var(--px)); top: calc(250 * var(--px)); width: calc(1400 * var(--px)); height: auto; }
.hero--live.is-live .hero__figure { visibility: hidden; }
.hero--live.is-live .hero__k { animation: k-arrive 1.5s var(--ease-out) 0.2s both; }

.map { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

.map__hint {
  position: absolute; z-index: 3; right: calc(55 * var(--px)); top: calc(232 * var(--px)); margin: 0;
  font: 400 max(13px, calc(34 * var(--px)))/1.2 var(--text); color: var(--ink-soft);
  transition: opacity 0.3s var(--ease-out);
}
.has-selection .map__hint { opacity: 0; }

/* Division buttons. The script moves each one onto its node; the ring is the same node the K's arms end in. */
.map__nodes { opacity: 0; transition: opacity 0.9s var(--ease-out) 1.7s; }
.is-live .map__nodes { opacity: 1; }
.map__node {
  position: absolute; left: 0; top: 0; margin: -1.05em 0 0 -0.95em;      /* puts the ring's centre on the point */
  display: flex; align-items: center; gap: 0.45em; padding: 0.55em 0.6em;
  font: 500 max(12px, calc(23 * var(--px)))/1 var(--text); color: var(--ink); white-space: nowrap;
  background: none; border: 0; cursor: pointer; pointer-events: auto;
  transition: opacity 0.3s var(--ease-out);
  will-change: transform;
}
.map__node::before {
  content: ""; flex: none; width: 0.7em; height: 0.7em; border-radius: 50%;
  border: 2px solid var(--copper); background: var(--ground);
  transition: background-color 0.25s var(--ease-out), scale 0.25s var(--ease-out);
}
.map__node:hover::before, .map__node[aria-pressed="true"]::before { background: var(--copper); scale: 1.4; }
.map__node-name { paint-order: stroke fill; -webkit-text-stroke: 4px var(--ground); }      /* keeps names readable over the dots */
.map__node-count { font-weight: 700; color: var(--copper-ink); font-variant-numeric: tabular-nums; paint-order: stroke fill; -webkit-text-stroke: 4px var(--ground); }
.has-selection .map__node:not([aria-pressed="true"]) { opacity: 0.4; }

.map__card {
  position: absolute; right: calc(55 * var(--px)); top: calc(250 * var(--px)); width: min(21rem, 27vw);
  padding: 1.3rem 1.4rem 1.1rem; pointer-events: auto;
  background: #fff; border: 1.5px solid #dcd0e1; border-radius: 12px;      /* a drawn edge, like the filter buttons; nothing on this page casts a shadow */
  transition: opacity 0.35s var(--ease-out), translate 0.35s var(--ease-out);
}
.map__card[hidden] { display: none; }
@starting-style { .map__card { opacity: 0; translate: 0 10px; } }
.map__card-title { margin: 0; font: 800 1.9rem/1 var(--display); letter-spacing: -0.01em; text-transform: lowercase; }
.map__card-count { margin: 0.65rem 0 0; font-size: 1.05rem; line-height: 1.4; }
.map__card-sectors { margin: 0.15rem 0 0; color: var(--ink-soft); }
.map__card .button--solid { margin-top: 1.1rem; height: 3rem; padding: 0 1.3rem; font-size: 1rem; border-radius: 8px; }
.map__card-back {
  display: block; margin-top: 0.7rem; padding: 0.45rem 0;
  background: none; border: 0; cursor: pointer;
  font: 500 0.9rem/1.2 var(--text); color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 0.25em;
}
.map__card-back:hover { color: var(--ink); }

/* ---------- The map as text ---------- */

.divisions { padding: clamp(3rem, 7vw, 6rem) calc(57 * var(--px)) clamp(3rem, 6vw, 5rem); border-top: 1px solid #ece3ee; }
.divisions__title { margin: 0 0 1.5rem; font: 800 clamp(1.8rem, 3.4vw, 3rem)/1 var(--display); letter-spacing: -0.012em; text-transform: lowercase; }
.divisions__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0 2.5rem; }
.divisions__list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.85rem 0; border-bottom: 1px solid #ece3ee;
  font-weight: 500; text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
.divisions__list a span { color: var(--ink-soft); font-weight: 400; }
.divisions__list a:hover { color: var(--copper-ink); }
.divisions__note { margin: 1.5rem 0 0; max-width: 70ch; font-size: 0.9rem; color: var(--ink-soft); }

@media (max-width: 820px) {
  .hero--live .hero__figure { position: relative; left: auto; top: auto; width: 116%; max-width: none; height: auto; margin: 132px -8% 0; justify-self: center; }
  .hero--live .hero__k { top: 88px; width: 17vw; }
  .map__hint { left: calc(30px + 17vw); right: 16px; top: 100px; font-size: 0.95rem; }
  .map__node { font-size: 12px; padding: 16px; margin: -20.2px 0 0 -20.2px; }       /* a 40px touch target around each ring */
  .map__node-name, .map__node-count { display: none; }
  .map__node[aria-pressed="true"] .map__node-name { display: inline; }
  .map__card { left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
  .divisions { padding-inline: 16px; }
}

/* ---------- Sector filter: one sector at a time. It exists only while the living map is running. ---------- */

.map__filters { display: none; }
.can-filter .map__filters {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem;
  position: absolute; z-index: 4; right: calc(55 * var(--px)); bottom: calc(132 * var(--px)); max-width: 60vw;
  opacity: 0; transition: opacity 0.9s var(--ease-out) 1.9s;
}
.is-live .map__filters { opacity: 1; }
.map__status { margin: 0; font: 400 max(13px, calc(26 * var(--px)))/1.3 var(--text); color: var(--ink-soft); text-align: right; }
.map__filter-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: max(6px, calc(12 * var(--px))); }
.map__filter {
  height: max(34px, calc(58 * var(--px))); padding: 0 max(11px, calc(22 * var(--px)));
  font: 500 max(12.5px, calc(24 * var(--px)))/1 var(--text); color: var(--ink);
  background: var(--ground); border: 1.5px solid #dcd0e1; border-radius: max(6px, calc(10 * var(--px))); cursor: pointer;
  transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.map__filter:hover { border-color: var(--ink); }
.map__filter[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.is-filtered .map__node-count { display: none; }       /* a filtered map shows where a sector is published, not how many */

@media (max-width: 1100px) {
  .can-filter .map__filters { max-width: 46vw; }
}
/* Phones: one row to swipe, between the hint and the map, so the headline keeps its place on the first screen.
   The words that say where a sector is take the hint's place. */
@media (max-width: 820px) {
  .can-filter .map__filters { display: block; inset: 0 0 auto 0; max-width: none; }
  .map__status { position: absolute; left: calc(30px + 17vw); right: 16px; top: 100px; font-size: 0.95rem; line-height: 1.35; text-align: left; }
  .is-filtered .map__hint { opacity: 0; }
  .map__filter-row {
    position: absolute; left: 0; right: 0; top: 172px; padding: 0 56px 0 16px;
    flex-wrap: nowrap; justify-content: flex-start; gap: 8px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  }
  .map__filter-row::-webkit-scrollbar { display: none; }
  .map__filter { flex: none; height: 40px; padding: 0 14px; font-size: 14px; }
}

/* Everything below the first screen, the header once the page is scrolled, and the phone menu.
   Loaded after styles.css and map.css. Two grounds only: the light ground and the wordmark's ink.
   This file is the layout at rest. What moves, and how the scroll drives it, is in motion.css. */

:root {
  --gutter: calc(57 * var(--px));
  --nav-h: calc(196 * var(--px));                 /* the header's height in styles.css */
  --nav-stuck: max(60px, calc(118 * var(--px)));  /* the bar once the page is scrolled */
  --band: clamp(3.25rem, 6vw, 6.5rem);       /* the space above and below a section */
  --line: #e7dcea;                 /* hairlines on the light ground */
  --quiet: #9b86a8;                /* large type that is waiting its turn: 3.2 to 1 on the ground */
  --on-ink: #fbfafb;
  --on-ink-soft: #d5c4de;          /* secondary text on ink, tinted from it */
  --copper-lit: #e89268;           /* copper as line and text on ink */
  --step-0: clamp(1rem, 0.4rem + 0.72vw, 1.5rem);
  --step-1: clamp(1.15rem, 0.45rem + 1.05vw, 2.1rem);
  --step-small: clamp(0.9375rem, 0.5rem + 0.55vw, 1.2rem);
}

html { scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- Header: over the first screen at the top, a solid bar once scrolled ----------
   The header's box never changes size. Scrolled, a bar fades in behind it and its parts slide up
   and tighten, by opacity and transform only, so nothing on the page is laid out again. */

.js .nav { position: fixed; pointer-events: none; }
.js .nav > * { pointer-events: auto; }
.nav::before {
  content: ""; position: absolute; z-index: -1; inset: 0 0 auto 0; height: var(--nav-stuck);
  background: var(--ground); box-shadow: 0 1px 0 var(--line);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out);
}
.nav.is-stuck::before { opacity: 1; pointer-events: auto; }
.nav__logo, .nav__links, .nav__lang, .nav__toggle { transition: translate 0.4s var(--ease-out), scale 0.4s var(--ease-out); }
.nav__logo { transform-origin: 0 50%; }
.nav.is-stuck :is(.nav__logo, .nav__links, .nav__lang, .nav__toggle, .nav__join) { translate: 0 calc((var(--nav-stuck) - var(--nav-h)) / 2); }
.nav.is-stuck .nav__logo { scale: 0.72; }

.nav__toggle { display: none; }
.nav__menu { display: contents; }

/* ---------- Shared section parts ---------- */

.answers, .partners, .join, .sectors__frame { padding: var(--band) var(--gutter); }

.title {
  margin: 0; max-width: 18ch;
  font: 800 1rem/0.94 var(--display); font-size: clamp(2.35rem, 5.4vw, 6rem);      /* the size on its own line: the design check cannot read it inside the shorthand */
  letter-spacing: -0.02em; text-wrap: balance;
}
/* A question, where a heading is one: in copper, and typed out as it arrives (motion.css). */
.ask { color: var(--copper-ink); }
.head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end;
  gap: 1.25rem clamp(2rem, 5vw, 6rem);
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}
.lede { margin: 0; max-width: 32ch; font: 400 var(--step-1)/1.35 var(--text); color: var(--ink-soft); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.35em;
  font-weight: 500; color: var(--copper-ink);
  text-decoration: underline 1.5px color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.3em;
  transition: text-decoration-color 0.25s var(--ease-out);
}
.text-link:hover { text-decoration-color: currentColor; }
.text-link svg { width: 0.85em; height: 0.85em; transition: translate 0.35s var(--ease-out); }
.text-link:hover svg { translate: 0.18em 0; }

/* ---------- About: one line, one rolling word, three states ----------
   The frame is laid out to fill a screen from top to bottom: the sentence at the top, the rolling word and its
   three states filling the rest. Sizes follow the window's height as well as its width.
   At rest the rolling word shows its last state, "owners."; the scroll rolls it there from "users." (motion.css). */

.about__frame {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between;
  gap: clamp(1rem, 3vh, 2.25rem) clamp(2rem, 4vw, 5rem);
  padding: var(--band) var(--gutter);
}
.about__lead { margin: 0; max-width: 30ch; font: 400 var(--step-1)/1.35 var(--text); color: var(--ink-soft); }
.about__line { margin: 0; font: 800 1rem/0.94 var(--display); font-size: clamp(1.9rem, min(5.4vw, 8.5vh), 6rem); letter-spacing: -0.02em; }
.about__pre { display: block; }
.about__roll {
  display: block; height: 1.08em; overflow: hidden; margin: 0.05em 0 0 -0.035em;
  font-size: clamp(3.6rem, min(21vw, 28vh), 20rem); line-height: 1.08; letter-spacing: -0.035em;
}
.about__words { display: block; translate: 0 -2.16em; }
.about__words span { display: block; height: 1.08em; }
.about__words span:nth-child(1) { color: var(--quiet); }
.about__words span:nth-child(3) { color: var(--copper-ink); }

/* The three states on one circuit line, so all of it can be read without waiting for the roll. */
.about__rail {
  list-style: none; margin: 0; padding: 0; --node: 0.75rem; --gap: clamp(1rem, 3vw, 3rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--gap);
}
.about__rail li { position: relative; padding-top: calc(var(--node) + 0.8rem); font-size: var(--step-0); line-height: 1.4; color: var(--ink-soft); }
.about__rail strong { display: block; font: 800 var(--step-1)/1.1 var(--display); letter-spacing: -0.015em; text-transform: lowercase; color: var(--ink); }
.about__rail li::before {
  content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: var(--node); height: var(--node);
  border: 2px solid var(--copper); border-radius: 50%; background: var(--copper);
}
.about__rail li::after {
  content: ""; position: absolute; left: var(--node); top: calc(var(--node) / 2 - 0.75px); height: 1.5px;
  width: calc(100% - var(--node) + var(--gap)); background: var(--copper); transform-origin: 0 50%;
}
.about__rail li:last-child::after { content: none; }


/* Wide screens: the word on the left, its three states standing beside it on the right. */
@media (min-width: 1100px) {
  .about__frame { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "lead lead" "line rail"; grid-template-rows: auto minmax(0, 1fr); align-content: stretch; align-items: center; }
  .about__lead { grid-area: lead; }
  .about__line { grid-area: line; }
  .about__rail { grid-area: rail; }
  .about__roll { font-size: clamp(3.6rem, min(14.5vw, 40vh), 22rem); }
}
/* Where the three states stand in a column, the line between them runs down. */
@media (max-width: 820px), (min-width: 1100px) {
  .about__rail { grid-template-columns: minmax(0, 1fr); gap: clamp(0.9rem, 3vh, 1.75rem) 0; }
  .about__rail li { padding: 0 0 0 calc(var(--node) + 0.9rem); }
  .about__rail li::before { top: 0.35em; }
  .about__rail li::after { left: calc(var(--node) / 2 - 0.75px); top: calc(0.35em + var(--node)); width: 1.5px; height: calc(100% - var(--node) + clamp(0.9rem, 3vh, 1.75rem)); transform-origin: 50% 0; }
}

/* ---------- Sectors: eight very large words, read one at a time ----------
   At rest this is a plain list of word and description. With motion on, the screen holds still, the words
   turn past like a wheel, and the stage beside them shows each sector as an object in dots (motion.css, figures.js). */

.sectors__list { list-style: none; margin: 0; padding: 0; }
.sector {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) auto; align-items: center;
  gap: 0 clamp(1.5rem, 4vw, 5rem);
  padding: 0.2rem 0; line-height: 1.45; text-decoration: none;
}
.sector__name {
  font: 800 1rem/1.04 var(--display); font-size: clamp(3rem, 8.4vw, 9rem);
  letter-spacing: -0.03em; white-space: nowrap;
  transition: color 0.4s var(--ease-out);
}
.sector__body { font: 400 var(--step-0)/1.45 var(--text); color: var(--ink-soft); }
.sector__body strong { display: block; font-weight: 500; color: var(--ink); }
.sector__arrow { width: 1.5rem; height: 1.5rem; color: var(--copper-ink); transition: translate 0.35s var(--ease-out); }
.sector:hover .sector__name { color: var(--copper-ink); }
.sector:hover .sector__arrow { translate: 0 -0.3rem; }
.sectors-join .sector__arrow { rotate: 180deg; }                         /* a sector leads down to joining, not up to the map */
.sectors-join .sector:hover .sector__arrow { translate: 0 0.3rem; }

.sectors__stage { display: none; }
.sectors__canvas { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.sectors__caption { margin: 0; min-height: 4.6em; max-width: 36ch; font-size: var(--step-0); line-height: 1.45; color: var(--ink-soft); }
.sectors__caption strong { display: block; margin-bottom: 0.15rem; font: 700 var(--step-1)/1.15 var(--display); letter-spacing: -0.01em; color: var(--ink); }

/* ---------- Pathway: six nodes on one rising circuit line ----------
   Where the line runs sideways, a land of dots rises under it (pathway.js); where it stands upright, each step
   carries a row of dots one sixth longer than the last. */

.pathway { background: var(--ink); color: var(--on-ink); }
.pathway__frame { position: relative; display: grid; align-content: center; padding: clamp(4.5rem, 9.5vw, 10.5rem) var(--gutter); overflow: clip; }
.pathway .lede { color: var(--on-ink-soft); }
.pathway .head { position: relative; z-index: 1; }
.pathway__land { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pathway:not(.has-land) .pathway__land, .pathway.has-land .pathway__pulse { display: none; }
.pathway :focus-visible, .join :focus-visible { outline-color: var(--on-ink); }
.pathway ::selection, .join ::selection { background: var(--on-ink); color: var(--ink); }

.pathway__track { position: relative; z-index: 1; --rise: clamp(1.25rem, 2.6vw, 3.4rem); --node: 0.875rem; }
.pathway__steps {
  list-style: none; margin: 0; padding: 0; counter-reset: step;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
}
.pathway__steps li {
  position: relative; counter-increment: step;
  margin-top: calc((5 - var(--i)) * var(--rise));       /* each step stands one rise higher than the last */
  padding: calc(var(--node) + 1.3rem) 1.5rem 0 0;
}
.pathway__node {
  position: absolute; z-index: 1; left: 0; top: 0; width: var(--node); height: var(--node);
  border: 2px solid var(--copper-lit); border-radius: 50%; background: var(--ink);
}
/* The line: straight along, then one 45 degree turn up to the next node, like the arms of the K. */
.pathway__steps li::before, .pathway__steps li::after {
  content: ""; position: absolute; top: calc(var(--node) / 2 - 0.75px); height: 1.5px;
  background: var(--copper-lit); transform-origin: 0 50%;
}
.pathway__steps li::before { left: var(--node); width: calc(100% - var(--node) - var(--rise)); }
.pathway__steps li::after { left: calc(100% - var(--rise)); width: calc(var(--rise) * 1.41421); rotate: -45deg; }
.pathway__steps li:last-child::before { width: calc(100% - var(--node) + var(--gutter)); }     /* the last line runs on, off the page */
.pathway__steps li:last-child::after { content: none; }
.pathway__steps h3 {
  margin: 0; font: 800 clamp(1.15rem, 1.55vw, 1.9rem)/1.05 var(--display);
  letter-spacing: -0.015em; text-transform: lowercase;
}
.pathway__steps h3::before {
  content: counter(step); display: block; margin-bottom: 0.55rem;
  font: 500 0.875rem/1 var(--text); letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--copper-lit);
}
.pathway__steps p { margin: 0.6rem 0 0; max-width: 22ch; font-size: var(--step-small); line-height: 1.45; color: var(--on-ink-soft); }

.pathway__pulse {
  position: absolute; z-index: 2; left: 0; top: 0; width: 0.5rem; height: 0.5rem;
  border-radius: 50%; background: var(--on-ink); opacity: 0; pointer-events: none; offset-rotate: 0deg;
}
.pathway.is-drawn .pathway__pulse { animation: pathway-run 9s linear 0.6s infinite; }
@keyframes pathway-run {
  0% { offset-distance: 0%; opacity: 0; }
  3%, 95% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- Five questions: one sheet each ----------
   Each carries its picture, the question, one short answer, what is inside it, and a fact or two.
   On wide screens a sheet holds at the top while the next one slides over it (motion.css). */

.answers { padding-bottom: 0; }
.sheet { border-top: 1px solid var(--line); background: var(--ground); }
.sheet__in {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
  gap: 1.5rem clamp(2rem, 5vw, 6rem);
  padding: clamp(1.5rem, 3vw, 3rem) 0; transform-origin: 50% 0;
}
.sheet__art, .routes__k { position: relative; }
.sheet__plate { width: 100%; max-height: min(33rem, 64vh); object-fit: contain; }
/* A still picture gives way to its own dots once figures.js has them ready. */
.figure { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.6s var(--ease-out); }
.has-figure > .figure { opacity: 1; }
.has-figure > img { visibility: hidden; }
.sheet__name { margin: 0 0 0.35em; font: 800 1rem/0.98 var(--display); font-size: clamp(2rem, 4.4vw, 4.75rem); letter-spacing: -0.025em; text-wrap: balance; }
.sheet__text { margin: 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.35; color: var(--ink-soft); }
.sheet__parts {
  list-style: none; margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0; padding: 0; --node: 0.6rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1.25rem clamp(1rem, 2vw, 2rem);
}
.sheet__parts li { position: relative; padding-top: calc(var(--node) + 0.7rem); border-top: 1px solid var(--line); font-size: var(--step-small); line-height: 1.4; color: var(--ink-soft); }
.sheet__parts li::before {
  content: ""; position: absolute; left: 0; top: calc(var(--node) / -2 - 0.5px); width: var(--node); height: var(--node);
  border: 1.5px solid var(--copper); border-radius: 50%; background: var(--ground);
}
.sheet__parts strong { display: block; margin-bottom: 0.15rem; font: 700 var(--step-0)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
/* The second sheet holds the division list, which is also the map as text. */
.sheet__main .divisions__list { margin-top: clamp(1.25rem, 2.5vw, 2.25rem); }
.sheet__meta { margin: clamp(1.25rem, 2.5vw, 2.25rem) 0 0; display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.sheet__meta dt { font-size: 0.875rem; line-height: 1.3; color: var(--ink-soft); }
.sheet__meta dd { margin: 0.15rem 0 0; font: 500 var(--step-0)/1.3 var(--text); }

/* ---------- Partners: a roster by kind, each logo on the ground it was drawn for ----------
   A partner with a site of its own has a link under its description, and the whole entry is that link's target. */

.partners__group {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: start;
  gap: 1.25rem clamp(2rem, 5vw, 6rem);
  padding: clamp(1.25rem, 2.4vw, 2.25rem) 0; border-top: 1px solid var(--line);
}
.partners__kind { margin: 0; font: 700 var(--step-1)/1.15 var(--display); letter-spacing: -0.01em; }
.partners__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem clamp(1.5rem, 3vw, 3.5rem); }
.partner { position: relative; display: grid; grid-template-columns: minmax(8.75rem, 11rem) minmax(0, 1fr); align-items: start; gap: 0.75rem 1.25rem; }
.partner__plate { display: block; position: relative; aspect-ratio: 16 / 10; border-radius: 12px; text-decoration: none; }
.partner__plate img { position: absolute; inset: 16% 15%; width: 70%; height: 68%; max-width: none; object-fit: contain; }
.partner__plate--light { background: #fff; box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 0.3s var(--ease-out); }
.partner__plate--light img { mix-blend-mode: multiply; }      /* a logo file with its own white box sits flush */
.partner__plate--ink { background: var(--ink); }
/* A partner whose logo file has not arrived yet is set in the display face. */
.partner__word { position: absolute; inset: 0; display: grid; place-items: center; font: 800 clamp(1.1rem, 1.5vw, 1.6rem)/1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.partner__plate img, .partner__word { transition: translate 0.45s var(--ease-out); }
.partner__site { margin-top: 0.6rem; font-size: var(--step-0); }
.partner__site::before { content: ""; position: absolute; inset: -0.5rem; border-radius: 14px; }      /* the whole entry is the link */
.partner__site:hover svg { translate: 0.14em -0.14em; }
.partner:has(.partner__site:hover) .partner__plate { box-shadow: inset 0 0 0 1.5px var(--copper); }
.partner:has(.partner__site:hover) .partner__plate :is(img, .partner__word) { translate: 0 -4%; }
.partner p { margin: 0; font-size: var(--step-small); line-height: 1.5; color: var(--ink-soft); }
.partner strong { display: block; margin-bottom: 0.2rem; font: 700 1.15em/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }

/* ---------- Partner routes: four lines into the K ----------
   Each way of partnering is a link on its own line. The script draws a wire from each one to the K, sends
   pulses along the wires and lights one route at a time (site.js); the K is redrawn in moving dots (figures.js).
   Without the script the four links, the K and the button stand as they are. */

.routes { margin-top: clamp(2.5rem, 5vw, 5.5rem); padding-top: clamp(2.5rem, 5vw, 5.5rem); border-top: 1px solid var(--line); }
.routes__title { font-size: clamp(2.1rem, 4.6vw, 5rem); }
.routes__board {
  position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center;
  gap: 2rem clamp(2rem, 5vw, 6rem);
}
.routes__list { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; justify-items: start; gap: clamp(0.9rem, 2vw, 1.75rem); }
.route {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start;
  gap: 0.25rem clamp(0.75rem, 1.4vw, 1.4rem); text-decoration: none; --node: 0.8rem;
}
.route__node {
  width: var(--node); height: var(--node); border: 2px solid var(--copper); border-radius: 50%; background: var(--ground);
  transition: background-color 0.3s var(--ease-out), scale 0.4s var(--ease-out);
}
.route__name {
  font: 800 1rem/1.04 var(--display); font-size: clamp(1.75rem, 3.5vw, 3.75rem);
  letter-spacing: -0.025em; transition: color 0.35s var(--ease-out);
}
.route__text { grid-column: 2; max-width: 36ch; font-size: var(--step-small); line-height: 1.45; color: var(--ink-soft); }
.is-wired .route__name { color: var(--quiet); }        /* waiting its turn, like the sector words */
.is-wired .route:is(.is-lit, :focus-visible) .route__name { color: var(--ink); }
.route:hover .route__name, .is-wired .route:hover .route__name { color: var(--copper-ink); }
.route:is(:hover, :focus-visible, .is-lit) .route__node { background: var(--copper); scale: 1.3; }

.routes__hub { position: relative; z-index: 1; display: grid; justify-items: center; gap: clamp(1rem, 2vw, 1.75rem); }
.routes__k { width: min(100%, 19rem); aspect-ratio: 970 / 1073; }
.routes__k img { width: 100%; height: 100%; object-fit: contain; }
.routes__k .figure { inset: -9%; width: 118%; height: 118%; }          /* room for the K to turn */
.routes__wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.wire__line {
  fill: none; stroke: color-mix(in srgb, var(--copper) 40%, var(--ground)); stroke-width: 1.5;
  transition: stroke 0.3s var(--ease-out);
}
.wire__port { fill: var(--ground); stroke: var(--copper); stroke-width: 1.5; }
.wire__pulse { fill: none; stroke: var(--copper); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.4 100; opacity: 0; }
.wire.is-lit .wire__line { stroke: var(--copper); stroke-width: 2; }

/* ---------- The map as text (inside the second sheet) ---------- */

.divisions__list { font-size: var(--step-0); }
.divisions__list a { border-bottom-color: var(--line); }
.divisions__note { font-size: var(--step-small); }      /* written in by map.js, only when the numbers are samples */

/* ---------- Join ---------- */

.join {
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(5rem, 11vw, 12rem);
  background: var(--ink); color: var(--on-ink);
}
.join__map {
  position: absolute; z-index: -1; right: -9%; top: 50%; width: 66%; max-width: none;
  translate: 0 -50%; mix-blend-mode: screen; opacity: 0.85;
}
.join__title {
  margin: 0 0 0 calc(-9 * var(--px));
  font: 800 calc(226 * var(--px))/0.82 var(--display); letter-spacing: -0.012em;
}
.join__text { margin: calc(50 * var(--px)) 0 0; max-width: 30ch; font: 400 var(--step-1)/1.4 var(--text); color: var(--on-ink-soft); }
.join__soon { margin: calc(44 * var(--px)) 0 0; display: flex; align-items: center; gap: 0.7rem; font: 500 var(--step-1)/1.3 var(--text); }
.join__soon::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; border: 2px solid var(--copper-lit); border-radius: 50%; }

/* ---------- Footer ---------- */

.footer {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 2.5rem clamp(2rem, 5vw, 6rem);
  padding: clamp(3rem, 6vw, 6rem) var(--gutter) 2rem;
  font-size: var(--step-small); line-height: 1.5;
}
.footer__logo { width: clamp(9rem, 14vw, 16rem); margin-bottom: 1.5rem; }
.footer__brand p, .footer__brand address { margin: 0 0 0.7rem; max-width: 46ch; font-style: normal; color: var(--ink-soft); }
.footer__links { display: grid; grid-template-columns: repeat(2, max-content); align-content: start; gap: 0.1rem clamp(2rem, 4vw, 4rem); }
.footer__links a {
  padding: 0.5rem 0; font-weight: 500;
  text-decoration: underline 1.5px transparent; text-underline-offset: 0.3em;
  transition: text-decoration-color 0.3s var(--ease-out);
}
.footer__links a:hover { text-decoration-color: currentColor; }
.footer__small { grid-column: 1 / -1; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-soft); }
/* The registration number: last on the page, shown only when asked for. The control is a ring node that fills. */
.footer__registration { grid-column: 1 / -1; font-size: 0.875rem; color: var(--ink-soft); }
.footer__registration summary {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-weight: 500; color: var(--ink);
}
.footer__registration summary::-webkit-details-marker { display: none; }
.footer__registration summary::before {
  content: ""; width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--copper); border-radius: 50%;
  transition: background-color 0.3s var(--ease-out);
}
.footer__registration[open] summary::before { background: var(--copper); }
.footer__registration summary:hover { color: var(--copper-ink); }
.footer__registration:not([open]) .when-open, .footer__registration[open] .when-closed { display: none; }
.footer__registration p { margin: 0 0 0 1.15rem; font: 500 var(--step-0)/1.3 var(--text); color: var(--ink); }

/* ---------- Mid widths: the pathway stands up ---------- */

@media (max-width: 1199px) {
  .nav.is-stuck .nav__logo { scale: 0.85; }

  .pathway__steps { grid-template-columns: minmax(0, 1fr); max-width: 34rem; }
  .pathway__steps li { margin-top: 0; padding: 0 0 3.6rem calc(var(--node) + 1.3rem); }
  .pathway__steps li:last-child { padding-bottom: 2.3rem; }
  .pathway__steps li::before { left: calc(var(--node) / 2 - 0.75px); top: var(--node); width: 1.5px; height: calc(100% - var(--node)); transform-origin: 50% 0; }
  .pathway__steps li:last-child::before { content: none; }
  /* A row of dots under each step, one sixth longer each time: the same climb, lying on its side. */
  .pathway__steps li::after, .pathway__steps li:last-child::after {
    content: ""; left: calc(var(--node) + 1.3rem); top: auto; bottom: 1.15rem; height: 1.3rem; rotate: none;
    width: calc((100% - var(--node) - 1.3rem) * (var(--i) + 1) / 6);
    background: radial-gradient(circle, var(--copper-lit) 0 30%, transparent 36%) 0 0 / 0.65rem 0.65rem;
    opacity: calc(0.45 + var(--i) * 0.11);
  }
  .pathway__steps li:last-child::after { bottom: 0; }
  .pathway__steps h3 { font-size: clamp(1.35rem, 3vw, 1.9rem); }
  .pathway__steps p { max-width: 40ch; }
}

@media (max-width: 1099px) {
  .partners__group { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Phones ---------- */

@media (max-width: 820px) {
  :root { --gutter: 16px; --nav-h: 76px; --nav-stuck: 60px; }

  .nav.is-stuck :is(.nav__links, .nav__lang) { translate: none; }      /* these live in the menu panel here */
  .nav__menu { display: none; }
  .js .nav__toggle {
    display: inline-flex; align-items: center; height: 44px; padding: 0 4px;
    background: none; border: 0; cursor: pointer; color: var(--ink);
    font: 500 13px/1 var(--text); letter-spacing: 0.035em; text-transform: uppercase;
  }
  .js .nav__menu {
    display: flex; flex-direction: column;
    position: fixed; inset: 76px 0 0; padding: 4px 16px 28px; overflow-y: auto; overscroll-behavior: contain;
    background: var(--ground);
    visibility: hidden; opacity: 0; translate: 0 -0.5rem;
    transition: opacity 0.3s var(--ease-out), translate 0.3s var(--ease-out), visibility 0s 0.3s;
  }
  .nav.is-stuck .nav__menu { top: 60px; }
  .nav.is-open { background: var(--ground); }
  .nav.is-open .nav__menu { visibility: visible; opacity: 1; translate: 0; transition-delay: 0s; }
  .nav__links { display: flex; flex-direction: column; gap: 0; }
  .nav__links a {
    padding: 0.5em 0; border-bottom: 1px solid var(--line);
    font: 800 2.3rem/1 var(--display); letter-spacing: -0.02em; text-transform: lowercase; text-decoration: none;
  }
  .nav__lang { margin-top: 1.75rem; }
  .nav__lang, .nav__lang a { font-size: 15px; }
  html.menu-open { overflow: hidden; }

  .head, .footer { grid-template-columns: minmax(0, 1fr); }
  .head { align-items: start; }

  .sector { grid-template-columns: minmax(0, 1fr) auto; padding: 0.7rem 0 0.9rem; }
  .sector__name { font-size: 14vw; }
  .sector__body { grid-area: 2 / 1 / 3 / 3; margin-top: 0.2rem; }
  .sector__arrow { grid-area: 1 / 2; }

  .sheet__in { grid-template-columns: minmax(0, 1fr); padding: 1.5rem 0 2rem; }
  .sheet__art { width: min(100%, 22rem); }
  .sheet__plate { max-height: 38vh; }
  .sheet__parts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }

  .partners__list { grid-template-columns: minmax(0, 1fr); }
  .routes__board { grid-template-columns: minmax(0, 1fr); gap: 3.25rem; }
  .routes__hub { grid-template-columns: 5.5rem minmax(0, 1fr); justify-items: start; align-items: center; }
  .routes__k { width: 5.5rem; }
  .routes__k .figure { display: none; }                      /* too small for dots to draw it: the K itself stays */
  .routes__k.has-figure > img { visibility: visible; }

  .join { padding-bottom: 54vw; }
  .join__map { width: 150%; right: -42%; top: auto; bottom: -3%; translate: none; opacity: 0.7; }
  .join__title { margin-left: -0.7vw; font-size: 17.4vw; line-height: 0.84; }
  .join__text { margin-top: 20px; }
  .join__soon { margin-top: 24px; }

  .footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The header's small type stops shrinking with the window before it becomes hard to read. */
@media (min-width: 821px) {
  .nav__links a, .nav__lang, .nav__lang a, .button--outline { font-size: max(12px, calc(25.5 * var(--px))); }
}

@media (prefers-reduced-motion: reduce) {
  .pathway__pulse { display: none; }
}

/* Everything that moves, apart from the map itself (map.js). Loaded last.

   Two kinds of motion live here:
   - Arrivals, which play once when a thing scrolls into view (.reveal-on, .is-in).
   - Scenes, which are driven by the scroll itself. The script writes one number, --p, on each scene
     (0 at its start, 1 at its end) and the rules below turn that number into movement (.scenes-on).

   Nothing is hidden or dimmed unless the script has set those classes on the root element, and visitors
   who ask for reduced motion get the page at rest. */

/* ---------- Header menu: one trace that goes where you are and where you point ----------
   A copper line ending in a ring node, the same mark as the arms of the K. The script places it. */

.nav__links { position: relative; }
.nav__trace, .nav__node {
  position: absolute; left: 0; pointer-events: none; opacity: 0;
  transition: translate 0.5s var(--ease-out), scale 0.5s var(--ease-out), opacity 0.3s var(--ease-out);
}
.nav__trace { bottom: 0.3em; width: 100px; height: 1.5px; background: var(--copper); transform-origin: 0 50%; }
.nav__node {
  bottom: calc(0.3em - 2.75px); width: 7px; height: 7px; margin-left: -1px;
  border: 1.5px solid var(--copper); border-radius: 50%; background: var(--ground);
}
.nav__links.has-trace .nav__trace, .nav__links.has-trace .nav__node { opacity: 1; }
.js .nav__links a:hover { text-decoration-color: transparent; }      /* the trace does this job now */

/* ---------- Buttons: the outlined one fills from the left ---------- */

.button--outline { position: relative; isolation: isolate; overflow: hidden; }
.button--outline::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: transparent;      /* copper only while it is filling */
  scale: 0 1; transform-origin: 0 50%; transition: scale 0.45s var(--ease-out), background-color 0.25s var(--ease-out);
}
.button--outline { transition: color 0.2s var(--ease-out) 0.06s, transform 0.25s var(--ease-out); }
.button--outline:hover, .button--outline:focus-visible { background: transparent; color: #fff; }
.button--outline:hover::before, .button--outline:focus-visible::before { scale: 1; background: var(--copper); }
.nav__join { transition: color 0.2s var(--ease-out) 0.06s, transform 0.25s var(--ease-out), translate 0.4s var(--ease-out); }

/* ---------- Phone menu: the panel wipes down, the links arrive one after another, and it closes faster than it opens ---------- */

@media (max-width: 820px) {
  .nav__trace, .nav__node { display: none; }

  .js .nav__menu {
    opacity: 1; translate: none; clip-path: inset(0 0 100% 0);
    transition: clip-path 0.28s var(--ease-out), visibility 0s 0.28s;
  }
  .nav.is-open .nav__menu { clip-path: inset(0); transition: clip-path 0.55s var(--ease-out), visibility 0s; }
  .js .nav__menu .nav__links a, .js .nav__menu .nav__lang {
    opacity: 0; translate: 0 1.1rem;
    transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out);
  }
  .nav.is-open .nav__menu .nav__links a, .nav.is-open .nav__menu .nav__lang {
    opacity: 1; translate: 0;
    transition: opacity 0.6s var(--ease-out) calc(0.12s + var(--i, 0) * 0.055s), translate 0.7s var(--ease-out) calc(0.12s + var(--i, 0) * 0.055s);
  }
  .nav__links a:nth-child(2) { --i: 1; }
  .nav__links a:nth-child(3) { --i: 2; }
  .nav__links a:nth-child(4) { --i: 3; }
  .nav__links a:nth-child(5) { --i: 4; }
  .nav__menu .nav__lang { --i: 5; }
}

@media (prefers-reduced-motion: no-preference) {

  /* ---------- First screen: the headline comes into focus, then the rest settles ---------- */

  .hero__w { display: inline-block; animation: resolve 1.1s var(--ease-out) 0.15s backwards; }
  .hero__w:last-child { animation-delay: 0.3s; }
  .hero__sub { animation: rise 0.9s var(--ease-out) 0.55s backwards; }
  .hero__actions { animation: rise 0.9s var(--ease-out) 0.7s backwards; }
  .hero__label { animation: rise 0.9s var(--ease-out) 0.9s backwards; }
  .nav__logo { animation: drop 0.8s var(--ease-out) 0.05s backwards; }
  .nav__links { animation: drop 0.8s var(--ease-out) 0.12s backwards; }
  .nav__lang, .nav__toggle { animation: drop 0.8s var(--ease-out) 0.18s backwards; }
  .nav__join { animation: drop 0.8s var(--ease-out) 0.24s backwards; }

  @keyframes resolve { from { opacity: 0; transform: translateY(0.22em); filter: blur(0.12em); } }
  @keyframes rise { from { opacity: 0; transform: translateY(1rem); } }
  @keyframes drop { from { opacity: 0; transform: translateY(-0.6rem); } }
  .footer__registration[open] p { animation: drop 0.5s var(--ease-out) backwards; }      /* the number comes down out of its control */

  /* ---------- Arrivals: each kind of thing has its own ----------
     Headings come into focus word by word, like dots resolving. Text rises into place.
     Pictures and logo plates are printed in. */

  .reveal-on .title .w, .reveal-on .join__title .w {
    display: inline-block; opacity: 0; translate: 0 0.26em; filter: blur(0.13em);
    transition: opacity 0.7s var(--ease-out), translate 0.85s var(--ease-out), filter 0.85s var(--ease-out);
    transition-delay: calc(var(--w, 0) * 60ms);
  }
  .reveal-on .is-in .w { opacity: 1; translate: 0; filter: blur(0); }

  /* A question is typed out, letter by letter, as the thing it heads arrives; a caret blinks a few times after it. */
  .reveal-on .ask .aw { display: inline-block; white-space: nowrap; }
  .reveal-on .ask .c { opacity: 0; transition: opacity 0s linear calc(0.2s + var(--c, 0) * 30ms); }
  .reveal-on .is-in .ask .c { opacity: 1; }
  .reveal-on .ask::after {
    content: ""; display: inline-block; width: 0.07em; height: 0.74em; margin-left: 0.08em; vertical-align: -0.02em;
    background: currentColor; opacity: 0;
  }
  .reveal-on .is-in .ask::after { animation: caret 0.95s steps(1) calc(0.2s + var(--n, 12) * 30ms) 5; }
  @keyframes caret { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

  .reveal-on .rise {
    opacity: 0; translate: 0 1.1rem;
    transition: opacity 0.7s var(--ease-out), translate 0.85s var(--ease-out);
    transition-delay: calc(var(--d, 0) * 70ms);
  }
  .reveal-on .rise.is-in { opacity: 1; translate: 0; }

  .reveal-on .sheet__plate { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-out); }
  .reveal-on :is(.sheet__text, .sheet__parts li, .sheet__meta) {
    opacity: 0; translate: 0 1.1rem;
    transition: opacity 0.7s var(--ease-out), translate 0.85s var(--ease-out);
    transition-delay: calc(0.12s + var(--k, 0) * 80ms);
  }
  .reveal-on .sheet__text { --k: 1; }
  .reveal-on .sheet__parts li:nth-child(1) { --k: 2; }
  .reveal-on .sheet__parts li:nth-child(2) { --k: 3; }
  .reveal-on .sheet__parts li:nth-child(3) { --k: 4; }
  .reveal-on .sheet__parts li:nth-child(4) { --k: 5; }
  .reveal-on .sheet__parts li:nth-child(5) { --k: 6; }
  .reveal-on .sheet__parts li:nth-child(6) { --k: 7; }
  .reveal-on .sheet__meta { --k: 8; }
  .reveal-on .sheet__parts li::before { scale: 0; transition: scale 0.5s var(--ease-out) calc(0.3s + var(--k, 0) * 80ms); }
  .reveal-on .sheet.is-in .sheet__plate { clip-path: inset(0); }
  .reveal-on .sheet.is-in :is(.sheet__text, .sheet__parts li, .sheet__meta) { opacity: 1; translate: 0; }
  .reveal-on .sheet.is-in .sheet__parts li::before { scale: 1; }

  .reveal-on .partner__plate { clip-path: inset(0 0 100% 0 round 12px); transition: clip-path 0.9s var(--ease-out); transition-delay: calc(var(--d, 0) * 70ms); }
  .reveal-on .partner.is-in .partner__plate { clip-path: inset(0 round 12px); }

  /* Partner routes: the four names are drawn in from the left one after another, the wires run out to the K,
     and then the pulses start. Nothing here moves a box, so the wires can be measured at any moment. */
  .reveal-on .route__name {
    clip-path: inset(-12% 100% -12% 0);
    transition: clip-path 0.9s var(--ease-out) calc(var(--r, 0) * 110ms), color 0.35s var(--ease-out);
  }
  .reveal-on :is(.route__node, .route__text, .routes__hub) {
    opacity: 0;
    transition: opacity 0.7s var(--ease-out) calc(0.15s + var(--r, 0) * 110ms), background-color 0.3s var(--ease-out), scale 0.4s var(--ease-out);
  }
  .reveal-on .routes__list li:nth-child(2) { --r: 1; }
  .reveal-on .routes__list li:nth-child(3) { --r: 2; }
  .reveal-on .routes__list li:nth-child(4) { --r: 3; }
  .reveal-on .routes__hub { --r: 4; }
  .reveal-on .routes__board.is-in .route__name { clip-path: inset(-12% 0); }
  .reveal-on .routes__board.is-in :is(.route__node, .route__text, .routes__hub) { opacity: 1; }
  .reveal-on .wire__line {
    stroke-dasharray: 1; stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s var(--ease-out) calc(0.35s + var(--i, 0) * 0.12s), stroke 0.3s var(--ease-out);
  }
  .reveal-on .wire__port { opacity: 0; transition: opacity 0.4s var(--ease-out) calc(1.3s + var(--i, 0) * 0.12s); }
  .reveal-on .routes__board.is-in .wire__line { stroke-dashoffset: 0; }
  .reveal-on .routes__board.is-in .wire__port { opacity: 1; }
  .reveal-on .routes__board.is-in .wire__pulse { opacity: 0.5; transition: opacity 0.6s linear 1.5s; animation: wire-run 5.5s linear calc(var(--i, 0) * -1.3s) infinite; }
  .reveal-on .routes__board.is-in .wire.is-lit .wire__pulse { opacity: 1; stroke-width: 6; stroke-dasharray: 0.4 33; animation: wire-rush 1.15s linear infinite; }
  @keyframes wire-run { to { stroke-dashoffset: -100.4; } }
  @keyframes wire-rush { to { stroke-dashoffset: -33.4; } }

  /* ---------- Scenes: driven by the scroll itself ----------
     --scene tells the script how to measure a scene: "out" as it leaves the top, "view" from entering at
     the bottom to leaving at the top, "pin" while its frame holds still, and "through" for a tall scene
     that is simply read from top to bottom. */

  /* First screen: the words lift away as it leaves. The map leans back at the same time (map.js). */
  .scenes-on .hero { --scene: out; }
  .scenes-on .hero__copy { translate: 0 calc(var(--p, 0) * -10vh); opacity: calc(1 - var(--p, 0) * 1.7); }
  .scenes-on .hero__k { translate: 0 calc(var(--p, 0) * -5vh); }

  /* About: the word rolls from "users." to "makers." to "owners." as the scroll passes two marks.
     --a and --b are those two steps, each 0 before its mark and 1 after it. */
  .scenes-on .about { --scene: through; }
  .scenes-on .about__frame {
    --a: clamp(0, calc((var(--p, 0) - 0.22) * 14), 1);
    --b: clamp(0, calc((var(--p, 0) - 0.5) * 14), 1);
  }
  .scenes-on .about__words { translate: 0 calc((var(--a) + var(--b)) * -1.08em); transition: translate 0.55s var(--ease-out); }
  .scenes-on .about__rail li:nth-child(2) { opacity: calc(0.8 + var(--a) * 0.2); }
  .scenes-on .about__rail li:nth-child(3) { opacity: calc(0.8 + var(--b) * 0.2); }
  .scenes-on .about__rail li:nth-child(2)::before { background: color-mix(in srgb, var(--copper) calc(var(--a) * 100%), var(--ground)); }
  .scenes-on .about__rail li:nth-child(3)::before { background: color-mix(in srgb, var(--copper) calc(var(--b) * 100%), var(--ground)); }
  .scenes-on .about__rail li:nth-child(1)::after { scale: var(--a) 1; }
  .scenes-on .about__rail li:nth-child(2)::after { scale: var(--b) 1; }
  .scenes-on .about__rail li, .scenes-on .about__rail li::before, .scenes-on .about__rail li::after {
    transition: opacity 0.3s linear, scale 0.45s var(--ease-out), background-color 0.3s linear;
  }

  /* Sectors: the screen holds still. The eight words turn past like a wheel and the one in the middle is the
     one being read; beside it the dots re-form into that sector's object (figures.js).
     --at is how far the wheel has turned, in rows; --away is how far each word is from the middle. */
  .scenes-on .sectors { --scene: through; }

  /* Pathway: the scroll draws the line, and the land of dots grows behind it (pathway.js reads the same --p).
     --t is how far the line has got into each step. */
  .scenes-on .pathway { --scene: through; }
  .scenes-on .pathway__steps li { --t: calc(var(--p, 0) * 7 - 0.4 - var(--i)); }
  .scenes-on .pathway__node { scale: clamp(0, calc(var(--t) * 3), 1); transition: scale 0.2s linear; }
  .scenes-on .pathway__steps li::before { scale: clamp(0, calc(var(--t) * 1.5 - 0.3), 1) 1; transition: scale 0.2s linear; }
  .scenes-on .pathway__steps li::after { scale: clamp(0, calc(var(--t) * 4 - 3.2), 1) 1; transition: scale 0.2s linear; }
  .scenes-on .pathway__steps :is(h3, p) {
    opacity: clamp(0, calc(var(--t) * 2.5), 1);
    translate: 0 calc((1 - clamp(0, calc(var(--t) * 2.5), 1)) * 0.6rem);
    transition: opacity 0.2s linear, translate 0.2s linear;
  }

  /* The five questions: a sheet steps back as the next one covers it. --cover is how far the next sheet has come. */
  .scenes-on .sheet__in { scale: calc(1 - var(--cover, 0) * 0.06); opacity: calc(1 - var(--cover, 0) * 0.8); }

  /* Join: the map behind the words rises and grows a little as the band passes. */
  .scenes-on .join { --scene: view; }

  @media (max-width: 1199px) {
    .scenes-on .pathway__steps li::before { scale: 1 clamp(0, calc(var(--t) * 1.3 - 0.2), 1); }
    /* Each step's row of dots is laid from the left as the line reaches it. */
    .scenes-on .pathway__steps li::after {
      scale: none; clip-path: inset(0 calc((1 - clamp(0, calc(var(--t) * 1.5 - 0.15), 1)) * 100%) 0 0);
      transition: clip-path 0.25s linear;
    }
  }

  @media (max-width: 820px), (min-width: 1100px) {
    .scenes-on .about__rail li:nth-child(1)::after { scale: 1 var(--a); }
    .scenes-on .about__rail li:nth-child(2)::after { scale: 1 var(--b); }
  }
  @media (max-width: 820px) and (min-height: 720px) {
    .scenes-on .about { --scene: pin; height: 200svh; }
    .scenes-on .about__frame { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--nav-stuck) + 1vh) 2vh; }
  }

  @media (min-width: 821px) {
    .scenes-on .join__map { translate: 0 calc(-50% + (0.5 - var(--p, 0.5)) * 20%); scale: calc(0.93 + var(--p, 0.5) * 0.12); }
  }

  @media (min-height: 600px) {
    .scenes-on .sectors { --scene: pin; height: 380vh; }
    .scenes-on .sectors__frame {
      position: sticky; top: 0; height: 100vh; overflow: clip;
      display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto minmax(0, 1fr);
      gap: clamp(0.75rem, 2.5vh, 2rem) clamp(2rem, 5vw, 6rem);
      padding-block: calc(var(--nav-stuck) + 3vh) 4vh;
    }
    .scenes-on .sectors .head { grid-column: 1 / -1; margin: 0; }
    .scenes-on .sectors__wheel {
      position: relative; min-height: 0; --fs: min(8.2vw, 12.5vh); --row: calc(var(--fs) * 1.16);
      mask-image: linear-gradient(transparent 2%, #000 26%, #000 74%, transparent 98%);
    }
    .scenes-on .sectors__list {
      position: absolute; inset: calc(50% - var(--row) / 2) 0 auto 0;
      translate: 0 calc(var(--at, 0) * -1 * var(--row)); transition: translate 0.35s var(--ease-out);
    }
    .scenes-on .sector { display: flex; align-items: center; gap: 1.25rem; height: var(--row); padding: 0; }
    .scenes-on .sector__name {
      font-size: var(--fs); line-height: 1; color: var(--quiet);
      scale: calc(1 - min(var(--away, 1), 2) * 0.13); transform-origin: 0 50%;
      transition: color 0.35s var(--ease-out), scale 0.35s var(--ease-out);
    }
    .scenes-on .sector.is-active .sector__name { color: var(--ink); }
    .scenes-on .sector:hover .sector__name { color: var(--copper-ink); }
    .scenes-on .sector__body { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* still read out; the stage shows it */
    .scenes-on .sector__arrow {
      width: calc(var(--fs) * 0.3); height: calc(var(--fs) * 0.3); opacity: 0; translate: -0.8rem 0;
      transition: opacity 0.4s var(--ease-out), translate 0.5s var(--ease-out);
    }
    .scenes-on .sector:is(.is-active, :hover, :focus-visible) .sector__arrow { opacity: 1; translate: 0; }
    .scenes-on .sectors__stage { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: clamp(0.5rem, 2vh, 1.25rem); min-height: 0; }
  }
  @media (max-width: 820px) and (min-height: 600px) {
    .scenes-on .sectors { height: 340svh; }
    .scenes-on .sectors__frame {
      height: 100svh; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 5fr) minmax(0, 4fr);
      padding-block: calc(var(--nav-stuck) + 1.5vh) 2vh;
    }
    .scenes-on .sectors .lede { display: none; }
    .scenes-on .sectors__stage { order: 2; }
    .scenes-on .sectors__wheel { order: 3; --fs: min(13vw, 7.5vh); }
    .scenes-on .sectors__caption { min-height: 4.4em; }
  }

  /* Frames that hold still while their scene plays, where the window is big enough for them. */
  @media (min-width: 821px) and (min-height: 640px) {
    .scenes-on .about { --scene: pin; height: 210vh; }
    .scenes-on .about__frame { position: sticky; top: 0; height: 100vh; padding-block: calc(var(--nav-stuck) + 3vh) 4vh; }

    /* A sheet is only as tall as what it holds. --h is its height, set by the script, so one taller than the window still shows its foot. */
    .scenes-on .sheet { position: sticky; top: min(var(--nav-stuck), calc(100vh - var(--h, 0px))); }
  }
  /* The pathway holds still and uses the whole screen: the heading at the top left, the line climbing from the
     bottom left to the top right, and the land of dots filling everything under it. --top is where the last
     step stands, --label is the room each step's words need, and --rise is one step of the climb. */
  @media (min-width: 1200px) and (min-height: 640px) {
    .scenes-on .pathway { --scene: pin; height: 250vh; }
    .scenes-on .pathway__frame {
      position: sticky; top: 0; height: 100vh; align-content: start; padding-block: calc(var(--nav-stuck) + 3vh) 0;
      --top: calc(var(--nav-stuck) + 6vh); --label: 11.5rem;
    }
    .scenes-on .pathway .head { display: block; margin: 0; }
    .scenes-on .pathway .title { max-width: none; font-size: min(4.6vw, 10vh); white-space: nowrap; }
    .scenes-on .pathway .lede { margin-top: 0.9rem; max-width: min(44ch, 30vw); font-size: clamp(1rem, min(1.25vw, 2.6vh), 1.5rem); }
    .scenes-on .pathway__track {
      position: absolute; inset: 0 var(--gutter);
      --rise: min(calc((100vh - var(--top) - var(--label) - 7vh) / 5), calc((100vw - 2 * var(--gutter)) / 6 * 0.6));
    }
    .scenes-on .pathway__steps li { margin-top: calc(var(--top) + (5 - var(--i)) * var(--rise)); }
  }
}