/* =========================================================================
   AMC — the shared design system for every page of the site.

   Colour is computed, not chosen by eye. The categorical slots are the
   dataviz reference palette in its validated order (all checks pass in both
   modes, 2026-10-11); three light-mode slots sit under 3:1 on the surface, so
   every chart that uses them ships visible labels and a table view. Text never
   wears a series colour. Sequential is one hue, light to dark; diverging is
   blue against red with a neutral grey midpoint.
   ========================================================================= */
:root {
  --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f1f0ec; --surface-3: #e9e8e2;
  --border: #e1e0d9; --border-strong: #c3c2b7;
  --ink: #0b0b0b; --ink-2: #52514e; --muted: #6b6a65;
  --grid: #e1e0d9; --axis: #c3c2b7;
  --accent: #b4232f; --accent-ink: #ffffff; --accent-soft: #f6e4e5;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #6250d6;
  --deemph: #d9d7cf; --other: #b9b6ad;
  --seq-100: #cde2fb; --seq-200: #9ec5f4; --seq-300: #6da7ec; --seq-400: #3987e5;
  --seq-500: #256abf; --seq-600: #184f95; --seq-700: #0d366b; --seq-0: #ecebe6;
  --div-neg: #d03b3b; --div-pos: #2a78d6; --div-mid: #f0efec;
  --up: #006300; --down: #b4232f;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.05);
  --shadow-lift: 0 2px 4px rgba(0,0,0,.05), 0 14px 40px rgba(0,0,0,.09);
  --radius: 14px; --radius-sm: 12px;
  /* One spacing system for every box: its padding, the gap between boxes in a
     row, and the gap between a box's number, title and text. */
  --pad: 20px; --pad-tight: 16px; --gap: 16px; --gap-tight: 12px; --stack: 10px;
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --read: 680px; --wide: 1080px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242422; --surface-3: #2e2e2b;
    --border: #2c2c2a; --border-strong: #45443f;
    --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --axis: #383835;
    --accent: #e0545e; --accent-ink: #160607; --accent-soft: #2c1517;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9;
    --deemph: #3a3936; --other: #5a5852;
    --seq-100: #0d366b; --seq-200: #104281; --seq-300: #184f95; --seq-400: #1c5cab;
    --seq-500: #2a78d6; --seq-600: #5598e7; --seq-700: #9ec5f4; --seq-0: #222220;
    --div-neg: #e66767; --div-pos: #3987e5; --div-mid: #383835;
    --up: #0ca30c; --down: #e0545e;
    --shadow: none; --shadow-lift: 0 14px 40px rgba(0,0,0,.5); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242422; --surface-3: #2e2e2b;
  --border: #2c2c2a; --border-strong: #45443f;
  --ink: #f0efec; --ink-2: #c3c2b7; --muted: #898781; --grid: #2c2c2a; --axis: #383835;
  --accent: #e0545e; --accent-ink: #160607; --accent-soft: #2c1517;
  --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9;
  --deemph: #3a3936; --other: #5a5852;
  --seq-100: #0d366b; --seq-200: #104281; --seq-300: #184f95; --seq-400: #1c5cab;
  --seq-500: #2a78d6; --seq-600: #5598e7; --seq-700: #9ec5f4; --seq-0: #222220;
  --div-neg: #e66767; --div-pos: #3987e5; --div-mid: #383835;
  --up: #0ca30c; --down: #e0545e;
  --shadow: none; --shadow-lift: 0 14px 40px rgba(0,0,0,.5); color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--page); color: var(--ink); font: 16px/1.6 var(--sans);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--c1); outline-offset: 2px; border-radius: 4px; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
b, strong { font-weight: 650; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.02em; }

/* The navigation lives in nav.css, shared with the pages that keep their own styles. */

/* ---------------------------------------------------------------- buttons & chips */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface);
       color: var(--ink); font: 600 14.5px/1 var(--sans); padding: 11px 16px; border-radius: 11px; cursor: pointer;
       text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.btn:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--page); }
