/* CDO: white stickers on black card, and a cat in octagonal glasses peeking in
   from the edge of every page. Tokens live here and nowhere else; a literal
   hex, a literal rem font size or a radius outside the three below is a bug.
   See DESIGN.md.                                                            */
:root {
  --void: #000000;
  --carbon: #0b0b0b;
  --graphite: #161616;
  --smoke: #242424;
  --ash: #4a4a4a;
  --fog: #8c8c8c;
  --mist: #bdbdbd;
  --bone: #ececec;
  --paper: #ffffff;

  /* the names the instrument styles were written against */
  --bg: var(--void);
  --panel: var(--carbon);
  --ink: var(--paper);
  --soft: var(--bone);
  --muted: var(--fog);
  --dim: var(--fog);
  --line: var(--smoke);

  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* eight steps, and nothing between them */
  --t-micro: 0.72rem; /* caps labels, badges, kickers */
  --t-note: 0.78rem; /* footnotes, hints, source rows */
  --t-meta: 0.84rem; /* metadata, tickers, counters */
  --t-row: 0.9rem; /* ledger rows, controls, list items */
  --t-num: 1rem; /* filed amounts */
  --t-body: 1.05rem; /* prose */
  --t-lead: 1.25rem; /* decks, verdicts, step titles */
  --t-sub: 1.6rem; /* the one figure a panel is read for */

  /* three radii, total */
  --r-chip: 10px;
  --r-card: 22px;
  --r-pill: 999px;

  --gap: 12px;
  --pad-card: 24px;
  --section: clamp(5rem, 10vw, 8.5rem);
  --max: 1200px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  /* motion: one curve for anything arriving or leaving, one for anything
     that travels while it is on screen, and the durations they run at */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --dur-press: 160ms; /* a pill answering a press */
  --dur-ui: 240ms; /* hover light, a sliding selection, a moving highlight */
  --dur-enter: 600ms; /* a title word, a tile laid on the sheet */
  --dur-roll: 700ms; /* an odometer wheel */
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
  color: var(--bone);
  font-family: var(--sans);
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a {
  color: inherit;
}
button {
  font: inherit;
}
img {
  max-width: 100%;
}
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  z-index: 50;
  top: 1rem;
  left: 1rem;
  padding: 0.7rem 1rem;
  border-radius: var(--r-chip);
  background: var(--paper);
  color: var(--void);
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}
:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 4px;
}
.scroll-progress {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  width: 2px;
  height: 100svh;
  background: rgb(255 255 255 / 6%);
  pointer-events: none;
}
.scroll-progress i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--paper);
  transform: scaleY(0);
  transform-origin: top;
}

/* ---- masthead, floating over the banner ---------------------------------- */
.masthead {
  position: absolute;
  z-index: 20;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: 1.35rem var(--pad);
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}
.brand-word {
  color: var(--paper);
  font-size: var(--t-row);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* the rail, then the two social glyphs in the corner behind a hairline */
.masthead-end {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.rail {
  display: flex;
  gap: 1.7rem;
}
.masthead-social {
  display: flex;
  gap: 0.4rem;
  padding-left: 1.5rem;
  border-left: 1px solid var(--ash);
}
.btn.btn-icon-sm {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--carbon);
}
.btn.btn-icon-sm:hover {
  background: var(--graphite);
}
.rail a {
  color: var(--fog);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.18em;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}
.rail a:hover,
.rail a:focus-visible {
  color: var(--paper);
}

/* the share-card render: the banner alone, no chrome */
.is-og .masthead,
.is-og .hero-actions,
.is-og .scroll-progress {
  display: none;
}

/* ---- type ------------------------------------------------------------------
   two display voices, both from the user's own art: the banner's light title
   case, and the model sheet's heavy caps. nothing in between.               */
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  max-width: 14ch;
  margin: 0 auto;
  color: var(--paper);
  font-size: clamp(2.9rem, 6.6vw, 6rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.96;
  text-wrap: balance;
}
h2 {
  margin: 0;
  color: var(--paper);
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* ---- section shell: kicker, heavy title, one deck, one panel --------------- */
.sec {
  width: min(100%, var(--max));
  margin: 0 auto;
  padding: var(--section) var(--pad) 0;
}
.sec-head {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: end;
  gap: 1.5rem 3rem;
  margin-bottom: 2.2rem;
}
.kicker {
  margin: 0 0 1rem;
  color: var(--fog);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.deck {
  max-width: 32rem;
  margin: 0;
  justify-self: end;
  color: var(--mist);
  font-size: var(--t-lead);
  letter-spacing: -0.01em;
  line-height: 1.45;
  text-wrap: pretty;
}
/* a cat on the panel edge pokes up into the head, so those heads stand off */
.structure .sec-head,
.ledger .sec-head {
  margin-bottom: 4.8rem;
}
.sec-caveat {
  max-width: 44rem;
  margin: 1rem 0 0 0.25rem;
  color: var(--fog);
  font: var(--t-note) var(--mono);
  line-height: 1.6;
}
.panel {
  position: relative;
  border: 1px solid var(--smoke);
  border-radius: var(--r-card);
  background: var(--carbon);
}

/* ---- folds: the long notes stay on the page, behind a line ---------------- */
.fold {
  margin-top: 1rem;
  border-top: 1px solid var(--smoke);
}
.fold summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 0;
  color: var(--fog);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  list-style: none;
  cursor: pointer;
  transition: color 0.2s;
}
.fold summary::-webkit-details-marker {
  display: none;
}
.fold summary:hover {
  color: var(--paper);
}
.fold summary::before {
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  content: "+";
}
.fold[open] summary::before {
  content: "−";
}
.fold p {
  max-width: 46rem;
  margin: 0 0 0.85rem;
  color: var(--fog);
  font: var(--t-note) var(--mono);
  line-height: 1.65;
}
.fold-wide {
  margin-top: 1.4rem;
}
.fold-cols {
  columns: 2;
  column-gap: 2.5rem;
  padding-bottom: 0.4rem;
}
.fold-cols p {
  max-width: none;
  break-inside: avoid;
}

/* ---- Ceedo -----------------------------------------------------------------
   The character from the model sheet, one SVG rig cloned per placeholder.
   On black the sticker is white: a white body, black lens discs, and the
   octagons drawn as a black line riding a wider white band, so the frame
   reads as a black line over the head and as a white double line where it
   overhangs the silhouette. That is exactly how the icon on the sheet is cut.
   viewBox is 0 0 120 112. Head is 76 x 68, the sheet's 1.12:1.              */
.mascot {
  --m-body: var(--paper);
  --m-lens: var(--void);
  --m-line: var(--void);
  --m-gap: var(--void);
  --m-shadow: rgb(255 255 255 / 12%);
  --face-x: 0px;
  --face-y: 0px;
  --look-x: 0px;
  --look-y: 0px;
  display: block;
  width: 120px;
  height: auto;
  overflow: visible;
}
.mascot .head,
.mascot .ear,
.mascot .brow {
  fill: var(--m-body);
}
.mascot .paw {
  fill: var(--m-body);
  stroke: var(--m-gap);
  stroke-width: 1.8;
}
.mascot .lens {
  fill: var(--m-lens);
}
.mascot .shadow {
  fill: var(--m-shadow);
  opacity: 0;
}
.mascot .frames-under path {
  fill: none;
  stroke: var(--m-body);
  stroke-width: 6.2;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}
.mascot .frame,
.mascot .bridge {
  fill: none;
  stroke: var(--m-line);
  stroke-width: 2.4;
  stroke-linejoin: miter;
  stroke-miterlimit: 6;
}
.mascot .smile {
  fill: none;
  stroke: var(--m-lens);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* the 3/4 view is an offset of the face across the head; the ears follow a
   third of the way. looking is a smaller offset of the eyes alone. */
.mascot .face {
  transform: translate(var(--face-x), var(--face-y));
}
.mascot .eyes {
  transform: translate(var(--look-x), var(--look-y));
  transition: transform 260ms var(--ease-out);
}
.mascot .ear-left,
.mascot .ear-right {
  translate: calc(var(--face-x) * 0.35) 0;
}

/* pivots: a blink squashes from the lens centre, an ear twitches from its base */
.mascot .head,
.mascot .lens,
.mascot .paw,
.mascot .shadow,
.mascot .ear {
  transform-box: fill-box;
}
.mascot .lens,
.mascot .paw,
.mascot .shadow {
  transform-origin: 50% 50%;
}
.mascot .ear-left {
  transform-origin: 57% 88%;
}
.mascot .ear-right {
  transform-origin: 43% 88%;
}

/* faces: one class on the root, and only the inside of the lenses moves */
.mascot .lens {
  opacity: 1;
  transform: none;
}
.mascot .smile,
.mascot .brow {
  opacity: 0;
}
.mascot .lens,
.mascot .smile,
.mascot .brow {
  transition:
    opacity 110ms linear,
    transform 200ms var(--ease-out);
}
.mascot.is-happy .lens {
  opacity: 0;
}
.mascot.is-happy .smile {
  opacity: 1;
}
.mascot.is-focused .lens,
.mascot.is-reading .lens {
  transform: scaleY(0.3);
}
.mascot.is-surprised .lens {
  transform: scale(1.26);
}
.mascot.is-thinking .lens {
  transform: translate(-4.5px, -4px) scale(0.72);
}
.mascot.is-working .lens {
  transform: translate(0, 2.5px) scaleY(0.62);
}
.mascot.is-determined .brow {
  opacity: 1;
}

@keyframes m-blink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  96% {
    transform: scaleY(0.06);
  }
}
@keyframes m-twitch {
  0%,
  88%,
  100% {
    rotate: 0deg;
  }
  92% {
    rotate: -9deg;
  }
  96% {
    rotate: 3deg;
  }
}
@keyframes m-bob {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}
@keyframes m-bobsh {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.84);
    opacity: 0.6;
  }
}
/* staggered per instance, so a page of them never blinks in unison */
.mascot.is-blinking .lens {
  animation: m-blink 5.6s var(--m-delay, 0s) ease-in-out infinite;
}
.mascot.is-twitching .ear-left {
  animation: m-twitch 7.4s var(--m-delay, 0s) ease-in-out infinite;
}
.mascot.is-hovering .shadow {
  opacity: 1;
  animation: m-bobsh 3.2s ease-in-out infinite;
}
.mascot.is-hovering .body,
.mascot.is-hovering .face {
  animation: m-bob 3.2s ease-in-out infinite;
}
/* a blinking lens and a surprised lens both want transform; the blink wins
   while it runs, the face returns between blinks */
