:root {
  --ff-ink: #162638;
  --ff-paper: #f5f1e6;
  --ff-field: #d9e0df;
  --ff-night: #080f1a;
  --ff-night-soft: #101d2c;
  --ff-sea: #17455e;
  --ff-ice: #d7eef0;
  --ff-moss: #5d7252;
  --ff-sand: #c99b62;
  --ff-line: #82939b;
  --ff-shadow: rgba(8, 22, 35, .28);
}

* { box-sizing: border-box; }

body {
  min-width: 320px;
  margin: 0;
  color: var(--ff-ink);
  background:
    linear-gradient(rgba(27, 64, 79, .06) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(27, 64, 79, .06) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ff-field);
  font: 16px/1.62 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button { font: inherit; }

.five-foot-page {
  --idea-frame-surface: var(--ff-paper);
  --idea-frame-ink: var(--ff-ink);
  --idea-frame-accent: var(--ff-sea);
  --idea-frame-warm: var(--ff-sand);
  width: min(1420px, calc(100% - 32px));
  margin: 24px auto;
  overflow: hidden;
  background: var(--ff-paper);
  border: 1px solid #405563;
  box-shadow: 0 28px 72px var(--ff-shadow);
}

.five-foot-hero {
  min-height: 238px;
  padding: clamp(22px, 4vw, 52px) clamp(24px, 5vw, 72px) 34px;
  color: #f6fbfc;
  background:
    radial-gradient(circle at 82% 18%, rgba(215, 238, 240, .32), transparent 19%),
    linear-gradient(118deg, #0a2130, #18516a 62%, #56725d);
  border-bottom: 1px solid #63818a;
}

.hierarchy-nav { color: #cce0e5; font-size: 13px; }
.hierarchy-nav a { color: inherit; }

.hero-line {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
  gap: clamp(24px, 6vw, 86px);
  align-items: end;
  margin-top: clamp(48px, 7vw, 78px);
}

.five-foot-hero h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 400;
  letter-spacing: -.055em;
  line-height: .86;
}

.hero-line p {
  max-width: 560px;
  margin: 0;
  color: #dcebed;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 1.7vw, 23px);
  line-height: 1.38;
}

.map-section {
  padding: clamp(18px, 2.3vw, 32px) !important;
  color: #f5f8fa;
  background: var(--ff-night) !important;
}

.map-toolbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 14px;
}

.map-toolbar strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 400;
}

