/* =========================================================
   Brand Index — Editorial Report
   Typography: Collier (display) / IBM Plex Sans (UI) / JetBrains Mono (data)
   ========================================================= */

:root {
  /* Palette — warm paper / deep ink / ochre accent */
  --paper: #FBFAF7;
  /* ivory — near white, warm */
  --paper-2: #EDE6D8;
  /* warm linen */
  --paper-3: #F0EBE3;
  /* warm sand — lighter bar tracks */
  --rule: oklch(0.83 0.012 88);
  --ink: oklch(0.22 0.020 60);
  --ink-2: oklch(0.38 0.018 62);
  --ink-3: oklch(0.55 0.015 65);
  --accent: oklch(0.50 0.095 48);
  /* warm tobacco-brown */
  --accent-2: oklch(0.68 0.065 68);
  /* muted warm sand */
  --good: oklch(0.52 0.080 140);
  /* muted sage */
  --bad: oklch(0.50 0.120 28);
  /* muted rust */

  --col-max: 1280px;
  --text-max: 640px;

  /* Density scale */
  --pad-section: clamp(80px, 8vw, 140px);
  --pad-block: clamp(32px, 3vw, 56px);

  --serif: Georgia, serif;
  --serif-num: Georgia, serif;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* Dark mode variant — applied via [data-theme="dark"] */
[data-theme="dark"] {
  --paper: oklch(0.18 0.012 70);
  --paper-2: oklch(0.22 0.012 70);
  --paper-3: oklch(0.26 0.012 70);
  --rule: oklch(0.38 0.015 70);
  --ink: oklch(0.95 0.008 80);
  --ink-2: oklch(0.80 0.010 78);
  --ink-3: oklch(0.60 0.012 75);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga";
}

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 0.96;
}

.ui,
.label,
.kicker,
.meta,
.badge,
.tag,
.num-label {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 11px;
  color: var(--ink-2);
}

.data,
.data * {
  font-family: var(--mono);
  font-feature-settings: "tnum", "zero", "lnum";
  font-variant-numeric: lining-nums tabular-nums;
}

/* Force lining tabular figures wherever serif numerals appear */
.num,
.kpi-num,
.cover .hero-strip .kpi-num,
.smults .cell .n,
.actions .idx,
.chapter-head .numeral {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

em,
.italic {
  font-style: italic;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

a:hover {
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* ---------- Layout helpers ---------- */
.wrap {
  max-width: var(--col-max);
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.rule-thick {
  border: 0;
  border-top: 2px solid var(--ink);
  margin: 0;
}

.col-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px);
}

.col-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}

.col-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 32px);
}

.col-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 1.6vw, 28px);
}

.col-12-8 {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 72px);
}

.col-8-4 {
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: clamp(32px, 4vw, 72px);
}

@media (max-width: 860px) {

  .col-2,
  .col-3,
  .col-4,
  .col-5,
  .col-12-8,
  .col-8-4 {
    grid-template-columns: 1fr;
  }
}

/* ---------- Masthead ---------- */
.masthead {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
  /* clip absolute-positioned client name on narrow viewports */
}

.masthead .masthead-inner {
  padding: 0;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 24px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  min-height: 96px;
}

.masthead .brand {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  width: 96px;
  height: 96px;
  padding: 0;
  /* left-aligned text inside the square, with optical correction */
  text-align: left;
  flex: 0 0 auto;
}

.masthead .brand-stack {
  display: block;
}

.masthead .brand-stack span {
  display: block;
  position: relative;
}

.masthead .brand em {
  font-style: normal;
}

.masthead .brand .tm {
  position: absolute;
  top: -0.3em;
  right: -1.6em;
  font-size: 5px;
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 1;
}

.masthead .crumbs {
  display: flex;
  gap: 18px;
  color: var(--ink-2);
  align-items: center;
}

/* Centered client name — absolute so it ignores the asymmetric brand block */
.masthead .masthead-inner {
  position: relative;
}

.masthead .masthead-client {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  pointer-events: none;
}

.masthead .crumbs .acct-link {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

.masthead .crumbs .acct-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---------- Cover ---------- */
.cover {
  /* padding: clamp(20px, 7vw, 40px) clamp(24px, 4vw, 56px) clamp(20px, 7vw, 40px); */
  padding: 72px 20px 72px 20px;
  position: relative;
}

.cover-inner {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center !important;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  width: 100%;
}

.cover::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  transform: translateX(-50%);
  border-bottom: 1px solid var(--rule);
}

.cover .issue {
  display: flex;
  justify-content: space-between;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: clamp(40px, 6vw, 80px);
}

.cover h1.display {
  font-size: clamp(34px, 5.6vw, 84px);
  line-height: 1.02;
  margin: 0;
  max-width: 18ch;
}

.cover h1.display em {
  font-style: italic;
  color: var(--accent);
}

.cover .deck {
  margin-top: clamp(32px, 3.5vw, 56px);
  max-width: 54ch;
  font-family: var(--serif);
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.55;
  color: var(--ink);
  padding-top: clamp(20px, 2vw, 32px);
  border-top: 1px solid var(--rule);
}

.cover .hero-strip {
  margin-top: clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.cover .hero-strip>* {
  background: var(--paper);
  padding: 24px 20px;
}

.cover .hero-strip .kpi-num {
  font-family: var(--serif-num);
  font-size: clamp(40px, 5vw, 64px);
  line-height: 1;
  margin: 8px 0 6px;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
  font-weight: 500;
}

.cover .hero-strip .kpi-num .unit {
  font-size: 0.45em;
  color: var(--ink-2);
  margin-left: 4px;
  letter-spacing: 0;
}

.cover .hero-strip .delta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

.cover .hero-strip .delta.up {
  color: var(--good);
}

.cover .hero-strip .delta.down {
  color: var(--bad);
}

.cover .hero-strip .delta.flat {
  color: var(--ink-3);
}

.cover .hero-strip .label {
  margin: 0;
}

@media (max-width: 860px) {
  .cover .hero-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cover hero KPIs — 2×2 on mobile, 4×1 on desktop */
@media (max-width: 640px) {
  .cover .hero-kpis.kpi-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 400px) {
  .cover .hero-kpis.kpi-cards {
    grid-template-columns: 1fr !important;
  }

  .cover h1.display {
    font-size: 28px;
  }
}

/* ---------- Chapter ---------- */
.chapter {
  padding: var(--pad-section) 0;
  border-bottom: 1px solid oklch(0.78 0.012 70);
}

.chapter:last-of-type {
  border-bottom: 0;
}

.chapter-head {
  margin-bottom: clamp(40px, 5vw, 72px);
}

/* === Editorial banner === */
.chapter-head .ch-banner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 64px);
  padding: 18px 0 28px;
  border-bottom: 1px solid oklch(0.78 0.012 70);
  margin-bottom: clamp(36px, 4.5vw, 64px);
}

.chapter-head .ch-banner-left {
  display: flex;
  align-items: baseline;
  gap: clamp(20px, 2.5vw, 40px);
  min-width: 0;
}

.chapter-head .ch-title-wrap {
  padding-bottom: 14px;
}