.mascot.is-blinking.is-surprised .lens {
  animation-name: m-blink-wide;
}
@keyframes m-blink-wide {
  0%,
  92%,
  100% {
    transform: scale(1.26);
  }
  96% {
    transform: scale(1.26, 0.06);
  }
}
.mascot.is-blinking.is-thinking .lens {
  animation-name: m-blink-think;
}
@keyframes m-blink-think {
  0%,
  92%,
  100% {
    transform: translate(-4.5px, -4px) scale(0.72);
  }
  96% {
    transform: translate(-4.5px, -4px) scale(0.72, 0.06);
  }
}
.mascot.is-blinking.is-focused .lens,
.mascot.is-blinking.is-reading .lens,
.mascot.is-blinking.is-working .lens,
.mascot.is-blinking.is-happy .lens {
  animation: none;
}

/* the logo lockup: the same cut, heavier lines, so it survives 16px */
.mascot.is-logo .frames-under path {
  stroke-width: 7.4;
}
.mascot.is-logo .frame,
.mascot.is-logo .bridge {
  stroke-width: 3.4;
}
.mascot.is-logo .lens {
  r: 10.5;
}
.mascot.is-logo .paw {
  stroke-width: 2.4;
}

/* ---- props ------------------------------------------------------------------ */
.has-prop {
  position: relative;
  display: block;
}
.has-prop .gpu-card,
.has-prop .paper-prop {
  position: absolute;
  pointer-events: none;
}
/* the sheet's HOLDING GPU: the card tucked under the right paw */
.has-prop .gpu-card {
  right: -16%;
  bottom: -4%;
  width: 40%;
  animation: m-bob 3.2s 0.18s ease-in-out infinite;
}
/* the sheet's READING: the sheet held at chest height */
.has-prop .paper-prop {
  left: 50%;
  bottom: -20%;
  width: 46%;
  transform: translateX(-46%);
}

.gpu-card {
  --gpu-body: var(--paper);
  --gpu-edge: var(--void);
  --gpu-accent: #76b900; /* the one dot of colour the site itself draws */
  --gpu-ink: var(--void);
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.gpu-shell,
.gpu-bracket    { fill: var(--gpu-body); stroke: var(--gpu-edge); stroke-width: 1.6; }
.gpu-side       { fill: var(--gpu-body); stroke: var(--gpu-edge); stroke-width: 1.4; stroke-linejoin: round; }
.gpu-top        { fill: var(--gpu-edge); stroke: var(--gpu-edge); stroke-width: 1.2; stroke-linejoin: round; fill-opacity: 0.35; }
.gpu-seam       { fill: none; stroke: var(--gpu-edge); stroke-width: 0.8; opacity: 0.4; }
.gpu-slot       { fill: var(--gpu-edge); opacity: 0.55; }
.gpu-screw      { fill: var(--gpu-edge); opacity: 0.6; }
.gpu-vent       { fill: var(--gpu-edge); opacity: 0.35; }
.gpu-fan-well   { fill: var(--gpu-edge); opacity: 0.08; }
.gpu-fan-ring   { fill: none; stroke: var(--gpu-edge); stroke-width: 1.8; }
.gpu-fan-blades { fill: var(--gpu-edge); opacity: 0.6; }
.gpu-fan-hub    { fill: var(--gpu-edge); }
.gpu-fan-cap    { fill: var(--gpu-body); }
.gpu-fan-anchor { fill: none; stroke: none; pointer-events: none; }
.gpu-fan {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}
.gpu-card.is-spinning .gpu-fan--top    { animation: gpu-spin 2.6s linear infinite; }
.gpu-card.is-spinning .gpu-fan--bottom { animation: gpu-spin 3.4s linear infinite reverse; }
@keyframes gpu-spin { to { transform: rotate(360deg); } }
.gpu-stripe { fill: var(--gpu-accent); }
.gpu-mark   { fill: var(--gpu-body); }
.gpu-rtx path {
  fill: none;
  stroke: var(--gpu-ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.paper-prop {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.paper-sheet {
  fill: var(--paper);
  stroke: var(--void);
  stroke-width: 3;
}
.paper-lines {
  fill: none;
  stroke: var(--void);
  stroke-width: 3;
  stroke-linecap: round;
}

/* ---- placements -------------------------------------------------------------- */
/* the sheet's ICON (LIGHT): a paper tile, and the one place the cat is black */
.brand-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--r-chip);
  background: var(--paper);
}
.brand-mark .mascot {
  width: 27px;
  --m-body: var(--void);
  --m-lens: var(--paper);
  --m-line: var(--paper);
  --m-gap: var(--paper);
}

/* a cat stuck to the top edge of a panel */
.panel-cat {
  position: absolute;
  z-index: 3;
  top: 0;
  right: clamp(1.5rem, 4vw, 3rem);
  width: clamp(5.5rem, 8vw, 7.5rem);
  transform: translateY(-58%);
  pointer-events: none;
}
.panel-cat .mascot {
  width: 100%;
}
/* the map cat sits in the middle of the loop */
.map-cat {
  display: block;
  width: clamp(6rem, 9vw, 9rem);
}
.map-cat .mascot {
  width: 100%;
}
/* peeking over the top of the quoted post, from behind it */
.post-peek {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 9rem;
  width: 6.5rem;
  transform: translateY(-76%);
  pointer-events: none;
}
.post-peek .mascot {
  width: 100%;
}
/* the model sheet: six tiles, the picked one flipped to paper */
.model-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap);
}
.face-tile {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8rem;
  padding: 1.4rem 1rem 1.1rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-card);
  background: var(--carbon);
  color: var(--fog);
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform var(--dur-press) var(--ease-out);
}
.face-tile:hover {
  background: var(--graphite);
  color: var(--mist);
}
/* the lift is pointer-only: a tap on a phone would leave it stuck up */
@media (hover: hover) and (pointer: fine) {
  .face-tile:hover {
    transform: translateY(-3px);
  }
}
.face-tile:active {
  transform: scale(0.97);
}
.face-tile.is-on {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}
.face-tile .mascot {
  width: 74%;
}
.face-tile.is-on .mascot {
  --m-body: var(--void);
  --m-lens: var(--paper);
  --m-line: var(--paper);
  --m-gap: var(--paper);
}
.face-tile small {
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---- the banner ---------------------------------------------------------------
   The hero is the user's banner, alive: the title centred and light, the big
   cat cropped bottom-left, the small one flying on an orbit top-right, four
   sparkles, four dots, and a circuit trace that draws itself into a chip,
   all over a loop of the side game under a shade.                          */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background: var(--void);
}

/* the side game, playing behind everything: a loop recorded from /haul/,
   cropped to fill, with its poster (the first frame) until it plays */
.hero-reel {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: var(--void);
  pointer-events: none;
}
.hero-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The shade the user asked for (2026-09-23), so the words dominate the
   footage: the whole loop dimmed a little, a deep pool behind the title,
   softer ones under the two cats, a lid under the masthead, and a fade to
   Void at the foot so the post below joins without a seam. Calibrated on
   the loop's brightest frames (headlights, the lit hall), not its average. */
.hero-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgb(0 0 0 / 0%) 58%, rgb(0 0 0 / 72%) 86%, var(--void) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / 58%), rgb(0 0 0 / 0%) 22%),
    radial-gradient(ellipse 50% 44% at 50% 50%, rgb(0 0 0 / 60%), rgb(0 0 0 / 36%) 55%, rgb(0 0 0 / 0%)),
    radial-gradient(ellipse 36% 50% at 14% 86%, rgb(0 0 0 / 55%), rgb(0 0 0 / 0%)),
    radial-gradient(ellipse 28% 30% at 80% 26%, rgb(0 0 0 / 38%), rgb(0 0 0 / 0%));
  background-color: rgb(0 0 0 / 30%);
}

.hero-title {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad);
  text-align: center;
  animation: rise 900ms 200ms var(--ease-out) both;
  /* the block is wider than its words and lies over the 3D cat's corner:
     only the words and the buttons take the pointer, so a click anywhere
     else on him reaches him */
  pointer-events: none;
}
.hero-title h1,
.hero-tag,
.hero-actions .btn {
  pointer-events: auto;
}
/* the one shadow on the site: wide and soft, only where words cross footage */
.hero-title h1 {
  text-shadow:
    0 0 0.5em rgb(0 0 0 / 55%),
    0 0.04em 0.18em rgb(0 0 0 / 45%);
}
.hero-tag {
  margin: 1.1rem 0 0;
  color: var(--mist);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow:
    0 0 1.6em rgb(0 0 0 / 90%),
    0 0 0.5em rgb(0 0 0 / 70%);
}
/* the one word that carries the joke, in the heaviest weight the mono ships */
.hero-tag strong {
  color: var(--paper);
  font-weight: 500;
}

/* Ceedo in voxels, bottom-left, on a transparent canvas the size of the
   banner's big cat. Clicking him spins him and changes his face. */
.hero-visual {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 1vw;
  width: clamp(18rem, 38vw, 38rem);
  aspect-ratio: 1;
  animation: rise 900ms 350ms var(--ease-out) both;
}
.hero-canvas-control {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: transparent;
  cursor: pointer;
  touch-action: pan-y;
}
.hero-canvas-control:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: -8px;
}
.hero-visual canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* The actions under the title: two, and only two. The side game first and
   filled, since it is the thing on this page you can do right now, and Find
   out beside it at the same height, outlined; the social glyphs live in the
   masthead's corner. Where the pair would reach the 3D cat's graphics card
   they stack, one width, the game on top */
