/* ═══════════════════════════════════════════════════════════════════
   VELLUM INTELLIGENCE · THEME LAYER
   Loads after base.css. The design language: an intelligence house —
   archival serif voice, filing-system mono metadata, deep-navy
   operations surfaces. One signature motion moment per page;
   everything else is stillness.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  /* Contrast-safe muted ink: the old #8898aa failed WCAG on light surfaces
     for every mono micro-label. 4.7:1 on white, still clearly subordinate. */
  --text-light: #5b6b80;
  --accent:       #2c86ff;
  --accent-soft:  #6fb3ff;
  --accent-deep:  #1f5fcc;
  --paper:        #fbfaf7;   /* faint vellum tint — document surfaces only   */
  --ease-out:     cubic-bezier(.22, 1, .36, 1);
  --ease-inout:   cubic-bezier(.65, 0, .35, 1);
}

/* ── Type refinements ──────────────────────────────────────────────── */
h1 { font-size: clamp(2.3rem, 4.6vw, 3.6rem); line-height: 1.14; letter-spacing: -0.022em; font-weight: 500; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
h2 { font-size: clamp(1.6rem, 3.1vw, 2.35rem); line-height: 1.22; font-weight: 500; }
::selection { background: rgba(44, 134, 255, 0.18); }

/* Filing-system eyebrows: mono, tracked, with a terminal tick. */
.section-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.section-label::before {
  content: '§ ';
  color: var(--accent);
  letter-spacing: 0;
}
.section--dark .section-label::before { color: var(--accent-soft); }

/* The dossier hairline under each eyebrow — drawn in by motion. */
.section-rule { transform-origin: left center; }

/* Mono is the filing-system voice: micro-labels, statuses, dates ONLY.
   Captions and running text stay in the sans/serif register. */
.brief-extract-meta, .brief-extract-label,
.brief-extract-fields label, .brief-extract-field-block > label,
.sig-date, .sig-type, .sig-tag,
.hpf-label,
.monitor-group-label,
.mpv-label,
.wf2-head-label, .wf2-row-tag, .wf2-brief-tag,
.pp-meta, .drawer-eyebrow, .filter-label,
.map-status, .src-chip,
.pricing-band-label,
.distinct-index,
.step-num,
.intel-head,
.tag, .mcp-tag, .badge-high, .change-date {
  font-family: var(--mono) !important;
  letter-spacing: 0.12em;
}

/* Contrast lifts on dark surfaces (audit: 2.7–4.5:1 → ≥4.6:1). */
.hero-label { color: rgba(255, 255, 255, 0.72) !important; }
.section--dark .section-label, .cta-band .section-label { color: rgba(255, 255, 255, 0.72); }
.dd-desc { color: rgba(255, 255, 255, 0.68) !important; }
.monitor-group-label { color: var(--text-light) !important; }

/* Hero panel captions: quiet sans, sentence case — numbers carry the weight. */
.distill-cap, .distill-out-cap {
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: rgba(255, 255, 255, 0.55) !important;
}
.distill-num { font-family: var(--sans) !important; font-weight: 600; letter-spacing: 0; color: #fff; }
.distill-pages { font-family: var(--font) !important; }
.intel-head { font-size: 0.6rem; color: rgba(255, 255, 255, 0.38); }
.sig-title { font-family: var(--sans); font-size: 0.84rem; letter-spacing: 0; }

/* ── Nav: transparent over the hero, one continuous surface ────────── */
#nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out),
              border-color 0.28s var(--ease-out);
}
#nav.scrolled {
  background: rgba(10, 22, 40, 0.94);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: rgba(111, 179, 255, 0.08);
  box-shadow: 0 12px 32px -18px rgba(4, 10, 20, 0.6);
}
/* Pages without a dark hero keep a solid nav from the first pixel. */
body[data-nav="solid"] #nav { background: var(--navy); border-bottom-color: rgba(255, 255, 255, 0.08); }
.nav-links a { transition: color 0.2s var(--ease-out), background 0.2s var(--ease-out); }

/* ── Buttons: engineered, not decorated ────────────────────────────── */
.btn {
  position: relative;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out),
              background 0.25s var(--ease-out), color 0.25s var(--ease-out),
              border-color 0.25s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn-primary:hover { box-shadow: 0 10px 26px -10px rgba(44, 134, 255, 0.55); }
}
.btn:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s; }
.btn:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Inline links: shared arrow behaviour ──────────────────────────── */
.inline-link { transition: color 0.2s var(--ease-out); }
.inline-link:hover { letter-spacing: 0.005em; }
.mpv-cta:hover { color: var(--accent-deep); }
.monitor-row:hover .mpv-cta:hover { color: var(--accent-deep); }