.chapter-head .numeral {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(72px, 9vw, 132px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: var(--paper-3);
  margin: 0;
  flex: 0 0 auto;
  font-feature-settings: "lnum";
  font-variant-numeric: lining-nums;
}

.chapter-head .kicker {
  display: block;
  margin: 0 0 10px;
  color: var(--ink-3);
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.chapter-head .ch-title {
  font-family: var(--sans);
  font-style: normal;
  font-weight: 500;
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.2;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.chapter-head .ch-title em {
  font-style: normal;
  color: var(--accent);
}

.chapter-head .ch-banner-right {
  flex: 0 0 auto;
  text-align: right;
  padding-bottom: 12px;
}

.chapter-head .ch-meta {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

/* === Headline (verdict + dek) === */
.chapter-head .ch-headline {
  max-width: none;
}

.chapter-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  max-width: 38ch;
  color: var(--ink);
  text-wrap: balance;
}

.chapter-head h2 em {
  font-style: italic;
  color: var(--accent);
}

.chapter-head .dek {
  font-size: clamp(16px, 1.25vw, 19px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 70ch;
  font-style: italic;
  margin: 0;
}

@media (max-width: 720px) {
  .chapter-head .numeral {
    font-size: clamp(48px, 12vw, 72px);
  }

  .chapter-head .ch-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .chapter-head .ch-banner-right {
    text-align: left;
    padding-bottom: 0;
  }

  .chapter-head .ch-banner-left {
    flex-wrap: wrap;
    gap: 18px;
  }
}

/* ---------- KPI tiles ---------- */
.kpi {
  border-top: 1px solid var(--ink);
  padding: 18px 0 22px;
}

.kpi .label {
  margin: 0 0 12px;
}

.kpi .num {
  font-family: var(--serif-num);
  font-size: clamp(44px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
  font-weight: 500;
}

.kpi .num .unit {
  font-size: 0.45em;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 4px;
}

.kpi .sub {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

.kpi .sub .up {
  color: var(--good);
}

.kpi .sub .down {
  color: var(--bad);
}

.kpi .spark {
  margin-top: 12px;
  display: block;
}

/* ---------- Top projects (ranked list) ---------- */
.top-projects {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.top-projects li {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: baseline;
  column-gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.top-projects li:first-child {
  padding-top: 4px;
}

.top-projects li:last-child {
  border-bottom: 0;
}

.top-projects .rank-num {
  font-family: var(--serif-num);
  font-size: 22px;
  line-height: 1;
  color: var(--ink-3);
  font-feature-settings: "lnum", "tnum";
}

.top-projects li:first-child .rank-num {
  color: var(--accent);
}

.top-projects .proj .title {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}

.top-projects .proj .path {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-top: 4px;
}

.top-projects .proj .aside {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 6px;
}

.top-projects .metrics {
  display: flex;
  gap: 24px;
  align-items: baseline;
}

.top-projects .metrics .m {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 56px;
}

.top-projects .metrics .label {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.top-projects .metrics .val {
  font-family: var(--serif-num);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "lnum", "tnum";
}

/* Instagram KPI strips — 6 columns */
.ig-kpis.col-4,
.ig-reach-kpis.col-5 {
  grid-template-columns: repeat(6, 1fr);
}

/* When 5-6 KPIs share a row, dial the numeral down ~20% so it doesn't crowd. */
.col-5 .kpi .num,
.ig-kpis .kpi .num {
  font-size: clamp(34px, 4vw, 58px);
}

/* Inline aside on a KPI label — e.g. "· contextual" */
.kpi .label .kpi-aside {
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: .12em;
}

/* ---------- Prose & pull ---------- */
.prose p {
  font-size: 18px;
  line-height: 1.65;
  max-width: 64ch;
  color: var(--ink);
  margin: 0 0 1em;
}

.prose .drop::first-letter {
  font-family: var(--serif);
  font-size: 5.2em;
  float: left;
  line-height: 0.88;
  padding: 0.06em 0.08em 0 0;
  color: var(--accent);
  font-style: italic;
}

.pull {
  font-family: var(--serif);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-style: italic;
  color: var(--ink);
  max-width: 26ch;
  border-left: 2px solid var(--accent);
  padding: 8px 0 8px 28px;
  margin: 0;
}

.pull.center {
  text-align: center;
  border: 0;
  padding: 0;
  margin: 0 auto;
  max-width: 22ch;
  font-size: clamp(28px, 3.2vw, 48px);
}

.note {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 48ch;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}

.note b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Ranking list (bars) ---------- */
.rank {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.rank .row {
  display: grid;
  grid-template-columns: minmax(10ch, 22ch) minmax(0, 1fr) minmax(5ch, 7ch) minmax(4ch, 6ch);
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
}

.rank .row .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rank .row .name {
  color: var(--ink);
}

.rank .row .bar {
  height: 6px;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.rank .row .bar>i {
  display: block;
  height: 100%;
  background: var(--ink);
}

.rank .row.accent .bar>i {
  background: var(--accent);
}

.rank .row.muted .bar>i {
  background: var(--ink-3);
}

.rank .row.aside .bar>i {
  background: var(--accent-2);
}

/* Chart legend — used wherever a chart encodes meaning by color */
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 16px;
}

.chart-legend .key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-legend .key::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 6px;
  background: currentColor;
  border-radius: 1px;
}

.chart-legend .key.k-accent {
  color: var(--accent);
}

.chart-legend .key.k-muted {
  color: var(--ink-3);
}

.chart-legend .key.k-aside {
  color: var(--accent-2);
}

.chart-legend .key .label-text {
  color: var(--ink-3);
}

.rank .row .val {
  font-family: var(--mono);
  text-align: right;
  color: var(--ink);
}

.rank .row .delta {
  font-family: var(--mono);
  text-align: right;
  font-size: 11px;
  color: var(--ink-3);
}

.rank .row .delta.up {
  color: var(--good);
}

.rank .row .delta.down {
  color: var(--bad);
}

@media (max-width: 720px) {
  .rank .row {
    grid-template-columns: minmax(8ch, 12ch) minmax(0, 1fr) 6ch;
  }

  .rank .row .delta {
    display: none;
  }
}

/* Variant: full-width labels — never truncate, allow wrap.
   Use for compact / side-by-side layouts where the name column is squeezed. */
.rank.rank--wrap .row {
  grid-template-columns: minmax(14ch, 28ch) minmax(0, 1fr) minmax(5ch, 7ch) minmax(4ch, 6ch);
  align-items: center;
}

.rank.rank--wrap .row .name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.3;
}

/* No-bar variant: name | val | delta only */
.rank.rank--nobar .row {
  grid-template-columns: 1fr minmax(5ch, 7ch) minmax(6ch, 8ch);
  align-items: center;
}

.rank.rank--nobar .row .name {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  color: var(--ink);
}

.rank.rank--nobar .row .name .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ---------- Donut ---------- */
.donut-wrap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
}

.donut-legend {
  font-family: var(--sans);
  font-size: 12px;
}

.donut-legend .row {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: center;
}

.donut-legend .sw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

/* ---------- Image ---------- */
.img {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--paper-2) 0 8px,
      var(--paper-3) 8px 16px);
  border: 1px solid var(--rule);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  align-items: flex-end;
  padding: 14px;
  aspect-ratio: 1/1;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.img.wide {
  aspect-ratio: 16/9;
}

.img.tall {
  aspect-ratio: 3/4;
}

.img.has-photo {
  border-color: transparent;
}

.img.has-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 55%, oklch(0 0 0 / 0.35));
  pointer-events: none;
}

.img .caption {
  max-width: 90%;
  position: relative;
  z-index: 1;
}

.img .corner {
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 10px;
  color: var(--paper);
  opacity: 0.85;
  z-index: 1;
}

.img:not(.has-photo) .caption,
.img:not(.has-photo) .corner {
  color: var(--ink-3);
}

[data-imagery="off"] .img {
  display: none;
}

/* ---------- Small multiples ---------- */
.smults {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.smults .cell {
  padding: 20px 20px 18px;
  background: var(--paper-2);
  border-radius: 4px;
}

.smults .cell .label {
  margin: 0 0 8px;
}

.smults .cell .n {
  font-family: var(--serif-num);
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1, "onum" 0;
  font-weight: 500;
}

.smults .cell .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  margin-top: 6px;
}

.smults .cell .d.up {
  color: var(--good);
}

.smults .cell .d.down {
  color: var(--bad);
}

.smults .cell svg {
  display: block;
  margin-top: 10px;
}

@media (max-width: 860px) {
  .smults {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Section numerals ---------- */
.fig {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}

/* Middle-ground figure heading: metric name reads as a real heading,
   with an italic editorial framing line beneath. Replaces the
   eyebrow + giant display headline + dek pattern. */
.fig-lead {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
  font-weight: 600;
}

.fig-lead .num {
  color: var(--ink-3);
  font-weight: 500;
  margin-right: 6px;
}

.fig-frame {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink-2);
  font-style: italic;
  margin: 0 0 24px;
  max-width: 56ch;
}

.fig-frame em,
.fig-frame b {
  color: var(--ink);
  font-style: normal;
}

/* ---------- Signal grid ---------- */
.signals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--rule);
}

.signals .cell {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 24px 24px 28px;
  background: var(--paper);
}

.signals .cell .tag {
  display: inline-block;
  padding: 3px 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  border: 1px solid var(--ink);
  color: var(--ink);
  margin-bottom: 12px;
}

.signals .cell.win .tag {
  background: var(--ink);
  color: var(--paper);
}

.signals .cell.risk .tag {
  background: var(--bad);
  border-color: var(--bad);
  color: var(--paper);
}

.signals .cell.watch .tag {
  background: var(--paper);
  border-color: var(--ink-2);
  color: var(--ink-2);
}

.signals .cell p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.45;
  margin: 0;
  max-width: 40ch;
}

@media (max-width: 860px) {
  .signals {
    grid-template-columns: 1fr;
  }
}

/* ---------- Actions ---------- */
.actions {
  display: grid;
  gap: 0;
}

.actions .row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 32px;
  padding: 28px 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}

.actions .row:last-child {
  border-bottom: 1px solid var(--rule);
}

.actions .idx {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 0.9;
  color: var(--accent);
  font-feature-settings: "lnum";
}

.actions .row h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  max-width: 32ch;
}

.actions .row p {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 68ch;
}

.actions .row .meta {
  margin-top: 10px;
  display: flex;
  gap: 18px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.actions .row .meta .prio {
  color: var(--accent);
  border: 1px solid currentColor;
  padding: 2px 6px;
}

/* ---------- Footer / colophon ---------- */
footer.colophon {
  padding: 80px 0 100px;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 48px;
  align-items: start;
}

footer.colophon--simple {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 48px 0 64px;
  gap: 24px;
}

footer .colophon-brand {
  /* Reuses .brand styles from the masthead — dark square logo block */
}

footer.colophon--simple .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  width: 72px;
  height: 72px;
  padding: 0;
  text-align: left;
  flex: 0 0 auto;
}

footer.colophon--simple .brand-stack {
  display: block;
}

footer.colophon--simple .brand-stack span {
  display: block;
  position: relative;
}

footer.colophon--simple .brand .tm {
  position: absolute;
  top: -0.3em;
  right: -1.6em;
  font-size: 5px;
  letter-spacing: 0.05em;
  font-weight: 400;
  line-height: 1;
}

footer .colophon-body {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 8px;
}

footer .colophon-links {
  display: flex;
  gap: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

footer .colophon-links .acct-link {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 160ms ease, border-color 160ms ease;
}

footer .colophon-links .acct-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

footer .mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
}

footer .meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.8;
}

/* ---------- Imagery grid (Instagram) ---------- */
.ig-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
}

.ig-grid .img {
  aspect-ratio: 1/1;
  padding: 8px;
}

.ig-grid .img .caption {
  font-size: 9px;
}

@media (max-width: 720px) {
  .ig-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Map dots ---------- */
.geo-card {
  border: 1px solid var(--rule);
  padding: 20px;
  background: var(--paper-2);
}

/* ---------- Tweaks panel ---------- */
.tweaks-panel {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 280px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 18px;
  font-family: var(--sans);
  font-size: 12px;
  z-index: 100;
  box-shadow: 0 10px 30px oklch(0 0 0 / 0.12);
  display: none;
}

.tweaks-panel.on {
  display: block;
}

.tweaks-panel h4 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 14px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
}

.tweaks-panel .field {
  margin-bottom: 14px;
}

.tweaks-panel label.f-label {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}

.tweaks-panel .swatches {
  display: flex;
  gap: 6px;
}

.tweaks-panel .sw-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  cursor: pointer;
  padding: 0;
}

.tweaks-panel .sw-btn.active {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.tweaks-panel .seg {
  display: flex;
  border: 1px solid var(--rule);
}

.tweaks-panel .seg button {
  flex: 1;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--ink-2);
}

.tweaks-panel .seg button.active {
  background: var(--ink);
  color: var(--paper);
}

/* Numeric display for KPI / data headlines — lining + tabular */
.cover .hero-strip .kpi-num,
.kpi .num,
.smults .cell .n,
.chapter-head .numeral {
  font-feature-settings: "lnum", "tnum", "kern";
  font-variant-numeric: lining-nums tabular-nums;
}

[data-density="airy"] {
  --pad-section: clamp(110px, 11vw, 180px);
}

[data-density="compact"] {
  --pad-section: clamp(56px, 6vw, 96px);
}

/* ---------- Sticky chapter rail ---------- */
.rail {
  position: fixed;
  top: 50%;
  left: 24px;
  transform: translateY(-50%);
  z-index: 50;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px 20px;
  background: oklch(from var(--paper) l c h / 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--rule);
  border-radius: 14px;
  max-height: 80vh;
  overflow: hidden;
}

.rail a {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
  padding: 6px 4px;
  color: var(--ink-3);
  border: 0;
  text-decoration: none;
  transition: color 140ms ease;
}

.rail a .num {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 0;
}

.rail a .name {
  opacity: 0.9;
  white-space: nowrap;
}

.rail a:hover {
  color: var(--ink);
}

.rail a:hover .num {
  color: var(--accent);
}

.rail a.active {
  color: var(--ink);
}

.rail a.active .num {
  color: var(--accent);
  font-weight: 600;
}

.rail a.active .name {
  font-weight: 600;
}

.rail-divider {
  height: 1px;
  background: var(--rule);
  margin: 8px 0;
}

.rail .rail-top {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 6px;
}

.rail .rail-top b {
  font-style: normal;
  font-weight: 500;
}

.rail .rail-progress {
  height: 2px;
  background: var(--paper-3);
  margin: 20px 4px 0;
  position: relative;
}

.rail .rail-progress>i {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0%;
  transition: width 120ms linear;
}

/* Collapse to dots on narrower screens */
@media (max-width: 1640px) {
  .rail {
    left: 12px;
    padding: 12px 10px;
  }

  .rail .rail-top,
  .rail a .name {
    display: none;
  }

  .rail a {
    grid-template-columns: 22px;
  }
}

@media (max-width: 720px) {
  .rail {
    display: none;
  }
}

/* Push content right to clear the fixed rail when it's visible */
@media (min-width: 721px) and (max-width: 1640px) {

  /* Collapsed rail: left:12px + padding 10px + 22px dots + 10px = ~54px; give 72px */
  .wrap {
    padding-left: 72px;
  }

  .cover {
    padding-left: 72px;
  }
}

@media (min-width: 1641px) {

  /* Full rail with labels; give 100px */
  .wrap {
    padding-left: 100px;
  }

  .cover {
    padding-left: 100px;
  }
}

/* Keep the tweaks panel from overlapping the rail on wide screens */
@media (min-width: 1181px) {
  .tweaks-panel {
    left: auto;
    right: 20px;
  }
}

/* =========================================================
   v3 ADDITIONS — Featured callouts, briefs, posts plate, table, verdict
   ========================================================= */

/* Featured plate (ChatGPT, LUXE RED, etc.) */
.plate-feature {
  border: 1px solid var(--ink);
  background: var(--paper);
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 0;
  margin: 32px 0;
  position: relative;
}

