/* ============================================================
   MACE PROPOSAL — Nutral × Workforce Assured
   Style inspired by Sisk / United Infrastructure pitches
   ============================================================ */

:root {
  /* ─── Nutral palette ─────────────────────── */
  --paper:        #F2EEE5;   /* Nutral Cream */
  --paper-2:      #EAE5D8;
  --paper-3:      #DCD5C2;

  --ink:          #424B57;   /* Nutral Forest Slate — softer warm dark */
  --ink-2:        #38414C;
  --ink-3:        #5B6573;
  --ink-deep:     #2A323B;

  --earth-green:  #8EA698;   /* Nutral Earth Green */
  --earth-2:      #7A9285;
  --earth-3:      #5F7A6D;

  /* ─── Workforce Assured supporting ─────────── */
  --ocean:        #5C7388;
  --ocean-2:      #4B6178;
  --ocean-3:      #38495A;

  --signal:       #B05A3C;   /* muted burnt accent */
  --signal-2:     #8E4A35;
  --amber:        #B4823A;

  /* ─── Functional ─────────────────────── */
  --rule:         rgba(66, 75, 87, 0.16);
  --rule-strong:  rgba(66, 75, 87, 0.36);
  --rule-dark:    rgba(242, 238, 229, 0.16);
  --rule-dark-strong: rgba(242, 238, 229, 0.36);

  /* ─── Type ─────────────────────── */
  --serif:        'Fraunces', 'Times New Roman', serif;
  --sans:         'Raleway', system-ui, sans-serif;
  --mono:         'JetBrains Mono', 'SF Mono', Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--ink); color: var(--paper); }

a { color: inherit; text-decoration: none; }

strong { font-weight: 600; }
em { font-style: italic; font-family: var(--serif); font-variation-settings: 'opsz' 36, 'SOFT' 40; font-weight: 500; }

/* ============================================================
   PASSKEY GATE
   ============================================================ */
.gate {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--ink);
  color: var(--paper);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  padding: 40px clamp(20px, 6vw, 80px);
  transition: opacity 480ms ease;
}
.gate.dismiss { opacity: 0; pointer-events: none; }

.gate-inner {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

.gate-brand {
  display: flex; align-items: center; gap: 28px;
  margin-bottom: 72px;
}

.brand-img {
  display: block;
  height: 96px;
  width: auto;
  object-fit: contain;
}
.brand-img.nutral.on-light { display: none; }

.wfa-plate {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 0;
}
.wfa-plate .brand-img.wfa { height: 70px; }

.gate-brand .x {
  font-family: var(--serif);
  font-style: italic;
  font-size: 30px;
  color: var(--earth-green);
  opacity: 0.5;
  line-height: 1;
}

.gate-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--earth-green);
  margin-bottom: 24px;
}
.gate-tag .dot {
  display: inline-block; width: 8px; height: 8px;
  background: var(--signal); border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(194, 65, 12, 0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(194, 65, 12, 0.06); }
}

#gate-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 400;
  font-size: clamp(40px, 7vw, 76px);
  line-height: 1.02;
  margin: 0 0 24px;
  letter-spacing: -0.015em;
  font-weight: 400;
}
#gate-title em {
  color: var(--earth-green);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 400;
}

.gate-sub {
  font-size: 16px;
  line-height: 1.55;
  max-width: 56ch;
  color: rgba(242, 238, 229, 0.78);
  margin: 0 0 40px;
}
.gate-sub strong { color: var(--paper); font-weight: 600; }

.gate-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  max-width: 520px;
  border: 1px solid var(--rule-dark-strong);
}

.gate-input {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 18px 20px;
  background: transparent;
  color: var(--paper);
  border: none;
  outline: none;
  border-right: 1px solid var(--rule-dark);
}
.gate-input::placeholder {
  color: rgba(242, 238, 229, 0.35);
  letter-spacing: 0.16em;
}
.gate-input.error {
  animation: shake 0.36s ease;
  color: var(--signal);
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.gate-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0 28px;
  background: var(--paper);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: background 180ms ease;
  font-weight: 600;
}
.gate-btn:hover { background: var(--earth-green); }

