@font-face {
  font-family: Manrope;
  src: url("./assets/manrope.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: Lora;
  src: url("./assets/lora-italic.ttf") format("truetype");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}

/* The landing's names for Orbit's tokens (orbit/color.css, orbit/tokens.css).
 * Every colour here is a token or a mix of tokens; the few that Orbit has no
 * name for yet are listed last and are the landing's remaining debt. */
:root {
  color-scheme: dark;

  --bg: var(--cb-surface-0);
  --ink: var(--cb-text-primary);
  --ink-2: var(--cb-text-secondary);
  --ink-3: var(--cb-text-muted);
  --line: var(--cb-border-subtle);
  --human: var(--cb-accent-fill);
  --accent: var(--cb-accent-fill);
  --accent-2: var(--cb-accent-fill-hover);
  --accent-ink: var(--cb-accent-ink);
  --agent: var(--cb-secondary-mark);
  --idea: var(--cb-idea-solid);
  --money: var(--cb-cover-amber);
  --client: var(--cb-cover-ember);
  --project: var(--cb-cover-moss);
  --value: var(--cb-accent-soft);
  --glass: color-mix(in oklch, var(--cb-surface-0) 58%, transparent);

  /* Orbit's shadow ink, made a colour once so every scrim and shadow below
   * can mix it: the one colour function this stylesheet still writes. */
  --shade: oklch(var(--cb-shadow-ink) / 100%);
  --font: var(--cb-font-ui);
  --serif: var(--cb-font-editorial);
  --mono: var(--cb-font-mono);
  --ease: var(--cb-ease-standard);
  --header-h: 72px;
  --dim: 0;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body.explore {
  overflow: hidden;
}

a {
  color: inherit;
}

.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  background: var(--ink);
  color: var(--bg);
  padding: var(--cb-space-2) var(--cb-space-3);
  border-radius: 6px;
}

.skip-link:focus {
  top: 12px;
}

/* ---------------------------------------------------------------- stage */
.stage {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  cursor: grab;
  touch-action: none;
}

.stage canvas:active {
  cursor: grabbing;
}

.stage canvas:focus-visible {
  box-shadow: inset 0 0 0 2px
    color-mix(in oklch, var(--cb-info-text) 60%, transparent);
}

.stage-dim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      color-mix(in oklch, var(--shade) 92%, transparent) 0%,
      color-mix(in oklch, var(--shade) 55%, transparent) 45%,
      color-mix(in oklch, var(--shade) 10%, transparent) 100%
    ),
    color-mix(in oklch, var(--shade) 40%, transparent);
  opacity: var(--dim);
  transition: opacity 0.5s var(--ease);
}

.stage-dim.mirror {
  background:
    linear-gradient(
      270deg,
      color-mix(in oklch, var(--shade) 92%, transparent) 0%,
      color-mix(in oklch, var(--shade) 55%, transparent) 45%,
      color-mix(in oklch, var(--shade) 10%, transparent) 100%
    ),
    color-mix(in oklch, var(--shade) 40%, transparent);
}

.stage-dim.flat {
  background: color-mix(in oklch, var(--shade) 72%, transparent);
}

.labels {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.label {
  position: absolute;
  transform: translate(14px, -50%);
  opacity: 0;
  transition: opacity 0.35s;
  display: flex;
  align-items: center;
  gap: 9px;
  max-width: 218px;
  padding: 6px var(--cb-space-3) var(--cb-space-2) 9px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--cb-surface-0) 82%, transparent),
    color-mix(in oklch, var(--shade) 88%, transparent)
  );
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 16%, transparent);
  box-shadow:
    0 8px 22px color-mix(in oklch, var(--shade) 50%, transparent),
    inset 0 1px 0 color-mix(in oklch, var(--cb-text-primary) 5%, transparent);
  backdrop-filter: blur(9px);

  --hue: var(--accent);
  --fill: 0;
}

.label.on {
  opacity: 1;
}

/* A hairline back to the thing it names, so a plate is never orphaned. */
.label::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  width: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--hue));
  opacity: 0.55;
}

.label .lbl-mark {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--hue);
  box-shadow: 0 0 10px color-mix(in srgb, var(--hue) 70%, transparent);
}

/* A person's mark is a ring that fills with the work they have had accepted. */
.label.person .lbl-mark {
  width: 13px;
  height: 13px;
  background: conic-gradient(
    var(--hue) calc(var(--fill) * 360deg),
    color-mix(in oklch, var(--cb-text-secondary) 18%, transparent) 0
  );
  box-shadow: none;
  position: relative;
}

.label.person .lbl-mark::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--shade) 95%, transparent);
}

.label.project .lbl-mark {
  border-radius: 2px;
  transform: rotate(45deg);
}

.label.agent .lbl-mark {
  width: 7px;
  height: 7px;
  background: none;
  border: 1.5px solid var(--hue);
}

.label .lbl-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.label .lbl-name {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: -0.008em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label .lbl-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.label .lbl-chip {
  font-family: var(--mono);
  font-style: normal;
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hue);
  border: 1px solid color-mix(in srgb, var(--hue) 38%, transparent);
  background: color-mix(in srgb, var(--hue) 12%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
  flex: none;
}

.label .lbl-chip[hidden] {
  display: none;
}

.label .lbl-figure {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.label .lbl-figure b {
  font-weight: 600;
  font-size: 11px;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

.label .lbl-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
  overflow: hidden;
}

.label .lbl-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--hue) 45%, transparent),
    var(--hue)
  );
  transition: width 0.6s var(--ease);
}

.label.projected {
  --hue: var(--idea);

  border-style: dashed;
}

/* Cities are context, not subjects: no plate, nothing to compete with. */
.label.city {
  background: none;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0 0 0 2px;
  max-width: 160px;
}

.label.city::before {
  display: none;
}

.label.city .lbl-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 12px;
  color: color-mix(in oklch, var(--cb-text-secondary) 60%, transparent);
}

.label.city .lbl-where {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  color: color-mix(in oklch, var(--cb-text-secondary) 38%, transparent);
}

.tooltip {
  position: absolute;
  pointer-events: none;
  transform: translate(14px, 14px);
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  padding: 9px var(--cb-space-3);
  border-radius: var(--cb-radius-2);
  font-size: 13px;
  line-height: 1.35;
  max-width: 260px;
  z-index: 3;
}

.tooltip .mono {
  display: block;
  margin-bottom: 2px;
}

/* --------------------------------------------------------------- header */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  gap: 24px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--shade) 80%, transparent),
    transparent
  );
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 18px;
}

.main-nav {
  display: flex;
  gap: 26px;
}

.main-nav a {
  text-decoration: none;
  font-size: 13.5px;
  color: var(--ink-2);
  transition: color 0.2s;
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--ink);
}

.header-actions {
  display: flex;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-2);
  padding: 11px 18px;
  border-radius: var(--cb-radius-pill);
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform 0.25s var(--ease),
    background 0.25s,
    border-color 0.25s,
    color 0.25s;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-solid {
  background: var(--ink);
  color: var(--bg);
}

.btn-solid:hover {
  background: var(--cb-text-primary);
}

.btn-ghost {
  border-color: color-mix(in oklch, var(--cb-text-secondary) 30%, transparent);
  color: var(--ink);
  background: color-mix(in oklch, var(--cb-surface-0) 35%, transparent);
  backdrop-filter: blur(8px);
}

.btn-ghost:hover {
  border-color: color-mix(in oklch, var(--cb-text-secondary) 60%, transparent);
}

.btn-link {
  padding-left: 6px;
  padding-right: 6px;
  color: var(--ink-2);
}

.btn-link:hover {
  color: var(--ink);
}

kbd {
  font-family: var(--mono);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--cb-radius-1);
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ hud */
.hud {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.45s var(--ease);
}

.hud.hidden {
  opacity: 0;
}

.hud > * {
  position: absolute;
}

.hud-top-left {
  left: 28px;
  top: calc(var(--header-h) + 14px);
}

.hud-clock {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-utc {
  color: var(--ink);
  font-size: 13px;
}

.hud-sub {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 10.5px;
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-cover-coral);
  box-shadow: 0 0 0 0
    color-mix(in oklch, var(--cb-cover-coral) 60%, transparent);
  animation: beat 1.6s infinite;
}

.live-dot.projection {
  background: var(--agent);
  box-shadow: 0 0 0 0 color-mix(in oklch, var(--cb-info-text) 60%, transparent);
  animation: none;
}

@keyframes beat {
  0% {
    box-shadow: 0 0 0 0
      color-mix(in oklch, var(--cb-cover-coral) 65%, transparent);
  }

  70% {
    box-shadow: 0 0 0 9px transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

.hud-feed {
  right: 28px;
  bottom: 118px;
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  justify-content: flex-end;
}

@keyframes rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}

.hud-bottom {
  left: 28px;
  right: 28px;
  bottom: 26px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--cb-space-5);
}

.timeline {
  pointer-events: auto;
  max-width: 620px;
  width: 100%;
  justify-self: center;
  cursor: pointer;
  outline: none;
}

.timeline:focus-visible .timeline-head {
  box-shadow: 0 0 0 4px
    color-mix(in oklch, var(--cb-info-text) 35%, transparent);
}

.timeline-track {
  position: relative;
  height: 18px;
}

.timeline-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  height: 1px;
  background: color-mix(in oklch, var(--cb-text-secondary) 25%, transparent);
}

.timeline-live {
  position: absolute;
  left: 0;
  top: 8px;
  height: 1px;
  width: 44%;
  background: var(--cb-danger-solid);
}

.timeline-now {
  position: absolute;
  top: 2px;
  left: 44%;
  width: 1px;
  height: 13px;
  background: var(--ink);
}

.timeline-now span {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  color: var(--ink);
  font-size: 9.5px;
}

.timeline-head {
  position: absolute;
  top: 3px;
  left: 0;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 12px
    color-mix(in oklch, var(--cb-text-primary) 60%, transparent);
  transition: box-shadow 0.2s;
}

.timeline-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--ink-3);
  font-size: 10px;
}

.sym {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  background: var(--human);
  box-shadow: 0 0 8px var(--human);
}

/* ----------------------------------------------------------------- main */
main {
  position: relative;
  z-index: 5;
  pointer-events: none;
}

main a,
main button,
.story-inner,
.roles,
.hero-copy,
.site-footer {
  pointer-events: auto;
}

section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--header-h) + 40px) 28px 80px;
}

.story-inner {
  max-width: 560px;
  margin-left: 6vw;
}

.story-right {
  margin-left: auto;
  margin-right: 6vw;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

h1,
h2 {
  margin: 0 0 22px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

h1 {
  font-size: clamp(40px, 5.4vw, 74px);
}

h2 {
  font-size: clamp(32px, 3.6vw, 50px);
}

h1 em,
h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--cb-text-primary);
}

h3 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

p {
  margin: 0 0 16px;
  color: var(--ink-2);
}

p.large {
  font-size: 20px;
  line-height: 1.45;
  color: var(--ink);
}

.lede {
  font-size: 19px;
  max-width: 520px;
  line-height: 1.5;
}

/* Reveal on scroll */
.story-inner > *,
.role {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.8s var(--ease),
    transform 0.8s var(--ease);
}

.in .story-inner > *,
.in .role {
  opacity: 1;
  transform: none;
}

.in .story-inner > *:nth-child(2) {
  transition-delay: 0.08s;
}

.in .story-inner > *:nth-child(3) {
  transition-delay: 0.16s;
}

.in .story-inner > *:nth-child(4) {
  transition-delay: 0.24s;
}

.in .story-inner > *:nth-child(5) {
  transition-delay: 0.32s;
}

.in .role:nth-child(2) {
  transition-delay: 0.12s;
}