/* ── Document surfaces: the vellum tint is reserved for artifacts ──── */
.brief-extract { background: var(--paper); }

/* ── Motion primitives ─────────────────────────────────────────────── */
/* The GSAP arrival timeline owns these elements now — the legacy CSS
   entrance keyframes (premiumTextIn / panelArrive) must not run, or GSAP
   captures their fill-state as the tween target. The panel sheen stays. */
.hero-copy .hero-label, .hero-copy h1, .hero-copy .hero-sub,
.hero-copy .btn-group, .intel-panel, .hero-proof-strip .hpf {
  animation: none !important;
}


/* Reveal base states apply only when JS motion is live, so content is
   never hidden for non-JS visitors or crawlers. */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.js-motion [data-reveal].revealed { opacity: 1; transform: none; }

/* Evidence lock: hairline scans across, then the block settles. */
.vellum-lock { position: relative; }
.vellum-lock::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-soft), transparent);
  opacity: 0;
  pointer-events: none;
}
.js-motion .vellum-lock.revealed::after {
  animation: vellumScan 1.1s var(--ease-inout) both;
}
@keyframes vellumScan {
  0%   { right: 100%; left: 0; opacity: 0; }
  15%  { opacity: 1; }
  70%  { right: 0; left: 0; opacity: 0.9; }
  100% { right: 0; left: 100%; opacity: 0; }
}

/* ── Cross-page transitions (same-origin MPA) ──────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut 0.18s var(--ease-out) both; }
::view-transition-new(root) { animation: vtIn 0.26s var(--ease-out) both; }
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── Hero registry field (data-true constellation) ─────────────────── */
.hero-signal-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-premium .container { position: relative; z-index: 1; }

.ri-tip {
  position: absolute; z-index: 3; pointer-events: none;
  max-width: 270px;
  font-family: var(--sans); font-size: 0.72rem; line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(7, 15, 28, 0.92);
  border: 1px solid rgba(111, 179, 255, 0.25);
  border-radius: 6px;
  padding: 0.4rem 0.6rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
.ri-tip.on { opacity: 1; transform: none; }

/* The instrument: a command line into the registry. */
.registry-instrument { position: relative; z-index: 2; max-width: 460px; justify-self: end; width: 100%; }
.ri-head {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.60);
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(111, 179, 255, 0.18);
  margin-bottom: 1.1rem;
}
.ri-search { position: relative; }
#ri-input {
  width: 100%;
  font-family: var(--sans); font-size: 0.95rem;
  color: #fff;
  background: rgba(7, 15, 28, 0.55);
  border: 1px solid rgba(111, 179, 255, 0.28);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  outline: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
#ri-input::placeholder { color: rgba(255, 255, 255, 0.42); font-style: normal; }
#ri-input:focus {
  border-color: var(--accent-soft);
  background: rgba(7, 15, 28, 0.75);
  box-shadow: 0 0 0 3px rgba(111, 179, 255, 0.14), 0 18px 50px -20px rgba(4, 10, 20, 0.7);
}
.ri-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 5;
  background: rgba(7, 15, 28, 0.96);
  border: 1px solid rgba(111, 179, 255, 0.22);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity 0.18s var(--ease-out), transform 0.18s var(--ease-out);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.ri-results.open { opacity: 1; transform: none; pointer-events: auto; }