.btn.primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn.ghost { background: transparent; }
.btn svg { width: 16px; height: 16px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
        background: var(--surface-2); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent); }
.kicker { font: 600 12.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0; }
.seg-ctl { display: inline-flex; background: var(--surface-2); border-radius: 11px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg-ctl button { border: 0; background: transparent; color: var(--ink-2); font: 500 13.5px/1 var(--sans);
                  padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.seg-ctl button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.seg-ctl button:hover { color: var(--ink); }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; }
.controls label { font-size: 13.5px; color: var(--ink-2); }
select.sel { font: 500 14px var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--border);
             border-radius: 9px; padding: 8px 30px 8px 11px; max-width: 100%; appearance: none;
             background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
             background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }

/* ---------------------------------------------------------------- home hero */
.hero { padding: 56px 0 24px; }
.hero .kicker { margin-bottom: 18px; }
.hero h1 { font-size: clamp(64px, 13vw, 132px); line-height: .92; font-weight: 800; letter-spacing: -.045em; margin: 0; }
.hero .line { font: 600 clamp(21px, 3.2vw, 30px)/1.22 var(--display); letter-spacing: -.015em; margin: 14px 0 0; max-width: 30ch; }
.hero .note { color: var(--ink-2); margin: 16px 0 0; max-width: 62ch; font-size: 15.5px; }
.hero .note b { color: var(--ink); }
.ribbon { margin: 36px 0 0; }
.ribbon .cap { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-top: 10px; }
.ribbon .cap a { padding-block: 4px; }
/* A thumb is easy to miss on a phone: the track's box is what a finger hits. */
input[type=range] { min-height: 28px; }
.ribbon canvas { display: block; width: 100%; border-radius: 6px; }

/* ---------------------------------------------------------------- sections */
section.block { padding: 56px 0 8px; }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.sec-head h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; margin: 6px 0 0; }
.sec-head p { color: var(--ink-2); margin: 8px 0 0; max-width: 64ch; }
.lede { color: var(--ink-2); margin: 0 0 20px; max-width: 70ch; }
.lede b { color: var(--ink); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); }

/* ---------------------------------------------------------------- story cards */
.stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.stories.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .stories.three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .stories, .stories.three { grid-template-columns: minmax(0, 1fr); } }
.story-card { display: flex; flex-direction: column; text-decoration: none; background: var(--surface); border: 1px solid var(--border);
              border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.story-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.story-card .thumb { aspect-ratio: 16 / 7.5; background: var(--surface-2); position: relative; border-bottom: 1px solid var(--border); }
.story-card .thumb svg, .story-card .thumb canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.story-card .body { padding: var(--pad); display: flex; flex-direction: column; gap: var(--stack); flex: 1; }
.story-card h3 { font-size: 21px; line-height: 1.2; margin: 0; }
.story-card p { margin: 0; color: var(--ink-2); font-size: 14.5px; }
.story-card .more { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 14px; color: var(--ink); }
.story-card .stat { font: 700 15px var(--display); color: var(--ink); }
.story-card.feature { grid-column: 1 / -1; display: grid; grid-template-columns: 1.25fr 1fr; }
.story-card.feature .thumb { aspect-ratio: auto; min-height: 260px; border-bottom: 0; border-right: 1px solid var(--border); }
.story-card.feature h3 { font-size: clamp(24px, 3vw, 30px); }
@media (max-width: 760px) {
  .story-card.feature { grid-template-columns: minmax(0, 1fr); }
  .story-card.feature .thumb { min-height: 200px; border-right: 0; border-bottom: 1px solid var(--border); }
}

/* ---------------------------------------------------------------- facts */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 860px) { .facts { grid-template-columns: minmax(0, 1fr); } }
.fact { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow);
        display: flex; flex-direction: column; gap: var(--stack); }
