/* GILVUS - The Narrowing Sequence

   Three type roles, not two:

   1. The wordmark stays fixed vector artwork. It is drawn, never set.
   2. A display serif carries the titles and the two display moments. Without
      it the wordmark is the only serif on the page and reads as a logo
      borrowed from somewhere else. Giving the serif real work is what makes
      the wordmark belong.
   3. The system mono carries everything functional: labels, claims, notes,
      the readout and the controls. It is excellent at that and poor at
      headlines, which is what it was doing before.

   Every size, tracking and colour below is drawn from one scale. */

@font-face {
  font-family: "GILVUS System";
  src: url("assets/fonts/departure/DepartureMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "GILVUS Display";
  src: url("assets/fonts/instrument/InstrumentSerif-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --field: #090c0a;
  --bone: #eef0e7;
  --mineral: #69736b;
  --signal: #e4e88a;

  --ink-1: rgb(238 240 231 / 100%); /* titles */
  --ink-2: rgb(238 240 231 / 88%); /* the claim */
  --ink-3: rgb(238 240 231 / 75%); /* supporting sentence: quiet, and legible on a phone outdoors */
  --ink-4: rgb(238 240 231 / 55%); /* labels and furniture */
  --hair: rgb(238 240 231 / 16%);

  --system: "GILVUS System", ui-monospace, monospace;
  /* Georgia first in the fallback: a serif must never fall back to the mono,
     or the page loses the distinction the whole system rests on. */
  --display: "GILVUS Display", Georgia, "Times New Roman", serif;

  /* One scale. Micro type is wide and upright; display type is tight. */
  --t-micro: 0.5625rem;
  --t-small: 0.78rem;
  --t-body: 0.8125rem;
  --t-line: clamp(0.95rem, 1.6vw, 1.15rem);
  --t-title: clamp(2.5rem, 6.4vw, 4.2rem);
  --t-display: clamp(2.7rem, 8.2vw, 5.5rem);

  --track-micro: 0.24em;
  --track-tight: -0.025em;
  /* The serif is already tightly fitted; it needs far less negative tracking
     than the mono did, and none of the mono's optical compensation. */
  --track-display: -0.012em;

  --gutter: clamp(1.25rem, 3.25vw, 3.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --measure: 30rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* The scrollbar is furniture too. Thin, dark, and signal on contact. */
  scrollbar-width: thin;
  scrollbar-color: rgb(238 240 231 / 20%) transparent;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgb(238 240 231 / 18%);
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(228 232 138 / 45%);
}

html,
body {
  width: 100%;
  min-width: 18rem;
  margin: 0;
  background: var(--field);
  color: var(--bone);
}

body {
  font-family: var(--system);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
canvas {
  display: block;
}

p,
h1,
h2,
dl,
dd,
dt {
  margin: 0;
}

ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

::selection {
  background: var(--signal);
  color: var(--field);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, input):focus-visible {
  outline: 1px solid var(--signal);
  outline-offset: 0.4rem;
}

.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 9;
  padding: 0.8rem 1rem;
  background: var(--signal);
  color: var(--field);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-decoration: none;
  transform: translateY(-220%);
  transition: transform 180ms var(--ease);
}

.skip-link:focus {
  transform: none;
}

/* ------------------------------------------------------------------- field */

.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  background: var(--field);
}

/* When the field is accepting commitments the whole surface says so, because
   the whole surface is the field. Controls keep their own cursor. */
:root[data-commits="live"] body {
  cursor: crosshair;
}

:root[data-commits="live"] :where(a, button) {
  cursor: pointer;
}

:root[data-commits="live"] .slider {
  cursor: ew-resize;
}

/* The armed cursor: a registered cell riding just behind the pointer while
   the field accepts commitments. Created by script, absent without it. */
.commit-cursor {
  position: fixed;
  top: -0.19rem;
  left: -0.19rem;
  z-index: 6;
  width: 0.38rem;
  height: 0.38rem;
  background: var(--signal);
  box-shadow: 0 0 10px rgb(228 232 138 / 45%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms var(--ease);
}

:root[data-commits="live"] .commit-cursor {
  opacity: 1;
}

/* Depth, not a panel: the field fades toward unresolved space where the words
   sit, and stays open everywhere else. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(96deg, rgb(9 12 10 / 55%) 0%, rgb(9 12 10 / 22%) 32%, rgb(9 12 10 / 0%) 60%),
    linear-gradient(0deg, rgb(9 12 10 / 58%) 0%, rgb(9 12 10 / 0%) 24%);
}

:root[data-field="unavailable"] .field,
:root[data-field="unavailable"] .scrim {
  display: none;
}

:root[data-field="unavailable"] body {
  background:
    radial-gradient(120% 80% at 72% 20%, rgb(105 115 107 / 12%) 0%, rgb(9 12 10 / 0%) 60%),
    var(--field);
}

/* ---------------------------------------------------------------- identity */

.identity {
  position: fixed;
  z-index: 5;
  top: max(clamp(1.4rem, 4.2vh, 2.6rem), env(safe-area-inset-top));
  left: max(var(--gutter), env(safe-area-inset-left));
}

/* The chrome arrives a beat after the field, as a pure CSS entrance with no
   condition attached: a script that never runs, or runs and fails, can delay
   nothing and hide nothing. */
.identity,
.rail,
.counter {
  animation: chrome-in 900ms var(--ease) backwards;
}

.rail {
  animation-delay: 340ms;
}

.counter {
  animation-delay: 480ms;
}

.identity {
  animation-delay: 180ms;
}

@keyframes chrome-in {
  from { opacity: 0; }
}

.identity__home {
  display: block;
}

.identity__wordmark {
  width: clamp(8.5rem, 14vw, 13rem);
  height: auto;
}

/* -------------------------------------------------------------------- rail */

.rail {
  position: fixed;
  z-index: 5;
  top: 50%;
  right: max(var(--gutter), env(safe-area-inset-right));
  transform: translateY(-50%);
}

.rail ol {
  display: grid;
  gap: 0.8rem;
  justify-items: end;
}

.rail a {
  display: block;
  width: 1rem;
  height: 1px;
  background: rgb(238 240 231 / 45%);
  transition:
    width 420ms var(--ease),
    background-color 420ms var(--ease),
    box-shadow 420ms var(--ease);
}

.rail__entry a {
  width: 0.5rem;
}

.rail a:hover {
  width: 1.7rem;
  background: rgb(238 240 231 / 56%);
}

.rail a[aria-current="true"] {
  width: 2.3rem;
  background: var(--signal);
  box-shadow: 0 0 10px rgb(228 232 138 / 35%);
}

/* ------------------------------------------------------- counter + readout */

.counter {
  position: fixed;
  z-index: 5;
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(clamp(1.4rem, 4vh, 2.6rem), env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}

/* One thin line of journey under the count, filled by scroll position. */
.counter__progress {
  width: 100%;
  height: 1px;
  margin-top: 0.45rem;
  background: var(--signal);
  opacity: 0.55;
  transform: scaleX(0);
  transform-origin: left;
}

.counter [data-counter] {
  display: inline-block;
  color: var(--signal);
}

/* A changed count arrives the way a value does: it rolls up into place. */
.counter [data-counter].roll {
  animation: count-roll 320ms var(--ease);
}

@keyframes count-roll {
  from {
    transform: translateY(0.55em);
    opacity: 0;
  }
}

/* The readout is the only element that speaks continuously, and it speaks in
   values. It appears when the reader takes hold of the instrument. */
.readout {
  position: fixed;
  z-index: 5;
  left: max(var(--gutter), env(safe-area-inset-left));
  bottom: max(clamp(1.4rem, 4vh, 2.6rem), env(safe-area-inset-bottom));
  opacity: 0;
  transform: translateY(0.4rem);
  transition:
    opacity 600ms var(--ease),
    transform 600ms var(--ease);
  pointer-events: none;
}

:root[data-act="ii"] .readout {
  opacity: 1;
  transform: none;
}

.readout dl {
  display: grid;
  gap: 0.34rem;
}

.readout div {
  display: grid;
  grid-template-columns: 5.4rem auto;
  align-items: baseline;
  gap: 0.6rem;
}

.readout dt {
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}

.readout dd {
  font-size: var(--t-micro);
  letter-spacing: 0.12em;
  color: var(--signal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A changed count registers the way the chapter counter does: it rolls. */
.readout dd.roll {
  animation: count-roll 320ms var(--ease);
}

/* The engineering panel. Hidden until the reader presses G; then the machine
   shows its real state in the system voice. */
.hud {
  position: fixed;
  top: max(clamp(1.4rem, 4.2vh, 2.6rem), env(safe-area-inset-top));
  right: max(var(--gutter), env(safe-area-inset-right));
  z-index: 7;
  display: none;
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px solid var(--hair);
  background: rgb(9 12 10 / 80%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: var(--t-micro);
}

:root[data-hud="open"] .hud {
  display: grid;
  gap: 0.3rem;
}

.hud div {
  display: grid;
  grid-template-columns: 5.4rem auto;
  align-items: baseline;
  gap: 0.6rem;
}

.hud dt {
  color: var(--ink-4);
  letter-spacing: var(--track-micro);
}

.hud dd {
  margin: 0;
  color: var(--signal);
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ stages */

.sequence {
  position: relative;
  z-index: 2;
}

.stage {
  display: flex;
  align-items: flex-end;
  min-height: 100vh;
  min-height: 100dvh;
  padding:
    clamp(6rem, 16vh, 10rem)
    max(var(--gutter), env(safe-area-inset-right))
    clamp(7rem, 17vh, 10.5rem)
    max(var(--gutter), env(safe-area-inset-left));
}

.stage--entry,
.stage--close {
  align-items: center;
}

.stage__body {
  width: min(100%, var(--measure));
}

/* A short signal rule opens every chapter. It is the smallest possible mark
   that says a new state has begun. */
.tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  line-height: 1.6;
  color: var(--ink-4);
}

.tag::before {
  content: "";
  width: 1.4rem;
  height: 1px;
  background: var(--signal);
  transform-origin: left;
}

.title {
  margin-top: clamp(0.7rem, 1.7vh, 1.15rem);
  font-family: var(--display);
  font-size: var(--t-title);
  font-weight: 400;
  line-height: 0.97;
  letter-spacing: var(--track-display);
  color: var(--ink-1);
}

/* Ragged edges are a choice; these are balanced ones. */
.display,
.title,
.line,
.lede {
  text-wrap: balance;
}

.line {
  margin-top: clamp(0.85rem, 1.9vh, 1.2rem);
  font-size: var(--t-line);
  line-height: 1.4;
  color: var(--ink-2);
}

.note {
  margin-top: clamp(0.9rem, 2vh, 1.3rem);
  max-width: 26rem;
  font-size: var(--t-small);
  line-height: 1.9;
  color: var(--ink-3);
}

.display {
  font-family: var(--display);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: var(--track-display);
  color: var(--ink-1);
}

.display--small {
  font-size: clamp(1.9rem, 5vw, 3.2rem);
}

.display em {
  font-style: normal;
  color: var(--signal);
}

.lede {
  margin-top: clamp(1.1rem, 2.6vh, 1.7rem);
  max-width: 25rem;
  font-size: var(--t-body);
  line-height: 1.85;
  color: var(--ink-3);
}

/* The close answers the entry, so it gets the same voice. Opening in serif and
   ending in mono left the last screen flatter than the first. */
.lede--wide {
  max-width: 30rem;
  margin-top: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.24;
  letter-spacing: var(--track-display);
  color: var(--ink-1);
}

.cue {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: clamp(2.4rem, 7vh, 4rem);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}

.cue__mark {
  width: 1px;
  height: 1.7rem;
  background: linear-gradient(180deg, var(--signal) 0%, rgb(228 232 138 / 0%) 100%);
  transform-origin: top;
  animation: drop 2.8s var(--ease) infinite;
}

@keyframes drop {
  0% { transform: scaleY(0.2); opacity: 0; }
  35% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.2) translateY(1.4rem); opacity: 0; }
}

/* ------------------------------------------------------------------- close */

/* The close signs with the symbol - the mark, not the logotype. It settles
   into the final frame at greater size than anywhere else on the page, and
   the line follows it. */
.signature {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 1.6rem);
  margin-top: clamp(2.2rem, 6vh, 3.6rem);
}

.signature__mark {
  width: clamp(4.2rem, 7vw, 6rem);
  height: auto;
}

.signature__line {
  font-size: var(--t-small);
  letter-spacing: 0.05em;
  color: var(--signal);
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-field="live"] .stage .signature__mark {
    opacity: 0;
    transform: translateY(0.6rem) scale(0.94);
    transition:
      opacity 900ms var(--ease) 950ms,
      transform 900ms var(--ease) 950ms;
  }

  :root[data-field="live"] .stage.is-live .signature__mark {
    opacity: 1;
    transform: none;
  }

  :root[data-field="live"] .stage .signature__line {
    opacity: 0;
    transform: translateY(0.4rem);
    transition:
      opacity 720ms var(--ease) 1500ms,
      transform 720ms var(--ease) 1500ms;
  }

  :root[data-field="live"] .stage.is-live .signature__line {
    opacity: 1;
    transform: none;
  }
}

/* Not a caption: a status chip with a live dot. The machine is armed. */
.state {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: clamp(1.8rem, 4.5vh, 2.6rem);
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--hair);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-3);
}

.state__dot {
  width: 0.32rem;
  height: 0.32rem;
  background: var(--signal);
  animation: state-pulse 2.6s var(--ease) infinite;
}

@keyframes state-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.22; }
}

