:root {
  /* Arctic light: cool whites, never cream. Basalt for ink. */
  --snow: #f7f8fa;
  --drift: #eef1f5;
  --ice: #dce2e9;
  --basalt: #14171b;
  --steam: #697583;
  --moss: #2e7d6f; /* the display green, desaturated */
  --feed: #0b0d10;

  --display: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --body: "Inter", -apple-system, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* Spacing is three tokens and nothing else. --gut is the only horizontal
     inset on the page, --bay the only vertical rhythm between sections, and
     --step the one gap used inside a section (eyebrow → heading → lede).
     They scale on vw, not vh: vh made the rhythm depend on how tall a phone
     happened to be, which is why the sections used to disagree with each
     other on a small screen. */
  --gut: clamp(24px, 5vw, 80px);
  --bay: clamp(84px, 9.5vw, 150px);
  --step: clamp(18px, 2vw, 26px);
  --stop: clamp(24px, 25vw, 1000px);
  --rule: 1px solid var(--ice);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  background: var(--snow);
  color: var(--basalt);

  font-family: var(--body);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* `overflow-x: hidden` makes this element a scroll container, and a scroll
     container is what `position: sticky` sticks to — so the pinned screen in
     the technology section stuck to the body, which does not scroll, and
     simply scrolled away like any other block. `clip` clamps the same
     overflow WITHOUT creating a scroll container, which is the whole reason
     it exists. The `hidden` above it is the fallback for a browser that has
     not heard of `clip`; there the pin does not engage and the section reads
     as an ordinary stack, which is the same place the reduced-motion and
     no-WebGL paths land. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Whiteout grain — Icelandic light is never flat white */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--gut);
}
/* padding-BLOCK, not the shorthand: `padding: <y> 0` here silently reset the
   inline padding .wrap had just set, which is why no section on the page had
   a gutter and why the spacing looked different from one to the next. The
   vertical rhythm belongs to .section; the horizontal inset belongs to .wrap,
   and neither is allowed to overwrite the other. */
.section {
  padding-block: var(--bay);
}
.section + .section {
  border-top: var(--rule);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--steam);
}

h2 {
  font-family: var(--display);
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 300;
  line-height: 1.03;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

a {
  color: inherit;
}
:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─────────── nav ─────────── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gut);
  background: rgba(247, 248, 250, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}
.mark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-decoration: none;
}
.navlink {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--basalt);
  border: 1px solid var(--basalt);
  border-radius: 100px;
  padding: 8px 17px;
  transition:
    background 0.22s,
    color 0.22s;
}
.navlink:hover {
  background: var(--basalt);
  color: var(--snow);
}

/* ─────────── hero ─────────── */
.hero {
  /* the extra top inset is the fixed bar, not rhythm */
  padding-block: calc(var(--bay) + 46px) var(--bay);
}
.hero .eyebrow {
  margin-bottom: clamp(26px, 3.4vw, 44px);
}

h1 {
  font-family: var(--display);
  font-size: clamp(46px, 10.5vw, 158px);
  font-weight: 200;
  line-height: 0.92;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
h1 .ln {
  display: block;
  overflow: hidden;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
h1 .ln > span {
  display: block;
  animation: fall 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
h1 .ln:nth-child(2) > span {
  animation-delay: 0.1s;
}
h1 .ln:nth-child(3) > span {
  animation-delay: 0.2s;
}
@keyframes fall {
  from {
    transform: translateY(105%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.lede + .lede {
  animation-delay: 0.56s;
}
.lede {
  margin-top: clamp(28px, 3.6vw, 46px);
  max-width: 46ch;
  font-size: clamp(16px, 1.35vw, 21px);
  color: var(--steam);
  line-height: 1.55;
  animation: rise 1s 0.42s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rise {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ─────────── the demo frame ─────────── */
.demo {
  margin-top: clamp(36px, 5vw, 72px);
  animation: rise 1s 0.58s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ─── the three spacing utilities the markup is allowed to use ───
   Everything that used to be a number typed into a style attribute is one of
   these, so a change to the rhythm is a change in one place. */
.head {
  margin-bottom: clamp(30px, 4vw, 54px);
}
.stepTop {
  margin-top: var(--step);
}
.sub {
  margin-top: var(--step);
  max-width: 42ch;
  color: var(--steam);
}
.feed {
  position: relative;
  aspect-ratio: 16/9;
  width: 100%;
  background: var(--feed);
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* stand-in for the screen recording: a figure in low light */
.feed::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      46% 62% at 50% 34%,
      rgba(158, 172, 190, 0.3),
      transparent 68%
    ),
    radial-gradient(
      30% 40% at 50% 30%,
      rgba(196, 208, 222, 0.24),
      transparent 70%
    ),
    radial-gradient(
      90% 70% at 50% 118%,
      rgba(46, 125, 111, 0.13),
      transparent 70%
    );
}
.feed::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 52%,
    rgba(11, 13, 16, 0.72) 100%
  );
}

.hud {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(247, 248, 250, 0.42);
}
.live {
  display: flex;
  align-items: center;
  gap: 7px;
}
.live i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss);
  animation: blink 2.1s ease-in-out infinite;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.22;
  }
}

.cap {
  position: relative;
  z-index: 2;
  margin-bottom: clamp(22px, 5%, 50px);
  padding: 0 8%;
  text-align: center;
  font-size: clamp(17px, 2.5vw, 37px);
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.014em;
  color: #fff;
  text-wrap: balance;
  min-height: 1.26em;
}
.cap span {
  opacity: 0;
  animation: word 0.34s ease forwards;
}
@keyframes word {
  to {
    opacity: 1;
  }
}
.cap.out {
  opacity: 0;
  transition: opacity 0.42s ease;
}

/* ─────────── the object ─────────── */
.rig {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
}
@media (max-width: 700px) {
  .rig {
    aspect-ratio: 4/5;
  }
}

three-d-stage:not(:defined) {
  visibility: hidden;
}
#stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  /* the whole frame is draggable now, so say so */
  cursor: grab;
}
#stage:active {
  cursor: grabbing;
}
.rig .hud {
  z-index: 3;
  color: var(--steam);
  /* the frame under it is draggable, and a status strip is not a control */
  pointer-events: none;
}

/* ─────────── manifesto ─────────── */
.manifesto {
  max-width: 31ch;
  margin-left: auto;
}
.manifesto p {
  font-family: var(--display);
  font-size: clamp(23px, 3.1vw, 44px);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.024em;
}
.manifesto p + p {
  margin-top: 0.72em;
}
.manifesto .quiet {
  color: var(--steam);
}
.sig {
  margin-top: clamp(34px, 4.4vw, 58px);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steam);
}

/* ─────────── refusals ─────────── */
.no {
  border-top: var(--rule);
}
.no li {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  padding: clamp(22px, 2.9vw, 34px) 0;
  border-bottom: var(--rule);
}
.no h3 {
  font-family: var(--display);
  font-size: clamp(28px, 5vw, 66px);
  font-weight: 200;
  letter-spacing: -0.035em;
  line-height: 1;
}
.no p {
  color: var(--steam);
  max-width: 52ch;
  font-size: clamp(14px, 1.05vw, 16px);
}
@media (min-width: 820px) {
  .no li {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(24px, 4vw, 72px);
    align-items: baseline;
  }
}

