@layer reset, tokens, typography, layout, chart, components;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
  img, svg { display: block; max-width: 100%; }
  h1, h2, h3, p, figure { margin: 0; }
}

/* ---------- design tokens ---------- */
@layer tokens {
  :root {
    /* warm off-white, faint yellow cast */
    --bg:        oklch(0.975 0.008 80);
    --bg-tint:   oklch(0.955 0.012 78);
    --paper:    oklch(0.99  0.005 80);

    /* tinted near-black, never #000 */
    --ink:       oklch(0.20 0.012 60);
    --ink-2:     oklch(0.36 0.012 60);
    --ink-3:     oklch(0.54 0.010 60);
    --ink-4:     oklch(0.72 0.008 60);
    --rule:      oklch(0.86 0.010 70);

    /* the one accent — confident vermilion */
    --accent:    oklch(0.62 0.20 35);
    --accent-deep: oklch(0.52 0.21 33);
    --accent-soft: oklch(0.88 0.06 40);

    /* chart line colors */
    --line-tx:   oklch(0.36 0.020 250);   /* deep slate-blue */
    --line-dfw:  oklch(0.52 0.015 80);    /* warm graphite */
    --line-dal:  var(--accent);           /* THE story */
    --line-d2m:  oklch(0.42 0.18 35);     /* dotted counterfactual */

    --maxw: 1240px;
    --col-body: 62ch;

    --step--1: clamp(0.74rem, 0.70rem + 0.18vw, 0.84rem);
    --step-0:  clamp(0.98rem, 0.94rem + 0.18vw, 1.05rem);   /* body — ~16-17px */
    --step-1:  clamp(1.08rem, 1.00rem + 0.30vw, 1.20rem);
    --step-2:  clamp(1.30rem, 1.15rem + 0.65vw, 1.55rem);
    --step-3:  clamp(1.60rem, 1.35rem + 1.10vw, 2.10rem);
    --step-4:  clamp(2.00rem, 1.60rem + 1.80vw, 2.80rem);
    --step-5:  clamp(2.60rem, 2.00rem + 2.40vw, 3.80rem);   /* headline */
  }
}

/* ---------- typography ---------- */
@layer typography {
  body {
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-optical-sizing: auto;
    font-size: var(--step-0);
    line-height: 1.62;
    color: var(--ink);
    background: var(--bg);
  }

  .headline, .chart-title, .kicker, .chart-eyebrow, .byline,
  .chart-source, .date, .masthead {
    font-family: "Inter Tight", "Inter", system-ui, sans-serif;
    font-feature-settings: "ss01", "ss02", "cv11";
  }

  em, i { font-style: italic; }
  strong, b { font-weight: 600; color: var(--ink); }

  ::selection { background: var(--accent); color: var(--paper); }
}

