/* iotovavalchev.bg LITE (08.09.2026) — identity subset of src/app/tokens.css + site.css + campaign.css (012c85e/c35e960):
   Montserrat self-hosted, accent = the OFFICIAL campaign green #45ae9a (HQ via the operator, 22.09 22:50; was mint #80bf9f / #376c52) as the fill (hero, masthead, pills), and #317c6e (same hue, darker: 5:1 on white) for small accent text, neutral surfaces.
   /assets/lite/montserrat-cyrillic-0b00fbd6ed.woff2 / /assets/lite/montserrat-latin-6438d7b8ea.woff2 are replaced by build.mjs with the hashed font paths. No external requests. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/lite/montserrat-cyrillic-0b00fbd6ed.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/assets/lite/montserrat-latin-6438d7b8ea.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --color-bg: #ffffff; --color-bg-alt: #f5f5f7; --color-surface: #ffffff; --color-border: #d2d2d7; --color-border-soft: #e5e7eb;
  --color-text: #1d1d1f; --color-text-secondary: #6e6e73;
  --color-accent: #317c6e; --color-accent-fill: #45ae9a; --color-on-accent: #0b0f0c; --color-success-bg: #e8f5f2;
  --color-btn-secondary-bg: #f5f5f7; --color-btn-secondary-bg-hover: #e8e8ed;
  --color-footer-bg: #000000; --color-footer-text: #a1a1a6;
  --color-red: #d62612;   /* the red rule of the campaign visuals (campaign.css --bg-red) */
  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-display: var(--font-sans);
  --text-body-md: 1rem; --text-body-sm: 0.875rem; --text-body-xs: 0.75rem; --text-eyebrow: 0.875rem;
  --text-section-title: clamp(2rem, 4vw + 0.5rem, 3.25rem); --text-sub-heading: clamp(1.25rem, 2vw, 1.75rem);
  --radius-md: 12px; --radius-lg: 16px; --radius-full: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --pad-section-x: clamp(16px, 4vw, 32px); --max-container: 80rem; --max-copy: 42.5rem;
  color-scheme: light;
}
/* Light theme only (operator 08.09): no dark palette, no prefers-color-scheme override. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-feature-settings: "kern", "liga"; color: var(--color-text); background: var(--color-bg);
  font-size: var(--text-body-md); line-height: 1.5; min-height: 100dvh; display: flex; flex-direction: column; }
a { color: inherit; }
img { max-width: 100%; display: block; }
.stat { font-feature-settings: "tnum", "kern"; font-variant-numeric: tabular-nums; }
:focus { outline: none; } :focus-visible { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent); border-radius: inherit; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--color-surface); padding: 8px 12px; border-radius: 8px; }
.skip-link:focus { left: 8px; z-index: 10; }
.container { width: 100%; max-width: var(--max-container); margin-inline: auto; padding-inline: var(--pad-section-x); }
.measure { max-width: var(--max-copy); }

/* nav lockup (Nav.tsx / campaign.css) */
.nav { border-bottom: 1px solid var(--color-border-soft); background: var(--color-bg); }
.nav__inner { min-height: 76px; display: flex; align-items: center; }
.nav__brand { display: inline-flex; align-items: center; text-decoration: none; min-width: 0; }
.wordmark { display: inline-flex; flex-direction: column; gap: 4px; line-height: 1; min-width: 0; }
.wordmark__type { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.02em; font-size: clamp(0.9rem, 2vw, 1.05rem); color: var(--color-text); white-space: nowrap; }
.wordmark__type b { color: var(--color-accent); font-weight: 900; }
.wordmark__bar { width: 100%; height: 2px; border-radius: 999px; background: var(--color-border); margin-top: 4px; }
.wordmark__sub { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text-secondary); white-space: nowrap; }
@media (max-width: 1080px) { .wordmark__office { display: none; } .wordmark__type { font-size: 0.9rem; } }
@media (max-width: 380px) { .wordmark__type { font-size: 0.78rem; } .wordmark__sub { font-size: 0.6rem; } }

/* masthead: compact + sticky (operator 08.09) */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,0.94); backdrop-filter: saturate(160%) blur(8px); -webkit-backdrop-filter: saturate(160%) blur(8px); }
.nav__inner--mast { padding-block: 10px 9px; min-height: 0; }
.masthead { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--color-text); font-family: var(--font-display); line-height: 1; }
.masthead__names { font-weight: 700; font-size: clamp(1rem, 0.8vw + 0.75rem, 1.25rem); line-height: 1.1; letter-spacing: -0.015em; color: var(--color-accent-fill); white-space: nowrap; }
.masthead__rule { display: block; align-self: stretch; height: 3px; background: var(--color-red); margin: 5px 0 5px; border-radius: 1px; } /* full width of the names line (operator 08.09 16:45) */
.masthead__post { font-weight: 600; font-size: clamp(0.66rem, 0.4vw + 0.55rem, 0.8rem); letter-spacing: 0.02em; color: var(--color-text-secondary); white-space: nowrap; }
@media (max-width: 380px) { .masthead__names { font-size: 0.95rem; } }

/* type + buttons (site.css) */
.eyebrow { font-size: var(--text-eyebrow); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-3); }
.section-title { font-family: var(--font-display); font-weight: 700; font-size: var(--text-section-title); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 var(--space-4); }
.section-lead { font-size: 1.125rem; font-weight: 600; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 var(--space-8); }
.lite-hero { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 3.4vw + 0.7rem, 4rem); line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 var(--space-4); color: var(--color-accent-fill); text-wrap: balance; } /* the official campaign green #45ae9a (HQ, 22.09); sized for the full slogan „За България в сигурни ръце“ (operator 22.09) */
.lite-sub { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 1.4vw + 0.6rem, 1.7rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--space-6); max-width: 54rem; }
.rmembers.rmembers--cochairs { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .rmembers.rmembers--cochairs { grid-template-columns: 1fr; } }
.lite-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 2.6vw + 0.6rem, 2.75rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 var(--space-5); max-width: 52rem; }
.btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: 12px 18px; border-radius: var(--radius-full); font-weight: 600; font-size: var(--text-body-sm); text-decoration: none; border: 1px solid transparent; transition: background-color 150ms; }
.btn--secondary { background: var(--color-btn-secondary-bg); color: var(--color-text); }
.btn--secondary:hover { background: var(--color-btn-secondary-bg-hover); }

