/* The site's other pages: one page per creative sector, the sectors index, and news and events.
   Loaded after site.css, whose header, footer, type, buttons and arrivals they share.

   One system, eight voices. Every sector page has the same parts in the same order, so a reader always knows
   where they are: the sector's word, a question answered in one line, a picture of a real place in Sarawak,
   what AI does in that craft, where KAISAR comes in, what is already made, who works in the field, questions,
   and the same passage in Bahasa Melayu. What changes is how the page moves: each borrows its motion from its
   own craft (film is shot, animation is flipped, music plays, games are solved, XR tilts, design is drawn,
   events gather, media is printed). Every voice is decoration on top of the picture and the words; with less
   motion asked for, each keeps a still version of itself. */

.page { --dark: #170611; }
.page main { display: block; }

/* ---------- Breadcrumbs ---------- */
.crumbs ol { display: flex; flex-wrap: wrap; gap: 0.2rem 0.55rem; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; line-height: 1.4; color: var(--ink-soft); }
.crumbs li + li::before { content: "/"; margin-right: 0.55rem; color: var(--quiet); }
.crumbs a { text-decoration: underline 1px var(--line); text-underline-offset: 0.25em; transition: text-decoration-color 0.25s var(--ease-out); }
.crumbs a:hover { text-decoration-color: currentColor; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- A sector's first screen ----------
   Set like a cover: the sector's word across the top, as large as its length allows (--len is its number of
   letters, --word the size that gives), the picture standing in front of the lower half of the word, and the
   question the page answers beside it. */
.voice__hero {
  --word: min(calc(94vw / (var(--len, 6) * 0.6)), 34vh, 22rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 5rem);
  min-height: 100svh; padding: calc(var(--nav-h) + 0.25rem) var(--gutter) clamp(1rem, 2.5vh, 2rem);
}
.voice__hero .crumbs { grid-area: 1 / 1 / 2 / -1; }
.voice__word {
  grid-area: 2 / 1 / 3 / -1; position: relative; z-index: 0; justify-self: start;
  margin: 0.05em 0 0 -0.055em; font: 800 1rem/0.8 var(--display); font-size: var(--word); letter-spacing: -0.05em; white-space: nowrap;
}
.voice__dot { color: var(--copper); }
.voice__hero { position: relative; }
/* The word's copy inside the picture (pages.js places it), in the ground's colour. */
.voice__knock {
  position: absolute; z-index: 4; left: 0; top: 0; margin: 0; pointer-events: none;
  font: 800 1rem/0.8 var(--display); font-size: var(--word); letter-spacing: -0.05em; white-space: nowrap; color: var(--ground);
}
.voice__knock .voice__dot { color: var(--copper-lit); }
.stage--animation .voice__knock { color: var(--ink); }                 /* on the light table the word simply carries on, in ink */
.stage--animation .voice__knock .voice__dot { color: var(--copper); }
.voice__copy { grid-area: 3 / 1; align-self: end; min-width: 0; padding-top: 1.5rem; }
.voice__title {
  margin: 0.3em 0 0; max-width: 16ch; font: 800 1rem/1 var(--display); font-size: clamp(1.75rem, min(3.3vw, 5.6vh), 3.6rem);
  letter-spacing: -0.02em; color: var(--copper-ink); text-wrap: balance;
}
.voice__lede { margin: clamp(0.9rem, 2vh, 1.4rem) 0 0; max-width: 38ch; font-size: var(--step-1); line-height: 1.38; color: var(--ink-soft); }
.voice__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem clamp(1.25rem, 2.5vw, 2.5rem); margin: clamp(1.1rem, 2.6vh, 2rem) 0 0; }
.voice__actions .button--solid, .cta .button--solid { height: 3.25rem; padding: 0 1.6rem; font-size: 1.0625rem; border-radius: 8px; }
.voice__actions .arrow-link, .cta .arrow-link { font-size: 1.0625rem; padding: 0.75rem 0; }

.stage { grid-area: 3 / 2; position: relative; z-index: 1; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 0.6rem; margin: calc(var(--word) * -0.42) 0 0; min-height: 0; }
.stage__frame {
  position: relative; isolation: isolate; overflow: hidden; height: calc(100svh - var(--nav-h) - var(--word) * 0.38 - 6rem); min-height: 18rem;
  border-radius: clamp(0.9rem, 1.4vw, 1.4rem); background: var(--dark);
}
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__note { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; font-size: 0.875rem; line-height: 1.4; color: var(--ink-soft); }
.stage__note span { font-weight: 600; color: var(--ink); }

