/* quantyverse.net: the spiral on the poster's paper.

   Layers, back to front: color fields (.fld, z 0), the WebGL canvas
   (#gl, fixed, z 1), text (z 2). Fields never carry small text in
   sky; every field under small text is ink-safe (base.css). A giant
   word always sits on one ground: the band that carries it is revealed
   together with it. */

:root {
  --vh: 100vh;
  --mh: 5rem;
  --vb: 36px;
  --ix: 3.1rem;
  --cw: 100vw;
  --edge: max(var(--gutter),
    calc((var(--cw) - var(--wide)) / 2 + var(--gutter)));
}
@supports (height: 100svh) { :root { --vh: 100svh; } }

html {
  overflow-x: clip;
  scroll-padding-top: calc(var(--ix) + 1rem);
}
body { overflow-x: clip; }

#gl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  pointer-events: none;
}
.still { display: none; }
.is-still #gl { display: none; }
.is-still .still { display: block; }

.masthead { z-index: 10; }
.colophon { position: relative; z-index: 3; }
.to-top[hidden] { display: none; }

main {
  display: block;
  font-size: clamp(1.125rem, 0.25vw + 0.97rem, 1.25rem);
}
main > section { position: relative; }

.fld { position: absolute; z-index: 0; }
.f-ink { background: var(--ink); }
.f-slate { background: var(--slate); }
.f-sun { background: var(--sun); }
.f-tan { background: var(--tangerine); }
.f-leaf { background: var(--leaf); }
.f-lagoon { background: var(--lagoon); }
.f-sky { background: var(--sky); }
.f-coral { background: var(--coral); }
.f-mint { background: var(--mint); }
.f-bone { background: var(--bone); }

.stage { position: absolute; pointer-events: none; }
.stage .still {
  position: absolute;
  inset: 0;
  margin: auto;
  width: min(78%, 78vh);
  height: auto;
  max-height: 86%;
  aspect-ratio: 1;
}
.stage .still-stack {
  display: none;
  width: auto;
  max-height: none;
  aspect-ratio: auto;
  inset: 6% 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2%;
}
.is-still .stage .still-stack { display: flex; }
.still-stack img { height: 30%; width: auto; }

/* ---------- display type ---------- */
.disp {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: var(--w, 150%);
  line-height: 0.9;
  letter-spacing: -0.015em;
}

h3 {
  font-size: var(--s2);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.05;
  margin: 2.6rem 0 0.9rem;
}

.tag {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 100%;
  font-size: clamp(var(--s1), 1.1vw + 0.9rem, 2rem);
  line-height: 1.18;
  margin: 1.4rem 0 1.4rem;
  max-width: 30em;
}

.copy p + p { margin-top: 1em; }
.copy p, .z-text p { max-width: 42em; }

/* ---------- pinned layers ---------- */
.pin-bg, .pin-fg {
  position: sticky;
  top: 0;
  height: calc(var(--vh) - var(--vb));
}
.pin-bg { overflow: clip; }
.pin-fg {
  margin-top: calc(var(--vb) - var(--vh));
  z-index: 2;
}

/* ---------- hero ---------- */
.hero {
  height: calc(var(--vh) * 1.9);
  margin-top: calc(-1 * var(--mh));
}
.h-ink { left: 56%; right: 0; top: var(--mh); bottom: 7.5rem; }
.h-sky { right: 0; width: 18%; bottom: 4.25rem; height: 22%; }
.h-leaf { right: 0; width: 1.6vw; top: var(--mh); height: 36%; }
.h-sun { left: 0; width: 60%; bottom: 4.25rem; height: 15%; }
.h-tan {
  left: calc(56% - 7vw);
  width: 7vw;
  aspect-ratio: 1;
  top: calc(var(--mh) + 9vh);
}
.h-stage { left: 56%; right: 1.6vw; top: var(--mh); bottom: 7.5rem; }

