/* ---------------------------------------------------------------
   Deep Pearl — design system
   "Nacre Engine, Press Edition"
   Living simulations set in a monograph's apparatus.
   Ink, bone, pearl — and registration red, used only when it means.
   --------------------------------------------------------------- */

:root {
  --bg: #07080a;
  --abyss: #04050a;
  --bg-elev: #0d0f12;
  --bg-card: #0b0d10;
  --border: #1c1f24;
  --border-soft: #15181c;
  --text: #e9e6df; /* bone — paper, not screen */
  --muted: #9aa0a4;
  --faint: #6b7176;
  --pearl-a: #aebfd6;
  --pearl-b: #d8cfc2;
  --pearl-c: #b9d2c9;
  --accent: #c5cfd9;
  --alert: #d8a07a; /* disagreement & inversions only */
  --press-red: #c2452f; /* editorial apparatus only */
  --focus: #e6ddc4;
  --max: 1140px;
  --pad-x: clamp(20px, 4.5vw, 44px);
  --ease-press: cubic-bezier(0.16, 1, 0.3, 1);
  --font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
    Palatino, Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular,
    Menlo, Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

p a,
.prose a {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(90deg, var(--pearl-a), var(--pearl-b));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 180ms var(--ease-press);
}

p a:hover,
.prose a:hover {
  background-size: 100% 2px;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 2px;
}

main:focus {
  outline: none;
}

img,
svg,
canvas {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--pearl-b);
  color: #0a0a0b;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pearl-b);
  color: #0a0a0b;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  z-index: 100;
}

.skip-link:focus,
.skip-link:focus-visible {
  left: 16px;
  top: 16px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* mono apparatus voice — nav, eyebrows, tags, captions, readouts */
.mono,
.eyebrow,
.tag,
.figcap,
.readout,
.site-nav,
.back,
.footer-col h4,
.footer-base {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(7, 8, 10, 0.82);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--border-soft);
}

.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 60px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.wordmark .pearl {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 32% 30%,
    #f3f1ec 0%,
    var(--pearl-a) 38%,
    var(--pearl-c) 70%,
    #5a6b7a 100%
  );
  box-shadow: 0 0 10px rgba(174, 191, 214, 0.45);
  flex: none;
  view-transition-name: pearl;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 2.4vw, 26px);
  font-size: 12.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.site-nav a {
  white-space: nowrap;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}

.site-nav a:hover {
  color: var(--text);
}

.site-nav a[aria-current="page"] {
  color: var(--text);
  border-bottom-color: var(--pearl-b);
}

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

.hero {
  position: relative;
  padding: clamp(84px, 14vh, 160px) 0 clamp(48px, 8vh, 96px);
  overflow: hidden;
}

.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(
    120% 100% at 50% 40%,
    #000 55%,
    transparent 100%
  );
  mask-image: radial-gradient(120% 100% at 50% 40%, #000 55%, transparent 100%);
}

.hero .wrap {
  position: relative;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-size: clamp(48px, 8.5vw, 116px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 18px 0 26px;
}

.hero h1 .shimmer {
  background: linear-gradient(
    100deg,
    var(--pearl-a) 0%,
    #f0ede7 25%,
    var(--pearl-b) 50%,
    var(--pearl-c) 75%,
    var(--pearl-a) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer-drift 12s linear infinite;
}

@keyframes shimmer-drift {
  to {
    background-position: 200% 0;
  }
}

.hero .lede {
  max-width: 640px;
  font-size: clamp(18px, 2.2vw, 21px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 36px;
}

.hero .lede strong {
  color: var(--text);
  font-weight: 500;
}

/* letterpress reveal — lines rise from behind their rule */
.lp {
  display: block;
  overflow: hidden;
}

.lp > span {
  display: inline-block;
  transform: translateY(112%);
  animation: lp-rise 0.8s var(--ease-press) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

@keyframes lp-rise {
  to {
    transform: translateY(0);
  }
}

/* live instrument readout under the hero */
.readout {
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 8px 14px;
  background: rgba(4, 5, 10, 0.5);
}

.readout strong {
  color: var(--pearl-a);
  font-weight: 500;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.eyebrow .bar {
  width: 26px;
  height: 1px;
  background: linear-gradient(90deg, var(--pearl-a), var(--pearl-b));
  display: inline-block;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 5vw, 64px);
  margin: 0;
  padding-top: 28px;
  border-top: 1px solid var(--border-soft);
}

.meta div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.meta dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}

.meta dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--text);
}

/* ------------------------------ sections ---------------------- */

.section {
  padding: clamp(56px, 9vh, 104px) 0;
  border-top: 1px solid var(--border-soft);
  position: relative;
}

.section-header {
  margin-bottom: clamp(28px, 5vh, 48px);
  max-width: 760px;
}

.section-header h2,
.prose h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 90, "SOFT" 30;
  font-size: clamp(30px, 4.5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 14px 0 12px;
}

.section-header .kicker {
  color: var(--muted);
  margin: 0;
  font-size: 16.5px;
}

/* accretion reveal — rule draws, then children layer up */
[data-accrete] > * {
  opacity: 0;
  transform: translateY(10px);
}

[data-accrete].accreted > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s var(--ease-press), transform 0.6s var(--ease-press);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.rule {
  height: 1px;
  background: linear-gradient(
    90deg,
    var(--pearl-a),
    var(--pearl-b),
    var(--pearl-c)
  );
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-press);
  opacity: 0.6;
}