/* red underline from the campaign visual identity (operator 08.09): under the hero slogan and under every member name */
.u-red { display: inline-block; border-bottom: 0.07em solid var(--color-red); padding-bottom: 0.08em; line-height: 1.05; }
.u-red--sm { border-bottom-width: 2px; padding-bottom: 2px; line-height: 1.3; }
.rmember__name { align-self: flex-start; }

/* page frames */
.lite-main { flex: 1; padding-block: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 4.4vw, 3.5rem); }
.lite-main--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lite-main--center .lite-h1, .lite-main--center .lite-sub, .lite-main--center .section-lead { max-width: 46rem; }

/* press release (verbatim, operator 08.09) */
.press { text-align: left; margin: 0 auto var(--space-6); max-width: 46rem; }
.press__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.3vw + 0.7rem, 1.6rem); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--space-4); }
.press p { margin: 0 0 var(--space-3); font-size: var(--text-body-md); line-height: 1.6; color: var(--color-text); }

/* countdown */
.cd { display: flex; align-items: flex-start; justify-content: center; gap: clamp(6px, 2vw, 18px); margin: var(--space-4) 0 var(--space-6); }
.cd__unit { display: flex; flex-direction: column; align-items: center; min-width: 4.4ch; }
.cd__num { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.6rem, 9vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-text); }
.cd__lbl { margin-top: var(--space-2); font-size: var(--text-body-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.cd__sep { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 8vw, 4.4rem); line-height: 1; color: var(--color-accent); padding-top: 0.04em; }
.cd__note { font-weight: 600; color: var(--color-accent); margin: 0 0 var(--space-5); }
.lite-social { margin-top: var(--space-6); }
.lite-social__lead { margin: 0 0 var(--space-3); color: var(--color-text-secondary); font-size: var(--text-body-sm); font-weight: 600; }
.lite-social__links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* roster (site.css .member / campaign.css .rmember) */
.wall__subhead { margin: var(--space-10) 0 0; font-size: var(--text-sub-heading); font-weight: 700; }
.roster { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); margin-top: var(--space-6); }
@media (max-width: 1080px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .roster { grid-template-columns: 1fr; } }
.member { display: flex; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-6); }
.member__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: center; margin-bottom: var(--space-4); border: 2px solid var(--color-surface); box-shadow: 0 6px 18px rgba(0,0,0,0.12); }
.member__photo--initials { display: grid; place-items: center; font-weight: 700; font-size: 1.5rem; color: var(--color-accent); background: var(--color-bg-alt); }
.member__name { font-weight: 700; font-size: 1.125rem; margin: 0 0 var(--space-1); }
.member__role { font-size: var(--text-body-sm); color: var(--color-accent); font-weight: 600; margin: 0 0 var(--space-3); }
.member__blurb { font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.5; margin: 0; }
.roster-all { margin-top: var(--space-6); }
.roster-group { margin-top: var(--space-8); }
.roster-group:first-child { margin-top: 0; }
.roster-group__title { font-size: var(--text-body-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-soft); }
.rmembers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-6); }
@media (max-width: 1080px) { .rmembers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rmembers { grid-template-columns: 1fr; } }
.rmember { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border-soft); }
.rmember__photo, .rmember__initials { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.rmember__initials { display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: var(--color-accent); background: var(--color-bg-alt); }
.rmember__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rmember__name { font-weight: 700; }
.rmember__role { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.rmember__bio { font-size: var(--text-body-xs); color: var(--color-text-secondary); line-height: 1.5; }
.roster-credits { margin-top: var(--space-8); font-size: var(--text-body-xs); color: var(--color-text-secondary); }
.roster-credits summary { cursor: pointer; font-weight: 600; }
.roster-credits ul { margin: var(--space-3) 0 0; padding-left: 1.2em; columns: 2; column-gap: var(--space-6); }
@media (max-width: 640px) { .roster-credits ul { columns: 1; } }
.roster-credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* footer (site.css) */
.footer { background: var(--color-footer-bg); color: var(--color-footer-text); padding-block: var(--space-12); margin-top: auto; }
.footer__grid { display: grid; gap: var(--space-8); }
.footer a:hover { color: #fff; }
.footer__disclaimer { border: 1px solid rgba(255,255,255,0.16); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: var(--text-body-sm); display: inline-flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-5); color: #fff; }
.footer__small { font-size: var(--text-body-sm); line-height: 1.65; margin: 0; overflow-wrap: anywhere; }
.footer__social-lead { margin: var(--space-5) 0 var(--space-2); font-size: var(--text-body-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-footer-text); }
.footer__social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-body-sm); }
.footer__social a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.footer__social a:hover { text-decoration: underline; }

/* category pills (operator 08.09): counters + filter */
.pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.pill { appearance: none; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--text-body-sm); font-weight: 600; padding: 7px 12px; border-radius: var(--radius-full); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background-color 150ms, border-color 150ms; }
.pill:hover { background: var(--color-bg-alt); }
.pill.is-active { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.pill__n { font-size: var(--text-body-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-bg-alt); color: var(--color-text-secondary); }
.pill.is-active .pill__n { background: rgba(11,15,12,0.14); color: var(--color-on-accent); }
.roster-empty { color: var(--color-text-secondary); font-size: var(--text-body-sm); margin: var(--space-4) 0; }
[hidden] { display: none !important; }
.roster-credits-link { margin-top: var(--space-8); font-size: var(--text-body-xs); color: var(--color-text-secondary); text-align: center; }
.roster-credits-link a { color: inherit; text-decoration: underline; text-underline-offset: 2px; opacity: .7; }
.roster-credits--page { margin-top: var(--space-4); }

/* entrance (operator idea 08.09 15:45): the slogan fades in alone, the campaign's red rule draws under it, then the rest of
   the page arrives as one block. CSS only (CSP: no inline); content is visible wherever the class is absent or the
   keyframes do not run; prefers-reduced-motion gets the static page. One shot per page load, so the reload at the
   switch instant gives the ИК list the same entrance. */
@keyframes lite-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lite-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lite-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* typed slogan (operator 08.09 15:55; 22.09: 26 glyphs, 30 ms each, up to 32 covered; the last lands at 910 ms): glyphs pop in one by one, the rule and the rest wait for the last glyph */
@keyframes lite-type { from { opacity: 0; } to { opacity: 1; } }
.lite-main--reveal > .lite-hero .ch { animation: lite-type 1ms steps(1, start) both; }   /* steps(1, start): the glyph is on from the first active frame; steps(1, end) left glyphs with fractional-second delays (1.015s …) at opacity 0 in Chromium (float boundary at the 1 ms end) */
.lite-main--reveal > .lite-hero .ch:nth-child(1) { animation-delay: 160ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(2) { animation-delay: 190ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(3) { animation-delay: 220ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(4) { animation-delay: 250ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(5) { animation-delay: 280ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(6) { animation-delay: 310ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(7) { animation-delay: 340ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(8) { animation-delay: 370ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(9) { animation-delay: 400ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(10) { animation-delay: 430ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(11) { animation-delay: 460ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(12) { animation-delay: 490ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(13) { animation-delay: 520ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(14) { animation-delay: 550ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(15) { animation-delay: 580ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(16) { animation-delay: 610ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(17) { animation-delay: 640ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(18) { animation-delay: 670ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(19) { animation-delay: 700ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(20) { animation-delay: 730ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(21) { animation-delay: 760ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(22) { animation-delay: 790ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(23) { animation-delay: 820ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(24) { animation-delay: 850ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(25) { animation-delay: 880ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(26) { animation-delay: 910ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(27) { animation-delay: 940ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(28) { animation-delay: 970ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(29) { animation-delay: 1000ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(30) { animation-delay: 1030ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(31) { animation-delay: 1060ms; }
.lite-main--reveal > .lite-hero .ch:nth-child(32) { animation-delay: 1090ms; }
.lite-main--reveal > .lite-hero .u-red { position: relative; border-bottom-color: transparent; }
.lite-main--reveal > .lite-hero .u-red::after { content: ""; position: absolute; left: 0; right: 0; bottom: -0.07em; height: 0.07em; background: var(--color-red); transform: scaleX(0); transform-origin: 0 50%; animation: lite-rule 550ms cubic-bezier(0.16, 1, 0.3, 1) 1000ms both; }
.lite-main--reveal > :not(.lite-hero) { animation: lite-rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 1200ms both; }
@media (prefers-reduced-motion: reduce) {
  .lite-main--reveal > .lite-hero, .lite-main--reveal > .lite-hero .ch, .lite-main--reveal > .lite-hero .u-red::after, .lite-main--reveal > :not(.lite-hero) { animation: none; }
  .lite-main--reveal > .lite-hero .u-red { border-bottom-color: var(--color-red); }
  .lite-main--reveal > .lite-hero .u-red::after { display: none; }
}

/* members revealed as they scroll into view (operator 08.09 16:00): rows start hidden only where scripts run
   (app.js adds .is-in; any script failure shows everything), never in print, never with reduced motion. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .rmember { opacity: 0; transform: translateY(10px); }
  .rmember.is-in { opacity: 1; transform: none; transition: opacity 450ms cubic-bezier(0.16, 1, 0.3, 1), transform 450ms cubic-bezier(0.16, 1, 0.3, 1); }
}
@media print { .rmember { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* downloadable roster buttons at the bottom of the list (operator 08.09 16:50) */
.roster-downloads { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--color-border-soft); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); }

/* hero carousel (operator 08.09 18:55): full-bleed band under the slogan, three photos crossfading every 6 s, CSS only */
.carousel { position: relative; width: 100vw; margin: var(--space-2) 0 var(--space-8) calc(50% - 50vw); aspect-ratio: 21 / 9; max-height: 62vh; overflow: hidden; background: #111; }
@media (max-width: 640px) { .carousel { aspect-ratio: 4 / 3; max-height: none; } }
.carousel__slide { position: absolute; inset: 0; opacity: 0; animation: carousel-fade 18s linear infinite both; }
.carousel__slide:nth-child(1) { animation-delay: 0s; }
.carousel__slide:nth-child(2) { animation-delay: -12s; }
.carousel__slide:nth-child(3) { animation-delay: -6s; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; display: block; }
@keyframes carousel-fade { 0%, 27% { opacity: 1; } 33%, 94% { opacity: 0; } 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .carousel__slide { animation: none; } .carousel__slide:first-child { opacity: 1; } }

/* founding speeches (operator 08.09 19:40, layout 21:35): two verbatim speeches stacked, each a small photo at its natural
   aspect (no cropping) beside name, role and the lead paragraph; the full text in a CSS-only <details>; photos = Vlado's
   selection (dashed frame in --preview builds only) */
.speeches { margin: 0 0 var(--space-6); }
.speeches__sub { margin: var(--space-2) 0 var(--space-5); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-secondary); }
.speeches__list { display: grid; gap: var(--space-6); }
.speech { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-4) var(--space-8); align-items: start; padding-top: var(--space-6); border-top: 1px solid var(--color-border-soft); }
.speech__photo { width: 100%; height: auto; border-radius: var(--radius-md); background: var(--color-bg-alt); margin: 0; }
.speech__photo--placeholder { aspect-ratio: 3 / 2; display: grid; place-items: center; border: 1px dashed var(--color-border); color: var(--color-text-secondary); font-size: var(--text-body-xs); font-weight: 600; text-align: center; padding: var(--space-3); }
.speech__body { min-width: 0; }
.speech__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 0.9vw + 0.9rem, 1.5rem); line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.speech__role { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-secondary); }
.speech__lead { margin: 0 0 var(--space-3); padding: 2px 0 2px var(--space-4); border-left: 3px solid var(--color-accent-fill); max-width: 46rem; }   /* pull quote chosen by the team (08.09 22:45) */
.speech__lead p { margin: 0; font-size: 1.0625rem; line-height: 1.6; font-weight: 500; }
.speech__opening { margin: 0 0 var(--space-2); }   /* the speech starts here (operator 08.09 22:30): opening paragraphs, then the fold */
.speech__text p.speech__salut { margin-bottom: var(--space-1); }
.speech__text p.speech__salut + p:not(.speech__salut) { margin-top: var(--space-3); }
.speech__full summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 0; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-accent); }
.speech__full summary::-webkit-details-marker { display: none; }
.speech__full summary::before { content: ""; width: 0.45em; height: 0.45em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.1em) rotate(45deg); transition: transform 150ms; }
.speech__full[open] summary::before { transform: translateY(0.1em) rotate(-135deg); }
.speech__full summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.speech__less, .speech__full[open] .speech__more { display: none; }
.speech__full[open] .speech__less { display: inline; }
.speech__text { max-width: 46rem; }
.speech__full .speech__text { margin-top: var(--space-3); }
.speech__text p { margin: 0 0 var(--space-3); font-size: var(--text-body-md); line-height: 1.6; color: var(--color-text); }
@media (max-width: 720px) {
  .speech { grid-template-columns: 1fr; gap: var(--space-4); }
  .speech__photo { width: auto; max-width: 100%; max-height: 240px; }
  .speech__photo--placeholder { width: 100%; max-width: 320px; }
}

/* event gallery (operator 09.09 15:00): mosaic of 3:2 tiles (one 2×2 feature), CSS-only fold for the rest; or per-phase
   snap strips; <dialog> lightbox driven by app.js; thumbnails lazy via srcset */
.gallery { margin: var(--space-2) 0 var(--space-4); }
.gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: var(--space-2); margin-top: var(--space-4); }
@media (max-width: 1080px) { .gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } }
.gallery__tile { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-alt); }
.gallery__tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1); }
.gallery__tile:hover img { transform: scale(1.03); }
.gallery__tile--big { grid-column: span 2; grid-row: span 2; }
.gallery__rest { margin-top: var(--space-3); }
.gallery__rest[open] > .gallery__grid { margin-top: var(--space-3); }
.strip { margin-top: var(--space-5); }
.strip__title { margin: 0 0 var(--space-2); font-size: var(--text-body-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); }
.strip__title span { margin-left: 6px; font-weight: 500; color: var(--color-text-secondary); }
.strip__track { display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-2); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.strip__track .gallery__tile { flex: 0 0 240px; scroll-snap-align: start; }
@media (max-width: 640px) { .strip__track .gallery__tile { flex-basis: 68vw; } }
.lightbox { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; background: transparent; color: #fff; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.93); }
.lightbox__fig { margin: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); }
.lightbox__fig img { max-width: calc(100vw - 32px); max-height: calc(100vh - 88px); width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lightbox__btn, .lightbox__close { position: fixed; border: 0; color: #fff; background: rgba(255, 255, 255, 0.12); width: 44px; height: 44px; border-radius: 50%; font: inherit; font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.lightbox__btn:hover, .lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__btn { top: 50%; transform: translateY(-50%); }
.lightbox__btn--prev { left: 12px; } .lightbox__btn--next { right: 12px; }
.lightbox__close { top: 12px; right: 12px; font-size: 26px; }
@media (max-width: 640px) { .lightbox__btn { width: 44px; height: 44px; bottom: 16px; top: auto; transform: none; } .lightbox__fig img { max-height: calc(100vh - 120px); } }   /* 44 px tap targets */
@media (prefers-reduced-motion: reduce) { .gallery__tile img { transition: none; } .gallery__tile:hover img { transform: none; } }

/* news (operator 21.09): campaign press releases; home block = the latest cards between the carousel and the speeches,
   /novini = every card, /novini/<slug> = the release verbatim with its photos (tiles reuse the gallery + lightbox) */
.news { margin: 0 0 var(--space-8); }
.news__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-5); margin-top: var(--space-4); }   /* as many columns as cards fit (three at desktop width), one on phones */
.news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); }
.news-card:hover .news-card__title, .news-card:focus-visible .news-card__title { text-decoration: underline; text-underline-offset: 3px; }
.news-card__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; background: var(--color-bg-alt); }
.news-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); }
.news-card__date { font-size: var(--text-body-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); }
.news-card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; }
.news-card__lead { font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.5; }
.news__all { margin: var(--space-5) 0 0; }
.news-index .news__grid { margin-top: var(--space-2); }
.news-item__meta { margin: 0 0 var(--space-3); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-secondary); }
.news-item__lead { font-size: 1.125rem; font-weight: 600; line-height: 1.5; margin: 0 0 var(--space-6); max-width: 46rem; }
.news-item__hero { margin: 0 0 var(--space-6); }
.news-item__hero img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); background: var(--color-bg-alt); }
.news-item__heading { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-sub-heading); font-weight: 700; line-height: 1.25; max-width: 46rem; }
.news-item__text { max-width: 46rem; }
.news-item__text p { margin: 0 0 var(--space-3); font-size: var(--text-body-md); line-height: 1.6; }
.news-item__photos { margin-top: var(--space-6); }
.news-item__links { margin: var(--space-6) 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); }
.news-item__links a { font-weight: 600; color: var(--color-accent); text-underline-offset: 3px; }
.news-item__back { margin: var(--space-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* profile frame (operator 21–22.09; review 22.09: the frame's OWN identity, not the site kit): teal gradient + oxblood + white
   caps, mobile first. .ramka-band = full-bleed call-out under the hero carousel (home) and the page header of /ramka;
   /ramka = one column, the canvas preview under the щаб's PNG frame (the ring shows what Facebook shows), stacked full-width
   buttons, the actions bar sticks to the bottom of a phone screen once a photo is loaded; the file input hides under its label */
:root { --c-teal-900: #02312d; --c-teal-600: #067765; --c-teal-300: #34c1a3; --c-oxblood: #790819; --c-oxblood-dark: #5c0512; }   /* measured in the frame PNG: darkest 2 %, median, 95th percentile of the band */
.btn--brand { background: var(--c-oxblood); color: #fff; border-color: var(--c-oxblood); font-weight: 700; }
.btn--brand:hover { background: var(--c-oxblood-dark); border-color: var(--c-oxblood-dark); }
.btn--outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); font-weight: 700; }
.btn--outline:hover { background: var(--color-bg-alt); }
button.btn { font-family: inherit; cursor: pointer; }
.btn:disabled { opacity: 0.4; cursor: default; pointer-events: none; }
.u-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.ramka-band { position: relative; overflow: hidden; width: 100vw; margin: 0 0 var(--space-8) calc(50% - 50vw); padding: clamp(28px, 4vw, 48px) var(--pad-section-x); color: #fff;
  background: linear-gradient(118deg, var(--c-teal-900) 0%, var(--c-teal-600) 58%, var(--c-teal-300) 100%); }
.ramka-band::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, transparent 52%, rgba(255, 255, 255, 0.12) 52.5%, rgba(255, 255, 255, 0.12) 66%, transparent 66.5%), linear-gradient(112deg, transparent 74%, rgba(255, 255, 255, 0.07) 74.5%, rgba(255, 255, 255, 0.07) 86%, transparent 86.5%); }   /* the frame's lighter diagonal streaks */
.carousel + .ramka-band { margin-top: calc(-1 * var(--space-8)); }
.ramka-band__inner { position: relative; max-width: var(--max-container); margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-5) var(--space-10); align-items: center; }
.ramka-band__art img { width: 100%; height: auto; border-radius: 50%; display: block; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.ramka-band__title { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.7rem, 3.2vw + 0.6rem, 2.9rem); line-height: 1.02; letter-spacing: -0.015em; color: #fff; }
.ramka-band__rule { display: block; width: 84px; height: 4px; margin: var(--space-3) 0 var(--space-4); background: var(--c-oxblood); border-radius: 2px; }
.ramka-band__text { margin: 0; font-size: 1.0625rem; line-height: 1.55; max-width: 40rem; color: rgba(255, 255, 255, 0.92); }
.ramka-band__cta { margin: var(--space-5) 0 0; }
.ramka-band__cta .btn { min-height: 52px; padding-inline: 28px; font-size: 1rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22); }
.ramka-band--page { margin-bottom: var(--space-6); padding-block: clamp(32px, 5vw, 56px); }
.ramka-band__inner--page { display: block; }
.ramka-band__inner--page .ramka-band__text { max-width: 46rem; }
@media (max-width: 640px) {
  .ramka-band__inner { grid-template-columns: 1fr; justify-items: start; }
  .ramka-band__art { width: 168px; }
  .ramka-band__cta .btn { width: 100%; justify-content: center; }
}
.ramka { padding-top: 0; }
.ramka__wrap { max-width: calc(560px + 2 * var(--pad-section-x)); }
.ramka__tool { display: grid; gap: var(--space-4); }
.ramka__msg { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-alt); font-weight: 600; font-size: var(--text-body-sm); line-height: 1.5; }
.ramka__stage { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg-alt); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12); }
.ramka__sample, .ramka__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; margin: 0; }
.ramka__canvas { touch-action: none; cursor: grab; }
.ramka__canvas:active { cursor: grabbing; }
.ramka__canvas:focus-visible { box-shadow: none; outline: 3px solid var(--c-teal-300); outline-offset: -3px; }
.ramka__tool:not(.is-ready) .ramka__canvas { visibility: hidden; }
.ramka__tool.is-ready .ramka__sample { display: none; }
.ramka__ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.55); pointer-events: none; }
.ramka__panel { display: flex; flex-direction: column; gap: var(--space-4); }
.ramka__pick, .ramka__actions .btn { width: 100%; justify-content: center; min-height: 52px; font-size: 1rem; }
.ramka__pick { cursor: pointer; position: relative; }
.ramka__pick:focus-within { box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--c-teal-600); }
.ramka__row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.ramka__row .btn { min-height: 48px; }
.ramka__zoom { display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-full); font-size: var(--text-body-sm); font-weight: 700; color: var(--color-text-secondary); }
.ramka__zoom input { flex: 1; min-width: 0; accent-color: var(--c-oxblood); }
.ramka__actions { display: grid; gap: var(--space-3); }
.ramka__tip, .ramka__hint { margin: 0; font-size: var(--text-body-sm); color: var(--color-text-secondary); line-height: 1.5; }
.ramka__hint { font-weight: 600; color: var(--color-text); }
.ramka__steps { margin: var(--space-8) 0 0; padding-left: 1.4em; font-size: var(--text-body-md); line-height: 1.6; }
.ramka__steps li { margin-bottom: var(--space-2); }
.ramka .news-item__back { margin-top: var(--space-8); }
@media (max-width: 640px) {
  .ramka__tool.is-loaded .ramka__actions { position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--pad-section-x)); padding: var(--space-3) var(--pad-section-x) calc(var(--space-3) + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid var(--color-border-soft); }
}