/* The machine is playable. One line of furniture says so, on the devices
   that have keys. */
.keys {
  margin-top: clamp(1.4rem, 3.2vh, 2rem);
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}

@media (hover: none) {
  .keys {
    display: none;
  }
}

.noscript {
  position: relative;
  z-index: 4;
  padding: var(--gutter);
  font-size: var(--t-small);
  line-height: 1.85;
  color: var(--ink-3);
}

/* --------------------------------------------------------------- controls */

.control {
  margin-top: clamp(1.5rem, 3.4vh, 2.2rem);
}

.control__label {
  display: block;
  font-size: var(--t-micro);
  letter-spacing: var(--track-micro);
  color: var(--ink-4);
}

.control__hint {
  margin-top: 0.85rem;
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  color: var(--ink-4);
}

.segmented {
  display: inline-flex;
  margin-top: 0.9rem;
  border: 1px solid var(--hair);
}

.segmented button {
  appearance: none;
  padding: 0.72rem 1.05rem;
  border: 0;
  border-right: 1px solid var(--hair);
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: var(--t-micro);
  letter-spacing: 0.16em;
  cursor: pointer;
  transition:
    color 240ms var(--ease),
    background-color 240ms var(--ease);
}

.segmented button:last-child {
  border-right: 0;
}

