/* kube.quantyverse.net landing page. Fields carry ink text, except
   slate (white and sun) and sky (large type only). A word never
   crosses the edge of a field: every giant line sits on one ground. */

html, body { overflow-x: clip; }
:root {
  --wide: 1560px;
  --gutter: max(clamp(16px, 4vw, 72px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(16px, 4vw, 72px),
    env(safe-area-inset-right, 0px));
  --toc-h: 0px;
  --bleed: calc(max(0px, (100vw - var(--wide)) / 2) + var(--gutter-r));
  --bleed-l: calc(max(0px, (100vw - var(--wide)) / 2) + var(--gutter));
}
@media (min-width: 700px) {
  :root { --toc-h: 52px; }
}

main { font-size: clamp(1.125rem, 0.25vw + 0.95rem, 1.25rem); }

.field { position: relative; }
.f-slate { background: var(--slate); }
.f-sun { background: var(--sun); }
.f-tangerine { background: var(--tangerine); }
.f-leaf { background: var(--leaf); }
.f-lagoon { background: var(--lagoon); }
.f-sky { background: var(--sky); }

[data-slide] { will-change: transform; }
[data-slide="left"] {
  transform: translate3d(calc((var(--t, 1) - 1) * var(--dist, 40%)), 0, 0);
}
[data-slide="right"] {
  transform: translate3d(calc((1 - var(--t, 1)) * var(--dist, 40%)), 0, 0);
}

.big {
  font-size: clamp(1.3rem, 0.8vw + 1rem, 1.75rem);
  line-height: 1.35;
  font-weight: 500;
  max-width: 36em;
}
.quiet { color: var(--ink-soft); }
p + p { margin-top: 0.9em; }
main code {
  font-size: 0.9em;
  background: var(--tint);
  padding: 0.05em 0.3em;
  border-radius: 2px;
}

/* Section headings: each line is its own span that never wraps; the
   script sizes the heading so its widest line fits at the widest
   setting, so the width axis can move without moving a line break. */
h2.grow {
  font-weight: 900;
  font-size: clamp(2.75rem, 7.6vw, 7.5rem);
  line-height: 0.92;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" var(--w, 118);
  min-width: 0;
}
h2.grow > span { display: block; white-space: nowrap; }
h2.grow > span + span { margin-top: 0.06em; }
h2.grow .br { display: none; }
@media (max-width: 600px) {
  h2.grow .br { display: block; }
}
h3 {
  font-weight: 800;
  font-size: var(--s2);
  font-variation-settings: "wdth" 112;
  line-height: 1.05;
}

.go {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 118;
  font-size: clamp(1.15rem, 0.8vw + 0.9rem, 1.5rem);
  line-height: 1.1;
  text-decoration: none;
  border-bottom: 0.16em solid currentColor;
  padding-block: 0.2em 0.12em;
}
.go:hover { border-bottom-width: 0.3em; }
.go-ink {
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 0.45em 0.7em 0.4em;
}
.go-ink:hover { background: var(--sun); color: var(--ink); }

/* the way on at the end of every section */
.next { padding-top: clamp(48px, 9vh, 112px); }
.next a {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3em 0.6em;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: clamp(1.2rem, 0.9vw + 0.95rem, 1.75rem);
  line-height: 1.1;
  text-decoration: none;
  padding-block: 0.2em;
}
.next a span {
  background: var(--ink);
  color: var(--paper);
  font-size: 0.7em;
  padding: 0.3em 0.55em;
  font-variation-settings: "wdth" 100;
}
.next a i {
  font-style: normal;
  display: inline-grid;
  place-items: center;
  width: 1.6em;
  height: 1.6em;
  background: var(--sun);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.next a:hover { text-decoration: underline; text-decoration-thickness:
  0.12em; }
.next a:hover i { transform: translate3d(0, 0.25em, 0); }

.slot { position: absolute; inset: 0; overflow: hidden; }
.slot canvas { display: block; width: 100%; height: 100%; }
.slot svg { display: block; width: 100%; height: 100%; }

/* ---------- hero ---------- */

.hero { position: relative; }
.hero-grid {
  --gap: clamp(20px, 3vw, 64px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  column-gap: var(--gap);
  min-height: max(560px, calc(100svh - 240px));
  padding-bottom: clamp(24px, 4vh, 48px);
}
.hero-ground {
  grid-column: 2;
  grid-row: 1;
  margin-right: calc(-1 * var(--bleed));
  min-height: 420px;
  animation: in-right 1.1s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-sun {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  justify-self: start;
  width: clamp(72px, 9vw, 150px);
  aspect-ratio: 1;
  margin-left: calc(-1 * var(--gap));
  margin-bottom: calc(-1 * clamp(24px, 4vh, 48px));
  animation: in-up 0.9s 0.35s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-tan {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  width: 38%;
  height: clamp(14px, 1.6vw, 24px);
  margin-right: calc(-1 * var(--bleed));
  animation: in-left 0.9s 0.55s cubic-bezier(.2, .8, .2, 1) both;
}
.hero-copy {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(20px, 4vh, 48px);
  padding-top: clamp(8px, 4vh, 48px);
  position: relative;
}
.hero-lede {
  font-size: clamp(1.3rem, 0.9vw + 1rem, 2rem);
  line-height: 1.3;
  font-weight: 500;
  max-width: 22em;
}
.hero-lede strong { font-weight: 700; }
.hero-title {
  font-weight: 900;
  font-size: clamp(4rem, 12vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.025em;
  font-variation-settings: "wdth" var(--w, 125);
  margin-block: auto 0;
}
.hero-title span { display: block; white-space: nowrap; }
.hero-title span + span { margin-top: 0.04em; }
.hero-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}
.hero-meta { font-size: 1rem; color: var(--ink-soft); max-width: 34em; }

@keyframes in-right { from { transform: translate3d(30%, 0, 0); } }
@keyframes in-left { from { transform: translate3d(-120%, 0, 0); } }
@keyframes in-up { from { transform: translate3d(0, 120%, 0); } }

.ticker-row {
  display: flex;
  align-items: stretch;
  background: var(--ink);
  color: var(--paper);
}
.ticker-row :focus-visible { outline-color: var(--paper); }
.pause {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0 1rem 0 var(--gutter);
  background: var(--ink);
  color: var(--paper);
  border: 0;
  border-right: 4px solid var(--sun);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
}
.pause:hover { background: var(--slate); }
.pause-ico {
  width: 12px;
  height: 14px;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}
.pause[aria-pressed="true"] .pause-ico {
  border: 0;
  width: 0;
  height: 0;
  border-left: 12px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.ticker { flex: 1; min-width: 0; overflow: hidden; }
.ticker .track {
  display: flex;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  will-change: transform;
}
.ticker li { white-space: nowrap; padding: 0 2.4rem 0 1.2rem; }
.ticker li i {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.8rem;
  transform: rotate(45deg);
  background: var(--sun);
}
.ticker li:nth-child(5n+2) i { background: var(--tangerine); }
.ticker li:nth-child(5n+3) i { background: var(--leaf); }
.ticker li:nth-child(5n+4) i { background: var(--lagoon); }
.ticker li:nth-child(5n) i { background: var(--sky); }
.ticker b { color: var(--sun); font-weight: 700; }

/* ---------- section index ---------- */

.toc {
  position: relative;
  z-index: 20;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.toc ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 clamp(14px, 2vw, 36px);
  list-style: none;
  margin-block: 0;
  padding-block: 4px;
}
.toc a {
  --c: var(--sun);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-inline: 0.15rem;
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 108;
  font-size: 1.05rem;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 4px solid transparent;
  transition: border-color 0.25s;
}
.toc a::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  background: var(--c);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.toc a:hover { border-bottom-color: var(--rule); }
.toc a[aria-current] { border-bottom-color: var(--ink); }
.toc a[aria-current]::before { transform: rotate(45deg) scale(1.25); }
.toc a:focus-visible { outline-offset: -3px; box-shadow: none;
  background: var(--sun); }
.t-lagoon a { --c: var(--lagoon); }
.t-leaf a { --c: var(--leaf); }
.t-sky a { --c: var(--sky); }
.t-tan a { --c: var(--tangerine); }
.t-ink a { --c: var(--ink); }
@media (min-width: 700px) {
  .toc { position: sticky; top: 0; }
  .toc ul { flex-wrap: nowrap; height: var(--toc-h); padding-block: 0; }
}

/* ---------- undo ---------- */

.undo { padding-top: clamp(72px, 13vh, 160px); }
.undo-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 5vh, 56px);
}
.undo-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 80px);
  align-items: start;
}

.undo-pin { position: relative; margin-top: clamp(40px, 7vh, 88px); }
.js .undo-pin { height: 300vh; }
.undo-stage {
  --stage: var(--sun);
  display: flex;
  align-items: center;
  padding-block: clamp(12px, 3vh, 36px);
}
.js .undo-stage {
  position: sticky;
  top: var(--toc-h);
  height: calc(100vh - var(--toc-h));
  height: calc(100svh - var(--toc-h));
}
.undo-stage[data-stage="0"] { --stage: var(--leaf); }
.undo-stage[data-stage="1"] { --stage: var(--lagoon); }
.undo-stage[data-stage="2"] { --stage: var(--tangerine); }
.undo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas: "rev card" "tl tl";
  column-gap: clamp(24px, 4vw, 80px);
  row-gap: clamp(16px, 3.5vh, 44px);
}

.rev-field {
  grid-area: rev;
  margin-left: calc(-1 * var(--bleed-l));
  padding: clamp(16px, 3vh, 32px) clamp(16px, 2vw, 32px)
    clamp(16px, 3vh, 32px) var(--bleed-l);
  background: var(--stage);
  transition: background-color 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 0;
  overflow: hidden;
}
.rev-label {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.2rem, 1.6vw, 1.75rem);
  font-variation-settings: "wdth" 120;
  margin-bottom: clamp(12px, 3vh, 40px);
}
.rev-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: min(13vw, 24vh, 14rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" var(--rw, 120);
  font-variant-numeric: tabular-nums;
}
.rev-verb {
  font-family: var(--display);
  font-weight: 800;
  font-size: min(4.4vw, 8vh, 4.4rem);
  line-height: 1;
  font-variation-settings: "wdth" 70;
  margin-top: 0.15em;
}