.ri-r {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 0.7rem 1rem; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.15s;
}
.ri-r:hover, .ri-r.focused { background: rgba(111, 179, 255, 0.10); }
.ri-r-name { font-family: var(--sans); font-size: 0.84rem; color: rgba(255, 255, 255, 0.9); }
.ri-r-meta { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); flex-shrink: 0; }
.ri-r-more { display: block; padding: 0.55rem 1rem; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.45); }
.ri-r-more a { color: var(--accent-soft); text-decoration: none; }
.ri-hints { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.ri-hint {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 0.32rem 0.75rem; cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.ri-hint:hover { color: #fff; border-color: var(--accent-soft); background: rgba(111, 179, 255, 0.08); }
.ri-foot {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin-top: 1.6rem; padding-top: 1rem;
  border-top: 1px solid rgba(111, 179, 255, 0.14);
  font-family: var(--sans); font-size: 0.78rem; color: rgba(255, 255, 255, 0.5);
}
.ri-foot strong { font-family: var(--sans); font-weight: 600; color: #fff; }
.ri-sep { color: rgba(255, 255, 255, 0.25); }
.ri-foot a { color: var(--accent-soft); text-decoration: none; font-weight: 500; }
.ri-foot a:hover { color: #fff; }
@media (max-width: 980px) { .registry-instrument { justify-self: start; max-width: 620px; } }

/* ── Dark sections: faint operations grid ──────────────────────────── */
.section--dark {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 72px 72px;
}

/* ── Mobile menu (MPA links) ───────────────────────────────────────── */
.mobile-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(320px, 84vw);
  visibility: hidden;
  background: linear-gradient(180deg, #0d2147, #0a1628);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 5.5rem 2rem 2rem;
  transform: translateX(102%);
  transition: transform 0.4s var(--ease-out);
  box-shadow: -24px 0 60px rgba(4, 10, 20, 0.5);
}
.mobile-menu.open { transform: translateX(0); visibility: visible; }
@media (min-width: 861px) { .mobile-menu { display: none; } }
.mobile-menu a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 1rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: color 0.2s, padding-left 0.25s var(--ease-out);
}
.mobile-menu a:hover { color: #fff; padding-left: 6px; }
.mobile-menu a.mm-cta { color: var(--accent-soft); border-bottom: none; margin-top: 0.6rem; }

/* ── Pricing console: the product page's capture moment ────────────── */
/* Full-bleed navy band — the dark surface spans the viewport instead of
   floating as a slab inside a light section. */
.section--pricing {
  position: relative;
  padding: 6.5rem 0;
  background:
    radial-gradient(circle at 82% 12%, rgba(111, 179, 255, 0.10), transparent 42%),
    linear-gradient(180deg, #0d2147 0%, #0a1628 70%);
  color: #fff;
  overflow: hidden;
}
.section--pricing::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at 75% 25%, black 0%, transparent 75%);
}
.pricing-console { position: relative; }
.pricing-console .pc-grid { display: none; }
.pc-inner { position: relative; }
.pc-head { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.pc-label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-soft);
}
.pc-label::before { content: '§ '; }
.pc-toggle {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid rgba(111, 179, 255, 0.22); border-radius: 999px;
  background: rgba(7, 15, 28, 0.6);
}
.pc-opt {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55); background: transparent; border: 0; cursor: pointer;
  padding: 0.45rem 1rem; border-radius: 999px;
  transition: color 0.25s var(--ease-out), background 0.25s var(--ease-out);
}
.pc-opt:hover { color: #fff; }
.pc-opt.is-on { background: var(--accent-soft); color: #0a1628; }
.pc-opt.is-on .pc-opt-tag { color: rgba(10, 22, 40, 0.65); }
.pc-opt-tag { font-family: var(--mono); font-size: 0.62rem; color: var(--accent-soft); margin-left: 0.25rem; }
.pc-price-row { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.pc-from { font-family: var(--font); font-style: italic; font-size: 1.15rem; color: rgba(255, 255, 255, 0.55); }
.pc-price {
  font-family: var(--font); font-weight: 500; font-size: clamp(3.2rem, 6vw, 4.6rem);
  line-height: 1; letter-spacing: -0.02em; color: #fff;
  font-variant-numeric: lining-nums; min-width: 5.2ch;
}
.pc-per { font-family: var(--sans); font-size: 0.8rem; line-height: 1.5; color: rgba(255, 255, 255, 0.5); }
.pc-note {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42); margin-top: 1.1rem;
}
.pc-rule {
  height: 1px; margin: 2rem 0;
  background: linear-gradient(90deg, rgba(111, 179, 255, 0.45), rgba(111, 179, 255, 0.06) 60%, transparent);
}
.pc-terms { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2.5rem; }
.pc-terms li {
  font-family: var(--sans); font-size: 0.86rem; line-height: 1.55; color: rgba(255, 255, 255, 0.62);
  padding-left: 1rem; position: relative;
}
.pc-terms li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-soft); opacity: 0.8; }
.pc-terms li strong { color: rgba(255, 255, 255, 0.92); font-weight: 600; }
.pc-cta {
  display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 2.2rem;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent-soft); text-decoration: none;
  border-bottom: 1px solid rgba(111, 179, 255, 0.35); padding-bottom: 0.35rem;
  transition: color 0.25s var(--ease-out), border-color 0.25s var(--ease-out);
}
.pc-cta:hover { color: #fff; border-color: #fff; }
.pc-cta-arrow { transition: transform 0.25s var(--ease-out); }
.pc-cta:hover .pc-cta-arrow { transform: translateX(4px); }
@media (max-width: 720px) {
  .pc-inner { padding: 2.2rem 1.6rem; }
  .pc-terms { grid-template-columns: 1fr; }
}

/* ── Spacing rhythm: one consistent vertical beat everywhere ───────── */
.section { padding: clamp(5rem, 8vw, 7rem) 0; }
.cta-band { padding: clamp(5rem, 8vw, 6.5rem) 0; }
.section .section-rule { margin-bottom: 2.4rem; }
.section-label { margin-bottom: 0.9rem; }

/* ── Status legend under the coverage map ──────────────────────────── */
.status-legend {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 3rem;
  margin-top: 2.4rem; padding-top: 1.8rem; border-top: 1px solid var(--rule);
}
.status-legend dt {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy);
  margin-bottom: 0.35rem;
}
.status-legend dd { font-family: var(--font); font-size: 0.96rem; line-height: 1.6; color: var(--text-mid); }
@media (max-width: 640px) { .status-legend { grid-template-columns: 1fr; } }

/* ── Brief extract: a specimen worth leaning into ──────────────────── */
.brief-extract {
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .brief-extract:hover {
    transform: translateY(-5px) scale(1.012);
    box-shadow: 0 32px 70px -24px rgba(10, 22, 40, 0.28), 0 2px 0 rgba(10, 22, 40, 0.04);
  }
}
/* Confidence reads as an instrument, not a highlighter: mono + meter dots. */
.badge-high {
  background: transparent !important;
  color: var(--accent-deep) !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: var(--mono) !important;
  font-size: 0.7rem !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
.badge-high::before {
  content: '';
  width: 30px; height: 6px; flex-shrink: 0;
  background:
    radial-gradient(circle 3px at 3px 3px,  var(--accent-deep) 98%, transparent),
    radial-gradient(circle 3px at 15px 3px, var(--accent-deep) 98%, transparent),
    radial-gradient(circle 3px at 27px 3px, var(--accent-deep) 98%, transparent);
}

/* ── Home map embed: coverage reads a touch stronger ───────────────── */
.home-map-embed .map-jurisdiction.covered { fill: rgba(111, 179, 255, 0.16); stroke: rgba(111, 179, 255, 0.32); }
.home-map-embed .jpin-ring { opacity: 0.55; }
.home-map-embed .jpin-badge { filter: drop-shadow(0 0 6px rgba(111, 179, 255, 0.35)); }
@keyframes pinBreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.8; } }
.home-map-embed .jpin-ring { animation: pinBreathe 4.5s ease-in-out infinite; }
.home-map-embed .jpin-group:nth-child(2n) .jpin-ring { animation-delay: 1.6s; }
.home-map-embed .jpin-group:nth-child(3n) .jpin-ring { animation-delay: 2.8s; }
@media (prefers-reduced-motion: reduce) { .home-map-embed .jpin-ring { animation: none; } }