.segmented button:hover {
  color: var(--ink-1);
}

/* Selecting a precision is itself a commitment, so it takes the signal. */
.segmented button[aria-pressed="true"] {
  background: var(--signal);
  color: var(--field);
}

.slider {
  appearance: none;
  width: min(100%, 17rem);
  margin-top: 1.35rem;
  background: transparent;
  cursor: ew-resize;
}

.slider::-webkit-slider-runnable-track {
  height: 1px;
  background: var(--hair);
}

.slider::-moz-range-track {
  height: 1px;
  background: var(--hair);
}

/* A square, not a dot: the thumb is a registered cell like every other. */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 0.55rem;
  height: 0.55rem;
  margin-top: -0.27rem;
  background: var(--signal);
  border: 0;
  border-radius: 0;
}

.slider::-moz-range-thumb {
  width: 0.55rem;
  height: 0.55rem;
  background: var(--signal);
  border: 0;
  border-radius: 0;
}

.commit {
  appearance: none;
  margin-top: 0.9rem;
  padding: 0.82rem 1.6rem;
  border: 1px solid var(--signal);
  background: transparent;
  color: var(--signal);
  font-family: inherit;
  font-size: var(--t-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background-color 200ms var(--ease),
    color 200ms var(--ease);
}

.commit:hover,
.commit:active {
  background: var(--signal);
  color: var(--field);
}

/* ---------------------------------------------------------------- reveal */

/* Two reveal systems, split by role. The furniture - tags, titles, notes,
   controls - rises as blocks, driven straight from scroll position where the
   browser supports it. The claims themselves arrive word by word: the script
   wraps each word, and a chapter crossing a third of the viewport sets them
   off in reading order. Without script, motion or observation, every word is
   simply already there. */
.w {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .stage .w {
    opacity: 0;
    transform: translate3d(0, 0.45em, 0);
    transition:
      opacity 620ms var(--ease),
      transform 620ms var(--ease);
    transition-delay: calc(140ms + var(--wi) * 70ms);
  }

  /* The two display statements speak slower and lower, like the voice that
     opens and closes a film. */
  .stage .display .w,
  .stage .lede--wide .w {
    transition-duration: 880ms, 880ms;
    transition-delay: calc(180ms + var(--wi) * 110ms);
  }

  .stage.is-live .w {
    opacity: 1;
    transform: none;
  }

  /* The title sequence: the entry's words wait until the field has drawn
     itself in, dealt the gate and committed once. Then they rise. The fade
     itself is driven by the script with the chapter dissolve; this is the
     rise that goes with it. */
  :root[data-field="live"] .stage--entry .stage__body {
    transition: transform 900ms var(--ease);
  }

  :root[data-intro="playing"] .stage--entry .stage__body {
    transform: translate3d(0, 0.6rem, 0);
  }

  /* Titles rise out of an invisible floor: a mask, not a fade. Gated on the
     live field because the class that releases them comes from its script. */
  :root[data-field="live"] .stage .title {
    clip-path: inset(-0.3em -0.3em 110% -0.05em);
    transform: translate3d(0, 0.42em, 0);
    transition:
      clip-path 820ms var(--ease) 60ms,
      transform 820ms var(--ease) 60ms;
  }

  :root[data-field="live"] .stage.is-live .title {
    clip-path: inset(-0.3em -0.3em -0.3em -0.05em);
    transform: none;
  }

  /* The signal rule draws itself left to right as the chapter arrives. */
  :root[data-field="live"] .stage .tag::before {
    transform: scaleX(0);
    transition: transform 680ms var(--ease) 140ms;
  }

  :root[data-field="live"] .stage.is-live .tag::before {
    transform: scaleX(1);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tag,
    .note,
    .lede:not(.lede--wide),
    .control,
    .state {
      animation: rise linear both;
      animation-timeline: view();
    }

    .tag { animation-range: entry 6% cover 25%; }
    .lede:not(.lede--wide) { animation-range: entry 9% cover 29%; }
    .note,
    .control,
    .state { animation-range: entry 15% cover 37%; }

    @keyframes rise {
      from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
      to { opacity: 1; transform: none; }
    }
  }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 880px) {
  :root {
    --gutter: clamp(1.1rem, 5vw, 1.6rem);
    --measure: 100%;
  }

  .scrim {
    background:
      linear-gradient(0deg, rgb(9 12 10 / 90%) 0%, rgb(9 12 10 / 36%) 46%, rgb(9 12 10 / 0%) 76%),
      linear-gradient(96deg, rgb(9 12 10 / 52%) 0%, rgb(9 12 10 / 0%) 72%);
  }

  .identity__wordmark {
    width: clamp(7.5rem, 32vw, 10rem);
  }

  .rail {
    top: auto;
    right: auto;
    bottom: max(clamp(1.3rem, 3.6vh, 2.4rem), env(safe-area-inset-bottom));
    left: max(var(--gutter), env(safe-area-inset-left));
    transform: none;
  }

  .rail ol {
    grid-auto-flow: column;
    gap: 0.4rem;
    justify-items: stretch;
  }

  .rail a {
    width: 0.7rem;
  }

  .rail__entry a {
    width: 0.35rem;
  }

  .rail a:hover,
  .rail a[aria-current="true"] {
    width: 1.3rem;
  }

  /* The readout moves above the rail rather than competing with it. */
  .readout {
    bottom: calc(max(clamp(1.3rem, 3.6vh, 2.4rem), env(safe-area-inset-bottom)) + 1.7rem);
  }

  .readout dl {
    grid-auto-flow: column;
    gap: 1.4rem;
  }

  /* A phone shows the three values the reader can change; the operations
     count and the running total stay in the engineering panel. */
  .readout div:nth-child(2),
  .readout div:nth-child(3),
  .readout div:nth-child(6) {
    display: none;
  }

  .readout div {
    grid-template-columns: none;
    grid-template-rows: auto auto;
    gap: 0.2rem;
  }

  .stage {
    padding-bottom: clamp(7rem, 18vh, 9rem);
  }

  .note,
  .lede {
    max-width: 24rem;
  }
}

@media (max-height: 640px) and (min-width: 881px) {
  .stage {
    padding-top: clamp(4rem, 12vh, 6rem);
    padding-bottom: clamp(3.5rem, 10vh, 5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .cue__mark {
    opacity: 0.55;
  }
}