.plate-feature .left {
  padding: clamp(28px, 3vw, 48px);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  background: var(--paper-2);
}

.plate-feature .right {
  padding: clamp(28px, 3vw, 48px);
}

.plate-feature .seal {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 12px;
}

.plate-feature .seal::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}

.plate-feature .figure-num {
  font-family: var(--serif-num);
  font-size: clamp(72px, 9vw, 128px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.plate-feature .figure-num .unit {
  font-size: 0.32em;
  color: var(--ink-2);
  margin-left: 6px;
  letter-spacing: 0;
}

.plate-feature h3.head {
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  font-weight: 400;
  max-width: 24ch;
}

.plate-feature h3.head em {
  color: var(--accent);
}

.plate-feature p.body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}

.plate-feature .stat-row {
  display: flex;
  gap: 24px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-2);
}

.plate-feature .stat-row .up {
  color: var(--good);
}

@media (max-width: 860px) {
  .plate-feature {
    grid-template-columns: 1fr;
  }

  .plate-feature .left {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
}

/* Referrals list (compact two-column) */
.referrals {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 48px;
  margin-top: 24px;
}

.referrals .item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 13px;
}

.referrals .item .src {
  color: var(--ink);
}

.referrals .item .src .dom {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
}

.referrals .item .v {
  font-family: var(--mono);
  color: var(--ink);
}

.referrals .item .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.referrals .item .d.up {
  color: var(--good);
}

.referrals .item .d.down {
  color: var(--bad);
}

@media (max-width: 720px) {
  .referrals {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* Stacked share-of-search bar */
.share-bar {
  display: block;
  width: 100%;
  height: 56px;
  background: var(--paper-3);
  position: relative;
  margin: 16px 0 14px;
  border: 1px solid var(--ink);
}

.share-bar .seg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.share-bar .seg.branded {
  left: 0;
  width: 55.6%;
  background: var(--accent);
  color: var(--paper);
}

.share-bar .seg.generic {
  right: 0;
  width: 44.4%;
  background: transparent;
  color: var(--ink-2);
  justify-content: flex-end;
}

.share-bar .seg .pct {
  font-family: var(--serif-num);
  font-size: 22px;
  letter-spacing: -0.01em;
  margin-right: 10px;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

.share-bar .seg.generic .pct {
  color: var(--ink);
}

/* Top posts plate (6-up compact) */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin: 32px 0;
}

.posts-grid .post {
  background: var(--paper);
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: auto 1fr auto;
  column-gap: 18px;
  padding: 18px 20px 16px;
  align-items: start;
}

.posts-grid .post .img {
  grid-row: 1 / 4;
  aspect-ratio: 4/5;
  width: 100%;
  border: 0;
  margin: 0;
}

.posts-grid .post .img .caption {
  display: none;
}

.posts-grid .post .meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
}

.posts-grid .post .meta-bar .rate {
  font-family: var(--serif-num);
  font-size: 26px;
  letter-spacing: -0.04em;
  color: var(--accent);
  text-transform: none;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  line-height: 0.9;
}

.posts-grid .post .desc {
  padding: 8px 0 0;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.3;
  color: var(--ink);
  font-style: italic;
  align-self: start;
}

.posts-grid .post .desc .date {
  display: block;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-style: normal;
  margin-top: 6px;
}

.posts-grid .post .breakdown {
  border-top: 1px solid var(--rule);
  padding: 8px 0 0;
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
  align-self: end;
}

.posts-grid .post .breakdown .lab {
  display: block;
  font-family: var(--sans);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 1px;
}

.posts-grid .post .breakdown .v {
  font-family: var(--serif-num);
  font-size: 16px;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

@media (max-width: 1100px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .posts-grid {
    grid-template-columns: 1fr;
  }

  .posts-grid .post {
    grid-template-columns: 110px 1fr;
  }
}

/* Press archive table (editorial) */
.press-table {
  margin-top: 24px;
  border-top: 1px solid var(--ink);
}

.press-table .row {
  display: grid;
  grid-template-columns: 22ch 1fr 12ch 8ch;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.press-table .row .pub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.press-table .row .pub .dom {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0;
  text-transform: none;
  margin-top: 4px;
}

.press-table .row .head {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.35;
  color: var(--ink);
}

.press-table .row .date,
.press-table .row .da {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
}

.press-table .row.featured {
  background: var(--paper-2);
  margin: 0 -16px;
  padding: 24px 16px;
  border: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.press-table .row.featured .pub {
  color: var(--accent);
  font-weight: 600;
}

@media (max-width: 720px) {
  .press-table .row {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .press-table .row .date,
  .press-table .row .da {
    text-align: left;
  }
}

/* Editorial briefs (Ch. 6 — The Brief Ahead) */
.briefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
  margin-top: 24px;
}

.briefs .brief {
  background: var(--paper);
  padding: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 16px;
}

.briefs .brief .ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.briefs .brief .ribbon .timing {
  border: 1px solid var(--ink);
  padding: 4px 10px;
  color: var(--ink);
}

.briefs .brief .ribbon .timing.now {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.briefs .brief .ribbon .timing.qtr {
  background: var(--paper);
  border-color: var(--ink);
  color: var(--ink);
}

.briefs .brief .ribbon .timing.ongoing {
  border-color: var(--ink-3);
  color: var(--ink-3);
}

.briefs .brief h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 24ch;
}

.briefs .brief h3 em {
  color: var(--accent);
}

.briefs .brief .body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 50ch;
  font-weight: 400;
}

.briefs .brief .data-line {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  letter-spacing: 0.04em;
}

.briefs .brief .data-line b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 860px) {
  .briefs {
    grid-template-columns: 1fr;
  }
}

/* Verdict — closing essay */
.verdict {
  padding: clamp(80px, 9vw, 140px) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.verdict .verdict-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.verdict .verdict-kicker::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.verdict h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
  max-width: 18ch;
}

.verdict h2 em {
  color: var(--accent);
}

.verdict .essay {
  font-family: var(--serif);
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.55;
  color: var(--ink);
  max-width: 38ch;
  margin: 0;
}

.verdict .essay p {
  margin: 0 0 1em;
}

.verdict .essay p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 4.6em;
  float: left;
  line-height: 0.9;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

.verdict .signoff {
  margin-top: 48px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.verdict .verdict-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

@media (max-width: 860px) {
  .verdict .verdict-grid {
    grid-template-columns: 1fr;
  }
}

/* Option B — full-width headline, two-column prose below */
.verdict-b {
  background: var(--paper);
  border-radius: 16px;
  padding: clamp(28px, 3.5vw, 48px) clamp(32px, 5vw, 64px);
}

.verdict-b .verdict-b-header {
  border-bottom: 1px solid var(--rule);
  padding-bottom: clamp(20px, 2.5vw, 32px);
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.verdict-b .verdict-kicker::after {
  flex: 1;
}

.verdict-b h2 {
  max-width: none;
  font-size: clamp(24px, 2.4vw, 36px);
  margin: 10px 0 0;
  line-height: 1.15;
  white-space: nowrap;
}

.verdict-b-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.verdict-b .essay-col {
  font-family: var(--serif);
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--ink);
  max-width: none;
  margin: 0;
}

.verdict-b .essay-col p {
  margin: 0 0 0.9em;
}

.verdict-b .essay-col:first-child p:first-of-type::first-letter {
  font-family: var(--serif);
  font-size: 4.2em;
  float: left;
  line-height: 0.9;
  padding: 0.06em 0.12em 0 0;
  color: var(--accent);
  font-style: italic;
  font-weight: 500;
}

/* Suppress drop cap on continuation column — must beat .verdict-b .essay-col:first-child and .verdict .essay rules */
.verdict-b .essay-col--cont p::first-letter,
.verdict-b .essay-col--cont p:first-of-type::first-letter,
.verdict-b .essay-col--cont p:first-child::first-letter,
.verdict .essay-col--cont p::first-letter,
.verdict .essay-col--cont p:first-of-type::first-letter,
.verdict .essay-col--cont p:first-child::first-letter {
  font-family: inherit !important;
  font-size: 1em !important;
  float: none !important;
  line-height: inherit !important;
  padding: 0 !important;
  color: inherit !important;
  font-style: inherit !important;
  font-weight: inherit !important;
  margin: 0 !important;
  display: inline !important;
}

@media (max-width: 720px) {
  .verdict-b-body {
    grid-template-columns: 1fr;
  }
}

/* Inline mini-callouts inside chapters */
.observation {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--ink-3);
  padding: 6px 0 6px 20px;
  margin: 24px 0;
  max-width: 56ch;
}

.observation .obs-tag {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}

/* IG KPI strip — horizontal 5-tile under engagement chart */
.ig-kpi-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.ig-kpi-strip>* {
  padding: 22px 20px;
  border-right: 1px solid var(--rule);
}

.ig-kpi-strip>*:last-child {
  border-right: 0;
}

/* Tiered variant — PRIMARY (3) above, CONTEXTUAL (2) below at smaller weight */
.ig-kpi-strip--clustered {
  display: block;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  grid-template-columns: none;
}

.ig-kpi-strip--clustered>.ig-kpi-cluster {
  display: grid;
  position: relative;
}

.ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(1) {
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--rule);
}

.ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) {
  grid-template-columns: repeat(2, 1fr);
  /* offset to the right so contextual tier is visually subordinate */
  width: 66%;
  margin-left: auto;
  margin-right: 0;
}

.ig-kpi-strip--clustered .ig-kpi-cluster>* {
  padding: 22px 20px;
  border-right: 1px solid var(--rule);
  position: relative;
}

.ig-kpi-strip--clustered .ig-kpi-cluster>*:last-child {
  border-right: 0;
}

/* Contextual tier — smaller numerals, lighter padding */
.ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2)>* {
  padding: 16px 20px;
}

.ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) .kpi-num {
  font-size: clamp(22px, 2.4vw, 32px);
}

.ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) .label {
  color: var(--ink-3);
}

.ig-kpi-strip .label {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 10px;
}

.ig-kpi-strip .kpi-num {
  font-family: var(--serif-num);
  font-size: clamp(32px, 3.4vw, 44px);
  line-height: 1;
  color: var(--ink);
  font-feature-settings: "lnum", "tnum";
  font-weight: 500;
  margin-bottom: 8px;
}

.ig-kpi-strip .kpi-num .unit {
  font-size: 0.45em;
  color: var(--ink-2);
  margin-left: 4px;
  letter-spacing: 0;
}

.ig-kpi-strip .delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-2);
}

.ig-kpi-strip .delta.up {
  color: var(--good);
}

.ig-kpi-strip .delta.down {
  color: var(--bad);
}

@media (max-width: 860px) {
  .ig-kpi-strip {
    grid-template-columns: 1fr 1fr;
  }

  .ig-kpi-strip>* {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) {
    width: 100%;
    margin-left: 0;
  }

  .ig-kpi-strip--clustered>.ig-kpi-cluster {
    grid-template-columns: 1fr 1fr;
  }
}