.cm-wrap {
  grid-area: card;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
}
.cm-card, .cm-ghost {
  grid-area: 1 / 1;
  width: min(100%, 36rem);
}
.cm-card {
  position: relative;
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 14px 14px 0 var(--stage);
  padding: clamp(16px, 2.4vw, 32px);
  font-family: var(--mono);
  transition: clip-path 0.55s cubic-bezier(.6, 0, .4, 1),
    transform 0.55s cubic-bezier(.6, 0, .4, 1), opacity 0.4s 0.15s,
    box-shadow 0.5s;
  clip-path: inset(0 -20px -20px 0);
}
.cm-kind { font-size: 1rem; color: var(--ink-soft); }
.cm-name {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.8rem);
  line-height: 1;
  font-variation-settings: "wdth" 100;
  margin: 0.1em 0 0.4em;
}
.cm-data div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 1rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--rule);
}
.cm-data dt { color: var(--ink-soft); }
.cm-data dd { margin: 0; font-weight: 600; }
#cm-pass.flash { animation: flash 0.7s; }
@keyframes flash { 0% { background: var(--sun); } }

.cm-ghost {
  align-self: stretch;
  border: 3px dashed var(--ink-soft);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.4s;
}
.cm-ghost span {
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}
.cm-ghost b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-variation-settings: "wdth" 130;
}
.undo-stage[data-stage="2"] .cm-card {
  clip-path: inset(0 -20px 100% 0);
  transform: translate3d(0, 30px, 0) rotate(-3deg);
  opacity: 0;
}
.undo-stage[data-stage="2"] .cm-ghost { opacity: 1; }

