/* ============================================================
   Opsmarshal — Enterprise GTM Agent Stack
   Shared stylesheet. Brand tokens per opsmarshal.com system.
   ============================================================ */

:root {
  --gold-50:  #FDF8EE;
  --gold-100: #F7E8C2;
  --gold-200: #EDD08A;
  --gold-400: #C8962A;
  --gold-500: #B07C1A;
  --gold-600: #8F6210;
  --gold-800: #5A3C06;
  --gold-bright: #E8B84B;

  --black:     #07080C;
  --surface:   #0F1116;
  --surface-2: #171A22;
  --surface-3: #1E2230;
  --border:    #2A2D3A;
  --border-2:  #383C4E;

  --text-primary:   #F5F0E8;
  --text-secondary: #A0A4B2;
  --text-muted:     #5C6070;

  --success: #22C55E;
  --info:    #38BDF8;
  --danger:  #EF4444;
  --warn:    #F59E0B;

  --font-sans: 'Inter', -apple-system, sans-serif;
  --font-mono: 'Space Mono', monospace;

  --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px;
  --glow: 0 0 24px rgba(200,150,42,0.12);
  --maxw: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  background: var(--black);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

a { color: var(--gold-bright); text-decoration: none; }
a:hover { color: var(--gold-200); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: var(--r-sm);
}

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(7,8,12,0.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.wordmark { font-weight: 800; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--text-primary); }
.wordmark em { font-style: normal; color: var(--gold-400); }
.nav-meta { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.nav-links { display: flex; gap: 20px; font-size: 0.88rem; }
.nav-links a { color: var(--text-secondary); }
.nav-links a:hover, .nav-links a.active { color: var(--gold-bright); }

/* ---------- Typography blocks ---------- */
.eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-400);
  display: block; margin-bottom: 14px;
}
h1.display {
  font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.12; margin-bottom: 18px;
}
h2.section-title {
  font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 700;
  letter-spacing: -0.015em; line-height: 1.2; margin-bottom: 12px;
}
h3 { font-size: 1.12rem; font-weight: 600; }
.lede { color: var(--text-secondary); font-size: 1.08rem; max-width: 68ch; }
.body-copy { color: var(--text-secondary); max-width: 70ch; }
.body-copy strong { color: var(--text-primary); }

section { padding: 72px 0; }
section.tight { padding: 48px 0; }
.section-head { margin-bottom: 36px; }

/* ---------- Hero ---------- */
.hero { padding: 88px 0 64px; border-bottom: 1px solid var(--border); position: relative; overflow: hidden; }
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(600px 300px at 85% 10%, rgba(200,150,42,0.07), transparent 70%);
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.badge {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 6px 12px; border: 1px solid var(--border-2); border-radius: 999px; color: var(--text-secondary);
}
.badge.gold { border-color: var(--gold-600); color: var(--gold-bright); }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 26px;
}
.card:hover { border-color: var(--border-2); }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--text-secondary); font-size: 0.94rem; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ---------- Governance gate rail (signature motif) ---------- */
.gate-rail {
  display: flex; align-items: stretch; gap: 0;
  background: var(--surface); border: 1px solid var(--gold-800);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--glow);
}
.gate-node { flex: 1; padding: 18px 16px 16px; position: relative; min-width: 0; }
.gate-node + .gate-node { border-left: 1px dashed var(--border-2); }
.gate-node .gate-step {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-400); display: block; margin-bottom: 6px;
}
.gate-node h4 { font-size: 0.95rem; font-weight: 600; margin-bottom: 4px; }
.gate-node p { font-size: 0.82rem; color: var(--text-secondary); line-height: 1.55; }
.gate-rail-caption {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 10px;
}

/* ---------- Architecture diagram ---------- */
.arch {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 28px; overflow-x: auto;
}
.arch-lane { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; padding: 16px 0; }
.arch-lane + .arch-lane { border-top: 1px dashed var(--border); }
.arch-lane-label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); padding-top: 10px;
}
.arch-boxes { display: flex; flex-wrap: wrap; gap: 10px; }
.abox {
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
  padding: 10px 14px; font-size: 0.85rem; color: var(--text-primary); line-height: 1.4;
}
.abox small { display: block; color: var(--text-muted); font-size: 0.72rem; font-family: var(--font-mono); }
.abox.agent { border-color: var(--gold-600); background: linear-gradient(180deg, rgba(200,150,42,0.10), rgba(200,150,42,0.02)); }
.abox.gate  { border-color: var(--gold-400); color: var(--gold-bright); }
.abox.sor   { border-color: var(--info); }
.arch-flow { color: var(--text-muted); align-self: center; font-size: 1rem; }

