/* ============================================================
   MGV v2 — INSTITUTIONAL NAVY
   Surface inversion: deep navy primary, bone paper inserts
   Same principles as v1, calibrated to federal-contractor register
   ============================================================ */

:root {
  /* deep institutional navy — NOT tech blue, NOT obsidian */
  --navy:            #0F1A2E;    /* primary surface — deep enough to read black-with-a-tint */
  --navy-2:          #16213A;
  --navy-3:          #1E2B47;
  --navy-elev:       #243254;
  --navy-rule:       rgba(220, 225, 232, 0.10);
  --navy-rule-2:     rgba(220, 225, 232, 0.20);

  /* bone — paper inserts, warm but disciplined */
  --bone:            #EFEAE0;
  --bone-2:          #E5DFD2;
  --bone-rule:       rgba(15, 26, 46, 0.12);
  --bone-rule-2:     rgba(15, 26, 46, 0.22);

  /* ink on navy = bone-warm white. ink on bone = navy. */
  --on-navy:         #E8E3D6;
  --on-navy-soft:    #C7C0AE;
  --on-navy-muted:   #8E8770;
  --on-navy-quiet:   #5E5B4F;

  --on-bone:         #0F1A2E;
  --on-bone-soft:    #2E3850;
  --on-bone-muted:   #5F6779;
  --on-bone-quiet:   #8B8E96;

  /* brass — service-ribbon brass on navy, editorial brass on bone */
  --brass:           #B89456;    /* warmer than v1 brass; reads as service brass on navy */
  --brass-deep:      #8A6D3A;
  --brass-soft:      #D4B27D;

  --claret:          #B85C68;
  --claret-bg-navy:  rgba(184, 92, 104, 0.10);

  /* type — unchanged */
  --font-serif:      "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --font-sans:       "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:       "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --container:       1280px;
  --gutter:          1.5rem;
  --r:               0;
}

/* base body sits on navy now */
body {
  background: var(--navy);
  color: var(--on-navy);
  /* faint blueprint grid — using on-navy color */
  background-image:
    linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), rgba(220,225,232,0.03) calc(100% - 1px)),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(184,148,86,0.05), transparent 60%);
  background-size: 25% 100%, 100% 100%;
  background-attachment: fixed;
}

::selection { background: var(--brass); color: var(--navy); }

/* doc bar — same grammar, navy register */
.doc-bar { background: #0A1224; border-bottom: 1px solid var(--navy-rule); }
.doc-bar-inner { color: var(--on-navy-muted); }
.doc-bar-inner .crumbs { color: var(--on-navy-soft); }
.doc-bar-meta strong { color: var(--on-navy); }

/* header */
.site-header {
  background: rgba(15, 26, 46, 0.90);
  border-bottom: 1px solid var(--navy-rule);
}
.brand .brand-mark { border-color: var(--on-navy); background: var(--navy); }
.brand-mark::before { background: var(--on-navy); }
.brand-mark::after { background: var(--brass); }
.brand-text .name { color: var(--on-navy); }
.brand-text small { color: var(--on-navy-muted); }
.nav-links a { color: var(--on-navy-soft); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--on-navy); }
.nav-links a[aria-current="page"] { color: var(--on-navy); border-bottom-color: var(--brass); }
.nav-cta { border-color: var(--on-navy) !important; color: var(--on-navy) !important; }
.nav-cta:hover { background: var(--on-navy) !important; color: var(--navy) !important; }

/* type */
h1, h2, h3, h4 { color: var(--on-navy); }
p { color: var(--on-navy-soft); }
.lead { color: var(--on-navy-soft); }
.eyebrow { color: var(--brass-soft); }
.eyebrow::before { color: var(--brass-soft); }

/* command center */
.command-center { border-bottom-color: var(--navy-rule); }
.command-copy::before { border-color: var(--on-navy); }
.command-copy h1 .accent { color: var(--brass-soft); }
.command-meta { border-color: var(--navy-rule-2); }
.command-meta > div { border-right-color: var(--navy-rule); }
.command-meta dt { color: var(--on-navy-muted); }
.command-meta dd { color: var(--on-navy); }

/* THE INVERSION — monitor panels become BONE PAPER inserts on navy */
.monitor,
.schematic,
.vendor-form,
.redact-card,
.precedent,
.portrait-frame {
  background: var(--bone);
  color: var(--on-bone);
  border: 1px solid var(--bone);
}
.monitor-head,
.schematic-head,
.monitor-foot {
  background: var(--bone-2);
  color: var(--on-bone-muted);
  border-color: var(--bone-rule);
}
.monitor-head .ident strong,
.schematic-head strong { color: var(--on-bone); }
.monitor-head .corner,
.schematic-head .sig { color: var(--brass-deep); }
.cp-row { border-bottom-color: var(--bone-rule); }
.cp-row .step { color: var(--brass-deep); }
.cp-row .gate { color: var(--on-bone-muted); }
.cp-row h4 { color: var(--on-bone); }
.cp-row p { color: var(--on-bone-soft); }