/* Kinds of attention — ranked bar chart */
.chart-legend {
  display: flex;
  gap: 24px;
  margin-bottom: 18px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.chart-legend .key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.chart-legend .key::before {
  content: "";
  width: 14px;
  height: 8px;
  background: var(--ink-2);
}

.chart-legend .k-accent::before {
  background: var(--accent);
}

.chart-legend .k-muted::before {
  background: var(--ink-2);
}

.chart-legend .k-aside::before {
  background: var(--accent-2);
}

.rank {
  display: grid;
  gap: 6px;
}

.rank .row {
  display: grid;
  grid-template-columns: 14ch 1fr 8ch 8ch;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

.rank .row .name {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

.rank .row .bar {
  height: 14px;
  background: var(--paper-3);
}

.rank .row .bar>i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.rank .row.muted .bar>i {
  background: var(--ink-2);
}

.rank .row .val {
  font-family: var(--serif-num);
  font-size: 22px;
  text-align: right;
  color: var(--ink);
  font-feature-settings: "lnum", "tnum";
}

.rank .row .delta {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
}

.rank .row .delta.up {
  color: var(--good);
}

.rank .row .delta.down {
  color: var(--bad);
}

/* Likes vs comments split bars */
.split-stat {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.split-stat .row {
  display: grid;
  grid-template-columns: 13ch 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: 12px;
}

.split-stat .row .lab {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-size: 11px;
}

.split-stat .row .bar {
  height: 8px;
  background: var(--paper-3);
}

.split-stat .row .bar>i {
  display: block;
  height: 100%;
  background: var(--ink);
}

.split-stat .row.accent .bar>i {
  background: var(--accent);
}

.split-stat .row .v {
  font-family: var(--serif-num);
  font-size: 20px;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
}

.split-stat .row .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.split-stat .row .d.up {
  color: var(--good);
}

.split-stat .row .d.down {
  color: var(--bad);
}

/* Chapter spacer / small heading */
.section-mark {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 56px 0 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-mark::before,
.section-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}


/* =========================================================
   v3 ADDITIONS — Plate feature, press table, briefs, verdict, callouts
   ========================================================= */

/* ---------- Featured Plate (LUXE / ChatGPT style) ---------- */
.plate-feature {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px, 4vw, 72px);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: clamp(28px, 3vw, 40px) 0;
  margin-top: 40px;
  position: relative;
}

.plate-feature::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: clamp(80px, 8vw, 120px);
  height: 8px;
  background: var(--accent);
}

.plate-feature .left {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2vw, 32px);
  padding-right: clamp(16px, 2vw, 32px);
  border-right: 1px solid var(--rule);
}

.plate-feature .seal {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}

.plate-feature .figure-num {
  /* Match the .kpi .num style — Collier 500 / Georgia fallback, lining/tabular numerals */
  font-family: var(--serif-num);
  font-size: clamp(48px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum", "tnum";
  display: block;
}

.plate-feature .figure-num .unit {
  font-family: var(--serif-num);
  font-size: 0.4em;
  color: var(--ink-2);
  letter-spacing: 0;
  margin-left: 8px;
  font-style: italic;
  font-weight: 400;
  vertical-align: baseline;
}

.plate-feature .head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
}

.plate-feature .right .head {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 22ch;
}

.plate-feature .right .head em {
  color: var(--accent);
}

.plate-feature .body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}

.plate-feature .stat-row {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-top: auto;
}

@media (max-width: 860px) {
  .plate-feature {
    grid-template-columns: 1fr;
  }

  .plate-feature .left {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding-right: 0;
    padding-bottom: 24px;
  }
}

/* Variant for ChatGPT referral plate (sand accent) */
.plate-feature.signal {
  border-top-color: var(--ink);
}

.plate-feature.signal::before {
  background: var(--accent-2);
}

.plate-feature.signal .seal {
  color: var(--ink-2);
}

.plate-feature.signal .figure-num {
  color: var(--ink);
}

.plate-feature.signal .right .head em {
  color: var(--accent);
}

/* ---------- Press archive table ---------- */
.press-table {
  border-top: 1px solid var(--ink);
  margin-top: 14px;
}

.press-table .row {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 4.5fr) 7ch 6ch;
  gap: clamp(16px, 2vw, 32px);
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.press-table .row.featured {
  background: linear-gradient(to right, oklch(from var(--accent) l c h / 0.06), transparent 60%);
  padding-left: 12px;
  margin-left: -12px;
  border-bottom-color: var(--ink);
}

.press-table .pub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}

.press-table .pub .dom {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 2px;
}

.press-table .head {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink);
}

.press-table .row.featured .head {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}

.press-table .date,
.press-table .da {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  text-align: right;
  white-space: nowrap;
}

.press-table .row.featured .date,
.press-table .row.featured .da {
  color: var(--ink);
}

@media (max-width: 720px) {
  .press-table .row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .press-table .date,
  .press-table .da {
    text-align: left;
  }
}

/* ---------- Briefs (Chapter 06) ---------- */
.briefs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--rule);
}

.brief {
  padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 40px) clamp(32px, 3.5vw, 48px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--paper);
}

.brief .ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}

.brief .timing {
  padding: 3px 10px;
  border: 1px solid currentColor;
  font-weight: 600;
  letter-spacing: 0.12em;
}

.brief .timing.now {
  color: var(--accent);
  border-color: var(--accent);
}

.brief .timing.qtr {
  color: var(--ink);
  border-color: var(--ink);
}

.brief .timing.ongoing {
  color: var(--ink-3);
  border-color: var(--ink-3);
}

.brief h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  max-width: 22ch;
}

.brief h3 em {
  color: var(--accent);
}

.brief .body {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  max-width: 56ch;
  font-weight: 400;
}

.brief .data-line {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dotted var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0;
}

.brief .data-line b {
  color: var(--ink);
  font-weight: 500;
}

@media (max-width: 860px) {
  .briefs {
    grid-template-columns: 1fr;
  }
}

/* ---------- The Verdict (closing essay) ---------- */
.verdict {
  padding: clamp(80px, 9vw, 140px) 0 clamp(80px, 8vw, 120px);
  border-top: 2px solid var(--ink);
  background: var(--paper-2);
}

.verdict-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

.verdict-kicker {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 24px;
}

.verdict h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  max-width: 12ch;
}

.verdict h2 em {
  font-style: italic;
  color: var(--accent);
}

.verdict .signoff {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.8;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 18px;
  max-width: 32ch;
}

.verdict .essay p {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 56ch;
}

.verdict .essay p:first-child::first-letter {
  font-family: var(--serif);
  font-size: 4.6em;
  float: left;
  line-height: 0.88;
  padding: 0.06em 0.1em 0 0;
  color: var(--accent);
  font-style: italic;
}

@media (max-width: 860px) {
  .verdict-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- Search-share gauge (Chapter 03) ---------- */
.share-gauge {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 18px 0;
  margin: 24px 0 32px;
}

.share-gauge .bar {
  height: 28px;
  display: flex;
  background: var(--paper-3);
  position: relative;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.share-gauge .bar>.seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 12px;
  color: var(--paper);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
}

.share-gauge .bar>.seg.branded {
  background: var(--accent);
}

.share-gauge .bar>.seg.unbranded {
  background: var(--ink);
  color: var(--paper);
}

.share-gauge .legend {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 10px;
}

/* ---------- Search terms table (Chapter 03) ---------- */
.terms-table {
  border-top: 1px solid var(--ink);
  margin-top: 12px;
}

.terms-table .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7ch 6ch;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
}

.terms-table .term {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
}

.terms-table .row.misspell .term {
  color: var(--ink-2);
}

.terms-table .row.misspell .term::after {
  content: " · noted";
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: 6px;
}

.terms-table .v {
  font-family: var(--mono);
  text-align: right;
  color: var(--ink);
}

.terms-table .d {
  font-family: var(--mono);
  text-align: right;
  font-size: 11px;
  color: var(--good);
}

/* ---------- Top 3 Posts plate (Chapter 04) ---------- */
.posts-plate {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
  margin-top: 32px;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.post-card .img {
  aspect-ratio: 4/5;
  margin: 0;
}

.post-card .meta-line {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}

.post-card .rate {
  font-family: var(--serif-num);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}

.post-card .desc {
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.35;
  margin: 0;
  color: var(--ink);
  font-style: italic;
  max-width: 26ch;
}

.post-card .breakdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.post-card .breakdown .b {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 10px 8px;
  text-align: center;
}

.post-card .breakdown .b .l {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}

.post-card .breakdown .b .v {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink);
}

@media (max-width: 860px) {
  .posts-plate {
    grid-template-columns: 1fr;
  }
}

/* ---------- Referral callout strip (Chapter 01) ---------- */
.referrals-strip {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 24px 0;
  margin-top: 32px;
}

.referrals-strip .row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 7ch 7ch;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px dotted var(--rule);
  align-items: baseline;
  font-family: var(--sans);
  font-size: 13px;
}

.referrals-strip .row:last-child {
  border-bottom: 0;
}

.referrals-strip .row .src {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: var(--ink);
}

.referrals-strip .row .src .dom {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  color: var(--ink-3);
  display: block;
  margin-top: 2px;
}

.referrals-strip .row .note-cell {
  font-family: var(--sans);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}

.referrals-strip .row .v {
  font-family: var(--mono);
  text-align: right;
  color: var(--ink);
}

.referrals-strip .row .d {
  font-family: var(--mono);
  font-size: 11px;
  text-align: right;
  color: var(--good);
}

.referrals-strip .row .d.flat {
  color: var(--ink-3);
}

/* ---------- Contextual metric tag (IG reach/impressions) ---------- */
.contextual-mark {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  margin-left: 10px;
  vertical-align: middle;
  display: inline-block;
}


/* ============================================================
   MOTION — entry reveals + hover micro-interactions
   ============================================================ */

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .reveal,
  .reveal-stagger>* {
    opacity: 1 !important;
    transform: none !important;
  }

  .rank .row .bar>i,
  .draw-bar {
    width: var(--final-w, 100%) !important;
  }

  svg .draw-line {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* Default state — invisible & nudged down 8px */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 700ms cubic-bezier(.22, .61, .36, 1), transform 700ms cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-stagger>* {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 600ms cubic-bezier(.22, .61, .36, 1), transform 600ms cubic-bezier(.22, .61, .36, 1);
}

.reveal-stagger.in>*:nth-child(1) {
  transition-delay: 0ms;
}

.reveal-stagger.in>*:nth-child(2) {
  transition-delay: 80ms;
}

.reveal-stagger.in>*:nth-child(3) {
  transition-delay: 160ms;
}

.reveal-stagger.in>*:nth-child(4) {
  transition-delay: 240ms;
}

.reveal-stagger.in>*:nth-child(5) {
  transition-delay: 320ms;
}

.reveal-stagger.in>*:nth-child(6) {
  transition-delay: 400ms;
}

.reveal-stagger.in>* {
  opacity: 1;
  transform: translateY(0);
}

/* Bar charts — animate width from 0 to final on reveal */
.rank .row .bar>i {
  transition: width 800ms cubic-bezier(.22, .61, .36, 1);
}

.rank:not(.in) .row .bar>i {
  width: 0 !important;
}

/* SVG line draw-in */
svg .draw-line {
  stroke-dasharray: 2000;
  stroke-dashoffset: 2000;
  transition: stroke-dashoffset 1100ms cubic-bezier(.22, .61, .36, 1);
}

.in svg .draw-line {
  stroke-dashoffset: 0;
}

/* ============================================================
   HOVER MICRO-INTERACTIONS
   ============================================================ */

/* Rail nav — ochre underline grows from 0 */
.rail a {
  position: relative;
  transition: color 180ms ease;
}

.rail a::after {
  content: "";
  position: absolute;
  left: 0;
  right: auto;
  bottom: -2px;
  height: 1px;
  width: 0;
  background: var(--accent);
  transition: width 240ms cubic-bezier(.22, .61, .36, 1);
}

.rail a:hover::after,
.rail a.active::after {
  width: 100%;
}

.rail a:hover {
  color: var(--accent);
}

/* KPI tiles — quiet ochre rule on hover */
.cover .hero-strip>*,
.ig-kpi-strip>*,
.kpi {
  position: relative;
  transition: background 200ms ease;
}

.cover .hero-strip>*::after,
.ig-kpi-strip>*::after,
.kpi::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 280ms cubic-bezier(.22, .61, .36, 1);
}