.accreted .rule,
.accreted.rule {
  transform: scaleX(1);
}

/* ghost chapter numerals */
.ghost-num {
  position: absolute;
  top: clamp(8px, 4vh, 40px);
  right: var(--pad-x);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144;
  font-size: clamp(120px, 24vh, 280px);
  line-height: 1;
  color: rgba(233, 230, 223, 0.04);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  view-transition-name: chapter-num;
}

/* ------------------------------ tags / status lamps ----------- */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--muted);
  white-space: nowrap;
}

.tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* meaning encoded in cadence, not just color */
.tag-live {
  color: #9fd3b4;
  border-color: rgba(159, 211, 180, 0.35);
}
.tag-live::before {
  animation: lamp-1hz 1s steps(2, jump-none) infinite;
}

.tag-pilot {
  color: #d8c08a;
  border-color: rgba(216, 192, 138, 0.35);
}
.tag-pilot::before {
  animation: lamp-double 2s infinite;
}

.tag-active {
  color: #a9c4e2;
  border-color: rgba(169, 196, 226, 0.35);
}

.tag-review {
  color: #c9b8dc;
  border-color: rgba(201, 184, 220, 0.35);
}
.tag-review::before {
  animation: lamp-1hz 4s steps(2, jump-none) infinite;
}

@keyframes lamp-1hz {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.25;
  }
}

@keyframes lamp-double {
  0%, 8% { opacity: 1; }
  12%, 20% { opacity: 0.2; }
  24%, 32% { opacity: 1; }
  36%, 100% { opacity: 0.35; }
}

/* ------------------------------ figure plates ----------------- */

.figure {
  margin: 0;
  position: relative;
}

.plate {
  position: relative;
  background: var(--abyss);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}

/* corner registration ticks */
.plate::before,
.plate::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  pointer-events: none;
  opacity: 0.5;
  z-index: 3;
}

.plate::before {
  top: 10px;
  left: 10px;
  border-top: 1px solid var(--faint);
  border-left: 1px solid var(--faint);
}

.plate::after {
  bottom: 10px;
  right: 10px;
  border-bottom: 1px solid var(--faint);
  border-right: 1px solid var(--faint);
}

.plate canvas {
  width: 100%;
  height: 100%;
}

.figcap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 14px 4px 0;
}

.figcap .fig-no {
  color: var(--pearl-a);
}

.figcap .fig-note {
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* HTML labels pinned over canvases — type never rendered in canvas */
.plate-label {
  position: absolute;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}

.plate-label.red {
  color: var(--press-red);
}

/* scrim to hold contrast where text overlays a canvas */
.scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, transparent, rgba(7, 8, 10, 0.85));
  pointer-events: none;
}

