:root {
  --bg: #f4f1ed;
  --surface: #fff;
  --surface-2: #f8f6f3;
  --ink: #252020;
  --ink-2: #463e3e;
  --muted: #6a5c5e;
  --line: #d9ceca;
  --line-2: #e7ded8;
  --navy: #25191c;
  --navy-2: #41262d;
  --navy-ink: #fff6f2;
  --navy-muted: #d7bec1;
  --navy-line: #63474d;
  --accent: #a61936;
  --accent-ink: #fff;
  --accent-soft: #f9e8ec;
  --none: #695f60;
  --none-soft: #eee9e5;
  --serif: Georgia, "Times New Roman", serif;
  --sans: "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, monospace;
  --r: 5px;
  --r-sm: 4px;
  --shadow: 0 2px 5px rgb(43 23 27 / 4%);
  --ledger: #87142c;
  --ledger-ink: #fff4ef;
  --ledger-line: #bb6679;
  --nav-accent: #f293a6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1c1718;
    --surface: #282022;
    --surface-2: #312729;
    --ink: #fff5f0;
    --ink-2: #e3d4d1;
    --muted: #c0aeb0;
    --line: #604d51;
    --line-2: #48383c;
    --navy: #1e1417;
    --navy-2: #41262d;
    --navy-ink: #fff6f2;
    --navy-muted: #d7bec1;
    --navy-line: #63474d;
    --accent: #ff9eb2;
    --accent-ink: #37101b;
    --accent-soft: #492630;
    --none: #c4b4b6;
    --none-soft: #3a2e31;
    --shadow: none;
  }
}

.skip-link {
  position: fixed;
  z-index: 30;
  top: 8px;
  left: 8px;
  padding: 8px 12px;
  transform: translateY(calc(-100% - 10px));
  background: var(--surface);
  color: var(--ink);
}

.skip-link:focus { transform: none; }
.side { border-top: 4px solid var(--nav-accent); padding-top: 24px; gap: 16px; }
.brand { text-decoration: none; color: var(--navy-ink); padding-block: 3px 20px; border-bottom: 1px solid var(--navy-line); }
.brand b { font-size: 19px; letter-spacing: -.02em; }
.brand span { line-height: 1.4; }
.tglyph { width: 38px; height: 38px; border-radius: var(--r-sm); background: var(--ledger); }
.tglyph::before { left: 9px; right: 9px; top: 12px; }
.tglyph::after { left: 18px; top: 12px; bottom: 9px; }
.nav-caption { padding: 3px 10px 0; color: var(--navy-muted); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.nav { gap: 5px; }
.nav a { min-height: 44px; border-radius: var(--r-sm); }
.nav a.on { box-shadow: inset 3px 0 0 var(--nav-accent); }
.nav .bar i { background: var(--nav-accent); }
.side :focus-visible { outline-color: var(--nav-accent); }
.side-foot { display: grid; gap: 2px; padding: 13px 6px 3px; border-top: 1px solid var(--navy-line); font-size: 12px; }
.side-foot small { color: var(--navy-muted); font-size: 11px; }
.main:not(:focus-visible) { outline: none; }
.wrap { gap: 24px; }
.eyebrow { color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .13em; }
.pagehead { border-bottom: 1px solid var(--line); padding: 12px 0 20px; }
.pagehead h1 { font-size: clamp(30px, 3.5vw, 48px); line-height: 1.12; }
.panel, .kpi, .qcard, .datapanel, .card { border-color: var(--line); }
.btn { text-decoration: none; }
.btn[disabled] { opacity: .65; cursor: default; }

.study-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}

.study-copy { padding: clamp(24px, 3.1vw, 48px); }
.study-copy h1 {
  margin: 10px 0 13px;
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 400;
  line-height: .99;
  letter-spacing: -.065em;
  text-wrap: initial;
}
.study-copy p { max-width: 37ch; margin: 0; color: var(--ink-2); font-size: clamp(14px, 1.25vw, 17px); }
.study-actions { margin-top: 24px; }
.study-actions .btn { min-height: 44px; }
.study-actions .primary span { padding-left: 5px; }
.study-next { margin-top: 9px; color: var(--muted); font: 12px/1.5 var(--mono); }

.study-index {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--ledger);
  color: var(--ledger-ink);
}
.study-index-label, .ledger-line { display: flex; justify-content: space-between; gap: 10px; }
.study-index-label { font: 11px/1.5 var(--mono); letter-spacing: .12em; }
.ledger-title { display: block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ledger-equation { display: block; margin: 4px 0 13px; font: clamp(26px, 3.2vw, 46px)/1.1 var(--serif); letter-spacing: -.05em; }
.ledger-line { padding: 6px 0; border-top: 1px solid var(--ledger-line); font-size: 12px; }
.ledger-line span + span { font-family: var(--mono); }

.kpis { gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.kpi { border: 0; border-radius: 0; box-shadow: none; padding: 16px 20px; }
.kpi + .kpi { border-left: 1px solid var(--line); }
.kpi .k { font-weight: 600; }
.kpi .v { margin-bottom: 4px; }
.map { gap: 14px; }
.maprow { padding-top: 12px; border-top: 1px solid var(--line-2); }
.mapname { align-self: start; }
.cell { min-height: 38px; border-radius: var(--r-sm); }
.cell.g:hover, .cell.y:hover, .cell.r:hover { color: var(--surface); }
.opt { border-radius: var(--r-sm); }
.fab { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.study-footer { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.study-footer p { margin: 6px 0; font-size: 12px; color: var(--muted); }

@media (max-width: 820px) {
  .side { padding-top: 12px; gap: 10px; }
  .brand { padding-bottom: 0; border: 0; }
  .nav-caption, .side-foot { display: none; }
  .nav a { min-height: 40px; }
  .nav a.on { box-shadow: inset 0 -3px 0 var(--nav-accent); }
  .wrap { gap: 16px; }
}

@media (max-width: 580px) {
  .study-hero { grid-template-columns: minmax(0, 1fr); }
  .study-index { gap: 10px; padding: 15px 24px; }
  .study-ledger { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; border-top: 1px solid var(--ledger-line); padding-top: 8px; }
  .ledger-equation { margin: 0; }
  .ledger-line { display: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi { padding: 12px; }
  .kpi:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); }
  .panel { padding-inline: 14px; }
  .cell { min-height: 40px; }
  .opt .mark { grid-column: 2; }
  .opt .mark:empty { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .card, .cell { transition: none; }
  .card:hover, .cell:hover { transform: none; }
}