.in .role:nth-child(3) {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .story-inner > *,
  .role {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ----------------------------------------------------------------- hero */
.hero {
  align-items: center;
  pointer-events: none;
}

.hero-copy {
  max-width: 640px;
  margin-left: 6vw;
  opacity: 0;
  transform: translateY(16px);
  animation: enter 1.1s var(--ease) 0.2s forwards;
}

@keyframes enter {
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 26px;
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cb-space-2);
  color: var(--ink-3);
  font-size: 10px;
}

.scroll-hint i {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--ink-2), transparent);
  animation: drip 1.8s infinite;
}

@keyframes drip {
  from {
    transform: scaleY(0);
    transform-origin: top;
  }

  to {
    transform: scaleY(1);
    transform-origin: top;
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- story */
.points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 18px;
}

.points li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--cb-space-3);
  align-items: start;
  color: var(--ink-2);
}

.points li .sym {
  margin-top: var(--cb-space-2);
}

.points strong {
  color: var(--ink);
  font-weight: 600;
}

.points.plain li {
  grid-template-columns: 1fr;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  font-size: 17px;
}

.lifecycle {
  list-style: none;
  padding: 0;
  margin: var(--cb-space-2) 0 0;
  display: grid;
  gap: 2px;
}

.lifecycle li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 6px;
  color: var(--ink-3);
  transition:
    color 0.3s,
    background 0.3s;
}

.lifecycle li small {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.lifecycle li.done {
  color: var(--ink-2);
}

.lifecycle li.active {
  color: var(--ink);
  background: color-mix(in oklch, var(--cb-secondary-fill) 8%, transparent);
}

.lifecycle li.active small {
  color: var(--ink-2);
}

.roles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  width: min(1100px, 100%);
  margin: 0 auto;
}

.role {
  position: relative;
  background: var(--glass);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  border-radius: 18px;
  padding: 26px 26px 22px;
  transition:
    border-color 0.3s,
    transform 0.4s var(--ease);
}

.role:hover {
  border-color: color-mix(in oklch, var(--cb-text-secondary) 40%, transparent);
  transform: translateY(-4px);
}

.role h3 {
  margin: var(--cb-space-3) 0 10px;
  font-size: 26px;
}

.role p {
  font-size: 15.5px;
  min-height: 92px;
}

.role ul {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--ink-3);
  font-size: 10.5px;
  display: grid;
  gap: 6px;
}

.role ul li::before {
  content: "— ";
}

.figures {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin: 26px 0 14px;
}

.figures div {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.figures dt {
  color: var(--ink-3);
  font-size: 10px;
}

.figures dd {
  margin: var(--cb-space-1) 0 0;
  font-size: 40px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
}

.figures dd small {
  font-size: 15px;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 6px;
}

/* ----------------------------------------------------------------- join */
.join {
  flex-direction: column;
  justify-content: center;
  gap: 60px;
  padding-bottom: 40px;
}

.site-footer {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--cb-space-5);
  flex-wrap: wrap;
  color: var(--ink-3);
  font-size: 10px;
  text-transform: none;
  letter-spacing: 0.06em;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* What Contribuddha is and where its prices and legal pages are, in the
   footer every visitor reaches and in the page's no-script text. */
.footer-about {
  flex-basis: 100%;
  max-width: 72ch;
  margin: 0;
  font-family: var(--cb-font-ui);
  font-size: var(--cb-text-xs);
  letter-spacing: normal;
  line-height: var(--cb-leading-prose);
}

.footer-links,
.noscript nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-2) var(--cb-space-5);
}

.noscript {
  position: relative;
  z-index: 10;
  max-width: 72ch;
  padding: calc(var(--header-h) + var(--cb-space-5)) var(--cb-space-5) 0;
  pointer-events: auto;
}

/* ------------------------------------------------------------ explore */
body.explore main,
body.explore .scroll-hint {
  display: none;
}

body.explore .stage-dim {
  opacity: 0 !important;
}

/* ----------------------------------------------------------- responsive */
@media (width <= 1100px) {
  .roles {
    grid-template-columns: 1fr;
    max-width: 560px;
  }

  .role p {
    min-height: 0;
  }
}

@media (width <= 860px) {
  :root {
    --header-h: 60px;
  }

  .main-nav,
  #explore-btn {
    display: none;
  }

  .site-header {
    padding: 0 18px;
  }

  section {
    padding-left: 18px;
    padding-right: 18px;
  }

  .story-inner,
  .story-right,
  .hero-copy {
    margin-left: 0;
    margin-right: 0;
  }

  .hero {
    align-items: flex-end;
    padding-bottom: 150px;
  }

  .hero-copy {
    max-width: 100%;
  }

  h1 {
    font-size: clamp(38px, 11vw, 56px);
  }

  .hud-bottom {
    left: 18px;
    right: 18px;
    bottom: 18px;
    grid-template-columns: auto 1fr;
  }

  .stage-dim,
  .stage-dim.mirror {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--shade) 10%, transparent) 0%,
      color-mix(in oklch, var(--shade) 85%, transparent) 60%
    );
  }

  .panel {
    inset: auto var(--cb-space-3) 90px;
    width: auto;
    max-height: 50vh;
  }

  .lifecycle li {
    grid-template-columns: 110px 1fr;
  }

  .scroll-hint {
    display: none;
  }
}

/* --------------------------------------------------------- planet slide */
.planet-slide {
  pointer-events: none;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 110px;
}

.planet-hint {
  position: absolute;
  left: 50%;
  bottom: 168px;
  transform: translateX(-50%);
  color: var(--ink-3);
  font-size: 10px;
  white-space: nowrap;
  transition: opacity 0.6s;
}

.planet-hint.faded {
  opacity: 0;
}

.planet-slide .scroll-hint {
  pointer-events: auto;
  text-decoration: none;
  bottom: 110px;
}

.hero .hero-actions .btn-solid span {
  font-size: 12px;
}

@media (width <= 860px) {
  .planet-hint {
    bottom: 150px;
    font-size: 9px;
    white-space: normal;
    text-align: center;
    width: 80%;
  }
}

/* The Dispatch stays on the hero. It is the one thing on the first screen that
   proves the page is reading a real record, and hiding it there meant most
   visitors never saw it work at all. It runs compact: masthead, scoreboard,
   front page and wire, without the column. */

.hud.hero .desk-earlier {
  display: none;
}

.hud.hero .hud-feed {
  top: auto;
  bottom: 108px;
  height: auto;
  max-height: 46vh;
}

.cities-off .label.city {
  display: none;
}

/* ----------------------------------------------------------------- card */
.card {
  position: fixed;
  left: 0;
  top: 0;
  width: 320px;
  max-height: 56vh;
  display: flex;
  flex-direction: column;
  z-index: 15;
  background: color-mix(in oklch, var(--shade) 72%, transparent);
  border: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(1.2);
  border-radius: 16px;
  overflow: hidden;
  animation: rise 0.4s var(--ease);
  box-shadow: 0 30px 80px color-mix(in oklch, var(--shade) 45%, transparent);
}

.card-head {
  position: relative;
  padding: 18px 22px var(--cb-space-3);
}

.card-head h3 {
  margin: var(--cb-space-1) 0 2px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding-right: 30px;
}

.card-kind {
  font-size: 10px;
  color: var(--ink-3);
}

.card-sub {
  margin: 0;
  color: var(--ink-2);
  font-size: 13.5px;
}

.card-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  cursor: pointer;
}

.card-tabs {
  display: flex;
  gap: var(--cb-space-1);
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
}

.card-tabs button {
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px var(--cb-space-2);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.card-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--ink);
}

.card-body {
  padding: var(--cb-space-3) 22px 16px;
  overflow: auto;
  font-size: 13.5px;
  color: var(--ink-2);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--cb-space-3);
  padding: var(--cb-space-2) 0;
  border-top: 1px solid var(--line);
}

.row:first-child {
  border-top: 0;
}

.row b {
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.state {
  display: inline-block;
  padding: 2px var(--cb-space-2);
  border-radius: var(--cb-radius-pill);
  border: 1px solid currentcolor;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.stats3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: var(--cb-space-2) 0 var(--cb-space-3);
}

.stats3 div {
  padding: 10px var(--cb-space-3);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.stats3 b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.stats3 span {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.missions {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: var(--cb-space-1);
  margin: 10px 0 var(--cb-space-1);
}

.missions i {
  height: 8px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 18%, transparent);
}

.missions i.ACCEPTED {
  background: var(--project);
}

.missions i.PENDING_REVIEW {
  background: var(--agent);
}

.missions i.AVAILABLE {
  background: var(--human);
}

.feed {
  list-style: none;
  margin: 0;
  padding: 0;
}

.feed li {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  gap: 10px;
  padding: var(--cb-space-2) 0;
  border-top: 1px solid var(--line);
  align-items: baseline;
}

.feed li:first-child {
  border-top: 0;
}

.feed .when {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.feed .who {
  color: var(--ink);
  font-weight: 600;
}

.feed .amt {
  color: var(--money);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.feed .amt.in {
  color: var(--project);
}

.feed .tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agent);
}

.stake {
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 10px;
  padding: var(--cb-space-2) 0;
  border-top: 1px solid var(--line);
  align-items: center;
  cursor: pointer;
}

.stake:first-child {
  border-top: 0;
}

.stake .bar {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 14%, transparent);
  margin-top: 6px;
  overflow: hidden;
}

.stake .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--human), var(--money));
}

.stake b {
  color: var(--ink);
  font-weight: 600;
}

.stake .pct {
  text-align: right;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.empty {
  color: var(--ink-3);
  padding: 10px 0;
}

/* ------------------------------------------------------------ flows text */

.flows {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: var(--cb-space-2);
  color: var(--ink-2);
  font-size: 10.5px;
}

.label.flow {
  font-size: 9.5px;
  letter-spacing: 0.12em;
  padding: 2px 6px;
  border-radius: var(--cb-radius-1);
  background: color-mix(in oklch, var(--shade) 55%, transparent);
  color: var(--ink);
  transform: translate(8px, -50%);
}

.label.flow.money {
  color: var(--money, var(--cb-accent-fill-hover));
}

.label.flow.agent {
  color: var(--agent);
}

.label.flow.task {
  color: var(--cb-warning-solid);
}

.label.client {
  color: var(--cb-warning-solid);
}

.lifecycle li {
  grid-template-columns: 1fr;
  padding: 5px 10px;
}

.story-inner p {
  font-size: 17px;
  max-width: 480px;
}

@media (width <= 860px) {
  .card.expanded {
    inset: auto 10px 80px;
    width: auto;
    max-height: 56vh;
  }
}

/* ------------------------------------------------------------ wordmark */
.wordmark {
  font-weight: 600;
  letter-spacing: -0.015em;
}

.brand-mark {
  color: var(--ink);
}

/* ---------------------------------------------------------- story card */
.story .story-inner {
  background: color-mix(in oklch, var(--shade) 66%, transparent);
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  backdrop-filter: blur(16px) saturate(1.1);
  border-radius: var(--cb-radius-5);
  padding: 30px var(--cb-space-8) 26px;
  max-width: 470px;
  box-shadow: 0 30px 80px color-mix(in oklch, var(--shade) 35%, transparent);
}

.story .story-inner h2 {
  font-size: clamp(28px, 2.8vw, 38px);
  margin-bottom: 14px;
}

.story .story-inner p {
  font-size: 15.5px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.story-caption {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  min-height: 52px;
  font-size: 11px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink);
  opacity: 0.35;
  transition: opacity 0.4s;
}

.story-caption.on {
  opacity: 1;
}

.story-caption i {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--human);
  box-shadow: 0 0 10px var(--human);
  animation: beat 1.6s infinite;
}

.story-caption span {
  animation: rise 0.5s var(--ease);
}