/* местни инициативни комитети (operator 23.09): a button under the members heading of the home page; /mestni-komiteti = one
   page with a jump list of towns (links in the pill look, not .pill: the filter script must not see them) and a section per
   committee; rows = the .rmember look without the avatar slot (first name, last name, profession) */
.roster-local { margin: var(--space-4) 0 0; }
.roster-local .btn { font-weight: 700; }
@media (max-width: 640px) { .roster-local .btn { width: 100%; justify-content: center; min-height: 48px; } }
.local .lite-sub { margin-bottom: var(--space-4); }
.local__jump { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.jump { display: inline-flex; align-items: center; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); font-size: var(--text-body-sm); font-weight: 600; padding: 7px 12px; border-radius: var(--radius-full); text-decoration: none; transition: background-color 150ms, border-color 150ms; }
.jump:hover { background: var(--color-bg-alt); }
.local__group { scroll-margin-top: 84px; }   /* the sticky masthead */
.local__group .wall__subhead { margin-top: var(--space-8); }
.local__note { margin: 0 0 var(--space-3); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.rmembers--plain { margin-top: var(--space-2); }
.rmember--plain { padding: var(--space-3) 0; }

/* „Програма“ (operator 23.09): the teaser under the hero carousel (home) and /programa, both rendered per request. Status
   is a badge pill (never an edge stripe); the today card wears the campaign green as a full outline. Time column beside
   the text at desktop width, stacked on phones; titles wrap, nothing scrolls sideways. */
.program-teaser { margin: 0 0 var(--space-8); }
.program-teaser .wall__subhead { margin-top: 0; }
.carousel + .program-teaser { margin-top: calc(-1 * var(--space-4)); }
.program__label { margin: var(--space-6) 0 var(--space-3); font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.program-teaser .program__label { margin-top: var(--space-4); }
.program-teaser .program__now > .speeches__sub:first-child { margin-top: 0; }
.program__none { margin: var(--space-3) 0 0; font-weight: 600; color: var(--color-text-secondary); }
.program__now { margin-bottom: var(--space-4); }
.program__day { margin-top: var(--space-6); }
.program__date { margin: 0; font-size: var(--text-body-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); }
.program__day.is-past .program__date { color: var(--color-text-secondary); }
.events { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.event { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); align-items: start; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); background: var(--color-surface); }
.event__time { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.event__date { font-family: var(--font-sans); font-size: var(--text-body-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.event__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.event__city { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.event__meta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); margin-top: 4px; font-size: var(--text-body-sm); line-height: 1.35; }   /* title, then the faces + names on their OWN line, always in the same place (operator 25.09) */
.event__title { font-weight: 500; color: var(--color-text-secondary); overflow-wrap: anywhere; }
.event__place { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--color-text); }
.event__who { font-weight: 600; color: var(--color-accent); }
/* head shots beside the name (operator 25.09); both = Йотова first. Full colour always, past events too (no greyscale of living people) */
.event__who { display: inline-flex; align-items: center; gap: var(--space-2); }
.faces { display: inline-flex; flex: none; }
.faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); background: var(--color-bg-alt); }
.faces img + img { margin-left: -10px; }
/* Йотова is always first AND on top of the overlap (operator 25.09): earlier photos stack above later ones */
.faces img, .pmap__faces img { position: relative; }
.faces img:nth-child(1), .pmap__faces img:nth-child(1) { z-index: 2; }
.faces img:nth-child(2), .pmap__faces img:nth-child(2) { z-index: 1; }
.event__note { font-size: var(--text-body-sm); color: var(--color-text-secondary); }
.event__link { align-self: flex-start; margin-top: 2px; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-accent); text-underline-offset: 3px; }
.event__badge { justify-self: end; font-size: var(--text-body-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border); color: var(--color-text-secondary); white-space: nowrap; }
.event__badge--today { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.event__badge--upcoming { border-color: var(--color-accent); color: var(--color-accent); }
.event.is-past { opacity: 0.62; }
.event.is-past .event__time, .event.is-past .event__who { color: var(--color-text-secondary); }
.event.is-today { border-color: var(--color-accent-fill); box-shadow: 0 0 0 1px var(--color-accent-fill); }
@media (max-width: 640px) {
  .event { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); padding: var(--space-4); }
  .event__time:empty { display: none; }   /* an untimed event keeps its empty time cell only in the desktop grid */
  .event__time { grid-column: 1; }
  .event__badge { grid-column: 2; grid-row: 1; }
  .event__body { grid-column: 1 / -1; }
}