/* ─────────── two-up grids ─────────── */
.split {
  display: grid;
  gap: clamp(26px, 4vw, 70px);
}
@media (min-width: 900px) {
  .split {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    align-items: start;
  }
}

.modes {
  display: grid;
  gap: 1px;
  background: var(--ice);
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
@media (min-width: 760px) {
  .modes {
    grid-template-columns: 1fr 1fr;
  }
}
.mode {
  background: var(--snow);
  padding: clamp(24px, 3.4vw, 40px);
}
.mode h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
  margin: 12px 0 10px;
}
.mode p {
  color: var(--steam);
  font-size: 15px;
}
.mode dl {
  margin-top: 20px;
  padding-top: 18px;
  border-top: var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--steam);
}
.mode dt {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
}
.mode dd {
  color: var(--basalt);
  margin: 3px 0 12px;
}
.mode dd:last-child {
  margin-bottom: 0;
}

/* ─────────── device drawing ───────────
   A drawing sheet, not an illustration: outline weight, construction weight
   and dimension weight are three different strokes, and nothing on the sheet
   is drawn at a weight it has not earned. */
.device {
  width: 100%;
  height: auto;
  display: block;
}
.device text {
  font-family: var(--mono);
}
/* the sheet itself */
.device .brd,
.device .dbox {
  fill: none;
  stroke: var(--ice);
  stroke-width: 1;
}
.device .zone {
  font-size: 8px;
  letter-spacing: 0.14em;
  fill: #9aa6b3;
}
/* object lines — the frame */
.device .ln {
  fill: none;
  stroke: var(--basalt);
  stroke-width: 1.15;
  stroke-linecap: round;
}
.device .soft {
  fill: none;
  stroke: #8d99a6;
  stroke-width: 0.9;
}
.device .lens {
  fill: var(--drift);
  opacity: 0.62;
}
/* centre lines: long-short-long, the way an axis is drawn */
.device .cl {
  fill: none;
  stroke: #9aa6b3;
  stroke-width: 0.7;
  stroke-dasharray: 14 3 2.5 3;
}
/* hidden detail — dashed, because it is behind the frame */
.device .hid {
  fill: none;
  stroke: var(--warn);
  stroke-width: 1;
  stroke-dasharray: 3 2.5;
}
.device .zoneline {
  fill: none;
  stroke: var(--steam);
  stroke-width: 0.8;
  stroke-dasharray: 3.5 3;
}
/* dimension weight */
.device .dim,
.device .ext,
.device .lead,
.device .detail {
  fill: none;
  stroke: #9aa6b3;
  stroke-width: 0.75;
}
.device .detail {
  stroke-dasharray: 6 4;
}
.device .arrow {
  fill: var(--steam);
  stroke: none;
}
.device .dimtxt {
  font-size: 9px;
  letter-spacing: 0.06em;
  fill: var(--basalt);
}
/* leader origins: a hairline that just stops reads as a stray rule; a
   pin says the label is pointing AT something. */
.device .pin {
  fill: var(--steam);
}
.device .lbl {
  font-size: 8.5px;
  letter-spacing: 0.1em;
  fill: var(--steam);
}
.device .note {
  font-size: 8.5px;
  letter-spacing: 0.05em;
  fill: #8d99a6;
}
.device .vt {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  fill: var(--basalt);
}
.device .fill {
  fill: var(--moss);
}
.device .led {
  fill: var(--warn);
}
.device .type {
  stroke: var(--moss);
  stroke-width: 2.2;
  stroke-linecap: round;
  opacity: 0.5;
}
/* title block */
.device .tbb,
.device .pe {
  fill: none;
  stroke: #8d99a6;
  stroke-width: 0.9;
}
.device .tbtitle {
  font-size: 10px;
  letter-spacing: 0.22em;
  fill: var(--basalt);
}
.device .tbk {
  font-size: 7px;
  letter-spacing: 0.16em;
  fill: #9aa6b3;
}
.device .tbv {
  font-size: 9px;
  letter-spacing: 0.08em;
  fill: var(--basalt);
}
/* A 760-unit sheet in a 340px column prints its labels at four pixels, and
   shrinking a drawing is the one thing you cannot do to it. So the phone gets
   a different sheet — the front elevation, its dimensions, and nothing else —
   rather than the same sheet made illegible. */
.deviceSm {
  display: none;
}
@media (max-width: 700px) {
  .deviceLg {
    display: none;
  }
  .deviceSm {
    display: block;
  }
}

/* ─────────── worn ───────────
   The whole section is the plate, both columns wide, at every width. It
   carries no caption because there is nothing to say over a photograph of the
   thing: it is grounded on --snow and feathered out on every edge, so it has
   no frame, no card and no border — the page simply has a face in it. */
.worn picture,
.worn img {
  display: block;
  width: 100%;
  height: auto;
}

.specs {
  margin-top: clamp(26px, 3.4vw, 44px);
  border-top: var(--rule);
}
.specs div {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: var(--rule);
  font-family: var(--mono);
  font-size: 11px;
}
.specs dt {
  color: var(--steam);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 10px;
}
.specs dd {
  text-align: right;
}

/* ─────────── waitlist ─────────── */
.join {
  background: var(--basalt);
  color: var(--snow);
  border-radius: 5px;
  padding: clamp(30px, 5.5vw, 72px);
}
.join h2 {
  max-width: 16ch;
}
.join .eyebrow {
  color: rgba(247, 248, 250, 0.45);
}
.join .sub {
  color: rgba(247, 248, 250, 0.6);
  max-width: 44ch;
  margin-top: 18px;
}

fieldset {
  border: 0;
  margin: clamp(30px, 4.4vh, 46px) 0 0;
}
legend {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 248, 250, 0.45);
  margin-bottom: 14px;
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 11px 17px;
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  color: rgba(247, 248, 250, 0.72);
  border: 1px solid rgba(247, 248, 250, 0.22);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