.gate-help {
  margin-top: 16px;
  display: flex; gap: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.gate-help .ok { color: rgba(242, 238, 229, 0.55); }
.gate-help .err { color: var(--signal); opacity: 0; transition: opacity 220ms ease; }
.gate-help.show-err .err { opacity: 1; }

.gate-foot {
  margin-top: auto;
  padding-top: 60px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.4);
  max-width: 720px;
  margin-left: auto; margin-right: auto;
  width: 100%;
}
.gate-foot strong { color: var(--paper); font-weight: 500; }

/* ============================================================
   TOP NAV
   ============================================================ */
.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px clamp(20px, 4vw, 56px);
  background: rgba(242, 238, 229, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  transition: background 240ms ease, color 240ms ease, border-color 240ms ease;
}
.topnav.dark {
  background: rgba(20, 24, 29, 0.85);
  color: var(--paper);
  border-bottom-color: var(--rule-dark);
}

.brand-lockup {
  display: flex; align-items: center; gap: 18px;
}
.brand-lockup .brand-img { height: 56px; }
.brand-lockup .wfa-plate { padding: 0; }
.brand-lockup .wfa-plate .brand-img.wfa { height: 42px; }
.brand-lockup .x {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  opacity: 0.45;
  line-height: 1;
}

/* Toggle nutral logo variant based on nav surface */
.topnav:not(.dark) .brand-img.nutral.on-dark { display: none; }
.topnav:not(.dark) .brand-img.nutral.on-light { display: block; }
.topnav.dark .brand-img.nutral.on-light { display: none; }

.nav-links {
  display: flex; align-items: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 10px 16px;
  opacity: 0.7;
  transition: opacity 180ms ease;
}
.nav-links a:hover { opacity: 1; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  min-height: 100vh;
  padding: 200px clamp(40px, 7vw, 140px) 120px;
  background:
    radial-gradient(circle at 80% 20%, rgba(142, 166, 152, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(194, 65, 12, 0.06) 0%, transparent 50%),
    var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 64px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(242, 238, 229, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 238, 229, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero-meta {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}
.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--signal);
  border-radius: 50%;
  margin-right: 10px;
  box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.2);
  animation: pulse 2s ease-in-out infinite;
  vertical-align: 1px;
}

.hero-headline {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 320;
  font-size: clamp(64px, 13vw, 220px);
  line-height: 0.9;
  margin: 0;
  letter-spacing: -0.028em;
  color: var(--paper);
  max-width: 12ch;
}
.hero-headline .em {
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 350;
  font-style: italic;
  color: var(--earth-green);
}
.hero-headline .roman-bold {
  color: var(--signal);
  font-style: normal;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 700;
}

.hero-sub {
  margin: 48px 0 0;
  max-width: 64ch;
  font-size: 20px;
  line-height: 1.55;
  color: rgba(242, 238, 229, 0.78);
}
.hero-sub strong { color: var(--paper); font-weight: 500; }

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-dark);
  padding-top: 32px;
}
.hero-stat {
  padding: 0 28px 0 0;
  border-right: 1px solid var(--rule-dark);
}
.hero-stat:last-child { border-right: none; }
.hero-stat:not(:first-child) { padding-left: 28px; }

.hero-stat .label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.5);
  margin-bottom: 16px;
}
.hero-stat .figure {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 350;
  font-size: 88px;
  line-height: 0.95;
  color: var(--paper);
  display: flex; align-items: baseline; gap: 6px;
}
.hero-stat .figure .unit {
  font-size: 32px;
  color: var(--earth-green);
}
.hero-stat .footnote {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(242, 238, 229, 0.55);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}

@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .hero-stat { border-right: none; padding: 0 16px; }
}

/* ============================================================
   CHAPTERS
   ============================================================ */
.chapter {
  position: relative;
  padding: 180px clamp(40px, 7vw, 140px);
  overflow: hidden;
}
.chapter.cream  { background: var(--paper); color: var(--ink); }
.chapter.dark   { background: var(--ink); color: var(--paper); }
.chapter.slate  { background: var(--ocean-3); color: var(--paper); }
.chapter.signal { background: var(--paper); color: var(--ink); }

.chapter.edge::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule);
}
.chapter.dark.edge::before, .chapter.slate.edge::before { background: var(--rule-dark); }

.chapter-inner { max-width: 1440px; margin: 0 auto; }

