:root {
  --night: #0b1710;
  --forest: #132018;
  --pine: #1e3325;
  --sage: #3a6b47;
  --coral: #c45828;
  --ember: #d97040;
  --cream: #f4ede0;
  --linen: #ece3d2;
  --warm: #d8ceba;
  --stone: #7a7566;
  --fog: #5a6b5e;
  --display: "Fraunces", Georgia, serif;
  --mono: "DM Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--cream);
}

body {
  font-family: var(--display);
  font-weight: 300;
  line-height: 1.55;
  counter-reset: page;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 64 64'%3E%3Ccircle cx='8' cy='12' r='.7' fill='%23f4ede0'/%3E%3Ccircle cx='42' cy='37' r='.5' fill='%23f4ede0'/%3E%3Ccircle cx='19' cy='55' r='.45' fill='%23f4ede0'/%3E%3C/svg%3E");
  z-index: 4;
}

@page { size: A4; margin: 0; }

.page {
  position: relative;
  min-height: 297mm;
  padding: 17mm 18mm 15mm;
  page-break-after: always;
  overflow: hidden;
  background: var(--night);
}

.page:last-child { page-break-after: auto; }
.page.light { background: var(--linen); color: var(--night); }
.page.forest { background: var(--forest); }

.synthetic-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 17mm;
  padding-bottom: 5mm;
  border-bottom: 1px solid var(--coral);
  color: var(--coral);
  font: 10px/1.2 var(--mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

.light .synthetic-bar { border-color: var(--coral); }
.synthetic-bar .folio { color: var(--stone); }

.eyebrow, .label, .micro {
  color: var(--coral);
  font: 10px/1.2 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.micro { color: var(--stone); letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 300; letter-spacing: -.035em; line-height: .96; }
h1 { max-width: 165mm; font-size: 62px; }
h2 { max-width: 130mm; font-size: 42px; }
h3 { font-size: 24px; }
p { max-width: 118mm; color: var(--warm); font-size: 16px; }
.light p { color: var(--stone); }
.italic { font-style: italic; color: var(--warm); }
.light .italic { color: var(--stone); }

.cover-mark { margin-top: 20mm; font-size: 18px; font-style: italic; }
.cover-title { margin: 20mm 0 8mm; font-size: 82px; line-height: .84; }
.cover-title em { color: var(--coral); }
.cover-intro { margin-top: 32mm; max-width: 93mm; }
.cover-footer {
  position: absolute;
  right: 18mm;
  bottom: 16mm;
  color: var(--warm);
  font: 10px/1.4 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.lead { margin-bottom: 14mm; }
.lead p { font-size: 19px; line-height: 1.45; }
.split {
  display: grid;
  grid-template-columns: 38mm 1fr;
  gap: 12mm;
  align-items: start;
}
.split.wide { grid-template-columns: 72mm 1fr; }
.index { color: var(--coral); font: 28px/1 var(--mono); }
.rule { border-top: 1px solid var(--pine); margin: 8mm 0; }
.light .rule { border-color: var(--warm); }

.stat-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0 10mm;
  border-top: 1px solid var(--pine);
  border-bottom: 1px solid var(--pine);
}
.stat { padding: 8mm 0 7mm; border-bottom: 1px solid var(--pine); }
.stat:nth-last-child(-n+3) { border-bottom: 0; }
.stat-value { margin: 2mm 0; color: var(--cream); font-size: 37px; line-height: 1; }
.stat-note { color: var(--stone); font: 10px/1.45 var(--mono); }
.light .stat-grid, .light .stat { border-color: var(--warm); }
.light .stat-value { color: var(--night); }

.bar-row {
  display: grid;
  grid-template-columns: 29mm 1fr 18mm;
  gap: 5mm;
  align-items: center;
  padding: 4mm 0;
  border-bottom: 1px solid var(--pine);
}
.bar-label, .bar-value { font: 11px/1.2 var(--mono); }
.bar-value { text-align: right; color: var(--warm); }
.bar-track { height: 5px; background: var(--pine); }
.bar-fill { height: 100%; background: var(--coral); }
.bar-fill.sage { background: var(--sage); }
.bar-fill.stone { background: var(--stone); }

.editorial-list { margin-top: 8mm; }
.row {
  display: grid;
  grid-template-columns: 38mm 1fr auto;
  gap: 6mm;
  padding: 5mm 0;
  border-bottom: 1px solid var(--pine);
  align-items: baseline;
}
.row-label { color: var(--coral); font: 10px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.row-main { color: var(--cream); font-size: 19px; }
.row-detail { color: var(--stone); font: 10px/1.4 var(--mono); text-align: right; }
.light .row { border-color: var(--warm); }
.light .row-main { color: var(--night); }

.callout {
  margin-top: 12mm;
  padding: 7mm 0 7mm 8mm;
  border-left: 4px solid var(--coral);
}
.callout p { margin: 0; font-size: 19px; }

.recommendation { padding: 7mm 0; border-top: 1px solid var(--pine); }
.recommendation:last-child { border-bottom: 1px solid var(--pine); }
.recommendation h3 { margin: 2mm 0 3mm; }
.recommendation p { margin-bottom: 0; }
.recommendation.urgent h3 { color: var(--coral); }

.footer-note {
  position: absolute;
  bottom: 12mm;
  left: 18mm;
  color: var(--stone);
  font: 9px/1.35 var(--mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

@media screen and (max-width: 700px) {
  .page {
    min-height: auto;
    height: auto;
    padding: 28px 24px 64px;
    page-break-after: none;
  }

  .synthetic-bar {
    display: block;
    margin-bottom: 48px;
    padding-bottom: 12px;
    font-size: 8px;
    line-height: 1.5;
  }

  .synthetic-bar .folio { float: right; }
  .split, .split.wide { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .split > * { min-width: 0; }
  .lead { margin-bottom: 40px; }
  h1 { font-size: 56px; }
  h2 { font-size: 34px; max-width: none; }
  h3 { font-size: 22px; }
  p { font-size: 15px; max-width: none; }
  .cover-title { margin-top: 24px; }
  .cover-intro { margin-top: 64px; max-width: 280px; }
  .cover-footer { left: 24px; right: 24px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .stat { min-width: 0; }
  .stat-value { font-size: 28px; overflow-wrap: anywhere; }
  .stat-note { overflow-wrap: anywhere; }
  .bar-row { grid-template-columns: 56px minmax(0, 1fr) 32px; gap: 8px; }
  .bar-label, .bar-value { font-size: 9px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .row-label { grid-column: 1 / -1; }
  .row-main { min-width: 0; font-size: 17px; overflow-wrap: anywhere; }
  .row-detail { max-width: 90px; white-space: normal; overflow-wrap: anywhere; }
  .callout p { font-size: 17px; }
  .footer-note { position: static; margin-top: 40px; }
}

@media screen and (max-width: 420px) {
  .page { padding-left: 20px; padding-right: 20px; }
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .cover-title { font-size: 52px; }
  .cover-footer { left: 20px; right: 20px; }
}

@media print {
  html, body, .page { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before { position: absolute; }
  .page { min-height: 297mm; height: 297mm; padding: 11mm 14mm 10mm; }
  .synthetic-bar { margin-bottom: 10mm; padding-bottom: 3mm; font-size: 8px; }
  h1 { font-size: 54px; }
  h2 { font-size: 34px; }
  h3 { font-size: 20px; }
  p { font-size: 13px; }
  .cover-mark { margin-top: 12mm; font-size: 15px; }
  .cover-title { margin: 13mm 0 5mm; font-size: 68px; }
  .cover-intro { margin-top: 18mm; }
  .split { gap: 8mm; }
  .split.wide { grid-template-columns: 58mm 1fr; }
  .lead { margin-bottom: 9mm; }
  .stat { padding: 5mm 0 4mm; }
  .stat-value { font-size: 29px; }
  .row { padding: 3mm 0; }
  .row-main { font-size: 16px; }
  .callout { margin-top: 8mm; padding: 5mm 0 5mm 6mm; }
  .callout p { font-size: 16px; }
  .recommendation { padding: 4mm 0; }
  .footer-note { left: 14mm; bottom: 7mm; }
}