.cm-burst {
  grid-area: 1 / 1;
  width: min(100%, 30rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 14px solid var(--sun);
  opacity: 0;
  pointer-events: none;
}
.undo-stage.restored .cm-burst { animation: burst 0.9s ease-out; }
@keyframes burst {
  0% { opacity: 1; transform: scale(0.2); }
  100% { opacity: 0; transform: scale(1.25); border-width: 1px; }
}

.timeline { grid-area: tl; }
.tl-track {
  position: relative;
  height: 10px;
  background: var(--rule);
  margin: 0 12.5% 14px;
}
.tl-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--p, 1) * 100%);
  background: var(--ink);
  transition: width 0.5s;
}
.tl-mark {
  position: absolute;
  top: 50%;
  left: calc(var(--p, 1) * 100%);
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  background: var(--stage);
  border: 4px solid var(--ink);
  transform: rotate(45deg);
  transition: left 0.5s, background-color 0.5s;
}
.tl-stops {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.tl-stops button {
  width: 100%;
  min-height: 48px;
  border: 3px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "wdth" 100;
  font-weight: 600;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  line-height: 1.1;
  cursor: pointer;
  padding: 0.45rem;
}
.tl-stops button b {
  display: block;
  font-weight: 900;
  font-size: 1.5em;
  font-variation-settings: "wdth" 130;
}
.tl-stops button:hover { background: var(--tint); }
.tl-stops button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.tl-say { margin-top: 14px; min-height: 3.2em; max-width: 52em; }

.undo-after {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
  padding-top: clamp(48px, 10vh, 120px);
}
.term-col h3 { margin-bottom: 1rem; }
.term {
  display: block;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(0.8rem, 0.4vw + 0.55rem, 1.05rem);
  line-height: 1.7;
  padding: clamp(16px, 2.4vw, 32px);
  white-space: pre;
  overflow-x: auto;
  box-shadow: 14px 14px 0 var(--sun);
}
.term .ln { display: block; min-height: 1.7em; }
.term .cmd { color: var(--paper); font-weight: 600; }
.term .cmd::before { content: "$ "; color: var(--sun); }
.term .ln:not(.cmd) { color: #D5D9E2; }
.term .ghost { color: transparent; }
.term .wait.cmd::before { color: transparent; }
.term .typing .on::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 1.1em;
  vertical-align: -0.2em;
  background: var(--sun);
}
.term:focus-visible { outline-color: var(--sun); }
.replay {
  margin-top: 30px;
  min-height: 44px;
  padding: 0.3rem 1rem;
  background: var(--paper);
  border: 3px solid var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.replay:hover { background: var(--sun); }
.undo-notes .say {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 112;
  font-size: var(--s3);
  line-height: 1.05;
  margin-bottom: 0.6em;
}

/* ---------- runtime ---------- */

.runtime { padding-top: clamp(80px, 14vh, 180px); }
.rt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
  margin-top: clamp(28px, 5vh, 56px);
}
.rt-text .big { margin-bottom: 1em; }

.node { --t: 1; position: sticky; top: calc(var(--toc-h) + 4vh); }
.node-field {
  padding: clamp(18px, 2.4vw, 40px);
  margin-right: calc(-1 * var(--bleed));
  display: grid;
  gap: 14px;
  overflow: hidden;
}
.node-name {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "wdth" 120;
  font-size: var(--s1);
}
.node-count {
  display: flex;
  align-items: flex-end;
  gap: 0.6em;
}
.nc-n {
  position: relative;
  display: inline-grid;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(5rem, 10vw, 10rem);
  line-height: 0.8;
}
.nc-n > span { grid-area: 1 / 1; text-align: center; }
.nc-a {
  opacity: calc(1 - clamp(0, (var(--t) - 0.55) * 5, 1));
  font-variation-settings: "wdth" 60;
}
.nc-b {
  opacity: clamp(0, (var(--t) - 0.6) * 5, 1);
  font-variation-settings: "wdth" 150;
}
.nc-l {
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.25;
  max-width: 12em;
  padding-bottom: 0.3em;
}
.proc {
  display: block;
  background: var(--paper);
  border: 3px solid var(--ink);
  font-family: var(--mono);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: center;
  padding: 0.55rem 0.4rem;
  overflow-wrap: anywhere;
}
.proc-top {
  position: relative;
  display: grid;
  font-size: 1.05rem;
}
.proc-top span { grid-area: 1 / 1; }
.pt-a { opacity: calc(1 - clamp(0, (var(--t) - 0.5) * 5, 1)); }
.pt-b { opacity: clamp(0, (var(--t) - 0.55) * 5, 1); }
.pods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
/* a pod clips what falls out of it, so nothing leaves the field */
.pod {
  display: grid;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 10px;
  border: 3px dashed var(--ink);
  overflow: hidden;
}
.pod .d1, .pod .d3, .pod .d5 { grid-row: 1; grid-column: 1; }
.pod .d2, .pod .d4, .pod .d6, .pod .ns { grid-row: 2; grid-column: 1; }
.pod .app { grid-row: 3; grid-column: 1; background: var(--sun); }
.drop {
  --k: clamp(0, (var(--t) - var(--d, 0.1)) * 3.2, 1);
  transform: translate3d(calc(var(--k) * var(--x, 0px)),
    calc(var(--k) * 160px), 0) rotate(calc(var(--k) * var(--r, 14deg)));
  opacity: calc(1 - var(--k) * 1.3);
}
.d1 { --d: 0.08; --r: -16deg; --x: -20px; }
.d2 { --d: 0.16; --r: 12deg; --x: 14px; }
.d3 { --d: 0.12; --r: 18deg; }
.d4 { --d: 0.2; --r: -10deg; --x: -10px; }
.d5 { --d: 0.1; --r: 22deg; --x: 24px; }
.d6 { --d: 0.24; --r: -20deg; }
.ns {
  --k: clamp(0, (var(--t) - 0.62) * 4, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  transform: scale(var(--k));
  opacity: var(--k);
}
.ns i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-weight: 700;
  background: var(--ink);
  color: var(--paper);
  padding: 0.15rem 0.3rem;
}
.node-foot {
  display: grid;
  font-weight: 700;
}
.node-foot span { grid-area: 1 / 1; }
.nf-a { opacity: calc(1 - clamp(0, (var(--t) - 0.5) * 5, 1)); }
.nf-b { opacity: clamp(0, (var(--t) - 0.6) * 5, 1); }

.rt-steps { padding-top: clamp(56px, 10vh, 120px); }
.rt-steps h3 { margin-bottom: 1.2rem; }
.startseq {
  list-style: none;
  counter-reset: s;
  margin: 0 0 1.6rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 40px);
}
.startseq li {
  counter-increment: s;
  border-top: 6px solid var(--lagoon);
  padding-top: 0.8rem;
}
.startseq li::before {
  content: counter(s);
  display: block;
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--s4);
  line-height: 1;
  color: var(--lagoon-text);
  margin-bottom: 0.3rem;
}
.rt-steps .quiet { max-width: 46em; }