.chapter-marker {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 32px;
  color: var(--ink-3);
}
.chapter.dark .chapter-marker, .chapter.slate .chapter-marker { color: rgba(242, 238, 229, 0.65); }
.chapter.signal .chapter-marker { color: var(--signal-2); }
.chapter-marker .num {
  display: inline-block;
  padding: 6px 12px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
}
.chapter.dark .chapter-marker .num, .chapter.slate .chapter-marker .num { background: var(--paper); color: var(--ink); }
.chapter.signal .chapter-marker .num { background: var(--signal); color: var(--paper); }
.chapter-marker .bar {
  flex: 0 0 56px; height: 1px;
  background: currentColor; opacity: 0.4;
}

.chapter-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 350;
  font-size: clamp(56px, 8vw, 132px);
  line-height: 0.95;
  letter-spacing: -0.022em;
  margin: 0 0 48px;
  max-width: 18ch;
  font-weight: 400;
}
.chapter-title em {
  color: var(--earth-3);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 350;
}
.chapter.dark .chapter-title em, .chapter.slate .chapter-title em { color: var(--earth-green); }
.chapter.signal .chapter-title em { color: var(--signal); }

.chapter-lede {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 30, 'SOFT' 20, 'wght' 380;
  font-size: clamp(24px, 2.2vw, 34px);
  line-height: 1.38;
  max-width: 58ch;
  margin: 0 0 64px;
  color: var(--ink-2);
}
.chapter.dark .chapter-lede, .chapter.slate .chapter-lede { color: rgba(242, 238, 229, 0.85); }
.chapter-lede em { color: var(--earth-3); }
.chapter.dark .chapter-lede em, .chapter.slate .chapter-lede em { color: var(--earth-green); }

/* Two-column row used in executive summary */
.two-col {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding: 48px 0;
  border-top: 1px solid var(--rule);
}
.two-col:last-of-type { border-bottom: 1px solid var(--rule); }

.two-col .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.two-col .body {
  font-size: 19px;
  line-height: 1.62;
  max-width: 72ch;
}
.two-col .body p { margin: 0 0 14px; }
.two-col .body p:last-child { margin-bottom: 0; }
.two-col .body ol { margin: 0; padding-left: 22px; }
.two-col .body ol li { margin-bottom: 10px; }

@media (max-width: 720px) {
  .two-col { grid-template-columns: 1fr; gap: 16px; }
}

/* Rules */
hr.rule-thick {
  border: none;
  border-top: 2px solid var(--ink);
  margin: 48px 0;
}
.chapter.dark hr.rule-thick, .chapter.slate hr.rule-thick { border-top-color: var(--paper); }

hr.rule-hair {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 64px 0 40px;
}
.chapter.dark hr.rule-hair, .chapter.slate hr.rule-hair { border-top-color: var(--rule-dark); }

hr.divider {
  border: none;
  border-top: 1px dashed var(--rule);
  margin: 40px 0;
}

/* ============================================================
   GRID — 4 / 2
   ============================================================ */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 48px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.chapter.dark .grid-4, .chapter.slate .grid-4 {
  border-top-color: var(--rule-dark);
  border-bottom-color: var(--rule-dark);
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin: 28px 0;
}
@media (max-width: 860px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-2 { grid-template-columns: 1fr; gap: 24px; }
}

/* Big-number cells */
.bignum {
  padding: 48px 36px;
  border-right: 1px solid var(--rule);
  position: relative;
}
.chapter.dark .bignum, .chapter.slate .bignum { border-right-color: var(--rule-dark); }
.bignum:last-child { border-right: none; }
@media (max-width: 860px) {
  .bignum:nth-child(2) { border-right: none; }
}

