/* ==========================================================================
   Edney Learn — Design System
   Direction: "The Institute" base + "The Instrument" scoped to diagnostic surfaces
   Built from Website Design Specification v1.2 and Brand Blueprint v1.1
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Institute palette — site-wide */
  --paper:        #F5F0E4;
  --paper-alt:    #EDE8D9;
  --white:        #FFFFFF;
  --ink:          #14251F;
  --ink-soft:     #45564F;
  --ink-mute:     #74847C;
  --accent:       #0F5C46;
  --accent-deep:  #0A4133;
  --accent-tint:  #E4EDE8;
  --gold:         #8E7029;
  --gold-tint:    #F5EEDB;
  --rule:         #DED7C9;
  --rule-soft:    #EBE6DA;

  /* Reserved semantic colours — do not reuse decoratively */
  --stop:         #A2412A;   /* escalation gates only */
  --stop-tint:    #FBF0EC;
  --boundary:     #5A5142;   /* claim-boundary notes only */

  /* Instrument palette — benchmark and diagnostic surfaces only */
  --ground:       #0D1117;
  --panel:        #161C24;
  --panel-2:      #1E2630;
  --i-ink:        #E9EDF2;
  --i-soft:       #98A3B1;
  --i-mute:       #6C7784;
  --signal:       #3DDC97;
  --signal-deep:  #1B6B4B;
  --alert:        #F0A13C;
  --i-rule:       #232C37;

  /* Type */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans:  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:  ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "Courier New", monospace;

  /* Rhythm */
  --gut: 24px;
  --max: 1180px;
  --max-prose: calc(var(--max) * 0.8);   /* 80% of page width = 944px at --max:1180px */
  --sec-y: clamp(56px, 8vw, 104px);
  --radius: 3px;
  --radius-lg: 6px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-deep); }
a.btn { text-decoration: none; }
a.btn--primary, a.btn--primary:visited { color: #fff; }
a.btn--signal, a.btn--signal:visited { color: #06130D; }
a.btn--ghost, a.btn--ghost:visited { color: var(--accent); }
a.btn--light, a.btn--light:visited { color: var(--accent); }
a.btn--quiet, a.btn--quiet:visited { color: var(--ink-soft); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--accent); color: #fff; padding: 12px 20px;
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; letter-spacing: -.015em; line-height: 1.12; margin: 0 0 .5em; }

h1 { font-size: clamp(33px, 4.6vw, 54px); }
h2 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.16; }
h3 { font-size: clamp(20px, 2.1vw, 25px); line-height: 1.25; }
h4 { font-size: 18px; line-height: 1.35; }

/* Display measure. Sized so a heading only wraps when it genuinely runs out of
   room: the widest full-bleed container is ~1164px, which is ~43ch at h1 and
   ~59ch at h2. Caps sit just inside that, so ordinary headings hold one line on
   desktop and only genuinely long ones break. Values are in ch, so they scale
   with the clamped font-size: narrow viewports and grid columns are governed by
   the container, which is already narrower than the cap. */
h1 { max-width: 42ch; }
h2 { max-width: 60ch; }
h3 { max-width: 54ch; }
.center h1, .center h2, .center h3 { margin-left: auto; margin-right: auto; }

/* When a heading does wrap, even out the lines rather than leaving one or two
   orphaned words. Progressive enhancement: ignored where unsupported. */
h1, h2, h3 { text-wrap: balance; }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 650; }

.eyebrow {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 18px;
}
.eyebrow--accent { color: var(--accent); }
.eyebrow--mute { color: var(--ink-mute); }

.lede {
  font-size: clamp(17.5px, 1.7vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--max-prose);
}

.small { font-size: 14.5px; line-height: 1.6; }
.mute  { color: var(--ink-mute); }
.mono  { font-family: var(--mono); font-size: .88em; letter-spacing: .01em; }