/* ── Coverage drawer: dossier refinement ───────────────────────────── */
.coverage-drawer { width: 460px; }
.drawer-header { border-bottom: 1px solid var(--rule); }
.dg-instrument { border-radius: 0; border: 0; border-bottom: 1px solid var(--rule); padding: 0.85rem 0.5rem; }
.dg-instrument:hover { background: var(--paper); border-color: var(--rule); box-shadow: inset 2px 0 0 var(--accent); }
.dg-instrument-name { line-height: 1.45; }
.dg-instrument-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; }
.dg-thread-head { border-bottom: 1px solid var(--navy); padding-bottom: 0.45rem; }
.dg-thread-name { font-family: var(--mono); letter-spacing: 0.14em; }
.dg-card-name { font-family: var(--font); font-size: 1.25rem; line-height: 1.3; font-weight: 500; }
.dg-card-fields dt { font-family: var(--mono); letter-spacing: 0.1em; }

/* ── Topic pages: hero meta as a spec row ──────────────────────────── */
.monitor-hero-meta {
  display: flex; flex-wrap: wrap; gap: 2.4rem;
  margin-top: 2.6rem; padding-top: 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.monitor-hero-meta > div { display: flex; flex-direction: column; gap: 0.35rem; }
.monitor-hero-meta dt {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.monitor-hero-meta dd { font-family: var(--sans); font-size: 0.9rem; color: rgba(255, 255, 255, 0.85); }
.hero .btn-group { margin-top: 2.2rem; }

/* ── Topic + ecosystem pages: list typography ──────────────────────── */
.monitor-detail-grid { gap: 3rem; }
.monitor-detail-grid h3 {
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.2em; color: var(--navy);
  border-bottom: 1px solid var(--navy); padding-bottom: 0.5rem; margin-bottom: 0.4rem;
}
.monitor-detail-grid ul li {
  display: block; line-height: 1.6; padding: 0.7rem 0;
}
.monitor-detail-grid ul li::before { content: none; }
.monitor-detail-grid ul li > span { /* citations sit on their own quiet line */
  display: block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.05em; color: var(--text-light); margin-top: 0.25rem;
}
.monitor-detail-grid ul li a { color: var(--navy); font-weight: 500; text-decoration: none; }
.monitor-detail-grid ul li a:hover { color: var(--accent-deep); }

/* Ecosystem rows rendered inline on topic pages from the registry */
.eco-inline { display: block; }
.eco-inline .eco-inline-name { font-family: var(--font); font-size: 1.06rem; font-weight: 500; }
.eco-inline .eco-inline-meta {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light);
  margin: 0.3rem 0 0.35rem;
}
.eco-inline .eco-inline-desc {
  font-family: var(--font); font-size: 0.95rem; line-height: 1.6; color: var(--text-mid);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 0;
}
.eco-inline .eco-inline-more {
  display: inline-block; margin-top: 0.55rem;
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-deep); text-decoration: none;
}
.eco-inline .eco-inline-more:hover { color: var(--navy); }