/* flow nodes inside schematic (paper) become navy inserts */
.flow-node {
  background: var(--navy);
  color: var(--on-navy);
  border-color: var(--navy-rule-2);
}
.flow-node .tag { color: var(--on-navy-muted); }
.flow-node .meta { color: var(--brass-soft); }
.flow-node .meta.claret { color: var(--claret); }
.flow-node:hover { border-color: var(--brass); background: var(--navy-2); }
.flow-arrow { background: var(--bone-rule-2); }
.flow-arrow::after { border-color: var(--bone-rule-2); }

/* section figref + rule */
.section-figref,
.section-eyebrow {
  border-bottom-color: var(--navy-rule);
  color: var(--on-navy-muted);
}
.section-rule { border-top-color: var(--navy-rule); }

/* problem / pillars (rest on navy) */
.problem-grid, .pillars {
  border-color: var(--navy-rule-2);
}
.problem-tile, .pillar { border-right-color: var(--navy-rule); }
.pillar:hover { background: var(--navy-2); }
.pillar-head { color: var(--on-navy-muted); }
.pillar-head .num { color: var(--brass-soft); }
.pillar h3 { color: var(--on-navy); }
.pillar p { color: var(--on-navy-soft); }
.pillar ul { border-color: var(--navy-rule); }
.pillar ul li { color: var(--on-navy); border-color: var(--navy-rule); }
.pillar ul li::before { color: var(--brass-soft); }
.problem-tile h3 { color: var(--on-navy); }
.problem-tile p { color: var(--on-navy-soft); }
.problem-tile .ftn { color: var(--brass-soft); }
.problem-tile .idx { color: var(--on-navy-muted); }

/* page hero, sidecar */
.page-hero { border-bottom-color: var(--navy-rule); }
.page-hero .sidecar { border-left-color: var(--on-navy); color: var(--on-navy-soft); }
.page-hero .sidecar dt { color: var(--on-navy-muted); }
.page-hero .sidecar dd { color: var(--on-navy); }

/* capability stack */
.capability-row,
.capability-row:last-of-type { border-color: var(--navy-rule); }
.capability-row ul { border-color: var(--on-navy); }
.capability-row ul li { color: var(--on-navy); border-color: var(--navy-rule); }
.capability-row ul li::before { color: var(--brass); }
.capability-row .number-block { color: var(--brass-soft); }
.capability-row .number-block small { color: var(--on-navy-muted); }
.capability-row .col-aside { border-left-color: var(--navy-rule); }
.capability-row .col-aside .h { color: var(--on-navy-muted); }
.capability-row > .col-copy > p { color: var(--on-navy-soft); }

/* telemetry — paper insert */
.telemetry {
  background: var(--bone);
  border-color: var(--bone);
}
.telemetry > div { border-right-color: var(--bone-rule); }
.telemetry .label { color: var(--on-bone-muted); }
.telemetry .value { color: var(--on-bone); }
.telemetry .value .unit { color: var(--on-bone-muted); }
.telemetry .note { color: var(--on-bone-muted); }
.telemetry .note.brass { color: var(--brass-deep); }

/* redaction card — paper, navy redaction blocks */
.redact-card .label { color: var(--on-bone-muted); }
.redact-card .label .figref { color: var(--brass-deep); }
.redact-row { border-color: var(--bone-rule); }
.redact-row .field { color: var(--on-bone-muted); }
.redact-row .blocks span { background: var(--navy); }
.redact-row .blocks.partial span:nth-child(n+5) { background: var(--bone-2); }
.redact-row .status { color: var(--on-bone-muted); }
.redact-row .status.verified { color: var(--brass-deep); }
.redact-row .status.held { color: var(--claret); }

.hash-strip {
  background: var(--navy);
  color: var(--on-navy-muted);
  border-color: var(--bone-rule-2);
}
.hash-strip .lbl { color: var(--brass-soft); }
.hash-strip .v { color: var(--on-navy); }

/* facts */
.facts { border-top-color: var(--on-navy); }
.facts > div { border-bottom-color: var(--navy-rule); }
.facts dt { color: var(--on-navy-muted); }
.facts dd { color: var(--on-navy); }
.facts .ref-col { color: var(--brass-soft); }