/* plate control buttons (reset, simulate, sliders row) */
.plate-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.plate-btn {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.plate-btn:hover {
  border-color: #343a42;
  background: #14171b;
}

.plate-btn.armed {
  color: var(--press-red);
  border-color: rgba(194, 69, 47, 0.5);
}

.plate-slider {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.plate-slider input[type="range"] {
  accent-color: var(--pearl-a);
  width: 120px;
}

.plate-slider output {
  color: var(--pearl-a);
  min-width: 5ch;
}

/* redaction bars — blind evaluation made tactile */
.redact {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.redact .bar-ink {
  position: absolute;
  inset: -1px -4px;
  background: var(--text);
  transition: opacity 120ms ease;
}

.redact:hover .bar-ink,
.redact:focus-visible .bar-ink {
  opacity: 0;
}

.redact .stamp {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--press-red);
  border: 1px solid var(--press-red);
  padding: 1px 4px;
  opacity: 0;
  transition: opacity 120ms ease;
  pointer-events: none;
  white-space: nowrap;
}

.redact:hover .stamp,
.redact:focus-visible .stamp {
  opacity: 1;
}

/* editorial snap — the only instant state change on the site */
.snap {
  transition: none;
}

.snap:hover,
.snap:focus-visible {
  background: var(--text);
  color: var(--bg);
}

.snap:hover *,
.snap:focus-visible * {
  color: var(--bg) !important;
}

/* ------------------------------ venture cards ----------------- */

.ventures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.venture {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 0 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 160ms ease, transform 160ms ease,
    background 160ms ease;
}

.venture:hover {
  border-color: #2c3138;
  background: var(--bg-elev);
  transform: translateY(-2px);
}

/* iridescent sheen following the cursor */
.sheen {
  position: relative;
}

.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(174, 191, 214, 0.07),
    rgba(216, 207, 194, 0.04) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 240ms ease;
  z-index: 2;
}

.sheen:hover::after {
  opacity: 1;
}

.venture .specimen {
  width: 100%;
  height: 150px;
  background: var(--abyss);
  border-bottom: 1px solid var(--border-soft);
}

.venture .specimen canvas {
  width: 100%;
  height: 100%;
}

.venture-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 26px 0;
  flex: 1;
}

.venture-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.venture h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 60;
  font-size: 26px;
  margin: 0;
}

.venture .role {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin: -6px 0 0;
}

.venture p.desc {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  flex: 1;
}

.venture-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}

.venture-link .arrow {
  transition: transform 140ms ease;
}

.venture:hover .venture-link .arrow {
  transform: translateX(4px);
}

.venture > a.cover {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  z-index: 3;
}

/* ------------------------------ principles -------------------- */

.principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.principle {
  padding: 26px 26px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(174, 191, 214, 0.03), transparent);
}

.principle .num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--pearl-a);
  letter-spacing: 0.08em;
}

.principle h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 21px;
  margin: 10px 0 8px;
}

.principle p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------ project pages ----------------- */

.page-hero {
  position: relative;
  padding: clamp(56px, 9vh, 100px) 0 clamp(36px, 6vh, 64px);
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: -50% -20% auto;
  height: 140%;
  background: radial-gradient(
    620px 360px at 22% 0%,
    rgba(174, 191, 214, 0.08),
    transparent 70%
  );
  pointer-events: none;
}

.page-hero .wrap {
  position: relative;
}

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 34px;
  transition: color 140ms ease;
}

.back:hover {
  color: var(--text);
}

.meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  font-size: clamp(40px, 6.5vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 12px 0 18px;
}

.page-hero .lede {
  max-width: 660px;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--bg-elev);
  transition: border-color 140ms ease, background 140ms ease;
}

.btn:hover {
  border-color: #343a42;
  background: #14171b;
}

.btn-primary {
  background: linear-gradient(120deg, var(--pearl-a), var(--pearl-b));
  color: #0b0c0e;
  border-color: transparent;
}

.btn-primary:hover {
  background: linear-gradient(120deg, #bccbde, #e2dacd);
  border-color: transparent;
}

.prose {
  max-width: 700px;
}

.prose p {
  color: var(--muted);
  margin: 0 0 16px;
  font-size: 16.5px;
}

.prose p strong {
  color: var(--text);
  font-weight: 500;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}

.fact {
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-card);
}

.fact dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.fact dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.5;
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: flex;
  flex-direction: column;
}

.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--border-soft);
}

.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--pearl-a);
  padding-top: 3px;
}

.steps h3 {
  font-size: 17px;
  font-weight: 500;
  margin: 0 0 6px;
}

.steps p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
  max-width: 640px;
}

.callout {
  margin-top: clamp(28px, 5vh, 44px);
  padding: 24px 28px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--pearl-b);
  border-radius: 10px;
  background: var(--bg-card);
  max-width: 760px;
}

.callout p {
  margin: 0;
  color: var(--muted);
  font-size: 15.5px;
}

.callout p strong {
  color: var(--text);
  font-weight: 500;
}

/* ------------------------------ footer ------------------------ */

.site-footer {
  border-top: 1px solid var(--border-soft);
  padding: clamp(40px, 7vh, 64px) 0 48px;
  margin-top: clamp(40px, 7vh, 72px);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(28px, 5vw, 64px);
}

.footer-brand .wordmark {
  margin-bottom: 12px;
}

.footer-brand .wordmark .pearl {
  view-transition-name: none;
}