/* ---------- The parts, the same on every sector page ---------- */
.part {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; gap: 1.5rem clamp(2rem, 5vw, 6rem);
  padding: var(--band) var(--gutter); border-top: 1px solid var(--line);
}
.part__title { max-width: 11ch; font-size: clamp(2.1rem, 4.2vw, 4.4rem); }
.part__body { min-width: 0; }
.part__lede { margin: 0 0 1.5rem; max-width: 44ch; font-size: var(--step-1); line-height: 1.38; color: var(--ink-soft); }
.part__note { margin: 1.75rem 0 0; max-width: 46ch; font: 700 var(--step-1)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.part p a:not(.text-link), .story__body a, .qa a, .mates a { color: var(--copper-ink); font-weight: 500; text-decoration: underline 1.5px color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.25em; }
.part p a:not(.text-link):hover, .story__body a:hover, .mates a:hover { text-decoration-color: currentColor; }

.uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; }
.use { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 1rem; padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--line); }
.use__n { font: 500 0.875rem/1.6 var(--text); font-variant-numeric: tabular-nums; color: var(--copper-ink); }
.use p { margin: 0; font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); }
.mates strong { font: 700 var(--step-1)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.use strong, .made__words strong { display: block; margin-bottom: 0.2rem; font: 700 var(--step-1)/1.2 var(--display); letter-spacing: -0.01em; color: var(--ink); }

/* The pathway, for this craft: six nodes on one circuit line. */
.steps { --node: 0.85rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(1.25rem, 3vw, 3rem); margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { position: relative; padding: 0 0 1.6rem calc(var(--node) + 1.1rem); counter-increment: step; }
.steps li::before { content: ""; position: absolute; left: calc(var(--node) / 2 - 0.75px); top: calc(0.4em + var(--node)); bottom: 0.15rem; width: 1.5px; background: var(--copper); transform-origin: 50% 0; }
.steps li:nth-child(3)::before, .steps li:last-child::before { content: none; }
.steps__node { position: absolute; left: 0; top: 0.4em; width: var(--node); height: var(--node); border: 2px solid var(--copper); border-radius: 50%; background: var(--ground); }
.steps li:nth-child(n + 4) .steps__node { background: var(--copper); }
.steps p { margin: 0; font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); }
.steps strong { display: block; font: 800 var(--step-1)/1.15 var(--display); letter-spacing: -0.015em; text-transform: lowercase; color: var(--ink); }
.steps strong::before { content: "0" counter(step); display: block; margin-bottom: 0.3rem; font: 500 0.8125rem/1 var(--text); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; color: var(--copper-ink); }
.steps__node { top: 1.35rem; }
.steps li::before { top: calc(1.35rem + var(--node)); }
.steps { grid-auto-flow: column; grid-template-rows: repeat(3, auto); }

/* What is made already, or a plain word that nothing is yet. */
.made-list { display: grid; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.made__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--line); }
.made__item--pic { grid-template-columns: minmax(8rem, 15rem) minmax(0, 1fr); align-items: start; gap: clamp(1rem, 2.5vw, 2rem); }
.made__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 0.8rem; background: var(--ink); }
.made__pic img { width: 100%; height: 100%; object-fit: cover; }
.part--made .made__pic img[src*="/kai/"] { object-fit: contain; padding-top: 6%; }
.made__words p { margin: 0; max-width: 52ch; font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); }
.made__go { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; margin-top: 0.75rem !important; }
.made__empty { margin: 0; max-width: 44ch; font: 700 var(--step-1)/1.3 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.made-list + .made__empty { margin-top: 1.5rem; font: 400 var(--step-0)/1.5 var(--text); color: var(--ink-soft); }
.made__follow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.4rem; margin: 1.5rem 0 0; font-size: var(--step-0); color: var(--ink-soft); }
.made__follow a { display: inline-flex; align-items: center; gap: 0.3em; font-weight: 500; color: var(--copper-ink); text-decoration: underline 1.5px color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 0.3em; }
.made__follow svg { width: 0.85em; height: 0.85em; }