.cover .hero-strip>*:hover::after,
.ig-kpi-strip>*:hover::after,
.kpi:hover::after {
  transform: scaleX(1);
}

/* Table rows — paper tint on hover */
.rank .row,
.split-stat .row {
  transition: background 200ms ease;
}

.rank .row:hover,
.split-stat .row:hover {
  background: var(--paper-2);
}

/* Pull quotes / featured plates — gentle accent brighten on hover */
.plate-feature {
  transition: background 280ms ease;
}

/* =========================================================
   Collier type system — shared across Brand Index reports & landing
   Kit ships only weight 400 ("Light" naming) and 500 ("Book" naming),
   each w/ italic. Display = 400, Numerals = 500 (tightened + bumped 10%).
   ========================================================= */

:root {
  --serif: 'collier', Georgia, serif;
  --serif-num: 'collier', Georgia, serif;
}

/* Display / headline serif — Collier 400 */
.display,
.cover h1.display,
.chapter-head h2,
.pull,
.verdict h2,
.plate-feature h3.head,
.briefs .brief h3,
.posts-grid .post .desc,
.press-table .row .head,
.observation,
.verdict .essay p,
.feature-grid .item h3,
.feature-spread .spread-head h2,
.runup .runup-head h2,
.sample .sample-head h2,
.stages .stage h3,
.landing-foot .tagline,
.sources-card .head .title {
  font-family: 'collier', Georgia, serif;
  font-weight: 400;
  font-style: normal;
}

/* Numerals — Collier 500, tightened track, +10% size */
.plate-feature .figure-num,
.kpi .num,
.cover .hero-strip .kpi-num,
.smults .cell .n,
.chapter-head .numeral,
.actions .idx,
.posts-grid .post .meta-bar .rate,
.posts-grid .post .breakdown .v,
.rank .row .val,
.split-stat .row .v,
.sample-strip .num,
.stages .stage .marker .numeral,
.feature-grid .item .num,
.sources-card .source .num {
  font-family: 'collier', Georgia, serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.04em;
}

.kpi .num {
  font-size: clamp(48px, 5.5vw, 79px);
}

.cover .hero-strip .kpi-num {
  font-size: clamp(44px, 5.5vw, 70px);
}

.smults .cell .n {
  font-size: 31px;
}

.chapter-head .numeral {
  font-size: clamp(80px, 10vw, 145px);
}

.plate-feature .figure-num {
  font-size: clamp(53px, 5.5vw, 79px);
}

.posts-grid .post .meta-bar .rate {
  font-size: 31px;
}

.posts-grid .post .breakdown .v {
  font-size: 20px;
}

.rank .row .val {
  font-size: 24px;
}

.split-stat .row .v {
  font-size: 22px;
}

.sample-strip .num {
  font-size: clamp(35px, 4.4vw, 53px);
}

.stages .stage .marker .numeral {
  font-size: clamp(62px, 6.6vw, 92px);
}

.feature-grid .item .num {
  font-size: 31px;
}

.sources-card .source .num {
  font-size: 24px;
}

/* Italic accents stay italic (Collier ships italic at 400 + 500) */
.cover h1.display em,
.chapter-head h2 em,
.verdict h2 em,
.plate-feature h3.head em,
.briefs .brief h3 em,
.feature-grid .item h3 em,
.feature-spread .spread-head h2 em,
.runup .runup-head h2 em,
.sample .sample-head h2 em,
.stages .stage h3 em,
.sources-card .head .title em,
em,
.italic,
.pull {
  font-style: italic;
}

/* Optical track tightening for big display lines at the lighter weight */
.cover h1.display,
.chapter-head h2,
.verdict h2,
.feature-spread .spread-head h2,
.runup .runup-head h2,
.sample .sample-head h2 {
  letter-spacing: -0.02em;
}

/* =========================================================
   v6 — Tonal Layers (borderless)
   Norea-inspired three-tone cream system. The lift alone
   separates clusters from page — no borders, no rules between
   tiles. Soft contrast only.
   ========================================================= */

:root {
  /* Slightly more lift than the first pass, since we no longer
     have a border to help define edges. Still firmly in cream. */
  --paper-l1: #EAE0D2;
  /* cluster containers — warm tan */
  --paper-l2: #ECE4D6;
  /* inner data tiles — warm tan, matches paper-2 */
  --rule-l: oklch(0.88 0.010 78);
  /* very soft hairline, used sparingly */
}

[data-theme="dark"] {
  --paper-l1: oklch(0.225 0.014 70);
  --paper-l2: oklch(0.245 0.014 70);
  --rule-l: oklch(0.42 0.015 70);
}

/* Generous radius across the whole system — Norea's clusters are
   noticeably soft-cornered. Editorial-soft, not SaaS-soft. */
.v6-tonal {
  --r-soft: 14px;
}

/* ---------- 1. Cover hero KPI strip ---------- */
/* Each tile floats on the page at l2 with generous gaps. */
.v6-tonal .cover .hero-strip {
  border-top: 0;
  border-bottom: 0;
  background: transparent;
  gap: clamp(16px, 1.6vw, 24px);
}

.v6-tonal .cover .hero-strip>* {
  background: var(--paper-l2);
  padding: 28px 24px;
  border-right: 0;
  border-radius: 12px;
}

/* ---------- 2. IG KPI strip ---------- */
/* No outer container. Each tile floats on the page at l2 with
   generous gaps — same simplification as the Plate II grid.
   Border-less, single-layer lift. */
.v6-tonal .ig-kpi-strip {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0;
  gap: clamp(16px, 1.6vw, 24px);
}

.v6-tonal .ig-kpi-strip>* {
  background: var(--paper-l2);
  padding: 28px 24px;
  border-right: 0;
  border-bottom: 0;
  border-radius: 12px;
  margin: 0;
}

/* Clustered variant — primary tier (3) above, contextual tier (2) below.
   No outer container; each tile floats; the second tier centers below
   the first (was right-offset in base styles). */
.v6-tonal .ig-kpi-strip--clustered {
  background: transparent;
  border-top: 0;
  border-bottom: 0;
  border-radius: 0;
  padding: 0;
  display: block;
  gap: 0;
}

.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster {
  background: transparent;
  border-bottom: 0;
  border-radius: 0;
  gap: clamp(16px, 1.6vw, 24px);
}

/* Tighter spacing between rows */
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(1) {
  margin-bottom: clamp(12px, 1.2vw, 18px);
}

/* Center the second row instead of right-offset, and equalize tile width
   with the primary tier (1/3 each, so 2/3 total + 1 gap) */
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) {
  width: 66%;
  margin-left: auto;
  margin-right: auto;
}

.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster>* {
  background: var(--paper-l2);
  border-right: 0;
  padding: 28px 24px;
  border-radius: 12px;
}

/* Reset border-radii from earlier first/last child rules */
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(1)>*:first-child,
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(1)>*:last-child,
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2)>*:first-child,
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2)>*:last-child {
  border-radius: 12px;
}

/* Equalize tier 2 with tier 1 — same numeral size, same padding, same label color */
.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2)>* {
  padding: 28px 24px;
}

.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) .kpi-num {
  font-size: clamp(32px, 3.4vw, 44px);
}

.v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) .label {
  color: var(--ink-2);
}

/* Kill the ochre underline hover effect on KPI tiles — these are
   read-only data, not interactive. */
.v6-tonal .ig-kpi-strip>*::after,
.v6-tonal .ig-kpi-strip--clustered .ig-kpi-cluster>*::after,
.v6-tonal .cover .hero-strip>*::after {
  display: none;
}

/* ---------- 3. Small multiples ---------- */
/* Each cell floats on the page at l2 with generous gaps —
   matching the IG KPI strip and Plate II treatment. */
.v6-tonal .smults {
  background: transparent;
  border: 0;
  padding: 0;
  gap: clamp(16px, 1.6vw, 24px);
}

.v6-tonal .smults .cell {
  background: var(--paper-2);
  border: 0;
  border-radius: 8px;
  padding: 24px 22px;
}

/* ---------- 4. Press archive table ---------- */
/* Whole table sits on l1 with soft radius, no outer border.
   Featured rows already had a paper-2 lift; nudge to l2.
   Hairline between rows kept very soft. */
.v6-tonal .press-table {
  background: var(--paper-l1);
  border: 0;
  border-radius: var(--r-soft);
  padding: 8px 28px;
  margin-top: 24px;
}

.v6-tonal .press-table .row {
  border-bottom: 1px solid var(--rule-l);
}

.v6-tonal .press-table .row:last-child {
  border-bottom: 0;
}

.v6-tonal .press-table .row.featured {
  background: var(--paper-l2);
  margin: 6px -16px;
  padding: 24px 16px;
  border-top: 0;
  border-bottom: 0;
  border-radius: 10px;
}

/* Bring back a thin accent indicator without a full border */
.v6-tonal .press-table .row.featured .pub::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ---------- 5. Ranked bars ---------- */
.v6-tonal .rank-lift {
  background: var(--paper-l1);
  border: 0;
  border-radius: var(--r-soft);
  padding: clamp(20px, 2.5vw, 32px);
  margin: 8px 0;
}

.v6-tonal .rank-lift .rank .row .bar {
  background: var(--paper-l2);
}

/* Soften the row dividers inside the lifted ranks */
.v6-tonal .rank-lift .rank .row {
  border-bottom: 1px solid var(--rule-l);
}

/* ---------- 6. Split-stat ---------- */
.v6-tonal .split-lift {
  background: var(--paper-l1);
  border: 0;
  border-radius: var(--r-soft);
  padding: clamp(20px, 2.5vw, 28px);
}

.v6-tonal .split-lift .split-stat .row .bar {
  background: var(--paper-l2);
}

/* ---------- 7. Verdict section ---------- */
/* Section background lifts to l1 to frame the whole closing.
   Inside, a single soft panel holds both columns — the headline
   and the essay sit on the same surface. No second lift behind
   the body copy; the essay is meant to read continuous, not as a card. */
.v6-tonal .verdict {
  background: var(--paper-l1);
}

.v6-tonal .verdict .verdict-grid {
  background: var(--paper);
  border-radius: var(--r-soft);
  padding: clamp(36px, 4vw, 64px);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

.v6-tonal .verdict-card {
  background: var(--paper-l2);
  border: 0;
  border-radius: var(--r-soft);
  padding: clamp(28px, 3vw, 44px);
}

/* ---------- 8. Plate II spread ---------- */
.v6-tonal .plate-feature {
  background: var(--paper-l1);
}

/* ---------- 8b. Plate II — Top-six posts grid (the IG cluster) ---------- */
/* Each post tile floats on the page at l2 with generous gaps —
   no outer frame. The expanded breathing room IS the cluster.
*/
.v6-tonal .posts-grid {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  gap: clamp(20px, 2.2vw, 32px);
  margin: 32px 0;
}

.v6-tonal .posts-grid .post {
  background: var(--paper-l2);
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}

/* Image: round its left corners to match the tile, sharp on the right
   where it meets the meta column. Stretch to full tile height — drop
   the fixed aspect ratio so it follows the right column's text height. */
.v6-tonal .posts-grid .post .img {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  aspect-ratio: auto;
  height: 100%;
  align-self: stretch;
}

/* Pad the meta column so it doesn't kiss the image edge */
.v6-tonal .posts-grid .post .meta-bar,
.v6-tonal .posts-grid .post .desc,
.v6-tonal .posts-grid .post .breakdown {
  padding-left: 16px;
  padding-right: 16px;
}

.v6-tonal .posts-grid .post .meta-bar {
  padding-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule-l);
  align-items: center;
}

