/* Simba Monitors. One stylesheet, no build step.
   World: matte board stock, one flat blue ink, traces and ring vias, 45-degree chamfers. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Big Shoulders";
  src: url("../fonts/big-shoulders-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("../fonts/martian-mono-var.woff2") format("woff2");
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
}
/* Metric-matched local fallbacks, so the swap does not move the layout.
   The size-adjust values were measured against the real faces in Chrome. */
@font-face { font-family: "Big Shoulders Fallback"; src: local("Impact"); size-adjust: 95.7%; }
@font-face { font-family: "Big Shoulders Fallback 2"; src: local("Arial Narrow Bold"), local("ArialNarrow-Bold"); size-adjust: 84.8%; }
@font-face { font-family: "Archivo Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 98.1%; }
@font-face { font-family: "Martian Mono Fallback"; src: local("Menlo"), local("Menlo Regular"), local("Courier New"); size-adjust: 107.9%; }

/* ---------- tokens ---------- */
:root {
  --bg: #0b0d10;          /* board stock */
  --panel: #101419;       /* raised board panels */
  --panel-2: #161c22;     /* inputs, lane heads */
  --line: #212a33;        /* hairlines */
  --line-strong: #303c47;
  --line-control: #5a6876;  /* the edge of a control that has no text: 3:1 on the board */
  --ink: #eaf0f4;         /* text */
  --ink-2: #a8b5bf;       /* secondary text */
  --ink-3: #7d8b97;       /* labels, column heads */
  --blue: #2aa9e0;        /* the one accent, the logo's ink */
  --blue-hi: #6cc6ee;     /* hover, focus ring */
  --blue-lo: #164a63;     /* dim fills */
  --blue-ghost: #0f2733;  /* unlit cells, ghost traces */
  --on-blue: #04141d;     /* text on a blue fill */

  --display: "Big Shoulders", "Big Shoulders Fallback", "Big Shoulders Fallback 2", "Arial Narrow", sans-serif;
  --text: "Archivo", "Archivo Fallback", system-ui, sans-serif;
  --mono: "Martian Mono", "Martian Mono Fallback", ui-monospace, Menlo, monospace;

  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap: 1.5rem;
  --head-h: 4rem;
  --h2: clamp(2.25rem, 4vw, 3.5rem);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  background: var(--bg);
  scrollbar-color: var(--line-strong) var(--bg);
  scroll-padding-top: calc(var(--head-h) + 1rem);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1.0625rem/1.55 var(--text);
  accent-color: var(--blue);
  caret-color: var(--blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

/* The field and the grain are the bare page background: under the header, the content and the footer.
   The field starts below the sticky header. */
#circuit {
  position: fixed;
  top: var(--head-h);
  left: 0;
  width: 100%;
  height: calc(100% - var(--head-h));
  z-index: 0;
  pointer-events: none;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .9 0 0 0 -.4'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
main, .site-foot { position: relative; z-index: 1; }

::selection { background: var(--blue); color: var(--on-blue); }

:focus-visible { outline: 2px solid var(--blue-hi); outline-offset: 3px; }

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
img, svg { display: block; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button, label { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
p, li, dd, td, figcaption { text-wrap: pretty; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--display);
  font-optical-sizing: auto;
  text-transform: uppercase;
  text-wrap: balance;
}
h1, h2 { font-weight: 900; line-height: 0.92; letter-spacing: 0.005em; }
h2 { font-size: var(--h2); }
h3 { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; line-height: 0.96; letter-spacing: 0.01em; }
h4 { font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }

code, .num {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.875em;
  font-weight: 500;
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}

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

.wrap { width: min(100% - 2 * var(--pad), 78rem); margin-inline: auto; }

.section { padding-block: clamp(5rem, 11vw, 9rem); }

.body { max-width: 62ch; color: var(--ink-2); }
h3 + .body { margin-top: 1rem; text-wrap: balance; }
.caption, .note, .hint { color: var(--ink-3); font-size: 0.875rem; }
.caption { margin-top: 0.875rem; }

.skip {
  position: absolute;
  left: var(--pad);
  top: -5rem;
  z-index: 60;
  padding: 0.75rem 1rem;
  background: var(--ink);
  color: var(--bg);
  font-weight: 600;
}
.skip:focus { top: 0.5rem; }

/* ---------- the mark ---------- */
.mark { display: block; color: var(--blue); }
.lion-ink { position: absolute; width: 0; height: 0; } /* holds the gradient every lion on the page is filled with */
.mark > svg { width: 100%; height: 100%; overflow: visible; }
.mark .face, .mark .via, .mark .via-ring { transform-box: fill-box; transform-origin: center; }
.mark .trace-pulse { fill: none; stroke: var(--ink); stroke-width: 6; }
.mark .via-ring { fill: none; stroke: var(--blue-hi); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex;
  min-height: 3.25rem;
  color: var(--on-blue);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn__face {
  --c: 8px;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  background: var(--blue);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.btn:active .btn__face { transform: translateY(1px); }
.btn--sm { min-height: 2.75rem; font-size: 0.9375rem; }
.btn--sm .btn__face { padding: 0 1.125rem; }

.textlink {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--blue);
  text-underline-offset: 0.3em;
}

.ctl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
}
.ctl:active { transform: translateY(1px); }

/* Status plates: real status, in the board's own grammar. */
.plate {
  flex: none;
  display: inline-block;
  padding: 0.3125rem 0.5rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.plate--live { background: var(--blue); color: var(--on-blue); }
.plate--soon { padding: calc(0.3125rem - 1px) calc(0.5rem - 1px); border: 1px solid var(--line-strong); color: var(--ink-3); }

/* ---------- panel: chamfer on the top-left and bottom-right ---------- */
.panel {
  --c: 14px;
  position: relative;
  padding: 1px;
  background: var(--line-strong);
  clip-path: polygon(var(--c) 0, 100% 0, 100% calc(100% - var(--c)), calc(100% - var(--c)) 100%, 0 100%, 0 var(--c));
}
.panel__face {
  --ci: calc(var(--c) - 0.586px);
  height: 100%;
  background: var(--panel);
  clip-path: polygon(var(--ci) 0, 100% 0, 100% calc(100% - var(--ci)), calc(100% - var(--ci)) 100%, 0 100%, 0 var(--ci));
}

/* ---------- header ---------- */
.head-sentinel { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; }

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--head-h);
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.site-head.is-scrolled { border-bottom-color: var(--line); }
.site-head__in { display: flex; align-items: center; gap: 2rem; height: 100%; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-right: auto;
  text-decoration: none;
  color: var(--ink);
}
.brand .mark { flex: none; width: 1.875rem; height: 1.875rem; }
.brand__word {
  font-family: var(--display);
  font-size: 1.3125rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__word b { font-weight: 900; }
.brand__word span { font-weight: 500; }

.nav ul { display: flex; gap: 0.25rem; }
.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.75rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

/* ---------- hero ---------- */
.hero {
  --lion: 10.5rem;
  --lane-h: 2.25rem;
  display: grid;
  align-content: center;
  min-height: min(100svh - var(--head-h), 54rem);
  padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 6vw, 4.5rem);
}
.hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.hero__copy {
  grid-column: 1 / span 5;
  container-type: inline-size;
  padding-top: calc(var(--lion) / 2 - 0.25rem);
}
/* The widest line, COOK GROUP., measures 4.87em (4.95em at phone sizes). 19cqi keeps it inside the column with slack,
   and 16svh keeps the sentence under it on the first screen of a phone held sideways.
   The lines are blocks without nowrap: with another font or wider spacing they wrap at the word gap. */
.hero h1 { font-size: clamp(2.5rem, 6.4vw, 6rem); }
@supports (font-size: 1cqi) and (height: 1svh) {
  .hero h1 { font-size: clamp(2.5rem, min(19cqi, 16svh), 6rem); }
}
.h1__l { display: block; }
.h1__l--blue { color: var(--blue); }

.hero__lede { margin-top: 1.5rem; max-width: 30rem; color: var(--ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }

/* ---------- the board: three lanes, one lion ---------- */
.board {
  --lion-x: 0.5rem;
  --gutter: 3.5rem;
  position: relative;
  grid-column: 6 / span 7;
  padding-top: calc(var(--lion) / 2);
  container: board / inline-size;
}
.board .panel__face {
  --row-h: 4rem;      /* a title line and a line of cells */
  --cmd-h: 2.5rem;
  --reply-h: var(--row-h);
}
.board__lion {
  position: absolute;
  top: 0;
  left: var(--lion-x);
  z-index: 2;
  width: var(--lion);
  height: var(--lion);
  pointer-events: none;
}
.board__wires {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.wire { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-dasharray: 2 4; }
.wire--live { stroke-dasharray: none; }
.wire-pulse { fill: none; stroke: var(--blue-hi); stroke-width: 2; opacity: 0; }
.wire-via { fill: var(--bg); stroke: var(--blue); stroke-width: 1.5; }
.wire-via--live { fill: var(--blue); }
.wire-hot { fill: var(--blue-hi); stroke: var(--blue-hi); stroke-width: 1.5; opacity: 0; }

.board__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: calc(var(--lion) / 2 + 1.25rem);
  padding: 0 0.75rem 0 calc(var(--lion-x) + var(--lion) + 1.25rem);
}
.board__title { font-size: 1.25rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; }
.tag {
  flex: none;
  padding: 0.3125rem 0.5rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lane__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  min-height: var(--lane-h);
  padding: 0 0.75rem 0 var(--gutter);
  background: var(--bg);
  border-block: 1px solid var(--line);
}
.lane__name {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  line-height: 1;
  letter-spacing: 0.06em;
  text-wrap: nowrap;
}
.lane--soon .lane__name { color: var(--ink-2); }
/* The lane names lead to the chapters: under 820px the menu is hidden and this is the way there. The hit area is 44px tall. */
.lane__name a { position: relative; text-decoration-thickness: 1px; text-decoration-color: var(--blue); text-underline-offset: 0.3em; }
.lane__name a::after { content: ""; position: absolute; inset: -1rem -0.5rem; }
.lane--soon .lane__name a { text-decoration-color: var(--ink-3); }
.lane__head .plate { padding-block: 0.25rem; }
.lane--soon .lane__head .plate { padding-block: calc(0.25rem - 1px); }

.lane__rows { min-height: calc(2 * var(--row-h)); overflow: hidden; }
.lane--stock .lane__rows { min-height: calc(var(--cmd-h) + var(--reply-h)); }

/* A row is two lines by default: the title, then its cells. */
.row {
  display: grid;
  grid-template-columns: auto auto auto minmax(0, 1fr);
  column-gap: 1rem;
  row-gap: 0.3125rem;
  align-content: center;
  align-items: center;
  min-height: var(--row-h);
  padding: 0 0.75rem 0 var(--gutter);
}
.row + .row { border-top: 1px solid var(--line); }

.c { min-width: 0; white-space: nowrap; }
.c--title { grid-column: 1 / -1; white-space: normal; font-size: 0.9375rem; font-weight: 500; line-height: 1.2; text-wrap: balance; }
.c--product, .c--event, .c--region, .c--time, .c--detail, .c--age, .c--status, .zone, .count, .cmd, .token {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  font-variant-numeric: tabular-nums;
}
.c--product, .c--detail, .count { color: var(--ink-2); }
.c--event { color: var(--ink); }
.c--region { display: flex; gap: 3px; }
.zone {
  padding: 0.1875rem 0.25rem;
  border: 1px solid var(--line-strong);
  color: var(--ink-2);
  line-height: 1;
  white-space: nowrap;
}
.c--time { color: var(--ink); }
.c--age { color: var(--ink-3); }
/* Right-aligned, but never over its neighbour: if a line of cells runs out of room, the last one starts after it. */
.c--status, .c--age { justify-self: end; justify-self: safe end; }

.status { display: inline-block; padding: 0.25rem 0; line-height: 1; color: var(--ink-2); }
.status--just { padding-inline: 0.375rem; background: var(--blue); color: var(--on-blue); }
.status--soon { color: var(--blue); }
.status--upcoming, .status--closed { color: var(--ink-3); }
.row.is-closed .c--title, .row.is-closed .c--time { color: var(--ink-3); }

/* Lane 3: a command line, then the reply. */
.row--cmd { display: flex; gap: 0.5rem; min-height: var(--cmd-h); }
.cmd { color: var(--ink); }
.token { padding: 0.1875rem 0.375rem; border: 1px solid var(--line-strong); color: var(--ink-2); line-height: 1; }
.row--reply { grid-template-columns: minmax(0, 1fr); min-height: var(--reply-h); }
.c--cells { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.375rem; white-space: normal; }
.count { margin-right: 0.375rem; line-height: 1; white-space: nowrap; }

.board__foot { margin: 0; padding: 0.625rem 1.5rem 0.75rem var(--gutter); border-top: 1px solid var(--line); }

@supports (height: 1svh) {
  /* Short screens shrink the lion, the lane heads and the rows before any type gets smaller. */
  .hero {
    --lion: clamp(8rem, 19svh, 10.5rem);
    --lane-h: clamp(1.875rem, 4svh, 2.25rem);
    padding-block: clamp(1.25rem, 4svh, 3rem) clamp(1.5rem, 6svh, 4.5rem);
  }
  .board .panel__face { --row-h: clamp(3.375rem, 7.4svh, 4rem); }
}

/* A wide board sets each lane in columns. A long title takes two lines; no title is ever cut. */
@media (min-width: 51.25rem) {
  @container board (min-width: 44rem) {
    .board .panel__face { --row-h: 3.25rem; }
    @supports (height: 1svh) {
      .board .panel__face { --row-h: clamp(2.875rem, 6svh, 3.25rem); }
    }
    .lane--raffles .row { grid-template-columns: minmax(0, 1fr) 4.25rem 5.5rem 5.5rem minmax(6.25rem, auto); }
    .lane--web .row { grid-template-columns: minmax(0, 1fr) 6.25rem 2.25rem minmax(9rem, auto) minmax(4rem, auto); }
    .row--reply { grid-template-columns: minmax(7.5rem, 1fr) auto; }
    .c--title { grid-column: auto; }
    .c--time { text-align: right; }
    .c--status { justify-self: start; }
  }
}
/* Between the two, the longest stock reply keeps its cells on one line by setting them narrower. */
@container board (max-width: 36.99rem) {
  .c--cells .zone, .c--cells .count { font-stretch: 75%; }
}
/* A narrow board: a long title wraps, and the stock reply wraps its size cells. */
@container board (max-width: 32.99rem) {
  .board .panel__face { --row-h: 5rem; --cmd-h: 2.75rem; --reply-h: 6.5rem; }
  .board__top { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.5rem; }
  .row { column-gap: 0.625rem; }
}
@container board (max-width: 21.9rem) {
  .row { column-gap: 0.5rem; }
  .lane__head { gap: 0.5rem; }
  .lane__name, .lane__head .plate { font-stretch: 75%; letter-spacing: 0.02em; }
  .c--product, .c--event, .c--region, .c--time, .c--detail, .c--age, .c--status, .zone, .count, .cmd, .token { font-stretch: 75%; }
}
/* The smallest phones: each line of cells drops its least needed one. */
@container board (max-width: 20.9rem) {
  .lane__head, .row { padding-left: 2.25rem; padding-right: 0.5rem; }
  .lane--raffles .c--product, .lane--web .c--region, .c--cells > :nth-child(n + 6):nth-last-child(2) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .lane--raffles .row, .lane--web .row { grid-template-columns: auto auto minmax(0, 1fr); }
}

/* ---------- responsive: hero ---------- */
@media (max-width: 68.75rem) {
  .hero { --lion: 8rem; }
  .board { --gutter: 3rem; }
}
/* Under 1024px the hero stacks, so the headline keeps its size on tablets. */
@media (max-width: 63.99rem) {
  .hero { display: block; min-height: 0; }
  .hero__grid { column-gap: 0; }
  .hero__copy { grid-column: 1 / -1; padding-top: 0; }
  .board { grid-column: 1 / -1; margin-top: 2.25rem; }
}
@media (max-width: 51.24rem) {
  .hero { --lion: 7rem; }
  .board { --gutter: 2.5rem; --lion-x: 0.375rem; }
  .board__top { min-height: calc(var(--lion) / 2 + 1rem); }
  .lane__head, .row { padding-right: 0.625rem; }
  .nav { display: none; }
  .site-head__in { gap: 0.75rem; }
  .brand { gap: 0.5rem; }
  .brand__word { font-size: 1.0625rem; letter-spacing: 0.06em; }
  .btn--sm { font-size: 0.875rem; }
  .btn--sm .btn__face { padding: 0 0.875rem; }
}
@media (max-width: 21.5rem) {
  .brand__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- section arrivals ----------
   The default state is fully visible. main.js arms what is below the fold only when motion is allowed. */
.armed .wipe { clip-path: inset(-0.2em 100% -0.2em 0); }
.armed.is-in .wipe { clip-path: inset(-0.2em -2% -0.2em 0); transition: clip-path 250ms var(--ease); }

/* ---------- service chapters: one header pattern ---------- */
.chapter { padding-bottom: clamp(4.5rem, 10vw, 8rem); }
.chapter__head {
  --head-pad: clamp(2.25rem, 5vw, 3.75rem);
  --indent: 0rem;
  position: relative;
  padding-block: var(--head-pad);
  background: var(--panel);
  border-block: 1px solid var(--line);
}
.chapter__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.625rem 1rem; padding-left: var(--indent); }
.chapter__sum { max-width: 62ch; margin-top: 1rem; color: var(--ink-2); }
/* The trace enters from the edge of the page and ends in a via just before the name. */
.chapter__trace {
  position: absolute;
  left: 0;
  top: calc(var(--head-pad) + var(--h2) * 0.47 - 0.375rem);
  width: calc(max(var(--pad), (100% - 78rem) / 2) + var(--indent) - 0.625rem);
  height: 0.75rem;
  pointer-events: none;
}
.chapter__trace::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0.75rem;
  top: calc(50% - 0.75px);
  border-top: 1.5px dashed var(--blue);
}
.chapter__trace svg { position: absolute; right: 0; top: 0; width: 0.75rem; height: 0.75rem; overflow: visible; }
.chapter__trace circle { fill: var(--panel); stroke: var(--blue); stroke-width: 1.5; }
.chapter--live .chapter__trace::before { border-top-style: solid; }
.chapter--live .chapter__trace circle { fill: var(--blue); }

.armed .chapter__trace::before { clip-path: inset(-2px 100% -2px 0); }
.armed .chapter__trace svg, .armed .chapter__name .plate { opacity: 0; }
.armed.is-in .chapter__trace::before { clip-path: inset(-2px 0 -2px 0); transition: clip-path 320ms linear; }
.armed.is-in .chapter__trace svg { opacity: 1; transition: opacity 120ms steps(2, jump-end) 320ms; }
.chapter__head.armed.is-in .wipe { transition-delay: 320ms; }
.armed.is-in .chapter__name .plate { opacity: 1; transition: opacity 120ms steps(2, jump-end) 570ms; }

.block { padding-top: clamp(3.5rem, 7vw, 6rem); }

/* A replica beside its text and controls. In the source the order is text, replica, controls,
   so on a phone a control sits right under the thing it changes. */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
  align-items: start;
}
.split__text, .split__ctrl { grid-column: 8 / span 5; }
.split__text { grid-row: 1; }
.split__ctrl { grid-row: 2; margin-top: 2.25rem; }
.split__shot { grid-column: 1 / span 7; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 1.5rem); }
.split--right .split__text, .split--right .split__ctrl { grid-column: 1 / span 5; }
.split--right .split__shot { grid-column: 6 / span 7; }
@media (max-height: 40rem) {
  .split__shot { position: static; }
}

.controls { display: grid; gap: 1.5rem; }
.label { display: block; margin-bottom: 0.5rem; color: var(--ink); font-size: 0.875rem; font-weight: 600; }
.note { margin-top: 0.5rem; }
.input {
  width: 100%;
  height: 2.75rem;
  padding: 0 0.75rem;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
}

.swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; margin-left: -0.375rem; }
.swatch { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; cursor: pointer; }
.swatch__chip { width: 2rem; height: 2rem; }
.swatch--blue .swatch__chip { background: #2aa9e0; }
.swatch--green .swatch__chip { background: #23a55a; }
.swatch--amber .swatch__chip { background: #f0b232; }
.swatch--red .swatch__chip { background: #e5484d; }
.swatch--violet .swatch__chip { background: #a78bfa; }
.swatch--white .swatch__chip { background: #eaf0f4; }
.swatch input:checked + .swatch__chip,
.swatch.is-on input[type="color"] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink); }
.swatch input:focus-visible + .swatch__chip { outline: 2px solid var(--blue-hi); outline-offset: 6px; }
/* The colour well says what it is. */
.swatch--custom { display: inline-flex; gap: 0.5rem; width: auto; padding: 0 0.375rem; color: var(--ink-2); font-size: 0.875rem; font-weight: 600; }
.swatch input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2rem;
  height: 2rem;
  padding: 0;
  background: var(--panel-2);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  cursor: pointer;
}
.swatch input[type="color"]:focus-visible { outline-offset: 6px; }
.swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 6px; }
.swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.swatch input[type="color"]::-moz-color-swatch { border: 6px solid var(--panel-2); border-radius: 0; }

.sr-only:focus-visible + .ctl { outline: 2px solid var(--blue-hi); outline-offset: 3px; }

.seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 100%; border: 1px solid var(--line-strong); }
.seg__opt { cursor: pointer; }
.seg__opt span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  color: var(--ink-2);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
}
.seg__opt + .seg__opt span { border-left: 1px solid var(--line-strong); }
.seg__opt input:checked + span { background: var(--blue); color: var(--on-blue); }
.seg__opt input:focus-visible + span { position: relative; z-index: 1; outline: 2px solid var(--blue-hi); outline-offset: 3px; }
.split__ctrl > .body { margin-top: 1.25rem; }

.facts { border-bottom: 1px solid var(--line); }
.facts li { padding: 0.875rem 0; border-top: 1px solid var(--line); color: var(--ink-2); }
.controls + .facts, h3 + .facts { margin-top: 2.25rem; }

/* The Discord replicas: Discord's own dark theme, the only place its colours and radii appear. */
.dc {
  --brand: #2aa9e0;
  --brand-ink: #04141d;
  container: dc / inline-size;
  background: #313338;
  color: #dbdee1;
  font-family: "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.375;
  text-wrap: wrap;
}
.dc p, .dc dd { text-wrap: wrap; }
.dc__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;
  padding: 0 1.25rem;
  border-bottom: 1px solid #232428;
  color: #f2f3f5;
  font-weight: 600;
}
.dc__hash { color: #80848e; font-size: 1.5rem; font-weight: 400; line-height: 1; }
/* "Member used /stock": the slim line above a reply, with the spine that ties it to the message. */
.dc__used {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 1.25rem 1.25rem -0.875rem 4.75rem;
  color: #949ba4;
  font-size: 0.875rem;
  line-height: 1.125rem;
}
.dc__used::before {
  content: "";
  position: absolute;
  left: -2.25rem;
  top: 50%;
  width: 2rem;
  height: 0.75rem;
  border: solid #4e5058;
  border-width: 2px 0 0 2px;
  border-radius: 6px 0 0 0;
}
.dc__mini { flex: none; width: 1rem; height: 1rem; margin-right: 0.125rem; border-radius: 50%; background: #5865f2; }
.dc__member { color: #b5bac1; font-weight: 500; }
.dc__msg { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 1.25rem 1.75rem; }
.dc__avatar, .dc__ficon {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 700;
  line-height: 1;
}
.dc__avatar { width: 2.5rem; height: 2.5rem; margin-top: 0.125rem; font-size: 1.125rem; }
.dc__ficon { flex: none; width: 1.25rem; height: 1.25rem; font-size: 0.6875rem; }
.dc__avatar img, .dc__ficon img { width: 100%; height: 100%; object-fit: cover; }
.dc__avatar--simba { background: #0b0d10; color: #2aa9e0; }
.dc__avatar--simba svg { width: 72%; height: 72%; }
.dc__head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.5rem; }
.dc__name { min-width: 0; color: #f2f3f5; font-weight: 500; overflow-wrap: anywhere; }
.dc__app {
  align-self: center;
  padding: 0 0.3rem;
  border-radius: 3px;
  background: #5865f2;
  color: #fff;
  font-size: 0.625rem;
  font-weight: 600;
  line-height: 0.9375rem;
}
.dc__time { color: #949ba4; font-size: 0.75rem; }
.dc__embed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  max-width: 32.5rem;
  margin-top: 0.375rem;
  padding: 0.5rem 1rem 1rem 0.75rem;
  border-left: 4px solid var(--bar, var(--brand));
  border-radius: 4px;
  background: #2b2d31;
}
.dc[data-replica="websites"] .dc__embed { --bar: #3498db; }
/* A near-black bar needs a lighter edge to show on the embed. */
.dc[data-replica="stock"] .dc__embed { --bar: #111111; box-shadow: -1px 0 0 #4e5058, inset 1px 0 0 #4e5058; }
.dc__author { grid-column: 1; margin-top: 0.5rem; color: #f2f3f5; font-size: 0.875rem; font-weight: 600; }
.dc__title { grid-column: 1; margin-top: 0.5rem; color: #00a8fc; font-weight: 600; }
.dc__desc { grid-column: 1; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.125rem; }
.dc b { color: #f2f3f5; font-weight: 600; }
.dc__sq { display: inline-block; width: 0.75rem; height: 0.75rem; margin-right: 0.375rem; border-radius: 2px; vertical-align: -1px; }
.dc__sq--open { background: #23a55a; }
.dc__sq--soon { background: #f0b232; }
.dc__sq--upcoming { background: #5865f2; }
.dc__fields { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.125rem; }
.dc__thumb:not([hidden]) ~ .dc__fields { grid-column: 1; }
.dc__field--wide { grid-column: 1 / -1; }
.dc__fields dt { margin-bottom: 0.125rem; color: #f2f3f5; font-weight: 600; }
.dc__line { display: block; }
.dc__link { color: #00a8fc; }
.dc__dot { display: inline-block; width: 0.5rem; height: 0.5rem; margin-right: 0.4375rem; border-radius: 50%; vertical-align: 1px; }
.dc__dot--green { background: #23a55a; }
.dc__dot--amber { background: #f0b232; }
.dc__dot--red { background: #f23f43; }
.dc code { padding: 0 0.25rem; border-radius: 3px; background: #1e1f22; color: #dbdee1; font: 0.85em/1.3 ui-monospace, Menlo, Consolas, monospace; }
.dc__thumb { grid-column: 2; grid-row: 1 / span 3; width: 5rem; height: 5rem; margin-top: 0.5rem; border-radius: 4px; background: #1e1f22; color: #dbdee1; }
.dc__thumb svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: miter; }
.dc__footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.5rem; margin-top: 0.75rem; font-size: 0.75rem; font-weight: 500; }
.dc__footer [data-dc-footer] { min-width: 0; overflow-wrap: anywhere; }
.dc__footer > :last-child:not(:first-child) { flex: none; }
/* A plain text message (Early info). Empty until a sample fills it. */
.dc__text { display: grid; gap: 0.125rem; max-width: 32.5rem; }
.dc__text:not(:empty) { margin-top: 0.25rem; }
.dc__text p { min-width: 0; }
.dc__text .dc__li { position: relative; padding-left: 1.125rem; }
.dc__text .dc__li::before { content: ""; position: absolute; left: 0.25rem; top: 0.5625rem; width: 0.3125rem; height: 0.3125rem; border-radius: 50%; background: #dbdee1; }
.dc__text p:has(.dc__icon) { margin-top: 0.5rem; }
.dc__icon { display: inline-block; width: 1rem; height: 1rem; margin-right: 0.375rem; fill: none; stroke: #b5bac1; stroke-width: 1.5; vertical-align: -0.1875rem; }
.dc__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2rem;
  margin-top: 0.5rem;
  padding: 0 1rem;
  border-radius: 4px;
  background: #4e5058;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: default;
}
.dc__btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.5; }
@container dc (max-width: 30rem) {
  .dc__bar { padding: 0 0.875rem; }
  .dc__used { margin: 1rem 0.75rem -0.75rem 3.375rem; }
  .dc__used::before { left: -1.625rem; width: 1.375rem; }
  .dc__msg { grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.625rem; padding: 1rem 0.75rem 1.25rem; }
  .dc__avatar { width: 2rem; height: 2rem; font-size: 0.9375rem; }
  .dc__embed { column-gap: 0.75rem; padding-right: 0.75rem; }
  .dc__fields, .dc__thumb:not([hidden]) ~ .dc__fields { grid-column: 1 / -1; font-size: 0.8125rem; }
  .dc__thumb { grid-row: 1 / span 2; width: 4rem; height: 4rem; }
  .dc__fields > div:has(.dc__line) { grid-column: 1 / -1; }
}
@container dc (max-width: 19rem) {
  .dc__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dc__thumb { width: 3rem; height: 3rem; }
}

/* ---------- routing: the matrix ---------- */
.routing { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.routing__text, .routing__matrix, .routing__more { grid-column: 1 / span 8; }
.routing__matrix { margin-top: 2.25rem; }
.routing__lands { grid-column: 9 / span 4; grid-row: 2 / span 2; margin-top: 2.25rem; }

.presets { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chan {
  min-height: 2.75rem;
  padding: 0 0.875rem;
  background: none;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-stretch: 87.5%;
}
.chan:active { transform: translateY(1px); }
.chan[aria-pressed="true"] { background: var(--panel-2); border-color: var(--blue); color: var(--ink); }
.chan__hash { color: var(--ink-3); }
.chan[aria-pressed="true"] .chan__hash { color: var(--blue); }

/* A solid ground, so the field's traces do not run through the cells. */
.matrix {
  width: min(100% + 0.75rem, 46.75rem);
  margin: 1.25rem 0 0 -0.375rem;
  background: var(--bg);
  border-collapse: separate;
  border-spacing: 0.375rem;
  table-layout: fixed;
}
.matrix td { padding: 0; }
.matrix thead th, .matrix thead td { padding: 0.125rem 0; }
.matrix thead th {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  text-align: center;
  white-space: nowrap;
}
.matrix abbr { text-decoration: none; }
.matrix .matrix__corner { width: 5.5rem; }
.matrix tbody th { color: var(--ink); font-size: 0.9375rem; font-weight: 600; text-align: left; }
/* A cell is a switch. Unlit, it shows an empty pad; lit, it is a solid blue square. */
.cell {
  position: relative;
  display: block;
  width: 100%;
  min-height: 2.75rem;
  aspect-ratio: 1;
  padding: 0;
  background: var(--blue-ghost);
  border: 1px solid var(--line-control);
  border-radius: 0;
}
.cell::before {
  content: "";
  position: absolute;
  inset: calc(50% - 0.1875rem);
  background: var(--line-strong);
}
.cell::after {
  content: "";
  position: absolute;
  inset: -1px;
  background: var(--blue);
  opacity: 0;
  transition: opacity 120ms steps(2, jump-end);
}
.cell[aria-pressed="true"]::after { opacity: 1; }
.cell:focus-visible { z-index: 1; }
.cell[aria-pressed="false"]:focus-visible { border-color: var(--blue); }
.cell[aria-pressed="false"]:focus-visible::before { inset: calc(50% - 0.3125rem); background: var(--blue); }
.cell:active { transform: translateY(1px); }
.hint { margin-top: 0.625rem; }

.notes { display: grid; gap: 0.5rem; max-width: 46rem; margin-top: 2rem; color: var(--ink-2); font-size: 0.9375rem; }
.legend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem var(--gap); max-width: 46rem; margin-top: 1.5rem; font-size: 0.875rem; }
.legend div { display: flex; align-items: baseline; gap: 0.625rem; }
.legend .legend__wide { grid-column: 1 / -1; }
.legend dt { flex: none; min-width: 2.75rem; color: var(--ink); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; font-stretch: 87.5%; }
.legend dd { color: var(--ink-2); }

.lands__count { margin-top: 0.25rem; color: var(--ink-2); font-size: 0.9375rem; }
.lands { margin-top: 1rem; border-top: 1px solid var(--line); }
.lands__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
  line-height: 1.25;
}
.lands__title { min-width: 0; font-weight: 500; }
.lands__meta { display: flex; flex: none; align-items: center; gap: 3px; }
.lands__product { margin-right: 0.25rem; color: var(--ink-2); font-family: var(--mono); font-size: 0.75rem; font-weight: 500; font-stretch: 87.5%; }
.lands__item:not(.is-in) .lands__title { color: var(--ink-3); font-weight: 400; text-decoration: line-through; text-decoration-thickness: 1px; }
.lands__item:not(.is-in) .lands__product, .lands__item:not(.is-in) .zone { color: var(--ink-3); border-color: var(--line); }

/* ---------- websites: the watchlist, a table in the board's grammar ---------- */
.watch .panel { margin-top: 2rem; }
.watch__table { width: 100%; border-collapse: collapse; text-align: left; }
.watch__table th, .watch__table td { padding: 0.875rem 1rem; vertical-align: baseline; }
.watch__table thead th {
  padding-block: 0.625rem;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: 87.5%;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.watch__table tbody tr { border-top: 1px solid var(--line); }
.watch__table tbody th { width: 26%; color: var(--ink); font-size: 1rem; font-weight: 600; }
.watch__table td { color: var(--ink-2); font-size: 0.9375rem; }
/* Where a source is watched, under its name. */
.watch__table .watch__n { display: block; margin-top: 0.25rem; color: var(--ink-2); font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; font-stretch: 87.5%; white-space: nowrap; }
.watch__table td:nth-child(2) { width: 31%; }
.watch__table th:first-child { padding-left: 1.5rem; }
.watch__table td:last-child, .watch__table thead th:last-child { padding-right: 1.5rem; }

/* ---------- setup: a trace through three vias ---------- */
.setup__sum { margin-top: 1rem; }
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gap);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.steps::before {
  content: "";
  position: absolute;
  top: calc(0.625rem - 0.75px);
  left: 0.625rem;
  right: 0;
  height: 1.5px;
  background: var(--blue-lo);
  transform-origin: left center;
}
.steps::after { content: ""; position: absolute; top: calc(0.625rem - 3px); right: 0; width: 6px; height: 6px; background: var(--blue-lo); }
.step { position: relative; padding-right: 1.5rem; }
.step__via { width: 1.25rem; height: 1.25rem; overflow: visible; }
.step__via circle { fill: var(--bg); stroke-width: 1.5; }
.step__ring { stroke: var(--blue-lo); }
.step__lit { stroke: var(--blue); }
.step h3 { margin-top: 1.5rem; font-size: 1.5rem; }
.step p { max-width: 34ch; margin-top: 0.625rem; color: var(--ink-2); }

.steps.armed::before { transform: scaleX(0); }
.steps.armed::after, .steps.armed .step__lit { opacity: 0; }
.steps.armed.is-in::before { transform: none; transition: transform 720ms linear; }
.steps.armed.is-in .step__lit, .steps.armed.is-in::after { opacity: 1; transition: opacity 120ms steps(2, jump-end); }
.steps.armed.is-in .step:nth-child(2) .step__lit { transition-delay: 240ms; }
.steps.armed.is-in .step:nth-child(3) .step__lit { transition-delay: 480ms; }
.steps.armed.is-in::after { transition-delay: 720ms; }

.setup__bot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 2.5rem; align-items: start; margin-top: clamp(3.5rem, 7vw, 6rem); }
.setup__claim { grid-column: 1 / span 6; }
.setup__claim p { margin-top: 1rem; color: var(--ink-2); max-width: 62ch; }
/* The bot's commands: the command, then what it does. */
.setup__cmds { grid-column: 8 / span 5; }
.setup__cmds li { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: 1rem; align-items: baseline; }
.setup__cmds code { color: var(--ink); }
.setup__cmds .plate { margin-left: 0.375rem; vertical-align: 0.0625rem; }

/* ---------- close ---------- */
.close__in { display: grid; justify-items: center; text-align: center; }
.close__lion { width: 13.75rem; height: 13.75rem; }
.close h2 { margin-top: 2.5rem; font-size: clamp(2.75rem, 6vw, 4.5rem); }
.close .body { margin-top: 1rem; }
.close .btn { margin-top: 2rem; }

/* ---------- footer ---------- */
.site-foot { padding-block: 2.5rem 3rem; background: var(--bg); border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.875rem; }
.site-foot__in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 1.5rem; align-items: start; }
.site-foot__a { grid-column: 1 / span 5; display: grid; gap: 0.5rem; }
.site-foot__b { grid-column: 8 / span 5; display: grid; gap: 1rem; justify-items: start; }
.site-foot p { text-wrap: balance; }
.ctl--sm { font-size: 0.875rem; }

/* ---------- 404 ---------- */
.lost { display: grid; align-content: center; min-height: calc(100svh - var(--head-h) - 11rem); padding-block: clamp(3rem, 8vw, 6rem); }
.lost__lion { width: 8.75rem; height: 8.75rem; }
.lost h1 { max-width: 9.5em; margin-top: 2rem; font-size: clamp(2.75rem, 8vw, 6rem); }
.lost__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.75rem; margin-top: 2rem; }

/* ---------- responsive: sections ---------- */
@media (max-width: 68.75rem) {
  .routing { column-gap: 0; }
  .routing__text, .routing__matrix, .routing__more, .routing__lands { grid-column: 1 / -1; grid-row: auto; }
  .lands { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); }
  .setup__claim { grid-column: 1 / span 6; }
  .setup__cmds { grid-column: 7 / span 6; }
}
@media (max-width: 51.24rem) {
  /* The via becomes the name's bullet, so the trace has room to enter. */
  .chapter__head { --indent: 1.75rem; }
  .split { display: block; }
  .split__shot { position: static; margin-top: 2rem; }
  .split__ctrl { margin-top: 1.75rem; }
  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; padding-bottom: 1.5rem; }
  .steps::before { top: 0.625rem; bottom: 0; left: calc(0.625rem - 0.75px); right: auto; width: 1.5px; height: auto; transform-origin: center top; }
  .steps::after { top: auto; bottom: 0; left: calc(0.625rem - 3px); right: auto; }
  .steps.armed::before { transform: scaleY(0); }
  .step { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: 1rem; padding-right: 0; }
  .step__via { grid-row: 1 / span 2; }
  .step h3 { margin-top: 0; }
  .setup__bot, .site-foot__in { column-gap: 0; }
  .setup__claim, .setup__cmds { grid-column: 1 / -1; }
  .site-foot__a, .site-foot__b { grid-column: 1 / -1; }
  /* The watchlist stacks: name and count on one line, the rest below. */
  .watch__table, .watch__table tbody, .watch__table tr, .watch__table th, .watch__table td { display: block; width: auto; }
  .watch__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .watch__table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.375rem 1rem; padding: 1rem 1rem 1.125rem; }
  .watch__table tbody tr:first-child { border-top: 0; }
  .watch__table tbody th, .watch__table tbody td, .watch__table td:nth-child(2),
  .watch__table th:first-child, .watch__table td:last-child { width: auto; padding: 0; }
  .watch__table tbody th { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; }
  .watch__table .watch__n { margin-top: 0; }
  .watch__table td[data-label] { grid-column: 1 / -1; }
  .watch__table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.25rem;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 0.75rem;
    font-weight: 500;
    font-stretch: 87.5%;
    letter-spacing: 0.04em;
  }
}
@media (max-width: 40rem) {
  .seg__opt span { padding: 0 0.5rem; }
  .lands { display: block; }
  .legend { grid-template-columns: minmax(0, 1fr); }
  /* Too narrow for nine 44px columns: the same table, turned on its side. Regions run down, products across. */
  .matrix {
    --turned: 1;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(10, auto);
    grid-template-columns: 3.5rem repeat(3, minmax(0, 1fr));
    gap: 0.375rem;
    width: 100%;
    margin-left: 0;
    padding: 0.375rem;
  }
  .matrix thead, .matrix tbody, .matrix tr { display: contents; }
  .matrix th, .matrix td { display: flex; align-items: center; padding: 0; }
  .matrix thead th { justify-content: flex-start; min-height: 2.75rem; }
  .matrix tbody th { justify-content: center; padding-bottom: 0.25rem; font-size: 0.875rem; }
  .matrix .matrix__corner { width: auto; }
  .cell { aspect-ratio: auto; height: 2.75rem; }
}

/* ---------- hover: only where there is a real pointer ---------- */
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__face { background: var(--blue-hi); }
  .textlink:hover { color: var(--blue-hi); }
  .ctl:hover, .input:hover { border-color: var(--ink-3); }
  .lane__name a:hover { color: var(--ink); text-decoration-color: var(--blue-hi); }
  .nav a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.4em; }
  .seg__opt:hover input:not(:checked) + span { color: var(--ink); background: var(--panel-2); }
  .chan:hover { border-color: var(--ink-3); color: var(--ink); }
  .cell[aria-pressed="false"]:hover { border-color: var(--blue); }
  .cell[aria-pressed="false"]:hover::before { inset: calc(50% - 0.3125rem); background: var(--blue); }
  .cell[aria-pressed="true"]:hover::after { background: var(--blue-hi); }
}

/* ---------- no script: what cannot work is not shown, and the matrix is a picture ---------- */
@media (scripting: none) {
  .needs-js { display: none !important; }
  .cell { pointer-events: none; }
}
/* Scripts are on but one failed to load: the controls keep their space and cannot be pressed. */
html:not(.js) .needs-js { visibility: hidden; }
html:not(.js) .cell { pointer-events: none; }

/* ---------- motion off: reduced motion, the pause button, or no script ---------- */
html:not(.motion) *, html:not(.motion) *::before, html:not(.motion) *::after {
  animation: none !important;
  transition: none !important;
}