/* ---------- move ---------- */

.move { padding-top: clamp(80px, 14vh, 180px); }
.move-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vh, 44px);
}
.move-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 4vw, 72px);
  margin-top: clamp(24px, 6vh, 64px);
}
.move-stick {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: var(--toc-h);
  height: calc(100vh - var(--toc-h));
  height: calc(100svh - var(--toc-h));
  display: flex;
  align-items: center;
  margin-right: calc(-1 * var(--bleed));
}
.move-ground {
  width: 100%;
  height: min(calc(90svh - var(--toc-h)), 860px);
}
.tags { position: absolute; inset: 0; pointer-events: none; }
.tags span {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 115;
  font-size: clamp(1rem, 1.2vw, 1.3rem);
  color: var(--paper);
  background: var(--ink);
  padding: 0.1rem 0.5rem;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s;
}
.gl .tags span.on { opacity: 1; }
.move-state {
  position: absolute;
  left: clamp(14px, 2vw, 28px);
  right: clamp(14px, 2vw, 28px);
  bottom: clamp(12px, 2vh, 24px);
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--paper);
}
.move-state b { color: var(--sun); font-weight: 700; }
.steps {
  grid-column: 1;
  grid-row: 1;
  list-style: none;
  counter-reset: st;
  margin: 0;
  padding: 0;
}
.steps li {
  counter-increment: st;
  min-height: 76vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  padding: 3rem 0 3rem clamp(16px, 2vw, 32px);
  border-left: 6px solid var(--rule);
  transition: border-color 0.3s;
}
.steps li:first-child { min-height: 60vh; }
.steps li.on { border-left-color: var(--sun); }
.steps h3 { font-size: var(--s3); }
.steps h3::before {
  content: counter(st);
  display: block;
  font-weight: 900;
  font-size: 1.6em;
  font-variation-settings: "wdth" 60;
  color: var(--ink-soft);
  margin-bottom: 0.15em;
  transition: color 0.3s, font-variation-settings 0.6s;
}
.steps li.on h3::before {
  color: var(--ink);
  font-variation-settings: "wdth" 150;
}
pre.cmd {
  background: var(--ink);
  color: var(--paper);
  padding: 0.9rem 1rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.9rem;
  line-height: 1.6;
  box-shadow: 8px 8px 0 var(--leaf);
}
pre.cmd code { background: none; padding: 0; color: inherit; }
.move-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem 3rem;
  align-items: end;
  padding-top: clamp(40px, 8vh, 96px);
}
.move-foot p:first-child { max-width: 48em; }