.bignum .label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 20px;
  opacity: 0.6;
}
.bignum .value {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 380;
  font-size: 104px;
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: 20px;
}
.bignum .value .unit-sm {
  font-size: 36px;
  color: var(--earth-3);
  margin-left: 4px;
}
.chapter.dark .bignum .value .unit-sm, .chapter.slate .bignum .value .unit-sm { color: var(--earth-green); }
.bignum .sub {
  font-size: 13px;
  line-height: 1.45;
  opacity: 0.7;
  font-family: var(--mono);
}
.bignum.ocean .value { color: var(--ocean); }
.chapter.dark .bignum.ocean .value, .chapter.slate .bignum.ocean .value { color: #93B0CC; }
.bignum.signal .value { color: var(--signal); }
.bignum.signal .sub { color: var(--signal-2); }
.chapter.dark .bignum.signal .sub, .chapter.slate .bignum.signal .sub { color: rgba(242, 238, 229, 0.7); }

/* ============================================================
   CREDS LIST
   ============================================================ */
.creds-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-dark);
}
.creds-grid > div {
  padding: 24px 20px;
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 20, 'wght' 450;
  font-size: 22px;
  letter-spacing: -0.01em;
  border-right: 1px solid var(--rule-dark);
  border-bottom: 1px solid var(--rule-dark);
  display: flex; align-items: center;
  position: relative;
  transition: background 200ms ease, color 200ms ease;
}
.creds-grid > div::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px;
  background: var(--earth-green);
  margin-right: 14px;
  transition: background 200ms ease, transform 200ms ease;
}
.creds-grid > div:hover {
  background: rgba(142, 166, 152, 0.08);
}
.creds-grid > div:hover::before {
  background: var(--signal);
  transform: rotate(45deg);
}
.creds-grid > div:nth-child(3n) { border-right: none; }
@media (max-width: 720px) {
  .creds-grid { grid-template-columns: repeat(2, 1fr); }
  .creds-grid > div { border-right: 1px solid var(--rule-dark); }
  .creds-grid > div:nth-child(2n) { border-right: none; }
  .creds-grid > div:nth-child(3n) { border-right: 1px solid var(--rule-dark); }
  .creds-grid > div:nth-child(2n) { border-right: none; }
}

/* ============================================================
   PILLAR CHART (exposure map)
   ============================================================ */
