/* ══════════════════════════════════════════════════════════════════════════
   Basepoint Doodles V2 — design system
   Approved 17.09.2026 (design/sega_sample.html). Evolved from the V1 brand:
   same navy/red, Nunito + Caveat, newspaper masthead; wider canvas, bigger
   figures, a chapter per question.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  /* brand */
  --navy: #1B2E5E;
  --red: #CC2B2B;
  /* ink & paper */
  --page: #E8E8E8;
  --paper: #FFFFFF;
  --surf: #F7F7F5;
  --ink: #1C1C1C;
  --ink2: #444444;
  --dim: #6B6B6B;
  --meta: #575757;
  --pale: #A3A3A3;
  --hair: #E6E6E3;
  --grid: #EDEDEA;
  --axis: #BDBDB8;
  /* chart series: validated for colour-blind separation on white */
  --s1: #1F4E9C;
  --s2: #C8413A;
  --s3: #1A9384;
  --s4: #E09A3E;
  --s5: #8A5CD6;
  --s6: #B5307E;
  --s7: #A85C00;
  --s8: #2F86D8;
  --s1-tint: #A9BEE0;
  --ctx: #B8B8B3;
  /* diverging scale: amber <-> grey <-> blue. Not good/bad. */
  --dv-n4: #BF8233; --dv-n3: #DDA656; --dv-n2: #EFCB93; --dv-n1: #F8E9D2;
  --dv-0:  #F0EFEC;
  --dv-p1: #DCE6F4; --dv-p2: #AFC4E6; --dv-p3: #6F93CC; --dv-p4: #2F5EA8;
  /* data status */
  --stale-bg: #FFF3DC; --stale-ink: #7A4A00;
  /* type */
  --sans: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Caveat', cursive;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); background: var(--page); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--navy); }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.sr, .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--paper); padding: 10px 16px; z-index: 50; }
.skip:focus { left: 8px; top: 8px; }