.fact .big { font: 800 clamp(34px, 4.6vw, 46px)/1 var(--display); letter-spacing: -.035em; margin: 0; }
.fact p { margin: 0; color: var(--ink-2); font-size: 15px; }
.fact p.big, .finding p.n { color: var(--ink); }
.fact p b { color: var(--ink); }
.fact a { font-size: 14px; font-weight: 600; text-decoration: none; margin-top: auto; padding-block: 4px; }
.fact a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- stat tiles */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-tight); margin: 0 0 8px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--pad-tight); box-shadow: var(--shadow); }
.tile .label { font-size: 14px; color: var(--ink-2); margin: 0; }
.tile .value { font: 700 30px/1.15 var(--display); margin: 6px 0 4px; letter-spacing: -.02em; }
.tile .sub { font-size: 13px; color: var(--muted); margin: 0; }

/* ---------------------------------------------------------------- story article */
.story-head { padding: 52px 0 8px; }
.story-head .kicker { margin-bottom: 16px; }
.story-head h1 { font-size: clamp(38px, 6.4vw, 68px); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; margin: 0; max-width: 18ch; }
.story-head .dek { font: 500 clamp(19px, 2.4vw, 23px)/1.42 var(--sans); color: var(--ink-2); margin: 18px 0 0; max-width: 46ch; letter-spacing: -.005em; }
.story-head .meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; align-items: center; }
.share { border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); font: 500 12.5px/1 var(--sans);
         border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.share:hover { color: var(--ink); border-color: var(--border-strong); }
.share svg { width: 13px; height: 13px; }

.findings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin: 36px 0 12px; counter-reset: f; }
@media (max-width: 820px) { .findings { grid-template-columns: minmax(0, 1fr); } }
.finding { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); }
.finding .n { font: 800 clamp(30px, 3.8vw, 40px)/1 var(--display); letter-spacing: -.03em; margin: 0 0 var(--stack); }
.finding p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.finding p b { color: var(--ink); }

.prose { max-width: var(--read); margin: 0 auto; font-size: 17.5px; line-height: 1.68; }
.prose p { margin: 0 0 1.05em; }
.prose h2 { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 1.9em 0 .5em; }
.prose b { color: var(--ink); }
.article { padding-bottom: 24px; }
.article > .prose:first-child h2 { margin-top: 1.2em; }

/* Figures break out of the reading column. */
figure.fig { margin: 34px auto 40px; max-width: var(--wide); }
figure.fig.read { max-width: var(--read); }
.fig-head { margin: 0 0 14px; }
.fig-head h3 { font-size: 19px; line-height: 1.3; margin: 0; letter-spacing: -.01em; }
.fig-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 14.5px; max-width: 72ch; }
.fig-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 18px 14px; box-shadow: var(--shadow); }
.fig-foot { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 12.5px; color: var(--muted); }
.fig-foot .src a { color: var(--ink-2); }
.fig-foot .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.linkbtn { border: 0; background: none; padding: 6px 8px; min-height: 28px; box-sizing: border-box; border-radius: 6px; color: var(--ink-2); font: 500 12.5px var(--sans); cursor: pointer; text-decoration: none; display: inline-flex; gap: 5px; align-items: center; }
.linkbtn:hover { background: var(--surface-2); color: var(--ink); }
.linkbtn svg { width: 13px; height: 13px; }

/* "Cómo leerlo" — the nuance, next to the figure it qualifies */
aside.read-this { max-width: var(--read); margin: 28px auto; border-left: 3px solid var(--accent); background: var(--surface);
                  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--pad-tight) var(--pad); box-shadow: var(--shadow); font-size: 15.5px; line-height: 1.6; }