.pillar-chart {
  border: 1px solid var(--rule);
  padding: 28px 28px 8px;
  margin: 0 0 56px;
  background: rgba(20, 24, 29, 0.02);
}
.pc-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}
.pc-head .ttl {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  font-size: 20px;
}
.pc-head .ttl em { color: var(--earth-3); }
.pc-head .legend {
  display: flex; gap: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pc-head .legend .pip {
  display: inline-block; width: 10px; height: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.pc-row {
  display: grid;
  grid-template-columns: 60px 1fr 150px;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.pc-row .pc-ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ink-3);
}
.pc-row .pc-name {
  display: flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.pc-bar {
  flex: 1; min-width: 80px;
  height: 6px; background: rgba(20, 24, 29, 0.06);
  position: relative;
}
.pc-bar > span {
  position: absolute; top: 0; bottom: 0; left: 0;
}
.pc-row.critical .pc-bar > span { background: var(--signal-2); }
.pc-row.high .pc-bar > span     { background: var(--amber); }
.pc-grade {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: right;
}
.pc-row.critical .pc-grade { color: var(--signal-2); }
.pc-row.high .pc-grade { color: var(--amber); }
.pc-row .pc-date {
  font-family: var(--mono);
  font-size: 10.5px;
  text-align: right;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

@media (max-width: 720px) {
  .pc-row { grid-template-columns: 50px 1fr; }
  .pc-row .pc-name .pc-bar { display: none; }
  .pc-row > span:last-child { grid-column: 2; text-align: left; display: flex; gap: 16px; }
  .pc-grade, .pc-row .pc-date { text-align: left; }
}

/* ============================================================
   PILLARS
   ============================================================ */
.pillar-stack { display: flex; flex-direction: column; gap: 0; }

.pillar {
  display: grid;
  grid-template-columns: 96px 1fr 200px;
  gap: 48px;
  padding: 56px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.chapter.dark .pillar, .chapter.slate .pillar { border-top-color: var(--rule-dark); }
.pillar:last-child { border-bottom: 1px solid var(--rule); }
.chapter.dark .pillar:last-child, .chapter.slate .pillar:last-child { border-bottom-color: var(--rule-dark); }

.pillar .ref {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  padding-top: 8px;
}
.chapter.dark .pillar .ref, .chapter.slate .pillar .ref { color: rgba(242, 238, 229, 0.55); }

.pillar h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 30, 'wght' 450;
  font-size: 32px;
  line-height: 1.16;
  margin: 0 0 10px;
  letter-spacing: -0.012em;
}
.pillar .citation {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  margin-bottom: 22px;
  line-height: 1.55;
}
.chapter.dark .pillar .citation, .chapter.slate .pillar .citation { color: rgba(242, 238, 229, 0.55); }
.pillar p {
  font-size: 18px;
  line-height: 1.62;
  margin: 0 0 14px;
  max-width: 72ch;
}
.pillar p:last-child { margin-bottom: 0; }

.grade-panel {
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.grade-block {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid currentColor;
}
.grade-block.critical { color: var(--signal-2); }
.grade-block.high { color: var(--amber); }
.grade-block .pip {
  display: inline-block; width: 6px; height: 6px; background: currentColor;
}
.live-marker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chapter.dark .live-marker, .chapter.slate .live-marker { color: rgba(242, 238, 229, 0.55); }
.live-marker strong {
  display: block;
  color: var(--ink);
  margin-bottom: 4px;
}
.chapter.dark .live-marker strong, .chapter.slate .live-marker strong { color: var(--paper); }

@media (max-width: 860px) {
  .pillar { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .pillar .ref { padding-top: 0; }
  .grade-panel { flex-direction: row; align-items: center; gap: 24px; }
}

/* ============================================================
   PULLQUOTE
   ============================================================ */
.pullquote {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 50, 'wght' 380;
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.32;
  letter-spacing: -0.01em;
  padding: 48px 56px;
  margin: 56px 0;
  border-left: 3px solid var(--signal);
  max-width: 64ch;
  color: var(--ink);
  position: relative;
}
.chapter.dark .pullquote, .chapter.slate .pullquote { color: var(--paper); }
.pullquote::before {
  content: "“";
  position: absolute;
  top: -8px; left: 36px;
  font-size: 96px;
  color: var(--signal);
  font-style: normal;
  line-height: 1;
}
.pullquote .source {
  display: block;
  margin-top: 20px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.chapter.dark .pullquote .source, .chapter.slate .pullquote .source { color: rgba(242, 238, 229, 0.55); }

/* ============================================================
   CALLOUT
   ============================================================ */
.callout {
  margin-top: 32px;
  padding: 24px 28px;
  background: rgba(75, 97, 120, 0.08);
  border-left: 3px solid var(--ocean);
  max-width: 80ch;
}
.callout h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ocean-2);
  margin: 0 0 10px;
  font-weight: 600;
}
.callout p {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.6;
}

/* ============================================================
   TABLES
   ============================================================ */
.tbl-wrap { overflow-x: auto; margin: 24px 0; }

table.proposal {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
table.proposal thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 18px 20px 18px 0;
  border-bottom: 1.5px solid var(--ink);
  font-weight: 600;
}
.chapter.dark table.proposal thead th, .chapter.slate table.proposal thead th {
  color: rgba(242, 238, 229, 0.65);
  border-bottom-color: var(--paper);
}
table.proposal tbody td {
  padding: 18px 20px 18px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.6;
}
.chapter.dark table.proposal tbody td, .chapter.slate table.proposal tbody td {
  border-bottom-color: var(--rule-dark);
}
table.proposal tbody tr:hover td { background: rgba(20, 24, 29, 0.025); }
.chapter.dark table.proposal tbody tr:hover td, .chapter.slate table.proposal tbody tr:hover td {
  background: rgba(242, 238, 229, 0.04);
}

table.proposal .ref-col, table.proposal .week-col {
  width: 80px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  white-space: nowrap;
}
.chapter.dark table.proposal .ref-col, .chapter.slate table.proposal .ref-col,
.chapter.dark table.proposal .week-col, .chapter.slate table.proposal .week-col {
  color: rgba(242, 238, 229, 0.55);
}

/* ============================================================
   GAP CARDS
   ============================================================ */
.card {
  padding: 36px 36px 40px;
  background: var(--paper);
  border: 1px solid var(--rule);
  position: relative;
  transition: background 200ms ease, border-color 200ms ease;
}
.card:hover {
  border-color: var(--ink);
}
.card .kicker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: 16px;
}
.card h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  font-size: 26px;
  line-height: 1.2;
  margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.card p {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ============================================================
   OPTION CARDS
   ============================================================ */
.options-stack { display: flex; flex-direction: column; gap: 28px; margin: 48px 0; }

.option {
  position: relative;
  padding: 56px 56px 56px;
  background: var(--paper);
  border: 1px solid var(--rule);
  transition: border-color 200ms ease;
}
.option:hover { border-color: var(--ink); }

.option.featured {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.option.featured:hover { border-color: var(--earth-green); }

.option .badge {
  position: absolute;
  top: 0; right: 36px;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--signal);
  color: var(--paper);
  padding: 6px 14px;
  font-weight: 600;
}

.opt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.opt-head .opt-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.option.featured .opt-head .opt-label { color: var(--earth-green); }

.opt-head h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 20, 'wght' 400;
  font-size: clamp(36px, 3.6vw, 52px);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin: 0;
  max-width: 18ch;
}

.opt-head .price {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-3);
  line-height: 1.6;
  padding-top: 8px;
}
.option.featured .opt-head .price { color: rgba(242, 238, 229, 0.7); }

.option > p {
  margin: 24px 0 28px;
  font-size: 18px;
  line-height: 1.6;
  max-width: 80ch;
}
.option.featured > p { color: rgba(242, 238, 229, 0.88); }

.option h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 20px 0 12px;
  color: var(--ink-3);
  font-weight: 600;
}
.option.featured h4 { color: var(--earth-green); }

.option ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.option ul li {
  padding: 12px 0 12px 24px;
  position: relative;
  font-size: 16.5px;
  line-height: 1.55;
  border-bottom: 1px solid var(--rule);
}
.option.featured ul li {
  border-bottom-color: var(--rule-dark);
  color: rgba(242, 238, 229, 0.88);
}
.option ul li:last-child { border-bottom: none; }
.option ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 18px;
  width: 8px; height: 1px;
  background: var(--ink-3);
}
.option.featured ul li::before { background: var(--earth-green); }

