/* ═══════════════════════════════════════════════════════════════
   notcfo — shared design system
   Monochrome. Exactly three colors, everywhere:
     white, black, gold.
   Dark mode background: #1F1E1E. Light mode background: #FFFFFF.
   No background tiers, no tints/washes, no borders, no outlines.
   Secondary/quiet text is the same white or black at lower opacity —
   not a separate gray hue. Gold is reserved for genuine emphasis:
   links, CTAs, key numbers, the active tab/filter state — not used
   as a general-purpose structural background.
   Structure (section breaks, list rows, card edges) is carried
   entirely by typography and whitespace now, since there are no
   background steps left to lean on.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --bg:      #1F1E1E;
  --fg:      #FFFFFF;
  --fg-dim:  rgba(255,255,255,.6);
  --fg-faint:rgba(255,255,255,.32);
  --fg-hair: rgba(255,255,255,.12); /* for bars/tracks only — a visual device, not a structural divider */

  --gold:    #c99a4a;
  --on-gold: #14130f; /* text color when sitting on a solid gold fill */

  --max: 1080px;
  --pad: clamp(1.5rem, 5vw, 3rem);
  --r: 2px;
  --nav-h: 58px;
}

html.light {
  --bg:      #FFFFFF;
  --fg:      #000000;
  --fg-dim:  rgba(0,0,0,.6);
  --fg-faint:rgba(0,0,0,.32);
  --fg-hair: rgba(0,0,0,.12);

  --gold:    #8c5c0c;
  --on-gold: #FFFFFF;
}

/* ─── RESET ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.65;
  overflow-x: hidden;
  transition: background .2s, color .2s;
}
a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--gold); }
p { color: var(--fg-dim); line-height: 1.78; }

/* Keyboard focus: gold text + underline, never a background or outline */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  color: var(--gold);
  text-decoration: underline;
}

/* ─── TYPOGRAPHY: TWO VOICES ─────────────────────────────────── */
h1, h2, .voice-human {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--fg);
}
h1 { font-size: clamp(2.3rem, 5vw, 4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.3rem); }
h3 {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: -.01em;
}

.voice-machine, .mono {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  letter-spacing: -.01em;
}
.mono-num { font-variant-numeric: tabular-nums; }

.label {
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-faint);
}
.label-gold {
  font-size: 10px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.label-signal {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold);
}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.sect { padding: 5.5rem 0; }
.sect-alt { /* no distinct tone left to give this — spacing carries the break now */ }
.sh { margin-bottom: 3rem; max-width: 640px; }
.sh .label { margin-bottom: .6rem; }
.sh h2 { margin-bottom: .9rem; }
.sh > p { font-size: .9375rem; }

/* ─── NAV ────────────────────────────────────────────────────── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: var(--bg);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.nav-brand { font-weight: 600; font-size: .9375rem; letter-spacing: .03em; color: var(--gold); }
.nav-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-faint); margin-top: 1px;
}
.nav-right { display: flex; align-items: center; gap: .75rem; }
.theme-btn {
  display: flex; align-items: center; gap: .45rem;
  background: none; color: var(--fg-dim);
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .32rem 0; cursor: pointer; border: none;
  transition: color .15s;
}
.theme-btn:hover { color: var(--gold); }
.burger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { display: block; width: 20px; height: 1.5px; background: var(--fg); transition: transform .22s, opacity .22s; }
.burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.mob-menu {
  display: none; position: fixed; top: var(--nav-h); left: 0; right: 0;
  background: var(--bg); z-index: 850;
  flex-direction: column; padding: 1.5rem var(--pad) 2.5rem;
}
.mob-menu.open { display: flex; }
.mob-menu a {
  font-size: 1.05rem; font-weight: 500; color: var(--fg);
  padding: .8rem 0; transition: color .15s;
}
.mob-menu a:hover { color: var(--gold); }
.mob-menu a.active { color: var(--gold); }
.mob-menu .theme-btn {
  display: block; width: 100%; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--fg); padding: .8rem 0;
}
.mob-menu .theme-btn:hover { color: var(--gold); }

/* ─── BUTTONS ────────────────────────────────────────────────── */
/* .btn-fill: solid gold, the one place gold is used as a fill.
   .btn-soft/.btn-line: no fill at all — gold text only. */
.btn {
  display: inline-block; font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .72rem 1.6rem; border-radius: var(--r); cursor: pointer; border: none;
  transition: opacity .15s, color .15s;
}
.btn-fill { background: var(--gold); color: var(--on-gold); }
.btn-fill:hover { opacity: .82; }
.btn-line, .btn-soft { background: none; color: var(--gold); padding-left: 0; padding-right: 0; }
.btn-line:hover, .btn-soft:hover { text-decoration: underline; }