.mates { display: grid; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.mates li { padding: 1rem 0 1.15rem; border-top: 1px solid var(--line); font-size: var(--step-0); line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.part--partners .part__body > p:last-child { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; margin: 0; font-size: var(--step-0); }

.qas { display: grid; gap: 0; }
.qa { padding: 1.1rem 0 1.25rem; border-top: 1px solid var(--line); }
.qa h3 { margin: 0 0 0.4rem; font: 700 var(--step-1)/1.25 var(--display); letter-spacing: -0.01em; }
.qa p { margin: 0; max-width: 60ch; font-size: var(--step-0); line-height: 1.55; color: var(--ink-soft); }

/* The same page in Bahasa Melayu, in short. */
.part--bm { background: color-mix(in srgb, var(--copper) 7%, var(--ground)); border-top: 0; }
.bm__title { margin: 0 0 1rem; font: 800 1rem/1 var(--display); font-size: clamp(1.6rem, 2.8vw, 2.6rem); letter-spacing: -0.02em; color: var(--copper-ink); }
.part--bm .part__body > p:not(.bm__title) { margin: 0 0 1rem; max-width: 60ch; font-size: var(--step-0); line-height: 1.6; color: var(--ink-soft); }

/* ---------- Join, at the foot of each page ---------- */
.cta { position: relative; overflow: hidden; padding: clamp(4rem, 9vw, 9rem) var(--gutter); background: var(--ink); color: var(--on-ink); }
.cta__title { margin: 0; max-width: 12ch; font: 800 1rem/0.9 var(--display); font-size: clamp(2.6rem, 8vw, 8.5rem); letter-spacing: -0.03em; }
.cta__text { margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; max-width: 40ch; font-size: var(--step-1); line-height: 1.4; color: var(--on-ink-soft); }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: 2rem 0 0; }
.cta .arrow-link { color: var(--on-ink); }
.cta :focus-visible { outline-color: var(--on-ink); }
.cta ::selection { background: var(--on-ink); color: var(--ink); }

/* ---------- The eight, at the foot of a sector page ---------- */
.ring { padding: var(--band) var(--gutter) calc(var(--band) * 0.6); }
.ring__title { margin: 0 0 clamp(1.25rem, 2.5vw, 2rem); font: 800 1rem/1 var(--display); font-size: clamp(1.4rem, 2.4vw, 2.2rem); letter-spacing: -0.015em; }
.ring__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(1rem, 2.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.ring__go { display: grid; gap: 0.15rem; padding: 0.9rem 0 1.1rem; border-top: 1px solid var(--line); text-decoration: none; }
.ring__word { justify-self: start; font: 800 1rem/1 var(--display); font-size: clamp(1.9rem, 3.6vw, 3.6rem); letter-spacing: -0.03em; color: var(--quiet); transition: color 0.3s var(--ease-out); }
.ring__field { font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft); }
.ring__go:hover .ring__word, .ring__go:focus-visible .ring__word { color: var(--copper-ink); }
.ring__go.is-here { border-top: 2px solid var(--copper); }
.ring__go.is-here .ring__word { color: var(--ink); }

/* ---------- Bands: a strip under the first screen that carries the craft (decoration) ---------- */
.band { position: relative; overflow: hidden; }
.band__note { margin: 0; padding: 0.75rem var(--gutter) 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ================================================================ eight voices ================================================================ */

/* ---------- film: the gate opens, light leaks across, and a strip of frames runs with the scroll ---------- */
.stage--film .stage__frame::before, .stage--film .stage__frame::after {
  content: ""; position: absolute; z-index: 3; left: 0; right: 0; height: 50.5%; background: var(--dark); scale: 1 0; pointer-events: none;
}
.stage--film .stage__frame::before { top: 0; transform-origin: 50% 0; }
.stage--film .stage__frame::after { bottom: 0; transform-origin: 50% 100%; }
.leak {
  position: absolute; z-index: 2; inset: -10% -30%; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(closest-side at 32% 42%, rgb(255 168 112 / 0.75), transparent 72%), radial-gradient(closest-side at 64% 58%, rgb(232 120 90 / 0.5), transparent 70%);
}
.finder { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgb(251 250 251 / 0.75); stroke-width: 1.5; vector-effect: non-scaling-stroke; pointer-events: none; }
.finder path { vector-effect: non-scaling-stroke; }
.finder__rec {
  position: absolute; z-index: 2; left: 6.5%; top: 6.5%; display: inline-flex; align-items: center; gap: 0.45em;
  font: 600 0.75rem/1 var(--text); letter-spacing: 0.08em; text-transform: uppercase; color: rgb(251 250 251 / 0.9); pointer-events: none;
}
.finder__rec i { width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--copper-lit); }
.finder__tc { font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.finder__focus { position: absolute; z-index: 2; left: 0; top: 0; width: 3rem; height: 2.2rem; margin: -1.1rem 0 0 -1.5rem; border: 1.5px solid rgb(232 146 104 / 0.95); border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-out), translate 0.22s var(--ease-out); }
.finder__focus.is-on { opacity: 1; }
.band--film { background: var(--dark); padding: 1rem 0 0.9rem; }
.band--film .band__note { color: #c9b6cf; }
.strip { position: relative; display: flex; gap: 0.6rem; width: max-content; padding: 1.35rem 0.6rem; }
.strip::before, .strip::after {
  content: ""; position: absolute; left: 0; right: 0; height: 0.55rem;
  background: repeating-linear-gradient(90deg, rgb(251 250 251 / 0.22) 0 0.9rem, transparent 0.9rem 1.6rem);
  border-radius: 2px;
}
.strip::before { top: 0.4rem; }
.strip::after { bottom: 0.4rem; }
.strip { translate: calc((100vw - 100%) * var(--band-p, 0)) 0; }
.strip__frame { flex: none; width: clamp(9rem, 15vw, 15rem); aspect-ratio: 3 / 2; border-radius: 3px; background: var(--art) calc(var(--f) * 7.6%) 42% / 330% auto no-repeat, #2a0f22; }
.strip__frame:nth-child(4n + 2) { filter: brightness(1.08); }
.strip__frame:nth-child(5n + 3) { filter: saturate(1.15) brightness(0.94); }

/* ---------- animation: a stack of drawings on a light table, flipped like an animator checks the motion ---------- */
.stage--animation .stage__frame { background: radial-gradient(120% 90% at 50% 40%, #fff4ea, #f2d7c5 70%, #e7bfa8); perspective: 1400px; }
.stage--animation .stage__img, .stage--animation .sheet-under {
  inset: calc(var(--word) * 0.5 + 4%) 6% 5%; width: 88%; height: calc(95% - var(--word) * 0.5 - 4%); border: clamp(6px, 1vw, 12px) solid #fffdfb; border-radius: 3px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.16), 0 6px 18px rgb(0 0 0 / 0.1); transform-origin: 50% 0;
}
.sheet-under { position: absolute; object-fit: cover; }
.sheet-under--a { rotate: -2.2deg; translate: -1.2% 0.6%; filter: grayscale(1) contrast(1.35) brightness(1.18) sepia(0.45); }
.sheet-under--b { rotate: 1.8deg; translate: 1.4% 1%; filter: grayscale(1) contrast(1.6) brightness(1.35) sepia(0.7) hue-rotate(-12deg); opacity: 0.85; }
.pegs { position: absolute; z-index: 3; left: 50%; top: calc(var(--word) * 0.5 + 1.5%); display: flex; gap: clamp(1.5rem, 6vw, 4.5rem); translate: -50% 0; pointer-events: none; }
.pegs i { width: clamp(0.9rem, 1.8vw, 1.4rem); height: clamp(0.5rem, 0.9vw, 0.7rem); border-radius: 0.4rem; background: linear-gradient(#c58a69, #8d4a2e); box-shadow: 0 1px 1px rgb(0 0 0 / 0.25); }
.pegs i:nth-child(2) { border-radius: 50%; width: clamp(0.6rem, 1.1vw, 0.85rem); height: clamp(0.6rem, 1.1vw, 0.85rem); }
.band--animation { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.bounce { position: relative; height: clamp(7rem, 14vw, 12rem); margin: 0 var(--gutter); border-bottom: 1.5px solid var(--copper); }
.bounce__f {
  position: absolute; left: calc(var(--x) * 0.96); bottom: calc(var(--y) * 0.82); width: clamp(1.1rem, 2.4vw, 2.1rem); aspect-ratio: 1;
  border: 1.5px solid color-mix(in srgb, var(--copper) 45%, var(--ground)); border-radius: 50%; transform-origin: 50% 100%;
}
.bounce__f.is-contact { scale: 1.28 0.72; }
.bounce__f:nth-child(1) { background: var(--copper); border-color: var(--copper); }

/* ---------- music: the picture plays like a waveform, and Sarawak itself becomes a sound wave ---------- */
.stage--music .stage__frame.has-strips .stage__img { visibility: hidden; }
.strips { position: absolute; inset: 0; z-index: 1; display: flex; }
.strips i { flex: 1 0 0; height: 100%; margin-right: -0.5px; background-image: var(--art); background-repeat: no-repeat; translate: 0 var(--rest, 0); }
/* A meter along the foot of the picture, its bars rising and falling (each bar's height and pace are set in the page). */
.eq { position: absolute; z-index: 2; left: 5%; right: 5%; bottom: 4%; height: 17%; display: flex; align-items: flex-end; gap: 3px; pointer-events: none; mix-blend-mode: screen; }
.eq i { flex: 1 1 0; height: 100%; border-radius: 2px 2px 0 0; background: linear-gradient(to top, var(--copper), var(--copper-lit) 55%, #ffd9bf); opacity: 0.8; transform-origin: 50% 100%; scale: 1 var(--h); }
.band--music { background: var(--ink); padding: clamp(1rem, 2vw, 1.5rem) 0 1rem; }
.band--music .band__note { color: var(--on-ink-soft); }
.wave { display: block; width: 100%; height: clamp(17rem, 40vw, 34rem); }

/* ---------- games: the picture is a board of tiles that turn into place, then a circuit lights ---------- */
.stage--games .stage__frame.has-tiles .stage__img { visibility: hidden; }
.tiles { position: absolute; inset: 0; z-index: 1; display: grid; gap: 3px; padding: 3px; }
.tiles i { border-radius: 6px; background-image: var(--art); background-repeat: no-repeat; transition: rotate 0.42s cubic-bezier(0.3, 1.6, 0.5, 1); cursor: pointer; }
.circuit { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; fill: none; pointer-events: none; overflow: visible; }
.circuit__line { stroke: var(--copper-lit); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.circuit__ring { position: absolute; z-index: 3; width: 1rem; height: 1rem; margin: -0.5rem 0 0 -0.5rem; border: 2.5px solid var(--copper-lit); border-radius: 50%; background: var(--dark); pointer-events: none; }
.stage__frame.is-paused .strips i { animation-play-state: paused; }
.circuit__run { stroke: #fff2e8; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 0.03 1; opacity: 0; }
.band--games { padding: clamp(1.75rem, 3.5vw, 3rem) 0 0; }
.track { position: relative; display: flex; justify-content: space-between; margin: 0 var(--gutter); padding-top: 0.6rem; }
.track__line { position: absolute; left: 0.6rem; right: 0.6rem; top: calc(0.6rem + 0.55rem); height: 2px; background: var(--copper); transform-origin: 0 50%; scale: var(--band-line, 1) 1; }
.track__node { position: relative; display: grid; justify-items: center; gap: 0.6rem; }
.track__node::before { content: ""; width: 1.1rem; height: 1.1rem; border: 2px solid var(--copper); border-radius: 50%; background: var(--ground); transition: background-color 0.3s var(--ease-out), scale 0.3s var(--ease-out); }
.track__node b { font: 800 clamp(0.85rem, 1.4vw, 1.25rem)/1 var(--display); letter-spacing: -0.01em; }
.track__node.is-lit::before { background: var(--copper); scale: 1.25; }

/* ---------- XR: the picture has depth; it turns with the pointer or the phone, and a floor runs into the distance ---------- */
.stage--xr .stage__frame { transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.stage--xr .stage__img { scale: 1.1; translate: var(--dx, 0) var(--dy, 0); }
.hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; translate: calc(var(--dx, 0px) * -1.6) calc(var(--dy, 0px) * -1.6); }
.hud__grid { position: absolute; inset: 0; background: radial-gradient(circle, rgb(251 250 251 / 0.4) 0 1px, transparent 1.6px) 0 0 / 28px 28px; -webkit-mask: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 35%, #000 80%); mask: radial-gradient(ellipse 60% 55% at 50% 50%, transparent 35%, #000 80%); opacity: 0.5; }
.hud__ring { position: absolute; left: 50%; top: 46%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border: 1.5px solid rgb(251 250 251 / 0.6); border-radius: 50%; }
.hud__ring--b { width: 52%; border-style: dashed; border-color: rgb(232 146 104 / 0.65); }
.hud__cross { position: absolute; left: 50%; top: 46%; width: 2.2rem; height: 2.2rem; translate: -50% -50%; background: linear-gradient(rgb(251 250 251 / 0.85) 0 0) 50% 50% / 1.5px 100% no-repeat, linear-gradient(rgb(251 250 251 / 0.85) 0 0) 50% 50% / 100% 1.5px no-repeat; }
.tilt { position: absolute; z-index: 4; right: 0.75rem; bottom: 0.75rem; min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid rgb(251 250 251 / 0.7); border-radius: 999px; background: rgb(23 6 17 / 0.55); color: var(--on-ink); font: 500 0.875rem/1 var(--text); cursor: pointer; }
.band--xr { background: var(--dark); }
.band--xr .band__note { position: absolute; left: 0; top: 1rem; color: #c9b6cf; }
.floor { position: relative; height: clamp(8rem, 16vw, 13rem); overflow: hidden; perspective: 380px; }
.floor__plane {
  position: absolute; left: -60%; right: -60%; bottom: 0; height: 420%; overflow: hidden; transform-origin: 50% 100%; transform: rotateX(74deg);
  -webkit-mask: linear-gradient(transparent 0%, #000 45%); mask: linear-gradient(transparent 0%, #000 45%);
}
.floor__plane::before {
  content: ""; position: absolute; left: 0; right: 0; top: -64px; bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgb(232 146 104 / 0.6) 0 2px, transparent 2px 64px),
    repeating-linear-gradient(0deg, rgb(232 146 104 / 0.6) 0 2px, transparent 2px 64px);
}

/* ---------- design: construction lines draw themselves over the picture; a cursor reads where you are ---------- */
.drafting { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; fill: none; pointer-events: none; }
.drafting path, .drafting circle { vector-effect: non-scaling-stroke; }
.drafting .g { stroke: rgb(251 250 251 / 0.4); stroke-width: 1; }
.drafting .c { stroke: var(--copper-lit); stroke-width: 1.5; }
.drafting .d { stroke: rgb(251 250 251 / 0.85); stroke-width: 1.2; }
.drafting__label { position: absolute; z-index: 2; font: 600 0.75rem/1 var(--text); letter-spacing: 0.06em; color: rgb(251 250 251 / 0.9); pointer-events: none; font-variant-numeric: tabular-nums; }
.drafting__label--w { left: 50%; bottom: 5.6%; translate: -50% 0; padding: 0 0.4em; background: rgb(23 6 17 / 0.45); }
.drafting__label--h { right: 2.6%; top: 50%; translate: 50% -50%; rotate: -90deg; padding: 0 0.4em; background: rgb(23 6 17 / 0.45); }
.drafting__cursor { position: absolute; z-index: 3; inset: 0; pointer-events: none; opacity: 0; transition: opacity 0.3s var(--ease-out); }
.drafting__cursor i { position: absolute; background: rgb(232 146 104 / 0.9); }
.drafting__cursor i:first-child { left: var(--cx, 50%); top: 0; bottom: 0; width: 1px; }
.drafting__cursor i:nth-child(2) { top: var(--cy, 50%); left: 0; right: 0; height: 1px; }
.drafting__cursor b { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); translate: 0.6rem 0.6rem; padding: 0.3rem 0.5rem; border-radius: 4px; background: rgb(23 6 17 / 0.72); font: 500 0.75rem/1 var(--text); color: var(--on-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.stage--design .stage__frame.is-reading .drafting__cursor { opacity: 1; }
.band--design { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.ruler { position: relative; display: flex; justify-content: space-between; margin: 0 var(--gutter); height: 3.4rem; border-top: 1.5px solid var(--ink); }
.ruler__ticks { position: absolute; left: 0; right: 0; top: 0; height: 0.55rem; background: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px calc(100% / 120)); }
.ruler i { position: relative; width: 1px; height: 1.3rem; }
.ruler i::before { content: ""; position: absolute; inset: 0; background: var(--ink); }
.ruler b { position: absolute; left: 0.3rem; top: 1.25rem; font: 500 0.75rem/1 var(--text); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.ruler__mark { position: absolute; top: -0.1rem; left: calc(var(--band-p, 0.5) * 100%); width: 0; height: 0; border: 0.55rem solid transparent; border-top-color: var(--copper); translate: -50% -50%; }

/* ---------- events: the empty field fills with a crowd of dots; the lights chase ---------- */
.crowd { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band--events { padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; }
.lights { display: flex; justify-content: space-around; margin: 0 var(--gutter); padding: 0 0.5rem; height: clamp(6rem, 12vw, 10rem); background: linear-gradient(var(--ink) 0 0) 0 0 / 100% 3px no-repeat; }      /* the truss the lamps hang from */
.lights i { position: relative; width: clamp(0.9rem, 1.6vw, 1.4rem); height: clamp(1.2rem, 2.2vw, 1.9rem); margin-top: -1px; border-radius: 0 0 0.35rem 0.35rem; background: var(--ink); }
.lights i::before { content: ""; position: absolute; left: 15%; right: 15%; bottom: -3px; height: 4px; border-radius: 2px; background: var(--copper-lit); opacity: 0.35; }
.lights i::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: clamp(5rem, 11vw, 9rem); height: clamp(4.5rem, 10vw, 8.5rem); translate: -50% 0;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(rgb(232 146 104 / 0.7), rgb(232 146 104 / 0)); opacity: 0.12;
}

/* ---------- media: the picture is printed, dot by dot; the news runs past on a ticker ---------- */
.press { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: var(--ground); visibility: hidden; }
.band--media { background: var(--ink); color: var(--on-ink); }
.ticker { overflow: hidden; padding: 0.95rem 0; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker__run { display: flex; width: max-content; }
.ticker__run span { display: inline-flex; align-items: center; white-space: nowrap; font: 700 clamp(1rem, 1.6vw, 1.35rem)/1.2 var(--display); letter-spacing: -0.01em; }
.ticker__run span::after { content: ""; width: 0.45em; height: 0.45em; margin: 0 1.1em; border-radius: 50%; background: var(--copper-lit); }

/* ================================================================ the sectors index ================================================================ */
.deck { padding: calc(var(--nav-h) + 0.25rem) var(--gutter) var(--band); }
.deck__title { margin: clamp(1.5rem, 4vh, 3rem) 0 0; max-width: 12ch; font: 800 1rem/0.9 var(--display); font-size: clamp(2.8rem, 8vw, 8.5rem); letter-spacing: -0.03em; }
.deck__lede { margin: clamp(1rem, 2vw, 1.75rem) 0 clamp(2rem, 4vw, 3.5rem); max-width: 52ch; font-size: var(--step-1); line-height: 1.38; color: var(--ink-soft); }
.deck__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 3rem) clamp(1rem, 2vw, 2rem); margin: 0; padding: 0; list-style: none; }
.deck__go { display: grid; gap: 0.35rem; text-decoration: none; }
.deck__pic { display: block; aspect-ratio: 1; overflow: hidden; margin-bottom: 0.6rem; border-radius: clamp(0.8rem, 1.2vw, 1.2rem); background: var(--ink); }
.deck__pic img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease-out); }
.deck__go:hover .deck__pic img { scale: 1.05; }
.deck__word { font-size: clamp(2rem, 3.4vw, 3.4rem); color: var(--ink); }
.deck__go:hover .deck__word { color: var(--copper-ink); }
.deck__field { font: 700 var(--step-0)/1.25 var(--display); letter-spacing: -0.01em; }
.deck__line, .deck__place { font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
.deck__place { font-size: 0.8125rem; }
.deck__note { margin: 2rem 0 0; font-size: 0.875rem; color: var(--ink-soft); }

/* ================================================================ news and events ================================================================ */
.press-head { padding: calc(var(--nav-h) + 0.25rem) var(--gutter) clamp(1.5rem, 3vw, 2.5rem); }
.press-head__title { margin: clamp(1.5rem, 4vh, 3rem) 0 0; font: 800 1rem/0.88 var(--display); font-size: clamp(3rem, 10vw, 11rem); letter-spacing: -0.035em; }
.press-head__lede { margin: clamp(1rem, 2vw, 1.75rem) 0 0; max-width: 50ch; font-size: var(--step-1); line-height: 1.38; color: var(--ink-soft); }
.press-head__lede a { color: var(--copper-ink); }

.events { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 1.5rem clamp(2rem, 5vw, 6rem); padding: var(--band) var(--gutter); }
.events__title { font-size: clamp(2.1rem, 4.2vw, 4.4rem); }
.events__none { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1.5px dashed color-mix(in srgb, var(--copper) 55%, var(--ground)); border-radius: 1.2rem; }
.events__big { margin: 0; font: 800 1rem/0.9 var(--display); font-size: clamp(2.4rem, 6vw, 6rem); letter-spacing: -0.035em; color: var(--quiet); }
.events__big span { display: inline-block; }
.events__say { margin: 0; max-width: 46ch; font-size: var(--step-1); line-height: 1.4; color: var(--ink); }
.events__ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.events__ways a { display: grid; gap: 0.2rem; height: 100%; padding: 0.9rem 1rem; border-radius: 0.8rem; background: color-mix(in srgb, var(--copper) 8%, var(--ground)); font-size: 0.9375rem; line-height: 1.35; color: var(--ink-soft); text-decoration: none; transition: background-color 0.3s var(--ease-out); }
.events__ways a:hover { background: color-mix(in srgb, var(--copper) 16%, var(--ground)); }
.events__ways strong { font: 700 var(--step-0)/1.2 var(--display); color: var(--ink); }
.events__ways svg { width: 0.9rem; height: 0.9rem; color: var(--copper-ink); }

.feed { padding: var(--band) var(--gutter); border-top: 1px solid var(--line); }
.feed__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { min-height: 2.75rem; padding: 0 1rem; border: 1.5px solid var(--quiet); border-radius: 999px; background: none; font: 500 0.9375rem/1 var(--text); color: var(--ink); cursor: pointer; transition: background-color 0.25s var(--ease-out), color 0.25s var(--ease-out), border-color 0.25s var(--ease-out); }
.chip span { margin-left: 0.25em; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground); }
.chip[aria-pressed="true"] span { color: var(--on-ink-soft); }
.feed__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 3vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem); margin: 0; padding: 0; list-style: none; }
.item { display: grid; align-content: start; gap: 0.5rem; min-width: 0; }
.item[hidden] { display: none; }
.item__go { display: grid; gap: 0.5rem; text-decoration: none; }
.item__pic { display: block; aspect-ratio: 1200 / 630; overflow: hidden; margin-bottom: 0.4rem; border-radius: 0.9rem; background: var(--ink); }
.item__pic img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.8s var(--ease-out); }
.item__go:hover .item__pic img { scale: 1.04; }
.item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.75rem; margin: 0; font-size: 0.875rem; line-height: 1.3; color: var(--ink-soft); }
.item__kind { padding: 0.28rem 0.6rem; border-radius: 999px; background: color-mix(in srgb, var(--copper) 12%, var(--ground)); font-weight: 600; color: var(--copper-ink); }
.item--link .item__kind { background: color-mix(in srgb, var(--ink) 8%, var(--ground)); color: var(--ink); }
.item__title { margin: 0; font: 800 var(--step-1)/1.12 var(--display); letter-spacing: -0.015em; color: var(--ink); text-wrap: balance; }
.item__title a { text-decoration: none; }
.item__title a svg { width: 0.7em; height: 0.7em; vertical-align: 0.05em; color: var(--copper-ink); }
.item__go:hover .item__title, .item__title a:hover { color: var(--copper-ink); }
.item__summary { margin: 0; font-size: var(--step-small); line-height: 1.5; color: var(--ink-soft); }
.item__quote { margin: 0.25rem 0 0; font-size: 0.9375rem; line-height: 1.45; }
.item__quote p { margin: 0; font-style: italic; color: var(--ink); }
.item__quote cite { display: block; margin-top: 0.2rem; font-size: 0.8125rem; font-style: normal; color: var(--ink-soft); }
.item__why { margin: 0.25rem 0 0; padding: 0.75rem 0.9rem; border-radius: 0.6rem; background: color-mix(in srgb, var(--copper) 7%, var(--ground)); font-size: 0.9375rem; line-height: 1.45; color: var(--ink-soft); }
.item__why strong { display: flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink); }
.item__why strong::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border: 1.5px solid var(--copper); border-radius: 50%; }      /* the logo's ring node */
.item__tags { margin: 0; font-size: 0.8125rem; color: var(--ink-soft); }
/* An outside item's picture, drawn by the build (plate() in tools/build_pages.py): Sarawak's dot map on the society's
   purple, a copper ring on the place, and for news from further away a dotted line arriving from the west. The map's
   place per scope matches PLATE_AT there (a 1200 x 630 frame), so the ring lands on the map at every size. */
.plate { position: relative; display: block; overflow: hidden; aspect-ratio: 1200 / 630; margin-bottom: 0.4rem; border-radius: 0.9rem; container-type: inline-size; isolation: isolate;
  background: radial-gradient(120% 95% at 12% 0%, #4d1b66 0%, var(--ink) 52%, #23092f 100%); --glow: #f2a47c; }
.plate__map { position: absolute; max-width: none; height: auto; filter: brightness(1.8) saturate(1.05); transform-origin: 28% 82%; transition: scale 0.8s var(--ease-out); }
.plate--sarawak .plate__map { left: 16.667%; top: -4.762%; width: 83.333%; }
.plate--malaysia .plate__map { left: 31.667%; top: 11.111%; width: 68.333%; }
.plate--international .plate__map { left: 43.333%; top: 23.81%; width: 56.667%; }
.plate__art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.plate__node { fill: var(--glow); }
.plate__ring, .plate__from { fill: none; stroke: var(--glow); stroke-width: 4; }
.plate__pulse { fill: none; stroke: var(--glow); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.plate__arc { fill: none; stroke: var(--glow); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 22; }
.plate__globe { fill: none; stroke: color-mix(in srgb, var(--ground) 52%, transparent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 15; }
.plate__word { position: absolute; left: 5.5%; top: 7.5%; max-width: 60%; font: 800 8.4cqi/0.96 var(--display); letter-spacing: -0.03em; color: var(--ground); text-wrap: balance; }
.item--link:hover .plate__map { scale: 1.04; }
/* The newest KAISAR item leads, across two columns, its words beside its picture. */
.item--feature { grid-column: span 2; }
.item--feature .item__go { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr; column-gap: clamp(1.25rem, 2.5vw, 2.5rem); }
.item--feature .item__pic { grid-row: 1 / 4; margin: 0; }
.item--feature .item__title { font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.02; }
.item--feature .item__summary { font-size: var(--step-0); }
.months { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding-top: 1.5rem; border-top: 1px solid var(--line); }
.months__title { margin: 0 0 1rem; font: 800 var(--step-1)/1 var(--display); letter-spacing: -0.01em; }
.months ul { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; padding: 0; list-style: none; }
.months a { font-weight: 500; color: var(--copper-ink); text-underline-offset: 0.3em; }
.months a[aria-current] { color: var(--ink); text-decoration: none; }
.months span { color: var(--ink-soft); font-size: 0.875rem; }

/* A KAISAR item's own page: one column to read in, its picture printed in. */
.story { max-width: 46rem; margin: 0 auto; padding: calc(var(--nav-h) + 0.25rem) var(--gutter) var(--band); }
.story__meta { display: flex; align-items: center; gap: 0.75rem; margin: clamp(1.5rem, 4vh, 3rem) 0 0; font-size: 0.9375rem; color: var(--ink-soft); }
.story__title { margin: 0.75rem 0 0; font: 800 1rem/0.98 var(--display); font-size: clamp(2.3rem, 6vw, 4.6rem); letter-spacing: -0.03em; text-wrap: balance; }
.story__summary { margin: 1.1rem 0 0; font-size: var(--step-1); line-height: 1.4; color: var(--ink-soft); }
.story__pic { position: relative; overflow: hidden; margin: clamp(1.5rem, 4vw, 2.5rem) calc(var(--gutter) * -0.5) 0; border-radius: 1rem; background: var(--ink); aspect-ratio: 1200 / 630; }
.story__pic img { width: 100%; height: 100%; object-fit: cover; }
.story__facts { display: flex; gap: 1rem 2.5rem; margin: 1.75rem 0 0; }
.story__facts dt { font-size: 0.875rem; color: var(--ink-soft); }
.story__facts dd { margin: 0.15rem 0 0; font: 600 var(--step-0)/1.3 var(--text); }
.story__body { margin-top: clamp(1.5rem, 4vw, 2.5rem); }
.story__body p, .story__body li { font-size: var(--step-0); line-height: 1.65; color: var(--ink); }
.story__body p { margin: 0 0 1.1rem; max-width: 62ch; }
.story__body ul { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.story__tags { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.9375rem; color: var(--ink-soft); }
.story__tags a { font-weight: 500; color: var(--copper-ink); }
.story__back { margin: 1.5rem 0 0; }
.feed--more { max-width: none; }

/* ================================================================ narrower screens ================================================================ */
@media (max-width: 1099px) {
  .feed__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deck__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ring__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .voice__hero { --word: min(calc(94vw / (var(--len, 6) * 0.58)), 10rem); grid-template-columns: minmax(0, 1fr); grid-template-rows: none; min-height: 0; padding-top: calc(var(--nav-h) + 0.25rem); }
  .voice__hero .crumbs, .voice__word, .voice__copy, .stage { grid-area: auto; }
  .voice__word { margin-top: 0.3em; }
  .voice__copy { padding-top: 1.1rem; }
  .voice__title { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .stage { order: 3; margin: calc(var(--word) * -0.3) calc(var(--gutter) * -1) 0; }      /* on a phone: the word, the picture, then the words */
  .voice__copy { order: 4; }
  .stage__frame { height: auto; aspect-ratio: 1; min-height: 0; border-radius: 0; }
  .stage__note { padding: 0 var(--gutter); }
  .finder__rec { top: auto; bottom: 6.5%; }                 /* clear of the word, which crosses the top of the picture here */
  .part, .events { grid-template-columns: minmax(0, 1fr); }
  .uses, .steps { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; grid-template-rows: none; }
  .steps li:nth-child(3)::before { content: ""; }
  .made__item--pic { grid-template-columns: minmax(0, 1fr); }
  .feed__list, .deck__list { grid-template-columns: minmax(0, 1fr); }
  .item--feature { grid-column: auto; }
  .item--feature .item__go { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .item--feature .item__pic { grid-row: auto; margin-bottom: 0.4rem; }
  .events__ways { grid-template-columns: minmax(0, 1fr); }
  .story__pic { margin-inline: calc(var(--gutter) * -1); border-radius: 0; }
  .track__node b { writing-mode: vertical-rl; rotate: 180deg; font-size: 0.8rem; }
  .ruler i:nth-child(odd) b { display: none; }
}

/* ================================================================ motion ================================================================
   Nothing here hides anything unless motion is welcome. Each voice's intro plays once, from the first paint, in
   CSS; the scripts (pages.js) add only what follows the pointer, the scroll or the clock. */
@media (prefers-reduced-motion: no-preference) {
  .plate__pulse { animation: plate-pulse 3s var(--ease-out) infinite; }
  @keyframes plate-pulse { from { opacity: 0.85; scale: 1; } to { opacity: 0; scale: 2.8; } }
  .item--link:hover .plate__arc { animation: plate-flow 1.1s linear infinite; }
  @keyframes plate-flow { to { stroke-dashoffset: -44; } }
  .voice__word { animation: word-in 1s var(--ease-out) 0.05s backwards; }
  .voice__title { animation: rise 0.9s var(--ease-out) 0.25s backwards; }
  .voice__lede { animation: rise 0.9s var(--ease-out) 0.38s backwards; }
  .voice__actions { animation: rise 0.9s var(--ease-out) 0.5s backwards; }
  @keyframes word-in { from { opacity: 0; translate: 0 0.12em; filter: blur(0.06em); } }

  /* The sector's word travels between the home page's wheel, this index and the sector's own page. */
  [data-voice="film"] .voice__word, [data-to="film"]:not(.is-here) .ring__word { view-transition-name: sector-film; }
  [data-voice="animation"] .voice__word, [data-to="animation"]:not(.is-here) .ring__word { view-transition-name: sector-animation; }
  [data-voice="music"] .voice__word, [data-to="music"]:not(.is-here) .ring__word { view-transition-name: sector-music; }
  [data-voice="games"] .voice__word, [data-to="games"]:not(.is-here) .ring__word { view-transition-name: sector-games; }
  [data-voice="xr"] .voice__word, [data-to="xr"]:not(.is-here) .ring__word { view-transition-name: sector-xr; }
  [data-voice="design"] .voice__word, [data-to="design"]:not(.is-here) .ring__word { view-transition-name: sector-design; }
  [data-voice="events"] .voice__word, [data-to="events"]:not(.is-here) .ring__word { view-transition-name: sector-events; }
  [data-voice="media"] .voice__word, [data-to="media"]:not(.is-here) .ring__word { view-transition-name: sector-media; }
  [data-voice] .stage__frame { view-transition-name: stage; }

  /* film */
  .stage--film .stage__frame::before, .stage--film .stage__frame::after { animation: gate 1.6s cubic-bezier(0.7, 0, 0.2, 1) 0.15s both; }
  @keyframes gate { 0%, 25% { scale: 1 1; } 100% { scale: 1 0; } }
  .leak { animation: leak 11s ease-in-out 1.1s infinite; }
  @keyframes leak { 0% { opacity: 0; translate: -38% 0; } 18% { opacity: 0.85; } 50% { opacity: 0.35; translate: 8% 4%; } 78% { opacity: 0.7; } 100% { opacity: 0; translate: 38% 0; } }
  .finder { animation: finder 1.1s var(--ease-out) 1.2s backwards; }
  @keyframes finder { from { opacity: 0; scale: 1.06; } }

  /* animation: the top sheet is flipped up from the pegs and dropped, on twelve drawings a second */
  .stage--animation .stage__img { animation: flip 1.9s steps(11, end) 0.6s 2 both; }
  @keyframes flip { 0% { rotate: x 0deg; } 35% { rotate: x -62deg; } 70%, 100% { rotate: x 0deg; } }
  .stage--animation .stage__frame.is-flipping .stage__img { animation: flip 1.9s steps(11, end) both; }
  .bounce__f { animation: ball 1.0833s steps(1) calc(var(--i) * 83.33ms - 1.0833s) infinite; }
  .bounce__f:nth-child(1) { background: none; border-color: color-mix(in srgb, var(--copper) 45%, var(--ground)); }
  @keyframes ball { 0%, 7.6% { background: var(--copper); border-color: var(--copper); } 7.7%, 100% { background: transparent; } }

  /* music */
  .strips i { animation: wave var(--dur, 1.7s) ease-in-out var(--delay, 0s) infinite alternate; }
  .eq i { animation: eq var(--t) cubic-bezier(0.45, 0, 0.3, 1) var(--d) infinite alternate; }
  @keyframes eq { from { scale: 1 calc(var(--h) * 0.18); } to { scale: 1 var(--h); } }
  .stage__frame.is-paused .eq i { animation-play-state: paused; }
  .voice__knock { animation: fade-in 0.7s var(--ease-out) 0.9s backwards; }
  @keyframes wave { from { translate: 0 calc(var(--amp) * -1); } to { translate: 0 var(--amp); } }

  /* games: drawn by pages.js */
  .circuit__line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease-out); }
  .is-solved .circuit__line { stroke-dashoffset: 0; }
  .is-solved .circuit__run { opacity: 1; animation: run 3.4s linear 2s infinite; }
  @keyframes run { from { stroke-dashoffset: 1.03; } to { stroke-dashoffset: 0; } }
  .circuit__ring { opacity: 0; scale: 0.4; transition: opacity 0.4s var(--ease-out) calc(0.2s + var(--k, 0) * 0.5s), scale 0.5s var(--ease-out) calc(0.2s + var(--k, 0) * 0.5s); }
  .is-solved .circuit__ring { opacity: 1; scale: 1; }

  /* XR */
  .hud__ring { animation: ring 1.4s var(--ease-out) 0.3s backwards, breathe 6s ease-in-out 2s infinite; }
  .hud__ring--b { animation: ring 1.6s var(--ease-out) 0.5s backwards, spin 40s linear infinite; }
  .hud__grid { animation: fade-in 1.4s var(--ease-out) 0.8s backwards; }
  .stage--xr .stage__frame::after { content: ""; position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 18%; background: linear-gradient(transparent, rgb(232 146 104 / 0.28), transparent); translate: 0 -100%; animation: scan 1.8s var(--ease-out) 0.2s both; pointer-events: none; }
  @keyframes scan { to { translate: 0 650%; opacity: 0; } }
  @keyframes ring { from { opacity: 0; scale: 0.6; } }
  @keyframes breathe { 50% { scale: 1.04; } }
  @keyframes spin { to { rotate: 360deg; } }
  @keyframes fade-in { from { opacity: 0; } }
  .floor__plane::before { animation: floor 1.4s linear infinite; }
  @keyframes floor { to { translate: 0 64px; } }

  /* design */
  .drafting path, .drafting circle { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease-out) calc(0.3s + var(--k, 0) * 70ms) forwards; }
  .drafting .c { --k: 14; }
  .drafting .d { --k: 17; }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .drafting__label { animation: fade-in 0.8s var(--ease-out) 1.8s backwards; }

  /* events */
  .lights i::after, .lights i::before { animation: chase 2.7s steps(1) calc(var(--i) * 0.3s) infinite; }
  @keyframes chase { 0%, 11% { opacity: 1; } 12%, 100% { opacity: 0.12; } }

  /* media */
  .press { visibility: visible; -webkit-mask: radial-gradient(circle, transparent var(--dot), #000 calc(var(--dot) + 0.6px)) 0 0 / 10px 10px; mask: radial-gradient(circle, transparent var(--dot), #000 calc(var(--dot) + 0.6px)) 0 0 / 10px 10px; animation: press 1.8s cubic-bezier(0.5, 0, 0.2, 1) 0.2s both; }
  @keyframes press { from { --dot: 0px; } 99% { --dot: 7.4px; visibility: visible; } to { --dot: 7.4px; visibility: hidden; } }
  .ticker__run { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker__run { animation-play-state: paused; }
  @keyframes ticker { to { translate: -50% 0; } }

  /* the bands that follow the scroll, where the browser can tie an animation to it without a script */
  @supports (animation-timeline: view()) {
    .strip { animation: strip linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes strip { from { translate: 0 0; } to { translate: calc(-100% + 100vw) 0; } }
    .ruler__mark { animation: mark linear both; animation-timeline: view(); animation-range: entry 20% exit 60%; }
    @keyframes mark { from { left: 0%; } to { left: 100%; } }
    .track__line { animation: line linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    @keyframes line { from { scale: 0 1; } }
  }
}
@property --dot { syntax: "<length>"; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: reduce) {
  .stage--film .stage__frame::before, .stage--film .stage__frame::after { display: none; }
  .bounce__f:nth-child(5) { background: var(--copper); border-color: var(--copper); }
  .bounce__f:nth-child(1) { background: none; border-color: color-mix(in srgb, var(--copper) 45%, var(--ground)); }
  .stage--xr .stage__frame { transform: none; }
  .ticker__run { flex-wrap: wrap; width: auto; row-gap: 0.5rem; padding: 0 var(--gutter); }
  .ticker__run span:nth-child(n + 4) { display: none; }
  .ticker { -webkit-mask: none; mask: none; }
}