/* Compare */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 40px;
}
.compare h4 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  font-size: 20px;
  margin: 0 0 14px;
}
.compare ul { margin: 0; padding-left: 18px; }
.compare ul li { margin-bottom: 10px; font-size: 16.5px; line-height: 1.55; }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   LINEAR INTERACTIVE TIMELINE
   ============================================================ */
.lt {
  margin-top: 56px;
  padding: 32px 32px 28px;
  background: rgba(242, 238, 229, 0.04);
  border: 1px solid var(--rule-dark);
  outline: none;
  position: relative;
}
.lt:focus-visible { border-color: var(--earth-green); }

.lt-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 28px;
  flex-wrap: wrap;
  gap: 16px;
}
.lt-title {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  font-size: 19px;
  color: var(--paper);
}
.lt-title em { color: var(--earth-green); }
.lt-legend {
  display: flex;
  gap: 18px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242,238,229,0.6);
  flex-wrap: wrap;
  align-items: center;
}
.lt-legend .pip {
  display: inline-block;
  width: 10px; height: 10px;
  margin-right: 6px;
  vertical-align: middle;
}
.lt-legend .pip.green  { background: var(--earth-green); }
.lt-legend .pip.ocean  { background: var(--ocean); }
.lt-legend .pip.signal { background: var(--signal); }
.lt-hint kbd {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 1px;
  border: 1px solid var(--rule-dark-strong);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--paper);
  background: rgba(242,238,229,0.05);
}

/* Track */
.lt-track {
  position: relative;
  padding: 28px 0 12px;
  margin-bottom: 8px;
}
.lt-lanes {
  position: absolute;
  top: 36px; left: 0; right: 0;
  height: 3px;
  pointer-events: none;
}
.lt-lanes .lane {
  position: absolute;
  top: 0; bottom: 0;
  opacity: 0.32;
}
.lt-lanes .lane.green  { background: var(--earth-green); }
.lt-lanes .lane.ocean  { background: var(--ocean); }
.lt-lanes .lane.signal { background: var(--signal); }
.lt-lanes .lane.mixed  {
  background: linear-gradient(90deg, var(--ocean) 0%, var(--ocean) 50%, var(--signal) 50%, var(--signal) 100%);
}
.lt-progress {
  position: absolute;
  top: 36px; left: 0;
  height: 3px;
  width: 0%;
  background: var(--paper);
  z-index: 2;
  transition: width 360ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 12px rgba(242,238,229,0.4);
}
.lt-dots {
  position: relative;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 0;
  z-index: 3;
}
.lt-dot {
  appearance: none;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  font-family: var(--mono);
  color: rgba(242,238,229,0.55);
  transition: color 200ms ease, transform 200ms ease;
  outline: none;
}
.lt-dot::before {
  content: "";
  display: block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-deep);
  border: 2px solid rgba(242,238,229,0.32);
  margin-bottom: 14px;
  transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}
