/* type.css — THE TYPE SYSTEM. One heading face, one body face, one ladder, one colour rule.
   ============================================================================================

   WHY THIS FILE EXISTS (George, 2026-09-28: "on the homepage alone I can see five different
   fonts, with different sizes and different colours ... fix it so everything is hierarchical").
   Measured before this file (tools/type-audit.mjs, 45 routes at 1440): two brand faces plus a
   stray Arial, but 6 h1 sizes, 15 h2 sizes, 12 h3 sizes, 65 body-copy combinations and five
   text colours on white. Fifteen stylesheets and twenty inline <style> blocks had each drifted
   their own way. Rewriting every drifted rule at source would touch all of them and still miss
   some; this file states the law once and wins by being the law.

   HOW IT WINS. Every declaration here is !important, on purpose. This file is loaded on every
   page immediately before scale.css (tools/sync-type.mjs stamps it), so it outranks every
   stylesheet and every inline block regardless of specificity. scale.css keeps its job (the
   viewport-height ceilings): the h1 size below is wrapped in the same --cap-h1 ceiling scale.css
   defines, so a short screen still scales the hero headline down.

   SPECIFICITY INSIDE THIS FILE is deliberate, because every rule is !important and only
   specificity and order decide between them. Scopes use :where() (adds nothing), element lists
   sit in :is() with elements only, and class-based rules come after the element rules they
   refine. ⚠ :is() and :not() take the specificity of their MOST specific argument: never drop a
   compound like `.stat .n` into an element list, it silently lifts the whole rule.

   THE LADDER (px at ≥1440 → at 390)
     h1 80 → 44.8   h2 48 → 32   h3 32 → 26   h4 24 → 22   h5 20 → 19   h6 17
     body 18 → 17   small 16     caption 14   label 13 (uppercase, 500, tracked)
   Headings and display numerals: GT Super Display 300. Everything else: Unica77 300, bold = 500.

   THE COLOUR RULE. On white: headings and body in --blue (cobalt), secondary lines (captions,
   notes, labels, list sub-lines) in --muted. On navy: white, secondary at 78% white. The dark
   containers are enumerated in §5; add a new navy band there when you build one. The top-ten
   chart bars keep their own colour law (red means Bulgaria, no grey) and are excluded from the
   colour rules only.

   SCOPE. main, footer, the certification band and the EU funding band. The header, the dock and
   the contact chip are measured chrome (see CLAUDE.md, measure-navfit) and stay on chrome.css.

   HOW TO CHANGE TYPE FROM NOW ON: change it here. A size that is not on the ladder is a bug.
   Verify with `node tools/type-audit.mjs` (it lists every off-ladder size and stray colour). */

/* ── 0 · THE BULGARIAN PAGES (George, 2026-10-05) ────────────────────────────────
   Neither licensed face has a Cyrillic glyph, and Grilli sells GT Super for Latin only. George's
   call (option B of two he was shown): on the Bulgarian pages every LATIN letter stays in our own
   faces, exactly as on the English site, and only Cyrillic letters come from a companion:
   · Headings: GT Super, Cyrillic from Source Serif 4 (display optical size), his pick. Its Light
     measured 23% lighter than GT Super Light, so the file is pinned at weight 350, which matched
     GT Super's ink to the percent. Pinned with HarfBuzz (subset-font, variationAxes) into a static
     file, because a composite family only blends faces declared at the same weight.
   · Body: Unica77, Cyrillic from Inter Light (measured 102% of Unica77's ink). A PLACEHOLDER: George
     is buying LL Unica77 Cyrillic (Lineto). When its Light woff2 is in public/fonts, replace both
     "ZC BG Sans" faces with one face pointing at it (it covers Latin too), drop the size-adjust,
     and set --t-track back to .02em. Lineto's trial may not go on a public server, so not Vercel.
   size-adjust matches each companion's x-height to the brand face (45 vs 49, 55 vs 52 units at
   100px). The "ZC BG" names keep the English pages untouched and let type-audit check the pairs.
   SIL OFL, self-hosted; sync-fonts preloads all four files on public/bg/ only. */