.hud.hero .hud-top-left {
  display: none;
}

/* ---------------------------------------------------------------- notes */
.label.note {
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  padding: var(--cb-space-1) 9px;
  border-radius: 6px;
  background: color-mix(in oklch, var(--shade) 78%, transparent);
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 16%, transparent);
  color: var(--ink);
  transform: translate(8px, -50%);
}

.label.note.money {
  color: var(--money);
}

.label.note.agent {
  color: var(--agent);
}

.label.note.task {
  color: var(--client);
}

.label.note.state {
  color: var(--project);
}

.label.note.stake {
  color: var(--cb-idea-text);
}

.label.note.idea {
  color: var(--idea);
}

.card.pinned {
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 40%,
    transparent
  );
}

.hud-feed {
  bottom: 96px;
  width: 300px;
}

.hud-bottom {
  grid-template-columns: auto 1fr;
  padding-left: 0;
}

.card-body .summary {
  margin: 0 0 var(--cb-space-3);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------- slide grid: text | action | data */
.story .story-inner {
  max-width: 440px;
  margin-left: 4vw;
  padding: 26px 28px 22px;
}

@media (width <= 1099px) {
  .story .story-inner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    margin: 0;
    padding: 16px 18px 14px;
    z-index: 6;
  }

  .story .story-inner h2 {
    font-size: 22px;
    margin-bottom: var(--cb-space-2);
  }

  .story .story-inner p {
    font-size: 13.5px;
    margin-bottom: 6px;
  }

  .story .story-inner .flows {
    display: none;
  }

  .story-caption {
    min-height: 34px;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 10.5px !important;
  }

  .story .lifecycle {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
  }

  .story .lifecycle li {
    padding: 2px var(--cb-space-1);
    font-size: 9.5px;
  }

  .card-head {
    padding: var(--cb-space-3) 16px 6px;
  }

  .card-head h3 {
    font-size: 17px;
  }

  .card-sub {
    font-size: 12px;
  }

  .card-body {
    padding: var(--cb-space-2) 16px 10px;
    font-size: 12.5px;
  }

  .stats3 b {
    font-size: 17px;
  }

  .stage-dim,
  .stage-dim.mirror {
    background: linear-gradient(
      180deg,
      color-mix(in oklch, var(--shade) 5%, transparent) 0%,
      color-mix(in oklch, var(--shade) 70%, transparent) 70%
    );
  }
}

/* --------------------------------------------------------- slide snapping */
html {
  scroll-snap-type: y mandatory;
}

section[data-view] {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 100vh;
  min-height: 100dvh;
}

@media (width <= 1099px) {
  .story .story-inner {
    display: none;
  }

  .story.active .story-inner {
    display: block;
  }
}

/* -------------------------------------------------------- readable story */
.story-caption {
  font-family: var(--font) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.story .story-inner p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

.flows {
  font-family: var(--font);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-2);
}

.story .story-inner {
  position: relative;
}

.story-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.story-ring path {
  fill: none;
  stroke: var(--human);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 0 1;
  filter: drop-shadow(
    0 0 6px color-mix(in oklch, var(--cb-accent-fill-hover) 55%, transparent)
  );
  transition: stroke-dasharray 0.25s linear;
}

.story-ring.full path {
  stroke: var(--project);
  filter: drop-shadow(
    0 0 10px color-mix(in oklch, var(--cb-secondary-fill) 80%, transparent)
  );
}

@media (width <= 1099px) {
  .story .story-inner {
    position: fixed;
  }
}

.stage-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 0 var(--cb-space-2);
  color: var(--ink);
  font-weight: 600;
}

.stage-sub {
  margin: 0 0 var(--cb-space-3);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.45;
}

.checks {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-2);
}

.checks .check {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 10px;
  align-items: center;
  color: var(--ink-3);
  font-size: 13px;
  transition: color 0.4s;
}

.checks .check i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  transition:
    background 0.4s,
    border-color 0.4s;
}

.checks .check.on {
  color: var(--ink);
}

.checks .check.on i {
  background: var(--project);
  border-color: var(--project);
  box-shadow: 0 0 8px var(--project);
}

.card-body .bar {
  height: 4px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 14%, transparent);
  overflow: hidden;
}

.card-body .bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--human), var(--money));
  transition: width 0.4s var(--ease);
}

.label.sun {
  --hue: var(--value);

  color: var(--cb-accent-fill-hover);
}

.label.sun small {
  color: color-mix(in oklch, var(--cb-accent-fill-hover) 70%, transparent);
  font-family: var(--font);
  font-style: normal;
  font-size: 11px;
}

/* ------------------------------------------------------------ HUD layout */
.hud-feed {
  right: 20px;
  bottom: 100px;
  width: 340px;
  gap: 5px;
}

.feed-meta {
  display: flex;
  gap: var(--cb-space-2);
  align-items: center;
  margin-bottom: 2px;
}

.feed-meta .mono {
  font-size: 9.5px;
  color: var(--ink-3);
}

.feed-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: var(--cb-radius-pill);
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 25%, transparent);
  color: var(--ink-2);
}

.feed-tag.chat {
  color: var(--ink-3);
}

.hud-bottom {
  grid-template-columns: auto minmax(320px, 560px) auto;
  justify-content: start;
  align-items: end;
  gap: 24px;
  right: 380px;
}

.timeline {
  justify-self: start;
}

.timeline-ticks {
  position: relative;
  height: 14px;
  margin-top: 2px;
}

.timeline-ticks .tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 8.5px;
  color: var(--ink-3);
  white-space: nowrap;
}

.timeline-ticks .tick i {
  display: block;
  width: 1px;
  height: 4px;
  margin: 0 auto 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 35%, transparent);
}

.timeline-ticks .tick.proj {
  color: color-mix(in oklch, var(--cb-info-text) 60%, transparent);
}

/* ------------------------------------------------------------- wordmark */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* ------------------------------------------------------------- wordmark */

/* Two words, one mark: the contributor in ink, the clear mind in gold. */
.wordmark b {
  font-weight: inherit;
  color: var(--human);
}

.brand:hover .wordmark b {
  color: var(--cb-accent-fill-hover);
}

/* ---------------------------------------------------------- zoom control */

/* ---------------------------------------------------------------- layers */

/* Layer toggles live with the imagery line: what the planet shows, in one place. */

/* -------------------------------------------------------------- dispatch */

/* The feed reads like a newspaper: one story at a time, held long enough to
   read, a short list of earlier headlines, and a wire for everything else. */
.hud-feed {
  right: 20px;
  bottom: 100px;
  width: 340px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding: var(--cb-space-3) 14px 10px;
  border-radius: 14px;
  background: color-mix(in oklch, var(--shade) 62%, transparent);
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
  backdrop-filter: blur(12px) saturate(1.1);
  pointer-events: auto;
}

.desk-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: var(--cb-space-2);
  border-bottom: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 14%, transparent);
}

.desk-name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}

.desk-clock {
  font-size: 9.5px;
  color: var(--ink-3);
  letter-spacing: 0.12em;
}

.desk-front {
  padding: var(--cb-space-3) 0 10px;
  min-height: 92px;
}

.desk-front.enter {
  animation: desk-in 0.6s var(--ease);
}

@keyframes desk-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.desk-front .feed-meta {
  margin-bottom: var(--cb-space-2);
}

.desk-headline {
  margin: 0 0 6px;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.22;
  color: var(--ink);
  text-wrap: balance;
}

.desk-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.desk-byline {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}

.desk-byline::before {
  content: "— ";
}

.desk-earlier {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
}

.desk-earlier li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: var(--cb-space-2);
  padding: 6px 0;
  font-size: 11.5px;
  line-height: 1.3;
  border-bottom: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 6%, transparent);
}

.desk-earlier .mono {
  font-size: 9.5px;
  padding-top: 2px;
  color: var(--ink-3);
}

.desk-earlier-head {
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.desk-wire.enter .mono {
  animation: wire-in 0.5s var(--ease);
}

@keyframes wire-in {
  from {
    opacity: 0;
    transform: translateX(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes wire-pulse {
  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-front.enter,
  .desk-wire.enter .mono {
    animation: none;
  }
}

/* ---------------------------------------------------------- card popover */

/* Anchored to the object: a small pointer marks it, above or below. */

.card.behind {
  opacity: 0.35;
}

.card::after {
  content: "";
  position: absolute;
  left: var(--arrow-x, 50%);
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: color-mix(in oklch, var(--shade) 90%, transparent);
  border: 1px solid var(--line);
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
}

.card.above::after {
  bottom: -7px;
}

.card.below::after {
  top: -7px;
  border-width: 1px 0 0 1px;
}

.card.above,
.card.below {
  overflow: visible;
}

.card.above .card-body,
.card.below .card-body {
  border-radius: 0 0 16px 16px;
}

.card-head {
  padding: 14px 18px var(--cb-space-2);
}

.card-head h3 {
  font-size: 19px;
  margin: 3px 0 2px;
}

.card-body {
  padding-left: 18px;
  padding-right: 18px;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (width <= 860px) {
  .card::after {
    display: none;
  }
}

/* ---------------------------------------------------------------- accent */

/* One highlight colour across the site: the gold of "buddha" in the wordmark. */
.main-nav a:hover,
.main-nav a.active {
  color: var(--accent);
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
}

.btn-solid:hover {
  background: var(--accent-2);
}

.btn-ghost:hover {
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 60%,
    transparent
  );
  color: var(--accent);
}

.btn-link:hover {
  color: var(--accent);
}

.btn:focus-visible,
.card-tabs button:focus-visible,
.card-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.eyebrow {
  color: var(--accent);
  opacity: 0.9;
}

.card-tabs button:hover {
  color: var(--ink);
}

.card-tabs button[aria-selected="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.story-ring path {
  stroke: var(--accent);
}

.lifecycle li.active {
  color: var(--accent);
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 50%,
    transparent
  );
}

.role:hover {
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 45%,
    transparent
  );
}

.scroll-hint:hover {
  color: var(--accent);
}

.story-inner a:not(.btn),
.join a:not(.btn) {
  color: var(--accent);
  text-decoration-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 40%,
    transparent
  );
}

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

/* Higher and further left, with a tighter typographic rhythm. */
.hero {
  align-items: flex-start;
}

.hero-copy {
  max-width: 680px;
  margin-left: 1.5vw;
  margin-top: clamp(24px, 7vh, 96px);
}

.hero .eyebrow {
  margin: 0 0 26px;
  font-size: 10.5px;
  letter-spacing: 0.24em;
}

.hero h1 {
  margin: 0 0 24px;
  font-size: clamp(44px, 5.8vw, 82px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 500;
}

.hero h1 em {
  color: var(--accent);
}

.hero .lede {
  max-width: 36ch;
  margin: 0;
  font-size: clamp(16px, 1.15vw, 19px);
  line-height: 1.5;
  color: var(--ink-2);
}

.hero .hero-actions {
  margin-top: var(--cb-space-8);
  gap: 18px;
}

.hero .hero-actions .btn-solid {
  padding: 13px 22px;
}

@media (width <= 860px) {
  .hero-copy {
    margin-left: 0;
    margin-top: 0;
  }
}

/* ============================================================== cards */

/* One card design, one family per kind of thing: the badge hue, the vitals
   and the graphics change with what the card is about. */
.card {
  animation: card-in 0.28s var(--ease);
  transition: opacity 0.3s;
  width: 344px;
  max-height: min(62vh, 640px);

  --hue: var(--accent);
}

.card-head {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--cb-space-3);
  align-items: start;
  padding: 14px 16px 10px;
}

.card-badge {
  width: 40px;
  height: 40px;
  border-radius: var(--cb-radius-3);
  display: grid;
  place-items: center;
  color: var(--hue);
  background: color-mix(in srgb, var(--hue) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--hue) 35%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--hue) 22%, transparent);
}