.hero-actions {
  --cta-h: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.1rem;
}
@media (max-width: 1419px) {
  .hero-actions {
    flex-direction: column;
    gap: 0.65rem;
  }
  .hero-actions .btn {
    width: min(19rem, 100%);
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  height: 2.75rem;
  padding: 0 1.3rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  color: var(--bone);
  font: 500 var(--t-row) var(--sans);
  text-decoration: none;
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform var(--dur-press) var(--ease-out);
}
.btn:hover {
  border-color: var(--paper);
}
/* the lift is pointer-only; a press answers on every device */
@media (hover: hover) and (pointer: fine) {
  .btn:hover {
    transform: translateY(-2px);
  }
}
.btn:active {
  transform: scale(0.97);
}
.btn-primary {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}
.btn-primary:hover {
  background: var(--bone);
}
.btn-down span {
  animation: nudge 2.4s ease-in-out infinite;
}
/* over footage the secondary pill needs a fill of its own, and an edge the
   eye can find against the dark of the loop */
.hero-actions .btn-down {
  height: var(--cta-h);
  padding: 0 1.7rem;
  border-color: var(--ash);
  background: var(--carbon);
  color: var(--paper);
  font-size: var(--t-body);
}
.hero-actions .btn-down:hover {
  border-color: var(--paper);
  background: var(--graphite);
}

/* Play: a white sticker with a black play disc, the name, and a kicker
   that says what it is */
.btn-play {
  gap: 0.85rem;
  height: var(--cta-h, 3.25rem);
  padding: 0 1.8rem 0 0.45rem;
  text-align: left;
}
.btn-play-glyph {
  display: grid;
  flex: none;
  place-items: center;
  width: calc(var(--cta-h, 3.25rem) - 0.9rem);
  height: calc(var(--cta-h, 3.25rem) - 0.9rem);
  border-radius: var(--r-pill);
  background: var(--void);
  color: var(--paper);
}
.btn-play-glyph svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.btn-play-text {
  display: grid;
  gap: 0.15rem;
}
.btn-play-name {
  font: 600 var(--t-lead) / 1.05 var(--sans);
  letter-spacing: -0.015em;
}
.btn-play-kicker {
  color: var(--ash);
  font: 500 var(--t-micro) / 1.1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.btn-icon {
  width: 2.75rem;
  padding: 0;
  color: var(--mist);
}
.btn-icon:hover {
  background: var(--graphite);
  color: var(--paper);
}
.btn-icon svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}
.btn-icon img {
  width: 1.15rem;
  height: 1.15rem;
  filter: grayscale(1) brightness(1.5);
  transition: filter 0.2s;
}
.btn-icon:hover img {
  filter: grayscale(1) brightness(2.2);
}

/* the small one, flying, with the ring passing behind its head */
.flyer {
  position: absolute;
  z-index: 1;
  top: 12vh;
  right: 8vw;
  width: clamp(14rem, 30vw, 30rem);
  aspect-ratio: 320 / 130;
  pointer-events: none;
  animation: rise 900ms 600ms var(--ease-out) both;
}
.orbit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.orbit-back {
  z-index: 0;
}
.orbit-front {
  z-index: 2;
}
.orbit-ring {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.orbit-guide {
  fill: none;
  stroke: none;
}
.orbit-dot {
  fill: var(--paper);
}
.flyer-cat {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 31%;
  transform: translate(-50%, -62%);
}
.flyer-cat .mascot {
  width: 100%;
}
.bang-fly {
  z-index: 3;
  top: -12%;
  left: 43%;
  width: 3rem;
  height: 3rem;
  transform-origin: bottom center;
  animation: pop 700ms 1400ms var(--ease-out) both;
}

/* the marks */
.mark {
  position: absolute;
  fill: var(--paper);
  stroke: none;
  pointer-events: none;
}
.bang,
.speed {
  fill: none;
  stroke: var(--paper);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sparkle {
  width: 1.6rem;
  height: 1.6rem;
  transform-origin: center;
  animation: twinkle 3.8s var(--d, 0s) ease-in-out infinite;
}
.s1 { top: 17%; left: 13%; width: 2.6rem; height: 2.6rem; --d: 0s; }
.s2 { top: 60%; left: 77%; width: 1.9rem; height: 1.9rem; --d: 1.3s; }
.s3 { top: 74%; left: 34%; width: 1.2rem; height: 1.2rem; --d: 2.1s; }
.s4 { top: 22%; left: 63%; width: 1rem; height: 1rem; --d: 0.7s; }
.dot {
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--paper);
  pointer-events: none;
}
.d1 { top: 29%; left: 18%; }
.d2 { top: 80%; left: 66%; }
.d3 { top: 35%; left: 87%; width: 0.35rem; height: 0.35rem; }
.d4 { top: 69%; left: 83%; width: 0.35rem; height: 0.35rem; }

.trace {
  position: absolute;
  z-index: 1;
  right: 2vw;
  bottom: 5vh;
  width: clamp(14rem, 24vw, 24rem);
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.trace-node {
  fill: var(--void);
}
.trace-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: draw 1.6s 900ms ease-out forwards;
}
.trace-line-2 {
  animation-delay: 1.6s;
}
.trace-chip {
  opacity: 0;
  animation: appear 600ms 2.3s ease-out forwards;
}
.trace-chip rect:first-child {
  fill: var(--void);
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.55);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes appear {
  to {
    opacity: 1;
  }
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
  60% {
    transform: scale(1.15);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes nudge {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 6px;
  }
}

/* ---- the post, on its own, at X's column width ------------------------------ */
.post {
  padding: clamp(3rem, 6vw, 5rem) var(--pad) 0;
}
.post-col {
  width: min(600px, 100%);
  margin: 0 auto;
}
.post-frame {
  position: relative;
  margin-top: 0.6rem;
}
.post-frame .xpost-link {
  position: relative;
  z-index: 1;
}

.post .origin-kicker {
  justify-content: flex-end;
}


/* ==== carried: the origin exhibit, X's numbers, do not retune ==== */
/* ---- The origin exhibit --------------------------------------------------
   The page is named after one post, so the post is reproduced the way X
   renders it rather than restyled into this site's register: X's own Chirp
   webfont off its CDN, its lights-out palette, its 15/17px type ramp, its
   40px avatar and the three glyph paths it ships. Every number below was
   read off X's production bundle. The site's own label sits outside the
   frame, because the frame is a quotation.                                */
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Regular.80fda27a.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Medium.20fc288a.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TwitterChirp";
  src: url("https://abs.twimg.com/responsive-web/client-web/Chirp-Bold.ebb56aba.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

.hero-origin {
  position: absolute;
  z-index: 31;
  right: var(--pad);
  bottom: clamp(1.5rem, 4vh, 3.25rem);
  /* 600px is X's own status column width, so the post wraps where it wraps */
  width: min(600px, 46vw);
  margin: 0;
  animation: origin-in 900ms 760ms var(--ease-out) both;
}
.origin-kicker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 0.55rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.origin-kicker a {
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.origin-kicker a:hover {
  color: var(--ink);
}

/* --- from here down the numbers are X's, not this site's ---------------- */
.xpost {
  --x-bg: #000;
  --x-text: #e7e9ea;
  --x-dim: #71767b;
  --x-blue: #1d9bf0;
  --x-line: #2f3336;
  padding: 12px 16px;
  background: var(--x-bg);
  color: var(--x-text);
  font-family:
    "TwitterChirp", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: normal;
  text-align: left;
  color-scheme: dark;
  /* the host body sets these; X sets neither, and both inherit */
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  /* 600px total minus the two side borders minus 2x16px padding leaves the
     566px of text X wraps this post at, which is the width whose line breaks
     match the source screenshot. */
  border: 1px solid var(--x-line);
  border-radius: 16px;
  overflow: hidden;
  transition:
    border-color 220ms ease,
    transform 220ms var(--ease-out);
}
.xpost *,
.xpost *::before,
.xpost *::after {
  box-sizing: border-box;
}
.xpost-link {
  display: block;
  border-radius: 16px;
  color: inherit;
  text-decoration: none;
}
.xpost-link:hover .xpost {
  border-color: #536471;
  transform: translateY(-2px);
}
.xpost-link:active .xpost {
  transform: none;
}
.xpost-link:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}
.xpost-link:focus-visible .xpost {
  border-color: #536471;
}

.xpost-head {
  display: flex;
  /* X's identity block carries margin-bottom: 2px, which makes the header row
     42px rather than 40px and centres the 40px avatar inside it */
  align-items: stretch;
  gap: 8px;
}
.xpost-identity {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  margin-bottom: 2px;
}
.xpost-avatar {
  display: block;
  width: 40px;
  height: 40px;
  flex: none;
  align-self: center;
  border-radius: 9999px;
  background: #3e4144;
  object-fit: cover;
}
.xpost-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.xpost-name {
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: unset;
  color: var(--x-text);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}
/* X ships the badge as one path: the tick is a hole, so on lights out it
   shows the black cell through rather than rendering white */
.xpost-verified {
  width: 18.75px;
  height: 18.75px;
  flex: none;
  margin-inline-start: 2px;
  fill: var(--x-blue);
}
.xpost-handle {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: unset;
  color: var(--x-dim);
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
}
.xpost-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: auto;
  padding-left: 12px;
}
.xpost-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  flex: none;
  color: var(--x-dim);
}
/* the hover disc inflates outside layout, which is why the glyph edges stay
   8px apart while the target reads as 34.75px */
.xpost-btn::before {
  position: absolute;
  inset: -8px;
  border-radius: 9999px;
  content: "";
}
.xpost-btn.is-grok {
  color: var(--x-text);
}
.xpost-glyph {
  width: 18.75px;
  height: 18.75px;
  fill: currentcolor;
}
.xpost-glyph.is-grok {
  width: 19.34px;
}

.xpost-body {
  margin: 12px 0 0;
  color: var(--x-text);
  font-size: 17px;
  font-weight: 400;
  line-height: 24px;
  overflow-wrap: break-word;
}
.xpost-body p {
  margin: 0;
  color: inherit;
  font: inherit;
}
/* X renders the post as one pre-wrap text node, so the gap between the two
   paragraphs is a real empty line box exactly one line-height tall */
.xpost-body p + p {
  margin-top: 24px;
}

.xpost-meta {
  display: block;
  margin-top: 16px;
  color: var(--x-dim);
  font-size: 15px;
  line-height: 20px;
}
.xpost-time {
  display: inline;
}
.xpost-meta time {
  font: inherit;
  letter-spacing: inherit;
}
.xpost-sep {
  display: inline;
  padding: 0 4px;
}
.xpost-views {
  display: inline;
  font-size: 14px;
  line-height: 16px;
}
.xpost-views b {
  color: var(--x-text);
  font-weight: 700;
}

.origin-word {
  display: inline-block;
  animation: origin-word 520ms var(--d, 0ms) var(--ease-out) both;
}

@keyframes origin-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes origin-word {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(0.3em);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 1180px) {
  .hero-origin {
    width: min(600px, 52vw);
  }
}
@media (max-width: 620px) {
  .origin-kicker {
    flex-direction: column;
    gap: 0.35rem;
  }
}



/* ==== carried: map ==== */
.product {
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.product-head {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: end;
  margin-bottom: 3rem;
}
.product-head > p {
  justify-self: end;
  max-width: 26rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-lead);
}
.product-shell {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--carbon);
}
.map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.5rem;
  padding: 0 1rem;
  border-bottom: 1px solid var(--line);
}
.map-status {
  font: var(--t-meta) var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.map-status i {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: var(--soft);
}
.filters {
  display: flex;
  gap: 0.25rem;
}
.filters button {
  position: relative;
  padding: 0.45rem 0.75rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  text-transform: uppercase;
  cursor: pointer;
}
.filters button:hover,
.filters button.is-active {
  color: var(--ink);
}
.filters button::after {
  position: absolute;
  right: 0.75rem;
  bottom: 0.2rem;
  left: 0.75rem;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transition: transform 180ms ease;
}
.filters button.is-active::after,
.filters button:hover::after {
  transform: scaleX(1);
}
.map-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  min-height: 34rem;
}
.company-grid {
  --map-x: 50%;
  --map-y: 50%;
  position: relative;
  min-height: 41rem;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background-image: radial-gradient(
    rgb(255 255 255 / 8%) 0.65px,
    transparent 0.75px
  );
  background-size: 17px 17px;
}
.company-grid::before,
.company-grid::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  background: rgb(255 255 255 / 5%);
  content: "";
  transition:
    top 220ms ease-out,
    left 220ms ease-out;
}
.company-grid::before {
  top: var(--map-y);
  right: 0;
  left: 0;
  height: 1px;
}
.company-grid::after {
  top: 0;
  bottom: 0;
  left: var(--map-x);
  width: 1px;
}
.map-web {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.map-ascii {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.map-edge {
  stroke: rgb(255 255 255 / 48%);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  transition:
    stroke 0.2s,
    stroke-width 0.2s,
    opacity 0.2s;
}
.map-edge.edge-financing {
  stroke: rgb(255 255 255 / 66%);
  stroke-width: 2.1;
  stroke-dasharray: 14 4;
  animation: flow-financing 3.4s linear infinite;
}
.map-edge.edge-investment {
  stroke-dasharray: 7 4;
  animation: flow-investment 2.6s linear infinite;
}
.map-edge.edge-capacity {
  stroke: rgb(255 255 255 / 42%);
  stroke-dasharray: 2 4.6;
  animation: flow-capacity 2.2s linear infinite;
}
@keyframes flow-financing {
  to {
    stroke-dashoffset: -90;
  }
}
@keyframes flow-investment {
  to {
    stroke-dashoffset: -55;
  }
}
@keyframes flow-capacity {
  to {
    stroke-dashoffset: -66;
  }
}
.map-edge.is-active {
  stroke: var(--ink);
  stroke-width: 2.4;
  opacity: 1;
  filter: drop-shadow(0 0 4px rgb(255 255 255 / 40%));
}
.map-edge.is-dimmed {
  opacity: 0.12;
}
.map-edge.is-filtered-out {
  opacity: 0;
}
.map-core {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.map-core::before {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 20rem;
  height: 20rem;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 255 255 / 5%),
    transparent 68%
  );
  animation: core-breathe 7s ease-in-out infinite;
  content: "";
}
@keyframes core-breathe {
  50% {
    opacity: 0.45;
  }
}
.map-core strong {
  display: block;
  color: var(--soft);
  font: var(--t-row) var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.company-card {
  position: absolute;
  z-index: 2;
  top: var(--y);
  left: var(--x);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 8.8rem;
  min-height: 6.4rem;
  padding: 0.7rem;
  border: 1px solid var(--line);
  background: rgb(11 11 11 / 94%);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;
}
.company-card:hover,
.company-card.is-active {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgb(255 255 255 / 8%);
  transform: translate(-50%, -50%) scale(1.06);
}
.company-card.is-muted {
  opacity: 0.22;
}
.company-logo {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px;
  width: 76px;
  height: 29px;
}
.company-logo img {
  display: block;
  max-width: 25px;
  max-height: 22px;
  filter: saturate(0.9);
  transition: filter 0.2s;
}
/* multi-entity cards (Capital pool) hold a capped,
single-row cluster —
   six mismatched favicons wrapped and spilled out of the box. */
.company-logo:has(img:nth-child(2)) {
  flex-wrap: nowrap;
  overflow: hidden;
}
.company-logo:has(img:nth-child(2)) img {
  max-width: 20px;
  max-height: 18px;
}
.company-card:hover img,
.company-card.is-active img {
  filter: saturate(1.15);
}
/* CoreWeave has no Simple Icons entry,
so it stays a near-black favicon;
   lift it to read on the dark card,
but let hover show it untouched. */
.company-card[data-id="coreweave"] img,
.detail-logo[data-id="coreweave"] img {
  filter: saturate(0.9) brightness(2);
}
.company-card[data-id="coreweave"]:hover img,
.company-card[data-id="coreweave"].is-active img {
  filter: saturate(1.15);
}

.company-card small {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.company-card strong {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--t-body);
  font-weight: 500;
}
.company-card b {
  position: absolute;
  right: 0.65rem;
  top: 0.65rem;
  color: var(--muted);
  font: 400 var(--t-note) var(--mono);
}
.company-detail {
  display: flex;
  flex-direction: column;
  padding: 2rem;
  background: var(--panel);
}
.company-detail.is-updating > * {
  animation: dossier-update 320ms var(--ease-out) both;
}
@keyframes dossier-update {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}
.detail-logo {
  display: grid;
  place-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: auto;
  border: 1px solid var(--line);
}
.detail-logo:empty {
  display: none;
}
.detail-logo img {
  width: 34px;
  height: 30px;
  object-fit: contain;
  filter: saturate(0.9);
}
.detail-logo:has(img:nth-child(2)) {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 3px;
  width: 96px;
}
.detail-logo:has(img:nth-child(2)) img {
  width: 24px;
  height: 20px;
  object-fit: contain;
}
.detail-title span {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.detail-title h3 {
  margin: 0.5rem 0 0.7rem;
  font-size: var(--t-sub);
  font-weight: 500;
  letter-spacing: -0.04em;
}
.detail-title strong {
  font: var(--t-row) var(--mono);
  letter-spacing: 0.06em;
}
.company-detail > p {
  margin: 1.5rem 0;
  color: var(--muted);
  font-size: var(--t-body);
}
.company-detail dl {
  margin: 0 0 1.5rem;
}
.company-detail dl div {
  display: flex;
  justify-content: space-between;
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font: var(--t-note) var(--mono);
}
.company-detail dt {
  color: var(--muted);
}
.company-detail dd {
  margin: 0;
  text-align: right;
}
.company-detail > a {
  display: flex;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font: var(--t-row) var(--mono);
  text-decoration: none;
  text-transform: uppercase;
}


/* ---- map, restyled as a sticker panel ------------------------------------------
   the rules above are the instrument's own; these put it in the new register */
.map-panel {
  overflow: hidden;
}
.map-toolbar {
  padding: 0.6rem 1rem 0.6rem 1.4rem;
}
.filters {
  gap: 0.3rem;
}
.filters button {
  padding: 0.45rem 0.85rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  color: var(--fog);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.12em;
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s;
}
.filters button::after {
  display: none;
}
.filters button:hover {
  background: var(--graphite);
  color: var(--paper);
}
.filters button.is-active {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}
.company-grid {
  background-image: radial-gradient(rgb(255 255 255 / 7%) 0.65px, transparent 0.75px);
  background-size: 17px 17px;
}
.company-grid::before,
.company-grid::after,
.map-core::before {
  display: none;
}
.map-edge.is-active {
  filter: none;
}
.company-card {
  border-radius: var(--r-chip);
  background: rgb(11 11 11 / 94%);
}
.company-card:hover,
.company-card.is-active {
  box-shadow: none;
}
.company-detail {
  padding: var(--pad-card) 1.6rem;
}
.detail-logo {
  border-radius: var(--r-chip);
}
.detail-title h3 {
  font-weight: 600;
}
.company-detail > a {
  color: var(--mist);
}
.company-detail > a:hover {
  color: var(--paper);
}

/* --- the company panel: a tinted mark on top, the legs under the summary --- */
.detail-logo {
  display: grid;
  place-content: center;
  width: 100%;
  height: 9rem;
  margin-bottom: 1.3rem;
  border: 1px solid color-mix(in srgb, var(--brand, #8c8c8c) 45%, var(--smoke));
  border-radius: var(--r-chip);
  background:
    radial-gradient(ellipse at 50% 120%, color-mix(in srgb, var(--brand, #8c8c8c) 26%, transparent), transparent 70%),
    color-mix(in srgb, var(--brand, #8c8c8c) 9%, var(--void));
  transition:
    border-color 0.3s,
    background 0.3s;
}
.detail-logo img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: none;
}
.detail-logo:has(img:nth-child(2)) {
  grid-template-columns: repeat(3, auto);
  gap: 0.7rem 1rem;
  width: 100%;
}
.detail-logo:has(img:nth-child(2)) img {
  width: 30px;
  height: 30px;
}
.detail-legs {
  margin: 0 0 1.3rem;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--smoke);
}
.detail-legs:empty {
  display: none;
}
.detail-legs li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr) auto auto;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--smoke);
  color: var(--mist);
  font: var(--t-note) var(--mono);
}
.leg-dir {
  color: var(--fog);
}
.leg-who {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leg-type {
  color: var(--fog);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.leg-value {
  color: var(--paper);
  white-space: nowrap;
}


/* ==== carried: structuring desk ==== */
.desk-label {
  margin: 0 0 1.2rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.desk-foot {
  margin: 1rem 0 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  line-height: 1.7;
}
.desk-foot strong {
  color: var(--soft);
  font-weight: 400;
}

/* --- collateral picker */
.collateral-picker {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.collateral-chip {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  background: var(--carbon);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
  transition:
    background 0.18s,
    color 0.18s;
}
.collateral-chip:hover {
  background: var(--graphite);
  color: var(--soft);
}
.collateral-chip.is-on {
  background: var(--ink);
  color: var(--bg);
}
.chip-logo {
  display: flex;
  gap: 2px;
  align-items: center;
  overflow: hidden;
}
.chip-logo img {
  display: block;
  width: 14px;
  height: 14px;
  object-fit: contain;
}
.collateral-chip.is-on .chip-logo img {
  filter: grayscale(1) invert(1) contrast(1.2);
}
.chip-name {
  font-size: var(--t-num);
  letter-spacing: -0.01em;
}
.chip-owed {
  font: var(--t-meta) var(--mono);
  opacity: 0.85;
}

/* --- capital structure */
.tranche-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.tranche {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--line);
  background: var(--panel);
  transition:
    border-color 0.25s,
    opacity 0.25s;
}
.tranche.is-hit {
  border-color: var(--fog);
}
.tranche.is-wiped {
  border-color: var(--ash);
  opacity: 0.62;
}
.tranche-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}
.tranche-head strong {
  font-size: var(--t-body);
  font-weight: 500;
}
.tranche-rating {
  font: var(--t-row) var(--mono);
  letter-spacing: 0.1em;
  color: var(--soft);
}
.tranche-bar {
  position: relative;
  height: 5px;
  background: var(--smoke);
  overflow: hidden;
}
.tranche-bar i {
  display: block;
  height: 100%;
  background: var(--soft);
  transition: width 0.35s var(--ease-out);
}
.tranche.is-wiped .tranche-bar i {
  background: var(--mist);
}
.tranche-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 0.45rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.tranche-loss {
  color: var(--soft);
}
.tranche.is-wiped .tranche-loss {
  color: var(--mist);
}
.desk-empty {
  margin: 0;
  color: var(--muted);
  font: var(--t-row) var(--mono);
  line-height: 1.8;
}

/* --- deal ticket */
.deal-ticket {
  margin: 0;
}
.deal-ticket > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--line);
}
.deal-ticket dt {
  color: var(--muted);
  font: var(--t-note) var(--mono);
  letter-spacing: 0.04em;
}
.deal-ticket dd {
  margin: 0;
  color: var(--soft);
  font: var(--t-num) var(--mono);
  text-align: right;
}
.desk-verdict {
  margin: 1.1rem 0 0;
  color: var(--soft);
  font-size: var(--t-body);
  line-height: 1.6;
}

.stress-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.stress-control {
  display: block;
}
.stress-control > span {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.6rem;
  font: var(--t-row) var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
}
.stress-control em {
  font-style: normal;
  color: var(--muted);
}
.stress-control small {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.stress-control input[type="range"] {
  width: 100%;
  height: 2.5rem;
  margin: -0.75rem 0;
  appearance: none;
  background-color: transparent;
  background-image: linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 1px;
  cursor: ew-resize;
  touch-action: pan-y;
}
.stress-control input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ink);
}
.stress-control input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
}
.stress-control input[type="range"]:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 6px;
}

@media (max-width: 960px) {
  .structure > header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .structure > header p {
    justify-self: start;
  }

  .stress-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}



/* ==== carried: structuring desk, layout ==== */
.waterfall-frame {
  position: relative;
  height: 17rem;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--carbon);
}
.waterfall-frame canvas {
  display: block;
  width: 100%;
  height: 100%;
}
@media (max-width: 960px) {
  .waterfall-frame {
    height: 12rem;
  }
}
/* --- what this is: the explainer above the desk */
.structure-note {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 2rem;
  padding-bottom: 2.6rem;
  margin-bottom: 2.6rem;
  border-bottom: 1px solid var(--line);
}
.note-title {
  margin: 0;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.note-body {
  columns: 2;
  column-gap: 2.5rem;
  max-width: 52rem;
}
.note-body p {
  margin: 0 0 1rem;
  color: var(--muted);
  font-size: var(--t-body);
  line-height: 1.65;
  break-inside: avoid;
}
.note-body p:last-child {
  margin-bottom: 0;
}
.note-body strong {
  color: var(--soft);
  font-weight: 500;
}
.note-body em {
  font-style: italic;
  color: var(--soft);
}
.note-caveat {
  color: var(--dim) !important;
  font: var(--t-note) var(--mono) !important;
  line-height: 1.8 !important;
}
@media (max-width: 960px) {
  .structure-note {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .note-body {
    columns: 1;
  }
}
/* --- restructured desk: visual, then parameters, then the short note */
.desk-visual {
  padding: 1.4rem;
  border: 1px solid var(--line);
  background: var(--carbon);
}
.desk-visual .desk-label,
.param-block .desk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.desk-visual .desk-label em,
.param-block .desk-label em {
  font-style: normal;
  color: var(--soft);
  letter-spacing: 0.12em;
}
/* tranche summary sits under the canvas, three across */
.desk-visual .tranche-stack {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 0;
}
.desk-visual .tranche {
  border: 0;
  background: var(--carbon);
}
/* deal ticket becomes a stat strip */
.desk-visual .deal-ticket {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1px;
  margin: 1.1rem 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}
.desk-visual .deal-ticket > div {
  display: block;
  padding: 0.7rem 0.8rem;
  border-bottom: 0;
  background: var(--carbon);
}
.desk-visual .deal-ticket dt {
  display: block;
  margin-bottom: 0.35rem;
}
.desk-visual .deal-ticket dd {
  text-align: left;
  font-size: var(--t-num);
}
.desk-params {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.param-block {
  padding: 1.4rem;
  background: var(--carbon);
}
/* chips wrap horizontally now that they are an input row */
.desk-params .collateral-picker {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1px;
}
.desk-params .collateral-chip {
  grid-template-columns: auto auto;
  flex: 1 1 auto;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
}
.desk-params .chip-owed {
  display: none;
}
.structure-note {
  margin-top: 2.6rem;
  padding-bottom: 0;
  border-bottom: 0;
}
@media (max-width: 960px) {
  .desk-visual .deal-ticket,
  .desk-visual .tranche-stack {
    grid-template-columns: repeat(2, 1fr);
  }
  .desk-params {
    grid-template-columns: 1fr;
  }
}
/* --- responsive polish */
@media (max-width: 960px) {
  /* single column: 5 stats and 3 tranches left orphaned cells that painted
     as empty grey blocks, because the grid gap shows the container colour */
  .desk-visual .tranche-stack,
  .desk-visual .deal-ticket {
    grid-template-columns: 1fr;
  }
  .desk-visual .deal-ticket > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
  }
  .desk-visual .deal-ticket dt {
    margin-bottom: 0;
  }
  /* touch targets */
  .map-toolbar [data-filter],
  .collateral-chip {
    min-height: 2.75rem;
  }
  .company-card small {
    font-size: var(--t-row);
  }
  .desk-visual .tranche {
    padding: 0.8rem;
  }
}
@media (max-width: 560px) {
  .structure {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
  .waterfall-frame {
    height: 13rem;
  }
  .desk-visual,
  .param-block {
    padding: 1rem;
  }
}
@media (max-width: 960px) {
  /* 1fr tracks default to min-width:auto, so long tickers forced the grid
     wider than the viewport once the label font grew. Let them shrink. */
  .company-grid .company-card {
    min-width: 0;
  }
  .company-card small,
  .company-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
@media (max-width: 960px) {
  /* wide-but-thin text links: give them a real vertical target on touch */
  .sources a,
  footer a {
    display: inline-block;
    padding: 0.5rem 0;
  }
  .sources li {
    padding: 0.5rem 0;
  }
  .hero-masthead .brand {
    padding: 0.6rem 0;
  }
}

/* ---- structuring desk, restyled as a sticker panel ------------------------------ */
.desk-panel {
  overflow: visible;
}
.desk-visual {
  padding: var(--pad-card);
  border: 0;
  background: transparent;
}
/* the cat on the corner needs the label's right-hand word out of its way */
.desk-visual > .desk-label:first-child {
  padding-right: 9rem;
}
.waterfall-frame {
  border-color: var(--smoke);
  border-radius: var(--r-chip);
  background: var(--void);
}
.desk-visual .tranche-stack {
  gap: var(--gap);
  margin-top: var(--gap);
  border: 0;
  background: transparent;
}
.desk-visual .tranche {
  border: 1px solid var(--smoke);
  border-radius: var(--r-chip);
  background: var(--void);
}
.tranche.is-hit {
  border-color: var(--fog);
}
.tranche.is-wiped {
  border-color: var(--ash);
  opacity: 0.6;
}
.tranche.is-wiped .tranche-head strong {
  text-decoration: line-through;
}
.tranche.is-wiped .tranche-bar i {
  background: var(--mist);
}
.desk-visual .deal-ticket {
  gap: var(--gap);
  margin-top: var(--gap);
  border: 0;
  background: transparent;
}
.desk-visual .deal-ticket > div {
  border: 1px solid var(--smoke);
  border-radius: var(--r-chip);
  background: var(--void);
}
.desk-legend {
  max-width: 46rem;
  margin: 0.9rem 0 0;
  color: var(--fog);
  font: var(--t-note) var(--mono);
  line-height: 1.6;
}
.desk-params {
  gap: 0;
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--smoke);
  background: transparent;
}
.param-block {
  padding: var(--pad-card);
  background: transparent;
}
.param-block + .param-block {
  border-left: 1px solid var(--smoke);
}
.desk-params .collateral-picker {
  gap: 0.4rem;
  border: 0;
  background: transparent;
}
.desk-params .collateral-chip {
  padding: 0.5rem 0.95rem 0.5rem 0.65rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  background: var(--void);
}
.collateral-chip:hover {
  background: var(--graphite);
}
.collateral-chip.is-on {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}
.stress-control input[type="range"]::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
}
.stress-control input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
}

.mode-word {
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  color: var(--mist);
}
.structure.is-auto .mode-word {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}

/* --- pressing a chip answers back, and a changed readout flashes once --- */
.collateral-chip {
  transition:
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    transform 0.18s;
}
.collateral-chip:active {
  transform: scale(0.95);
}
.collateral-chip.is-popping {
  animation: pop-chip 360ms var(--ease-out);
}
@keyframes pop-chip {
  40% {
    transform: scale(1.07);
  }
}
.tranche {
  transition:
    border-color 0.35s,
    opacity 0.35s;
}
.tranche-bar i {
  transition: width 0.45s var(--ease-out);
}
.deal-ticket dd.is-changed,
.tranche-rating.is-changed,
.tranche-loss.is-changed,
.tranche-size.is-changed {
  animation: flash 700ms ease-out;
}
@keyframes flash {
  from {
    color: var(--paper);
  }
}


/* ==== carried: underwriting ledger ==== */
.ledger-visual {
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  border: 1px solid var(--line);
  background: var(--carbon);
}
.ledger-visual .desk-label,
.ledger-block .desk-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.ledger-visual .desk-label em,
.ledger-block .desk-label em {
  font-style: normal;
  color: var(--soft);
  letter-spacing: 0.12em;
}

.step-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.7rem;
}
.step-head .step-n {
  align-self: center;
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
}
.step-head h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-lead);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.step-head p {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--muted);
  font-size: var(--t-note);
  line-height: 1.5;
}
.step-head .step-period {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
}
.step-head .step-unit {
  margin-left: auto;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
}

