:root {
  --paper: #f4f2ec;
  --ink: #17191c;
  --muted: #5d6065;
  --line: #b9b6ad;
  --vermillion: #d55e00;
  --blue: #0072b2;
  --green: #009e73;
  --orange: #e69f00;
  --sky: #56b4e9;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #d8d5cd; color: var(--ink); font-family: "Manrope", Arial, sans-serif; }
.page { position: relative; overflow: hidden; background: var(--paper); }
h1, h2, h3, .display { font-family: "Barlow Condensed", Arial, sans-serif; letter-spacing: 0; }
.kicker { color: var(--vermillion); font-size: 18px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rule { height: 4px; background: var(--ink); }
.source { font-size: 14px; line-height: 1.45; color: var(--muted); }
.brand { display: flex; gap: 5px; align-items: end; height: 34px; }
.brand i { display: block; width: 13px; height: 22px; background: var(--vermillion); transform: skew(-11deg); }
.brand i:nth-child(2) { height: 34px; background: var(--orange); }
.brand i:nth-child(3) { height: 27px; }
.metric { font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 800; }
.axis { color: var(--muted); font-size: 13px; }
.bars { display: flex; align-items: end; gap: 18px; height: 180px; border-bottom: 2px solid var(--ink); }
.bars .bar { position: relative; flex: 1; min-width: 0; background: var(--blue); }
.bars .bar:nth-child(2) { background: var(--green); }
.bars .bar:nth-child(3) { background: var(--orange); }
.bars .bar:nth-child(4) { background: var(--vermillion); }
.bars .bar span { position: absolute; left: 50%; top: -28px; transform: translateX(-50%); font-weight: 800; }
@media print {
  html, body { background: transparent; }
  .page { break-after: page; }
  .page:last-child { break-after: auto; }
}