/* ─── HERO (intro) ───────────────────────────────────────────── */
#hero { padding-top: calc(var(--nav-h) + 4rem); padding-bottom: 0; }
.hero-eyebrow { display: flex; align-items: center; gap: .75rem; margin-bottom: 2rem; }
.hero-eyebrow .line { width: 32px; height: 3px; background: var(--gold); flex-shrink: 0; border-radius: 2px; }
.hero-eyebrow span { font-size: 10px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.hero-h1 { margin-bottom: 1.4rem; max-width: 780px; }
.hero-p { font-size: 1.0625rem; color: var(--fg-dim); max-width: 560px; line-height: 1.78; margin-bottom: 2rem; }
.hero-cta { display: flex; gap: 1.75rem; flex-wrap: wrap; align-items: center; padding-bottom: 3.5rem; }

/* ─── STATS BAR ──────────────────────────────────────────────── */
.stats-bar { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.stats-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
.sc { }
.sc-n { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 700; color: var(--gold); line-height: 1; margin-bottom: .3rem; }
.sc-l { font-size: 11px; color: var(--fg-faint); line-height: 1.5; }

/* ─── DOMAINS / COVERAGE ─────────────────────────────────────── */
.dom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2.25rem; margin-top: .5rem; }
.dom-card { }
.dom-n { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; color: var(--gold); margin-bottom: .8rem; }
.dom-card h3 { margin-bottom: .6rem; }
.dom-card > p { font-size: .8125rem; line-height: 1.72; }

/* ─── VISION / MISSION ───────────────────────────────────────── */
.vision-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.vision-lead { font-size: 1.0625rem; color: var(--fg); line-height: 1.75; margin-bottom: 1.1rem; }
.vision-body p + p { margin-top: .9rem; }
.mission-list { display: flex; flex-direction: column; gap: 1.75rem; }
.mission-item { }
.mission-era { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); margin-bottom: .4rem; }
.mission-text { font-size: .8125rem; color: var(--fg-dim); line-height: 1.65; }

/* ─── MANIFESTO STRIP (the one large solid-gold moment) ──────── */
.manifesto { background: var(--gold); padding: 3.5rem 0; }
.manifesto-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
.manifesto-q {
  font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 700; line-height: 1.15; color: var(--on-gold); max-width: 720px;
}
.manifesto-q em { color: var(--on-gold); opacity: .6; }

/* ─── FOOTER ─────────────────────────────────────────────────── */
footer { padding: 1.75rem 0; }
.foot-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.foot-brand { font-size: .875rem; font-weight: 600; letter-spacing: .04em; color: var(--gold); }
.foot-motto { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.foot-copy { font-size: 10px; color: var(--fg-faint); }
.foot-links { display: flex; gap: 1.25rem; }
.foot-links a { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-dim); transition: color .15s; }
.foot-links a:hover { color: var(--gold); }

/* ─── REVEAL ─────────────────────────────────────────────────── */
.rev { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rev.vis { opacity: 1; transform: none; }

/* ─── LIVE SIGNAL WIDGET (ticker/list components reused by Oracle) ──
   No panel backgrounds or seams left to lean on — rows are separated
   by generous vertical space, with the mono index number and gold
   category tag doing the work borders/backgrounds used to do. */
.ls-status {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center;
  padding-bottom: .9rem; margin-bottom: 1.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint);
}
.ls-status .ls-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-right: .55rem; vertical-align: middle;
}
.ls-status-sep { color: var(--fg-faint); }
.ls-status .ls-sources { color: var(--fg-dim); }

.ls-filters { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-bottom: 1.5rem; }
.ls-filter {
  font-family: 'Inter', sans-serif;
  font-size: 9.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 0; background: none; color: var(--fg-faint); border: none;
  cursor: pointer; transition: color .15s;
}
.ls-filter:hover { color: var(--fg); }
.ls-filter.on { color: var(--gold); }