/* ---------- Tables ---------- */
table.spec { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
table.spec th {
  text-align: left; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-400);
  padding: 10px 14px; border-bottom: 1px solid var(--gold-800);
}
table.spec td { padding: 12px 14px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
table.spec td:first-child { color: var(--text-primary); font-weight: 500; }
table.spec tr:last-child td { border-bottom: none; }

/* ---------- Metric chips ---------- */
.metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.metric {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 18px 20px;
}
.metric .m-val { font-size: 1.5rem; font-weight: 800; color: var(--gold-bright); letter-spacing: -0.01em; }
.metric .m-label { font-size: 0.82rem; color: var(--text-secondary); margin-top: 2px; }
.metric .m-def { font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-muted); margin-top: 8px; }

/* ---------- Failure modes ---------- */
.failure { border-left: 3px solid var(--danger); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 16px 20px; margin-bottom: 14px; }
.failure h4 { font-size: 0.95rem; margin-bottom: 4px; }
.failure p { font-size: 0.88rem; color: var(--text-secondary); }
.failure .mitigation { color: var(--gold-200); font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 12px 22px; border-radius: var(--r-md);
  font-weight: 600; font-size: 0.92rem; cursor: pointer; border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
}
.btn-gold { background: var(--gold-400); color: #14100a; }
.btn-gold:hover { background: var(--gold-500); color: #14100a; }
.btn-ghost { border-color: var(--border-2); color: var(--text-primary); background: transparent; }
.btn-ghost:hover { border-color: var(--gold-600); color: var(--gold-bright); }

/* ---------- Workflow index rows ---------- */
.wf-row {
  display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center;
  padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: 10px; color: var(--text-primary);
}
.wf-row:hover { border-color: var(--gold-600); }
.wf-num { font-family: var(--font-mono); font-size: 1rem; color: var(--gold-400); font-weight: 700; }
.wf-row h3 { font-size: 1rem; margin-bottom: 2px; }
.wf-row p { font-size: 0.84rem; color: var(--text-secondary); }
.wf-status {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
}
.wf-status.live { border: 1px solid var(--success); color: var(--success); }
.wf-status.blueprint { border: 1px solid var(--border-2); color: var(--text-muted); }
.tier-head { margin: 40px 0 16px; display: flex; align-items: baseline; gap: 14px; }
.tier-head .eyebrow { margin-bottom: 0; }
.tier-head span.note { font-size: 0.85rem; color: var(--text-muted); }

/* ---------- Demo panel ---------- */
.demo {
  background: var(--surface); border: 1px solid var(--gold-800); border-radius: var(--r-xl);
  padding: 28px; box-shadow: var(--glow);
}
.demo-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.demo-head h3 { font-size: 1.1rem; }
.toggle-group { display: inline-flex; border: 1px solid var(--border-2); border-radius: 999px; overflow: hidden; }
.toggle-group button {
  background: transparent; border: none; color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 8px 18px; cursor: pointer;
}
.toggle-group button.active { background: var(--gold-400); color: #14100a; font-weight: 700; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 6px; }
.field select, .field input[type="text"], .field textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-2);
  color: var(--text-primary); border-radius: var(--r-md); padding: 10px 12px;
  font-family: var(--font-sans); font-size: 0.9rem;
}
.field select:focus, .field input:focus, .field textarea:focus { outline: 2px solid var(--gold-400); outline-offset: 1px; }

.score-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px;
  border-radius: 999px; font-weight: 700; font-size: 0.95rem;
}
.score-pill.pass { background: rgba(34,197,94,0.12); color: var(--success); border: 1px solid var(--success); }
.score-pill.flag { background: rgba(245,158,11,0.12); color: var(--warn); border: 1px solid var(--warn); }
.score-pill.block { background: rgba(239,68,68,0.12); color: var(--danger); border: 1px solid var(--danger); }

.audit-log {
  background: #0a0b10; border: 1px solid var(--border); border-radius: var(--r-md);
  font-family: var(--font-mono); font-size: 0.76rem; line-height: 1.8;
  padding: 16px 18px; color: var(--text-secondary); max-height: 260px; overflow-y: auto;
}
.audit-log .t { color: var(--text-muted); }
.audit-log .ok { color: var(--success); }
.audit-log .warn { color: var(--warn); }
.audit-log .bad { color: var(--danger); }
.audit-log .gold { color: var(--gold-bright); }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--border); padding: 40px 0 56px; margin-top: 40px; }
footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
footer p { font-size: 0.85rem; color: var(--text-muted); }
footer a { color: var(--text-secondary); }