.card-badge svg {
  width: 22px;
  height: 22px;
}

.card-titles {
  min-width: 0;
}

.card-kind {
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hue);
}

.card-head h3 {
  margin: 3px 0 var(--cb-space-1);
  font-size: 18px;
  line-height: 1.2;
  padding-right: 0;
  overflow-wrap: anywhere;
}

.card-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cb-space-2);
  margin: 0;
  font-size: 12px;
}

.card-sub .mode,
.mode {
  color: var(--ink-3);
  font-size: 11.5px;
}

.card-actions {
  display: flex;
  gap: var(--cb-space-1);
}

.card-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--cb-radius-2);
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font: 600 16px var(--font);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s,
    background 0.2s;
}

.card-btn svg {
  width: 16px;
  height: 16px;
}

.card-btn:hover {
  color: var(--accent);
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 40%,
    transparent
  );
  background: color-mix(in oklch, var(--cb-accent-fill-hover) 8%, transparent);
}

.card-close {
  position: static;
}

/* vitals: three figures that fit, always */
.card-vitals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cb-space-2);
  padding: 2px 16px var(--cb-space-3);
}

.vital {
  min-width: 0;
  padding: 9px 10px var(--cb-space-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--cb-text-secondary) 4%, transparent);
  animation: fadeUp 0.5s var(--ease) both;
}

.vital:nth-child(2) {
  animation-delay: 60ms;
}

.vital:nth-child(3) {
  animation-delay: 120ms;
}

.vital b {
  display: block;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.vital b.text {
  font-size: 14px;
  line-height: 1.5;
}

.vital span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-tabs {
  overflow-x: auto;
  scrollbar-width: none;
  padding: 0 var(--cb-space-2);
}

.card-tabs::-webkit-scrollbar {
  display: none;
}

.card-tabs button {
  flex: none;
  padding: 9px var(--cb-space-2);
  font-size: 10px;
}

.card-body {
  padding: var(--cb-space-3) 16px 14px;
  font-size: 13px;
}

.card-body .summary {
  font-size: 13.5px;
  margin: 0 0 var(--cb-space-3);
}

.card-body .section {
  margin: 14px 0 var(--cb-space-1);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.card-body .empty {
  font-size: 13px;
  line-height: 1.5;
}

/* facts: icon, label, value */
.facts {
  display: grid;
  gap: 0;
  margin-top: var(--cb-space-1);
}

.fact {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  animation: fadeUp 0.45s var(--ease) both;
}

.fact:first-child {
  border-top: 0;
}

.fact span {
  color: var(--ink-3);
}

.fact b {
  color: var(--ink);
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.ico {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: var(--hue);
  flex: none;
}

.ico svg {
  width: 16px;
  height: 16px;
}

/* graphics */
.graphic {
  margin: var(--cb-space-1) 0 10px;
  padding: 10px 10px var(--cb-space-2);
  border-radius: 10px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--cb-text-secondary) 4%, transparent);
}

.graphic .caption {
  margin-top: 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.graph {
  display: block;
  width: 100%;
  height: 56px;
}

.graph.bars rect {
  fill: var(--hue);
  opacity: 0.85;
  transform-origin: 50% 100%;
  transform-box: fill-box;
  animation: grow-y 0.6s var(--ease) both;
  animation-delay: calc(var(--i) * 16ms);
}

.graph.dots circle {
  fill: var(--hue);
  animation: pop 0.4s var(--ease) both;
  animation-delay: calc(var(--i) * 14ms);
}

.graph.dots .trend {
  stroke: var(--hue);
  stroke-width: 0.6;
  stroke-dasharray: 1.5 1.5;
  opacity: 0.6;
}

.graph.line .area {
  fill: color-mix(in srgb, var(--hue) 22%, transparent);
  animation: fadeUp 0.8s var(--ease) both;
}

.graph.line .stroke {
  fill: none;
  stroke: var(--hue);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: draw 1s var(--ease) both;
}

.phases {
  list-style: none;
  margin: var(--cb-space-1) 0 2px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--n), 1fr);
  position: relative;
}

.phases::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 6px;
  height: 1px;
  background: var(--line);
}

.phases li {
  position: relative;
  text-align: center;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.phases li i {
  display: block;
  width: 9px;
  height: 9px;
  margin: 2px auto 6px;
  border-radius: 50%;
  border: 1px solid var(--ink-3);
  background: var(--bg);
}

.phases li.done i {
  background: var(--hue);
  border-color: var(--hue);
}

.phases li.done {
  color: var(--ink-2);
}

.phases li.now {
  color: var(--ink);
}

.phases li.now i {
  border-color: var(--hue);
  background: var(--hue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--hue) 28%, transparent);
  animation: pulse 2s ease-in-out infinite;
}

.reel,
.pages {
  display: grid;
  gap: 3px;
  margin-top: 10px;
}

.reel {
  grid-template-columns: repeat(16, 1fr);
}

.pages {
  grid-template-columns: repeat(13, 1fr);
}

.reel i,
.pages i {
  height: 14px;
  border-radius: 2px;
  background: color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  animation: pop 0.35s var(--ease) both;
  animation-delay: calc(var(--i) * 22ms);
}

.pages i {
  height: 18px;
}

.reel i.on,
.pages i.on {
  background: var(--hue);
  opacity: 0.9;
}

.missions {
  margin: 2px 0 0;
}

.missions i.anim {
  animation: pop 0.35s var(--ease) both;
}

/* owners: donut + rows */
.owners {
  display: grid;
  gap: var(--cb-space-2);
}

.donut-wrap {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 14px;
  align-items: center;
  padding: var(--cb-space-1) 0 var(--cb-space-2);
}

.donut,
.ring {
  width: 92px;
  height: 92px;
}

.ring {
  width: 56px;
  height: 56px;
}

.donut .track,
.ring .track {
  fill: none;
  stroke: color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  stroke-width: 5;
}

.donut .seg,
.ring .seg {
  fill: none;
  stroke: var(--hue);
  stroke-width: 5;
  stroke-linecap: butt;
  stroke-dasharray: var(--share) 1;
  stroke-dashoffset: calc(0 - var(--start));
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: sweep 0.8s var(--ease) both;
  animation-delay: calc(var(--start) * 0.8s);
  transition: stroke-width 0.2s;
  pointer-events: stroke;
  cursor: pointer;
}

.donut .seg:hover {
  stroke-width: 7;
}

.ring text {
  fill: var(--ink);
  font: 500 11px var(--font);
}

.donut-label b {
  display: block;
  font-size: 22px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.donut-label span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.owner {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: var(--cb-space-2) 0;
  border-top: 1px solid var(--line);
  cursor: pointer;
  animation: fadeUp 0.45s var(--ease) both;
  transition: background 0.2s;

  --c: var(--hue);
}

.owner:first-child {
  border-top: 0;
}

.owner:hover b {
  color: var(--accent);
}

.owner .swatch {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 8px color-mix(in srgb, var(--c) 60%, transparent);
  justify-self: center;
}

.owner .ico {
  color: var(--c);
}

.owner > div {
  min-width: 0;
}

.owner b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s;
}

.owner .meta,
.meta {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-top: 1px;
}

.owner .bar {
  margin-top: 5px;
}

.owner .pct {
  text-align: right;
  white-space: nowrap;
}

.owner .pct b {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.owner .pct span {
  display: block;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* rank */
.rank-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--cb-space-3);
  align-items: center;
  padding: 2px 0 10px;
}

.rank-row b {
  display: block;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* money flow */
.flow {
  display: grid;
  gap: 6px;
  margin: 2px 0 10px;
}

.flow-row {
  display: grid;
  grid-template-columns: 64px 1fr 56px;
  gap: 10px;
  align-items: center;
  font-size: 11.5px;
  color: var(--ink-3);
}

.flow-row[data-open] {
  cursor: pointer;
}

.flow-row b {
  color: var(--ink);
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.card-body .bar {
  height: 5px;
  border-radius: 3px;
  background: color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  overflow: hidden;
}

.card-body .bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--hue);
}

.card-body .bar i.anim {
  transform-origin: 0 50%;
  animation: grow-x 0.7s var(--ease) both;
}

/* ledger rows */
.ledger {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ledger li {
  display: grid;
  grid-template-columns: 18px 40px 1fr auto;
  gap: var(--cb-space-2);
  align-items: start;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.4;
  animation: fadeUp 0.4s var(--ease) both;
}

.ledger li:first-child {
  border-top: 0;
}

.ledger .ico {
  color: var(--ink-3);
  margin-top: 1px;
}

.ledger li.work .ico,
.ledger li.accept .ico {
  color: var(--project);
}

.ledger li.payout .ico,
.ledger li.revenue .ico,
.ledger li.budget .ico {
  color: var(--money);
}

.ledger li.idea .ico {
  color: var(--idea);
}

.ledger li.claim .ico,
.ledger li.review .ico {
  color: var(--agent);
}

.ledger .when {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  padding-top: 3px;
}

.ledger .what {
  color: var(--ink-2);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ledger .who {
  color: var(--ink);
  font-weight: 600;
}

.ledger .link,
.link {
  color: var(--accent);
  cursor: pointer;
}

.ledger .tag {
  display: inline-block;
  margin-left: 6px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agent);
}

.ledger .amt {
  color: var(--money);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ledger .amt.in {
  color: var(--project);
}

/* stage tab keeps its checks and bars; give it the hue */
.stage-head .state {
  flex: none;
}

.checks .check.on i {
  background: var(--hue);
  border-color: var(--hue);
  box-shadow: 0 0 8px var(--hue);
}

/* entrance animations, replayed only when a tab opens */
.card-body.settled .anim,
.card-body.settled .fact,
.card-body.settled .owner,
.card-body.settled .ledger li,
.card-body.settled .phases li i {
  animation: none;
}

.card-body .fact:nth-child(n) {
  animation-delay: calc(var(--i, 0) * 0ms);
}

.facts .fact:nth-child(2) {
  animation-delay: 50ms;
}

.facts .fact:nth-child(3) {
  animation-delay: 100ms;
}

.facts .fact:nth-child(4) {
  animation-delay: 150ms;
}

.facts .fact:nth-child(5) {
  animation-delay: 200ms;
}

.owner:nth-child(2),
.ledger li:nth-child(2) {
  animation-delay: 50ms;
}

.owner:nth-child(3),
.ledger li:nth-child(3) {
  animation-delay: 100ms;
}

.owner:nth-child(4),
.ledger li:nth-child(4) {
  animation-delay: 150ms;
}

.owner:nth-child(n + 5),
.ledger li:nth-child(n + 5) {
  animation-delay: 200ms;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes grow-y {
  from {
    transform: scaleY(0);
  }
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}

@keyframes sweep {
  from {
    stroke-dasharray: 0 1;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
}

@keyframes pulse {
  0%,
  100% {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hue) 28%, transparent);
  }

  50% {
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--hue) 10%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .card-body .anim,
  .vital,
  .fact,
  .owner,
  .ledger li,
  .phases li.now i {
    animation: none;
  }
}

@media (width <= 860px) {
  .card.expanded {
    width: auto;
  }
}

/* card layout: the head, vitals and tabs never shrink; only the body scrolls */
.card-head,
.card-vitals,
.card-tabs {
  flex: none;
}

.card-body {
  flex: 1 1 auto;
  min-height: 0;
}

.card-tabs button:focus-visible {
  outline-offset: -2px;
}

.vital span {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
  min-height: 2.6em;
}

.owner .meta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-head h3 {
  font-size: 17px;
}

/* ------------------------------------------------------- layers and key */

/* A map legend: the meaning of the marks, one quiet card at the left edge,
   only while the planet is free to explore. */

/* ------------------------------------------------------- hero audiences */
.audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-1) 22px;
  margin: 0 0 22px;
}