/* Map of the events (operator 25.09): provinces as a soft land shape, one pin per town. Pins are <details name="pmap">:
   tap opens a bottom sheet on phones; on pointer devices hover (or click) shows the card beside the pin, flipped away from
   the nearest edge (per-town rules generated by build.mjs, since the CSP forbids inline styles). Tap targets 44 px; no script; nothing scrolls sideways. */
.pmap { margin: var(--space-4) 0 var(--space-6); }
/* the page opens on the map, no empty band above the heading; wide screens put „Днес“ beside the map instead of below it */
.program > .wall__subhead:first-child { margin-top: 0; }
.program.lite-main { padding-top: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 1024px) {
  .program__top { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, 1fr); gap: var(--space-8); align-items: start; }
  .program__top .pmap { margin: var(--space-2) 0 0; }
  .program__top .pmap__stage { max-width: none; }
  .program__top .program__label:first-child { margin-top: 0; }
  .program__top .program__now { margin-bottom: 0; }
  /* home teaser: the button sits right under the map, not under the (often taller) list (operator 25.09) */
  .program-teaser .program__top { grid-template-areas: "map now" "more now"; grid-template-rows: auto 1fr; }
  .program-teaser .program__top .pmap { grid-area: map; }
  .program-teaser .program__top .program__now { grid-area: now; }
  .program-teaser .program__more { grid-area: more; align-self: start; margin-top: var(--space-4); }
  /* the side column is narrow: its cards use the stacked phone layout (time on top), so the list stays about map height */
  .program__top .event { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
  .program__top .event__time:empty { display: none; }
  .program__top .event__time { grid-column: 1; font-size: 1.25rem; }
  .program__top .event__badge { grid-column: 2; grid-row: 1; }
  .program__top .event__body { grid-column: 1 / -1; }
  .program__top .event__city { font-size: 1.25rem; }
  .program__top .events { gap: var(--space-2); }
  .program__top .faces img { width: 30px; height: 30px; }
}
.pmap__stage { position: relative; width: 100%; max-width: 960px; margin: 0 auto; isolation: isolate; }   /* the dots' z-index stays inside the map: an open dot never paints over the sticky header */
.pmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pmap__land { fill: var(--color-bg-alt); stroke: var(--color-border); stroke-width: 1.4; stroke-linejoin: round; }
.pmap__lead { stroke: var(--color-accent); stroke-width: 1.6; opacity: 0.55; }
.pmap__anchor { fill: var(--color-accent); opacity: 0.7; }
.pmap__label { font-family: var(--font-sans); font-size: 17px; font-weight: 600; fill: var(--color-text-secondary); paint-order: stroke; stroke: var(--color-bg); stroke-width: 3px; stroke-linejoin: round; }
@media (max-width: 640px) { .pmap__label { display: none; } }
.pmap__dot { position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; z-index: 1; }
.pmap__dot[open], .pmap__dot:hover { z-index: 20; }
.pmap__dot summary { list-style: none; display: grid; place-items: center; width: 30px; height: 30px; cursor: pointer; border-radius: 50%; }
.pmap__dot summary::-webkit-details-marker { display: none; }
.pmap__dot summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pmap__pin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--color-on-accent); font-size: 0.72rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; background: var(--color-accent-fill); border: 2px solid var(--color-surface); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); transition: transform 0.15s ease; }
.pmap__dot:hover .pmap__pin, .pmap__dot[open] .pmap__pin { transform: scale(1.25); }
.pmap__town { font-family: var(--font-display); font-weight: 700; font-size: 1rem; }
.pmap__dot.is-past .pmap__pin { background: var(--color-text-secondary); opacity: 0.55; }
.pmap__dot.is-today .pmap__pin { background: var(--color-red); box-shadow: 0 0 0 5px rgba(154, 31, 49, 0.18), 0 1px 4px rgba(0, 0, 0, 0.28); }
.pmap__card { display: none; position: absolute; z-index: 30; left: 50%; bottom: calc(100% - 6px); transform: translateX(-50%); width: min(320px, 82vw); max-height: 70vh; overflow-y: auto; padding: var(--space-3) var(--space-4) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border-soft); border-radius: var(--radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16); text-align: left; }
.pmap__dot[open] .pmap__card { display: block; }
/* close (operator 25.09: „cards need an X“): shown on an OPENED card only (a hover preview closes by moving away); tapping the dot again also closes */
.pmap__close { display: none; position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-secondary); font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.pmap__close:hover { background: var(--color-bg-alt); color: var(--color-text); }
.pmap__close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.pmap__dot[open] .pmap__close { display: grid; }
.pmap__dot[open] .pmap__head { padding-right: 36px; }
/* a closed <details> hides its content below CSS (::details-content): hover opens that slot where supported; click works everywhere */
@media (hover: hover) { .pmap__dot:hover::details-content { content-visibility: visible; display: block; } .pmap__dot:hover .pmap__card { display: block; } }
.pmap__head { display: flex; align-items: center; gap: var(--space-3); }
.pmap__faces { display: flex; flex: none; }
.pmap__faces img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); background: var(--color-bg-alt); }
.pmap__faces img + img { margin-left: -12px; }
.pmap__city { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.15; }
.pmap__towns { font-family: var(--font-sans); font-size: var(--text-body-xs); font-weight: 600; line-height: 1.35; color: var(--color-text-secondary); }
.pmap__day { margin: var(--space-3) 0 0; font-size: var(--text-body-sm); font-weight: 600; color: var(--color-text-secondary); }
.pmap__evs { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.pmap__ev .pmap__when { margin: 0; }
.pmap__when { margin: var(--space-3) 0 0; }
.pmap__what { margin: 2px 0 0; }
.pmap__when { font-weight: 700; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.pmap__what { font-size: var(--text-body-sm); color: var(--color-text); }
.pmap__who { font-size: var(--text-body-xs); font-weight: 600; color: var(--color-text-secondary); }
.pmap__ev.is-past { opacity: 0.6; }
.pmap__more { display: inline-block; margin-top: var(--space-3); font-size: var(--text-body-sm); font-weight: 600; color: var(--color-accent); text-underline-offset: 3px; }
@media (max-width: 640px) {
  .pmap__pin { box-sizing: border-box; width: 18px; height: 18px; border-width: 1.5px; font-size: 0.58rem; }
  .pmap__dot, .pmap__dot summary { width: 20px; height: 20px; }
  .pmap__dot { margin: -10px 0 0 -10px; }
  /* phones: the card opens full width right UNDER the map. Never position: fixed: iOS Safari resolves it against the page's
     reveal-animated ancestor and the card landed far below the screen (operator 25.09). Offsets come from the dot's own
     position (--px/--py, % of the stage, generated by build.mjs) in container units of the stage (1cqw = 1 % of its width). */
  .pmap__stage { container-type: inline-size; }
  /* an open card must not blend with the page under it (operator 25.09): everything but the map and its card is blurred
     and faded; a tap outside the card closes it (app.js) */
  .lite-main:has(.pmap__dot[open]) > :not(:has(.pmap__dot[open])),
  .program-teaser:has(.pmap__dot[open]) > :not(.program__top),
  .program__top:has(.pmap__dot[open]) > :not(.pmap) { filter: blur(4px); opacity: 0.35; pointer-events: none; transition: filter 160ms ease, opacity 160ms ease; }
  /* the blurred siblings are their own layers (filter; the home page's reveal animation too) and paint after the map:
     lift the section that holds the open dot, and the map inside it, above them */
  .lite-main:has(.pmap__dot[open]) > :has(.pmap__dot[open]), .pmap:has(.pmap__dot[open]) .pmap__stage { position: relative; z-index: 5; }
  body:has(.pmap__dot[open]) { cursor: pointer; }   /* iOS Safari delivers a tap on plain content as a click only under cursor: pointer */
  body:has(.pmap__dot[open]) .pmap__card { cursor: auto; }
  .pmap__dot[open] .pmap__card { box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12); }
  .pmap__dot[open] .pmap__card { position: absolute; left: calc(10px - var(--px) * 1cqw) !important; right: auto !important; top: calc((100 - var(--py)) * 1cqw / var(--pr) + 18px) !important; bottom: auto !important; width: 100cqw; max-height: none; overflow: visible; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) { .pmap__pin { transition: none; } }

/* site navigation (operator 23.09 13:45): plain links, no script. Phones: a row of chips under the wordmark that wraps to a
   second line; from 720 px: text links right of the wordmark with a green underline on the current page. Only sections that
   exist in the build get a link (manifest.nav); the countdown and 404 pages carry no nav (nothing about content before the switch). */
.nav__inner--mast { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; column-gap: var(--space-4); }
.sitenav { display: flex; flex-wrap: wrap; gap: 5px 6px; width: 100%; }
.sitenav a { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text); font-size: 0.72rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.sitenav a:hover { background: var(--color-bg-alt); }
.sitenav a[aria-current="page"] { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
@media (min-width: 720px) {
  .sitenav { width: auto; gap: 2px 18px; }
  .sitenav a { min-height: 0; padding: 6px 0 4px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; font-size: var(--text-body-sm); }
  .sitenav a:hover { background: none; border-bottom-color: var(--color-border); }
  .sitenav a[aria-current="page"] { background: none; color: var(--color-accent); border-bottom-color: var(--color-accent-fill); }
}
#members, #speeches-title, #gallery-title, .local__group { scroll-margin-top: 150px; }   /* under the sticky masthead + two chip rows on phones */

/* local committees page (operator 23.09 16:40–16:50): the home page's entrance (typed slogan, then the blocks rise at 1.2 s, rows
   cascade from 1.25 s via .lite-main--reveal) + the ballot number badge in the frame's oxblood (data/ballot.json). */
.ballot { display: inline-flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-8); }
.ballot__no { display: inline-grid; place-items: center; min-width: 2.2em; height: 2.2em; padding: 0 0.25em; background: var(--c-oxblood); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem); line-height: 1; border-radius: 6px; font-variant-numeric: tabular-nums; }
.ballot__txt { font-weight: 700; font-size: var(--text-body-sm); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.06em; }

/* Facebook cover download on /ramka (operator 23.09 17:35): preview at full column width, oxblood button, the frame's steps list */
.cover { margin: var(--space-12) 0 var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border-soft); }
.cover__text { margin: 0 0 var(--space-5); color: var(--color-text-secondary); max-width: var(--max-copy); }
.cover__preview { display: block; border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.08); }
.cover__preview img { width: 100%; height: auto; }
.cover__actions { margin: var(--space-5) 0 var(--space-4); }
@media (max-width: 640px) { .cover__actions .btn { width: 100%; justify-content: center; } }