.map-fact { color: #9fb4bd; font-size: 13px; }

.map-controls {
  display: flex;
  align-items: center;
  border: 1px solid #536774;
  background: #101b27;
}

.map-controls button,
.map-controls output {
  min-width: 42px;
  height: 36px;
  padding: 6px 11px;
  color: #f4f8f9;
  background: transparent;
  border: 0;
  border-right: 1px solid #536774;
  text-align: center;
}

.map-controls button { cursor: pointer; }
.map-controls button:last-child { min-width: 52px; border-right: 0; }
.map-controls button:hover { background: #203848; }
.map-controls output { min-width: 68px; color: #bcd3d8; font-size: 12px; line-height: 23px; }

.map-mode {
  display: inline-flex;
  max-width: 100%;
  margin: 0 0 12px;
  overflow-x: auto;
  border: 1px solid #536774;
  background: #101b27;
}

.map-mode button {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 6px 14px;
  color: #aabdc5;
  background: transparent;
  border: 0;
  border-right: 1px solid #536774;
  cursor: pointer;
}

.map-mode button:last-child { border-right: 0; }
.map-mode button:hover { color: #f4f8f9; background: #203848; }
.map-mode button[aria-pressed="true"] { color: #10212b; background: #a9cbd0; box-shadow: 0 2px 0 #d8e8e9 inset; }
.map-mode button:focus-visible { position: relative; z-index: 1; outline: 3px solid #efbb74; outline-offset: 2px; }

.map-viewport {
  position: relative;
  height: clamp(460px, 69svh, 790px);
  overflow: hidden;
  cursor: grab;
  touch-action: none;
  background: #070c15;
  border: 1px solid #314552;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .34) inset;
  user-select: none;
}

.map-viewport:active { cursor: grabbing; }
.map-viewport:focus-visible { outline: 3px solid #9ec9d2; outline-offset: 3px; }
.map-canvas { position: absolute; inset: 0 auto auto 0; width: 8192px; height: 4608px; transform-origin: 0 0; will-change: transform; }
.map-canvas img { display: block; width: 8192px; height: 4608px; max-width: none; pointer-events: none; }
.map-detail { position: absolute; z-index: 1; display: block; pointer-events: none; opacity: 0; }
.map-detail[data-ready="true"] { opacity: 1; }
.map-help { margin: 12px 0 0; color: #93a7b1; font-size: 12px; }
.map-mode-note { max-width: 900px; margin: 7px 0 0; color: #c1d0d4; font-size: 13px; }

.method-section,
.variants-section,
.accuracy-section,
.pareto-section,
.b-analysis-section,
.comparison-section,
.sources-section { padding-inline: clamp(28px, 6vw, 84px) !important; }

.method-section > p,
.variants-section > p,
.accuracy-section > p,
.pareto-section > p,
.b-analysis-section > p,
.comparison-section > p,
.sources-section > p { max-width: 860px; margin: 0; }

.mechanism {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 36px 0 0;
  padding: 1px;
  list-style: none;
  background: var(--ff-line);
}

.mechanism li {
  min-width: 0;
  padding: clamp(22px, 3vw, 36px);
  background: #f8f5ec;
}

.mechanism h3 { margin: 0 0 14px; font: 400 25px/1.1 Georgia, serif; }
.mechanism p { margin: 0; color: #4f6067; }
.method-note { margin-top: 28px !important; padding-left: 18px; border-left: 3px solid var(--ff-sea); }

.variants-section { background: #e7ece7; }
.variant-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 34px 0 28px; padding: 1px; background: #788b91; }
.variant-ledger article { padding: clamp(22px, 3vw, 34px); background: #f8f5ec; }
.variant-ledger h3 { margin: 0 0 14px; color: #174d68; font: 400 25px/1.1 Georgia, serif; }
.variant-ledger p { margin: 0; color: #43565f; }

.metric-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin: 34px 0 28px;
  padding: 1px;
  background: #788b91;
}

.metric-band article { display: flex; flex-direction: column; min-height: 210px; padding: 24px; background: #eef1eb; }
.metric-band strong { color: #164b5f; font: 400 clamp(24px, 2.5vw, 35px)/1.05 Georgia, serif; letter-spacing: -.035em; }
.metric-band span { margin-top: 15px; font-weight: 750; line-height: 1.3; }
.metric-band small { margin-top: auto; padding-top: 18px; color: #5d6a6f; line-height: 1.45; }

.pareto-section { color: var(--ff-ink); }
.pareto-section > p { color: #43565f; }
.criteria-ledger { margin: 34px 0; border-block: 1px solid #85969c; }
.criteria-ledger dl { margin: 0; }
.criteria-ledger dl > div { display: grid; grid-template-columns: minmax(170px, .34fr) 1fr; gap: 24px; padding: 17px 0; border-bottom: 1px solid #344d5a; }
.criteria-ledger dl > div:last-child { border-bottom: 0; }
.criteria-ledger dt { color: #174d68; font: 400 19px/1.35 Georgia, serif; }
.criteria-ledger dd { margin: 0; color: #43565f; }
.criteria-ledger code,
.pareto-section figcaption code,
.pareto-verdict code { color: #164b5f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.pareto-figure { margin: 42px 0 0; }
.pareto-figure svg { display: block; width: 100%; max-width: 940px; height: auto; color: #bdcdd2; background: #0a1b28; border: 1px solid #49616f; }
.pareto-grid path { fill: none; stroke: #34505e; stroke-width: 1; }
.pareto-grid path:first-child { stroke: #91a7af; }
.pareto-axis-labels,
.pareto-end { fill: #a8bec4; font: 12px system-ui, sans-serif; }
.pareto-family { fill: none; stroke: #80a9af; stroke-width: 2.5; }
.pareto-points circle { fill: #102636; stroke: #c2d6d8; stroke-width: 2; }
.pareto-ours path { stroke: #efbb74; stroke-width: 2; }
.pareto-ours circle { fill: #efbb74; stroke: #fff1dc; stroke-width: 2; }
.pareto-ours text { fill: #ffe1b9; font: 14px system-ui, sans-serif; }
.pareto-figure figcaption { max-width: 900px; margin-top: 14px; color: #9fb4bb; font-size: 13px; }
.pareto-verdict { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 940px; margin-top: 34px; padding-top: 28px; border-top: 1px solid #526875; }
.pareto-verdict p { margin: 0; color: #354952; }

.b-analysis-section { background: #e7ece7; }
.b-analysis-section > p { color: #43565f; }
.b-analysis-section code { color: #164b5f; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.projection-equation {
  display: grid;
  gap: 8px;
  max-width: 860px;
  margin: 24px 0;
  padding: 18px 20px;
  color: #d9f1ee;
  background: #0c2531;
  border-left: 3px solid #77d0c2;
  overflow-x: auto;
}
.projection-equation code { color: inherit; white-space: nowrap; }
.b-metric-band { margin-bottom: 34px; }
.b-scale-scroll { max-width: 1040px; margin: 0 0 28px; }
.b-scale-scroll table { min-width: 820px; }
.b-scale-scroll tbody th { width: auto; }
.b-scale-scroll tbody td { width: auto; font-variant-numeric: tabular-nums; }

.comparison-scroll { margin-top: 32px; overflow-x: auto; border: 1px solid #7b8b91; }
.comparison-scroll:focus-visible { outline: 3px solid rgba(23, 69, 94, .35); outline-offset: 3px; }
table { width: 100%; min-width: 900px; border-collapse: collapse; background: #f8f5ec; font-size: 14px; line-height: 1.45; }
th, td { padding: 17px 18px; border-right: 1px solid #aab4b5; border-bottom: 1px solid #aab4b5; text-align: left; vertical-align: top; }
thead th { color: #f5fafb; background: #173e50; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
tbody th { width: 19%; font-family: Georgia, serif; font-size: 17px; font-weight: 400; }
tbody td { width: 27%; color: #43535a; }
tr:last-child > * { border-bottom: 0; }
tr > *:last-child { border-right: 0; }
tr.ours > * { background: #e1ece6; }
.comparison-conclusion { margin-top: 25px !important; }
.sources-section { background: #ebe6d9; }
.sources-section a { color: #174d68; }

@media (max-width: 900px) {
  .hero-line { grid-template-columns: 1fr; margin-top: 48px; }
  .hero-line p { max-width: 680px; }
  .map-toolbar { grid-template-columns: 1fr auto; }
  .map-fact { grid-row: 2; grid-column: 1 / -1; }
  .mechanism { grid-template-columns: 1fr; }
  .variant-ledger { grid-template-columns: 1fr; }
  .metric-band { grid-template-columns: repeat(2, 1fr); }
  .pareto-verdict { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .five-foot-page { width: 100%; margin: 0; border-inline: 0; }
  .five-foot-hero { min-height: 280px; }
  .map-section { padding: 14px !important; }
  .map-toolbar { gap: 10px; }
  .map-controls button, .map-controls output { min-width: 38px; padding-inline: 8px; }
  .map-controls output { min-width: 58px; }
  .map-viewport { height: min(66svh, 620px); }
  .metric-band { grid-template-columns: 1fr; }
  .criteria-ledger dl > div { grid-template-columns: 1fr; gap: 7px; }
  .metric-band article { min-height: 170px; }
}

@media (prefers-reduced-motion: reduce) {
  .map-canvas { will-change: auto; }
}