/* Ecosystem detail: fields read as a document, not a widget */
#eco-detail-fields { margin-top: 1.6rem; }
#eco-detail-fields dt {
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-light); margin-top: 1rem;
}
#eco-detail-fields dd { font-family: var(--font); font-size: 1.02rem; line-height: 1.65; color: var(--text-dark); margin-top: 0.2rem; }
#eco-detail-components li > span { font-size: 0.7rem; }

/* ── MCP availability list ─────────────────────────────────────────── */
.avail-list { list-style: none; margin-top: 1.2rem; }
.avail-list li { border-bottom: 1px solid var(--rule); }
.avail-list li:first-child { border-top: 1px solid var(--navy); }
.avail-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.95rem 0.25rem; text-decoration: none;
  transition: background 0.2s var(--ease-out), padding-left 0.25s var(--ease-out);
}
.avail-list a:hover { background: var(--paper); padding-left: 0.7rem; }
.avail-list .avail-name { font-family: var(--font); font-size: 1.05rem; font-weight: 500; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.avail-list .avail-arrow { color: var(--accent-deep); flex-shrink: 0; transition: transform 0.25s var(--ease-out); }
.avail-list a:hover .avail-arrow { transform: translateX(4px); }

/* ── Brief reader: the sample brief, read full-screen ──────────────── */
.br-scrollcue {
  display: block; margin-top: 1.3rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--accent-soft);
}
.br-reader { background: var(--paper); border-bottom: 1px solid var(--rule); }
.br-spread { padding: clamp(3.5rem, 6vw, 5.5rem) 0; }
.br-spread + .br-spread { border-top: 1px solid var(--rule); }
.br-page { max-width: 760px; }

.br-titlepage { background: #fff; }
.br-rule-top { height: 3px; background: linear-gradient(90deg, var(--navy), var(--accent-soft)); margin-bottom: 2.2rem; }
.br-masthead {
  display: flex; justify-content: space-between; gap: 1rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-light); margin-bottom: 2.6rem;
}
.br-kicker { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 0.9rem; }
.br-title { font-size: clamp(2.2rem, 4.4vw, 3.4rem); line-height: 1.12; color: var(--navy); margin-bottom: 0.6rem; }
.br-window { font-family: var(--font); font-style: italic; font-size: 1.25rem; color: var(--text-mid); margin-bottom: 2.6rem; }
.br-issue-meta { display: flex; gap: 3rem; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 1.4rem; }
.br-issue-meta dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.3rem; }
.br-issue-meta dd { font-family: var(--sans); font-size: 0.88rem; color: var(--text-dark); }