/* ---------- measured ---------- */

.measured { padding-top: clamp(80px, 14vh, 180px); }
.meas-band { padding-block: clamp(28px, 6vh, 72px); }
.meas-band h2 { font-size: clamp(3rem, 10vw, 10rem); }
.meas-band h2 .sub {
  /* large text on sky: never under 20px bold */
  font-size: max(1.25rem, 0.42em);
  margin-top: 0.3em;
  font-weight: 800;
}
.meas-intro { padding-top: clamp(28px, 5vh, 56px); }
.metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(48px, 8vh, 96px) clamp(28px, 5vw, 96px);
  padding-top: clamp(40px, 8vh, 96px);
}
.metric { --g: 1; }
.metric h3 { font-size: var(--s2); margin-bottom: 1rem; }
.metric h3 span {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  font-variation-settings: normal;
}
.m-line { margin-top: 0.8rem; }
.m-line p {
  display: flex;
  align-items: baseline;
  gap: 0 0.5rem;
  white-space: nowrap;
  line-height: 1;
}
.m-who {
  flex: none;
  width: 6.4em;
  font-weight: 700;
  font-size: 1rem;
}
.m-unit { font-weight: 700; }
.m-num {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 5vw, 5.4rem);
  letter-spacing: -0.02em;
  line-height: 0.95;
  font-variation-settings: "wdth" var(--nw, 125);
  font-variant-numeric: tabular-nums;
}
.m-e .m-num { font-size: clamp(1.9rem, 3vw, 3.2rem); }
.bar {
  display: block;
  height: clamp(16px, 2.2vw, 28px);
  margin-top: 0.4rem;
  width: calc(var(--g) * 100%);
  background: var(--slate);
  transform-origin: 0 0;
}
.m-q .bar { width: calc(var(--g) * var(--q) * 100%); }
.m-e .bar { width: calc(var(--g) * var(--e) * 100%); height: 10px; }
.win .m-q .bar { background: var(--leaf); }
.lose .m-q .bar { background: var(--tangerine); }
.m-say { margin-top: 1rem; max-width: 34em; }
.m-say strong { font-weight: 700; }
.lose h3 { color: var(--tangerine-text); }