.audience button {
  position: relative;
  padding: 6px 0 var(--cb-space-2);
  border: 0;
  background: transparent;
  font: inherit;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.25s;
}

.audience button:hover,
.audience button[aria-selected="true"] {
  color: var(--ink);
}

.audience button::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: color-mix(in oklch, var(--cb-text-secondary) 16%, transparent);
}

.audience button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.audience button[aria-selected="true"]::after {
  transform: scaleX(1);
}

.audience button[aria-selected="true"].timing::after {
  animation: fill-x var(--dur, 7s) linear both;
}

.audience button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 2px;
}

@keyframes fill-x {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

.hero h1 .line {
  display: inline-block;
}

.hero h1 .line.enter,
.hero .lede.enter,
.hero .btn-solid.enter {
  animation: line-in 0.7s var(--ease) both;
}

.hero h1 .line[data-line="1"].enter {
  animation-delay: 70ms;
}

.hero h1 .line[data-line="2"].enter {
  animation-delay: 140ms;
}

.hero .lede.enter {
  animation-delay: 220ms;
}

.hero .btn-solid.enter {
  animation-delay: 300ms;
}

@keyframes line-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero h1 .line.enter,
  .hero .lede.enter,
  .hero .btn-solid.enter,
  .audience button[aria-selected="true"].timing::after {
    animation: none;
  }
}

/* --------------------------------------------------------------- timeline */

/* One line across the bottom, centred, nothing else in the row. */
.hud-bottom {
  left: 50%;
  right: auto;
  bottom: 22px;
  width: min(1180px, calc(100vw - 56px));
  transform: translateX(-50%);
  display: block;
  padding: 0;
}

.timeline {
  max-width: none;
  width: 100%;
  justify-self: stretch;
}

@media (width <= 860px) {
  .hud-bottom {
    width: calc(100vw - 24px);
  }
}

/* --------------------------------------------------------------- figures */

/* The status block: clock, date and four figures, one quiet column. */
.hud-figures {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 26px;
  margin-top: 14px;
  padding-top: var(--cb-space-3);
  border-top: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 12%, transparent);
  width: max-content;
}

.hud-figures div {
  display: grid;
  gap: 1px;
}

.hud-figures b {
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.hud-figures span {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hud-figures b.tick {
  animation: tick 0.7s var(--ease);
}

@keyframes tick {
  from {
    color: var(--accent);
  }
}

/* ------------------------------------------------------------ teletype */

/* The dispatch fills the right column: front page, the tape of earlier
   headlines, and a wire line that types itself in. */
.hud-feed {
  top: calc(var(--header-h) + 14px);
  bottom: 96px;
  right: 20px;
  width: 360px;
  display: flex;
  flex-direction: column;
}

.desk-head,
.desk-front,
.desk-wire {
  flex: none;
}

.desk-earlier {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  mask-image: linear-gradient(180deg, var(--ink) 78%, transparent);
}

.desk-earlier li {
  grid-template-columns: 10px 34px 1fr;
  padding: 7px 0;
  animation: tape-in 0.45s var(--ease) both;
}

.desk-earlier-head {
  white-space: normal;
  overflow: visible;
  line-height: 1.3;
}

@keyframes tape-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.desk-wire {
  border-top: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
  padding-top: 9px;
  margin-top: var(--cb-space-1);
}

.desk-wire .mono::after {
  content: "▮";
  margin-left: 3px;
  color: var(--accent);
  animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
  to {
    visibility: hidden;
  }
}

@media (width <= 1240px) and (width >= 861px) {
  .hud-feed {
    width: 292px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-earlier li,
  .hud-figures b.tick {
    animation: none;
  }

  .desk-wire .mono::after {
    animation: none;
  }
}

/* hero: everything fits above the timeline, aligned to the top */
.hero {
  align-items: flex-start;
  padding-bottom: 140px;
}

.hero-copy {
  max-width: 720px;
  margin-top: clamp(var(--cb-space-2), 3.5vh, 48px);
  touch-action: pan-y;
}

.hero .eyebrow {
  margin: 0 0 18px;
}

.audience {
  margin: 0 0 16px;
}

.audience button:focus-visible {
  outline: none;
  color: var(--accent);
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(38px, min(5vw, 8vh), 72px);
  line-height: 0.98;
}

.hero h1 .line {
  white-space: nowrap;
}

.hero .lede {
  max-width: 40ch;
  font-size: clamp(15px, min(1.1vw, 2.2vh), 18px);
  line-height: 1.45;
}

.hero .hero-actions {
  margin-top: 24px;
}

@media (height <= 700px) and (width >= 861px) {
  .hero .eyebrow {
    margin-bottom: var(--cb-space-3);
  }

  .audience {
    margin-bottom: 10px;
  }

  .hero h1 {
    margin-bottom: var(--cb-space-3);
  }

  .hero .hero-actions {
    margin-top: 16px;
  }
}

@media (width <= 860px) {
  .hero h1 .line {
    white-space: normal;
  }
}

/* audience: the first thing in the hero now; a held pointer or finger freezes the underline */
.audience {
  margin-top: var(--cb-space-1);
}

.audience.paused button[aria-selected="true"].timing::after {
  animation-play-state: paused;
}

/* audience arrows: the slider's handles, quiet until hovered */
.aud-arrows {
  display: inline-flex;
  gap: 2px;
  margin-left: 6px;
  align-self: center;
}

.aud-arrow {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 18%, transparent);
  background: transparent;
  color: var(--ink-3);
  font: 500 16px/1 var(--font);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.aud-arrow::before,
.aud-arrow::after {
  display: none;
}

.aud-arrow:hover {
  color: var(--accent);
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 50%,
    transparent
  );
}

.hero-copy h1,
.hero-copy .lede {
  cursor: ew-resize;
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari reads only the prefixed property */
  -webkit-user-select: none;
  user-select: none;
}

/* hero rhythm: more air between the strip, the headline, the lede, the gains and the buttons */
.audience {
  margin-bottom: 26px;
}

.hero h1 {
  line-height: 1.08;
  margin-bottom: 26px;
}

.hero .lede {
  max-width: 44ch;
  line-height: 1.55;
}

.hero-gains {
  list-style: none;
  margin: var(--cb-space-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  max-width: 720px;
}

.hero-gains li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  white-space: nowrap;
}

.hero-gains li .ico {
  width: 18px;
  height: 18px;
  color: var(--accent);
  flex: none;
}

.hero-gains li .ico svg {
  width: 17px;
  height: 17px;
}

.hero-gains li.enter {
  animation: line-in 0.7s var(--ease) both;
  animation-delay: calc(280ms + var(--i, 0) * 70ms);
}

.hero .hero-actions {
  margin-top: 30px;
}

@media (height <= 700px) {
  .audience {
    margin-bottom: 16px;
  }

  .hero h1 {
    margin-bottom: 16px;
  }

  .hero-gains {
    margin-top: var(--cb-space-3);
  }

  .hero .hero-actions {
    margin-top: var(--cb-space-5);
  }
}

@media (width <= 860px) {
  .hero-gains li {
    white-space: normal;
  }
}

/* laptops: the same rhythm, a little tighter, so the founder variant clears the timeline */
@media (height <= 800px) and (width >= 861px) {
  .audience {
    margin-bottom: 18px;
  }

  .hero h1 {
    margin-bottom: 18px;
  }

  .hero-gains {
    margin-top: 14px;
  }

  .hero .hero-actions {
    margin-top: 22px;
  }
}

/* --------------------------------------------------------------- steps */

/* The slide's step rail: the scene lights the step it is acting out. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.steps li {
  counter-increment: step;
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-2);
  transition: color 0.3s;
}

.steps li::before {
  content: counter(step);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 25%, transparent);
  font-size: 9px;
  letter-spacing: 0;
  color: var(--ink-3);
  transition:
    background 0.3s,
    border-color 0.3s,
    color 0.3s;
}

.steps li.active {
  color: var(--ink);
}

.steps li.active::before {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 10px
    color-mix(in oklch, var(--cb-accent-fill-hover) 55%, transparent);
}

.steps li.done {
  color: var(--ink-2);
}

.steps li.done::before {
  content: "✓";
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 50%,
    transparent
  );
  color: var(--accent);
}

/* scene cards dock at the right edge and keep the action clear */
.card.docked {
  left: auto;
  right: 20px;
  top: calc(var(--header-h) + 16px);
  max-height: calc(100vh - var(--header-h) - 130px);
  animation: card-in 0.35s var(--ease);
}

.card.docked::after {
  display: none;
}

/* a proposal typing itself into the card */
.card-body .caret {
  display: inline-block;
  width: 7px;
  height: 14px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--accent);
  animation: blink 0.9s steps(2, start) infinite;
}

.card-body .reveal .row:first-child {
  border-top: 1px solid var(--line);
}

/* head figures that change while a card is open do not replay their entrance */
.card-vitals.settled .vital {
  animation: none;
}

/* --------------------------------------------------------------- join */

/* The last slide: content centred, the footer pinned to the slide's bottom. */
.join {
  scroll-snap-align: end;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 0;
  padding-bottom: 0;
  align-items: stretch;
}

.join .story-inner {
  margin-top: auto;
  margin-bottom: auto;
}

.join .site-footer {
  margin-top: auto;
  width: 100%;
  padding-bottom: 22px;
}

/* the live slide keeps the clock and the timeline; its figures live in the
   docked card, and the dispatch steps aside for it */
.hud.live .hud-figures,
.hud.live .hud-feed {
  display: none;
}

/* ---------------------------------------------------------------- join */

/* The last slide answers "which of these are you": three ways in, left-set
   like the story, the planet as the backdrop on the right. */

.join-inner {
  pointer-events: auto;
  max-width: 600px;
  margin: auto 0 auto 4vw;
  padding: 24px 0;
}

.join-inner .eyebrow {
  margin-bottom: var(--cb-space-5);
}

.join-inner h2 {
  font-size: clamp(34px, 3.8vw, 52px);
  line-height: 1.06;
  margin-bottom: 18px;
}

.join-inner h2 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.join-inner .lede {
  max-width: 46ch;
  margin: 0 0 26px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
}

.join-paths {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-2);
}

.join-paths a {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: color-mix(in oklch, var(--shade) 55%, transparent);
  backdrop-filter: blur(12px);
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color 0.25s,
    background 0.25s,
    transform 0.25s var(--ease);
}

.join-paths a:hover,
.join-paths a:focus-visible {
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 55%,
    transparent
  );
  background: color-mix(in oklch, var(--cb-accent-fill-hover) 6%, transparent);
  transform: translateX(4px);
  outline: none;
}

.join-paths .ico {
  width: 22px;
  height: 22px;
  color: var(--accent);
}

.join-paths .ico svg {
  width: 20px;
  height: 20px;
}

.join-paths b {
  display: block;
  font-size: 15.5px;
  font-weight: 600;
}

.join-paths small {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.join-paths .go {
  font-style: normal;
  color: var(--ink-3);
  transition: color 0.25s;
}

.join-paths a:hover .go {
  color: var(--accent);
}

.join-note {
  margin: 18px 0 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (width <= 860px) {
  .join-inner {
    margin-left: 0;
    max-width: none;
  }
}

/* path titles read as headings; gold is for the icon, the arrow and hover */
.join .join-paths a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
}

.join-paths a:hover b {
  color: var(--accent);
}

/* a held scene: the frame stops filling and goes quiet until the hand lifts */
body.story-held .story-ring path {
  stroke: var(--ink-3);
  transition: stroke 0.3s;
}

body.story-held .story-caption i {
  animation: none;
  border-radius: 1px;
  width: 6px;
  height: 8px;
  box-shadow:
    inset 2px 0 0 var(--bg),
    0 0 0 0 transparent;
  background: var(--accent);
}

/* ------------------------------------------------------------ story cast */

/* Who is in the scene: a quiet line of names under the step rail. */

/* the lifecycle list in two columns keeps the slide inside the viewport */
.lifecycle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 14px;
}