.br-label {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--navy);
  border-bottom: 1px solid var(--navy); display: inline-block;
  padding-bottom: 0.4rem; margin-bottom: 1.6rem;
}
.br-label--accent { color: var(--accent-deep); border-color: var(--accent-deep); }
.br-bottomline { font-family: var(--font); font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.65; color: var(--text-dark); }

.br-dev-title { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--navy); margin-bottom: 1.6rem; display: flex; gap: 1rem; align-items: baseline; }
.br-dev-num {
  flex-shrink: 0; font-family: var(--mono); font-size: 0.9rem; color: var(--accent-deep);
  border: 1px solid var(--rule); border-radius: 50%; width: 2.1rem; height: 2.1rem;
  display: inline-flex; align-items: center; justify-content: center;
}
.br-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.1rem 2rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 1.3rem 1.5rem; margin-bottom: 1.8rem;
}
.br-fields dt { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-light); margin-bottom: 0.35rem; }
.br-fields dd { font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--text-dark); }
.br-body { font-family: var(--font); font-size: 1.05rem; line-height: 1.75; color: var(--text-dark); }
.br-landing { margin-top: 1.8rem; border-left: 2px solid var(--accent-soft); padding-left: 1.4rem; }
.br-landing p:last-child { font-family: var(--font); font-style: italic; font-size: 1.02rem; line-height: 1.7; color: var(--text-mid); }

.br-horizon { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.br-h-window {
  display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-deep);
  border-top: 2px solid var(--navy); padding-top: 0.8rem; margin-bottom: 0.7rem;
}
.br-h-col p { font-family: var(--font); font-size: 0.95rem; line-height: 1.65; color: var(--text-mid); }
.br-h-col strong { color: var(--navy); font-weight: 600; }
@media (max-width: 720px) { .br-horizon { grid-template-columns: 1fr; } }

/* Outline buttons on the light reader surface need ink, not white. */
.br-reader .btn-outline { color: var(--navy); border-color: var(--navy); }
.br-reader .btn-outline:hover { background: var(--navy); color: #fff; }

/* The analytical stack: legal position / assessment blocks + evidence rows. */
.br-block { margin-top: 1.8rem; }
.br-block-label {
  font-family: var(--mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-light);
  margin-bottom: 0.55rem;
}
.br-block-body { font-family: var(--font); font-size: 1rem; line-height: 1.7; color: var(--text-mid); }
.br-evidence {
  display: flex; align-items: baseline; gap: 0.8rem;
  margin-top: 1.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-light);
}
.br-evidence span {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-deep); flex-shrink: 0;
}
.br-sources-note { font-family: var(--font); font-size: 1.02rem; line-height: 1.65; color: var(--text-mid); margin-bottom: 1.6rem; max-width: 58ch; }
.br-sources { list-style: none; border-top: 1px solid var(--navy); }
.br-sources li {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 0.8rem 0.2rem; border-bottom: 1px solid var(--rule);
}
.br-s-id { font-family: var(--mono); font-size: 0.68rem; color: var(--accent-deep); flex-shrink: 0; width: 3.2rem; }
.br-s-body { font-family: var(--sans); font-size: 0.86rem; line-height: 1.5; color: var(--text-dark); flex: 1; }
.br-s-rating {
  flex-shrink: 0; font-family: var(--mono); font-size: 0.66rem; color: var(--navy);
  border: 1px solid var(--rule); border-radius: 4px; padding: 0.15rem 0.5rem;
}

.br-close { margin-top: 3.2rem; border-top: 1px solid var(--rule); padding-top: 2.2rem; }
.br-close-note { font-family: var(--font); font-style: italic; font-size: 1.05rem; color: var(--text-mid); margin-bottom: 1.6rem; max-width: 56ch; }

/* Reader motion: spreads settle in; metadata fields lock with a stagger. */
.js-motion .br-spread .br-page > * { will-change: auto; }

.src-chip--count { color: var(--accent-deep) !important; border-color: rgba(31, 95, 204, 0.35) !important; }

/* ── 404 / small polish ────────────────────────────────────────────── */
.founder-photo img { filter: saturate(0.92); }
img { max-width: 100%; }

/* ── Reduced motion: stillness everywhere ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .js-motion [data-reveal] { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}