/* Keep the kicker on one line so it sits cleanly next to the rate */
.v6-tonal .posts-grid .post .meta-bar>span:first-child {
  white-space: nowrap;
}

/* Larger rate now that the label is shorter */
.v6-tonal .posts-grid .post .meta-bar .rate {
  font-size: 32px;
}

.v6-tonal .posts-grid .post .desc {
  padding-top: 12px;
  padding-bottom: 12px;
}

.v6-tonal .posts-grid .post .breakdown {
  padding-bottom: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--rule-l);
}

/* ---------- 9. Section kicker pills ---------- */
/* Norea's pill — soft lift, no visible border, just the tonal step. */
.v6-tonal .kicker-pill {
  display: inline-block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--paper-l2);
  border: 0;
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 500;
}

/* ---------- 10. Hover ---------- */
.v6-tonal .rank .row:hover,
.v6-tonal .split-stat .row:hover {
  background: var(--paper-l2);
}

/* =========================================================
   v7 — Warm Editorial Palette
   Builds on v6 tonal layers. Color used only where it
   ENCODES MEANING — performance bars, deltas, accents.
   No decorative color. No section backgrounds.
   ========================================================= */

.v7-palette {
  /* Page surfaces */
  --paper: #FBFAF7;
  /* ivory — near white, warm */
  --paper-2: #EDE6D8;
  /* warm linen — no pink */
  --paper-3: #F0EBE3;
  /* warm sand — lighter bar tracks */

  /* Type — slightly warmer charcoal */
  --ink: #1D1712;
  --ink-2: #4A3F33;
  --ink-3: #786857;

  /* Encoding colors */
  --accent: #8C5A2A;
  /* warm tobacco-brown — less orange, more brown */
  --accent-2: #C49A6C;
  /* tobacco light — muted warm sand */
  --good: #315C43;
  /* deep moss — performance bars, positive */
  --good-2: #5C8169;
  --caution: #A85E45;
  /* muted clay — caution/decline */
  --bad: #A85E45;
  /* alias used by existing CSS */

  --rule: oklch(0.86 0.010 88);
}

[data-theme="dark"].v7-palette,
.v7-palette[data-theme="dark"] {
  --paper: #1A1612;
  --paper-2: #221C16;
  --paper-3: #2E261E;
  --ink: #F4EFE7;
  --ink-2: #BFB1A0;
  --ink-3: #8A7C6A;
}

/* Tonal layers — bone over parchment */
.v7-palette.v6-tonal {
  --paper-l1: #EDE6D8;
  /* warm linen — cluster containers */
  --paper-l2: #E8DFD0;
  /* warm tan — inner data tiles */
  --rule-l: oklch(0.82 0.014 75);
}

/* plate-feature cards use paper-l1 via v6-tonal — override to paper-2 */
.v7-palette .plate-feature,
.v7-palette.v6-tonal .plate-feature {
  background: var(--paper-2);
}

[data-theme="dark"].v7-palette.v6-tonal {
  --paper-l1: #2A231C;
  --paper-l2: #221C16;
  --rule-l: oklch(0.40 0.015 70);
}

/* =========================================================
   COLOR ENCODING
   The existing styles use:
     .delta.up   → var(--good)   (was muted sage; now moss)
     .delta.down → var(--bad)    (was rust; now clay)
     .row.accent .bar > i → var(--accent)   (was ochre; now tobacco)
     .row.muted  .bar > i → var(--ink-3)
   We're remapping the underlying tokens, so deltas automatically
   inherit the new palette. The bar treatment we change here:
   — accent rows (the main performing entity) get MOSS, not tobacco,
     because they're encoding "performing well." Tobacco is reserved
     for accents/links/eyebrows, NOT data.
   ========================================================= */

/* Performance bars — moss for the primary entity */
.v7-palette .rank .row.accent .bar>i {
  background: var(--good);
}

/* Legend key colors — must match bar colors in v7-palette */
.v7-palette .chart-legend .key.k-accent {
  color: var(--good);
}

.v7-palette .chart-legend .key.k-muted {
  color: var(--ink-2);
}

.v7-palette .chart-legend .key.k-aside {
  color: var(--accent-2);
}

/* Legend swatch ::before colors — must match bar colors in v7-palette */
.v7-palette .chart-legend .k-accent::before {
  background: var(--good);
}

.v7-palette .chart-legend .k-muted::before {
  background: var(--ink-2);
}

.v7-palette .chart-legend .k-aside::before {
  background: var(--accent-2);
}

.v7-palette .split-stat .row.accent .bar>i {
  background: var(--good);
}

/* Caution variant — explicit override class for declining metrics */
.v7-palette .rank .row.caution .bar>i,
.v7-palette .split-stat .row.caution .bar>i {
  background: var(--caution);
}

/* Featured press row — tobacco dot stays tobacco (it's an accent) */
/* (already inherited via --accent remap) */

/* Stacked share bars — when ink + paper-3, leave ink as ink.
   When ink + accent + accent-2 (multi-segment OS chart), accent
   shifts to tobacco automatically via --accent remap. */

/* Cover/hero spark lines — the accent-stroke spark stays tobacco
   (already inherited). Make explicit-good sparks moss. */
.v7-palette .kpi .spark .stroke-good {
  stroke: var(--good);
}

.v7-palette .kpi .spark .stroke-caution {
  stroke: var(--caution);
}

/* Press archive featured-row dot — pure tobacco */
/* (inherited) */

/* Pull-quote / editorial accent rule */
.v7-palette blockquote,
.v7-palette .pullquote {
  border-left-color: var(--accent);
}

/* Section eyebrow links / CTA text */
.v7-palette .cta-link,
.v7-palette a.cta {
  color: var(--accent);
}

/* The acct-link, kicker, eyebrow uppercase already use --accent
   and --ink-3 — they inherit the remap automatically. */

/* =========================================================
   BONE-CARD TREATMENT — interpretation, context, archive
   "Parchment = data and primary editorial.
    Bone = interpretation, context, archive, and feature."
   ========================================================= */

/* Briefs — each brief becomes its own bone card with rounded soft
   corners. Drop the dividing rules between them; the gaps between
   cards define the rhythm. */
.v7-palette .briefs {
  gap: clamp(24px, 2.4vw, 36px);
  border: 0;
  border-top: 0;
  background: transparent;
}

.v7-palette .briefs .brief,
.v7-palette .brief {
  background: var(--paper-l1);
  border: 0;
  border-left: 3px solid transparent;
  border-radius: 14px;
  padding: clamp(32px, 3.2vw, 48px) clamp(28px, 3vw, 40px) clamp(32px, 3.2vw, 48px) calc(clamp(28px, 3vw, 40px) - 3px);
  transition: border-color 0.2s;
}

/* Left-border accent by priority */
.v7-palette .brief:has(.timing.now) {
  border-left-color: var(--accent);
}

.v7-palette .brief:has(.timing.qtr) {
  border-left-color: var(--ink-2);
}

.v7-palette .brief:has(.timing.ongoing) {
  border-left-color: var(--ink-3);
}

/* =========================================================
   Posts grid (Plate II — Top six posts) — drop the dark grout,
   lift each post onto a bone card with rounded corners.
   ========================================================= */
.v7-palette .posts-grid {
  gap: clamp(16px, 1.6vw, 22px);
  background: transparent;
  border: 0;
  padding: 0;
}

.v7-palette .posts-grid .post {
  background: var(--paper-l1);
  border-radius: 14px;
  padding: 16px 18px 16px 16px;
  column-gap: 16px;
}

.v7-palette .posts-grid .post .img {
  border-radius: 8px;
  overflow: hidden;
}

/* =========================================================
   .plate-feature.compact — slimmer "featured signal" form.
   Drops the slab background + heavy border. Keeps the
   left/right grid (number anchor + headline+body), but
   reads as an inline editorial moment rather than a
   full-card callout. Anchored by a tobacco rule on top.
   ========================================================= */
.v7-palette .plate-feature.compact {
  background: transparent;
  border: 0;
  border-top: 2px solid var(--accent);
  padding: clamp(20px, 2vw, 28px) 0 clamp(16px, 1.6vw, 22px);
  grid-template-columns: 5fr 7fr;
  column-gap: clamp(28px, 3vw, 48px);
}

.v7-palette .plate-feature.compact::before {
  display: none;
}

.v7-palette .plate-feature.compact .left {
  background: transparent;
  border: 0;
  padding: 0;
  gap: 8px;
}

.v7-palette .plate-feature.compact .right {
  padding: 0;
}

.v7-palette .plate-feature.compact .seal {
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--accent);
  margin: 0;
}

.v7-palette .plate-feature.compact .figure-num {
  font-size: clamp(48px, 5vw, 68px);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 4px 0 0;
}

.v7-palette .plate-feature.compact .figure-num .unit {
  font-size: 0.32em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-2);
  margin-left: 0.4em;
  vertical-align: 0.5em;
}

.v7-palette .plate-feature.compact .stat-row {
  display: flex;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

.v7-palette .plate-feature.compact .right .head {
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  margin: 0 0 10px;
  max-width: 32ch;
}

.v7-palette .plate-feature.compact .body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
  max-width: 60ch;
}

/* Active editorial referrers list — three columns: source,
   sessions, period-over-period delta. Domain meta removed
   (publication name alone, matching the source data). */
.v7-palette .referrals .item {
  grid-template-columns: 1fr auto auto;
  column-gap: 14px;
  padding: 10px 0;
}

.v7-palette .referrals .item .src .dom {
  display: none;
}

.v7-palette .referrals .item .v {
  font-family: var(--serif);
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.v7-palette .referrals .item .d {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  min-width: 6ch;
  text-align: right;
}

.v7-palette .referrals .item .d.up {
  color: var(--good);
}

/* Active editorial referrers (Fig 4.1 / Ch 4) — three columns:
   publication, sessions, delta. Reuses .press-table chrome but
   the labels now mean source / volume / growth. */
.v7-palette .press-table .row {
  grid-template-columns: 1fr 8ch 8ch;
}

.v7-palette .press-table .row .da.up {
  color: var(--good);
}

/* =========================================================
   .kpi-note — explainer copy under a KPI tile.
   Plain-language reading of what the number means.
   Sits below the .sub delta line.
   ========================================================= */
.v7-palette .kpi .kpi-note {
  font-family: var(--serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 14px 0 0;
  max-width: 32ch;
  font-style: normal;
}

@media (max-width: 860px) {
  .v7-palette .plate-feature.compact {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }

  .v7-palette .plate-feature.compact .left {
    border: 0;
    padding-bottom: 0;
  }
}

/* =========================================================
   Headline accent — drop burnt-orange from italicized
   emphasis in display headings; keep italic styling but let
   the headline read as a single ink-tone object.
   The cover h1 keeps its accent — that's the brand moment.
   Italic body copy and inline em inside paragraphs are not
   affected — only inner-page headline em.
   ========================================================= */
.v7-palette .chapter-head h2 em,
.v7-palette .plate-feature h3.head em,
.v7-palette .plate-feature .right .head em,
.v7-palette .plate-feature.signal .right .head em,
.v7-palette .briefs .brief h3 em,
.v7-palette .brief h3 em,
.v7-palette .verdict h2 em {
  color: inherit;
}

.v7-palette .brief .ribbon {
  border-bottom: 1px solid var(--rule-l);
  padding-bottom: 14px;
  margin-bottom: 4px;
  align-items: center;
}

.v7-palette .brief .ribbon>span:first-child {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-3);
}

/* Brief timing pills — refined */
.v7-palette .brief .timing {
  font-size: 9px;
  letter-spacing: .14em;
  padding: 4px 10px;
  border-radius: 20px;
  border-width: 1px;
  border-style: solid;
  font-weight: 500;
}

.v7-palette .brief .timing.now {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--paper);
}