/* ---------- masthead ---------- */
@layer components {
  .masthead {
    border-bottom: 1px solid var(--rule);
    background: var(--bg);
  }
  .masthead-inner {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 14px clamp(20px, 4vw, 56px);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
  }
  .kicker {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .kicker::before {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    background: var(--accent);
    margin-right: 0.7em;
    transform: translateY(-1px);
  }
  .date {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* ---------- hero layout ---------- */
@layer layout {
  .hero {
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(36px, 6vw, 96px) clamp(20px, 4vw, 56px) clamp(56px, 8vw, 120px);

    display: grid;
    grid-template-columns: minmax(0, 1fr);
    column-gap: clamp(32px, 5vw, 80px);
    row-gap: clamp(36px, 5vw, 72px);
  }

  @media (min-width: 920px) {
    .hero {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    }
    .hero-head { grid-column: 1 / -1; }
    .hero-body { grid-column: 1 / 2; }
    .chart     { grid-column: 1 / -1; }
    .hero-foot { grid-column: 1 / -1; }
  }

  /* HEAD */
  .hero-head {
    position: relative;
    padding-bottom: clamp(20px, 3vw, 36px);
    border-bottom: 1px solid var(--rule);
  }
  .headline {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-size: var(--step-5);
    font-weight: 800;
    line-height: 1.0;
    letter-spacing: -0.035em;
    color: var(--ink);
    margin: 0 0 clamp(14px, 1.8vw, 22px);
    white-space: nowrap;
  }
  .headline-soft {
    font-weight: 400;
    font-style: italic;
    font-family: "Source Serif 4", Georgia, serif;
    letter-spacing: -0.015em;
    color: var(--ink-3);
    padding: 0 0.05em;
  }
  .subhead {
    font-family: "Source Serif 4", Georgia, serif;
    font-size: var(--step-1);
    line-height: 1.32;
    font-weight: 400;
    font-style: italic;
    color: var(--ink-2);
    max-width: 52ch;
    margin-bottom: clamp(18px, 2.5vw, 28px);
  }
  .byline {
    font-size: 0.72rem;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .byline-name { color: var(--ink-2); font-weight: 600; }

  /* BODY */
  .hero-body {
    max-width: var(--col-body);
  }
  .hero-body p {
    margin: 0 0 1.05em;
    hyphens: auto;
  }
  .hero-body p + p {
    text-indent: 1.6em;
  }
  .dropcap, .kicker-para {
    text-indent: 0 !important;
  }
  .dropcap {
    font-size: 1.0em;
  }
  .drop {
    /* Serif drop cap — "I" needs serifs to read as a letter and not a bar.
       Sized for ~3-line cap height. */
    font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight: 600;
    font-size: 3.1em;
    line-height: 0.88;
    float: left;
    padding: 0.05em 0.12em 0 0.02em;
    margin: 0.05em 0.08em -0.05em 0;
    color: var(--accent);
    letter-spacing: -0.02em;
  }
  .kicker-para {
    margin-top: 0 !important;
    font-family: "Source Serif 4", serif;
    font-size: var(--step-1);
    line-height: 1.42;
    color: var(--ink);
  }
  .kicker-para strong {
    font-weight: 500;
    font-style: italic;
    color: var(--accent-deep);
  }

  /* The 1.3M punchline paragraph */
  .punchline {
    font-family: "Source Serif 4", serif;
    font-size: var(--step-2);
    line-height: 1.18;
    font-weight: 500;
    color: var(--ink);
    margin-top: 1.4em !important;
    padding-top: 1.1em;
    border-top: 1px solid var(--rule);
    text-indent: 0 !important;
    letter-spacing: -0.005em;
  }
  .accent-dal {
    color: var(--accent-deep);
    font-style: italic;
    font-weight: 500;
  }

  /* Body block that appears AFTER the chart */
  .hero-body-after {
    grid-column: 1 / 2;
  }
  @media (max-width: 919px) {
    .hero-body-after { grid-column: 1 / -1; }
  }
  .hero-body-after p:first-child {
    text-indent: 0;
  }
  .hero-body-after p + p {
    text-indent: 1.6em;
  }
  .d2m-term {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 0.02em;
    color: var(--accent-deep);
  }
}

/* ---------- chart block ---------- */
@layer chart {
  .chart {
    background: var(--paper);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: clamp(24px, 3.5vw, 44px) 0 clamp(20px, 3vw, 32px);
    margin-top: clamp(8px, 2vw, 20px);
  }
  .chart-head {
    max-width: 72ch;
    padding: 0 clamp(4px, 1vw, 12px) clamp(18px, 2.5vw, 28px);
  }
  .chart-eyebrow {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-3);
    background: var(--bg-tint);
    border: 1px solid var(--rule);
    padding: 3px 9px;
    margin-bottom: 14px;
  }
  .chart-title {
    font-family: "Inter Tight", system-ui, sans-serif;
    font-size: var(--step-3);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--ink);
    margin-bottom: 0;
  }

  .chart-wrap {
    width: 100%;
    overflow: visible;
  }
  .chart-wrap svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
  }

  /* SVG styling */
  .axis-line { stroke: var(--ink); stroke-width: 1.25; fill: none; }
  .grid-line { stroke: var(--rule); stroke-width: 1; fill: none; }
  .grid-line.zero { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 2 3; }

  .tick-label {
    font-family: "Inter Tight", sans-serif;
    font-size: 11.5px;
    fill: var(--ink-3);
    letter-spacing: 0.04em;
  }
  .axis-title {
    font-family: "Inter Tight", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    fill: var(--ink-3);
    font-weight: 600;
  }
  .splitter-label {
    font-family: "Inter Tight", sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    fill: var(--ink-3);
    font-weight: 600;
  }
  .splitter-line {
    stroke: var(--ink-4);
    stroke-width: 1;
    stroke-dasharray: 2 4;
  }

  .line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .line-tx   { stroke: var(--line-tx);  stroke-width: 2.25; }
  .line-dfw  { stroke: var(--line-dfw); stroke-width: 2.25; }
  .line-dal  { stroke: var(--line-dal); stroke-width: 3.25; }
  .line-d2m  { stroke: var(--line-d2m); stroke-width: 2; stroke-dasharray: 1 5; }

  .band-tx   { fill: var(--line-tx);  opacity: 0.10; }

  .endpoint {
    stroke: var(--paper);
    stroke-width: 2;
  }

  .label {
    font-family: "Inter Tight", sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
  }
  .label-tx  { fill: var(--line-tx); }
  .label-dfw { fill: var(--line-dfw); }
  .label-dal { fill: var(--line-dal); }

  .annot-d2m {
    font-family: "Inter Tight", sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    fill: var(--line-d2m);
  }

  .chart-source {
    padding: 14px clamp(4px, 1vw, 12px) 0;
    font-family: "Inter Tight", sans-serif;
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1.6;
    border-top: 1px solid var(--rule);
    margin-top: 12px;
  }
}

/* ---------- mobile refinements ---------- */
@media (max-width: 640px) {
  .headline {
    letter-spacing: -0.025em;
    line-height: 1.04;
    white-space: normal;
    font-size: clamp(2.10rem, 8vw, 2.80rem);
  }
  .drop { font-size: 2.8em; }
  .hero-head { padding-bottom: 20px; }
  .chart { padding-left: 0; padding-right: 0; }
  .chart-head, .chart-source { padding-left: 12px; padding-right: 12px; }
}