/* ---------- Page nav (workflow pages) ---------- */
.pagenav { display: flex; justify-content: space-between; gap: 16px; padding: 32px 0 0; }
.pagenav a { font-size: 0.9rem; }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .gate-rail { flex-direction: column; }
  .gate-node + .gate-node { border-left: none; border-top: 1px dashed var(--border-2); }
  .arch-lane { grid-template-columns: 1fr; gap: 8px; }
  .wf-row { grid-template-columns: 40px 1fr; }
  .wf-status { grid-column: 2; justify-self: start; }
  .nav-links { display: none; }
}

/* ---------- Animated flow visualization (workflow hero) ---------- */
.flowviz {
  margin-top: 34px; background: var(--surface); border: 1px solid var(--gold-800);
  border-radius: var(--r-xl); padding: 26px 24px 20px; box-shadow: var(--glow);
  position: relative; overflow: hidden;
}
.flowviz-title {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-400); margin-bottom: 18px;
}
.flow-track { display: flex; align-items: center; gap: 0; min-width: 640px; }
.flow-stage {
  flex: 1; text-align: center; padding: 14px 8px; position: relative;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--r-md);
}
.flow-stage.gatebox { border-color: var(--gold-400); background: linear-gradient(180deg, rgba(200,150,42,0.12), rgba(200,150,42,0.03)); }
.flow-stage.sorbox { border-color: var(--info); }
.flow-stage .fs-icon { font-size: 1.3rem; display: block; margin-bottom: 6px; }
.flow-stage .fs-name { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: block; line-height: 1.3; }
.flow-stage .fs-sub { font-family: var(--font-mono); font-size: 0.64rem; color: var(--text-muted); display: block; margin-top: 3px; }
.flow-link { width: 46px; height: 2px; background: var(--border-2); position: relative; flex: none; }
.flow-link::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 8px; height: 8px;
  border-radius: 50%; background: var(--gold-bright); transform: translate(-4px, -50%);
  box-shadow: 0 0 10px rgba(232,184,75,0.8);
  animation: pulse-travel 1.6s linear infinite;
  animation-delay: var(--d, 0s);
  opacity: 0;
}
@keyframes pulse-travel {
  0% { left: 0; opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
.flow-stage.gatebox .fs-verdicts { display: flex; gap: 5px; justify-content: center; margin-top: 6px; }
.fs-verdicts span {
  width: 8px; height: 8px; border-radius: 50%; display: inline-block;
  animation: verdict-blink 3.2s ease-in-out infinite;
}
.fs-verdicts .v-pass { background: var(--success); }
.fs-verdicts .v-flag { background: var(--warn); animation-delay: 1.05s; }
.fs-verdicts .v-block { background: var(--danger); animation-delay: 2.1s; }
@keyframes verdict-blink { 0%,100% { opacity: 0.25; } 12% { opacity: 1; } 30% { opacity: 0.25; } }
.flowviz-caption { font-size: 0.8rem; color: var(--text-secondary); margin-top: 14px; }
@media (prefers-reduced-motion: reduce) {
  .flow-link::after { animation: none; opacity: 1; left: 50%; }
  .fs-verdicts span { animation: none; opacity: 1; }
}
@media (max-width: 880px) { .flowviz { overflow-x: auto; } }

/* ---------- Operator control panel ---------- */
.control-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); overflow: hidden;
}
.cp-head {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 18px 24px; border-bottom: 1px solid var(--gold-800);
  background: linear-gradient(180deg, rgba(200,150,42,0.06), transparent);
}
.cp-head h3 { font-size: 1.05rem; }
.cp-owner {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gold-bright); border: 1px solid var(--gold-600); border-radius: 999px; padding: 5px 12px;
}
.cp-grid { display: grid; grid-template-columns: 1fr 1fr; }
.cp-cell { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.cp-cell:nth-child(odd) { border-right: 1px solid var(--border); }
.cp-cell:nth-last-child(-n+2) { border-bottom: none; }
.cp-cell h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--gold-400); margin-bottom: 10px; font-weight: 700;
}
.cp-cell ul { list-style: none; }
.cp-cell li { font-size: 0.86rem; color: var(--text-secondary); padding: 4px 0 4px 16px; position: relative; line-height: 1.55; }
.cp-cell li::before { content: '▸'; position: absolute; left: 0; color: var(--gold-600); }
.cp-cell li strong { color: var(--text-primary); font-weight: 600; }
.kill-switch { color: var(--danger) !important; font-weight: 600; }
@media (max-width: 880px) {
  .cp-grid { grid-template-columns: 1fr; }
  .cp-cell:nth-child(odd) { border-right: none; }
  .cp-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .cp-cell:last-child { border-bottom: none; }
}

/* ---------- Anchor offset under sticky nav ---------- */
section, .tier-head { scroll-margin-top: 76px; }
.bp-note {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); border: 1px dashed var(--border-2); border-radius: var(--r-md);
  padding: 10px 16px; display: inline-block; margin-top: 20px;
}