.chip:hover {
  border-color: rgba(247, 248, 250, 0.55);
  color: var(--snow);
}
.chip[aria-pressed="true"] {
  background: var(--snow);
  color: var(--basalt);
  border-color: var(--snow);
}

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
input[type="email"] {
  flex: 1 1 250px;
  min-width: 0;
  background: transparent;
  color: var(--snow);
  border: 1px solid rgba(247, 248, 250, 0.22);
  border-radius: 100px;
  padding: 14px 21px;
  font-family: var(--body);
  font-size: 15px;
}
input[type="email"]::placeholder {
  color: rgba(247, 248, 250, 0.35);
}
input[type="email"]:focus {
  outline: none;
  border-color: var(--snow);
}
.submit {
  background: var(--snow);
  color: var(--basalt);
  border: 1px solid var(--snow);
  border-radius: 100px;
  padding: 14px 30px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.submit:hover {
  opacity: 0.82;
}
.note {
  margin-top: 15px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: rgba(247, 248, 250, 0.42);
}
.note.err {
  color: #ff9a8b;
}
.done {
  display: none;
  font-family: var(--display);
  font-size: clamp(22px, 2.6vw, 32px);
  font-weight: 300;
  letter-spacing: -0.02em;
}
.done p {
  font-family: var(--body);
  font-size: 15px;
  color: rgba(247, 248, 250, 0.6);
  margin-top: 14px;
  max-width: 40ch;
  letter-spacing: 0;
}
.join.sent .askpart {
  display: none;
}
.join.sent .done {
  display: block;
}

/* ─────────── footer ─────────── */
footer {
  border-top: var(--rule);
  padding: 34px 0 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steam);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  h1 .ln > span,
  .lede,
  .demo {
    opacity: 1;
    transform: none;
  }
  .cap span {
    opacity: 1;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   TELL, AND THE FIRST RUN

   Two greens have always meant different things on this page: --moss is
   printed ink and never emits, --glass is emitted and only ever appears on
   black. The red follows the same rule and adds the reason it exists.

     --ember   emitted red. Only ever on black, only ever the Tell indicator.
     --warn    printed red. Already here; still only ever ink.

   If a red ever appears on white, it is ink and it is not the device
   speaking. That distinction is the whole discipline of this stylesheet.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --ember: #ff4d3d;
}

/* ─────────── nav ─────────── */
.navacts {
  display: flex;
  align-items: center;
  gap: 9px;
}
.navlink.solid {
  background: var(--basalt);
  color: var(--snow);
}
.navlink.solid:hover {
  opacity: 0.84;
}
@media (max-width: 560px) {
  .navacts .navlink:not(.solid) {
    display: none;
  }
}

/* ─────────── the scroll showcase ───────────
   A pinned screen the camera is driven across. The height on .showcase is
   the scroll distance, and it is the only number that sets the pacing;
   showcase.js measures it rather than carrying a copy. Five waypoints at
   roughly a screen and a bit each, plus one screen for the pin itself. */
.showcase {
  /* Stated rather than inherited. This is the scroll track for a sticky
     child, and a sticky child is at the mercy of whatever formatting
     context its parent turns out to be in — which here was not block, and
     centred the pinned screen inside the track instead of pinning it. A
     scroll track is a block; say so. */
  display: block;
  position: relative;
  height: 520vh;
  margin-top: clamp(30px, 4vw, 52px);
}
.showStick {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  align-items: stretch;
  /* the canvas is the whole screen; the copy sits on top of it, because a
     side-by-side split gives the frame half a phone and none of a laptop */
  grid-template-areas: "screen";
}
.showStage,
.showCopy,
.showRail,
.showHint,
.showWp {
  grid-area: screen;
}

/* ─── the canvas ─── */
.showStage {
  position: relative;
  width: 100%;
  height: 100%;
}
/* #stage is `position: absolute; inset: 0` wherever it is mounted, so the
   host only has to be a positioned box of the right size. */
.showcase.flat .showStage {
  display: none;
}

/* ─── the copy ───
   Pinned to one corner and narrow: the frame is the subject, and a column
   of text down the middle of it would be a caption competing with what it
   captions. Every panel is stacked in the same place and cross-faded by
   showcase.js, so nothing reflows as the camera moves. */
.showCopy {
  position: relative;
  display: grid;
  grid-template-areas: "step";
  align-content: end;
  justify-items: start;
  min-height: 0;
  /* the nav is fixed, so the top of this column has to clear it */
  padding-top: 84px;
  padding-right: var(--gut);
  padding-left: var(--gut);
  padding-bottom: clamp(52px, 9vh, 104px);
  pointer-events: none;
}
.showStep {
  grid-area: step;
  align-self: end;
  max-width: 38ch;
  opacity: 0;
  will-change: opacity, transform;
}
.showStep h3 {
  font-family: var(--display);
  font-size: clamp(27px, 3.6vw, 50px);
  font-weight: 300;
  letter-spacing: -0.032em;
  line-height: 1.02;
  margin: 12px 0 14px;
  text-wrap: balance;
}
.showStep p {
  color: var(--steam);
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.65;
}
/* The frame is light and the copy sits over it, so the copy gets a wash of
   the page colour behind it rather than a box — legible at any camera
   position without ever reading as a panel. */
.showcase:not(.flat) .showStep::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -28px -40px -32px calc(var(--gut) * -1);
  background: radial-gradient(
    120% 100% at 0% 60%,
    var(--snow) 42%,
    rgba(247, 248, 250, 0) 100%
  );
}

/* ─── the rail ─── */
.showRail {
  align-self: center;
  justify-self: end;
  display: grid;
  gap: 14px;
  padding-right: calc(var(--gut) - 6px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: rgba(105, 117, 131, 0.5);
  pointer-events: none;
}
.showTick {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}
.showTick i {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s;
}
.showTick.on {
  color: var(--basalt);
}
.showTick.on i {
  width: 34px;
  background: var(--moss);
}

/* ─── the nudge, shown until the first scroll moves the camera ─── */
.showHint {
  align-self: end;
  justify-self: center;
  padding-bottom: clamp(20px, 3vh, 34px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--steam);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
.showcase.live .showHint {
  opacity: 1;
  animation: showNudge 2.4s ease-in-out infinite;
}
/* it has been taken */
.showcase.moved .showHint {
  opacity: 0;
  animation: none;
}
@keyframes showNudge {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(5px);
  }
}

/* ─── the tuning readout, only with ?wp=1 ─── */
.showWp {
  align-self: start;
  justify-self: start;
  margin: 76px 0 0 var(--gut);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--basalt);
  background: rgba(247, 248, 250, 0.82);
  padding: 6px 10px;
  border: var(--rule);
  border-radius: 3px;
  display: none;
  pointer-events: none;
  white-space: pre;
}
.showcase.dbg .showWp {
  display: block;
}

/* ─── phones ───
   The copy cannot sit over the frame on a phone: there is not enough width
   for both, and the gradient wash would cover the object it is describing.
   So the screen splits — frame above, copy below — and the pin stays. */
@media (max-width: 860px) {
  .showcase {
    height: 460vh;
  }
  .showStick {
    grid-template-areas: "screen";
  }
  .showStage {
    height: 52vh;
    align-self: start;
    margin-top: 64px;
  }
  .showCopy {
    align-content: end;
    padding-bottom: clamp(48px, 9vh, 88px);
  }
  .showStep {
    max-width: none;
  }
  .showcase:not(.flat) .showStep::before {
    inset: -20px calc(var(--gut) * -1) -24px calc(var(--gut) * -1);
    background: linear-gradient(
      to bottom,
      rgba(247, 248, 250, 0) 0%,
      var(--snow) 14%
    );
  }
  .showRail {
    display: none;
  }
}

/* ─── the fallback ───
   No three.js, or a machine that asked for less motion: the same six pieces
   of copy as an ordinary stacked list. No pin, no canvas, no rail. */
.showcase.flat {
  height: auto !important;
}
.showcase.flat .showStick {
  position: static;
  height: auto;
  display: block;
}
.showcase.flat .showCopy {
  display: grid;
  grid-template-areas: none;
  gap: clamp(34px, 5vw, 60px);
  padding: 0;
  align-content: start;
}
@media (min-width: 760px) {
  .showcase.flat .showCopy {
    grid-template-columns: 1fr 1fr;
  }
}
.showcase.flat .showStep {
  grid-area: auto;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  max-width: 46ch;
}
.showcase.flat .showRail,
.showcase.flat .showHint {
  display: none;
}