aside.read-this .t { font: 700 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
aside.read-this p { margin: 0 0 .6em; color: var(--ink-2); }
aside.read-this p:last-child { margin-bottom: 0; }
aside.read-this b { color: var(--ink); }

/* SQL drawer */
.sql { display: none; margin-top: 12px; }
.sql.on { display: block; }
.sql pre { margin: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px;
           font: 12.5px/1.6 var(--mono); color: var(--ink); overflow: auto; max-height: 360px; white-space: pre; }
.sql .row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- legends */
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); margin: 0 0 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.sw.line { height: 3px; width: 16px; border-radius: 2px; }
.sw.dot { border-radius: 50%; }
.ramp { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); }
.ramp i { display: block; width: 120px; height: 10px; border-radius: 3px; }

/* ---------------------------------------------------------------- SVG charts */
.chart { position: relative; width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart svg text { fill: var(--muted); font: 12px var(--sans); }
.chart svg .tick text, .chart svg text.tick { font-variant-numeric: tabular-nums; }
.chart svg .grid line, .chart svg line.grid { stroke: var(--grid); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .base, .chart svg line.base { stroke: var(--axis); stroke-width: 1; shape-rendering: crispEdges; }
.chart svg .lab { fill: var(--ink-2); font-size: 12.5px; }
.chart svg .lab-strong { fill: var(--ink); font-weight: 600; font-size: 12.5px; }
.chart svg .band-lab { fill: var(--ink-2); font-size: 12px; font-weight: 500; }
.chart svg .cross { stroke: var(--ink-2); stroke-width: 1; pointer-events: none; }
.chart svg .hit { fill: transparent; }
.chart svg .mark-hover { filter: brightness(1.12); }
.chart canvas { display: block; width: 100%; }
.chart .ann { position: absolute; font-size: 12px; color: var(--ink-2); line-height: 1.3; pointer-events: none; white-space: nowrap;
              background: var(--surface); border: 1px solid var(--border); border-radius: 7px; padding: 4px 8px; box-shadow: var(--shadow); }
.chart .ann b { color: var(--ink); }

/* HTML bars — long Spanish labels wrap instead of clipping */
.hbars { display: grid; grid-template-columns: minmax(130px, 260px) minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: center; }
.hbars .lab { font-size: 13.5px; color: var(--ink-2); line-height: 1.25; text-align: right; }
.hbars .lab .code { color: var(--muted); font-weight: 500; margin-right: 4px; }
.hbars .lab.on { color: var(--ink); font-weight: 600; }
.track { display: flex; align-items: center; min-width: 0; }
/* --f is the bar's fraction of the largest; --r the room kept for its value
   label. The bar is that fraction of what is left, so lengths stay proportional. */
.bar { display: flex; height: 14px; gap: 2px; flex: 0 0 auto; width: max(3px, calc((100% - min(var(--r, 76px), 60%)) * var(--f, 1))); }
.bar.full { width: 100% !important; }
/* A finger needs 24px (WCAG 2.5.8); the bar draws 14. The segment's hit area
   reaches 5px above and below it, into the row gap, without changing the drawing. */
.seg { height: 100%; min-width: 2px; outline-offset: 2px; position: relative; }
.seg::before { content: ""; position: absolute; inset: -5px 0; }
.seg:last-child { border-radius: 0 4px 4px 0; }
.seg:hover, .seg:focus-visible { filter: brightness(1.12); }
.val { font-size: 12.5px; color: var(--ink-2); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .hbars { grid-template-columns: minmax(0, 1fr) !important; row-gap: 3px; }
  .hbars .lab { text-align: left; margin-top: 8px; }
  /* A long value label drops under its bar rather than pushing past the screen. */
  .track { flex-wrap: wrap; row-gap: 2px; }
  .val { white-space: normal; min-width: 0; }
}

/* ---------------------------------------------------------------- tooltip */
#tip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--ink);
       border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; font-size: 13px; line-height: 1.45;
       box-shadow: 0 8px 30px rgba(0,0,0,.16); min-width: 170px; max-width: 300px; opacity: 0; transition: opacity .08s; }
#tip.on { opacity: 1; }
#tip .t-title { color: var(--ink-2); font-size: 12.5px; margin-bottom: 5px; font-weight: 500; }
#tip .t-row { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
#tip .t-row .k { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); }
#tip .t-row .key { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
#tip .t-row b { font-weight: 650; font-variant-numeric: tabular-nums; }
#tip .t-note { color: var(--muted); font-size: 12px; margin-top: 5px; }

/* ---------------------------------------------------------------- table view */
details.tv { margin-top: 10px; font-size: 13.5px; }
details.tv summary { cursor: pointer; color: var(--ink-2); width: max-content; font-size: 12.5px; line-height: 16px; list-style: none; padding: 6px 8px; border-radius: 6px; }
details.tv summary::-webkit-details-marker { display: none; }
details.tv summary:hover { background: var(--surface-2); color: var(--ink); }
details.tv .tv-wrap { overflow: auto; max-height: 360px; margin-top: 8px; border: 1px solid var(--border); border-radius: 9px; }
details.tv table { border-collapse: collapse; width: 100%; }
details.tv th, details.tv td { padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
details.tv th { background: var(--surface-2); color: var(--ink-2); font-weight: 600; position: sticky; top: 0; }
details.tv td.n, details.tv th.n { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- what changed, cta, trust */
.changes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tight); }
@media (max-width: 760px) { .changes { grid-template-columns: minmax(0, 1fr); } }
.change { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: var(--pad-tight); box-shadow: var(--shadow); }
.change .value { font: 700 26px/1.2 var(--display); margin: 0; letter-spacing: -.02em; }
.change .label { margin: 2px 0 0; font-weight: 600; }
.change .sub { margin: 4px 0 0; color: var(--ink-2); font-size: 14px; }
.cta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-tight); }
@media (max-width: 860px) { .cta { grid-template-columns: minmax(0, 1fr); } }
.cta a { display: block; text-decoration: none; background: var(--surface); border: 1px solid var(--border);
         border-radius: var(--radius); padding: var(--pad); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.cta a:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--border-strong); }