.prose { max-width: var(--max-prose); }
.prose > * + h2 { margin-top: 1.8em; }
.prose > * + h3 { margin-top: 1.6em; }
.prose ul, .prose ol { padding-left: 1.25em; margin: 0 0 1.15em; }
.prose li { margin-bottom: .5em; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.wrap--narrow { max-width: 860px; }

.section { padding: var(--sec-y) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--paper-alt); }
.section--white { background: var(--white); }
.section--ruled { border-top: 1px solid var(--rule); }

.section--ink {
  background: var(--ink);
  color: #E6EDE9;
}
.section--ink h1, .section--ink h2, .section--ink h3, .section--ink h4 { color: #FDFCF8; }
.section--ink .lede, .section--ink p { color: #B8C6C0; }
.section--ink .eyebrow { color: #9FC3B3; }
.section--ink a { color: #7FD3B4; }

.grid { display: grid; gap: 30px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 66px);
  align-items: start;
}
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }

/* No block-level cap here: a 70ch measure sized on body text (~640px) also
   squeezed the display heading inside it, forcing early wraps on desktop.
   Every child sets its own measure instead — .eyebrow is short, .lede caps at
   62ch, and h2 carries the display measure defined in section 3. */
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }

.stack > * + * { margin-top: 14px; }

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(245, 240, 228, .94);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  display: flex; align-items: center; gap: 26px;
  min-height: 68px;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
}

.brand {
  font-family: var(--serif); font-size: 20px; font-weight: 600;
  letter-spacing: -.02em; color: var(--ink); text-decoration: none;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 8px;
}
.brand-logo { width: 34px; height: 34px; flex-shrink: 0; }
.brand em { font-style: normal; color: var(--accent); }
.brand:hover { color: var(--ink); }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a {
  display: block; padding: 8px 11px;
  font-size: 14.5px; color: var(--ink-soft); text-decoration: none;
  border-radius: var(--radius);
}
.nav a:hover { color: var(--accent); background: var(--accent-tint); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

/* dropdown */
.nav li.has-menu { position: relative; }
.nav .menu {
  position: absolute; top: 100%; left: 0; min-width: 268px;
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); padding: 8px;
  box-shadow: 0 12px 32px rgba(20, 37, 31, .11);
  display: none; flex-direction: column; gap: 1px;
}
.nav li.has-menu:hover .menu,
.nav li.has-menu:focus-within .menu { display: flex; }
.nav .menu a { padding: 9px 12px; font-size: 14px; display: flex; align-items: center; gap: 9px; }
.nav .menu .menu-note {
  padding: 9px 12px 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}

.header-cta { margin-left: 8px; }

.nav-toggle {
  display: none; margin-left: auto;
  background: none; border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 9px 13px; font-size: 14px; font-family: inherit; color: var(--ink);
  cursor: pointer;
}

@media (max-width: 1020px) {
  .nav-toggle { display: block; }
  .header-cta { display: none; }
  .nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--white); border-bottom: 1px solid var(--rule);
    padding: 12px var(--gut) 24px; max-height: 78vh; overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav > ul > li { border-bottom: 1px solid var(--rule-soft); }
  .nav a { padding: 12px 4px; font-size: 15.5px; }
  .nav .menu {
    position: static; display: flex; box-shadow: none; border: 0;
    border-radius: 0; padding: 0 0 10px 14px; min-width: 0;
  }
  .nav .menu a { font-size: 14px; padding: 8px 4px; }
}

/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  line-height: 1.2; padding: 13px 24px;
  border-radius: var(--radius); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); color: #fff; }