.ledger-subject {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1.2rem;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  letter-spacing: 0.04em;
}
.ledger-subject strong {
  color: var(--soft);
  font-weight: 400;
}
.ledger-subject img {
  width: 14px;
  height: 14px;
  filter: grayscale(1) contrast(0.92);
  opacity: 0.72;
}

/* --- the T-account: two cells, so no orphaned hairline cells are possible */
.ledger-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ledger-group {
  padding: 1.2rem 1.3rem;
  background: var(--carbon);
}
.ledger-group-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.2rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ledger-group-hint {
  margin: 0 0 0.4rem;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
}

.ledger-row {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) auto 6.4rem;
  column-gap: 0.65rem;
  row-gap: 0.25rem;
  align-items: baseline;
  width: 100%;
  padding: 0.62rem 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
.ledger-row + .ledger-row {
  border-top: 1px solid var(--line);
}
.ledger-return .ledger-row {
  grid-template-columns: minmax(0, 1fr) auto 5.5rem;
  column-gap: 0.6rem;
}
button.ledger-row {
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.18s;
}
button.ledger-row:hover {
  background: var(--graphite);
}
.row-tick {
  color: var(--muted);
  font: var(--t-meta) var(--mono);
  white-space: nowrap;
}
.row-label {
  color: var(--soft);
  font: var(--t-row) var(--mono);
  line-height: 1.45;
}
.row-label,
.bottom-formula {
  overflow-wrap: break-word;
  word-break: normal;
}
.row-badge {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
}
.row-amount {
  color: var(--soft);
  font: var(--t-num) var(--mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.row-note {
  grid-column: 2 / -1;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
  line-height: 1.5;
}
.ledger-return .row-note {
  grid-column: 1 / -1;
}
.ledger-row.is-struck .row-label,
.ledger-row.is-struck .row-amount {
  /* the recession is carried in colour alone; stacking opacity on top drops
     10px monospace under the 4.5:1 contrast minimum while it is still a
     live control the reader has to be able to read */
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.ledger-row.is-rule {
  border-bottom: 1px solid var(--line);
}
/* the next row's own border-top would stack against it into a 2px slab */
.ledger-row.is-rule + .ledger-row {
  border-top: 0;
}
.ledger-row.is-total {
  position: relative;
  margin-top: 0.35rem;
  padding-top: 0.6rem;
}
/* accounting paper rules the bottom line twice: two hairlines, never a
   heavier one */
.ledger-row.is-total::before {
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}
.ledger-row.is-total .row-label {
  color: var(--ink);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ledger-row.is-total .row-amount {
  color: var(--ink);
  font-size: var(--t-sub);
  letter-spacing: -0.02em;
}

/* --- the quotient: the moment a celebrated number lands as something else */
.ledger-quotient {
  margin-top: 1.6rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--line);
  background: var(--graphite);
}
.q-label {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.q-operands {
  margin: 0 0 0.5rem;
  color: var(--soft);
  font: var(--t-row) var(--mono);
  font-variant-numeric: tabular-nums;
}
.q-figure {
  display: block;
  color: var(--ink);
  font: clamp(3.2rem, 7vw, 5rem) var(--mono);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1;
}
.q-cushion {
  margin: 0.7rem 0 0;
  color: var(--soft);
  font: var(--t-row) var(--mono);
}

/* --- the hurdle bar: position is the whole severity signal */
.hurdle {
  padding-top: 0.4rem;
  /* the marks are full-width boxes slid by a percentage transform, so their
     empty right half would otherwise scroll the whole page sideways */
  overflow: hidden;
  margin-top: 1.7rem;
}
.hurdle-track {
  --hatch: 9px;
  position: relative;
  height: 5.6rem;
}
.hurdle-track.is-short,
.hurdle-track.is-negative {
  --hatch: 5px;
}
.hurdle-axis {
  position: absolute;
  top: 4rem;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
}
.hurdle-fail {
  position: absolute;
  top: 2.9rem;
  left: 0;
  width: 23.35%;
  height: 1.1rem;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.12) 0 1px,
    transparent 1px var(--hatch)
  );
}
.hurdle-band {
  position: absolute;
  top: calc(4rem - 4px);
  left: 23.35%;
  width: 3.3%;
  height: 9px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  /* the same inset-track grey the tranche bar uses, so the band the tick is
     read against is not the dimmest thing on its own bar */
  background: var(--smoke);
}
.hurdle-minor {
  position: absolute;
  top: calc(4rem + 1px);
  width: 1px;
  height: 3px;
  background: var(--line);
}
.hurdle-end,
.hurdle-band-caption {
  position: absolute;
  top: calc(4rem + 0.6rem);
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  white-space: nowrap;
}
.hurdle-end.is-max {
  right: 0;
}
.hurdle-band-caption {
  left: 25%;
  transform: translateX(-50%);
  color: var(--soft);
}
.hurdle-mark {
  position: absolute;
  left: 0;
  width: 100%;
  transform: translateX(var(--x, 0%));
  transition: transform 350ms var(--ease-out);
  pointer-events: none;
}
.hurdle-mark i {
  position: absolute;
  left: 0;
  display: block;
  width: 1px;
}
.hurdle-mark span {
  position: absolute;
  left: 0;
  transform: translateX(-50%);
  font: var(--t-row) var(--mono);
  white-space: nowrap;
}
.hurdle-mark b {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  font-weight: 400;
  letter-spacing: 0.1em;
}
.hurdle-mark.is-earned i {
  top: 2.2rem;
  height: 1.85rem;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
}
.hurdle-mark.is-earned span {
  top: 1.05rem;
  color: var(--ink);
}
.hurdle-mark.is-quoted i {
  top: 3.1rem;
  height: 0.95rem;
  background: var(--muted);
}
.hurdle-mark.is-quoted span {
  top: 0.05rem;
  color: var(--muted);
}
.hurdle-mark.is-left span {
  transform: translateX(0);
}
.hurdle-mark.is-right span {
  transform: translateX(-100%);
}
.hurdle-note {
  max-width: 46rem;
  margin: 1rem 0 0;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
  line-height: 1.55;
}

/* --- the bottom line, ruled twice the way a worksheet is */
.ledger-bottom {
  position: relative;
  margin-top: 1.7rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.ledger-bottom::before {
  position: absolute;
  top: 3px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
}
.bottom-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  column-gap: 1.4rem;
  padding: 0.7rem 0;
}
.bottom-row + .bottom-row {
  border-top: 1px solid var(--line);
}
.bottom-label {
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bottom-flag {
  margin-right: 0.5rem;
  color: var(--ink);
  letter-spacing: 0.14em;
}
.bottom-formula {
  color: var(--dim);
  font: var(--t-note) var(--mono);
  font-variant-numeric: tabular-nums;
}
.bottom-value {
  color: var(--ink);
  font: var(--t-sub) var(--mono);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.ledger-bottom.is-negative .is-headline .bottom-value {
  color: var(--ink);
  font-weight: 500;
}

.ledger-verdict {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--t-lead);
  line-height: 1.55;
  letter-spacing: -0.011em;
  text-wrap: pretty;
}

/* --- controls, fused to the panel above by the 1px margin */
.ledger-params {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.ledger-block {
  padding: clamp(1.2rem, 2.4vw, 2.2rem);
  background: var(--carbon);
}
.ledger-cases {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
/* company marks are grayscale everywhere the ledger draws them */
.ledger-cases .chip-logo img {
  filter: grayscale(1) contrast(0.92);
}
.ledger-cases-note {
  margin: 0.6rem 0 0;
  color: var(--dim);
  font: var(--t-micro) var(--mono);
}
.ledger-basis-note {
  margin: 0.7rem 0 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
  line-height: 1.55;
}
.ledger-basis-static {
  margin: 0.4rem 0 0;
  color: var(--soft);
  font: var(--t-note) var(--mono);
  line-height: 1.55;
}
.ledger-sources {
  display: grid;
  gap: 0.45rem;
  margin: 1.1rem 0 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}
.ledger-sources p {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin: 0;
  color: var(--muted);
  font: var(--t-note) var(--mono);
}
.ledger-sources a {
  color: var(--soft);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}
.ledger-sources a:hover {
  border-bottom-color: var(--soft);
}
.ledger-reset {
  position: relative;
  margin-top: 1rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.ledger-reset:hover,
.ledger-reset:focus-visible {
  color: var(--ink);
}
/* the same wiping hairline the basis buttons carry, so the one control that
   discards the reader's edits does not read as a third label */
.ledger-reset::after {
  position: absolute;
  right: 0;
  bottom: -0.25rem;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.ledger-reset:hover::after,
.ledger-reset:focus-visible::after {
  transform: scaleX(1);
}

.ledger-note {
  display: grid;
  grid-template-columns: 0.9fr 2.1fr;
  gap: 2rem;
  margin-top: 2.6rem;
}
.note-body .note-exclusions {
  margin: 0 0 1rem;
  color: var(--dim);
  font: var(--t-note) var(--mono);
  line-height: 1.7;
  break-inside: avoid;
}

@media (max-width: 960px) {
  .ledger > header {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .ledger > header p {
    justify-self: start;
  }
  .ledger-cols,
  .ledger-params,
  .ledger-note {
    grid-template-columns: 1fr;
  }
  .ledger-note {
    gap: 1.2rem;
  }
  button.ledger-row {
    min-height: 2.75rem;
  }
  .bottom-row {
    grid-template-columns: 1fr;
    row-gap: 0.2rem;
  }
  .bottom-value {
    text-align: left;
  }
}

@media (max-width: 720px) {
  .step-head {
    flex-wrap: wrap;
  }
  .step-head h3 {
    flex: 1 1 auto;
  }
  .step-head p {
    flex: 1 0 100%;
    order: 3;
  }
  .step-head .step-unit,
  .step-head .step-period {
    order: 2;
  }
}

@media (max-width: 560px) {
  .ledger {
    padding-top: 4.5rem;
    padding-bottom: 5rem;
  }
  .ledger-visual,
  .ledger-block {
    padding: 1rem;
  }
  .ledger-row {
    grid-template-columns: 1.2rem 1fr auto;
  }
  .ledger-return .ledger-row {
    grid-template-columns: 1fr auto;
  }
  .row-amount {
    grid-column: 2 / -1;
  }
  .ledger-return .row-amount {
    grid-column: 1 / -1;
  }
  .hurdle-track {
    height: 5rem;
  }
}

/* the ledger region is appended after the reduced-motion allowlist above, so
   its transitions have to be stripped here to win on source order */
@media (prefers-reduced-motion: reduce) {
  .hurdle-mark,
  button.ledger-row,
  .ledger-reset::after {
    transition: none;
  }
}

/* ---- ledger, restyled as a sticker panel ----------------------------------------- */
.ledger-panel {
  overflow: visible;
}
.ledger-visual {
  padding: var(--pad-card);
  border: 0;
  background: transparent;
}
.ledger-visual > .desk-label:first-child {
  padding-right: 9rem;
}
.ledger-cols {
  gap: var(--gap);
  border: 0;
  background: transparent;
}
.ledger-group {
  border: 1px solid var(--smoke);
  border-radius: var(--r-chip);
  background: var(--void);
}
.ledger-quotient {
  border-color: var(--smoke);
  border-radius: var(--r-chip);
  background: var(--void);
}
.step-head .step-n {
  border-radius: var(--r-pill);
}
.hurdle .fold {
  margin-top: 0.5rem;
  border-top: 0;
}
.hurdle .fold p {
  max-width: 52rem;
}
.ledger-params {
  gap: 0;
  margin-top: 0;
  border: 0;
  border-top: 1px solid var(--smoke);
  background: transparent;
}
.ledger-block {
  padding: var(--pad-card);
  background: transparent;
}
.ledger-block + .ledger-block {
  border-left: 1px solid var(--smoke);
}
.ledger-cases {
  gap: 0.4rem;
  border: 0;
  background: transparent;
}
.ledger-cases .collateral-chip {
  padding: 0.55rem 0.95rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  background: var(--void);
}
/* same specificity as the base chip rule above, so the picked state has to be said again here */
.ledger-cases .collateral-chip.is-on {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--void);
}
.ledger-cases .collateral-chip.is-on .chip-logo img {
  filter: grayscale(1) contrast(0.92) invert(1);
}

/* --- the worksheet reads as an equation: spent ÷ extra profit = return --- */
.ledger-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin: 0 0 1.2rem;
}
.ledger-cases {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.ledger-cases .collateral-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  width: auto;
}
.equation {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: start;
  gap: var(--gap);
}
.eq-op {
  align-self: center;
  color: var(--fog);
  font: 300 var(--t-sub) var(--sans);
}
.eq-tile {
  min-width: 0;
}
.eq-big {
  display: block;
  margin: 0.15rem 0 0.4rem;
  color: var(--paper);
  font: var(--t-sub) var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.eq-tile .ledger-row.is-total,
.q-operands {
  display: none;
}
.eq-tile .ledger-row {
  padding: 0.5rem 0;
}
.eq-tile .step-head {
  margin-bottom: 0.2rem;
}
.eq-tile .ledger-group-hint {
  margin-bottom: 0.6rem;
}
.ledger-quotient {
  margin-top: 0;
  padding: 1.2rem 1.3rem;
}
.ledger-quotient .q-figure {
  margin-top: 0.15rem;
  font-size: clamp(2.6rem, 4.6vw, 3.8rem);
}
.ledger-quotient .q-cushion {
  margin-top: 0.5rem;
}
.ledger-quotient .ledger-group-hint {
  margin: 0.8rem 0 0;
}
.eq-tile.is-updating {
  animation: dossier-update 380ms var(--ease-out) both;
}
.eq-op.is-updating {
  animation: op-pulse 500ms ease-out both;
}
@keyframes op-pulse {
  40% {
    color: var(--paper);
    transform: scale(1.35);
  }
}
.hurdle {
  margin-top: 1.4rem;
}
.ledger-verdict {
  margin-top: 1.4rem;
}
.ledger-visual .fold {
  margin-top: 1rem;
}
.ledger-visual .fold .ledger-bottom {
  margin-top: 0.4rem;
  margin-bottom: 0.8rem;
  border-top: 0;
  padding-top: 0;
}
.ledger-visual .fold .ledger-bottom::before {
  display: none;
}
.ledger-foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem 2rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--smoke);
}
.ledger-foot-row .ledger-sources {
  flex: 1 1 26rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.ledger-foot-row .ledger-reset {
  margin-top: 0.15rem;
}

/* inside a tile the row is three lines: label, then badge and amount, then note */
.eq-tile.ledger-capital .ledger-row {
  grid-template-columns: 1.4rem minmax(0, 1fr) auto;
}
.eq-tile.ledger-return .ledger-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
.eq-tile .row-label {
  grid-column: 2 / -1;
}
.eq-tile.ledger-return .row-label {
  grid-column: 1 / -1;
}
.eq-tile .row-badge {
  grid-column: 2;
  align-self: center;
}
.eq-tile.ledger-return .row-badge {
  grid-column: 1;
}
.eq-tile .row-amount {
  grid-column: 3;
}
.eq-tile.ledger-return .row-amount {
  grid-column: 2;
}
.eq-tile .row-note {
  grid-column: 2 / -1;
}
.eq-tile.ledger-return .row-note {
  grid-column: 1 / -1;
}
.eq-op {
  padding-top: 5.6rem;
}

/* --- the tiles, dumbed down: label, number, hint, lines; notes on demand --- */
.eq-tile {
  display: flex;
  flex-direction: column;
}
.eq-tile .step-head {
  align-items: center;
  margin-bottom: 0.5rem;
}
.eq-tile .step-head h3 {
  color: var(--mist);
  font: 500 var(--t-micro) var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.eq-big {
  margin: 0.2rem 0 0.35rem;
  font-size: clamp(1.9rem, 3vw, 2.5rem);
}
.eq-tile .ledger-group-hint {
  margin: 0 0 0.9rem;
  color: var(--fog);
  font: var(--t-note) var(--sans);
}
.eq-tile .ledger-row {
  padding: 0.55rem 0;
}
.eq-tile .row-label {
  font-size: var(--t-note);
  line-height: 1.4;
}
.eq-tile .row-amount {
  font-size: var(--t-row);
}
.eq-tile .row-note {
  display: none;
  margin-top: 0.15rem;
}
.eq-tile.is-open .row-note {
  display: block;
}
.tile-notes {
  order: 99;
  align-self: flex-start;
  margin-top: 0.9rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--smoke);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--fog);
  font: var(--t-micro) var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.tile-notes:hover,
.tile-notes[aria-expanded="true"] {
  border-color: var(--paper);
  color: var(--paper);
}
.ledger-quotient .q-figure {
  font-size: clamp(3rem, 5.4vw, 4.6rem);
}
.ledger-quotient .q-cushion {
  margin-top: 0.6rem;
  color: var(--mist);
}
.eq-op {
  padding-top: 3.1rem;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
}
.hurdle {
  margin-top: 2rem;
}
.hurdle .step-head p {
  max-width: 54ch;
}
.ledger-verdict {
  max-width: 66ch;
  margin-top: 1.7rem;
  padding-top: 1.5rem;
  font-size: var(--t-body);
  line-height: 1.65;
}

/* ---- sources ----------------------------------------------------------------------- */
.sources ol {
  margin: 0;
  padding: 0.4rem 1.4rem;
  list-style: none;
}
.sources li {
  display: grid;
  grid-template-columns: 2.4rem 1fr auto;
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--smoke);
  font: var(--t-row) var(--mono);
}
.sources li:first-child {
  border-top: 0;
}
.sources li span,
.sources time {
  color: var(--fog);
}
.sources a {
  color: var(--bone);
  text-decoration: none;
}
.sources a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* ---- footer ------------------------------------------------------------------------ */
footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem 2rem;
  width: min(100%, var(--max));
  margin: var(--section) auto 0;
  padding: 2rem var(--pad) 3rem;
  border-top: 1px solid var(--smoke);
  color: var(--fog);
  font: var(--t-micro) var(--mono);
}
.footer-brand {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.7rem;
}
.footer-brand small {
  grid-column: 1 / -1;
  margin-top: 0.6rem;
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.footer-social {
  display: flex;
  gap: 0.5rem;
}
.footer-copy {
  justify-self: end;
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
}

/* ---- reveal once, as a block enters the viewport ------------------------------------ */
.reveal-target {
  opacity: 0;
  transform: translateY(15px);
  transition:
    opacity 720ms var(--ease-out),
    transform 720ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ---- responsive ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .sec-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .deck {
    justify-self: start;
  }
  .model-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .equation {
    grid-template-columns: 1fr;
  }
  .eq-op {
    justify-self: center;
  }
  .fold-cols {
    columns: 1;
  }
  .param-block + .param-block,
  .ledger-block + .ledger-block {
    border-top: 1px solid var(--smoke);
    border-left: 0;
  }
}
@media (max-width: 800px) {
  .rail {
    display: none;
  }
  /* no rail beside them, so no hairline between */
  .masthead-social {
    padding-left: 0;
    border-left: 0;
  }
  /* the map becomes an index: cards in a grid, the legs and the centre cat gone */
  .map-toolbar {
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.8rem 1rem;
  }
  .map-status {
    white-space: nowrap;
  }
  .filters {
    flex-wrap: wrap;
  }
  .map-layout {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .company-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--gap);
    min-height: 0;
    padding: var(--gap);
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--smoke);
    background-image: none;
  }
  .map-web,
  .map-core {
    display: none;
  }
  .company-grid .company-card {
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    min-width: 0;
    min-height: 8.5rem;
    background: var(--void);
    transform: none;
  }
  .company-grid .company-card:hover,
  .company-grid .company-card.is-active {
    transform: translateY(-3px);
  }
  .company-card small,
  .company-card strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .company-detail {
    min-height: 0;
  }
  .structure .sec-head,
  .ledger .sec-head {
    margin-bottom: 3.6rem;
  }
  .hero {
    min-height: 100svh;
  }
  .hero-visual {
    left: -3vw;
    width: clamp(15rem, 66vw, 24rem);
  }
  .flyer {
    top: 10vh;
    right: 2vw;
    width: clamp(11rem, 46vw, 16rem);
  }
  .bang-fly {
    width: 2.2rem;
    height: 2.2rem;
  }
  .trace {
    right: 1vw;
    bottom: 4vh;
    width: 11rem;
  }
  .s2,
  .d3 {
    display: none;
  }
  .panel-cat {
    right: 1.2rem;
    width: 4.8rem;
  }
  .desk-visual > .desk-label:first-child,
  .ledger-visual > .desk-label:first-child {
    padding-right: 5.5rem;
  }
  .post-peek {
    right: 1.2rem;
    width: 4.8rem;
  }
  footer {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .footer-copy {
    justify-self: start;
  }
}
@media (max-width: 520px) {
  .company-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .face-tile {
    padding: 1rem 0.5rem 0.9rem;
  }
  .face-tile small {
    font-size: var(--t-micro);
    letter-spacing: 0.08em;
  }
  .sources li {
    grid-template-columns: 2rem 1fr;
  }
  .sources time {
    display: none;
  }
}

/* ---- motion, after the component library the user pointed at ------------------------
   Each effect sits on the thing it explains (DESIGN.md, Motion). Everything
   moves by transform, opacity or clip-path; arrivals ease out, anything that
   travels while it is on screen eases in and out; hover motion answers only
   a real pointer. The gentle variants for reduced motion close the file.     */

/* section titles rise a word at a time out of their own line, once (Stagger
   Text). The mask reaches past the line box, so nothing at rest is cut, and
   script.js splits the words only when motion is allowed. */
.title-word {
  display: inline-block;
  overflow: hidden;
  padding: 0.1em 0.06em 0.14em;
  margin: -0.1em -0.06em -0.14em;
  vertical-align: top;
}
.title-word > span {
  display: inline-block;
  transform: translateY(118%);
  transition: transform var(--dur-enter) var(--ease-out);
  transition-delay: calc(80ms + var(--w, 0) * 50ms);
}
.is-revealed .title-word > span {
  transform: none;
}

/* the worksheet's figures turn like an odometer, one wheel per digit (Animated
   Number), and roll up from zero the first time the panel comes into view
   (Stats Counter). The wheels are drawn by CSS content inside an aria-hidden
   face, so the element's text is still exactly the figure. */
.odo {
  display: inline-block;
  white-space: nowrap;
}
.odo-cell {
  display: inline-block;
  /* one line of the figure's own type, so the wheels take exactly the box
     the text took (1.3em is DM Mono's normal line where lh is unknown) */
  height: 1.3em;
  height: 1lh;
  vertical-align: top;
  /* cut above and below the wheel, never beside it */
  clip-path: inset(0 -0.25em);
}
.odo-cell:not(.odo-digit)::before {
  content: attr(data-c);
}
.odo-strip {
  display: block;
  transition: transform var(--dur-roll) var(--ease-out);
}
.odo-strip::before {
  display: block;
  content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
  white-space: pre;
}

/* the selection slides between the filters as one inverted sticker (Spotlight
   Navbar). The thumb is Paper in difference mode, so it flips whatever it
   passes over: selection is inversion everywhere on the page. It exists only
   in flight; at rest the picked pill is drawn as before, because inverted
   white type rasterises a shade heavier than black type on Paper. */
.filters.has-thumb {
  position: relative;
}
.filters.is-sliding {
  isolation: isolate;
}
.filters.is-sliding button.is-active {
  border-color: transparent;
  background: transparent;
  color: var(--paper);
}
/* the hand-offs between pill and thumb are instant: the hover fade would
   show both halves of the swap as a grey pill */
.filters.is-sliding button,
.filters.is-landing button {
  transition: none;
}
.filters-thumb {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: var(--paper);
  opacity: 0;
  pointer-events: none;
  transition: clip-path var(--dur-ui) var(--ease-in-out);
}
/* the blend is switched on only in flight: at rest a blend mode, even on an
   invisible layer, makes the whole panel a blending group and costs every
   line of type in it its subpixel edges */
.filters.is-sliding .filters-thumb {
  opacity: 1;
  mix-blend-mode: difference;
}

/* a panel's hairline catches the light where the pointer is (Glow Border
   Card, made flat: no blur and no colour, only the edge itself brightening) */
.edge-light {
  position: absolute;
  z-index: 2;
  inset: -1px;
  padding: 1px;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-mask:
    linear-gradient(var(--void) 0 0) content-box,
    linear-gradient(var(--void) 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(var(--void) 0 0) content-box,
    linear-gradient(var(--void) 0 0);
  mask-composite: exclude;
  transition: opacity var(--dur-ui) ease;
}
.edge-light i {
  position: absolute;
  top: 0;
  left: 0;
  width: 26rem;
  height: 26rem;
  margin: -13rem 0 0 -13rem;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 85%), rgb(255 255 255 / 0%));
}
.is-edge-lit > .edge-light {
  opacity: 1;
}
/* the map panel clips its constellation to the rounded corners; the clip
   reaches one pixel further, onto the hairline, so the light can sit on it */
.map-panel {
  overflow: clip;
  overflow-clip-margin: 1px;
}

/* the post's cat waits behind the card and peeks over it when the post comes
   into view; the card is in front, so the rise reads as coming up from
   behind its edge */
.post-peek {
  transition: translate 720ms var(--ease-out);
}
.post-peek.is-tucked {
  translate: 0 100%;
}

/* the glide row exists only where there is a pointer to follow */
.sources li.glide {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  /* the paper trail's rows share one Graphite highlight that glides to the
     row under the pointer (Highlight Grid); a lit row clicks as its link */
  .sources ol {
    isolation: isolate;
  }
  .sources li.glide {
    position: absolute;
    z-index: 0;
    inset: 0 0.55rem;
    display: block;
    padding: 0;
    border: 0;
    background: var(--graphite);
    opacity: 0;
    pointer-events: none;
    transition:
      clip-path var(--dur-ui) var(--ease-in-out),
      opacity var(--dur-ui) ease;
  }
  .sources ol.is-gliding li.glide {
    opacity: 1;
  }
  .sources li:not(.glide) {
    position: relative;
    z-index: 1;
    cursor: pointer;
  }
  .sources li:hover a {
    color: var(--paper);
  }

  /* links draw their underline in from the left and send it out to the
     right (Line Hover Link, the slide) */
  .sources a,
  .origin-kicker a,
  .ledger-sources a {
    position: relative;
  }
  .sources a {
    justify-self: start;
  }
  .sources a:hover {
    text-decoration: none;
  }
  .sources a::after,
  .origin-kicker a::after,
  .ledger-sources a::after {
    position: absolute;
    right: 0;
    bottom: -0.25em;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--dur-ui) var(--ease-out);
  }
  .ledger-sources a::after {
    bottom: -1px;
  }
  .sources li:hover a::after,
  .origin-kicker a:hover::after,
  .ledger-sources a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
  }
}
.sources a:focus-visible::after,
.origin-kicker a:focus-visible::after,
.ledger-sources a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ---- reduced motion: faces still change, nothing else moves ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .mascot *,
  .hero-visual,
  .flyer,
  .hero-title,
  .sparkle,
  .bang-fly,
  .trace-line,
  .trace-chip,
  .hero-down,
  .has-prop .gpu-card,
  .gpu-card.is-spinning .gpu-fan,
  .company-detail.is-updating > *,
  .eq-tile.is-updating,
  .eq-op.is-updating,
  .btn-down span,
  .map-web,
  .map-edge {
    animation: none !important;
  }
  .mascot .eyes,
  .face-tile,
  .btn,
  .xpost,
  .company-card,
  .filters button,
  .hurdle-mark,
  button.ledger-row {
    transition: none !important;
  }
  .trace-line {
    stroke-dashoffset: 0;
  }
  .trace-chip,
  .bang-fly {
    opacity: 1;
  }
  .xpost-link:hover .xpost,
  .face-tile:hover,
  .btn:hover,
  .face-tile:active,
  .btn:active {
    transform: none;
  }
  .reveal-target {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* the gentle variants of the motion block: nothing travels, the row
     highlight and the underlines fade where they stand, figures change at
     once. script.js leaves the titles whole, the figures as plain text and
     the pills unmagnetised; these rules hold if the setting flips mid-visit. */
  .title-word > span {
    transform: none;
    transition: none;
  }
  .odo-strip,
  .filters-thumb,
  .post-peek {
    transition: none;
  }
  .post-peek.is-tucked {
    translate: none;
  }
  .edge-light {
    display: none;
  }
  .sources li.glide {
    transition: opacity 150ms ease;
  }
  .sources a::after,
  .origin-kicker a::after,
  .ledger-sources a::after {
    transform: none;
    opacity: 0;
    transition: opacity 150ms ease;
  }
  .sources li:hover a::after,
  .origin-kicker a:hover::after,
  .ledger-sources a:hover::after,
  .sources a:focus-visible::after,
  .origin-kicker a:focus-visible::after,
  .ledger-sources a:focus-visible::after {
    opacity: 1;
  }
}