.v7-palette .brief .timing.qtr {
  background: transparent;
  border-color: var(--ink-2);
  color: var(--ink-2);
}

.v7-palette .brief .timing.ongoing {
  background: transparent;
  border-color: var(--ink-3);
  color: var(--ink-3);
}

/* Verdict card — bone background, contrast against the parchment
   page. Already an interpretive surface. */
.v7-palette .verdict-card {
  background: var(--paper-l1);
}

/* "Primary read" inline card — opt-in component for chapter
   sidebars / commentary callouts. */
.v7-palette .primary-read {
  background: var(--paper-l1);
  border-radius: 14px;
  padding: clamp(24px, 2.5vw, 32px) clamp(24px, 2.5vw, 32px);
}

.v7-palette .primary-read .pr-kicker {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 500;
  margin: 0 0 14px;
}

.v7-palette .primary-read .pr-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
  max-width: 24ch;
}

.v7-palette .primary-read .pr-body {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* =========================================================
   .kpi-cards — apply to a .col-N grid of .kpi tiles to lift
   each tile onto its own bone card (rounded, padded). Each
   metric reads as its own object instead of a continuous strip.
   Drops the editorial rule-top divider — the card edge replaces it.
   ========================================================= */
.v7-palette .kpi-cards {
  gap: clamp(14px, 1.4vw, 22px);
}

.v7-palette .kpi-cards .kpi {
  background: var(--paper-l1);
  border-top: 0;
  border-radius: 14px;
  padding: clamp(22px, 2.2vw, 28px) clamp(22px, 2.2vw, 28px) clamp(18px, 2vw, 22px);
}

/* Cover hero KPIs — larger, warmer, more architectural */
.v7-palette .cover .hero-kpis.kpi-cards {
  gap: clamp(16px, 1.8vw, 28px);
}

.v7-palette .cover .hero-kpis.kpi-cards .kpi {
  background: #F0EBE3;
  /* light warm sand — between page and section cards */
  border: none;
  border-radius: 16px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 36px) clamp(24px, 2.5vw, 36px);
}

.v7-palette .cover .hero-kpis.kpi-cards .kpi .num {
  font-size: clamp(52px, 6.5vw, 88px);
}

.v7-palette .cover .hero-kpis.kpi-cards .kpi .label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 14px;
}

/* Sparkline inside a kpi-card — keep it bottom-anchored so all
   cards align consistently regardless of label/sub line count. */
.v7-palette .kpi-cards .kpi {
  display: flex;
  flex-direction: column;
}

.v7-palette .kpi-cards .kpi .spark {
  margin-top: auto;
}

/* =========================================================
   .data-card — bone slab behind a data cluster.
   Use on a wrapper element (typically a .col-4 KPI row, a
   data table, or a small-multiples grid) to lift the cluster
   onto a bone surface with rounded corners.
   ========================================================= */

.v7-palette .data-card {
  background: var(--paper-l1);
  border-radius: 14px;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3vw, 40px);
}

/* When .data-card wraps a KPI grid, kill the rule-tops on the
   inner KPIs — the card is the container now, not the rules. */
.v7-palette .data-card .kpi {
  border-top: 0;
  padding-top: 0;
}

/* And restore vertical separation between the KPI tiles via
   internal padding instead. */
.v7-palette .data-card.col-4 {
  gap: clamp(24px, 2.5vw, 40px);
}

/* =========================================================
   Press chapter — two-card grid (Ch 4)
   Left: coverage this period vs prior  ·  Right: press
   sources & referral traffic. Bone surface with rounded
   corners, mirroring the dashboard data-card pattern.
   ========================================================= */

.v7-palette .press-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  margin-top: 32px;
}

@media (max-width: 900px) {
  .v7-palette .press-grid {
    grid-template-columns: 1fr;
  }
}

.v7-palette .press-card {
  background: var(--paper-l1);
  border-radius: 14px;
  padding: clamp(24px, 2.4vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.v7-palette .press-card .card-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Big stat row — left card */
.v7-palette .press-card .big-stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.v7-palette .press-card .big-num {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 56px;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.v7-palette .press-card .big-sub {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink-2);
}

/* Bar rows — left card */
.v7-palette .press-card .bar-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.v7-palette .press-card .bar-row {
  display: grid;
  grid-template-columns: 9ch 1fr 3ch;
  gap: 12px;
  align-items: center;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-2);
}

.v7-palette .press-card .bar-track {
  height: 6px;
  background: oklch(from var(--ink) l c h / 0.06);
  border-radius: 999px;
  overflow: hidden;
}

.v7-palette .press-card .bar-fill {
  height: 100%;
  background: var(--good);
  border-radius: 999px;
}

.v7-palette .press-card .bar-val {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Source list — right card */
.v7-palette .press-card .src-list {
  display: flex;
  flex-direction: column;
}

.v7-palette .press-card .src-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  column-gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid oklch(from var(--ink) l c h / 0.08);
}

.v7-palette .press-card .src-row:last-child {
  border-bottom: 0;
}

.v7-palette .press-card .src-name {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
}

.v7-palette .press-card .src-name .kind {
  color: var(--ink-3);
  font-size: 12px;
}

.v7-palette .press-card .src-val {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}

.v7-palette .press-card .src-delta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  min-width: 6ch;
  text-align: right;
}

.v7-palette .press-card .src-delta.up {
  color: var(--good);
}

.v7-palette .press-card .src-delta.down {
  color: var(--caution);
}

/* Card callout — small framed observation at the bottom of
   each card. Variant colors encode tone: amber = caution /
   incomplete picture, moss = positive signal worth investing in. */
.v7-palette .press-card .card-callout {
  border-left: 2px solid var(--rule);
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  border-radius: 0 8px 8px 0;
  background: oklch(from var(--ink) l c h / 0.025);
  margin-top: auto;
}

.v7-palette .press-card .card-callout.amber {
  border-left-color: var(--accent);
  background: oklch(from var(--accent) l c h / 0.06);
  color: var(--ink);
}

.v7-palette .press-card .card-callout.moss {
  border-left-color: var(--good);
  background: oklch(from var(--good) l c h / 0.07);
  color: var(--ink);
}

.v7-palette .press-card .card-callout strong {
  font-weight: 600;
  color: var(--ink);
}

.verdict-b-header h2 {
  white-space: normal !important;
  max-width: 100% !important;
}

/* ==========================================================
   MOBILE RESPONSIVENESS — comprehensive pass
   Breakpoints: 640px (phone landscape / small tablet)
                480px (phone portrait)
   ========================================================== */

/* ---- Masthead ---- */
@media (max-width: 640px) {
  .masthead {
    overflow: hidden;
  }

  .masthead .masthead-inner {
    min-height: 64px;
    gap: 0;
    overflow: hidden;
    padding: 0;
  }

  .masthead .brand {
    width: 64px;
    height: 64px;
    min-width: 64px;
    font-size: 9px;
    padding: 0 0 0 0px;
    flex-shrink: 0;
  }

  .masthead .masthead-client {
    display: none !important;
    /* hidden on small screens — redundant with cover kicker */
    visibility: hidden !important;
  }

  .masthead .crumbs {
    gap: 12px;
    font-size: 10px;
    padding-right: 16px;
    flex-shrink: 0;
  }
}

/* ---- Cover ---- */
@media (max-width: 640px) {
  .cover h1.display {
    font-size: clamp(28px, 9vw, 42px);
    max-width: 100%;
  }

  .cover .deck {
    font-size: 16px;
    max-width: 100%;
  }

  .cover .hero-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Cover KPI cards — reduce padding so 2-col fits without overflow */
  .v7-palette .cover .hero-kpis.kpi-cards,
  .cover .hero-kpis {
    gap: 8px !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
  }

  .v7-palette .cover .hero-kpis.kpi-cards .kpi {
    padding: 18px 14px 16px !important;
  }

  .v7-palette .cover .hero-kpis.kpi-cards .kpi .num {
    font-size: clamp(32px, 10vw, 48px) !important;
  }

  .v7-palette .cover .hero-kpis.kpi-cards .kpi .label {
    font-size: 9px !important;
    letter-spacing: 0.08em !important;
    margin-bottom: 8px !important;
  }

  .v7-palette .cover .hero-kpis.kpi-cards .kpi .sub {
    font-size: 10px !important;
  }
}