/* ------------------------------------------------------------ scroll cue */

/* On story slides a quiet cue at the bottom says the page goes on. */
.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: none;
  align-items: center;
  gap: var(--cb-space-2);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}

body.cue .scroll-cue {
  display: inline-flex;
  opacity: 0.85;
}

.scroll-cue i {
  width: 6px;
  height: 6px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
  animation: cue-down 1.8s ease-in-out infinite;
}

@keyframes cue-down {
  0%,
  100% {
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.5;
  }

  50% {
    transform: translateY(3px) rotate(45deg);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue i {
    animation: none;
  }
}

/* ------------------------------------------------------------- flow key */

/* What the lines on the planet mean, right under the caption. */

/* lifecycle as five phases with their states underneath */
.lifecycle.phases {
  grid-template-columns: 1fr;
  gap: 3px;
}

.lifecycle.phases li {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 10px;
  align-items: baseline;
}

.lifecycle.phases b {
  font-weight: 600;
  letter-spacing: 0.12em;
}

.lifecycle.phases small {
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ink-3);
}

.lifecycle.phases li.active small {
  color: var(--ink-2);
}

/* ------------------------------------------------------ label legibility */

/* A dark halo under every label, and a translucent plate over the night
   side where city lights bloom under the text. */
.label {
  text-shadow:
    0 1px 2px color-mix(in oklch, var(--shade) 95%, transparent),
    0 0 6px color-mix(in oklch, var(--shade) 90%, transparent),
    0 0 14px color-mix(in oklch, var(--shade) 75%, transparent);
}

.label small {
  text-shadow:
    0 1px 2px color-mix(in oklch, var(--shade) 95%, transparent),
    0 0 8px color-mix(in oklch, var(--shade) 90%, transparent);
}

.label.night {
  padding: 3px 7px var(--cb-space-1);
  margin-left: -7px;
  border-radius: 7px;
  background: color-mix(in oklch, var(--shade) 50%, transparent);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari reads only the prefixed property */
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  box-shadow: 0 0 0 1px
    color-mix(in oklch, var(--cb-text-primary) 4%, transparent);
}

.label.night.project::before {
  left: -3px;
}

.label.night small {
  color: color-mix(in oklch, var(--cb-text-primary) 88%, transparent);
}

/* ------------------------------------------------------------- phones */
@media (width <= 860px) {
  body.cue .scroll-cue {
    display: none;
  }

  .join-inner {
    padding: var(--cb-space-3) 0 var(--cb-space-2);
  }

  .join-inner h2 {
    font-size: 30px;
    margin-bottom: var(--cb-space-3);
  }

  .join-inner .lede {
    margin-bottom: 16px;
    font-size: 14.5px;
  }

  .join-paths {
    gap: 6px;
  }

  .join-paths a {
    padding: 10px var(--cb-space-3);
    gap: var(--cb-space-3);
  }

  .join-paths b {
    font-size: 14px;
  }

  .join-paths small {
    font-size: 11.5px;
  }

  .join-note {
    margin-top: var(--cb-space-3);
  }

  .join .site-footer {
    padding-bottom: var(--cb-space-3);
  }
}

/* ------------------------------------------------------------- flow key */

/* What the lines on the planet mean: a quiet strip in the data column,
   under the docked card, only while a scene uses them. */
.flow-key {
  position: fixed;
  right: 20px;
  bottom: 26px;
  width: 344px;
  z-index: 14;
  list-style: none;
  margin: 0;
  padding: 10px 14px;
  display: none;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--cb-space-2) 14px;
  border-radius: var(--cb-radius-3);
  background: color-mix(in oklch, var(--shade) 55%, transparent);
  border: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
  backdrop-filter: blur(10px);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  pointer-events: none;
  animation: fade-in 0.5s var(--ease) both;
}

.flow-key.on {
  display: grid;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

.flow-key li {
  display: inline-flex;
  align-items: center;
  gap: var(--cb-space-2);
  white-space: nowrap;
  min-width: 0;
}

.flow-key li span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-key svg {
  width: 44px;
  height: 12px;
  flex: none;
}

@media (width <= 1099px) {
  .flow-key.on {
    display: none;
  }
}

/* ------------------------------------------------------- phone popover */

/* On a phone the card is a small popover beside its object: the head and
   three figures. "Details" opens the tabs as a sheet. */
.card-more {
  display: none;
  width: 100%;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--accent);
  font: 600 11px var(--font);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px var(--cb-space-3);
  cursor: pointer;
}

.card.compact {
  width: 236px;
  max-height: none;
}

.card.compact .card-head {
  grid-template-columns: 30px 1fr auto;
  gap: 9px;
  padding: 10px var(--cb-space-3) 6px;
}

.card.compact .card-badge {
  width: 30px;
  height: 30px;
  border-radius: 9px;
}

.card.compact .card-badge svg {
  width: 17px;
  height: 17px;
}

.card.compact .card-kind {
  font-size: 8.5px;
}

.card.compact .card-head h3 {
  font-size: 14.5px;
  margin: 2px 0 3px;
}

.card.compact .card-sub {
  font-size: 10px;
}

.card.compact .card-sub .state {
  font-size: 8.5px;
  padding: 1px 6px;
}

.card.compact .card-btn {
  width: 24px;
  height: 24px;
}

.card.compact .card-vitals {
  gap: 5px;
  padding: 2px 10px var(--cb-space-2);
}

.card.compact .vital {
  padding: 6px 7px 5px;
  border-radius: var(--cb-radius-2);
}

.card.compact .vital b {
  font-size: 14px;
}

.card.compact .vital span {
  font-size: 7.5px;
  min-height: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card.compact .card-tabs,
.card.compact .card-body {
  display: none;
}

.card.compact .card-more {
  display: block;
}

.card.compact.expanded .card-tabs,
.card.compact.expanded .card-body {
  display: flex;
}

.card.compact.expanded .card-body {
  display: block;
}

.card.compact.expanded .card-more {
  display: none;
}

.card.compact.expanded::after {
  display: none;
}

@media (width <= 860px) {
  .hud-figures {
    display: none;
  }
}

/* phones: the story sheet stays low and short so the action above it shows */
@media (width <= 860px) {
  .story.active .story-inner {
    padding: 14px 18px var(--cb-space-3);
    max-height: 42vh;
    overflow: hidden;
  }

  .story .story-inner .eyebrow {
    margin-bottom: var(--cb-space-2);
    font-size: 10px;
  }

  .story .story-inner h2 {
    font-size: 21px;
    margin-bottom: var(--cb-space-2);
  }

  .story .story-inner p {
    font-size: 13.5px;
    line-height: 1.45;
    margin-bottom: var(--cb-space-2);
  }

  .steps {
    margin-top: 10px;
    gap: var(--cb-space-1) var(--cb-space-3);
    font-size: 9px;
  }

  .story-caption {
    margin-top: 10px;
    padding-top: 10px;
    min-height: 0;
    font-size: 13px !important;
  }
}

/* phones: the join copy sits just above the footer, the planet keeps the top */
@media (width <= 860px) {
  .join-inner {
    margin-top: auto;
    margin-bottom: 14px;
  }
}

/* phones: hero copy sits above the timeline; join copy sits on the footer */
@media (width <= 860px) {
  .hero {
    align-items: flex-end;
    padding-bottom: 150px;
  }

  .hero-copy {
    margin-top: 0;
    margin-bottom: 0;
  }

  .join .site-footer {
    margin-top: 0;
  }
}

/* phones: air between the hero's blocks, buttons down by the timeline */
@media (width <= 860px) {
  .hero {
    padding-bottom: 112px;
  }

  .audience {
    margin-bottom: 26px;
  }

  .hero h1 {
    margin-bottom: 22px;
    line-height: 1.06;
  }

  .hero .lede {
    line-height: 1.5;
  }

  .hero-gains {
    margin-top: 22px;
    gap: var(--cb-space-3) var(--cb-space-5);
  }

  .hero .hero-actions {
    margin-top: 36px;
    gap: 14px 22px;
  }
}

/* phones: on the live slide the timeline stays, so the sheet sits above it */
@media (width <= 860px) {
  body.live-slide .story.active .story-inner {
    bottom: 128px;
    max-height: 34vh;
  }
}

/* ---------------------------------------------------------- header buttons */

/* Quiet in the header: slim pills, the call to action outlined in gold and
   filling only on hover. The hero keeps the one solid gold button. */
.header-actions .btn {
  padding: var(--cb-space-2) 15px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.header-actions .btn-solid {
  background: transparent;
  border-color: color-mix(
    in oklch,
    var(--cb-accent-fill-hover) 55%,
    transparent
  );
  color: var(--accent);
}

.header-actions .btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.header-actions .btn-ghost {
  background: transparent;
  border-color: color-mix(in oklch, var(--cb-text-secondary) 22%, transparent);
  color: var(--ink-2);
}

.header-actions .btn-ghost:hover {
  border-color: color-mix(in oklch, var(--cb-text-secondary) 50%, transparent);
  color: var(--ink);
}

@media (width <= 860px) {
  .header-actions .btn {
    padding: 7px var(--cb-space-3);
    font-size: 12.5px;
  }
}

/* The projection is never added to a recorded figure: it sits beside it, in
   the colour the rest of the page uses for a forecast. */
.stat-proj {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--idea);
  margin-top: 2px;
}

.timeline-gap {
  position: absolute;
  top: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in oklch, var(--cb-warning-solid) 50%, transparent) 0 3px,
    color-mix(in oklch, var(--cb-warning-solid) 12%, transparent) 3px 6px
  );
  border-left: 1px solid
    color-mix(in oklch, var(--cb-warning-solid) 70%, transparent);
  border-right: 1px solid
    color-mix(in oklch, var(--cb-warning-solid) 70%, transparent);
}

#hud-phase[data-zone="gap"] {
  color: var(--client);
}

#hud-phase[data-zone="forward"] {
  color: var(--idea);
}

.live-dot.gap {
  background: var(--client);
  box-shadow: 0 0 8px var(--client);
}

/* The vision marks itself: anything past the viewer's clock is labelled as a
   projection, in the colour the timeline uses for the forward zone. */
.label.projected span {
  color: var(--idea);
}

.label.projected small {
  font-style: italic;
}

.mode.projected {
  color: var(--idea);
  border-color: color-mix(in srgb, var(--idea) 40%, transparent);
}

/* The language mix of a project, in the colours its body wears on the planet. */
.langbar {
  display: flex;
  height: 7px;
  border-radius: 2px;
  overflow: hidden;
  margin: 2px 0 var(--cb-space-2);
}

.langbar i {
  display: block;
  height: 100%;
}

.langkey {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-1) 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

.langkey span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.langkey i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  display: inline-block;
}

/* Dragging the planet used to select the text under the cursor, and the
   selection then stayed stuck over the scene. Nothing on this page is meant to
   be selected: it is a scene you turn and cards you read. */
* {
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari reads only the prefixed property */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

input,
textarea,
[contenteditable="true"] {
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari reads only the prefixed property */
  -webkit-user-select: text;
  user-select: text;
}

.state-unknown {
  color: var(--ink-3);
  font-style: italic;
}

/* A project whose record is physical shows the stages it has been through. */
.stages {
  list-style: none;
  margin: 2px 0 6px;
  padding: 0;
  display: grid;
  gap: 6px;
}

.stages .stage {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
}

.stages .stage i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--hue, var(--accent));
}