.even {
  padding-top: clamp(56px, 10vh, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 1rem 4rem;
  align-items: end;
}
.even-big {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--s4);
  line-height: 1;
  font-variation-settings: "wdth" 110;
}
.rt-meas { padding-top: clamp(56px, 10vh, 120px); }
.rt-meas-h { font-size: var(--s3); margin-bottom: 1rem; }
.ledger { border-top: 3px solid var(--ink); margin-bottom: 1.4rem; }
.ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 0.3rem 2rem;
  align-items: baseline;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger dd { margin: 0; }
.ledger dd b {
  font-family: var(--display);
  font-weight: 900;
  font-size: var(--s3);
  font-variation-settings: "wdth" 110;
  margin-right: 0.6rem;
  color: var(--lagoon-text);
}
.ledger dd span { color: var(--ink-soft); white-space: nowrap; }
.rt-meas .quiet { max-width: 46em; margin-bottom: 1.4rem; }

/* ---------- zurich ---------- */

.zurich { padding-top: clamp(80px, 14vh, 180px); }
.zh-field { padding-block: clamp(24px, 5vh, 64px); }
.zh-date {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(4.5rem, 19vw, 19rem);
  line-height: 0.82;
  letter-spacing: -0.03em;
  font-variation-settings: "wdth" var(--w, 120);
}
.zh-date span { display: block; white-space: nowrap; }
.zh-date span + span { text-align: right; }
.zh-body { padding-top: clamp(40px, 8vh, 96px); }
.zh-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 96px);
  margin-top: clamp(28px, 5vh, 56px);
  align-items: start;
}
.zh-facts { border-top: 3px solid var(--ink); }
.zh-facts div {
  padding: 0.8rem 0 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.zh-facts dt {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-soft);
}
.zh-facts dd {
  margin: 0.15rem 0 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 108;
  font-size: var(--s2);
  line-height: 1.1;
}
#countdown {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  margin-top: 0.3rem;
}
#countdown:empty { display: none; }
.zh-text .go { margin-top: 0.4em; }