.hero-grid {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--mh) var(--gutter-r) 6rem var(--edge);
  max-width: calc(56% + 4vw);
}
.hero-title {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: var(--w, 150%);
  font-size: clamp(2.6rem, 6.2vw, 7.5rem);
  line-height: 0.88;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1rem, 3vh, 2rem);
  text-wrap: nowrap;
}
.hero-title span { display: block; white-space: nowrap; }
.lede {
  max-width: 36rem;
  font-size: clamp(1.15rem, 0.55vw + 0.9rem, 1.5rem);
  line-height: 1.45;
  background: var(--paper);
  padding: 0.4rem 0.8rem 0.5rem 0;
}
.lede strong { font-weight: 700; }
.hero-act {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  margin-top: clamp(1rem, 3vh, 1.8rem);
}
.btn, .motion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 1rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: clamp(1.02rem, 0.3vw + 0.9rem, 1.2rem);
  line-height: 1.1;
  text-decoration: none;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
}
.btn:hover { background: var(--coral); color: var(--ink);
  border-color: var(--coral); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: var(--sun); border-color: var(--sun); }
.motion {
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  font-stretch: 100%;
}
.motion::before {
  content: "";
  width: 0.7em;
  height: 0.8em;
  margin-right: 0.55em;
  border-left: 0.22em solid currentColor;
  border-right: 0.22em solid currentColor;
}
.motion[aria-pressed="true"]::before {
  width: 0;
  height: 0;
  border-right: 0;
  border-left: 0.7em solid currentColor;
  border-top: 0.42em solid transparent;
  border-bottom: 0.42em solid transparent;
}
.motion:hover { background: var(--tint); }

/* tickers, moved by scrolling only */
.ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4.25rem;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: clamp(1rem, 0.3vw + 0.85rem, 1.15rem);
}
.ticker .track { display: inline-block; will-change: transform; }
.ticker span { display: inline-block; padding-right: 2.6rem; }
.ticker b { font-weight: 600; color: var(--sun); }
.ticker i {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.85rem;
  vertical-align: 0.05em;
  background: var(--sun);
  transform: rotate(45deg);
}
.ticker span:nth-child(5n+2) i { background: var(--tangerine); }
.ticker span:nth-child(5n+3) i { background: var(--leaf); }
.ticker span:nth-child(5n+4) i { background: var(--lagoon); }
.ticker span:nth-child(5n) i { background: var(--sky); }
.t2 {
  position: relative;
  z-index: 2;
  background: var(--sun);
  color: var(--ink);
  height: auto;
  padding-block: 1.1rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 120%;
  font-size: clamp(1.3rem, 2.4vw, 2.2rem);
  margin-top: 2rem;
}
.t2 b { color: var(--ink); font-weight: 900; }
.t2 span:nth-child(n) i { background: var(--ink); }

/* ---------- the index of this page ---------- */
.index {
  position: sticky;
  top: 0;
  z-index: 9;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
.index ul {
  display: flex;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0.2rem var(--gutter-r) 0.2rem var(--edge);
  overflow-x: auto;
  scrollbar-width: none;
}
.index a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0 0.75rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 115%;
  font-size: 1.05rem;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
}
.index a::before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background: var(--c, var(--ink));
}
.index a:hover { background: var(--tint); }
.index a[aria-current] { background: var(--ink); color: var(--paper); }
.ix-core { --c: var(--coral); }
.ix-db { --c: var(--sun); }
.ix-kube { --c: var(--sky); }
.ix-zurich { --c: var(--tangerine); }
.ix-status { --c: var(--leaf); }
.ix-source { --c: var(--lagoon); }

/* ---------- split scenes: copy left, pinned panel right ---------- */
.split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: start;
}
.panel {
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: var(--ix);
  height: calc(var(--vh) - var(--ix));
  overflow: clip;
}
.panel .stage { inset: 0; }
.copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  padding: 14vh clamp(2rem, 4vw, 5rem) 14vh var(--edge);
  width: 100%;
}
.copy h2 {
  font-size: clamp(2.8rem, 5.2vw, 6rem);
  margin-bottom: 0.2rem;
}

