/* Altered Principles × NYT Upshot — competitive insights whitepaper */
/* Page format: A4 portrait. On-screen pages stack with gutter; @media print collapses to one A4/page. */

:root {
  --ink: #0C0D0E;             /* AP near-black */
  --ink-2: #43494C;           /* AP graphite */
  --ink-3: #687075;           /* AP slate */
  --ink-4: #ABB1B5;           /* AP cool grey */
  --rule: #C1C5C8;            /* hairline */
  --rule-soft: #EBEFF1;       /* pale rule / fill */
  --paper: #FFFFFF;
  --paper-2: #F8F9FA;
  --accent: oklch(0.32 0.07 265);   /* ink blue ~rgb(48,54,94) */
  --accent-soft: oklch(0.32 0.07 265 / 0.08);
  --accent-line: oklch(0.32 0.07 265 / 0.35);
  --serif: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --sans: "Aeonik", "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

@font-face {
  font-family: "Aeonik";
  src: local("Aeonik"), local("Aeonik Pro");
  font-display: swap;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: #E5E7EA;        /* canvas grey behind pages */
  font-feature-settings: "kern", "liga", "onum";
  -webkit-font-smoothing: antialiased;
}

/* ───────────── A4 page shell ───────────── */
.page {
  width: 210mm;
  height: 297mm;
  background: var(--paper);
  margin: 16mm auto;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 12px 40px rgba(0,0,0,.10);
  page-break-after: always;
  break-after: page;
}
.page:last-child { page-break-after: auto; }

/* Inner safe area: 16mm margins, with room for header / footer rails */
.page__safe {
  position: absolute;
  inset: 16mm 16mm 16mm 16mm;
}

/* ───────────── Masthead / running header ───────────── */
.rail-top {
  position: absolute;
  top: 8mm; left: 16mm; right: 16mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 8pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rail-top__brand { display: flex; align-items: center; gap: 8px; }
.rail-top__brand img { width: 14px; height: 11px; }
.rail-top__brand b { color: var(--ink); font-weight: 500; letter-spacing: 0.08em; }
.rail-top__sep { color: var(--ink-4); }

.rail-bot {
  position: absolute;
  bottom: 8mm; left: 16mm; right: 16mm;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 8pt;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.rail-bot__num { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; }

.hairline {
  border: 0;
  border-top: 0.5px solid var(--rule);
  margin: 0;
}
.hairline--ink { border-top: 1px solid var(--ink); }
.hairline--double {
  border: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
  height: 4px;
}

/* ───────────── Editorial type scale ───────────── */
.kicker {
  font-family: var(--sans);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  font-weight: 500;
}
.kicker--ink { color: var(--ink); }
.kicker--mute { color: var(--ink-3); }

.headline {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.02;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.headline--xl { font-size: 56pt; line-height: 0.96; }
.headline--lg { font-size: 38pt; }
.headline--md { font-size: 24pt; line-height: 1.08; }
.headline--sm { font-size: 16pt; line-height: 1.12; }

.deck {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 14pt;
  line-height: 1.32;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
}

.byline {
  font-family: var(--sans);
  font-size: 9pt;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.byline b { color: var(--ink); font-weight: 500; }

/* Body copy */
.body {
  font-family: var(--serif);
  font-size: 10.5pt;
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}
.body p { margin: 0 0 9pt; }
.body p + p { text-indent: 1.2em; margin-top: 0; }
.body--lead p:first-child::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  float: left;
  font-size: 44pt;
  line-height: 0.85;
  padding: 4pt 6pt 0 0;
  color: var(--ink);
}
.body--narrow { font-size: 10pt; line-height: 1.45; }
.body strong, .body b { font-weight: 600; }

/* Multi-column body */
.cols-2 { column-count: 2; column-gap: 7mm; column-rule: 0.5px solid var(--rule); }
.cols-3 { column-count: 3; column-gap: 6mm; column-rule: 0.5px solid var(--rule); }
.cols-2 > *, .cols-3 > * { break-inside: avoid; }

/* Pull quote */
.pull {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 18pt;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 0.5px solid var(--ink);
  padding: 10pt 0;
  margin: 8pt 0;
  text-wrap: balance;
}
.pull__attr {
  display: block;
  margin-top: 8pt;
  font-family: var(--sans);
  font-style: normal;
  font-size: 8.5pt;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Tags / metadata chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 3px 8px;
  border-radius: 999px;
}
.chip--accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip--ghost { color: var(--ink-3); border-color: var(--rule); }

/* Tables — Upshot style */
table.data {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 8.5pt;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
table.data thead th {
  text-align: left;
  font-weight: 500;
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  padding: 6pt 8pt 6pt 0;
  border-bottom: 1px solid var(--ink);
}
table.data tbody td {
  padding: 6pt 8pt 6pt 0;
  border-bottom: 0.5px solid var(--rule);
  vertical-align: top;
}
table.data tbody tr:last-child td { border-bottom: 1px solid var(--ink); }
table.data .num { text-align: right; padding-right: 0; }
table.data .pos { color: var(--accent); }
table.data .neg { color: #B23A48; }
table.data .em { font-weight: 600; color: var(--ink); }
table.data .row-head { font-family: var(--serif); font-size: 10pt; font-weight: 600; }

/* Callout / info box */
.callout {
  border: 1px solid var(--ink);
  padding: 10pt 12pt;
  background: var(--paper);
}
.callout--accent {
  border: 0;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
}
.callout__label {
  font-family: var(--sans);
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--accent);
  margin-bottom: 6pt;
}
.callout--accent .callout__label { color: var(--accent); }
.callout p { margin: 0; font-family: var(--serif); font-size: 9.5pt; line-height: 1.45; }

/* Stats strip */
.stat-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.stat {
  padding: 8pt 10pt 8pt 0;
  border-right: 0.5px solid var(--rule);
}
.stat:last-child { border-right: 0; }
.stat__num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22pt;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.stat__num small { font-size: 12pt; font-weight: 500; color: var(--ink-3); }
.stat__label {
  margin-top: 6pt;
  font-family: var(--sans);
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.stat__delta { font-family: var(--sans); font-size: 8.5pt; color: var(--accent); margin-top: 2pt; }
.stat__delta.neg { color: #B23A48; }

/* Section heading bar (Upshot mini-section) */
.section-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-top: 2px solid var(--ink);
  padding-top: 6pt;
  margin-bottom: 10pt;
}
.section-bar__label {
  font-family: var(--sans);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  font-weight: 500;
}
.section-bar__meta {
  font-family: var(--sans);
  font-size: 8pt;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* Chart frame */
.chart {
  border-top: 1px solid var(--ink);
  border-bottom: 0.5px solid var(--rule);
  padding: 12pt 0 8pt;
  margin: 6pt 0 12pt;
}
.chart__title {
  font-family: var(--sans);
  font-size: 10pt;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 2pt;
}
.chart__sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 9pt;
  color: var(--ink-3);
  margin: 0 0 10pt;
}
.chart__source {
  font-family: var(--sans);
  font-size: 7pt;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  margin-top: 8pt;
}

/* ───────────── Cover variants ───────────── */
.cover { width: 100%; height: 100%; position: relative; }

.cover--ink {
  background: var(--ink);
  color: #fff;
}
.cover--ink .headline,
.cover--ink .deck,
.cover--ink .kicker,
.cover--ink .byline,
.cover--ink .byline b { color: #fff; }
.cover--ink .kicker { color: var(--accent-soft); color: oklch(0.78 0.06 265); }
.cover--ink .hairline { border-top-color: rgba(255,255,255,0.25); }

.cover-mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10mm 16mm 0;
}
.cover-mast__brand {
  font-family: var(--sans);
  font-size: 12pt;
  font-weight: 500;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 10px;
}
.cover-mast__brand img { width: 22px; height: 17px; }
.cover-mast__meta {
  font-family: var(--sans);
  font-size: 8.5pt;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* Cover A — Broadsheet masthead */
.cv-a__nameplate {
  font-family: var(--serif);
  font-weight: 600;
  text-align: center;
  font-size: 64pt;
  line-height: 1;
  letter-spacing: -0.02em;
  padding: 8mm 0 4mm;
  border-top: 4px double var(--ink);
  border-bottom: 1px solid var(--ink);
  margin: 6mm 16mm 0;
}
.cv-a__rule {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 8pt;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 2mm 16mm 0;
}
.cv-a__lede {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 7mm;
  padding: 8mm 16mm 0;
}
.cv-a__lede h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44pt;
  line-height: 0.98;
  letter-spacing: -0.018em;
  margin: 0 0 6pt;
  text-wrap: balance;
}
.cv-a__lede .deck { font-size: 13pt; }
.cv-a__sidebar {
  border-left: 1px solid var(--rule);
  padding-left: 6mm;
}
.cv-a__hero {
  margin: 8mm 16mm 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 6mm 0;
}
.cv-a__teasers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6mm;
  padding: 4mm 16mm 0;
}
.cv-a__teasers h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 12pt;
  margin: 6pt 0 4pt;
  line-height: 1.15;
}
.cv-a__teasers p {
  font-family: var(--serif);
  font-size: 9pt;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
}

/* Cover B — Magazine */
.cv-b {
  background: var(--paper);
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
}
.cv-b__band {
  background: var(--ink);
  color: #fff;
  padding: 10mm 16mm 8mm;
  display: flex; justify-content: space-between; align-items: end;
}
.cv-b__band .cover-mast__brand img { filter: invert(1); }
.cv-b__band b { color: #fff; }
.cv-b__center {
  padding: 0 16mm;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
.cv-b__kick {
  font-family: var(--sans);
  font-size: 9pt;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 8mm;
  display: flex; align-items: center; gap: 12px;
}
.cv-b__kick::after {
  content: ""; flex: 1; height: 1px; background: var(--ink);
}
.cv-b__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 78pt;
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.cv-b__title em {
  font-style: italic;
  color: var(--accent);
  font-weight: 500;
}
.cv-b__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16pt;
  line-height: 1.3;
  color: var(--ink-2);
  margin: 8mm 0 0;
  max-width: 70%;
}
.cv-b__foot {
  padding: 8mm 16mm 10mm;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6mm;
}
.cv-b__foot dt {
  font-family: var(--sans);
  font-size: 7.5pt;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  margin-bottom: 4pt;
}
.cv-b__foot dd {
  font-family: var(--serif);
  font-size: 11pt;
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}

/* Cover C — Data-forward */
.cv-c {
  background: var(--paper);
  height: 100%;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}
.cv-c__top {
  padding: 10mm 16mm 0;
  display: flex; justify-content: space-between; align-items: center;
}
.cv-c__title-row {
  padding: 6mm 16mm 4mm;
  min-height: 0;
}
.cv-c__title-row h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44pt;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 4mm 0 0;
  text-wrap: balance;
}
.cv-c__chart-area {
  min-height: 0;
}
.cv-c__chart-area {
  margin: 6mm 16mm 0;
  border-top: 2px solid var(--ink);
  padding-top: 4mm;
  display: grid;
  grid-template-columns: 1fr 0.45fr;
  gap: 8mm;
}
.cv-c__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13pt;
  line-height: 1.35;
  color: var(--ink-2);
  margin: 0 0 8mm;
}
.cv-c__bullets {
  list-style: none;
  margin: 0; padding: 0;
  font-family: var(--sans);
  font-size: 9.5pt;
  line-height: 1.45;
}
.cv-c__bullets li {
  border-top: 0.5px solid var(--rule);
  padding: 6pt 0;
}
.cv-c__bullets li:first-child { border-top: 0; }
.cv-c__bullets b { font-weight: 500; color: var(--ink); display: block; }
.cv-c__bullets span { color: var(--ink-3); }
.cv-c__foot {
  padding: 6mm 16mm 10mm;
  border-top: 1px solid var(--ink);
  display: flex; justify-content: space-between;
  font-family: var(--sans);
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}

/* Inline SVG chart styling */
.svg-chart { display: block; width: 100%; height: auto; overflow: visible; }
.svg-chart text { font-family: var(--sans); fill: var(--ink); }
.svg-chart .axis text { fill: var(--ink-3); font-size: 8pt; }
.svg-chart .axis line, .svg-chart .axis path { stroke: var(--rule); }
.svg-chart .grid line { stroke: var(--rule-soft); }
.svg-chart .baseline { stroke: var(--ink); stroke-width: 1; }
.svg-chart .series-1 { fill: var(--accent); stroke: var(--accent); }
.svg-chart .series-2 { fill: var(--ink); stroke: var(--ink); }
.svg-chart .series-3 { fill: var(--ink-4); stroke: var(--ink-4); }
.svg-chart .label {
  font-family: var(--sans);
  font-size: 8pt;
  fill: var(--ink);
}
.svg-chart .label--mute { fill: var(--ink-3); }
.svg-chart .annotation {
  font-family: var(--serif);
  font-style: italic;
  font-size: 9pt;
  fill: var(--ink);
}
.svg-chart .leader { stroke: var(--ink); stroke-width: 0.5; }

/* Footer back-cover */
.back {
  background: var(--ink);
  color: #fff;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 16mm;
}
.back .kicker { color: oklch(0.78 0.06 265); }
.back__title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36pt;
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: #fff;
  margin: 8mm 0 0;
  text-wrap: balance;
}
.back__grid {
  margin-top: 12mm;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10mm;
  font-family: var(--serif);
  font-size: 11pt;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.back__grid h5 {
  font-family: var(--sans);
  font-size: 8pt;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: oklch(0.78 0.06 265);
  margin: 0 0 6pt;
  font-weight: 500;
}
.back__sign {
  border-top: 0.5px solid rgba(255,255,255,0.25);
  padding-top: 8mm;
  display: flex;
  justify-content: space-between;
  align-items: end;
  font-family: var(--sans);
  font-size: 9pt;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
}
.back__sign img { width: 28px; height: 22px; filter: invert(1); }

/* ───────────── Print ───────────── */
@page { size: A4 portrait; margin: 0; }
@media print {
  body { background: #fff; }
  .page {
    margin: 0;
    box-shadow: none;
    page-break-after: always;
    break-after: page;
  }
  .no-print { display: none !important; }
}

/* ───────────── Toolbar (screen only) ───────────── */
.toolbar {
  position: fixed;
  top: 12px; right: 12px;
  z-index: 100;
  display: flex; gap: 8px;
  font-family: var(--sans);
  font-size: 12px;
}
.toolbar button {
  padding: 8px 12px;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 999px;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.toolbar button.ghost { background: #fff; color: var(--ink); border: 1px solid var(--ink); }