/* № 25 in the masthead before the candidates’ names (operator 23.09 18:05; first, 18:15): the frame's oxblood square, height of the lockup */
.brandline { display: inline-flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: inherit; }
.mast-ballot { display: inline-grid; place-items: center; flex: none; min-width: 42px; height: 42px; padding: 0 5px; border-radius: 5px; background: var(--c-oxblood); color: #fff; font-family: var(--font-display); font-weight: 900; font-size: 1.45rem; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
@media (max-width: 380px) { .mast-ballot { min-width: 36px; height: 36px; font-size: 1.2rem; } .brandline { gap: 9px; } }

/* „Добави в календара“ (operator 25.09): a small button under the event; the menu opens in the flow, no overlay */
.cal { margin-top: var(--space-3); }
.cal__btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--color-accent); border-radius: var(--radius-full); color: var(--color-accent); font-size: var(--text-body-sm); font-weight: 600; cursor: pointer; list-style: none; }
.cal__btn::-webkit-details-marker { display: none; }
.cal__btn::before { content: "+"; font-weight: 700; }
.cal[open] .cal__btn { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
.cal[open] .cal__btn::before { content: "–"; }
.cal__btn:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.cal__menu { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 4px; }
.cal__menu a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); border: 1px solid var(--color-border-soft); border-radius: var(--radius-md, 10px); color: var(--color-text); font-size: var(--text-body-sm); font-weight: 600; text-decoration: none; }
.cal__menu a:hover { border-color: var(--color-accent); color: var(--color-accent); }
@media (min-width: 641px) { .cal__menu { grid-template-columns: repeat(2, minmax(0, max-content)); } }