/* ─────────── the technology section ───────────
   The chain is the argument: five stages, one of which disappears in caption
   mode, and a budget bar that shows you the second being given back rather
   than quietly rescaling itself. Everything here is scoped under .tech so it
   cannot reach the rig's instrument surface further down the file. */
.techLede {
  max-width: 62ch;
  margin-top: var(--step);
  color: var(--steam);
}
.tech {
  margin-top: clamp(30px, 4vw, 52px);
}

/* ─── the bar above the chain ─── */
.techBar {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: var(--rule);
}
.techModes {
  display: inline-flex;
  border: var(--rule);
  border-radius: 100px;
  padding: 3px;
  background: var(--drift);
}
.techMode {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steam);
  padding: 9px 20px;
  border-radius: 100px;
  transition:
    background 0.22s,
    color 0.22s;
}
.techMode.on {
  background: var(--snow);
  color: var(--basalt);
  box-shadow: 0 1px 2px rgba(20, 23, 27, 0.08);
}
.techRun {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: var(--basalt);
  color: var(--snow);
  border-radius: 100px;
  padding: 13px 26px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.2s;
}
.techRun:hover {
  opacity: 0.85;
}

/* ─── the chain ─── */
.techChain {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--ice);
  border-bottom: var(--rule);
}
@media (min-width: 880px) {
  .techChain {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.techNode {
  background: var(--snow);
  transition: background 0.3s;
}
.techNodeBtn {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  width: 100%;
  height: 100%;
  text-align: left;
  display: grid;
  gap: 7px;
  align-content: start;
  padding: clamp(20px, 2.4vw, 28px) clamp(18px, 2vw, 24px);
  font: inherit;
  color: inherit;
}
.techN {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.19em;
  color: var(--steam);
}
.techName {
  font-family: var(--display);
  font-size: clamp(21px, 2.1vw, 28px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.techRole {
  font-size: 13px;
  color: var(--steam);
  line-height: 1.45;
}
.techMs {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--basalt);
  font-variant-numeric: tabular-nums;
}
.techNode.on {
  background: var(--drift);
}
.techNode.on .techName {
  color: var(--basalt);
}
.techNode.off .techName,
.techNode.off .techRole,
.techNode.off .techN {
  opacity: 0.38;
}
.techNode.off .techMs {
  color: var(--steam);
}
/* the pulse travelling the chain */
.techNode.lit {
  background: rgba(46, 125, 111, 0.09);
}
.techNode.lit .techMs,
.techNode.past .techMs {
  color: var(--moss);
}
.techNode.past .techN::after {
  content: " ✓";
  color: var(--moss);
}

/* ─── the readout: lens on the left, budget on the right ─── */
.techOut {
  display: grid;
  gap: clamp(24px, 3.4vw, 48px);
  padding-top: clamp(26px, 3.4vw, 40px);
}
@media (min-width: 880px) {
  .techOut {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.techLens {
  position: relative;
  background: var(--feed);
  border-radius: 5px;
  min-height: 168px;
  display: flex;
  align-items: center;
  padding: 44px clamp(22px, 3vw, 38px) 28px;
  overflow: hidden;
}
/* the waveguide's own glow, off until a line has been paid for */
.techLens::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    120% 90% at 50% 100%,
    rgba(46, 125, 111, 0.22),
    transparent 62%
  );
  opacity: 0;
  transition: opacity 0.6s;
}
.techLens.lit::before {
  opacity: 1;
}
.techHud {
  position: absolute;
  top: 14px;
  left: clamp(22px, 3vw, 38px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(247, 248, 250, 0.45);
}
.techHud i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(247, 248, 250, 0.3);
  transition: background 0.3s;
}
.tech.running .techHud i {
  background: var(--moss);
}
.techHud b {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.techLine {
  position: relative;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.28;
  letter-spacing: -0.015em;
  color: #eaf5f1;
  text-wrap: balance;
  animation: techIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes techIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.techCaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--steam);
  line-height: 1.5;
}
.techCaption b {
  color: var(--basalt);
  font-weight: 400;
}

/* ─── the budget ─── */
.techBudgetHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.techBudgetHead em {
  font-style: normal;
  font-family: var(--mono);
  font-size: clamp(22px, 2.4vw, 32px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.tech.over .techBudgetHead em {
  color: #b4453a;
}
.techTrack {
  display: flex;
  gap: 2px;
  height: 38px;
  background: var(--drift);
  border-radius: 3px;
  overflow: hidden;
}
.techSeg {
  display: block;
  height: 100%;
  background: var(--ice);
  transition:
    width 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    background 0.3s;
}
.techSeg.fill {
  background: var(--moss);
}
.techScale {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--steam);
}
.techNote {
  margin-top: 18px;
  padding-top: 16px;
  border-top: var(--rule);
  font-size: 13px;
  line-height: 1.65;
  color: var(--steam);
}

/* ─── the pinned stage ─── */
.techDetail {
  margin-top: clamp(26px, 3.4vw, 42px);
  padding-top: clamp(22px, 2.6vw, 30px);
  border-top: var(--rule);
  display: grid;
  gap: clamp(18px, 3vw, 46px);
}
@media (min-width: 880px) {
  .techDetail {
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr) minmax(0, 0.7fr);
    align-items: start;
  }
}
.techDetailHead h3 {
  font-family: var(--display);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 10px;
}
.techSkip {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--steam);
  border: var(--rule);
  border-radius: 100px;
  padding: 5px 12px;
}
.techDetail p {
  color: var(--steam);
  max-width: 56ch;
  line-height: 1.68;
}
.techSpecs {
  font-family: var(--mono);
  font-size: 11px;
}
.techSpecs div {
  display: grid;
  gap: 3px;
  padding: 11px 0;
  border-bottom: var(--rule);
}
.techSpecs div:first-child {
  border-top: var(--rule);
}
.techSpecs dt {
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--steam);
}
.techSpecs dd {
  color: var(--basalt);
}

/* ─────────── the regulatory footnote under the refusals ─────────── */
.noFoot {
  margin-top: clamp(28px, 3.6vw, 44px);
  max-width: 74ch;
  font-size: clamp(13px, 0.95vw, 15px);
  line-height: 1.72;
  color: var(--steam);
}

/* ─────────── the footer call ─────────── */
.footCta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(52px, 8vh, 96px);
  padding-bottom: clamp(52px, 8vh, 96px);
  border-top: var(--rule);
}
.footBtn {
  display: flex;
  align-items: baseline;
  gap: 14px;
  text-decoration: none;
  background: var(--basalt);
  color: var(--snow);
  border-radius: 100px;
  padding: 18px 34px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity 0.2s;
  white-space: nowrap;
}
.footBtn:hover {
  opacity: 0.85;
}