.duo {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}
.duo .honest { margin-top: 2.6rem; }

.next { margin-top: 2.8rem; }
.copy .next { max-width: none; }
.next a {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 48px;
  padding: 0.55rem 1.1rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.05rem, 0.4vw + 0.9rem, 1.3rem);
  line-height: 1.15;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
}
.next a:hover { background: var(--sun); }
.next a span { font-size: 1.2em; }

.readout {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(1.3rem, 2.2vw, 2.1rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--paper);
}
.readout b { font-weight: 900; font-stretch: 140%;
  font-size: 1.9em; letter-spacing: -0.02em; }
.readout span { display: block; font-size: 0.6em; margin-top: 0.35em;
  font-stretch: 100%; }

/* layers */
.l-disc {
  left: 50%;
  top: 50%;
  width: min(56%, 56vh);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
}
.l-sky { right: 0; bottom: 0; width: 30%; height: 30%; }
.l-coral { left: 0; top: 0; width: 34%; height: 9%; }
.layer-list { list-style: none; margin: 2.2rem 0 0; padding: 0;
  max-width: 44rem; }
.layer-list li + li { margin-top: 0.5rem; }
.layer-list a {
  display: grid;
  grid-template-columns: 7.4rem minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  text-decoration: none;
  color: var(--ink);
}
.layer-list b {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-size: var(--s2);
  line-height: 1;
}
.layer-list a:hover span { text-decoration: underline; }
.ll-kube a { background: var(--sun); margin-right: 2rem; }
.ll-db a { background: var(--tangerine); margin-inline: 1rem; }
.ll-core a { background: var(--coral); margin-left: 2rem; }

/* product heads: the name fills a band of its own color */
.head {
  position: relative;
  padding-top: 14vh;
}
.fld.band { position: relative; z-index: 2; }
.prod-name {
  padding: 0.1em var(--edge) 0.08em;
  font-size: 15vw;
  white-space: nowrap;
  line-height: 1;
}
.hd-b { left: 0; width: 34%; top: calc(14vh - 2.4rem); height: 2.4rem; }
.p-db .hd-b { left: auto; right: 0; width: 26%; }
.p-kube .hd-b { left: 30%; width: 22%; }

.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.facts li {
  padding: 0.2rem 0.7rem;
  border: 2px solid var(--ink);
  font-weight: 700;
  font-size: 0.95rem;
}
.facts li:first-child { background: var(--ink); color: var(--paper); }
.prod .copy { padding-top: 7vh; }

.parts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: 1.05em;
}
.parts li {
  padding: 0.15rem 0.6rem;
  background: var(--bone);
  border-left: 0.3rem solid var(--coral);
}
.checks { margin: 0; padding-left: 1.2rem; }
.checks li::marker { color: var(--coral-text); }

.honest {
  margin: 2.4rem 0 1.4rem;
  padding: 1.1rem 1.2rem 1.2rem;
  background: var(--bone);
  border-left: 0.6rem solid var(--coral);
  max-width: 42em;
}
.p-db .honest { background: var(--tint); border-color: var(--sun); }
.p-kube .honest { background: var(--tint); border-color: var(--sky); }
.later { font-weight: 600; margin-top: 2rem; }
.go {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.2rem;
}
.more {
  display: inline-block;
  margin-top: 0.4rem;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 125%;
  font-size: var(--s2);
  line-height: 1.05;
  text-decoration: none;
  border-bottom: 0.16em solid currentColor;
  overflow-wrap: anywhere;
}
.more::after { content: " \2192"; }
.more:hover { border-bottom-width: 0.3em; }
.more.big { font-size: clamp(1.3rem, 2.3vw, 2.6rem); font-stretch: 112%;
  overflow-wrap: anywhere; }

/* core panel */
.c-ink { inset: 0; }
.c-mint { left: 0; top: 0; width: 1.4rem; height: 62%; }
.c-bone { right: 0; bottom: 0; width: 26%; height: 18%; }
.p-core .readout { left: 2.6rem; }