.btn--ghost { background: none; color: var(--accent); border-color: var(--accent); }
.btn--ghost:hover { background: var(--accent-tint); color: var(--accent-deep); }
.btn--quiet { background: none; color: var(--ink-soft); border-color: var(--rule); }
.btn--quiet:hover { border-color: var(--ink-soft); color: var(--ink); }
.btn--sm { font-size: 13.5px; padding: 9px 16px; }
.btn--light { background: var(--white); color: var(--accent); }
.btn--light:hover { background: var(--accent-tint); color: var(--accent-deep); }
.btn--signal { background: var(--signal); color: #06130D; }
.btn--signal:hover { background: #33C486; color: #06130D; }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 30px; }

.link-arrow {
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  text-decoration: none; display: inline-flex; align-items: center; gap: 7px;
}
.link-arrow::after { content: "→"; transition: transform .15s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   7. Status labels  (Spec §20 — Available / Pilot / In Development / Future)
   -------------------------------------------------------------------------- */
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px; border: 1px solid;
  white-space: nowrap; vertical-align: middle;
}
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.status--available { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.status--pilot     { color: var(--gold);   border-color: var(--gold);   background: var(--gold-tint); }
.status--dev       { color: var(--ink-mute); border-color: var(--rule); background: var(--white); }
.status--future    { color: var(--ink-mute); border-color: var(--rule-soft); background: none; }

.status--human {
  color: var(--boundary); border-color: #CFC5B0; background: var(--white);
  letter-spacing: .07em;
}
.status--human::before { display: none; }

/* Controlled Developmental Release — the diagnostic's governed status (Spec §14.2) */
.status--cdr {
  color: var(--gold); border-color: var(--gold); background: var(--gold-tint);
  letter-spacing: .07em;
}
.status--cdr::before { display: none; }

.status-key { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; }
.status-key div { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 26px 26px 28px;
  display: flex; flex-direction: column;
}
.card--flat { background: none; border-color: var(--rule-soft); }
.card--link { text-decoration: none; color: inherit; transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--accent); color: inherit; }

.card .card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--ink-soft); font-size: 15.5px; line-height: 1.58; }
.card .card-foot { margin-top: auto; padding-top: 18px; }