/* news video (operator 25.09): self-hosted, native controls, full column width, no third-party player */
.news-item__video { margin: var(--space-6) 0; }
.news-item__video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); background: #000; }
.news-item__video figcaption { margin-top: var(--space-2); font-size: var(--text-body-sm); color: var(--color-text-secondary); }

/* generated by build.mjs: map stage ratio + one class per event (collision-free position) */
.pmap__stage { aspect-ratio: 1.5261; --pr: 1.5261; }
.pmap-e-2026-09-08-1 { left: 19.88%; top: 51.61%; --px: 19.88; --py: 51.61; } .pmap-e-2026-09-08-1 .pmap__card { left: 0; transform: none; }
.pmap-e-2026-09-21-1 { left: 13.98%; top: 55.19%; --px: 13.98; --py: 55.19; } .pmap-e-2026-09-21-1 .pmap__card { left: 0; transform: none; }
.pmap-e-2026-09-25-1 { left: 86.65%; top: 22.41%; --px: 86.65; --py: 22.41; } .pmap-e-2026-09-25-1 .pmap__card { left: auto; right: 0; transform: none; } .pmap-e-2026-09-25-1 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-25-4 { left: 48.41%; top: 20.07%; --px: 48.41; --py: 20.07; } .pmap-e-2026-09-25-4 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-26-1 { left: 36.73%; top: 42.41%; --px: 36.73; --py: 42.41; } .pmap-e-2026-09-26-1 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-26-2 { left: 37.97%; top: 87.17%; --px: 37.97; --py: 87.17; }
.pmap-e-2026-09-27-1 { left: 65.96%; top: 57.74%; --px: 65.96; --py: 57.74; }
.pmap-e-2026-09-27-2 { left: 88.01%; top: 34.05%; --px: 88.01; --py: 34.05; } .pmap-e-2026-09-27-2 .pmap__card { left: auto; right: 0; transform: none; } .pmap-e-2026-09-27-2 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-27-3 { left: 68.9%; top: 41.34%; --px: 68.9; --py: 41.34; } .pmap-e-2026-09-27-3 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-27-4 { left: 71.41%; top: 25.07%; --px: 71.41; --py: 25.07; } .pmap-e-2026-09-27-4 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-1 { left: 79.46%; top: 36.14%; --px: 79.46; --py: 36.14; } .pmap-e-2026-09-28-1 .pmap__card { left: auto; right: 0; transform: none; } .pmap-e-2026-09-28-1 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-2 { left: 73.21%; top: 34.3%; --px: 73.21; --py: 34.3; } .pmap-e-2026-09-28-2 .pmap__card { left: auto; right: 0; transform: none; } .pmap-e-2026-09-28-2 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-4 { left: 67%; top: 32.09%; --px: 67; --py: 32.09; } .pmap-e-2026-09-28-4 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-5 { left: 77.64%; top: 26.89%; --px: 77.64; --py: 26.89; } .pmap-e-2026-09-28-5 .pmap__card { left: auto; right: 0; transform: none; } .pmap-e-2026-09-28-5 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-6 { left: 60.78%; top: 29.83%; --px: 60.78; --py: 29.83; } .pmap-e-2026-09-28-6 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-28-7 { left: 65.18%; top: 22.74%; --px: 65.18; --py: 22.74; } .pmap-e-2026-09-28-7 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-29-1 { left: 48.14%; top: 34.87%; --px: 48.14; --py: 34.87; } .pmap-e-2026-09-29-1 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-29-2 { left: 14.89%; top: 45.64%; --px: 14.89; --py: 45.64; } .pmap-e-2026-09-29-2 .pmap__card { left: 0; transform: none; }
.pmap-e-2026-09-29-4 { left: 44.14%; top: 27.3%; --px: 44.14; --py: 27.3; } .pmap-e-2026-09-29-4 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-29-5 { left: 35.51%; top: 25.62%; --px: 35.51; --py: 25.62; } .pmap-e-2026-09-29-5 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-30-1 { left: 39.21%; top: 33.57%; --px: 39.21; --py: 33.57; } .pmap-e-2026-09-30-1 .pmap__card { bottom: auto; top: calc(100% - 6px); }
.pmap-e-2026-09-30-3 { left: 38.65%; top: 52.24%; --px: 38.65; --py: 52.24; }