/* ---------- status ---------- */

.status { padding-top: clamp(80px, 14vh, 180px); }
.st-intro { margin-top: clamp(24px, 4vh, 40px); }
.st-intro strong { font-weight: 800; }
.st-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 5vw, 96px);
  margin-top: clamp(32px, 6vh, 64px);
}
.st-col h3 {
  font-size: var(--s4);
  padding-top: 0.4em;
  border-top: 14px solid var(--leaf);
  margin-bottom: 0.8rem;
}
.st-no h3 { border-top-color: var(--tangerine); }
.st-col ul { list-style: none; margin: 0; padding: 0; }
.st-col li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.8rem;
  border-bottom: 1px solid var(--rule);
}
.st-col li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.2rem;
  width: 0.8rem;
  height: 0.8rem;
  background: var(--leaf);
}
.st-no li::before {
  background: none;
  border: 3px solid var(--tangerine-text);
}
.st-no p { margin-top: 1.6rem; }

/* ---------- start ---------- */

.start { padding-top: clamp(80px, 14vh, 180px); }
.start-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
}
.start-grid h2 { margin-bottom: 0.5em; }
.cmd-big { margin-top: 1.4rem; font-size: 1rem; }
.doors ul { list-style: none; margin: 0; padding: 0; }
.doors li { border-top: 3px solid var(--ink); }
.doors li:last-child { border-bottom: 3px solid var(--ink); }
.doors a {
  position: relative;
  display: block;
  padding: 0.9rem 0 0.9rem 2.6rem;
  text-decoration: none;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1;
  font-variation-settings: "wdth" 105;
  transition: padding-left 0.3s cubic-bezier(.2, .8, .2, 1);
}
.doors a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 1.2rem;
  background: var(--c);
  transition: width 0.3s cubic-bezier(.2, .8, .2, 1);
}
.doors a:hover { padding-left: 3.2rem; }
.doors a:hover::before { width: 2rem; }
.doors a span {
  display: block;
  font-family: var(--body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 0.4rem;
  color: var(--ink-soft);
}
.d-sun { --c: var(--sun); }
.d-leaf { --c: var(--leaf); }
.d-lagoon { --c: var(--lagoon); }
.d-tan { --c: var(--tangerine); }
.d-sky { --c: var(--sky); }

/* ---------- the rest of the stack ---------- */

.verse { padding-top: clamp(80px, 14vh, 180px); }
.verse-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(20px, 4vh, 40px);
}
.stack {
  margin-top: clamp(32px, 6vh, 72px);
  margin-bottom: -6rem;
}
.stack ul { list-style: none; margin: 0; padding: 0; }
.stack li > .wrap > a, .stack li > .wrap > p {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 0.4rem clamp(16px, 3vw, 56px);
  padding-block: clamp(18px, 3.4vh, 36px);
  text-decoration: none;
}
.stack b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2rem, 4.6vw, 4.6rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variation-settings: "wdth" 112;
  white-space: nowrap;
}
.stack span { font-weight: 600; max-width: 30em; }
.stack i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.75rem, 3vw, 3rem);
  transition: transform 0.3s cubic-bezier(.2, .8, .2, 1);
}
.stack a:hover i { transform: translate3d(0.3em, 0, 0); }
.stack a:hover span { text-decoration: underline; }
.stack a:focus-visible { outline-offset: -6px; box-shadow: none; }
.stack [data-slide] { --dist: 16%; }
.s-kube { background: var(--slate); color: var(--paper); }
.s-db { background: var(--leaf); }
.s-core { background: var(--coral); }
.s-verse { background: var(--sun); }
.s-kube span { color: var(--paper); }