.card-num {
  font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
  color: var(--gold); margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   9. Callouts
   -------------------------------------------------------------------------- */
.callout {
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  padding: 20px 24px;
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 15.5px; line-height: 1.6;
  max-width: var(--max-prose);
}
.callout h4 { font-family: var(--sans); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }

/* Escalation gate — Spec §15. Stop-red is reserved for this and nothing else. */
.callout--escalate { border-left-color: var(--stop); background: var(--stop-tint); }
.callout--escalate h4 { color: var(--stop); }

/* Claim boundary — Spec §16. Every page that shows evidence must be able to state its limits. */
.callout--boundary {
  border-left-color: var(--boundary); background: var(--white);
  border: 1px solid var(--rule); border-left: 3px solid var(--boundary);
}
.callout--boundary h4 { color: var(--boundary); }
.callout--boundary p { color: var(--ink-soft); }

.callout--quiet { border-left-color: var(--rule); background: var(--paper-alt); }
.callout--quiet h4 { color: var(--ink-mute); }

.pullquote {
  font-family: var(--serif); font-size: clamp(21px, 2.4vw, 28px);
  line-height: 1.35; letter-spacing: -.01em; color: var(--ink);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 28px 0; margin: 0; max-width: 30ch;
}

/* --------------------------------------------------------------------------
   10. Tables
   -------------------------------------------------------------------------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.data {
  width: 100%; border-collapse: collapse; font-size: 15px;
  background: var(--white); min-width: 560px;
}
table.data caption {
  text-align: left; font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 12px;
}
table.data th, table.data td {
  text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.data thead th {
  font-family: var(--sans); font-size: 12px; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 1px solid var(--rule); background: var(--paper-alt);
}
table.data td { color: var(--ink-soft); }
table.data td:first-child { color: var(--ink); font-weight: 600; }
table.data tbody tr:last-child td { border-bottom: 1px solid var(--rule); }

/* --------------------------------------------------------------------------
   11. Offer ladder
   -------------------------------------------------------------------------- */
.ladder { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ladder li {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 20px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--rule-soft);
}
.ladder .rung {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .08em; color: var(--gold);
}
.ladder h4 { font-family: var(--serif); font-size: 19px; margin-bottom: 6px; }
.ladder p { font-size: 15px; color: var(--ink-soft); margin: 0; }
@media (max-width: 640px) {
  .ladder li { grid-template-columns: 44px minmax(0, 1fr); }
  .ladder li .status { grid-column: 2; justify-self: start; margin-top: 4px; }
}

/* --------------------------------------------------------------------------
   12. Stage rail — the ten-stage design method
   -------------------------------------------------------------------------- */
.stage-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 8px; }
.stage {
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 14px 14px 16px;
}
.stage b {
  display: block; font-family: var(--mono); font-size: 11px;
  letter-spacing: .08em; color: var(--accent); margin-bottom: 7px;
}
.stage span { display: block; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.stage--gate { border-color: var(--stop); background: var(--stop-tint); }
.stage--gate b { color: var(--stop); }
.stage--gate span { color: #6E4436; }

/* Design → operate → evidence → optimise */
.cycle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
.cycle div { padding: 22px 24px; border-right: 1px solid var(--rule-soft); }
.cycle div:last-child { border-right: 0; }
.cycle b { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.cycle p { font-size: 15px; color: var(--ink-soft); margin: 0; }
@media (max-width: 760px) { .cycle div { border-right: 0; border-bottom: 1px solid var(--rule-soft); } }

/* --------------------------------------------------------------------------
   13. Instrument scope — benchmark and diagnostic surfaces only
   -------------------------------------------------------------------------- */
.instrument {
  background: var(--ground);
  color: var(--i-ink);
  font-family: var(--sans);
}
.instrument h1, .instrument h2, .instrument h3, .instrument h4 {
  font-family: var(--sans); font-weight: 650; letter-spacing: -.025em; color: var(--i-ink);
}
.instrument .lede, .instrument p { color: var(--i-soft); }
.instrument .eyebrow { font-family: var(--mono); color: var(--signal); letter-spacing: .14em; font-weight: 500; }
.instrument a { color: var(--signal); }
.instrument a.btn--primary, .instrument a.btn--primary:visited { color: #fff; }
.instrument a.btn--signal, .instrument a.btn--signal:visited { color: #06130D; }
.instrument .btn--ghost { color: var(--i-ink); border-color: var(--i-rule); background: none; }
.instrument .btn--ghost:hover { background: var(--panel-2); color: var(--i-ink); border-color: var(--i-soft); }
.instrument .small { color: var(--i-mute); }

.panel {
  background: var(--panel); border: 1px solid var(--i-rule);
  border-radius: var(--radius-lg); padding: 26px;
}
.panel h3 { font-size: 19px; margin-bottom: 12px; }
.panel-label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--i-mute); margin: 0 0 18px;
}

/* Sample/illustrative data — must never be mistakable for a real result.
   Dashed edge + explicit badge, per the v3.0 copy-review build note. */
.panel--sample { border-style: dashed; border-color: var(--alert); position: relative; }
.panel--sample .panel-label {
  display: inline-block; color: var(--alert); border: 1px solid var(--alert);
  border-radius: 3px; padding: 4px 9px; font-weight: 600;
}
.panel--sample .gauge-head span:last-child { font-style: italic; }

/* dimension gauges */
.gauge { margin-bottom: 16px; }
.gauge-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 12px; color: var(--i-soft); margin-bottom: 7px;
}
.gauge-track { height: 5px; background: #1E2833; border-radius: 3px; overflow: hidden; }
.gauge-fill { height: 100%; background: var(--signal); border-radius: 3px; }
.gauge-fill--gap { background: var(--alert); }

.dim-list { list-style: none; margin: 0; padding: 0; }
.dim-list li {
  display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--i-rule);
}
.dim-list li:last-child { border-bottom: 0; }
.dim-list .dim-n { font-family: var(--mono); font-size: 11.5px; color: var(--signal); padding-top: 3px; min-width: 26px; }
.dim-list b { display: block; color: var(--i-ink); font-size: 15.5px; font-weight: 600; margin-bottom: 3px; }
.dim-list span { font-size: 14.5px; color: var(--i-soft); line-height: 1.55; }

.instrument .status--available { color: var(--signal); border-color: var(--signal-deep); background: none; }
.instrument .status--pilot { color: var(--alert); border-color: #6A4A1D; background: none; }
.instrument .status--dev,
.instrument .status--future { color: var(--i-mute); border-color: var(--i-rule); background: none; }

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */
.form { display: grid; gap: 16px; max-width: 520px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 7px;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 12px 14px;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline-offset: 1px; }
.field textarea { min-height: 130px; resize: vertical; }

.instrument .field label { color: var(--i-mute); }
.instrument .field input, .instrument .field select, .instrument .field textarea {
  background: var(--panel-2); border-color: var(--i-rule); color: var(--i-ink);
}
.instrument .field input:focus { border-color: var(--signal); }
.instrument :focus-visible { outline-color: var(--signal); }

.form-note { font-size: 13.5px; line-height: 1.55; color: var(--ink-mute); max-width: 52ch; }
.instrument .form-note { color: var(--i-mute); }

.form-status {
  display: none; padding: 14px 18px; border-radius: var(--radius);
  background: var(--accent-tint); border-left: 3px solid var(--accent);
  font-size: 15px; color: var(--ink);
}
.form-status.is-visible { display: block; }
.instrument .form-status { background: var(--panel-2); border-left-color: var(--signal); color: var(--i-ink); }

/* --------------------------------------------------------------------------
   15. Page header (interior pages)
   -------------------------------------------------------------------------- */
.page-head { padding: clamp(46px, 6vw, 78px) 0 clamp(34px, 4vw, 52px); border-bottom: 1px solid var(--rule); }
.page-head .lede { margin-top: 18px; }
.page-head .meta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px; }

.crumbs { font-size: 13.5px; color: var(--ink-mute); margin: 0 0 20px; }
.crumbs a { color: var(--ink-mute); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs span { padding: 0 7px; }

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--ink); color: #B0C0B9;
  padding: clamp(48px, 6vw, 74px) 0 34px;
  font-size: 15px;
}
.site-footer a { color: #C6D4CE; text-decoration: none; }
.site-footer a:hover { color: #7FD3B4; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(155px, 1fr)); gap: 34px; }
.footer-brand { font-family: var(--serif); font-size: 22px; color: #FDFCF8; margin-bottom: 12px; }
.footer-brand em { font-style: normal; color: #7FD3B4; }
.footer-grid h4 {
  font-family: var(--sans); font-size: 11.5px; font-weight: 650; letter-spacing: .14em;
  text-transform: uppercase; color: #7E918A; margin-bottom: 14px;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 9px; font-size: 14.5px; }
.footer-note { font-size: 14px; color: #8C9C95; max-width: 46ch; line-height: 1.6; }
.footer-bar {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid #26382F;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13.5px; color: #7E918A;
}
.footer-bar ul { display: flex; flex-wrap: wrap; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* Footer responsive collapse. Without this the grid's
   `repeat(auto-fit, minmax(155px, 1fr))` tracks do not fit narrow viewports,
   so the columns squeeze and overlap. Stack to two columns, then one. */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 28px; }
  .footer-note { max-width: none; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
  .footer-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* --------------------------------------------------------------------------
   17. Utilities
   -------------------------------------------------------------------------- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 38px; }
.mt-4 { margin-top: 54px; }
.mb-0 { margin-bottom: 0; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: clamp(38px, 5vw, 58px) 0; }

/* Beachhead spotlight — Spec §11, CMS-swappable module.
   Nothing in here is domain-specific except its content. */
.spotlight {
  background: var(--white);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
}
.spotlight .spot-flag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 18px;
}