.ls-list { display: flex; flex-direction: column; gap: 2.25rem; }
.ls-row { display: grid; grid-template-columns: 92px 1fr; text-decoration: none; color: inherit; }
.ls-row:hover .ls-title { color: var(--gold); }
.ls-cat { padding-top: .1rem; display: flex; flex-direction: column; gap: .35rem; }
.ls-cat-tag { font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.ls-cat-rank { font-family: 'JetBrains Mono', monospace; font-size: .9rem; font-weight: 700; color: var(--fg-faint); line-height: 1; }
.ls-body { display: flex; flex-direction: column; gap: .55rem; }
.ls-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.ls-theme { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint); }
.ls-vel { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-dim); }
.ls-vel--up, .ls-vel--down, .ls-vel--flat { color: var(--fg-dim); } /* direction now reads from the arrow glyph itself, not color */
.ls-title { font-size: .9375rem; font-weight: 500; line-height: 1.5; color: var(--fg); transition: color .15s; }
.ls-bar-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 1.25rem; margin-top: .15rem; }
.ls-bar { height: 2px; background: var(--fg-hair); position: relative; }
.ls-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; background: var(--gold); transition: width .4s ease; }
.ls-dis { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.ls-data { display: flex; flex-wrap: wrap; gap: 1.1rem; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-faint); margin-top: .15rem; }
.ls-platforms { display: inline-flex; gap: .5rem; align-items: center; }
.ls-plat { font-weight: 700; color: var(--fg-faint); opacity: .5; }
.ls-plat.on { opacity: 1; color: var(--gold); }
.ls-plat.mid { opacity: .8; color: var(--fg-dim); }
.ls-data-num { color: var(--fg-dim); font-weight: 500; }
.ls-foot { margin-top: 1.5rem; display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.ls-foot-note { font-size: 11px; color: var(--fg-faint); line-height: 1.6; max-width: 560px; }
.ls-foot-note strong { color: var(--fg-dim); font-weight: 600; }
.ls-foot-link { font-size: 10.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); transition: opacity .15s; }
.ls-foot-link:hover { text-decoration: underline; }
.ls-empty { padding: 3rem 0; text-align: center; font-size: .875rem; color: var(--fg-faint); }
.ls-empty strong { color: var(--fg-dim); font-weight: 600; display: block; margin-bottom: .25rem; }

/* ─── ABOUT PAGE: TIMELINE ───────────────────────────────────── */
.tl { margin-top: .5rem; display: flex; flex-direction: column; gap: 2.75rem; }
.tl-row { display: grid; grid-template-columns: 128px 1fr; }
.tl-left { padding-right: 2rem; padding-top: .1rem; }
.tl-period { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 500; letter-spacing: .06em; color: var(--gold); margin-bottom: .45rem; }
.tl-org { font-size: 11px; color: var(--fg-faint); line-height: 1.45; }
.tl-right h3 { margin-bottom: .25rem; }
.tl-company { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; letter-spacing: .04em; color: var(--gold); margin-bottom: .8rem; }
.tl-right ul { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.tl-right li { font-size: .8125rem; color: var(--fg-dim); line-height: 1.65; padding-left: 1.1rem; position: relative; }
.tl-right li::before { content: '\2014'; position: absolute; left: 0; color: var(--fg-faint); font-size: .7rem; }

/* ─── ABOUT PAGE: THE MACHINE HALF ───────────────────────────── */
.machine-sect { }
.machine-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.machine-lead {
  font-family: 'JetBrains Mono', monospace;
  font-size: .9375rem; color: var(--fg); line-height: 1.75; margin-bottom: 1.25rem;
}
.machine-body p { font-size: .875rem; line-height: 1.75; }
.machine-body p + p { margin-top: 1rem; }
.machine-fact-list { display: flex; flex-direction: column; gap: 1.5rem; }
.mf-row { }
.mf-k { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); margin-bottom: .35rem; }
.mf-v { font-size: .8125rem; color: var(--fg-dim); line-height: 1.6; }

/* ─── domain icons ───────────────────────────────────────────
   Five abstract marks, one per coverage domain — same primitive
   (a small filled circle) throughout, only the arrangement differs.
   No representational meaning intended. currentColor + a color
   token means these adapt correctly across light/dark/machine-view
   instead of a hardcoded hex that would look wrong in light mode. */
.dom-icon { color: var(--gold); flex-shrink: 0; display: inline-block; vertical-align: middle; }
.dom-icon circle { fill: currentColor; }
.mf-k-name { display: inline-flex; align-items: center; gap: .5rem; }
.note-tag-row { display: inline-flex; align-items: center; gap: .4rem; }
.dom-icon-wrap { margin-bottom: .7rem; }

/* ─── ABOUT PAGE: KVT (key-value table) ──────────────────────── */
.kvt { width: 100%; border-collapse: collapse; }
.kvt tr + tr td { padding-top: .9rem; }
.kvt td { padding: 0 1rem .9rem 0; font-size: .8125rem; vertical-align: top; }
.kvt td:first-child {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-faint);
  white-space: nowrap; width: 90px;
}
.kvt td:last-child { color: var(--fg-dim); line-height: 1.6; }