.cta a.primary { background: var(--ink); border-color: var(--ink); color: var(--page); }
.cta .t { font: 700 18px var(--display); letter-spacing: -.01em; }
.cta .d { font-size: 14px; opacity: .8; margin-top: 4px; }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .trust { grid-template-columns: minmax(0, 1fr); } }
.trust h3 { font-size: 16px; margin: 0 0 6px; }
.trust p { margin: 0; color: var(--ink-2); font-size: 14.5px; }

/* ---------------------------------------------------------------- next story + footer */
.next { max-width: var(--wide); margin: 56px auto 0; }
.next .sec-head { margin-bottom: 14px; }
footer.site { margin-top: 72px; border-top: 1px solid var(--border); background: var(--surface); }
footer.site .wrap { padding-top: 32px; padding-bottom: 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; font-size: 13.5px; color: var(--ink-2); }
footer.site h4 { font: 700 13px var(--sans); color: var(--ink); margin: 0 0 10px; }
footer.site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
footer.site a { color: var(--ink-2); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site p { margin: 0 0 8px; }
footer.site .clyx-credit { margin-top: 18px; }
@media (max-width: 760px) { footer.site .wrap { grid-template-columns: minmax(0, 1fr); } }

.loading { color: var(--muted); padding: 60px 0; text-align: center; }
.loading::after { content: ""; display: block; width: 28px; height: 28px; margin: 16px auto 0; border-radius: 50%;
                  border: 2.5px solid var(--border); border-top-color: var(--ink-2); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error { color: var(--down); padding: 40px 0; }

/* The monthly bulletin: its stamp, the way to the months either side, and the list. */
.stamp { max-width: var(--read); margin: 24px auto 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
.stamp code { font: 12.5px/1 var(--mono); color: var(--ink-2); }
nav.pager { max-width: var(--read); margin: 28px auto 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
nav.pager a { display: inline-block; padding: 10px 0; min-height: 24px; }
.bulletins { list-style: none; padding: 0; margin: 0 auto; max-width: var(--read); }
.bulletins li { border-top: 1px solid var(--border); padding: 18px 0; }
.bulletins h3 { margin: 0 0 6px; font-size: 20px; }
.bulletins p { margin: 0; color: var(--ink-2); font-size: 15px; }

/* The jurisdiction map: no gridlines, the shapes are the chart. */
.chart.map svg { display: block; margin: 0 auto; max-height: 78vh; width: auto; max-width: 100%; }
.chart.map path.jur:hover, .chart.map path.jur:focus { stroke: var(--ink); stroke-width: 1.4; outline: none; }
.map-legend { margin-top: 10px; }

/* A scrolling story: the graphic stays, the steps pass over it. On a phone the
   steps are cards floating over the lower part of the map; wide, they sit in
   a column beside it. */
.scrolly { max-width: var(--wide); margin: 40px auto; }
.scrolly .body { display: grid; grid-template-columns: minmax(0, 1fr); }
.scrolly .graphic { grid-row: 1; grid-column: 1; position: sticky; top: 76px; height: calc(100vh - 96px); display: flex; flex-direction: column; justify-content: center; }
.scrolly .graphic .chart.map svg { max-height: calc(100vh - 210px); }
.scrolly .steps { grid-row: 1; grid-column: 1; z-index: 1; padding: 62vh 0 30vh; pointer-events: none; }
.scrolly .step { pointer-events: auto; max-width: 440px; margin: 0 auto 80vh; padding: var(--pad-tight) var(--pad); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); font-size: 16.5px; line-height: 1.55; opacity: .78; transition: opacity .3s; }
.scrolly .step.on { opacity: 1; }
.scrolly .step p { margin: 0; }
.scrolly .step:last-child { margin-bottom: 0; }
.scrolly .after { max-width: var(--read); margin: 24px auto 0; }
@media (min-width: 960px) {
  .scrolly .body { grid-template-columns: 360px minmax(0, 1fr); gap: 40px; }
  .scrolly .graphic { grid-column: 2; }
  .scrolly .steps { grid-column: 1; padding: 35vh 0 35vh; }
  .scrolly .step { margin: 0 0 70vh; }
}
@media (prefers-reduced-motion: reduce) { .scrolly .step { transition: none; } }
@media print { .scrolly .graphic { position: static; height: auto; } .scrolly .steps { padding: 0; } .scrolly .step { margin: 12px 0; opacity: 1; } }

/* Reveal on scroll — calm, short, and off when the reader asks for less motion. */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------------------------------------------------------------- typography
   Text in boxes reads as one family on every screen. Headings and the short
   lines of a card balance their lines; paragraphs avoid a lone last word.
   Every page is lang="es", so the browser hyphenates by Spanish rules: in the
   boxes always, in the prose only on a phone, where a long word otherwise
   leaves a ragged gap. Figures that sit side by side use tabular digits.
   Long prose is justified only where its column is wide enough to take it,
   and always hyphenated; a card, a caption or a figure is never justified. */
h1, h2, h3, .hero .line, .story-head .dek, .fig-head h3, .story-card h3, .cta .t, .tile .label, .change .label { text-wrap: balance; }
p, li, .fig-head p, .cta .d { text-wrap: pretty; }
.card, .fact, .finding, .tile, .change, .story-card .body, .cta a, .trust p, .fig-head p, aside.read-this, .scrolly .step, #tip {
  -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; overflow-wrap: break-word; }
.fact .big, .finding .n, .tile .value, .change .value, .story-card .stat { font-variant-numeric: tabular-nums; -webkit-hyphens: manual; hyphens: manual; }
@media (max-width: 540px) {
  .prose { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
}
@media (min-width: 900px) {
  .prose > p { text-align: justify; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 7 3 3; }
  figure .prose > p { text-align: start; }
}

@media print {
  nav.top, .share, .fig-foot .acts, footer.site { display: none; }
  body { background: #fff; }
  .fig-body, .card, .finding { box-shadow: none; }
}