.footer-brand p {
  margin: 0;
  color: var(--faint);
  font-size: 14px;
  max-width: 300px;
}

.footer-col h4 {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
  margin: 0 0 14px;
}

.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.footer-col a {
  font-size: 14.5px;
  color: var(--muted);
  transition: color 140ms ease;
}

.footer-col a:hover {
  color: var(--text);
}

.footer-base {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: clamp(32px, 5vh, 48px);
  padding-top: 22px;
  border-top: 1px solid var(--border-soft);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* ------------------------------ view transitions -------------- */

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-press);
}

/* ------------------------------ responsive -------------------- */

@media (max-width: 880px) {
  .ventures,
  .principles,
  .facts {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-header .wrap {
    height: auto;
    min-height: 56px;
    padding-top: 10px;
    padding-bottom: 10px;
    flex-wrap: wrap;
  }

  .ghost-num {
    font-size: clamp(90px, 16vh, 160px);
    opacity: 0.7;
  }
}

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

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .lp > span {
    transform: none;
  }

  [data-accrete] > * {
    opacity: 1;
    transform: none;
  }

  .rule {
    transform: scaleX(1);
  }

  .hero h1 .shimmer {
    background-position: 0 0;
  }
}

/* ---------------------------------------------------------------
   Multivac page-scoped CSS — src/pages/multivac.astro <style>,
   pasted as plain class selectors (no data-astro-cid suffixes).
   --------------------------------------------------------------- */

/* ---------- FIG. 1 — the peer matrix grid scaffold ---------- */
.matrix {
  display: grid;
  grid-template-columns: clamp(64px, 9vw, 96px) 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 10px;
  row-gap: 8px;
}

.matrix-corner {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 2px;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  padding-bottom: 5px;
}

/* track sizes match the canvas cell math exactly: 8 equal tracks,
   1px padding compensates the plate border so labels sit over cells */
.matrix-cols {
  grid-area: 1 / 2;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  padding: 18px 1px 6px;
}

.matrix-rows {
  grid-area: 2 / 1;
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  padding: 1px 0;
}

.matrix-plate {
  grid-area: 2 / 2;
  aspect-ratio: 16 / 9;
}

.axis-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.matrix-rows .axis-cell {
  justify-content: flex-end;
  padding-right: 12px;
}

/* ---------- redacted model chips ---------- */
.chip {
  display: inline-block;
  background: none;
  border: 0;
  margin: 0;
  padding: 1px 3px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--text);
  white-space: nowrap;
  line-height: 1.5;
}

.chip:hover,
.chip:focus-visible {
  z-index: 6;
}

.chip .bar-ink {
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip .bar-ink .code {
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--bg);
}

/* on narrow plates a column's bar (as wide as the hidden name) runs into the
   next column; every code paints above every bar, so none is covered */
.matrix-cols .chip .bar-ink .code {
  position: relative;
  z-index: 1;
}

/* touch fallback — click toggles the lift that hover/focus provide */
.chip.lifted .bar-ink {
  opacity: 0;
}

.chip.lifted .stamp {
  opacity: 1;
}

.chip.lifted {
  z-index: 6;
}

/* unblinded on a narrow plate, a name can be wider than its column: it sits
   on the page colour, so the neighbouring bars never swallow its ends */
.chip:hover .real,
.chip:focus-visible .real,
.chip.lifted .real {
  background: var(--bg);
}

/* ---------- invisible-but-focusable cell inspector ---------- */
.matrix-cells {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  z-index: 3;
}

.cellbtn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: crosshair;
}

.cellbtn:focus-visible {
  outline-offset: -3px;
}

.matrix-tip {
  position: absolute;
  z-index: 7;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text);
  background: rgba(7, 8, 10, 0.92);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 9px;
  pointer-events: none;
  white-space: nowrap;
}

/* ---------- RECUSED diagonal stamp (atan(9/16) ≈ 29.4°) ---------- */
.recused-label {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(29.4deg);
  letter-spacing: 0.6em;
  font-size: 12px;
  opacity: 0.85;
}

/* the density legend sits on the bottom row; it ends before the last
   column (87.5%), whose cell is recused, by wrapping between its halves
   (never inside "0–1") when a narrow plate is too short for one line */
.mv-density {
  max-width: calc(87.5% - 34px);
}

.mv-density span {
  white-space: nowrap;
}