.lt-dot.stage-1::before  { border-color: var(--earth-green); }
.lt-dot.stage-2::before  { border-color: var(--ocean); }
.lt-dot.stage-2-3::before { border-color: var(--signal); background: linear-gradient(135deg, var(--ocean) 0%, var(--ocean) 50%, var(--signal) 50%, var(--signal) 100%); }
.lt-dot.stage-3::before  { border-color: var(--signal); }
.lt-dot.milestone::before {
  width: 20px; height: 20px;
  margin-bottom: 12px;
  transform: rotate(45deg);
  border-radius: 2px;
}
.lt-dot.done::before {
  background: currentColor;
  opacity: 0.7;
}
.lt-dot.stage-1.done::before  { background: var(--earth-green); }
.lt-dot.stage-2.done::before  { background: var(--ocean); }
.lt-dot.stage-3.done::before  { background: var(--signal); }
.lt-dot.active::before {
  background: var(--paper);
  border-color: var(--paper);
  transform: scale(1.4);
  box-shadow: 0 0 0 6px rgba(242,238,229,0.12);
}
.lt-dot.active.milestone::before {
  transform: scale(1.3) rotate(45deg);
}
.lt-dot:hover::before { transform: scale(1.25); }
.lt-dot.active.milestone:hover::before { transform: scale(1.3) rotate(45deg); }
.lt-dot:focus-visible::before {
  box-shadow: 0 0 0 4px var(--earth-green);
}
.lt-dot .wk {
  font-size: 10.5px;
  letter-spacing: 0.14em;
  font-weight: 600;
  margin-bottom: 4px;
}
.lt-dot.active .wk { color: var(--paper); }
.lt-dot .mk {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(242,238,229,0.5);
  text-align: center;
  max-width: 80px;
  line-height: 1.25;
}
.lt-dot.active .mk { color: rgba(242,238,229,0.92); }
.lt-dot.done .wk, .lt-dot.done .mk { color: rgba(242,238,229,0.68); }

/* Controls */
.lt-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-dark);
}
.lt-btn {
  appearance: none;
  background: transparent;
  border: 1px solid var(--rule-dark-strong);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 16px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}
.lt-btn:hover { background: rgba(242,238,229,0.08); border-color: var(--paper); }
.lt-btn.primary {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
  font-weight: 600;
}
.lt-btn.primary:hover { background: var(--earth-green); border-color: var(--earth-green); }
.lt-btn.playing { background: var(--signal); color: var(--paper); border-color: var(--signal); }
.lt-position {
  flex: 1;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(242,238,229,0.7);
  text-align: center;
}
.lt-position #lt-curr {
  color: var(--paper);
  font-weight: 600;
  font-size: 14px;
}
.lt-position .slash, .lt-position .of { opacity: 0.45; margin: 0 6px; }

/* Detail panel */
.lt-panel {
  margin-top: 24px;
  padding: 28px 28px 28px;
  background: rgba(20, 24, 29, 0.42);
  border: 1px solid var(--rule-dark);
  border-left: 3px solid var(--earth-green);
  transition: border-left-color 240ms ease;
}
.lt-panel.flash { animation: lt-flash 540ms ease; }
@keyframes lt-flash {
  0%   { background: rgba(142, 166, 152, 0.14); }
  100% { background: rgba(20, 24, 29, 0.42); }
}
.lt-panel-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 36px;
}
.lt-meta {
  border-right: 1px solid var(--rule-dark);
  padding-right: 28px;
}
.lt-stage {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 4px 10px;
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 600;
}
.lt-stage.s1  { background: rgba(142,166,152,0.18); color: var(--earth-green); }
.lt-stage.s2  { background: rgba(92,115,136,0.22); color: #A8C0D6; }
.lt-stage.s23 { background: rgba(176,90,60,0.20); color: #E5A283; }
.lt-stage.s3  { background: rgba(176,90,60,0.20); color: #E5A283; }

.lt-week {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 350;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin-bottom: 28px;
}
.lt-out-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(242,238,229,0.5);
  margin-bottom: 8px;
}
.lt-out {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 36, 'SOFT' 30, 'wght' 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--paper);
}
.lt-body h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 20, 'wght' 400;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin: 0 0 14px;
  color: var(--paper);
}
.lt-body p {
  font-size: 15.5px;
  line-height: 1.62;
  color: rgba(242,238,229,0.85);
  margin: 0 0 20px;
  max-width: 64ch;
}
.lt-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lt-list li {
  padding-left: 22px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(242,238,229,0.78);
}
.lt-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 12px; height: 1px;
  background: var(--earth-green);
}