/* audience cards */
.audience-grid { border-color: var(--navy-rule-2); }
.audience-card { border-right-color: var(--navy-rule); }
.audience-card:hover { background: var(--navy-2); }
.audience-card .role { color: var(--brass-soft); }
.audience-card h3 { color: var(--on-navy); }
.audience-card p { color: var(--on-navy-soft); }
.audience-card .reg { color: var(--on-navy-muted); }

/* CTA strip */
.cta-strip { background: var(--navy-2); border-color: var(--navy-rule-2); }
.cta-strip h2 { color: var(--on-navy); }

/* buttons */
.button { border-color: var(--on-navy); color: var(--on-navy); }
.button:hover { background: var(--on-navy); color: var(--navy); }
.button.primary { background: var(--brass); border-color: var(--brass); color: var(--navy); }
.button.primary:hover { background: var(--brass-soft); }
.button.ghost { border-color: var(--navy-rule-2); color: var(--on-navy-soft); }
.button.ghost:hover { border-color: var(--on-navy); color: var(--on-navy); background: transparent; }

/* form (bone insert) */
.vendor-form { color: var(--on-bone); }
.form-head { color: var(--on-bone-muted); }
.form-head strong { color: var(--on-bone); }
.form-head .id { color: var(--brass-deep); }
.vendor-form label { color: var(--on-bone-muted); }
.vendor-form label .req { color: var(--brass-deep); }
.vendor-form input,
.vendor-form select,
.vendor-form textarea {
  color: var(--on-bone);
  background: var(--bone);
  border-color: var(--on-bone);
}
.vendor-form input:focus,
.vendor-form select:focus,
.vendor-form textarea:focus { border-color: var(--brass-deep); }
.form-help { color: var(--on-bone-soft); border-left-color: var(--brass-deep); background: rgba(138,109,58,0.10); }

/* footer */
.site-footer { background: #0A1224; border-top-color: var(--navy-rule-2); }
.footer-grid h2 { color: var(--on-navy); }
.footer-grid a { color: var(--on-navy-soft); }
.footer-grid a:hover { color: var(--on-navy); }
.footer-grid p { color: var(--on-navy-soft); }
.footer-bar { border-top-color: var(--navy-rule); color: var(--on-navy-muted); }
.footer-bar a { color: var(--on-navy-muted); }
.footer-bar a:hover { color: var(--on-navy); }

/* founder page bits — bridge, precedent, creds, pullquote */
.bridge { border-color: var(--navy-rule-2); }
.bridge-row { border-bottom-color: var(--navy-rule); }
.bridge-row .num { color: var(--brass-soft); }
.bridge-row .num small { color: var(--on-navy-muted); }
.bridge-row .col-then,
.bridge-row .col-now { color: var(--on-navy-soft); }
.bridge-row .col-then .h,
.bridge-row .col-now .h { color: var(--on-navy-muted); }
.bridge-row .col-now { border-left-color: var(--navy-rule); }
.bridge-row .col-now strong { color: var(--on-navy); }
.bridge-row .ref { color: var(--brass-soft); }

.precedent { color: var(--on-bone); }
.precedent h3 { color: var(--on-bone); }
.precedent p { color: var(--on-bone-soft); }
.precedent .metric { border-left-color: var(--brass-deep); }
.precedent .metric .v { color: var(--on-bone); }
.precedent .metric .v .unit { color: var(--on-bone-muted); }
.precedent .metric .l { color: var(--on-bone-muted); }

.creds { border-color: var(--navy-rule-2); }
.creds > div { border-right-color: var(--navy-rule); }
.creds .yr { color: var(--brass-soft); }
.creds h4 { color: var(--on-navy); }
.creds .inst { color: var(--on-navy-soft); }

.pullquote { background: var(--navy-2); border-color: var(--navy-rule-2); }
.pullquote blockquote { color: var(--on-navy); border-left-color: var(--brass); }
.pullquote .attrib { color: var(--on-navy-muted); }
.pullquote .attrib strong { color: var(--on-navy); }

.portrait-caption { color: var(--on-navy-muted); }
.portrait-caption .brass { color: var(--brass-soft); }

.bio-blocks p { color: var(--on-navy-soft); }

/* corner brackets on bone inserts use brass */
.console::before, .console::after,
.monitor::before, .monitor::after,
.schematic::before, .schematic::after,
.vendor-form::before, .vendor-form::after,
.precedent::before, .precedent::after,
.portrait-frame::before, .portrait-frame::after {
  border-color: var(--brass-deep);
}