/* ---------- narrow ---------- */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  .hero-ground {
    grid-column: 1;
    grid-row: 1;
    margin-left: calc(-1 * var(--bleed-l));
    min-height: 0;
    height: min(46svh, 110vw);
  }
  .hero-sun { grid-column: 1; margin-left: 0; margin-bottom: -20px;
    width: 64px; }
  .hero-tan { grid-column: 1; }
  .hero-copy { grid-column: 1; grid-row: 2; padding-top: 28px; }
  .hero-title { margin-block: 0; }

  .undo-intro, .undo-after, .rt-grid, .even, .zh-grid, .st-grid,
  .start-grid, .move-foot { grid-template-columns: minmax(0, 1fr); }

  .undo-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rev" "card" "tl";
    row-gap: 14px;
  }
  .rev-field {
    margin-right: calc(-1 * var(--gutter-r));
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: 0 0.6rem;
  }
  .rev-label { margin-bottom: 0; width: 100%; }
  .rev-num { font-size: clamp(3.4rem, 18vw, 6rem); }
  .rev-verb { font-size: clamp(1.6rem, 8vw, 2.6rem); }
  .cm-card { box-shadow: 8px 8px 0 var(--stage); }
  .cm-name { font-size: 1.8rem; }
  .tl-track { margin-bottom: 10px; }
  .tl-say { min-height: 4.8em; font-size: 1rem; }

  .node { position: relative; top: 0; }
  .node-field { margin-left: calc(-1 * var(--gutter)); }
  .startseq { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .move-grid { grid-template-columns: minmax(0, 1fr); }
  .move-stick {
    grid-column: 1;
    z-index: 3;
    height: 38svh;
    border-bottom: 3px solid var(--ink);
    margin-left: calc(-1 * var(--gutter));
    background: var(--paper);
    align-items: stretch;
  }
  .move-ground { height: 100%; }
  .move-state { display: none; }
  .steps { grid-row: 2; }
  .steps li { min-height: 56svh; padding-block: 2rem; }
  .steps li:first-child { min-height: 40svh; }
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .ledger div { grid-template-columns: minmax(0, 1fr); }
  .ledger dd span { white-space: normal; }
  .zh-date span + span { text-align: left; }
  .even-big { font-size: var(--s3); }
  .stack li > .wrap > a, .stack li > .wrap > p {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .stack span { grid-column: 1; grid-row: 2; }
  .stack i { grid-column: 2; grid-row: 1 / 3; }
}

@media (max-width: 860px) and (max-height: 760px) {
  .rev-num { font-size: 3.2rem; }
  .cm-card { padding: 12px 16px; }
  .cm-name { font-size: 1.5rem; margin-bottom: 0.2em; }
  .cm-data div { padding: 0.25rem 0; }
  .tl-stops button { min-height: 44px; font-size: 0.95rem; }
}

@media (max-width: 520px) {
  .startseq { grid-template-columns: minmax(0, 1fr); }
  .tl-stops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tl-track { margin-inline: 0; }
  .pods { gap: 6px; }
  .pod { padding: 6px; }
  .proc { font-size: 0.8rem; padding-inline: 0.2rem; }
  .ns i { font-size: 0.7rem; padding: 0.1rem 0.15rem; }
  .m-line p { flex-wrap: wrap; }
  .m-who { width: 100%; margin-bottom: 0.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .js .undo-pin { height: auto; }
  .js .undo-stage { position: relative; top: 0; height: auto; }
  .hero-ground, .hero-sun, .hero-tan { animation: none; }
  [data-slide] { transform: none; }
}