@media (prefers-reduced-motion: reduce) {
  .techLine {
    animation: none;
  }
  .techSeg {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   LIVE MODE — the seam between the landing page and the caption rig.

   The rig's stylesheet below is machine-scoped under `body.rigon`, so nothing
   in it can reach the landing page. What is left is the seam itself: what
   hides, what appears, and the two controls the landing page adds — the
   transparent button over the frame, and the way out.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* the rig needs four colours the landing page never had a use for */
  --rime: #c6d0da;
  --glass: #4cff9b; /* emitted green — only ever on black, only ever the waveguide */
  --amber: #ffb088;
  --warn: #8c2f2f;
}

/* The rig's boot veil only exists so its element ids resolve; the press
   replaced everything it used to do. The help sheet belongs to live mode. */
#boot {
  display: none !important;
}
#help {
  display: none;
}

body.rigon {
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
body.rigon #sitenav,
body.rigon #top,
body.rigon > footer {
  display: none;
}
body.rigon #rigui {
  display: block;
}
#rigui[hidden] {
  display: none;
}

/* the shared stage: one element, moved between the hero and the rig card */
body.rigon #stage {
  z-index: 1;
  touch-action: none;
}

/* ── the press target ────────────────────────────────────────────────
   A real button rather than a raycast against the frame geometry: it is
   reachable by keyboard and by screen reader — which is not optional for a
   product whose first audience is deaf and hard-of-hearing people — it
   survives a WebGL failure, and it keeps getUserMedia inside the gesture
   that iOS insists on.

   It used to be `inset: 0` — the entire frame was the button. That is why
   the glasses could not be turned anywhere except inside the rig: every
   drag landed on a transparent button instead of on the canvas, and a drag
   that starts on a button is a click. So the button is a button now, a pill
   at the foot of the frame, and everything above it belongs to the object.

   It is visible at rest rather than on hover, because the hover state it
   used to rely on does not exist on the device this matters most on, and
   because a control nobody can see is not a control. */
.rigHit {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 4%, 26px);
  transform: translateX(-50%);
  z-index: 6;
  padding: 11px 22px;
  border: 0;
  border-radius: 100px;
  /* Solid, because the hero stage is transparent: the frame floats on the
     page's own white, and a pale pill on it would be a pale pill on nothing.
     Same treatment as the nav's primary button, for the same reason. */
  background: var(--basalt);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--snow);
  white-space: nowrap;
  box-shadow: 0 2px 14px rgba(20, 23, 27, 0.14);
  transition:
    opacity 0.25s ease,
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.rigHit::after {
  content: "Try them on";
}
.rigHit:hover,
.rigHit:focus-visible {
  opacity: 0.84;
  transform: translateX(-50%) translateY(-1px);
}
body.rigon .rigHit {
  display: none;
}

/* ── the gate ────────────────────────────────────────────────────────
   Turnstile, the consent line, and every reason the demo might decline.
   It says what happens to the audio before the audio happens, because the
   page two sections up promises the product never uploads anything — and
   for the product that is true, and for this browser demo it is not. */
#gate {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 120;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px var(--gut) 26px;
  background: rgba(247, 248, 250, 0.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: var(--rule);
  text-align: center;
}
#gate[hidden] {
  display: none;
}
#gateMsg {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--steam);
  max-width: 60ch;
  line-height: 1.8;
}
#gateMsg.bad {
  color: var(--warn);
}
/* Turnstile needs a box to render into. #gate is a column flex container with
   align-items:center, so this was a shrink-to-fit item — zero wide while it is
   empty, which is exactly when the widget gets created. A "flexible" widget in
   a zero-width parent cannot render, and a phone reports that as a generic
   600010. Give it the 300x65 a "normal" widget asks for, and collapse only the
   height when there is nothing in it. */
#gateTurnstile {
  width: 300px;
  max-width: 100%;
  min-height: 65px;
}
#gateTurnstile:empty {
  min-height: 0;
}

.consent {
  margin-top: 18px;
  max-width: 62ch;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.85;
  color: var(--steam);
}
.consent b {
  color: var(--basalt);
  font-weight: 400;
}

/* ── the way out ─────────────────────────────────────────────────────
   A phone needs one that is not "close the tab". */
#rigStop {
  display: none;
  position: fixed;
  top: 14px;
  right: var(--stop);
  z-index: 130;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--basalt);
  border-radius: 100px;
  background: var(--snow);
  color: var(--basalt);
  padding: 9px 18px;
  cursor: pointer;
}
body.rigon #rigStop {
  display: block;
}
body.rigon.pov #rigStop,
body.rigon.capture #rigStop {
  opacity: 0.25;
}

/* ── phones ──────────────────────────────────────────────────────────
   The keyboard map is not reachable with a thumb, so the three controls a
   visitor actually needs get real buttons and the map steps aside. */
@media (pointer: coarse) {
  body.rigon #keys {
    display: none;
  }
  body.rigon #term {
    display: none;
  }
}

/* ══════ the rig's instrument surface, scoped to body.rigon ══════ */
/* ══════════════════════════════════════════════════════════════
   SNOW — instrument surface
   Two greens, and they mean different things:
     --moss   printed green. Brand ink. Never emits.
     --glass  emitted green. Only ever appears on black, and only
              ever means "this is what the waveguide would show."
   ══════════════════════════════════════════════════════════════ */ /* whiteout grain — Icelandic light is never flat */
body.rigon .eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--steam);
} /* ─────────────── nav ─────────────── */
body.rigon #rignav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px var(--gut);
  background: rgba(247, 248, 250, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: var(--rule);
  transition:
    opacity 0.45s ease,
    transform 0.45s ease;
}
body.rigon .wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-optical-sizing: auto;
  flex: none;
}
body.rigon .navrule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--ice);
  min-width: 12px;
} /* the chain lamps: mic → asr → mt, live in the nav */
body.rigon .chain {
  display: flex;
  align-items: center;
  gap: 0;
  flex: none;
}
body.rigon .link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rime);
  padding: 0 11px;
  white-space: nowrap;
}
body.rigon .link + .link {
  border-left: 1px solid var(--ice);
}
body.rigon .link i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ice);
  flex: none;
}
body.rigon .link.up {
  color: var(--steam);
}
body.rigon .link.up i {
  background: var(--moss);
}
body.rigon .link.down {
  color: var(--rime);
}
body.rigon .link.down i {
  background: var(--rime);
}
body.rigon .link.off {
  opacity: 0.4;
  text-decoration: line-through;
}
body.rigon .link.hot i {
  animation: pulse 0.9s ease-in-out infinite;
}
@media (max-width: 900px) {
  body.rigon .chain {
    display: none;
  }
}
body.rigon #state {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  border: var(--rule);
  border-radius: 100px;
  padding: 7px 15px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--steam);
  background: var(--snow);
  white-space: nowrap;
}
body.rigon #dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ice);
  flex: none;
}
body.rigon #state.armed #dot,
body.rigon #state.speech #dot {
  background: var(--moss);
}
body.rigon #state.speech #dot {
  animation: pulse 0.9s ease-in-out infinite;
}
body.rigon #state.busy #dot {
  background: var(--basalt);
  animation: pulse 0.5s linear infinite;
}
body.rigon #state.error #dot {
  background: var(--warn);
}
body.rigon #state.armed,
body.rigon #state.speech,
body.rigon #state.busy {
  color: var(--basalt);
}
body.rigon #state.error {
  color: var(--warn);
  border-color: var(--warn);
}
@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.22;
  }
} /* ─────────────── stage ─────────────── */
body.rigon #rigmain {
  padding: calc(56px + clamp(18px, 3.4vh, 38px)) var(--gut)
    clamp(28px, 5vh, 56px);
  max-width: 1560px;
  margin: 0 auto;
} /* ── the rig card: one viewport, the whole product ──
         Behind: the room, dimmed — the webcam, locked to the scene camera.
         In front: the frame from snow.html.
         Through the lenses: the same room, undimmed, in perspective.
         In the right lens: the words. */ /* The stage is the page. No frame around the frame, no black box —
         the glasses sit in the same Icelandic light as everything else, and
         they are the only thing in it worth looking at. */