/* db */
.d-lagoon { left: 0; right: 0; bottom: 0; height: 46%; }
.d-tan { right: 0; top: 0; width: 34%; height: 7%; }
.d-slate { left: 0; top: 0; width: 1.4rem; height: 54%; }
.p-db .readout { color: var(--ink); }
.big-code {
  font-family: var(--mono);
  font-size: clamp(1.25rem, 2.2vw, 2.2rem);
  line-height: 1.25;
  margin: 1.2rem 0 1.6rem;
  padding: 0.7rem 1rem;
  background: var(--ink);
  color: var(--sun);
}
.copy .big-code { max-width: none; }
.big-code code { font-size: 1em; }
.feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  column-gap: 2rem;
}
.feat li {
  position: relative;
  padding: 0.8rem 0 0.8rem 1.7rem;
  border-bottom: 2px solid var(--ink);
}
.feat li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 0.75rem;
  height: 0.75rem;
  background: var(--tangerine);
}
.feat li:nth-child(2n)::before { background: var(--leaf); }
.feat li:nth-child(3n)::before { background: var(--sky); }
.ledger { margin: 0; max-width: 44rem; }
.ledger div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.2rem 1.4rem;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--rule);
}
.ledger dd {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  text-align: right;
}

/* kube */
.k-sun { inset: 0; }
.k-leaf { left: 0; top: 0; width: 46%; height: 1.4rem; }
.k-ink { left: 0; bottom: 0; width: 38%; height: 0.9rem; }
.p-kube .readout { left: 0; bottom: 0; padding: 1rem 1.25rem 1.1rem;
  background: var(--ink); }
.term {
  margin: 1.6rem 0 1.6rem;
  padding: 1rem 1.1rem;
  background: var(--ink);
  color: #C9CFDB;
  font-family: var(--mono);
  font-size: clamp(0.8rem, 0.95vw, 1.02rem);
  line-height: 1.75;
  overflow-x: auto;
}
.term .ln { display: block; white-space: pre; min-height: 1.75em; }
.term .cmd { color: var(--paper); font-weight: 600; }
.term .cmd::before { content: "$ "; color: var(--sun); }
.term .del { color: #FF8F8F; }
.term .ok { color: var(--mint); }
.term .ghost { visibility: hidden; }
.term .on.typing::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  vertical-align: -0.18em;
  background: var(--sun);
}
.term:focus-visible { outline-offset: 3px; }