@font-face{font-family:"ZC BG Serif";src:url("/fonts/GTSuperDisplay-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ZC BG Serif";src:url("/fonts/SourceSerif4Display-350-cyr.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;size-adjust:108%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1}
@font-face{font-family:"ZC BG Sans";src:url("/fonts/Unica77LLWeb-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"ZC BG Sans";src:url("/fonts/Inter-Light-cyr.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap;size-adjust:95%;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1}
html:lang(bg){
  --serif:"ZC BG Serif","GT Super Display","GT Super Fallback",Georgia,serif;
  --sans:"ZC BG Sans","Unica77 LL Web","Unica77 Fallback",system-ui,-apple-system,Arial,sans-serif;
  --font-head:var(--serif);--font-body:var(--sans);
  --t-track:0;   /* Inter is looser than Unica77: +0.02em read as spaced-out. Back to .02em with Unica77 Cyrillic. */
  --t-lead:1.7}  /* Cyrillic sets an even, dense texture; a little more leading reads easier. */
/* Measures on the Bulgarian pages (George: "it feels cramped", 2026-10-05). Her headings run
   longer than the English ones, so their caps get more room (headline 22ch against 20, section
   heads and closing lines 30ch against 22 to 26: at 26ch five of them broke into three lines
   where two fit, and read narrow, 2026-10-06), the long Bulgarian paragraphs use the column where
   the short English ones sat in a narrow one, and the testimonial quotes take one rung down the
   ladder (h4 to h5). No section moves. The caps are in ch, which comes from GT Super's "0". */
:lang(bg) :is(.hero-d,.cf21-hero) h1{max-width:22ch;text-wrap:balance}
:lang(bg) :is(.p21-split .p21-txt h2,.cf21-pack .p21-txt h2){max-width:22ch}
:lang(bg) :is(.cf21-q .p21-txt h2:not(.cf21-lede),.cf21-list h2,.p21-list h2,.p21-cards > .p21-wrap > h2){max-width:30ch}
:lang(bg) .cf21-cta .p21-cta-line{max-width:30ch}
:lang(bg) :is(.cmpzone .cmp-scenario,.faqsplit .left h2){max-width:none}
:lang(bg) .v18-team .teamhead .tlede{max-width:46rem}
html:lang(bg) :where(main) .v16-tmo .q{font-size:var(--t-h5)!important;line-height:1.3!important}
/* her hero subtitle runs five lines on a phone at the h3 rung and pushed the headline up under
   the header (30px against 215 in English); one rung down there (2026-10-06) */
@media (max-width:680px){ html:lang(bg) :where(main) .v21-hero-sub{font-size:var(--t-h4)!important;line-height:1.25!important} }
/* the FAQ page's group headings sit in a 384px column; at the h2 rung her longer titles fell into
   three lines ("Данъчен статут / на / физически лица"), so on BG they take the h3 rung (2026-10-06) */
html:lang(bg) :where(main) .faqp-sec .left h2{font-size:var(--t-h3)!important;line-height:1.15!important}
/* The one Bulgarian word on the English pages (the language menu) takes the Bulgarian body face. */
[lang="bg"]:not(html){font-family:"ZC BG Sans","Unica77 LL Web",Arial,sans-serif}
/* Both faces carry Bulgarian letterforms (д drawn like g, т like m), which lang="bg" switches on.
   Her current site shows the standard forms, so the pages keep those. Delete this line to
   switch the Bulgarian forms on. */
html:lang(bg){font-feature-settings:"locl" 0}

:root{
  --font-head:"GT Super Display","GT Super Fallback",Georgia,serif;
  --font-body:"Unica77 LL Web","Unica77 Fallback",system-ui,-apple-system,Arial,sans-serif;
  --t-h1:clamp(2.8rem,5.56vw,5rem);
  --t-h2:clamp(2rem,3.34vw,3rem);
  --t-h3:clamp(1.625rem,2.23vw,2rem);
  --t-h4:clamp(1.375rem,1.67vw,1.5rem);
  --t-h5:clamp(1.1875rem,1.39vw,1.25rem);
  --t-h6:1.0625rem;
  --t-body:clamp(1.0625rem,1.25vw,1.125rem);
  --t-small:1rem;
  --t-caption:.875rem;
  --t-label:.8125rem;
  --t-track:.02em;            /* body tracking, tuned for Unica77; 0 on the Bulgarian pages (§0) */
  --t-lead:1.6;               /* body leading; 1.7 on the Bulgarian pages (§0) */
  --t-ink:var(--blue,#011E93);
  --t-ink-2:var(--muted,#414E67);
  --t-paper:#fff;
  --t-paper-2:rgba(255,255,255,.78);
}

/* ── 1 · HEADINGS (0,0,1) ─────────────────────────────────────────────────── */
:where(main,footer,.certband,.v21-eufund) :is(h1,h2,h3,h4,h5,h6){
  font-family:var(--font-head)!important;font-weight:300!important;font-style:normal!important;
  letter-spacing:-.012em!important;text-transform:none!important;text-decoration:none!important;
}
:where(main,footer,.certband,.v21-eufund) h1{font-size:min(var(--t-h1),var(--cap-h1,100vh))!important;line-height:1.02!important}
:where(main,footer,.certband,.v21-eufund) h2{font-size:var(--t-h2)!important;line-height:1.08!important}
:where(main,footer,.certband,.v21-eufund) h3{font-size:var(--t-h3)!important;line-height:1.15!important}
:where(main,footer,.certband,.v21-eufund) h4{font-size:var(--t-h4)!important;line-height:1.25!important}
:where(main,footer,.certband,.v21-eufund) h5{font-size:var(--t-h5)!important;line-height:1.3!important}
:where(main,footer,.certband,.v21-eufund) h6{font-size:var(--t-h6)!important;line-height:1.3!important}
/* ── 1b · RUNG BY ROLE (0,1,1) ─────────────────────────────────────────────
   The tag gives the default rung. A heading that sits in a narrow card, or that is a whole
   sentence, takes a LOWER rung of the same ladder: an h3 at 32px in a 173px column runs to four
   lines, and a 220-character h2 at 48px fills a screen (both found 2026-09-29). Still the
   ladder, never a size of its own. tools/type-audit.mjs carries the same list (RUNGS): add a
   line in both places. */
:where(main) :is(h2.cf21-lede,.p21-article-body h2){font-size:var(--t-h3)!important;line-height:1.15!important}
:where(main) :is(.p21-card h3,.p21-article-body h3){font-size:var(--t-h4)!important;line-height:1.25!important}
:where(main) :is(.v20-tl-card h3,h3.svc-inc-h){font-size:var(--t-h5)!important;line-height:1.3!important}
/* the ad landing pages (lp.css, 2026-10-13): the form card's heading sits in a narrow card; the
   numbered points in the navy split are item heads under a section head; the e-commerce page puts a
   whole sentence over the partner band */
:where(main) :is(.lpx-card h2){font-size:var(--t-h4)!important;line-height:1.25!important}
:where(main) :is(.lpx-points h3){font-size:var(--t-h5)!important;line-height:1.3!important}
:where(main) :is(.lpx-logos-h){font-size:var(--t-h4)!important;line-height:1.25!important}   /* a whole sentence over the partner band */
/* text inside a heading is the heading (0,0,1) */
:where(main,footer,.certband,.v21-eufund) :where(h1,h2,h3,h4,h5,h6) *{
  font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;
  line-height:inherit!important;letter-spacing:inherit!important;color:inherit!important;text-transform:inherit!important;
}

/* ── 2 · BODY (0,0,1) ─────────────────────────────────────────────────────── */
/* every text element that is not a heading and not display text takes the body face */
:where(main,footer,.certband,.v21-eufund) :where(*):not(:where(
  h1,h2,h3,h4,h5,h6,:is(h1,h2,h3,h4,h5,h6) *,
  .p21-cta-line,.p21-statement-line,.tp21-stmt,.v21-hero-sub,.acc summary,.q,.vision,.stat .n,.p21-fact b,.cc-big,.clock,.tec10-big,
  :is(.p21-cta-line,.p21-statement-line,.tp21-stmt,.v21-hero-sub,.acc summary,.q,.vision,.stat .n,.p21-fact b,.cc-big,.clock,.tec10-big) *,
  svg,svg *
)){font-family:var(--font-body)!important;font-style:normal!important}
/* block-level body copy: one size, one weight, one measure */
:where(main,.certband,.v21-eufund) :is(p,li,dd,blockquote,address,td,legend,summary){
  font-size:var(--t-body)!important;font-weight:300!important;line-height:var(--t-lead)!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
/* inline text inherits from its block */
:where(main,footer,.certband,.v21-eufund) :is(span,a,b,strong,em,i,u,s,sup,sub,time,abbr,mark,q,div){
  font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important}
:where(main,footer,.certband,.v21-eufund) :is(sup,sub){font-size:.75em!important;line-height:0!important}
:where(main,footer,.certband,.v21-eufund) :is(em,i){font-style:italic!important}
/* bold is 500, never 600 or 700 (0,1,0) */
:where(main,footer,.certband,.v21-eufund) :is(b,strong,.rtxt,.tec10-name):not(:where(:is(h1,h2,h3,h4,h5,h6) *)){font-weight:500!important}

/* ── 3 · SMALL, CAPTION, LABEL (0,1,0) and (0,2,0) ────────────────────────── */
:where(main,footer,.certband,.v21-eufund) :is(figcaption,small,.sub,.qual,.v21-more-tip,.form-note,.formlede,.nowline,.tec10-sub,.tec10-leadcap,.v20-notlisted,.cnote,.cc-cap,.tec10-name,.v21-eufund-sub,.v21-eufund-ref,.p21-card-date,.p21-article-meta,.tlede){
  font-size:var(--t-small)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
:where(main,footer,.certband,.v21-eufund) :is(.stat .c,.p21-fact span,.v21-eufund dd,.v21-eufund dt,.tcard dd){
  font-size:var(--t-small)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
/* the tax picker's three lines step down (Pavlina, 13 Oct): .cmp-with is body, .v20-notlisted
   small, the example scenario a caption, since it is a disclaimer */
:where(main,footer,.certband,.v21-eufund) :is(.f-bottom,.zf-est,.certband p,.p21-note,.cmp-scenario){
  font-size:var(--t-caption)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important}
:where(main,footer,.certband,.v21-eufund) :is(label,th,dt,cite,.brole,.lm,.eyebrow,.tec10-eyebrow,.v21-hero-trust,.cc-h,.cc-tag,.tec10-badge,.tec10-country,.p21-card-tag,.tp21-eyebrow){
  font-size:var(--t-label)!important;font-weight:500!important;line-height:1.4!important;letter-spacing:.1em!important;text-transform:uppercase!important;font-style:normal!important}
/* a checkbox consent line is a sentence, not a field label */
:where(main,footer,.certband,.v21-eufund) :is(label.consent,.zz .zz){
  font-size:var(--t-small)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
:where(main,footer,.certband,.v21-eufund) :is(.v21-eufund dt){
  font-size:var(--t-small)!important;font-weight:500!important;line-height:1.5!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
/* buttons and dotlinks keep their own measured box; only the face and weight are asserted */
:where(main,footer,.certband,.v21-eufund) :is(.btn,button){font-family:var(--font-body)!important;font-weight:500!important;font-size:1rem!important;letter-spacing:.03em!important;text-transform:none!important}
:where(main,footer,.certband,.v21-eufund) :is(.dotlink){font-family:var(--font-body)!important;font-weight:400!important;font-size:var(--t-small)!important;letter-spacing:var(--t-track)!important;text-transform:none!important}
/* footer: everything small except the column heads */
:where(footer) :is(p,li,a,span,div){font-size:var(--t-small)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important}
:where(footer) :is(.f-bottom,.zf-est){font-size:var(--t-caption)!important}

/* the lede is the step above body copy, never below it (0,1,1) */
:where(main) p.p21-lede{font-size:var(--t-h5)!important;font-weight:300!important;line-height:1.5!important;letter-spacing:var(--t-track)!important}
/* copy inside the five timeline cards: the pinned panel is fitted to this size (0,1,1) */
:where(main) .v20-tl-card p{font-size:var(--t-caption)!important;line-height:1.5!important}
/* the FAQ index numerals are chips, not emphasis: upright, label size, and white when the chip fills */
:where(main) .faqp-index a i{font-style:normal!important;font-size:var(--t-label)!important;letter-spacing:.04em!important;line-height:1!important}
:where(main) .faqp-index a:hover i{color:var(--t-paper)!important}

/* ── 4 · DISPLAY TEXT that is not a heading element but plays one (0,2,0) ───
   Each is pinned to a rung of the same ladder. Listed after §2 and §3 so it wins. */
:where(main) :is(.p21-cta-line,.p21-statement-line,.tp21-stmt,.zz .zz){
  font-family:var(--font-head)!important;font-weight:300!important;letter-spacing:-.012em!important;
  font-size:var(--t-h2)!important;line-height:1.08!important;text-transform:none!important}
:where(main) :is(.v21-hero-sub,.zz .zz){
  font-family:var(--font-head)!important;font-weight:300!important;letter-spacing:-.012em!important;
  font-size:var(--t-h3)!important;line-height:1.15!important;text-transform:none!important}
:where(main) :is(.acc summary,.q,.zz .zz){
  font-family:var(--font-head)!important;font-weight:300!important;letter-spacing:-.012em!important;
  font-size:var(--t-h4)!important;line-height:1.25!important;text-transform:none!important}
/* the ad pages carry her long testimonials (up to 50 words): one rung down, or every card in the
   slider grows to the longest (2026-10-13) */
:where(main) .lpx-proof .q{font-size:var(--t-h5)!important;line-height:1.35!important}
:where(main) :is(.vision,.zz .zz){
  font-family:var(--font-head)!important;font-weight:300!important;letter-spacing:-.012em!important;
  font-size:var(--t-h5)!important;line-height:1.3!important;text-transform:none!important}
/* display numerals: the "60+" tiles, the facts strip, the calculator result, the top-ten card */
:where(main) :is(.stat .n,.p21-fact b,.cc-big,.clock,.tec10-big,.zz .zz){
  font-family:var(--font-head)!important;font-weight:300!important;letter-spacing:-.012em!important;
  font-size:var(--t-h2)!important;line-height:1!important;text-transform:none!important}
:where(main) :is(.p21-cta-line,.p21-statement-line,.tp21-stmt,.v21-hero-sub,.acc summary,.q,.vision,.stat .n,.p21-fact b,.cc-big,.clock,.tec10-big) *{
  font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;font-style:inherit!important;
  line-height:inherit!important;letter-spacing:inherit!important;text-transform:inherit!important;
}

/* ── 4b · LINE ENDINGS (George, 2026-10-06: "no need for the line break on the last word") ──
   No paragraph, heading or label ends on one word alone. `pretty` re-breaks only the last few
   lines of a block to avoid it, so the rest of the text keeps its breaks. Inherited, so set once
   on the containers; a rule that asks for `balance` (short heads, the forms) still wins.
   Chrome, Edge and Safari do it; Firefox wraps as before. Not !important on purpose. */
:where(main,footer,.certband,.v21-eufund){text-wrap:pretty}
/* each sentence of a multi-sentence heading, wrapped by site-runtime.js: it breaks between them */
:where(main) .zs{display:inline-block}
/* a code that must not break at its hyphen ("CZE-2600205") */
:where(main,footer,.certband) .nb{white-space:nowrap}
/* a table header is one colour: <strong> in some cells had lifted them to ink */
:where(main) th :is(b,strong){color:inherit!important}

/* ── 5 · COLOUR ─────────────────────────────────────────────────────────────
   On white (0,1,1): ink. Secondary lines (0,2,0): muted. Then the navy containers (0,4,0)
   override with white. The top-ten chart (.tecchart) keeps its own colours. */
:where(main,.certband,.v21-eufund) :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote,address,legend,summary,label,figcaption,small,cite,span,a,b,strong,em,i,div):not(:where(
  .btn,.btn *,button,button *,.tecchart *,:is(h1,h2,h3,h4,h5,h6) *
)){color:var(--t-ink)!important}
:where(main,.certband,.v21-eufund) :is(figcaption,small,cite,label,th,dt,.sub,.qual,.v21-more-tip,.form-note,.formlede,.nowline,.brole,.lm,.eyebrow,.p21-card-date,.p21-article-meta,.cc-h,.cc-cap,.cnote,.v21-eufund-ref,.zz .zz):not(:where(.tecchart *)){color:var(--t-ink-2)!important}
:where(main,.certband,.v21-eufund) :is(.stat .c,.p21-fact span,.v21-eufund dd,.v21-eufund dt,.tcard dd){color:var(--t-ink-2)!important}

/* navy containers: everything white */
:is(
  footer,.hero-d,.p21-hero:not(.tint),.p21-split.navy,.split.navy,.v16-team,.p21-proof,.p21-statement,
  .p21-cta:not(.cf21-cta,.ab21-cta,.faqp-cta,.lpf21-cta,.lpe21-cta,.lpr21-cta,.tp21-cta),
  .v20-tl-item.is-on .v20-tl-card,.tec10-disc,.ccard.win,.folder .sb,td.bg,th.bg
) :is(h1,h2,h3,h4,h5,h6,p,li,dd,dt,td,th,blockquote,address,legend,summary,label,figcaption,small,cite,span,a,b,strong,em,i,div):not(:where(
  .btn,.btn *,button,button *,.tecchart *,.social a,.social a *,.tec10-rank,.lpx-card,.lpx-card *
)){color:var(--t-paper)!important}
/* LIGHT ISLANDS inside a navy band keep a dark colour: a white disc or tile with white text is
   invisible (2026-09-29: the top-ten rank numbers and the footer social icons both went blank).
   Anything new that paints its own light ground inside navy goes into the exclusion above. */
:where(main) .tec10-rank{color:var(--t-ink)!important;font-size:var(--t-caption)!important}
/* the navy cells of the tax table are their own container */
:where(main) :is(td.bg,th.bg,.zz .zz .zz){color:var(--t-paper)!important}
:is(
  footer,.hero-d,.p21-hero:not(.tint),.p21-split.navy,.split.navy,.v16-team,.p21-proof,.p21-statement,
  .p21-cta:not(.cf21-cta,.ab21-cta,.faqp-cta,.lpf21-cta,.lpe21-cta,.lpr21-cta,.tp21-cta),
  .v20-tl-item.is-on .v20-tl-card,.tec10-disc,.ccard.win,.folder .sb,td.bg,th.bg
) :is(figcaption,small,cite,label,th,dt,.sub,.qual,.form-note,.brole,.lm,.eyebrow,.p21-card-date,.zf-est,.f-bottom,.tec10-sub,.tec10-leadcap,.tcard dd,.zz .zz):not(:where(
  .btn *,button *,.tecchart *,.lpx-card *
)){color:var(--t-paper-2)!important}