/* below the breakpoint the corner column is narrower than "Answerers →":
   right-aligned, the arrow wrapped onto a line of its own and, on the
   narrowest phones, "Judges ↓" met the first column's bar. Each legend now
   keeps its arrow and reads from the column's left edge; the first runs on
   over the empty band above the column codes. */
@media (max-width: 880px) {
  .matrix-corner {
    align-items: flex-start;
  }

  .matrix-corner span {
    white-space: nowrap;
  }
}

@media (max-width: 720px) {
  .matrix-plate {
    aspect-ratio: 1 / 1;
  }

  .recused-label {
    transform: translate(-50%, -50%) rotate(45deg);
    letter-spacing: 0.35em;
  }

  .matrix {
    grid-template-columns: 54px 1fr;
    column-gap: 6px;
  }

  .matrix-rows .axis-cell {
    padding-right: 5px;
  }

  .chip {
    font-size: 9px;
    padding: 1px 2px;
  }

  .chip .bar-ink .code {
    font-size: 8.5px;
    letter-spacing: 0.05em;
  }

  .matrix-corner {
    font-size: 8.5px;
  }

  .mv-density {
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }

  /* the last column's stamp ends with its bar instead of centring on it:
     centred, its (invisible) box ran past a 320px screen, which then
     scrolled sideways */
  .matrix-cols .axis-cell:last-child .stamp {
    left: auto;
    right: -4px;
    transform: rotate(-4deg);
  }
}

/* ---------------------------------------------------------------
   themultivac additions — the few things themultivac.com pages
   need beyond the Deep Pearl system. Same tokens, same voice.

   Deliberate extensions of the Deep Pearl patterns, kept on purpose:
   - the home hero adds a .hero-links CTA row after the readout;
   - the home, judges and leaderboard heroes set their headline figures
     as a dl.meta.meta-stats strip in the display face (deeppearlai.com's
     .meta dd is 15.5px sans), with a .meta-caption source line where
     the figures need one;
   - .facts.facts-4: a four-up .facts grid whose cells are whole-tile
     links;
   - .callout.quote: the Asimov epigraph as a callout set in the
     display face;
   - the header nav carries five links; on phones the header scrolls
     away instead of staying pinned (the 560px header rule below).
   --------------------------------------------------------------- */

/* hero h1 — let the descenders (the "y" of "Actually") hang below the
   letterpress line instead of being cut flat by .lp's overflow: the
   clip box grows by 0.14em and the negative margin keeps the layout.
   The lines still start fully hidden (translateY 112%). */
.hero h1 .lp {
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

/* hero figures — a page's headline numbers (the home page's four frozen
   dataset figures), set in the display face */
.meta.meta-stats dd {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.meta-caption {
  margin: 18px 0 0;
  max-width: 640px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--faint);
}

.hero .readout + .hero-links {
  margin-top: 22px;
}

/* four-up link tiles — a .facts grid whose cells are whole-tile links */
.facts.facts-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.fact-link {
  position: relative;
  transition: border-color 160ms ease, background 160ms ease,
    transform 160ms ease;
}

.fact-link:hover {
  border-color: #2c3138;
  background: var(--bg-elev);
  transform: translateY(-2px);
}

.fact-link dd a {
  display: block;
  color: inherit;
}

/* stretch the link over the whole tile */
.fact-link dd a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.fact-link dd a strong {
  display: block;
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
  margin-bottom: 6px;
}

.fact-link dd a span {
  display: block;
  color: var(--muted);
  font-size: 14.5px;
}

/* the quote — an editorial callout set in the display face. It is a
   <figure>, so the browser's default figure margins (40px each side,
   1em below) are cleared: the box sits flush on the column edge like
   every other callout; .callout keeps its own top margin. */
.callout.quote {
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 0;
}

.callout.quote blockquote {
  margin: 0;
}

.callout.quote blockquote p {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 60, "SOFT" 30;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.45;
  color: var(--text);
}

.callout .cite {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* links in the footer base strip (a page's own credits line) */
.footer-base a {
  color: var(--muted);
  transition: color 140ms ease;
}

.footer-base a:hover {
  color: var(--text);
}

@media (max-width: 880px) {
  .facts.facts-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .facts.facts-4 {
    grid-template-columns: 1fr;
  }
}

/* narrow screens: the five nav links wrap under the wordmark instead
   of scrolling sideways (no link is ever cut off), and the header
   scrolls away with the page rather than pinning two or three rows
   over the content (relative, not static, so its z-index still keeps
   it above the chapter numeral). From 561px up it is the sticky Deep
   Pearl header. */
@media (max-width: 560px) {
  .site-header {
    position: relative;
  }

  .site-nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}