@media (max-width: 860px) {
  .lt { padding: 24px 18px; }
  .lt-dots { grid-template-columns: repeat(10, 1fr); }
  .lt-dot .mk { display: none; }
  .lt-panel-grid { grid-template-columns: 1fr; gap: 24px; }
  .lt-meta { border-right: none; border-bottom: 1px solid var(--rule-dark); padding-right: 0; padding-bottom: 20px; }
  .lt-week { font-size: 44px; margin-bottom: 16px; }
  .lt-position { font-size: 11px; }
}

/* ============================================================
   TIMELINE MONTHS (legacy — unused after redesign)
   ============================================================ */
.timeline-stack { display: flex; flex-direction: column; gap: 28px; margin: 56px 0 32px; }

.t-month {
  border: 1px solid var(--rule-dark);
  padding: 40px 48px 36px;
  background: rgba(242, 238, 229, 0.025);
}
.t-month-head {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  border-bottom: 1px solid var(--rule-dark);
  padding-bottom: 20px;
  margin-bottom: 8px;
}
.t-month-head h3 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 60, 'SOFT' 20, 'wght' 400;
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.015em;
}
.t-month-head .meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 238, 229, 0.6);
}

/* Resourcing */
.resourcing-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 40px;
}
.resourcing-list li {
  padding: 18px 0 18px 32px;
  border-bottom: 1px solid var(--rule-dark);
  position: relative;
  font-size: 17px;
  line-height: 1.55;
}
.resourcing-list li::before {
  content: "";
  position: absolute; left: 0; top: 28px;
  width: 18px; height: 1px;
  background: var(--earth-green);
}
.chapter.cream .resourcing-list li {
  border-bottom-color: var(--rule);
}

/* Assumptions */
.assumptions {
  margin-top: 32px;
  padding: 24px 28px 28px;
  background: rgba(242, 238, 229, 0.05);
  border-left: 3px solid var(--earth-green);
}
.chapter.cream .assumptions {
  background: rgba(20, 24, 29, 0.04);
}
.assumptions h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--earth-green);
}
.chapter.cream .assumptions h4 { color: var(--earth-3); }
.assumptions ul {
  margin: 0;
  padding-left: 18px;
}
.assumptions li {
  font-size: 16.5px;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ============================================================
   CLOSING
   ============================================================ */
.closing {
  position: relative;
  padding: 200px clamp(40px, 7vw, 140px) 160px;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.closing::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: var(--rule-dark);
}
.closing-marker {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--earth-green);
  margin-bottom: 32px;
}
.closing h2 {
  font-family: var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'wght' 350;
  font-size: clamp(64px, 8.5vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.024em;
  margin: 0 0 48px;
  font-weight: 400;
  max-width: 18ch;
}
.closing h2 em {
  color: var(--earth-green);
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'wght' 350;
}
.closing p {
  max-width: 70ch;
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 18px;
  color: rgba(242, 238, 229, 0.78);
}

.contact-grid {
  margin-top: 64px;
  padding-top: 32px;
  border-top: 1px solid var(--rule-dark);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: rgba(242, 238, 229, 0.7);
}
.contact-grid strong {
  display: block;
  color: var(--paper);
  margin-bottom: 8px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10.5px;
}
@media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   FOOTER STRIP
   ============================================================ */
.foot-strip {
  background: #0B0E11;
  color: rgba(242, 238, 229, 0.55);
  padding: 22px clamp(28px, 6vw, 96px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-wrap: wrap;
  gap: 12px;
}
.foot-strip .x {
  font-family: var(--serif);
  font-style: italic;
  color: var(--earth-green);
  opacity: 0.7;
}

/* ============================================================
   GENERIC LISTS WITHIN BODY
   ============================================================ */
ul:not(.nav-links):not(.creds-grid):not(.resourcing-list) {
  padding-left: 18px;
}
ul:not(.nav-links):not(.creds-grid):not(.resourcing-list) li {
  margin-bottom: 6px;
  line-height: 1.55;
}

/* ============================================================
   RESPONSIVE — tighten nav on small screens
   ============================================================ */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .hero-headline { font-size: clamp(48px, 14vw, 96px); }
  .chapter { padding: 80px 24px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .topnav, .gate, .foot-strip { display: none !important; }
  .chapter { page-break-before: always; padding: 40px 30px; }
  .hero { min-height: auto; }
}