body.rigon #card {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: calc(100vh - 190px);
  min-height: 420px;
  background: transparent;
  overflow: hidden;
} /* a studio sweep, barely there — enough that the frame isn't floating
         in dead white, not enough to become an object itself */
body.rigon #card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      42% 46% at 50% 47%,
      rgba(214, 221, 229, 0.5),
      transparent 70%
    ),
    radial-gradient(
      70% 46% at 50% 96%,
      rgba(46, 125, 111, 0.045),
      transparent 72%
    );
} /* The media element itself. It is never the picture — it is the source
         the lens shader samples. It only becomes the picture if WebGL or the
         three.js fetch fails, and then .no3d promotes it. */
body.rigon video#feed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  z-index: 0;
}
body.rigon.no3d video#feed {
  opacity: 1;
}
body.rigon.no3d #stage {
  display: none;
}
body.rigon video.mir {
  transform: scaleX(-1);
}
body.rigon .hud {
  position: absolute;
  top: 15px;
  left: 17px;
  right: 17px;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steam);
  transition: opacity 0.45s ease;
  pointer-events: none;
}
body.rigon .hud .l {
  display: flex;
  align-items: center;
  gap: 7px;
}
body.rigon .hud i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--moss);
}
body.rigon .hud.act i {
  animation: pulse 0.9s ease-in-out infinite;
}
body.rigon .hud .r {
  text-align: right;
  line-height: 1.8;
}
body.rigon .hud .r b {
  display: block;
  font-weight: 400;
  color: var(--basalt);
  font-variant-numeric: tabular-nums;
}
body.rigon .hud .r b.over {
  color: var(--warn);
} /* pose bar — how the demo is framed, bottom-left of the card */
body.rigon .poses {
  position: absolute;
  left: 17px;
  bottom: 15px;
  z-index: 5;
  display: flex;
  gap: 6px;
  transition: opacity 0.45s ease;
}
body.rigon .pose {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 100px;
  cursor: pointer;
  background: rgba(247, 248, 250, 0.72);
  color: var(--steam);
  border: var(--rule);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
body.rigon .pose:hover {
  color: var(--basalt);
  border-color: var(--steam);
}
body.rigon .pose.on {
  background: var(--basalt);
  color: var(--snow);
  border-color: var(--basalt);
} /* ─────────────── chain strip ─────────────── */
body.rigon .chainStrip {
  display: grid;
  gap: 1px;
  background: var(--ice);
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-top: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(2, 1fr);
  transition: opacity 0.45s ease;
}
@media (min-width: 720px) {
  body.rigon .chainStrip {
    grid-template-columns: repeat(6, 1fr);
  }
}
body.rigon .cell {
  background: var(--snow);
  padding: 13px 15px 12px;
  position: relative;
}
body.rigon .cell .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steam);
  display: block;
}
body.rigon .cell .v {
  font-family: var(--display);
  font-weight: 300;
  font-size: 23px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 5px;
  display: block;
  font-variant-numeric: tabular-nums;
}
body.rigon .cell .v small {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--steam);
  letter-spacing: 0.08em;
  margin-left: 3px;
}
body.rigon .cell .b {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  background: var(--moss);
  width: 0;
  transition: width 0.25s ease;
}
body.rigon .cell.over .b {
  background: var(--warn);
}
body.rigon .cell.total .v {
  color: var(--basalt);
}
body.rigon .cell.total.over .v {
  color: var(--warn);
}
body.rigon .cell.skip {
  opacity: 0.42;
} /* ─────────────── panels ─────────────── */
body.rigon #panels {
  display: grid;
  gap: 1px;
  background: var(--ice);
  border: var(--rule);
  border-radius: 4px;
  overflow: hidden;
  margin-top: clamp(14px, 1.8vw, 22px);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  transition: opacity 0.45s ease;
}
body.rigon .panel {
  background: var(--snow);
  padding: clamp(16px, 1.5vw, 22px);
}
body.rigon .panel h3 {
  margin-bottom: 14px;
}
body.rigon .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
body.rigon .chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 8px 13px;
  border-radius: 100px;
  cursor: pointer;
  background: transparent;
  color: var(--steam);
  border: var(--rule);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s;
}
body.rigon .chip:hover {
  border-color: var(--steam);
  color: var(--basalt);
}
body.rigon .chip.on {
  background: var(--basalt);
  color: var(--snow);
  border-color: var(--basalt);
}
body.rigon .chip.off {
  opacity: 0.3;
  cursor: not-allowed;
  text-decoration: line-through;
}
body.rigon .chip.off:hover {
  border-color: var(--ice);
  color: var(--steam);
} /* mode switch — two modes, stated the way the product states them */
body.rigon .modeSwitch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ice);
  border: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