.stages .stage.done i {
  background: var(--hue, var(--accent));
}

.stages .stage.in_progress i {
  border-style: dashed;
  animation: stage-pulse 2.4s ease-in-out infinite;
}

.stages .stage b {
  font-weight: 600;
  color: var(--ink);
}

.stages .stage span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@keyframes stage-pulse {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stages .stage.in_progress i {
    animation: none;
  }
}

/* The first line a visitor reads names the place they were taken to. */
.planet-hint {
  display: grid;
  gap: 5px;
  justify-items: center;
}

.planet-hint .hint-where {
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.004em;
  text-transform: none;
  color: var(--ink);
}

.planet-hint .hint-where::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: var(--cb-space-2);
  vertical-align: 1px;
  box-shadow: 0 0 10px var(--accent);
}

/* ---------------------------------------------------------- label kinds */

/* A person, a project, an agent and a client are different kinds of thing, so
   their plates are different shapes. You should be able to tell what you are
   looking at before you have read a word of it. */

/* A person wears a badge: the rank ring sits in a rounded end, and the plate
   carries a gold edge on that side. */
.label.person {
  border-radius: var(--cb-radius-pill) 10px 10px var(--cb-radius-pill);
  padding-left: 6px;
  border-left: 2px solid color-mix(in srgb, var(--hue) 55%, transparent);
}

.label.person .lbl-chip.rank {
  letter-spacing: 0.14em;
}

.label.person .lbl-chip.rank:empty {
  display: none;
}

/* A project is a plate with a tab: a hairline of its family colour across the
   top, the way a folder is tagged. */
.label.project {
  border-radius: var(--cb-radius-1) 10px 10px var(--cb-radius-1);
  padding-top: var(--cb-space-2);
}

.label.project::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 11px;
  top: 0;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: linear-gradient(
    90deg,
    var(--hue),
    color-mix(in srgb, var(--hue) 15%, transparent)
  );
}

/* An agent is a tag, not a plate: smaller, outlined, and it carries no growth
   because an agent does not grow — the person it answers to does. */
.label.agent {
  border-radius: var(--cb-radius-1);
  border-style: dashed;
  padding: 5px 9px 5px var(--cb-space-2);
  gap: 7px;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, var(--cb-surface-0) 72%, transparent),
    color-mix(in oklch, var(--shade) 80%, transparent)
  );
}

.label.agent .lbl-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  font-weight: 500;
}

.label.agent .lbl-chip {
  font-size: 8px;
}

/* A client comes from outside and brings money, so the plate leans that way:
   coral, and the figure reads first. */
.label.client {
  border-radius: 10px var(--cb-radius-1) var(--cb-radius-1) 10px;
  border-color: color-mix(in srgb, var(--hue) 30%, transparent);
}

.label.client .lbl-chip.budget {
  font-size: 10px;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Placed on the other side of its anchor, the leader line flips with it. */
.label.to-left::before {
  right: auto;
  left: 100%;
  background: linear-gradient(270deg, transparent, var(--hue));
}

/* A commission: the budget as a bar that has been drawn on, and who drew it. */
.budget {
  display: grid;
  gap: var(--cb-space-2);
  margin: 2px 0 6px;
}

.budget-bar {
  display: flex;
  height: 9px;
  border-radius: 3px;
  overflow: hidden;
  background: color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
}

.budget-bar i {
  display: block;
  height: 100%;
}

.budget-bar i.drawn {
  background: var(--money);
}

.budget-bar i.left {
  background: color-mix(in srgb, var(--money) 26%, transparent);
}

.budget-bar i.fee {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in oklch, var(--cb-text-secondary) 50%, transparent) 0 3px,
    color-mix(in oklch, var(--cb-text-secondary) 18%, transparent) 3px 6px
  );
}

.budget-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cb-space-1) 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

.budget-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.budget-key i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.budget-key i.drawn {
  background: var(--money);
}

.budget-key i.left {
  background: color-mix(in srgb, var(--money) 26%, transparent);
}

.budget-key i.fee {
  background: color-mix(in oklch, var(--cb-text-secondary) 40%, transparent);
}

.budget-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--cb-space-1);
}

.budget-rows li {
  display: flex;
  justify-content: space-between;
  gap: var(--cb-space-3);
  font-size: 12.5px;
  color: var(--ink-2);
}

.budget-rows b {
  color: var(--money);
  font-variant-numeric: tabular-nums;
}

/* A ledger line the vision wrote says so, and steps back a little. */
.ledger .tag.projected {
  color: var(--idea);
  border-color: color-mix(in srgb, var(--idea) 40%, transparent);
}

.ledger .tag.declared {
  color: var(--ink-3);
  border-color: color-mix(in oklch, var(--cb-text-secondary) 25%, transparent);
}

.ledger li.is-projected {
  opacity: 0.72;
}

.note.quiet {
  color: var(--ink-3);
  font-size: 12px;
}

/* Work on a project that no repository holds. */
.offwork {
  list-style: none;
  margin: 2px 0 var(--cb-space-2);
  padding: 0;
  display: grid;
  gap: 7px;
}

.offwork li {
  display: grid;
  gap: 1px;
  padding-left: var(--cb-space-3);
  border-left: 2px solid color-mix(in srgb, var(--human) 45%, transparent);
}

.offwork b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
}

.offwork span {
  font-size: 12px;
  color: var(--ink-3);
}

/* A contributor the repository knows but the planet cannot place. */
.owner.unplaced {
  opacity: 0.78;
  cursor: default;
}

.owner.unplaced .swatch {
  background: none;
  border: 1.5px solid var(--c, var(--ink-3));
}

/* ========================================================== the newsroom
   The Dispatch is a newspaper with three pages running at once. What changes
   between stories is not only the words but the shape of the card: Transport
   Tycoon gives its newspaper five layouts so a reader knows the kind of news
   before reading a word, and this is the same trick on our material. */

.desk-head {
  gap: var(--cb-space-2);
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}

.desk-name {
  flex: none;
}

.desk-zone {
  flex: none;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: var(--cb-radius-pill);
  color: var(--project);
}

.desk-zone[data-zone="gap"] {
  color: var(--ink-3);
}

.desk-zone[data-zone="forward"] {
  color: var(--idea);
}

.desk-clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.desk-sound {
  flex: 0 0 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px var(--cb-space-2);
  font-family: var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: var(--cb-radius-pill);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 10px;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.desk-sound:hover,
.desk-sound:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
}

.desk-sound.on {
  color: var(--accent);
  border-color: var(--accent);
}

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

/* the scoreboard — the one part of the panel that is a game, not a page */
.desk-standings {
  display: flex;
  margin: var(--cb-space-2) 0 2px;
  border-top: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
  border-bottom: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 10%, transparent);
}

.desk-standings .stand {
  flex: 1;
  min-width: 0;
  padding: 6px var(--cb-space-2) 7px;
  border-right: 1px solid
    color-mix(in oklch, var(--cb-text-secondary) 7%, transparent);
}

.desk-standings .stand:last-child {
  border-right: 0;
}

.stand-k {
  display: block;
  font-size: 8px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stand-v {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stand[data-id="home"] .stand-v {
  color: var(--accent);
}

.stand-v.tick {
  animation: stand-tick 0.5s var(--ease);
}

@keyframes stand-tick {
  0% {
    transform: translateY(-5px) scale(1.16);
    color: var(--accent);
  }

  100% {
    transform: none;
  }
}

/* the front page prints rather than appears */
.desk-front {
  position: relative;
  overflow: hidden;
  padding: var(--cb-space-3) 0 var(--cb-space-3);
  min-height: 120px;
}

.desk-front.can-focus {
  cursor: pointer;
}

.desk-front::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    100deg,
    transparent 38%,
    color-mix(in oklch, var(--cb-text-primary) 7%, transparent) 50%,
    transparent 62%
  );
}

.desk-front.enter::after {
  animation: platen 0.62s var(--ease);
}

@keyframes platen {
  0% {
    opacity: 1;
    transform: translateX(-60%);
  }

  100% {
    opacity: 0;
    transform: translateX(60%);
  }
}

.desk-front.enter {
  animation: desk-print 0.5s var(--ease);
}

@keyframes desk-print {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.976);
    filter: blur(4px);
  }

  60% {
    opacity: 1;
    filter: blur(0);
  }

  78% {
    transform: translateY(-2px) scale(1.003);
  }

  100% {
    transform: none;
  }
}

.feed-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--tint, var(--accent));
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--tint, var(--accent)) 18%, transparent);
}

.desk-where {
  margin-left: auto;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.desk-hook {
  margin: 0 0 1px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* every card takes its accent from the family of thing it is about */
.desk-front[data-tint="human"],
.desk-earlier li[data-tint="human"] {
  --tint: var(--human);
}

.desk-front[data-tint="agent"],
.desk-earlier li[data-tint="agent"] {
  --tint: var(--agent);
}

.desk-front[data-tint="project"],
.desk-earlier li[data-tint="project"] {
  --tint: var(--project);
}

.desk-front[data-tint="money"],
.desk-earlier li[data-tint="money"] {
  --tint: var(--money);
}

.desk-front[data-tint="client"],
.desk-earlier li[data-tint="client"] {
  --tint: var(--client);
}

.desk-front[data-tint="quiet"],
.desk-earlier li[data-tint="quiet"] {
  --tint: var(--ink-3);
}

.desk-front .feed-tag {
  border-color: color-mix(in srgb, var(--tint, var(--accent)) 42%, transparent);
  color: var(--tint, var(--accent));
}

/* --- debut: the orbit the person actually flies on the globe ------------- */
.desk-front[data-layout="debut"] .desk-headline {
  color: var(--human);
}

.desk-orbit {
  float: left;
  width: 46px;
  height: 46px;
  margin: 0 var(--cb-space-3) 6px 0;
  border-radius: 50%;
  border: 1px dashed color-mix(in srgb, var(--human) 55%, transparent);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--human);
  position: relative;
}

.desk-orbit::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--human);
  top: -3px;
  left: 50%;
  margin-left: -3px;
  transform-origin: 3px 26px;
  animation: desk-orbit 5s linear infinite;
}

@keyframes desk-orbit {
  to {
    transform: rotate(360deg);
  }
}

/* --- agent: show the thing itself, the way TTD shows the engine ---------- */
.desk-front[data-layout="agent"] .desk-headline {
  color: var(--agent);
}

.desk-plate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--cb-space-2);
  padding: 3px var(--cb-space-2);
  border: 1px solid color-mix(in srgb, var(--agent) 34%, transparent);
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--agent);
}

/* --- ledger: the only card that carries money ---------------------------- */
.desk-front[data-layout="ledger"] .desk-headline {
  color: var(--money);
}

.desk-bar {
  height: 6px;
  margin: 10px 0 5px;
  border-radius: 99px;
  background: color-mix(in oklch, var(--cb-text-secondary) 13%, transparent);
  overflow: hidden;
}

.desk-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(
    90deg,
    var(--money),
    color-mix(in oklch, var(--money) 30%, var(--ink))
  );
  transition: width 1.1s var(--ease);
}

.desk-barlab {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* --- milestone: a number worth stopping for, and a stamp ----------------- */
.desk-big {
  display: block;
  margin: 2px 0 var(--cb-space-1);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 42px;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--tint, var(--project));
  font-variant-numeric: tabular-nums;
}

.desk-stamp {
  position: absolute;
  right: 2px;
  top: 34px;
  padding: var(--cb-space-1) 9px;
  border: 2px solid var(--tint, var(--project));
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tint, var(--project));
  transform: rotate(-11deg);
  opacity: 0.85;
  pointer-events: none;
}