/* ---------- Embedded page sub-nav (index router) ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:14px;padding:12px 16px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);font-size:0.86rem}
.subnav a{color:var(--text-secondary)}
.subnav a:hover{color:var(--gold-bright)}

/* ---------- opsmarshal.com chrome (added by _site_build.py) ----------
   Deliberately NOT the site's style.css: that sheet also defines .nav and
   .footer, which the series already uses for different components. These are
   scoped names built from the same brand tokens. */
.om-bar{background:var(--black);border-bottom:1px solid var(--border);
  font-family:var(--font-sans);position:relative;z-index:60}
.om-bar-in{max-width:var(--maxw);margin:0 auto;padding:9px 24px;display:flex;
  align-items:center;gap:20px}
.om-bar a{color:var(--text-secondary);text-decoration:none;font-size:0.8rem}
.om-bar a:hover{color:var(--gold-bright)}
.om-brand{display:flex;align-items:center;gap:7px;color:var(--text-primary)!important;
  font-weight:700;letter-spacing:-0.01em}
.om-brand em{font-style:normal;color:var(--gold-400)}
.om-bar-links{display:flex;gap:18px;margin-left:auto;align-items:center}
.om-bar-cta{border:1px solid var(--gold-600);color:var(--gold-bright)!important;
  padding:5px 13px;border-radius:var(--r-sm)}
.om-bar-cta:hover{background:var(--gold-400);color:var(--black)!important}
@media(max-width:720px){.om-bar-links a:not(.om-bar-cta){display:none}}

.om-crumb{max-width:var(--maxw);margin:0 auto;padding:12px 24px 0;
  font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--text-muted)}
.om-crumb a{color:var(--text-muted);text-decoration:none}
.om-crumb a:hover{color:var(--gold-bright)}
.om-crumb span{margin:0 7px;opacity:0.5}

/* At a glance -- the block an answer engine is meant to quote. */
.om-glance{border:1px solid var(--border);border-left:2px solid var(--gold-400);
  border-radius:var(--r-md);background:var(--surface-2);padding:20px 22px;margin-top:26px}
.om-glance h2{font-size:0.72rem;font-family:var(--font-mono);letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gold-400);margin-bottom:10px;font-weight:700}
.om-glance p{color:var(--text-secondary);font-size:0.94rem;line-height:1.65;margin-bottom:14px}
.om-glance dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px 24px;margin:0}
/* Each dt/dd is wrapped in a div: gridding the dt and dd directly drops the
   label and its value into two different columns. */
.om-glance dl > div{min-width:0}
.om-glance dt{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.1em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:3px}
.om-glance dd{margin:0;font-size:0.86rem;color:var(--text-primary);line-height:1.5}

.om-next{border-top:1px solid var(--border);margin-top:12px;padding:26px 0 4px}
.om-next p{color:var(--text-secondary);font-size:0.92rem;line-height:1.7}
.om-next a{color:var(--gold-bright)}

.om-foot{background:var(--black);border-top:1px solid var(--border);
  padding:40px 24px 28px;font-family:var(--font-sans)}
.om-foot-in{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.om-foot p.om-tag{color:var(--text-muted);font-size:0.84rem;line-height:1.6;margin-top:10px;
  max-width:38ch}
.om-foot h3{font-family:var(--font-mono);font-size:0.66rem;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:11px;font-weight:700}
.om-foot ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}
.om-foot a{color:var(--text-secondary);text-decoration:none;font-size:0.85rem}
.om-foot a:hover{color:var(--gold-bright)}
.om-foot-bottom{max-width:var(--maxw);margin:26px auto 0;padding-top:16px;
  border-top:1px solid var(--border);display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--text-muted);font-size:0.78rem}
@media(max-width:720px){.om-foot-in{grid-template-columns:1fr}}

/* "GTM Agent Stack" wraps to two lines in the series nav on a phone, which
   takes the bar from 53px to 86px before any content shows. One line at a
   slightly smaller size fits 375px with room to spare. */
@media(max-width:560px){
  .nav .wordmark{font-size:0.9rem;white-space:nowrap}
}

/* Below-the-fold sections are not laid out until they are scrolled to, which
   takes ~1800px of DOM off first paint. The placeholder heights are measured
   medians across the 15 pages at desktop width (control 674-832, metrics
   338-376, failures 627-751), not a round number: a flat 900px each
   over-reserved by ~1400px, so the scrollbar visibly shrank on the way down.
   The `auto` keyword makes the browser remember the real height after the
   first render, so these only govern the first scroll. */
#control  {content-visibility:auto;contain-intrinsic-size:auto 780px}
#metrics  {content-visibility:auto;contain-intrinsic-size:auto 360px}
#failures {content-visibility:auto;contain-intrinsic-size:auto 690px}