body.rigon .modeSwitch button {
  background: var(--snow);
  border: 0;
  cursor: pointer;
  padding: 11px 10px 12px;
  text-align: left;
  transition:
    background 0.2s,
    color 0.2s;
}
body.rigon .modeSwitch button b {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 400;
}
body.rigon .modeSwitch button span {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--steam);
  margin-top: 4px;
}
body.rigon .modeSwitch button.on {
  background: var(--basalt);
  color: var(--snow);
}
body.rigon .modeSwitch button.on span {
  color: rgba(247, 248, 250, 0.55);
}
body.rigon .modeSwitch button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
body.rigon .hint {
  margin-top: 11px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--steam);
  line-height: 1.75;
}
body.rigon .hint b {
  color: var(--basalt);
  font-weight: 400;
}
body.rigon .hint .flag {
  color: var(--warn);
}
body.rigon select {
  width: 100%;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--basalt);
  background: transparent;
  border: var(--rule);
  border-radius: 100px;
  padding: 9px 14px;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--steam) 50%),
    linear-gradient(135deg, var(--steam) 50%, transparent 50%);
  background-position:
    calc(100% - 17px) 50%,
    calc(100% - 12px) 50%;
  background-size:
    5px 5px,
    5px 5px;
  background-repeat: no-repeat;
} /* meters */
body.rigon .meter {
  margin-top: 15px;
}
body.rigon .mrow {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steam);
}
body.rigon .mrow em {
  font-style: normal;
  color: var(--basalt);
  font-variant-numeric: tabular-nums;
}
body.rigon .bar {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--drift);
  margin: 6px 0 14px;
  cursor: ew-resize;
  touch-action: none;
}
body.rigon .bar::before {
  content: "";
  position: absolute;
  inset: -9px 0;
  cursor: ew-resize;
}
body.rigon .bar:hover .tick {
  opacity: 1;
  height: 15px;
  top: -6px;
}
body.rigon .fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.06s linear;
}
body.rigon #lvlF {
  background: var(--moss);
}
body.rigon #tonF {
  background: var(--basalt);
}
body.rigon .tick {
  position: absolute;
  top: -4px;
  width: 1px;
  height: 11px;
  background: var(--basalt);
  opacity: 0.55;
  transition:
    height 0.15s,
    opacity 0.15s,
    top 0.15s;
  pointer-events: none;
} /* spec lists */
body.rigon dl.spec {
  border-top: var(--rule);
}
body.rigon dl.spec div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: var(--rule);
  font-family: var(--mono);
  font-size: 11px;
}
body.rigon dl.spec dt {
  color: var(--steam);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 9.5px;
}
body.rigon dl.spec dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.rigon dd.good {
  color: var(--moss);
}
body.rigon dd.bad {
  color: var(--warn);
}
body.rigon .dbg {
  display: none;
}
body.rigon .dbg.on {
  display: flex !important;
} /* ── endpoints: what :8080 / :8081 / :8082 are actually doing ── */
body.rigon .eps {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--ice);
  border: var(--rule);
  border-radius: 3px;
  overflow: hidden;
}
body.rigon .ep {
  background: var(--snow);
  padding: 10px 12px 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  font-family: var(--mono);
  font-size: 11px;
}
body.rigon .ep .port {
  grid-column: 1 / -1;
  color: var(--basalt);
  letter-spacing: 0.04em;
}
body.rigon .ep .port em {
  font-style: normal;
  color: var(--steam);
  margin-left: 8px;
}
body.rigon .ep .what {
  grid-column: 1;
  color: var(--steam);
  font-size: 10px;
  line-height: 1.55;
}
body.rigon .ep .what b {
  font-weight: 400;
  color: var(--basalt);
  letter-spacing: 0.08em;
}
body.rigon .ep .stat {
  grid-column: 2;
  align-self: end;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rime);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}
body.rigon .ep.up .stat {
  color: var(--moss);
}
body.rigon .ep.down .stat {
  color: var(--warn);
}
body.rigon .ep.hot {
  background: var(--drift);
}
body.rigon .ep.down .port,
body.rigon .ep.down .what {
  opacity: 0.45;
} /* direction of arrival */
body.rigon .doa {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
body.rigon .doaDial {
  width: 74px;
  height: 74px;
  flex: none;
}
body.rigon .doaDial .ring {
  fill: none;
  stroke: var(--ice);
  stroke-width: 1;
}
body.rigon .doaDial .cone {
  fill: var(--moss);
  opacity: 0.11;
}
body.rigon .doaDial .needle {
  stroke: var(--basalt);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: transform 0.18s ease;
  transform-origin: 50px 50px;
}
body.rigon .doaDial .needle.out {
  stroke: var(--warn);
}
body.rigon .doaDial .hair {
  stroke: var(--ice);
  stroke-width: 1;
}
body.rigon .doaDial .lbl {
  font-family: var(--mono);
  font-size: 7px;
  fill: var(--steam);
  letter-spacing: 0.1em;
}
body.rigon .doaDial.absent {
  opacity: 0.28;
}
body.rigon .doaRead {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--steam);
  line-height: 1.75;
}
body.rigon .doaRead b {
  color: var(--basalt);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
} /* sparkline */
body.rigon .spark {
  width: 100%;
  height: 38px;
  display: block;
  margin: 4px 0 2px;
}
body.rigon .spark .lineP {
  fill: none;
  stroke: var(--basalt);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
body.rigon .spark .lineM {
  fill: none;
  stroke: var(--moss);
  stroke-width: 1.2;
  stroke-linejoin: round;
}
body.rigon .spark .budget {
  stroke: var(--warn);
  stroke-width: 1;
  stroke-dasharray: 2 3;
  opacity: 0.6;
}
body.rigon .spark .base {
  stroke: var(--ice);
  stroke-width: 1;
} /* ─────────────── terminal ───────────────
   The thing the python 8000 log was never able to be. Every decision the
   rig makes, with the number that made it. */
body.rigon #term {
  margin-top: clamp(14px, 1.8vw, 22px);
  border: var(--rule);
  border-radius: 4px;
  background: var(--basalt);
  overflow: hidden;
  transition: opacity 0.45s ease;
}
body.rigon #term .head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(247, 248, 250, 0.09);
}
body.rigon #term .head .eyebrow {
  color: rgba(247, 248, 250, 0.42);
  flex: none;
}
body.rigon #term .head .sp {
  flex: 1 1 auto;
}
body.rigon .fbtn {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(247, 248, 250, 0.16);
  border-radius: 100px;
  background: transparent;
  color: rgba(247, 248, 250, 0.42);
  padding: 5px 11px;
  cursor: pointer;
  transition:
    color 0.18s,
    border-color 0.18s,
    background 0.18s;
}
body.rigon .fbtn:hover {
  color: var(--snow);
  border-color: rgba(247, 248, 250, 0.45);
}
body.rigon .fbtn.on {
  background: rgba(247, 248, 250, 0.92);
  color: var(--basalt);
  border-color: transparent;
}
body.rigon .fbtn.burn:hover {
  color: #ff9a8b;
  border-color: #ff9a8b;
}
body.rigon #termBody {
  height: 268px;
  overflow-y: auto;
  padding: 8px 0 10px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.62;
  color: rgba(247, 248, 250, 0.62);
  scrollbar-width: thin;
  scrollbar-color: rgba(247, 248, 250, 0.2) transparent;
}
body.rigon #termBody::-webkit-scrollbar {
  width: 8px;
}
body.rigon #termBody::-webkit-scrollbar-thumb {
  background: rgba(247, 248, 250, 0.16);
  border-radius: 4px;
}
body.rigon #termBody:empty::after {
  content: "  waiting for the first frame…";
  color: rgba(247, 248, 250, 0.22);
}
body.rigon .lg {
  display: grid;
  grid-template-columns: 92px 42px minmax(0, 1fr);
  gap: 12px;
  padding: 1px 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
body.rigon .lg:hover {
  background: rgba(247, 248, 250, 0.045);
}
body.rigon .lg .t {
  color: rgba(247, 248, 250, 0.24);
  font-variant-numeric: tabular-nums;
}
body.rigon .lg .k {
  color: rgba(247, 248, 250, 0.4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 9.5px;
  padding-top: 1px;
}
body.rigon .lg .m em {
  font-style: normal;
  color: rgba(247, 248, 250, 0.95);
}
body.rigon .lg .m q {
  quotes: none;
  color: var(--glass);
}
body.rigon .lg .m q::before,
body.rigon .lg .m q::after {
  content: "";
}
body.rigon .lg .m s {
  text-decoration: none;
  color: rgba(247, 248, 250, 0.34);
}
body.rigon .lg.ok .k {
  color: var(--glass);
}
body.rigon .lg.warn .m em,
body.rigon .lg.warn .k {
  color: var(--amber);
}
body.rigon .lg.err .m,
body.rigon .lg.err .k {
  color: #ff8f7a;
}
body.rigon .lg.err .m em {
  color: #ff8f7a;
}
body.rigon .lg.dim {
  color: rgba(247, 248, 250, 0.34);
}
body.rigon #term.paused .head .eyebrow::after {
  content: " · paused";
  color: var(--amber);
}
body.rigon.hideterm #term {
  display: none;
} /* ─────────────── session tape ─────────────── */
body.rigon #tape {
  margin-top: clamp(14px, 1.8vw, 22px);
  border: var(--rule);
  border-radius: 4px;
  background: var(--snow);
  overflow: hidden;
  transition: opacity 0.45s ease;
}
body.rigon .tapeHead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-bottom: var(--rule);
}
body.rigon .tapeHead .eyebrow {
  flex: 1 1 auto;
}
body.rigon .tbtn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: var(--rule);
  border-radius: 100px;
  background: transparent;
  color: var(--steam);
  padding: 6px 13px;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