.desk-front.enter .desk-stamp {
  animation: desk-stamp 0.42s var(--ease);
}

@keyframes desk-stamp {
  0% {
    opacity: 0;
    transform: rotate(-11deg) scale(2.4);
  }

  70% {
    opacity: 0.85;
  }

  100% {
    opacity: 0.85;
    transform: rotate(-11deg) scale(1);
  }
}

/* --- seam and editorial ------------------------------------------------- */
.desk-rule {
  height: 1px;
  margin: 10px 0 2px;
  opacity: 0.5;
  background: repeating-linear-gradient(
    90deg,
    var(--ink-3) 0 6px,
    transparent 6px 12px
  );
}

.desk-front[data-layout="colour"] .desk-headline {
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-2);
}

.desk-front[data-projected] .desk-headline {
  color: var(--idea);
}

/* --- the column --------------------------------------------------------- */
.desk-earlier li {
  grid-template-columns: 7px 34px 1fr;
  align-items: baseline;
  animation: desk-slide 0.4s var(--ease);
}

.desk-earlier li[data-focus] {
  cursor: pointer;
}

.desk-earlier li[data-focus]:hover .desk-earlier-head {
  color: var(--ink);
}

.desk-earlier .feed-dot {
  align-self: center;
  box-shadow: none;
}

@keyframes desk-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-front.enter,
  .desk-front.enter::after,
  .desk-front.enter .desk-stamp,
  .desk-earlier li,
  .desk-orbit::after,
  .stand-v.tick {
    animation: none;
  }
}

/* A line in the column whose subject is the thing the card is showing. The
   panel and the globe point at each other rather than running side by side. */
.desk-earlier li.lit {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--tint, var(--accent)) 13%, transparent),
    transparent 72%
  );
  box-shadow: inset 2px 0 0 var(--tint, var(--accent));
}

.desk-earlier li.lit .desk-earlier-head {
  color: var(--ink);
}

.desk-earlier li[data-focus]:hover {
  background: color-mix(in oklch, var(--cb-text-secondary) 5%, transparent);
}

/* --- the engraving ------------------------------------------------------- */

/* A newspaper of this period carried a woodcut; Transport Tycoon's carries the
   sprite of the thing reported. This one is struck in the browser from the
   subject's own identity, so a person or project is recognisable across
   stories. It depicts nobody. */
.desk-plate-art {
  float: right;
  width: 74px;
  height: 74px;
  margin: 0 0 6px var(--cb-space-3);
  opacity: 0;
  animation: plate-in 0.7s var(--ease) 0.12s forwards;
  mix-blend-mode: screen;
}

@keyframes plate-in {
  from {
    opacity: 0;
    transform: scale(0.86) rotate(-3deg);
  }

  to {
    opacity: 0.92;
    transform: none;
  }
}

.desk-front.has-plate .desk-headline,
.desk-front.has-plate .desk-body {
  max-width: none;
}

/* --- the medal ----------------------------------------------------------- */
.desk-front[data-layout="medal"] .desk-headline {
  color: var(--money);
}

.desk-medal {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
  padding: var(--cb-space-2) 11px;
  border: 1px solid color-mix(in srgb, var(--money) 40%, transparent);
  border-radius: 7px;
  background: color-mix(in srgb, var(--money) 7%, transparent);
}

.desk-medal-name {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--money);
}

.desk-medal-note {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
}

.desk-front.enter .desk-medal {
  animation: medal-in 0.6s var(--ease) 0.18s backwards;
}

@keyframes medal-in {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-plate-art {
    animation: none;
    opacity: 0.92;
  }

  .desk-front.enter .desk-medal {
    animation: none;
  }
}

/* --- the wire, as a strip of teleprinter paper --------------------------- */

/* A single line with its end cut off is not a wire; it is a truncated string.
   A teleprinter prints across the platen, wraps, and the paper rides up. This
   holds the last few lines, newest at the bottom, older ones fading as they
   climb out of the machine. Upper case throughout, because Baudot had no
   lower case and every wire in the world was shouted. */
.desk-wire {
  position: relative;
  flex: none;
  margin-top: var(--cb-space-2);
  padding: 9px 0 2px;
  border-top: 1px dashed
    color-mix(in oklch, var(--cb-text-secondary) 22%, transparent);
  overflow: hidden;
}

.desk-wire::before {
  /* the tear-off perforation */
  content: "";
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 5px;
  background: radial-gradient(
    circle at 3px 2px,
    var(--bg) 1.6px,
    transparent 1.7px
  );
  background-size: 9px 5px;
  opacity: 0.8;
  pointer-events: none;
}

.wire-tape {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 46px;
  justify-content: flex-end;
}

.wire-line {
  font-size: 9.5px;
  line-height: 1.45;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-3);
  overflow-wrap: anywhere;
  animation: wire-ride 0.4s var(--ease);
}

.wire-line:last-child {
  color: var(--ink-2);
}

.wire-line:last-child::after {
  content: "\258C";
  color: var(--project);
  animation: wire-caret 1s steps(2) infinite;
}

.wire-line:first-child:not(:last-child) {
  opacity: 0.42;
}

@keyframes wire-ride {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
}

@keyframes wire-caret {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wire-line,
  .wire-line:last-child::after {
    animation: none;
  }
}

/* --- the future, marked ------------------------------------------------- */

/* Past the seam nothing happened. The card keeps the desk's voice and loses
   its authority: a hatched edge, the idea colour, and the word itself where a
   reader cannot miss it. */
.desk-front[data-projected] {
  --tint: var(--idea);
}

.desk-front[data-projected]::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -10px;
  width: 3px;
  background: repeating-linear-gradient(
    180deg,
    var(--idea) 0 4px,
    transparent 4px 9px
  );
  opacity: 0.55;
}

.desk-front[data-projected] .desk-headline {
  color: var(--idea);
}

.desk-front[data-projected] .desk-hook {
  color: color-mix(in srgb, var(--idea) 62%, var(--ink-3));
}

.desk-front[data-projected] .feed-tag {
  border-style: dashed;
}

.desk-front[data-projected] .desk-body::after {
  content: " Projected, not recorded.";
  color: var(--idea);
  opacity: 0.75;
}

.desk-earlier li[data-projected] .desk-earlier-head {
  color: color-mix(in srgb, var(--idea) 55%, var(--ink-3));
  font-style: italic;
}

.wire-line[data-projected] {
  color: color-mix(in srgb, var(--idea) 50%, var(--ink-3));
}

/* The music control names what is playing, so the running order is legible.
   Clicking it again takes the next track; the × beside it stops the station. */
#desk-music {
  max-width: 96px;
}

#desk-music span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the exchange -------------------------------------------------------- */

/* A mission is settled by a conversation, and the coordination log has always
   held it: claim, hand in, sent back, hand in again. Every line below is an
   operation that was recorded. Nobody's words are invented, because none were
   written down. */
.desk-thread {
  list-style: none;
  margin: 11px 0 6px;
  padding: 0 0 0 13px;
  border-left: 1px solid
    color-mix(in srgb, var(--tint, var(--accent)) 34%, transparent);
  display: flex;
  flex-direction: column;
  gap: var(--cb-space-1);
}

.desk-thread li {
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--ink-2);
  position: relative;
}

.desk-thread li::before {
  content: "";
  position: absolute;
  left: -17px;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tint, var(--accent));
  opacity: 0.7;
}

.desk-thread b {
  color: var(--ink);
  font-weight: 700;
}

.desk-thread i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

.desk-thread-more {
  color: var(--ink-3);
  font-style: italic;
  font-size: 11.5px;
}

.desk-thread-more::before {
  opacity: 0.3 !important;
}

.desk-thread-foot {
  margin: 2px 0 0;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.desk-front.enter .desk-thread li {
  animation: thread-in 0.45s var(--ease) backwards;
}

.desk-front.enter .desk-thread li:nth-child(2) {
  animation-delay: 0.06s;
}

.desk-front.enter .desk-thread li:nth-child(3) {
  animation-delay: 0.12s;
}

.desk-front.enter .desk-thread li:nth-child(4) {
  animation-delay: 0.18s;
}

.desk-front.enter .desk-thread li:nth-child(5) {
  animation-delay: 0.24s;
}

.desk-front.enter .desk-thread li:nth-child(6) {
  animation-delay: 0.3s;
}

@keyframes thread-in {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .desk-front.enter .desk-thread li {
    animation: none;
  }
}

/* ==================================================== the desk on a phone
   The panel was display:none below 1000px, which meant the one thing on the
   page that proves it is reading a real record did not exist for most of the
   people who visit. It does not need to be the same object: on a phone it is a
   strip above the timeline carrying the front page and the wire, with the
   column, the engraving and half the scoreboard left behind. */
@media (width <= 860px) {
  /* The topmost frame only — the free planet above the hero, the one you reach
     by scrolling all the way up. On a phone every other slide already carries a
     panel of its own text, and a second one competing for the same corner is
     what made the page unusable. On the free planet there is nothing to compete
     with, and the strip is the reason to stay: it says what the globe under
     your thumb is actually doing. */
  .hud-feed {
    display: none;
  }

  body.free .hud-feed {
    display: flex;
    inset: auto 18px 92px;
    width: auto;
    max-height: 44vh;
    padding: 10px 13px var(--cb-space-2);
    border-radius: var(--cb-radius-3);
    border: 1px solid var(--line);
    background: color-mix(in oklch, var(--shade) 72%, transparent);
    backdrop-filter: blur(12px);
  }

  /* What a 390px column cannot hold. */
  body.free .hud-feed .desk-earlier,
  body.free .hud-feed .desk-plate-art,
  body.free .hud-feed .desk-medal,
  body.free .hud-feed .desk-thread,
  body.free .hud-feed .desk-big,
  body.free .hud-feed .desk-stamp,
  body.free .hud-feed .desk-bar,
  body.free .hud-feed .desk-barlab,
  body.free .hud-feed .desk-orbit,
  body.free .hud-feed .desk-byline {
    display: none;
  }

  /* Two figures, not four: the lead and the day. */
  body.free .hud-feed .desk-standings .stand:nth-child(n + 3) {
    display: none;
  }

  body.free .hud-feed .desk-standings {
    margin: 6px 0 0;
  }

  body.free .hud-feed .desk-front {
    min-height: 0;
    padding: 9px 0 6px;
  }

  body.free .hud-feed .desk-headline {
    font-size: 15.5px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.free .hud-feed .desk-hook {
    font-size: 11.5px;
  }

  body.free .hud-feed .desk-body {
    font-size: 11.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  body.free .hud-feed .desk-name {
    font-size: 16px;
  }

  body.free .hud-feed .desk-clock,
  body.free .hud-feed .desk-zone {
    font-size: 8px;
  }

  body.free .hud-feed .wire-tape {
    min-height: 26px;
  }

  body.free .hud-feed .wire-line:not(:last-child) {
    display: none;
  }
}

/* Below this the strip would crowd the globe out of its own page. */
@media (width <= 380px), (height <= 560px) {
  .hud-feed {
    display: none;
  }
}

/* The header row is four things in a narrow strip: the masthead, the zone, the
   clock and two controls. On a phone the clock is the one that can go — the
   replay date is already under the reader's thumb on the timeline. */
@media (width <= 860px) {
  .hud-feed .desk-clock {
    display: none;
  }

  .hud-feed .desk-head {
    gap: 6px;
  }

  .hud-feed .desk-zone {
    margin-left: auto;
  }

  #desk-music {
    max-width: none;
  }
}

/* How many stories this page beat to the front. At any real volume the desk
   prints a small fraction of what arrives, and saying nothing about the rest
   understates how busy the record is. */
.desk-also {
  margin: var(--cb-space-2) 0 0;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}