.wrap { max-width: 1180px; margin: 28px auto; background: var(--paper); border: 1px solid #C8C8C8; }
.pad { padding-left: 40px; padding-right: 40px; }

/* ── Masthead ─────────────────────────────────────────────────────────────*/
.mast { padding-top: 16px; }
.mast-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.mast-util { display: flex; gap: 18px; }
.mast-util a { font-size: 12px; font-weight: 700; color: var(--meta); text-decoration: none; }
.mast-util a:hover { color: var(--navy); text-decoration: underline; }
.mast-util .lang { color: var(--navy); border-left: 1px solid var(--hair); padding-left: 18px; }
.mast-date { font-family: var(--mono); font-size: 12px; color: var(--meta); letter-spacing: .04em; text-transform: uppercase; }
.mast-title { text-align: center; margin: 12px 0 2px; line-height: 1; }
.mast-title a { text-decoration: none; color: inherit; }
.mast-title .bp { font-size: 46px; font-weight: 900; letter-spacing: -1.8px; }
.mast-title .dd { font-family: var(--hand); font-size: 56px; font-weight: 700; color: var(--red); margin-left: 6px; }
.mast-sub { text-align: center; font-size: 12px; color: var(--dim); letter-spacing: .16em; text-transform: uppercase; }
.rule-thick { height: 3px; background: var(--ink); margin-top: 12px; }

.sections { margin-top: 3px; border-bottom: 1px solid var(--ink); }
/* Centred by auto margins, not justify-content: a centred row that is wider
   than the bar spills out on both sides, and the left part can never be
   scrolled to ("Now" showed as "ow"). Auto margins centre it when it fits and
   start it at the left edge when it does not. */
.sections ul { list-style: none; display: flex; justify-content: flex-start; gap: 30px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.sections li:first-child { margin-left: auto; }
.sections li:last-child { margin-right: auto; }
/* The English names are longer; this keeps all six on one line on a desktop. */
html[lang="en"] .sections ul { gap: 20px; }
html[lang="en"] .sections a { letter-spacing: .04em; }
.sections ul::-webkit-scrollbar { display: none; }
.sections a { display: block; font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); text-decoration: none; padding: 11px 0 8px; border-bottom: 3px solid transparent; }
.sections a:hover { color: var(--ink); }
.sections a[aria-current="page"] { color: var(--ink); font-weight: 900; border-bottom-color: var(--red); }

/* ── Page intro ───────────────────────────────────────────────────────────*/
/* 360px, not 300: at 300 the date rows broke after the label and left the
   date alone on the next line, which read as a second entry. */
.intro { padding-top: 40px; padding-bottom: 8px; display: grid; grid-template-columns: 1fr 360px; gap: 40px; align-items: end; }
.intro h1 { font-size: 72px; font-weight: 900; letter-spacing: -3px; line-height: .95; }
.intro .q { font-size: 26px; font-weight: 800; letter-spacing: -.4px; margin-top: 10px; line-height: 1.2; }
.intro .lede { color: var(--ink2); font-size: 16px; max-width: 620px; margin-top: 12px; }
.intro-meta { font-family: var(--mono); font-size: 12px; color: var(--meta); border-left: 3px solid var(--red); padding: 4px 0 4px 14px; line-height: 1.8; }
/* Label and value sit on one line while they fit, and stack whole below —
   never with a date broken across lines. Only the dates hold together: the
   source list is long enough to set the column's width if it were kept on
   one line, which is what pushed the page past 320px. */
.intro-meta > div { display: flex; flex-wrap: wrap; gap: 0 6px; min-width: 0; }
.intro-meta > div > b { min-width: 0; }
.intro-meta > div > b.keep { white-space: nowrap; }
.intro-meta b { color: var(--ink); font-weight: 500; }

/* ── Sticky chapter bar ───────────────────────────────────────────────────*/
.chapnav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 2px solid var(--ink); border-top: 1px solid var(--hair); margin-top: 28px; }
.chapnav ol { list-style: none; display: flex; flex-wrap: nowrap; gap: 2px; overflow-x: auto; scrollbar-width: none; padding-top: 9px; padding-bottom: 9px; }
.chapnav ol::-webkit-scrollbar { display: none; }
.chapnav ol.more-right, .sections ul.more-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent); }
.chapnav ol.more-left, .sections ul.more-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px); mask-image: linear-gradient(to right, transparent, #000 56px); }
.chapnav ol.more-left.more-right, .sections ul.more-left.more-right { -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.chapnav a { display: inline-flex; gap: 4px; align-items: baseline; white-space: nowrap; font-size: 11px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--navy); text-decoration: none; padding: 4px 6px; border: 1px solid var(--hair); }
.chapnav a:hover { border-color: var(--navy); }
.chapnav a[aria-current="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.chapnav a span { font-family: var(--hand); font-size: 15px; color: var(--red); text-transform: none; letter-spacing: 0; }
.chapnav a[aria-current="true"] span { color: #fff; }

/* ── Chapter ──────────────────────────────────────────────────────────────*/
.chap { padding-top: 48px; padding-bottom: 8px; scroll-margin-top: 56px; }
.chap-hd { display: grid; grid-template-columns: auto 1fr; gap: 0 18px; align-items: end; border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 24px; }
.chap-no { font-family: var(--hand); font-size: 64px; line-height: .8; color: var(--red); grid-row: span 2; }
.chap-kicker { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
.chap-title { font-size: 32px; font-weight: 900; letter-spacing: -.8px; line-height: 1.1; }

/* ── Figure ───────────────────────────────────────────────────────────────*/
.fig { margin-bottom: 34px; }
.fig-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 14px; }
.fig-title { font-size: 21px; font-weight: 700; letter-spacing: -.3px; line-height: 1.2; }
.fig-sub { font-size: 14px; color: var(--dim); margin-top: 2px; }
.fig-ft { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--hair); font-family: var(--mono); font-size: 12px; color: var(--meta); }
.fig-ft .r { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.linkbtn { font-family: var(--mono); font-size: 12px; color: var(--meta); text-decoration: underline; text-decoration-color: var(--axis); text-underline-offset: 3px; }
.linkbtn:hover { color: var(--navy); text-decoration-color: currentColor; }
.fig-ft a { color: var(--meta); text-decoration: none; }
.fig-ft a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }

.ledger { display: flex; gap: 28px; flex-wrap: wrap; }
.ledger div { display: flex; flex-direction: column; }
.ledger b { font-size: 26px; font-weight: 900; letter-spacing: -.6px; line-height: 1.1; }
.ledger span { font-size: 12px; color: var(--dim); }

.seg { display: inline-flex; border: 1px solid var(--ink); }
.seg button { font-size: 12px; font-weight: 800; letter-spacing: .04em; padding: 5px 12px; min-height: 32px; }
.seg button + button { border-left: 1px solid var(--ink); }
.seg button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.seg button:not([aria-pressed="true"]):hover { background: var(--surf); }

.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { font-size: 14px; font-weight: 800; color: var(--dim); padding: 8px 0 7px; border-bottom: 3px solid transparent; white-space: nowrap; min-height: 40px; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.tabs button:hover { color: var(--ink); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chips .lbl { font-size: 12px; color: var(--dim); margin-right: 4px; }
.chip { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; padding: 4px 11px; border: 1px solid var(--hair); border-radius: 999px; min-height: 32px; }
.chip i { width: 14px; height: 2px; background: var(--pale); display: inline-block; border-radius: 1px; }
.chip[aria-pressed="true"] { border-color: var(--ink); }
.chip[aria-pressed="true"] i { background: var(--s3); height: 3px; }

.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink2); margin-bottom: 8px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 16px; height: 2.5px; border-radius: 2px; display: inline-block; }

.ctlrow { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.ctlrow > .tabs { flex: 1 1 280px; min-width: 0; }
.ctlrow > .seg { margin-bottom: 16px; }

/* ── Chart ────────────────────────────────────────────────────────────────*/
.chart { position: relative; }
.chart-svg { width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart text { font-family: var(--sans); }
.chart .tick { font-size: 11.5px; fill: var(--dim); font-variant-numeric: tabular-nums; }
.chart .end-v { font-size: 13px; font-weight: 800; fill: var(--ink); }
.chart .end-l { font-size: 12px; fill: var(--dim); }
.chart .doodle { font-family: var(--hand); font-size: 21px; font-weight: 700; fill: var(--red); }
.chart .band-lbl { font-size: 12px; fill: var(--dim); font-weight: 700; }
.chart .ref-lbl { font-size: 12px; fill: var(--dim); }
.chart:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.chart.is-muted .chart-svg { opacity: .38; filter: grayscale(.6); }
.tt { position: absolute; pointer-events: none; background: var(--paper); border: 1px solid var(--ink); box-shadow: 3px 3px 0 rgba(0,0,0,.08); padding: 7px 10px; font-size: 12px; min-width: 130px; opacity: 0; transition: opacity .08s; z-index: 5; white-space: nowrap; }
.tt.on { opacity: 1; }
.tt .h { font-family: var(--mono); font-size: 12px; color: var(--meta); margin-bottom: 3px; }
.tt .row { display: flex; align-items: center; gap: 8px; line-height: 1.6; }
.tt .row i { width: 12px; height: 2.5px; border-radius: 2px; flex-shrink: 0; }
.tt .row b { font-weight: 900; font-size: 13px; min-width: 52px; }
.tt .row span { color: var(--dim); }

.tbl-wrap { max-height: 280px; overflow: auto; margin-top: 10px; border: 1px solid var(--hair); }
.tbl-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tbl-wrap th, .tbl-wrap td { padding: 5px 10px; text-align: right; border-bottom: 1px solid var(--grid); font-variant-numeric: tabular-nums; }
.tbl-wrap th:first-child, .tbl-wrap td:first-child { text-align: left; font-family: var(--mono); font-size: 12px; }
.tbl-wrap thead th { position: sticky; top: 0; background: var(--surf); font-weight: 800; }

/* ── Period & status ──────────────────────────────────────────────────────*/
.per { font-family: var(--mono); font-size: 12px; color: var(--meta); letter-spacing: .02em; white-space: nowrap; }
.st { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.st-delayed { color: var(--meta); }
.st-stale { background: var(--stale-bg); color: var(--stale-ink); padding: 1px 7px; font-weight: 500; }
.status-line { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.broken { border: 1px dashed var(--axis); background: var(--surf); padding: 28px 20px; text-align: center; color: var(--ink2); font-size: 14px; }
.broken b { display: block; font-size: 15px; margin-bottom: 4px; color: var(--ink); }

/* ── Pulse cards ──────────────────────────────────────────────────────────*/
.pulse-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-left: 1px solid var(--hair); }
.pulse { padding: 18px 20px 14px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); display: flex; flex-direction: column; min-width: 0; }
.pulse-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pulse-lbl { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.pulse-val { font-size: 50px; font-weight: 900; letter-spacing: -2px; line-height: 1; margin-top: 10px; }
.pulse-unit { font-size: 13px; color: var(--dim); margin-top: 4px; }
.pulse-sec { font-size: 14px; color: var(--ink2); margin-top: 6px; }
.pulse-sec b { color: var(--ink); font-weight: 900; }
.pulse-chart { margin-top: 12px; }
.pulse-ft { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.pulse-ft a { font-size: 12px; font-weight: 600; color: var(--meta); text-decoration: none; white-space: nowrap; }
.pulse-ft a:hover { color: var(--navy); text-decoration: underline; }

/* ── Multiples, pairs, stacks ─────────────────────────────────────────────*/
.multi3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.multi3 h4, .pair h4, .stack h4 { font-size: 14px; font-weight: 700; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.multi3 h4 b, .pair h4 b, .stack h4 b { font-size: 17px; font-weight: 800; }
.pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.pair > div + div, .stack > div + div { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--hair); }
.pair-t { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }

/* ── Heatmap ──────────────────────────────────────────────────────────────*/
.hm-scroll { overflow-x: auto; }
.hm { display: grid; gap: 3px; min-width: 640px; }
.hm .rl { font-size: 14px; font-weight: 800; display: flex; align-items: center; position: sticky; left: 0; background: var(--paper); padding-right: 10px; z-index: 1; }
.hm .ch { font-family: var(--mono); font-size: 12px; color: var(--meta); text-align: center; line-height: 1.25; }
.hm .ch em { font-style: normal; color: var(--ink); display: block; }
.hm .cell { height: 40px; border-radius: 3px; position: relative; }
.hm .cell:hover, .hm .cell:focus-visible { outline: 2px solid var(--ink); z-index: 2; }
.hm .cell.na { background: repeating-linear-gradient(45deg, var(--surf) 0 5px, var(--hair) 5px 6px); }
.hm .lv { font-size: 16px; font-weight: 800; display: flex; flex-direction: column; justify-content: center; padding-left: 12px; line-height: 1.1; }
.hm .lv span { font-family: var(--mono); font-size: 11.5px; font-weight: 400; color: var(--meta); }
.scale { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-bottom: 16px; font-size: 13px; color: var(--meta); flex-wrap: wrap; }
.scale-bar { display: flex; gap: 2px; }
.scale-bar div { width: 34px; height: 12px; border-radius: 2px; position: relative; }
.scale-bar div span { position: absolute; top: 14px; left: -15px; width: 30px; text-align: center; font-family: var(--mono); font-size: 11.5px; color: var(--meta); }
.scale-na { display: inline-flex; gap: 6px; align-items: center; margin-left: 18px; }
.scale-na i { width: 22px; height: 12px; border-radius: 2px; background: repeating-linear-gradient(45deg, var(--surf) 0 4px, var(--hair) 4px 5px); border: 1px solid var(--hair); }

/* ── Ranked bars ──────────────────────────────────────────────────────────*/
.hb { display: grid; grid-template-columns: minmax(130px, 260px) 1fr minmax(64px, max-content); column-gap: 12px; }
.hb .l { font-size: 14px; display: flex; align-items: center; min-height: 32px; line-height: 1.2; }
.hb .t { position: relative; min-height: 32px; }
.hb .bar { position: absolute; top: 50%; height: 16px; margin-top: -8px; background: var(--s1); }
.hb .bar.pos { border-radius: 0 4px 4px 0; }
.hb .bar.neg { border-radius: 4px 0 0 4px; background: var(--s1-tint); }
.hb .zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--axis); }
.hb .ref { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--red); opacity: .85; }
.hb .v { font-size: 14px; font-weight: 800; display: flex; align-items: center; justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hb .hdr { min-height: 30px; }
.hb .reflbl { position: absolute; bottom: 4px; transform: translateX(-50%); font-family: var(--hand); font-size: 20px; font-weight: 700; color: var(--red); white-space: nowrap; }

/* ── Figure blocks ────────────────────────────────────────────────────────*/
.figs { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--hair); margin-bottom: 24px; }
.figs > div { padding: 16px 20px 14px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 2px; }
.figs > div:first-child { padding-left: 0; }
.figs > div:last-child { border-right: 0; }
.figs .k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.figs .v { font-size: 38px; font-weight: 900; letter-spacing: -1.4px; line-height: 1.05; }
.figs .s { font-size: 13px; color: var(--dim); }
.figs .is-muted .v { color: var(--pale); }

.bal { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bal > div { background: var(--surf); padding: 16px 18px; border-left: 3px solid var(--ink); }
.bal .k { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.bal .v { font-size: 30px; font-weight: 900; letter-spacing: -1px; }
.bal .s { font-size: 12px; color: var(--dim); }
.split { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }

/* ── Percentile strips ────────────────────────────────────────────────────*/
.pct { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 150px; column-gap: 18px; row-gap: 4px; margin-top: 8px; }
.pct .l { font-size: 14px; font-weight: 800; line-height: 1.2; padding: 8px 0; }
.pct .l span { display: block; font-family: var(--mono); font-size: 12px; font-weight: 400; color: var(--meta); }
.pct .trk { position: relative; height: 46px; }
.pct .trk::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; background: var(--hair); }
.pct .trk .q { position: absolute; top: calc(50% - 5px); width: 1px; height: 12px; background: var(--axis); }
.pct .trk .dot { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--s1); box-shadow: 0 0 0 3px var(--paper); }
.pct .r { font-size: 15px; font-weight: 800; display: flex; align-items: center; }
.pct-axis { display: grid; grid-template-columns: minmax(150px, 220px) 1fr 150px; column-gap: 18px; font-family: var(--mono); font-size: 11.5px; color: var(--meta); }
.pct-axis div:nth-child(2) { display: flex; justify-content: space-between; }

/* ── Update feed ──────────────────────────────────────────────────────────*/
.feed { list-style: none; border-top: 1px solid var(--ink); }
.feed li { display: grid; grid-template-columns: 110px 1fr 160px 120px; gap: 12px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--hair); }
.feed .d { font-family: var(--mono); font-size: 12px; color: var(--meta); }
.feed .n { font-size: 15px; font-weight: 800; }
.feed .p { font-family: var(--mono); font-size: 12px; }
.feed a { font-size: 13px; font-weight: 600; color: var(--meta); text-align: right; text-decoration: none; }
.feed a:hover { color: var(--navy); text-decoration: underline; }

/* ── Methodology table (За проекта) ───────────────────────────────────────*/
.prose { max-width: 1000px; padding-top: 32px; }
.prose > p, .prose > ul, .prose > h3, .prose > h2 { max-width: 720px; }
.prose h1 { font-size: 48px; font-weight: 900; letter-spacing: -1.6px; line-height: 1; margin-bottom: 18px; }
.prose h2 { font-size: 28px; font-weight: 900; letter-spacing: -.6px; margin: 32px 0 10px; }
.prose h3 { font-size: 18px; font-weight: 800; margin: 24px 0 6px; }
.prose p { margin-bottom: 14px; color: var(--ink2); }
.prose ul { margin: 0 0 14px 20px; color: var(--ink2); }
.prose li { margin-bottom: 5px; }
.method { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 28px; }
.method th, .method td { text-align: left; vertical-align: top; padding: 7px 10px 7px 0; border-bottom: 1px solid var(--hair); }
.method thead th { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 800; }
.method code { font-family: var(--mono); font-size: 12px; color: var(--meta); }
.method .src { font-family: var(--mono); font-size: 12px; color: var(--meta); }

/* ── Footer ───────────────────────────────────────────────────────────────*/
.foot { margin-top: 48px; background: var(--surf); border-top: 2px solid var(--ink); padding-top: 20px; padding-bottom: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.foot .logo { font-family: var(--hand); font-size: 26px; font-weight: 700; color: var(--pale); }
.foot nav { display: flex; gap: 18px; font-size: 13px; flex-wrap: wrap; }
.foot nav a { color: var(--dim); text-decoration: none; }
.foot nav a:hover { color: var(--navy); }
.foot .src { font-family: var(--mono); font-size: 12px; color: var(--meta); width: 100%; }

/* ── Loading / failure states ─────────────────────────────────────────────*/
.loading { padding: 64px 0; text-align: center; color: var(--dim); font-size: 15px; }
.failed { margin: 32px 0; border: 1px dashed var(--red); padding: 24px; }
.failed b { display: block; font-size: 16px; margin-bottom: 6px; }
.static-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--ink); border-left: 1px solid var(--hair); }
.static-summary div { padding: 14px 18px; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.static-summary dt { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.static-summary dd { font-size: 34px; font-weight: 900; letter-spacing: -1.2px; }
.static-summary .p { font-family: var(--mono); font-size: 12px; color: var(--meta); }
.static-charts .loading { padding: 32px 0; }
.static-charts section { margin-top: 32px; }
.static-charts h2 { font-size: 22px; font-weight: 900; border-top: 2px solid var(--ink); padding-top: 10px; }
.static-fig { margin-top: 22px; }
.static-fig h3 { font-size: 17px; font-weight: 800; }
.static-values { border-collapse: collapse; margin-top: 8px; font-size: 14px; width: 100%; max-width: 640px; }
.static-values th, .static-values td { text-align: left; padding: 4px 12px 4px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
.static-values thead th { font-size: 12px; color: var(--meta); font-weight: 700; }
.static-values td { font-family: var(--mono); white-space: nowrap; }
.static-fig .src { font-family: var(--mono); font-size: 12px; color: var(--meta); margin-top: 6px; overflow-wrap: anywhere; }
@media (max-width: 480px) { .static-values td { white-space: normal; } }

/* ── Responsive ───────────────────────────────────────────────────────────*/

/* ── разказващите страници ─────────────────────────────────────────────────
   Формите, които „Двигателят“, „Европа“, „Къде сме спрямо другите?“ и
   „Животът“ добавят: водещото число над моста, трите числа на отрасъла,
   бележката под графика и подсказката при посочване.
──────────────────────────────────────────────────────────────────────── */

.bridge-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.bridge-hd .big { font-size: 44px; font-weight: 900; line-height: 1; letter-spacing: -.02em; }
.bridge-hd .cap { font-family: var(--mono); font-size: 12px; color: var(--meta); letter-spacing: .04em; text-transform: uppercase; }

.fig-note { font-size: 13px; color: var(--dim); margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--hair); max-width: 720px; }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; margin: 16px 0 6px; border-left: 3px solid var(--red); }
.trio > div { padding-left: 14px; display: flex; flex-direction: column; gap: 2px; }
.trio .k { font-family: var(--mono); font-size: 12px; color: var(--meta); letter-spacing: .04em; text-transform: uppercase; }
.trio .v { font-size: 26px; font-weight: 900; line-height: 1.1; }
.trio .c { font-family: var(--mono); font-size: 12px; color: var(--meta); }

.facts { display: flex; flex-wrap: wrap; gap: 0 28px; margin: 14px 0 10px; }
.facts > div { display: flex; flex-direction: column; gap: 1px; padding-left: 12px; border-left: 2px solid var(--hair); }
.facts .k { font-family: var(--mono); font-size: 12px; color: var(--meta); letter-spacing: .04em; text-transform: uppercase; }
.facts .v { font-size: 22px; font-weight: 800; line-height: 1.15; }
.facts > div:first-child { border-left-color: var(--red); }
.facts > div:first-child .v { font-size: 30px; font-weight: 900; }

.fig-svg { margin-top: 10px; }
.fig-svg svg text { font-family: var(--sans); }

.tip { background: var(--ink); color: #fff; font-size: 12.5px; line-height: 1.45; padding: 7px 10px; border-radius: 3px; transform: translate(-50%, -120%); white-space: nowrap; z-index: 5; }
.tip b { font-weight: 800; }

.fig.muted .fig-svg { opacity: .55; }

@media (max-width: 1000px) {
  .pulse-grid, .static-summary { grid-template-columns: repeat(2, 1fr); }
  .multi3 { grid-template-columns: 1fr; gap: 20px; }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .wrap { margin: 0; border: 0; }
  .pad { padding-left: 16px; padding-right: 16px; }
  .mast-title .bp { font-size: 32px; letter-spacing: -1px; }
  .mast-title .dd { font-size: 40px; }
  .sections ul { justify-content: flex-start; gap: 22px; }
  .sections a { font-size: 12px; padding: 10px 0 7px; }
  .mast-util { gap: 14px; }
  .intro { grid-template-columns: 1fr; gap: 18px; padding-top: 28px; }
  /* Scaled, not fixed: „Икономиката и всекидневието" is one unbreakable word
     wider than a 320px screen at 54px, and it would set the page's width. */
  .intro h1 { font-size: clamp(34px, 12vw, 54px); }
  .intro .q { font-size: 21px; }
  .chap { padding-top: 34px; }
  .fig { margin-bottom: 28px; }
  .chap-hd { margin-bottom: 20px; }
  .chap-no { font-size: 48px; }
  .chap-title { font-size: 24px; }
  .pulse-grid, .static-summary { grid-template-columns: 1fr; border-left: 0; }
  .pulse { padding-left: 0; padding-right: 0; border-right: 0; }
  .static-summary div { padding-left: 0; border-right: 0; }
  .pairs { grid-template-columns: 1fr; gap: 32px; }
  .figs { grid-template-columns: 1fr; }
  .figs > div { padding-left: 0; border-right: 0; border-bottom: 1px solid var(--hair); }
  .hb { grid-template-columns: 118px 1fr 54px; column-gap: 8px; }
  .hb .l { font-size: 13px; }
  .pct, .pct-axis { grid-template-columns: 112px 1fr 84px; column-gap: 10px; }
  .pct .r { font-size: 13px; }
  .feed li { grid-template-columns: 70px 1fr; row-gap: 0; }
  .feed .p, .feed a { grid-column: 2; }
  .feed a { text-align: left; }
  .bal { grid-template-columns: 1fr; }
  .ledger { gap: 18px; }
  .ledger b { font-size: 22px; }
  .hm { --hm-label: 104px; }
  .hm .rl { font-size: 13px; }
  .hm-cue { display: block; }
  .hb { grid-template-columns: 118px 1fr minmax(54px, max-content); }
  .trio { grid-template-columns: 1fr; gap: 10px; }
  .facts { gap: 10px 20px; }
  .facts .v { font-size: 19px; }
  .facts > div:first-child .v { font-size: 24px; }
  .prose h1 { font-size: 34px; }
  /* the catalogue as cards: one series per block, every cell labelled */
  .method thead { display: none; }
  .method, .method tbody, .method tr, .method td { display: block; width: 100%; }
  .method tr { border-bottom: 2px solid var(--hair); padding: 10px 0; }
  .method td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 96px 1fr; gap: 8px; }
  .method td::before { content: attr(data-k); font-family: var(--mono); font-size: 12px; color: var(--meta); }
  .method td > * { min-width: 0; }
  .method code { word-break: break-all; }
  /* dataset codes and source links (prc_hpi_q, long file names) break where
     they must rather than push the page wider */
  .method td, .method a, .prose li, .prose li a, .prose p a { overflow-wrap: anywhere; }
  .fig-ft .r { gap: 8px 14px; }
  .tip { white-space: normal; max-width: 240px; }
}

/* ── V2 QA additions ──────────────────────────────────────────────────────*/
.chart .axis-cap { font-family: var(--mono); font-size: 12px; fill: var(--meta); }
.scale-note { font-size: 13px; color: var(--dim); margin-top: 6px; }
.scale-note[hidden] { display: none; }
.mode-cap { font-family: var(--mono); font-size: 12px; color: var(--meta); margin-top: 6px; }
.sector-name { font-weight: 700; color: var(--ink2); margin: 10px 0 4px; }
.seg.wrap { flex-wrap: wrap; border: 0; gap: 4px; }
.seg.wrap button { border: 1px solid var(--ink); }
.seg.wrap button + button { border-left: 1px solid var(--ink); }
.seg button:disabled { color: var(--pale); cursor: not-allowed; background: repeating-linear-gradient(45deg, var(--paper) 0 4px, var(--surf) 4px 6px); }
.seg-note { align-self: center; font-family: var(--mono); font-size: 12px; color: var(--meta); padding: 0 10px; }
.legend i.dash { background: repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 8px) !important; }
.hm-cue { display: none; font-family: var(--mono); font-size: 12px; color: var(--meta); margin-bottom: 6px; }
.hm-cue[hidden] { display: none !important; }
.hm-scroll { scrollbar-width: thin; scrollbar-color: var(--axis) transparent; }
.hm .rl.hd { position: sticky; left: 0; background: var(--paper); z-index: 1; }
.hm .lv, .hm .lv-hd { position: sticky; right: 0; background: var(--paper); z-index: 1; }
.hm .cell.na { background: repeating-linear-gradient(45deg, var(--paper) 0 4px, var(--axis) 4px 5px); border: 1px dashed var(--axis); }
.drill-keys { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; align-items: baseline; }
.drill-keys button { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; font-size: 13px; }
.drill-keys button[aria-pressed="true"] { font-weight: 800; text-decoration: none; }
.drill-keys a { color: var(--navy); }
.drill { margin-top: 12px; }
.drill-t { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.fig-ft .lib a, .fig-ft .ctx a { color: var(--meta); }
.fig-ft .ctx { font-family: var(--mono); }
.csv { display: inline-block; margin: 6px 10px; }
.tbl-wrap caption { caption-side: top; text-align: left; font-family: var(--mono); font-size: 12px; color: var(--meta); padding: 6px 10px; }
.lib-filter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding-top: 28px; }
.lib-filter input { font: inherit; font-size: 15px; padding: 8px 12px; border: 1px solid var(--ink); min-width: min(360px, 100%); flex: 1 1 260px; background: var(--paper); }
.lib-filter .chips { flex: 1 1 100%; }
.lib-count:empty { display: none; }
.method-wrap { overflow-x: auto; }
.bal .v { font-variant-numeric: tabular-nums; }
.fig-svg:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
section[hidden], figure[hidden] { display: none; }
.method tr[hidden] { display: none; }

@media (max-width: 760px) {
  .hm-cue { display: block; }
}
@media (max-width: 760px) {
  .scale { gap: 18px 10px; }
  .scale-bar { order: 1; flex-basis: 100%; margin-bottom: 8px; }
  .scale-na { margin-left: 0; order: 2; }
}

/* ── Двигателят: растежът сега ─────────────────────────────────────────────*/
.multi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.multi4 h4 { font-size: 13.5px; font-weight: 700; display: flex; justify-content: space-between;
  align-items: baseline; gap: 8px; margin-bottom: 4px; line-height: 1.25; }
.multi4 h4 b { font-size: 17px; font-weight: 800; white-space: nowrap; }
.lede-line { font-size: 15px; color: var(--ink2); margin: 2px 0 10px; }
.explainer { margin-top: 10px; border-left: 2px solid var(--hair); padding-left: 12px; }
.explainer summary { font-size: 13px; font-weight: 700; color: var(--navy); cursor: pointer;
  padding: 4px 0; min-height: 32px; display: flex; align-items: center; }
.explainer p { font-size: 13px; color: var(--dim); margin-bottom: 6px; max-width: 720px; }
@media (max-width: 1000px) { .multi4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .multi4 { grid-template-columns: 1fr; gap: 18px; } }

/* ── Touch targets and long tables ────────────────────────────────────────*/
@media (max-width: 760px) {
  .mast-util a { min-height: 44px; display: inline-flex; align-items: center; }
  .mast-top { min-height: 44px; }
  .sections a { padding: 14px 0 12px; }
  .chapnav a { min-height: 40px; align-items: center; padding: 8px 8px; }
  .foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .fig-ft .linkbtn, .fig-ft a { min-height: 40px; display: inline-flex; align-items: center; }
  /* the series name and the header stay in view while the values scroll */
  .tbl-wrap td:first-child, .tbl-wrap th:first-child {
    position: sticky; left: 0; background: var(--paper); z-index: 1;
  }
  .tbl-wrap thead th:first-child { background: var(--surf); z-index: 2; }
}

/* ── Very narrow screens (320 px) ─────────────────────────────────────────*/
@media (max-width: 400px) {
  .scale-bar div { width: 22px; }
  .scale { font-size: 12px; }
  .pct, .pct-axis { grid-template-columns: 92px 1fr 66px; column-gap: 8px; }
  .pct .l { font-size: 12.5px; }
  .pct .r { font-size: 12px; }
  .hb { grid-template-columns: 100px 1fr minmax(48px, max-content); column-gap: 6px; }
  /* the date and three utility links ("About the project", "Methodology",
     the language) no longer fit one line at 320: the links wrap below */
  .mast-top { flex-wrap: wrap; row-gap: 2px; }
  .mast-util { flex-wrap: wrap; gap: 0 12px; }
  .mast-util .lang { padding-left: 12px; }
}

/* the intro's meta column needs the full width below a tablet */
@media (max-width: 900px) {
  .intro { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 400px) {
  .pct-axis div:nth-child(2) span:nth-child(2) { display: none; }
}