/* ─── ABOUT PAGE: SCHEDULE ────────────────────────────────────── */
.sched-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
.sesh-list { display: flex; flex-direction: column; gap: 1.25rem; }
.sesh { display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: color .15s; }
.sesh:hover .sesh-name { color: var(--gold); }
.sesh.active .sesh-name { color: var(--gold); }
.sesh-name { font-size: .875rem; font-weight: 500; color: var(--fg); }
.sesh-dur { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.form { display: flex; flex-direction: column; gap: 1.1rem; }
.fl { display: flex; flex-direction: column; gap: .35rem; }
.fl label { font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-faint); }
.fl input, .fl select, .fl textarea {
  background: none; border: none; border-bottom: 1px solid var(--fg-hair); color: var(--fg);
  font-family: 'Inter', sans-serif; font-size: .875rem; padding: .5rem 0;
  outline: none; width: 100%; resize: none; border-radius: 0;
  transition: border-color .15s; -webkit-appearance: none;
}
.fl input:focus, .fl select:focus, .fl textarea:focus { border-color: var(--gold); }
.fl select option { background: var(--bg); color: var(--fg); }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.slot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px; letter-spacing: .02em; padding: .45rem .2rem;
  background: none; border: none; color: var(--fg-faint);
  cursor: pointer; text-align: center; transition: color .12s;
}
.slot:hover { color: var(--gold); }
.slot.on { color: var(--gold); font-weight: 700; }
.slot.na { opacity: .28; pointer-events: none; }

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 980px) {
  .dom-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 880px) {
  .vision-grid, .machine-grid, .sched-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .dom-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .tl-row { grid-template-columns: 100px 1fr; }
  .foot-inner { flex-direction: column; gap: .5rem; text-align: center; }
}
@media (max-width: 580px) {
  .theme-btn { font-size: 9px; }
  .slots { grid-template-columns: repeat(3, 1fr); }
  .tl-row { grid-template-columns: 1fr; }
  .tl-left { display: flex; gap: 1rem; align-items: baseline; padding-right: 0; padding-bottom: .4rem; }
  h1 { font-size: clamp(1.9rem, 9vw, 2.6rem); }
  .sect { padding: 3.5rem 0; }
  #hero { padding-top: calc(var(--nav-h) + 2.5rem); }
  .ls-row { grid-template-columns: 60px 1fr; }
}

/* NOTE on .fl input's border-bottom above: this is the one deliberate
   exception to "no lines." A text input with zero visual boundary is
   not usable — there's no way to tell where the field is, or that it's
   editable, without it. Kept to the thinnest possible hairline, at low
   opacity, and only on inputs — nowhere else in the file. Flag if you'd
   rather this be handled a different way (e.g. a placeholder-only cue). */

/* ═══════════════════════════════════════════════════════════════
   MACHINE VIEW
   A visible toggle, not a technical mechanism — real agents fetch
   /llms.txt and the JSON files directly and never see this. This is
   for a human to see the same thing: the three JSON-backed sections
   (Signal, Orchestra, Desk Notes) rendered as the literal JSON an
   agent actually receives, via <pre> blocks — not a redesigned
   approximation of it.

   Terminal aesthetic: black background, one monospace font, one
   size, everywhere — overrides light/dark mode entirely while
   active, since a terminal doesn't have a "light mode." Achieved by
   redefining the exact same tokens every component already uses
   (--bg/--fg/--fg-dim/--fg-faint/--fg-hair/--on-gold), so the retint
   cascades to every section automatically with no per-component
   overrides needed. Gold stays the same brand accent across all
   three modes (light/dark/machine) — it's what stays recognizable
   as notcfo no matter which mode you're in.
   ═══════════════════════════════════════════════════════════════ */
html.machine-view {
  --bg: #000000;
  --fg: #E8E8E8;
  --fg-dim: rgba(232,232,232,.68);
  --fg-faint: rgba(232,232,232,.42);
  --fg-hair: rgba(232,232,232,.18);
  --on-gold: #000000;
}

/* One font, one size, everywhere — real terminal output has no type
   scale. Rem-based spacing elsewhere is untouched since it's relative
   to the root, not to any individual element's font-size. */
html.machine-view.machine-view * {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  letter-spacing: 0;
  text-transform: none;
  font-style: normal;
}
html.machine-view .hero-h1,
html.machine-view .sh h2,
html.machine-view .hero-p,
html.machine-view .manifesto-q { max-width: none; }
html.machine-view .hero-eyebrow .line { display: none; }
html.machine-view .btn { border-radius: 0; }

.mv-banner {
  display: none;
  color: var(--gold);
  margin-bottom: 2rem;
}
.mv-banner a { color: var(--gold); text-decoration: underline; }
html.machine-view .mv-banner { display: block; }

.mv-block {
  color: var(--fg-dim);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  margin: 0;
}
.mv-block .mv-key { color: var(--gold); }