.bench { max-width: 44rem; }
.bench .legend {
  display: flex;
  gap: 1.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.bench .legend i {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  margin-right: 0.45rem;
  vertical-align: -0.1em;
}
.legend .q, .b-bar.q i { background: var(--sky); }
.legend .e, .b-bar.e i { background: var(--slate); }
.b-row { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.b-row p { margin: 0 0 0.35rem; font-weight: 700; }
.b-row small { font-weight: 400; color: var(--ink-soft);
  font-size: 0.9rem; margin-left: 0.4rem; }
.b-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  height: 1.6rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.b-bar i {
  display: block;
  height: 0.95rem;
  flex: none;
  width: calc(var(--v) * var(--grow, 1) * 62%);
}
.b-bar { white-space: nowrap; }
.note { font-size: 1rem; color: var(--ink-soft); margin-top: 1rem; }

/* stack */
.s-ink { inset: 0 0 0 0; }
.s-sun { left: 0; bottom: 0; width: 1.4rem; height: 100%; }
.path { margin: 2rem 0 0; padding: 0; list-style: none;
  counter-reset: p; max-width: 44rem; }
.path li {
  position: relative;
  padding: 0.9rem 0 0.9rem 3.2rem;
  border-top: 2px solid var(--ink);
}
.path li::before {
  counter-increment: p;
  content: counter(p);
  position: absolute;
  left: 0;
  top: 0.75rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 900;
  background: var(--sun);
}
.path li:nth-child(2)::before { background: var(--tangerine); }
.path li:nth-child(3)::before { background: var(--leaf); }
.stackup .copy { padding-bottom: 24vh; }

/* zurich poster: the date on its own band of sun */
.zurich {
  padding: 12vh 0 6vh;
}
.z-coral { left: 0; top: calc(12vh - 2.6rem); width: 42%;
  height: 2.6rem; }
.z-band {
  position: relative;
  z-index: 2;
  padding: 0.35em var(--edge) 0.3em;
}
.z-date, .z-city {
  margin: 0;
  font-size: 17vw;
  line-height: 0.92;
  white-space: nowrap;
}
.z-in {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 6rem);
  align-items: start;
  /* the right edge stays clear of the fixed Back to top link */
  padding-inline: var(--edge) max(var(--edge), 12rem);
}
.z-head {
  position: relative;
  padding: 7vh 0 3.4rem;
}
.z-head h2 { font-size: clamp(2.6rem, 4.8vw, 5.6rem); }
.z-leaf { left: 0; bottom: 0; width: 62%; height: 1.4rem; }
.z-text { padding-top: 7vh; }
.z-text .tag { margin-top: 0; }

/* status */
.status { padding: 14vh 0 8vh; }
.status .inner { padding-inline: var(--edge) var(--gutter-r); }
.status h2 { font-size: clamp(2.6rem, 7vw, 8rem); }
.notyet { list-style: none; margin: 2.6rem 0 0; padding: 0;
  max-width: min(72rem, 100% - 10rem); }
.notyet li {
  display: grid;
  grid-template-columns: 15rem 15rem minmax(0, 1fr);
  gap: 1.5rem;
  align-items: center;
  border-top: 4px solid var(--ink);
  padding: 1rem 0;
}
.notyet b {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 150%;
  font-size: clamp(2rem, 2.6vw, 3rem);
  line-height: 1;
  padding: 0.35rem 0.7rem 0.45rem;
  justify-self: start;
}
.notyet em {
  font-family: var(--display);
  font-style: normal;
  font-weight: 800;
  font-stretch: 120%;
  font-size: var(--s2);
  line-height: 1.05;
}
.ny-core b { background: var(--coral); }
.ny-db b { background: var(--sun); }
.ny-kube b { background: var(--sky); }
.notyet span { line-height: 1.45; max-width: 40em; }

/* source and the way out */
.source .copy { padding-bottom: 12vh; }
.e-ink { inset: 0; }
.e-tan { left: 0; top: 0; width: 40%; height: 1.4rem; }
.e-lagoon { right: 0; bottom: 0; width: 1.4rem; height: 45%; }
.dest-h { margin-top: 3.4rem; }
.dest { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.dest > li {
  display: grid;
  grid-template-columns: 16rem minmax(0, 1fr);
  gap: 0.4rem 1.4rem;
  align-items: start;
  border-top: 3px solid var(--ink);
  padding: 0.9rem 0;
}
.d-name {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 115%;
  font-size: clamp(1.35rem, 1.2vw + 0.6rem, 1.6rem);
  line-height: 1;
  padding: 0.5rem 0.7rem 0.55rem;
}
.d-kube .d-name { background: var(--sky); }
.d-db .d-name { background: var(--sun); }
.d-core .d-name { background: var(--coral); }
.dest ul { list-style: none; margin: 0; padding: 0; }
.dest ul li + li { margin-top: 0.3rem; }
.dest ul a { font-weight: 700; display: inline-block;
  padding-block: 0.1rem; }
.write { margin-top: 2rem; }

/* ---------- narrow and portrait ---------- */
@media (max-width: 900px), (max-aspect-ratio: 4/5) {
  .hero { height: auto; }
  .hero .pin-bg { position: absolute; inset: 0; height: auto; }
  .hero .pin-fg { position: relative; height: auto; margin-top: 0; }
  .h-ink, .h-stage { left: 18%; right: 0; top: auto; bottom: 4.25rem;
    height: max(13rem, calc(var(--vh) * 0.34)); }
  .h-sky { left: 0; right: auto; width: 18%; height: 12%;
    bottom: 4.25rem; }
  .h-sun { left: 0; width: 42%; height: 1.6rem;
    bottom: calc(4.25rem + max(13rem, var(--vh) * 0.34)); }
  .h-leaf { right: 0; width: 22%; height: 0.8rem; top: auto;
    bottom: calc(4.25rem + max(13rem, var(--vh) * 0.34)); }
  .h-tan { display: none; }
  .hero-grid {
    justify-content: flex-start;
    max-width: none;
    padding-top: calc(var(--mh) + 1.5vh);
    padding-bottom: calc(max(13rem, var(--vh) * 0.34) + 6.5rem);
  }
  .hero-title { font-size: 13vw; }
  .lede { font-size: 1.06rem; line-height: 1.45; padding: 0; }
  .hero-act { margin-top: 0.8rem; gap: 0.5rem; }
  .btn, .motion { font-size: 0.92rem; padding: 0.3rem 0.7rem; }
  .ticker { height: 4.25rem; font-size: 0.9rem; }

  .index ul { padding-inline: calc(var(--gutter) - 0.4rem) var(--gutter-r);
    gap: 0; justify-content: space-between; }
  .index a { font-family: var(--body); font-weight: 700;
    font-size: 0.95rem; padding: 0 0.4rem; gap: 0.3em; }
  .index a::before { width: 0.5em; height: 0.5em; }
  .notyet { max-width: none; }

  .split { display: block; }
  .panel { position: relative; top: auto;
    height: 72vh; height: calc(var(--vh) * 0.72); }
  .copy { padding: 3rem var(--gutter-r) 4rem var(--gutter); }
  .prod .copy { padding-top: 2.4rem; }
  .stackup .copy, .source .copy { padding-bottom: 4rem; }
  .head { padding-top: 10vh; }
  .hd-b { top: calc(10vh - 1.6rem); height: 1.6rem; }
  .prod-name { padding-inline: var(--gutter) var(--gutter-r); }
  .copy h2 { font-size: clamp(2.2rem, 11vw, 4rem); }
  .tag { font-size: var(--s1); }
  .layer-list a { grid-template-columns: minmax(0, 1fr);
    gap: 0.3rem; padding: 0.75rem; }
  .more { font-size: var(--s1); }
  .more.big { font-size: 1.3rem; }
  .ll-kube a, .ll-db a, .ll-core a { margin: 0; }
  .zurich { padding-top: 9vh; }
  .z-coral { top: calc(9vh - 1.6rem); height: 1.6rem; width: 55%; }
  .z-band { padding-inline: var(--gutter) var(--gutter-r); }
  .z-in { display: block; padding-inline: var(--gutter) var(--gutter-r); }
  .z-head { padding: 2.4rem 0 2.6rem; }
  .z-head h2 { font-size: clamp(2.2rem, 11vw, 4rem); }
  .z-text { padding-top: 2rem; }
  .status { padding-top: 9vh; }
  .status .inner { padding-inline: var(--gutter) var(--gutter-r); }
  .notyet li { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .notyet b { justify-self: start; }
  .readout { font-size: 1.15rem; }
  .ledger div { grid-template-columns: minmax(0, 1fr); }
  .ledger dd { text-align: left; }
  .dest > li { grid-template-columns: minmax(0, 1fr); }
  .d-name { justify-self: start; }
}
@media (max-width: 440px) {
  .index a { font-size: 0.88rem; padding: 0 0.3rem; }
  .index a::before { display: none; }
}
@media (max-width: 420px) {
  .hero-title { font-size: 14vw; }
  .lede { font-size: 1rem; }
}
@media (max-height: 560px) and (min-width: 901px) {
  .lede { font-size: 1.05rem; }
}
[data-grow] > span { display: block; white-space: nowrap; }
[data-grow] { white-space: nowrap; }
.motion[hidden] { display: none; }
/* measured in script: a reduced-motion transition would hide the size */
.hero-title, .hero-title *, [data-grow], [data-grow] * {
  transition-property: none;
}