@media (max-width: 400px) {
  .cover .hero-strip {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Chapter header ---- */
@media (max-width: 640px) {
  .chapter-head .numeral {
    font-size: clamp(40px, 14vw, 64px);
  }

  .chapter-head h2.display {
    font-size: clamp(22px, 7vw, 34px);
  }

  /* Verdict headline — prevent overflow on narrow screens */
  .verdict h2,
  .verdict-b h2,
  .verdict-b-header h2 {
    font-size: clamp(18px, 5.5vw, 26px) !important;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: 100%;
  }

  /* General display headline overflow guard */
  h2.display,
  h1.display {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
}

/* ---- KPI cards (chapter KPI strips) ---- */
@media (max-width: 860px) {
  .ig-kpis.col-4,
  .ig-reach-kpis.col-5 {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {

  .col-4.kpi-cards,
  .col-5.kpi-cards {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 400px) {

  .col-4.kpi-cards,
  .col-5.kpi-cards {
    grid-template-columns: 1fr !important;
  }
}

/* ---- IG KPI clustered strip ---- */
@media (max-width: 640px) {
  .v6-tonal .ig-kpi-strip--clustered>.ig-kpi-cluster:nth-child(2) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .ig-kpi-strip {
    grid-template-columns: 1fr 1fr !important;
  }

  .ig-kpi-strip>* {
    border-right: 0 !important;
    border-bottom: 1px solid var(--rule) !important;
  }
}

/* ---- Rank / geography table ---- */
@media (max-width: 640px) {
  .rank .row {
    grid-template-columns: minmax(8ch, 14ch) minmax(0, 1fr) 6ch;
  }

  .rank .row .delta {
    display: none;
  }
}

/* ---- Posts grid ---- */
@media (max-width: 640px) {
  .posts-grid {
    grid-template-columns: 1fr !important;
  }

  .v6-tonal .posts-grid .post {
    grid-template-columns: 120px 1fr !important;
  }

  .v6-tonal .posts-grid .post .meta-bar .rate {
    font-size: 22px !important;
  }

  .v6-tonal .posts-grid .post .meta-bar>span:first-child {
    white-space: normal !important;
  }
}

@media (max-width: 400px) {
  .v6-tonal .posts-grid .post {
    grid-template-columns: 90px 1fr !important;
  }
}

/* ---- Engagement bar chart (Fig 4.1) ---- */
@media (max-width: 640px) {
  .eng-bar-label {
    font-size: 10px;
  }

  .eng-bar-val {
    font-size: 14px !important;
  }
}

/* ---- Fig 4.3 stat grid ---- */
@media (max-width: 640px) {
  .stat-grid-2x2 {
    grid-template-columns: 1fr 1fr !important;
  }

  .stat-grid-2x2 .stat-num {
    font-size: clamp(28px, 10vw, 44px) !important;
  }
}

/* ---- Action cards (briefs) ---- */
@media (max-width: 640px) {
  .v7-palette .briefs {
    grid-template-columns: 1fr !important;
  }

  .briefs {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Verdict two-column essay ---- */
@media (max-width: 640px) {
  .verdict-b-body {
    grid-template-columns: 1fr !important;
  }

  .verdict .verdict-grid {
    grid-template-columns: 1fr !important;
  }

  .v6-tonal .verdict .verdict-grid {
    padding: clamp(24px, 5vw, 40px);
  }
}

/* ---- Press grid ---- */
@media (max-width: 640px) {
  .v7-palette .press-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Small multiples (device/OS) ---- */
@media (max-width: 640px) {
  .smults {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ---- Plate feature compact (AI signal) ---- */
@media (max-width: 640px) {
  .v7-palette .plate-feature.compact {
    grid-template-columns: 1fr !important;
    row-gap: 12px;
  }
}

/* ---- Referrals list ---- */
@media (max-width: 640px) {
  .referrals {
    grid-template-columns: 1fr !important;
  }

  .v7-palette .referrals .item {
    grid-template-columns: 1fr auto auto;
  }
}

/* ---- Press table rows ---- */
@media (max-width: 640px) {
  .v7-palette .press-table .row {
    grid-template-columns: 1fr auto auto;
  }
}

/* ---- Colophon footer ---- */
@media (max-width: 640px) {
  .colophon-inner {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 0;
  }
}

/* ---- General overflow guard ---- */
@media (max-width: 640px) {
  .wrap {
    padding: 0 16px;
    overflow-x: hidden;
  }

  body {
    overflow-x: hidden;
  }

  /* Masthead client name — hide on mobile (absolute positioned, needs explicit override) */
  .masthead-client {
    display: none !important;
  }

  svg {
    max-width: 100%;
    height: auto;
  }

  /* Prevent any fixed-width element from causing horizontal scroll */
  .fig,
  .fig-inner,
  .fig-body {
    overflow-x: auto;
  }
}

/* ============================================================
   MOBILE HAMBURGER BUTTON
   ============================================================ */
.mob-menu-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.mob-menu-btn span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: opacity 0.2s;
}

@media (max-width: 640px) {
  .mob-menu-btn {
    display: flex;
    position: fixed;
    top: 14px;
    right: 16px;
    z-index: 1000;
    background: var(--paper);
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    width: 40px;
    height: 40px;
  }

  .crumbs {
    display: none !important;
  }

  /* Hide the in-masthead button slot since it's now fixed */
  .masthead-inner .mob-menu-btn {
    /* still rendered in DOM for accessibility but visually the fixed one takes over */
  }
}

/* ============================================================
   MOBILE CHAPTER OVERLAY
   ============================================================ */
.mob-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  color: var(--paper);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.mob-overlay.is-open {
  display: flex;
  opacity: 1;
}

.mob-overlay-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 24px 32px;
}

.mob-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  border-bottom: 1px solid oklch(0.38 0.015 70);
  flex-shrink: 0;
}

/* Dark brand in overlay */
.mob-overlay .brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid oklch(0.38 0.015 70);
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
  text-align: center;
}

.mob-overlay .brand-stack {
  display: block;
}

.mob-overlay .brand-stack span {
  display: block;
  position: relative;
}

.mob-overlay .brand .tm {
  position: absolute;
  top: -0.3em;
  right: -1.6em;
  font-size: 5px;
  letter-spacing: 0.05em;
}

.mob-close-btn {
  background: none;
  border: none;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
  opacity: 0.7;
}

.mob-close-btn:hover {
  opacity: 1;
}

.mob-chapters {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  padding-top: 24px;
  gap: 0;
}

.mob-ch-link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid oklch(0.30 0.012 70);
  text-decoration: none;
  color: var(--paper);
  transition: color 0.15s;
}

.mob-ch-link:hover {
  color: var(--accent);
}

.mob-ch-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: oklch(0.55 0.015 65);
  min-width: 24px;
}

.mob-ch-name {
  font-family: var(--serif);
  font-size: clamp(22px, 6vw, 32px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1;
}

.mob-ch-link--verdict .mob-ch-name {
  font-style: italic;
  color: var(--accent);
}

.mob-overlay-footer {
  display: flex;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid oklch(0.30 0.012 70);
}

.mob-acct-link {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: oklch(0.55 0.015 65);
  text-decoration: none;
}

.mob-acct-link:hover {
  color: var(--paper);
}


/* Wrapper */
.pa-wrap {
  margin-top: 56px;
  max-width: 100%;
}

/* List container */
.pa-list {
  margin-top: 20px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid oklch(from var(--ink) l c h / 0.10);
}

/* Column header row */
.pa-col-header {
  display: grid;
  grid-template-columns: 200px 1fr 80px auto;
  gap: 20px;
  align-items: center;
  padding: 9px 24px;
  border-bottom: 1px solid oklch(from var(--ink) l c h / 0.12);
  background: oklch(from var(--ink) l c h / 0.03);
}

.pa-col-header span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pa-col-header .pa-col-ses {
  text-align: right;
}

.pa-col-header .pa-col-date {
  text-align: right;
}

/* Each row */
.pa-item {
  display: grid;
  grid-template-columns: 200px 1fr 80px auto;
  gap: 20px;
  align-items: center;
  padding: 15px 24px;
  border-bottom: 1px solid oklch(from var(--ink) l c h / 0.07);
  background: var(--paper);
  transition: background 0.15s;
}

.pa-item:last-child {
  border-bottom: 0;
}

.pa-item:not(.pa-featured):hover {
  background: oklch(from var(--ink) l c h / 0.03);
}

/* Featured (most recent / top-tier) row */
.pa-item.pa-featured {
  background: var(--paper-l1, oklch(from var(--paper) calc(l - 0.02) c h));
  padding: 20px 24px;
}

/* Publication column */
.pa-pub-col {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pa-fav {
  width: 16px;
  height: 16px;
  border-radius: 3px;
  flex-shrink: 0;
  opacity: 0.8;
}

.pa-pub-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pa-pub-name {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

.pa-item.pa-featured .pa-pub-name {
  color: var(--accent);
}

.pa-dom {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

/* Headline column */
.pa-head-col {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
  color: var(--ink-2);
  font-style: italic;
}

.pa-item.pa-featured .pa-head-col {
  color: var(--ink);
  font-size: 15px;
}

/* Sessions column */
.pa-sessions-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  cursor: default;
}

.pa-ses-num {
  font-family: var(--serif-num);
  font-size: 15px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
  line-height: 1;
}

.pa-ses-num.pa-ses-null {
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 12px;
}

.pa-ses-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Date column */
.pa-date-col {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.pa-date-pill {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: oklch(from var(--ink) l c h / 0.06);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.pa-item.pa-featured .pa-date-pill {
  color: var(--accent);
  background: oklch(from var(--accent) l c h / 0.10);
}

/* Favicon in src-list rows (right press card) */
.pa-src-row-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pa-src-fav {
  width: 14px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.75;
  flex-shrink: 0;
}

/* ── Responsive ────────────────────────────── */
@media (max-width: 860px) {
  .pa-col-header {
    display: none;
  }

  .pa-item {
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    gap: 10px 12px;
  }

  .pa-pub-col {
    grid-column: 1;
    grid-row: 1;
  }

  .pa-sessions-col {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
  }

  .pa-date-col {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
  }

  .pa-head-col {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 13px;
  }
}

@media (max-width: 520px) {
  .pa-item {
    grid-template-columns: 1fr auto;
    padding: 14px 16px;
  }

  .pa-sessions-col {
    display: none;
  }

  .pa-date-col {
    grid-column: 2;
    grid-row: 1;
  }

  .pa-list {
    border-radius: 10px;
  }
}


.ig-posts-section {
  border-bottom: 1px solid oklch(0.78 0.012 70);
}

.ig-posts-section>.wrap {
  padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 56px);
}

@media (min-width: 721px) and (max-width: 1640px) {
  .ig-posts-section>.wrap {
    padding-left: 72px;
  }
}

@media (min-width: 1641px) {
  .ig-posts-section>.wrap {
    padding-left: 100px;
  }
}

.ig-posts-section>.wrap>.display {
  font-size: clamp(26px, 2.4vw, 36px);
  margin: 0 0 8px;
  font-weight: 400;
  max-width: 36ch;
}

.ig-posts-section>.wrap>.note {
  border: 0;
  padding: 0;
  margin: 0 0 8px;
  max-width: 60ch;
}



/* =========================================================
       Halo search bar — reusable inline filter input
       ========================================================= */
.halo-search-bar {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border: 1px solid var(--ink-3);
  border-radius: 6px;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s;
}

.halo-search-bar::placeholder {
  color: var(--ink-3);
}

.halo-search-bar:focus {
  border-color: var(--accent);
}

@media (max-width: 860px) {
  .figure-holder {
    display: none !important;
  }
}

@media (max-width: 860px) {
  .rank .row .val {
    font-size: 18px;
  }
}

@media (max-width: 860px) {
  .data-card {
    max-width: 100%;
  }
}

@media (max-width: 860px) {
  /* .top-projects .metrics {
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
    }
    .top-projects .m {
        align-items: flex-end;
    } */

  .top-projects li {
    display: block !important;
  }

  .top-projects li .metrics {
    margin-top: 10px;
  }
}

/* Sticky footer */
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#app-content {
  flex: 1;
}

body>footer {
  width: 100%;
}

/* ── Press archive: delete menu ── */
.pa-col-header,
.pa-item {
  grid-template-columns: 200px 1fr 80px auto 28px;
}

@media (max-width: 720px) {
 .pa-col-header,
.pa-item {
  grid-template-columns: none;
} 
}

.pa-menu-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pa-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  color: var(--ink-3);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
  transition: background 120ms ease, color 120ms ease;
  line-height: 1;
}

.pa-menu-btn:hover {
  background: oklch(from var(--ink) l c h / 0.07);
  color: var(--ink);
}

.pa-ctx {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  z-index: 9999;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 4px 16px oklch(from var(--ink) l c h / 0.10);
  min-width: 120px;
  padding: 4px 0;
}

.pa-ctx-del {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--bad);
  padding: 10px 16px;
  text-align: left;
  transition: background 120ms ease;
}

.pa-ctx-del:hover {
  background: oklch(from var(--bad) l c h / 0.07);
}

/* ── Delete article modal ── */

.pa-menu-col.pa-ctx-up .pa-ctx {
  top: auto;
  bottom: calc(100% + 4px);
}

.pa-list {
  overflow: visible;
}

/* KPI card info tooltip */
.kpi-info {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--ink-3);
  cursor: default;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.kpi-info:hover {
  color: var(--ink-2);
}

.kpi-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .04em;
  padding: 7px 10px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  z-index: 200;
  pointer-events: none;
}

.kpi-info:hover .kpi-tooltip {
  display: block;
}

.studio-halo-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: default;
}

.studio-halo-tooltip-text {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .04em;
  padding: 7px 10px;
  width: max-content;
  max-width: 260px;
  white-space: normal;
  z-index: 200;
  pointer-events: none;
}

.studio-halo-tooltip:hover .studio-halo-tooltip-text {
  display: block;
}

.mt-0 {
  margin-top: 0 !important;
}

.mb-0 {
  margin-bottom: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.mb-minus1 {
  margin-bottom: -1px !important;

}

.mb-minus2 {
  margin-bottom: -2px !important;
}

.mb-minus3 {
  margin-bottom: -3px !important;
}