body.rigon .tbtn:hover {
  color: var(--basalt);
  border-color: var(--steam);
}
body.rigon .tbtn.burn:hover {
  color: var(--warn);
  border-color: var(--warn);
}
body.rigon #tapeBody {
  max-height: 210px;
  overflow-y: auto;
  padding: 4px 16px 14px;
}
body.rigon #tapeBody:empty::after {
  content: "Nothing captured yet. Press space to arm, then talk.";
  display: block;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--rime);
}
body.rigon .tline {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--ice);
  font-size: 13.5px;
}
body.rigon .tline:last-child {
  border-bottom: 0;
}
body.rigon .tline time {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--rime);
  letter-spacing: 0.08em;
  padding-top: 3px;
}
body.rigon .tline .src {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--steam);
  display: block;
  margin-top: 3px;
}
body.rigon .tline.rej {
  opacity: 0.5;
}
body.rigon .tline.rej .out {
  color: var(--warn);
  font-family: var(--mono);
  font-size: 11px;
}
body.rigon #keys {
  margin-top: clamp(16px, 2.4vh, 26px);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 2;
  color: var(--steam);
  transition: opacity 0.45s ease;
}
body.rigon #keys b {
  color: var(--basalt);
  font-weight: 400;
}
body.rigon #keys span {
  display: inline-block;
  margin-right: 20px;
  white-space: nowrap;
} /* ─────────────── presentation modes ─────────────── */
body.rigon.capture,
body.rigon.pov {
  background: var(--snow);
}
body.rigon.capture #rignav,
body.rigon.pov #rignav {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
body.rigon.capture #rigmain,
body.rigon.pov #rigmain {
  padding: 0;
  max-width: none;
}
body.rigon.capture #card,
body.rigon.pov #card {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-height: none;
  aspect-ratio: auto;
  z-index: 40;
}
body.rigon.capture #panels,
body.rigon.capture #keys,
body.rigon.capture .chainStrip,
body.rigon.capture #tape,
body.rigon.capture #term,
body.rigon.capture .hud,
body.rigon.capture .poses,
body.rigon.pov #panels,
body.rigon.pov #keys,
body.rigon.pov .chainStrip,
body.rigon.pov #tape,
body.rigon.pov #term,
body.rigon.pov .poses {
  opacity: 0;
  pointer-events: none;
} /* POV: nothing but the glass, the view through it, and the words. */
body.rigon.pov .hud {
  opacity: 0.5;
} /* ─────────────── boot / help ─────────────── */
body.rigon .veil {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--snow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  padding: 24px;
}
body.rigon .veil.gone {
  display: none;
}
body.rigon .veil .wordmark {
  font-size: 19px;
  margin-bottom: 2px;
}
body.rigon .veil p {
  color: var(--steam);
  max-width: 430px;
  font-size: 14px;
}
body.rigon .go {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 14px 32px;
  border: 1px solid var(--basalt);
  border-radius: 100px;
  background: var(--basalt);
  color: var(--snow);
  cursor: pointer;
  transition: opacity 0.2s;
}
body.rigon .go:hover {
  opacity: 0.85;
}
body.rigon .go:disabled {
  opacity: 0.35;
  cursor: default;
}
body.rigon #err {
  color: var(--warn);
  font-family: var(--mono);
  font-size: 11px;
  max-width: 620px;
  line-height: 1.85;
  white-space: pre-wrap;
  text-align: left;
}
body.rigon #preflight {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--steam);
  border-top: var(--rule);
  border-bottom: var(--rule);
  width: 100%;
  max-width: 470px;
}
body.rigon #preflight div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
}
body.rigon #preflight div + div {
  border-top: 1px dashed var(--ice);
}
body.rigon #preflight b {
  font-weight: 400;
  color: var(--basalt);
}
body.rigon #preflight .no {
  color: var(--rime);
}
body.rigon #preflight .yes {
  color: var(--moss);
}
body.rigon #help {
  background: rgba(247, 248, 250, 0.96);
  backdrop-filter: blur(8px);
  align-items: flex-start;
  justify-content: flex-start;
  padding: clamp(40px, 8vh, 90px) var(--gut);
  text-align: left;
  overflow-y: auto;
}
body.rigon #help .cols {
  display: grid;
  gap: clamp(20px, 3vw, 54px);
  max-width: 1100px;
  width: 100%;
}
@media (min-width: 800px) {
  body.rigon #help .cols {
    grid-template-columns: repeat(4, 1fr);
  }
}
body.rigon #help h4 {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
body.rigon #help dl div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 7px 0;
  border-bottom: var(--rule);
  font-family: var(--mono);
  font-size: 11px;
}
body.rigon #help dt {
  color: var(--basalt);
}
body.rigon #help dd {
  color: var(--steam);
  text-align: right;
}
body.rigon #help .close {
  position: fixed;
  top: 18px;
  right: var(--gut);
}
@media (prefers-reduced-motion: reduce) {
}
/* ── snow-rig.html ───────────────────────────────────────────────────
   The bench version of the same rig: the instrument surface with no landing
   page in front of it. It wears body.rigon permanently, so everything above
   applies, plus the boot veil the hosted page replaced with a button. */
body.standalone #boot {
  display: flex !important;
}
body.standalone #boot.gone {
  display: none !important;
}
body.standalone #rigStop,
body.standalone .rigHit {
  display: none !important;
}

/* ─────────── phone ───────────
   Below 700px the vw half of every clamp() has bottomed out, so the three
   spacing tokens are set outright. This is the whole of the mobile spacing
   system: one gutter, one rhythm, one step — applied to every section,
   because the sections all read them. */
@media (max-width: 700px) {
  :root {
    --gut: 26px;
    --bay: 92px;
    --step: 20px;
  }
  .hero {
    padding-block: 120px var(--bay);
  }
  h1 {
    max-width: 11ch;
  }
  .split {
    gap: 34px;
  }
  .manifesto {
    margin-left: 0;
  }
  /* the plate wants the full column on a phone, and the gutter around it */
  .wornFig img {
    max-width: 100%;
  }
}
@media (max-width: 360px) {
  :root {
    --gut: 22px;
    --bay: 78px;
  }
}