/* ==========================================================================
   БУДИТЕЛ НА ГОДИНАТА — дизайн система, издание 2026
   Визия по макета на дизайнера: кармин с боке и заглавният шрифт
   Avante Titul Inline. Тюркоазът носи действията.
   ========================================================================== */

/* --- 1. Основи ---------------------------------------------------------- */

:root {
  /* Повърхности. Тялото на сайта е кармин, потъмнен до четимост —
     наситеното кармин от макета остава за героя и призива. */
  --ink-rgb:    42, 2, 16;
  --ink:        #2A0210;
  --ink-2:      #3A0518;
  --ink-3:      #4B0A22;

  /* Марковото поле — цветовете, взети от макета */
  --brand:      #5E031C;
  --brand-2:    #7A0B28;
  --brand-hi:   #A5214C;

  --line:       rgba(255, 255, 255, .10);
  --line-2:     rgba(255, 255, 255, .20);

  /* Текст */
  --paper:      #FFFFFF;
  --dim:        rgba(255, 255, 255, .74);
  --faint:      rgba(255, 255, 255, .52);

  /* Нишките — преизбрани така, че да четат върху кармин */
  --t1: #FF8FB0;
  --t2: #FFC24B;
  --t3: #2ED3B7;
  --t4: #6FC6FF;
  --t5: #C59CFF;
  --t6: #FF7A5C;

  /* Акцент на изданието 2026 — тюркоазът. Допълнителен на кармина,
     затова действията се виждат веднага върху марковото поле. */
  --spark:      #2ED3B7;
  --spark-soft: #6FE6D2;
  --spark-rgb:  46, 211, 183;
  --on-spark:   #06201B;   /* текст върху тюркоаз */

  /* Ритъм */
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 11vw, 152px);
  --max: 1240px;

  --r-s: 10px;
  --r-m: 18px;
  --r-l: 28px;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* Заглавният шрифт от макета. Оригиналният TTF на дизайнера не минава
   през проверката на браузърите — тук е преопакован и валиден.
   Внимание: шрифтът е unicase (няма малки букви) и губи четимост
   под ~28px, затова се ползва само за марката, героя и годината. */
@font-face {
  font-family: "Avante Titul Inline";
  src: url("/assets/fonts/avante-titul-inline.woff2") format("woff2"),
       url("/assets/fonts/avante-titul-inline.ttf")   format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Български форми на кирилицата — проверени визуално в Manrope и Unbounded */
  font-feature-settings: "locl" 1;
}

/* Заглавната лента е закована горе. Вътрешна връзка трябва да спре под нея,
   а не зад нея — иначе първият ред на секцията остава скрит. */
[id] { scroll-margin-top: 102px; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }

::selection { background: var(--spark); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--spark);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--spark);
  color: var(--ink);
  padding: 12px 20px;
  font-weight: 700;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* --- 2. Типография ------------------------------------------------------ */

.display {
  font-family: "Avante Titul Inline", "Manrope", sans-serif;
  font-weight: 400;
  letter-spacing: .01em;   /* контурният щрих иска въздух, не стягане */
  line-height: .92;
  text-transform: uppercase;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

.h-sec {
  font-size: clamp(30px, 4.6vw, 54px);
  max-width: 18ch;
}

.h-sub {
  font-size: clamp(20px, 2.3vw, 27px);
  line-height: 1.25;
}

.eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--spark);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--spark);
  flex: none;
}

.lead {
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.6;
  color: var(--dim);
  max-width: 60ch;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

/* --- 3. Марка: изписването на името ------------------------------------- */

/* Марката е изписването на името със заглавния шрифт.
   Контурният щрих се губи под 16px — затова тук размерът е вдигнат
   и буквите са разредени, вместо да се смали както при плътен шрифт. */

.mark {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-family: "Avante Titul Inline", "Manrope", sans-serif;
  font-weight: 400;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.mark__spark {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--spark);
  flex: none;
  box-shadow: 0 0 0 0 rgba(var(--spark-rgb), .55);
  animation: spark 3.6s var(--ease) infinite;
}
.mark__year { color: var(--spark); }

@keyframes spark {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(var(--spark-rgb), .5); }
  35%           { box-shadow: 0 0 0 9px rgba(var(--spark-rgb), 0); }
}

/* --- 4. Бутони ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 100px;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--spark { background: var(--spark); color: var(--on-spark); }
.btn--spark:hover { background: var(--spark-soft); }

/* `background: transparent` заради <button>: браузърът му слага сив фон по
   подразбиране и без това бутонът излиза светъл вместо очертан. */
.btn--ghost { background: transparent; border-color: var(--line-2); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); background: rgba(255, 255, 255, .05); }

.btn__arrow { transition: transform .25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* --- 5. Хедър ----------------------------------------------------------- */

.hdr {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  padding-block: 18px;
  transition: background-color .3s, backdrop-filter .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.hdr.is-stuck {
  background: rgba(var(--ink-rgb), .82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.hdr__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  color: var(--dim);
  transition: color .2s;
}
.nav a:hover { color: var(--paper); }
/* Дубликат на призива, който живее само в отвореното мобилно меню. На широк
   екран бутонът вече стои вдясно в хедъра и втори не е нужен. */
.nav__cta { display: none; }
.hdr .btn { padding: 11px 20px; font-size: 14px; }

.burger {
  display: none;
  background: none;
  border: 1.5px solid var(--line-2);
  border-radius: 100px;
  color: var(--paper);
  padding: 9px 16px;
  font: 700 14px "Manrope", sans-serif;
  cursor: pointer;
}

/* --- 6. Герой ----------------------------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 940px);
  display: flex;
  align-items: center;
  padding-top: 110px;
  padding-bottom: 60px;
  overflow: hidden;
  background: var(--brand);
}

/* Боке полето от макета. Рисува се с градиенти, а не с изнесена снимка:
   така върви на всяко съотношение — от 390px телефон до широк екран —
   и не тежи на зареждането.
   Слоят е разделен на три: дълбочината стои неподвижна отдолу, а
   светлите петна се носят бавно в два потока. Движението е под минута
   на цикъл и без ясен ритъм — окото го усеща, но не го проследява. */
.hero__bokeh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(44vmax 44vmax at 62% 54%, rgba(178, 40, 88, .95), rgba(178, 40, 88, 0) 64%),
    radial-gradient(58vmax 58vmax at 22% 16%, var(--brand-2), rgba(122, 11, 40, 0) 68%),
    linear-gradient(140deg, #8A0F30 0%, #5E031C 46%, #3D0514 100%);
}
.hero__bokeh::before,
.hero__bokeh::after {
  content: "";
  position: absolute;
  /* Слоят е по-голям от екрана, за да не се показва ръб, докато се носи. */
  inset: -14%;
  will-change: transform;
}
.hero__bokeh::before {
  background:
    radial-gradient(30vmax 30vmax at 76% 74%, rgba(255, 205, 220, .50) 0 30%, rgba(255, 205, 220, .34) 46%, rgba(255, 205, 220, 0) 60%),
    radial-gradient(13vmax 13vmax at 63% 15%, rgba(255, 176, 201, .40) 0 30%, rgba(255, 176, 201, .24) 48%, rgba(255, 176, 201, 0) 62%),
    radial-gradient(10vmax 10vmax at 19% 56%, rgba(255, 186, 207, .32) 0 32%, rgba(255, 186, 207, 0) 64%);
  animation: drift-a 52s ease-in-out infinite;
}
.hero__bokeh::after {
  background:
    radial-gradient(19vmax 19vmax at 91% 32%, rgba(255, 188, 209, .46) 0 32%, rgba(255, 188, 209, .30) 48%, rgba(255, 188, 209, 0) 62%),
    radial-gradient(23vmax 23vmax at 34% 94%, rgba(255, 168, 195, .38) 0 30%, rgba(255, 168, 195, .22) 48%, rgba(255, 168, 195, 0) 62%),
    radial-gradient(15vmax 15vmax at 48% 36%, rgba(233, 126, 163, .40), rgba(233, 126, 163, 0) 64%);
  animation: drift-b 67s ease-in-out infinite;
}
/* Двата потока имат различна дължина (52s и 67s), за да не се срещат
   никога в една и съща поза — иначе движението започва да се повтаря. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0)            scale(1);    }
  33%      { transform: translate3d(2.4%, -2.0%, 0)     scale(1.06); }
  66%      { transform: translate3d(-1.8%, 1.6%, 0)     scale(1.02); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0)            scale(1.04); }
  40%      { transform: translate3d(-2.8%, 1.8%, 0)     scale(1);    }
  70%      { transform: translate3d(1.6%, 2.2%, 0)      scale(1.07); }
}

.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  /* Завесата пази само лявата колона, където стоят мотото и бутоните.
     Дясната половина остава марковото поле, както е в макета. */
  background:
    linear-gradient(103deg, rgba(var(--ink-rgb), .74) 0%, rgba(var(--ink-rgb), .30) 34%, rgba(var(--ink-rgb), 0) 60%),
    linear-gradient(to top, var(--ink) 0%, rgba(var(--ink-rgb), .55) 14%, rgba(var(--ink-rgb), 0) 38%);
  pointer-events: none;
}

.hero__in { position: relative; z-index: 3; width: 100%; }

.hero__name {
  font-size: clamp(40px, 8.4vw, 118px);
  margin-bottom: clamp(18px, 2.6vw, 30px);
}
.hero__name span { display: block; }
.hero__name .l2 { padding-left: .06em; }

/* Годината, както е в макета: плътно бяло с контурния шрифт,
   не допълнителен контур върху него. */
.hero__year {
  display: inline-block;
  font-family: "Avante Titul Inline", "Manrope", sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 7vw, 100px);
  line-height: .92;
  letter-spacing: .04em;
  color: var(--paper);
  margin-top: .1em;
}

.hero__motto {
  font-size: clamp(21px, 2.9vw, 36px);
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0 0 22px;
}
.hero__motto span, .hero__motto em { display: block; }
.hero__motto em {
  font-style: normal;
  color: var(--spark);
}

.hero__text { max-width: 46ch; color: var(--dim); margin-bottom: 34px; }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__note {
  font-size: 14px;
  color: var(--faint);
  max-width: 22ch;
  line-height: 1.4;
}

@keyframes fadein { to { opacity: 1; } }

/* --- 7. Лента със състоянието на кампанията ----------------------------- */

.status {
  position: relative;
  z-index: 3;
  border-block: 1px solid var(--line);
  background: var(--ink-2);
}
.status__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  padding-block: 18px;
}
.status__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--t3);
  flex: none;
  box-shadow: 0 0 0 4px rgba(var(--spark-rgb), .16);
}
.status__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t3);
}
.status__text { font-size: 16px; color: var(--dim); }
.status__text b { color: var(--paper); font-weight: 800; }
.status__link {
  margin-left: auto;
  font-size: 15px;
  font-weight: 700;
  color: var(--spark);
  text-decoration: none;
  white-space: nowrap;
}
.status__link:hover { text-decoration: underline; }

/* --- 8. Секции ---------------------------------------------------------- */

.sec { padding-block: var(--sec); position: relative; }
.sec--tight { padding-block: clamp(56px, 8vw, 104px); }
.sec--alt { background: var(--ink-2); }

.sec__head { margin-bottom: clamp(38px, 5vw, 66px); }
.sec__head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .9fr);
  gap: clamp(22px, 4vw, 64px);
  align-items: end;
}

/* Манифест — мотото като изявление */
.manifest {
  border-block: 1px solid var(--line);
  padding-block: clamp(64px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.manifest__q {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 6.2vw, 82px);
  line-height: 1.02;
  letter-spacing: -.035em;
  text-transform: uppercase;
  max-width: 15ch;
}
.manifest__q .hl { color: var(--spark); }
.manifest__src {
  margin-top: 28px;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--faint);
}

/* --- 9. Какво е будител: карти с нишки ---------------------------------- */

.grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 22px);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.card {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(24px, 2.6vw, 34px);
  transition: border-color .3s, transform .3s var(--ease), background-color .3s;
}
.card:hover { border-color: var(--line-2); transform: translateY(-3px); }
.sec--alt .card { background: var(--ink-3); }

.card__n {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--spark);
  margin-bottom: 18px;
  display: block;
}
.card h3 { font-size: 20px; margin-bottom: 10px; }
.card p { color: var(--dim); font-size: 16.5px; line-height: 1.6; margin: 0; }

/* --- 10. Как работи: стъпки по нишка ------------------------------------ */

.steps { counter-reset: s; position: relative; }
.steps__line {
  position: absolute;
  left: 0; right: 0; top: 27px;
  height: 2px;
  background: linear-gradient(90deg,
    var(--t1) 0%, var(--t2) 22%, var(--t3) 45%, var(--t4) 68%, var(--spark) 100%);
  opacity: .45;
  border-radius: 2px;
}
.steps__row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step__bullet {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid currentColor;
  display: grid;
  place-items: center;
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 20px;
}
.step:nth-child(1) .step__bullet { color: var(--t1); }
.step:nth-child(2) .step__bullet { color: var(--t2); }
.step:nth-child(3) .step__bullet { color: var(--t3); }
.step:nth-child(4) .step__bullet { color: var(--t4); }
.step:nth-child(5) .step__bullet { color: var(--spark); }
.step h3 { font-size: 18px; margin-bottom: 8px; }
.step p { font-size: 15.5px; color: var(--dim); line-height: 1.55; margin: 0; }

/* --- 11. Календар на изданието ------------------------------------------ */

.cal { display: grid; gap: 2px; border-radius: var(--r-m); overflow: hidden; }
.cal__row {
  display: grid;
  grid-template-columns: 190px 1fr auto;
  gap: clamp(14px, 2.4vw, 32px);
  align-items: baseline;
  padding: 20px clamp(18px, 2.4vw, 28px);
  background: var(--ink-2);
  transition: background-color .25s;
}
.sec--alt .cal__row { background: var(--ink-3); }
.cal__row:hover { background: var(--ink-3); }
.cal__d {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  color: var(--paper);
}
.cal__t { font-size: 16.5px; color: var(--dim); }
.cal__tag {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.cal__row.is-now { background: linear-gradient(90deg, rgba(var(--spark-rgb), .16), rgba(var(--spark-rgb), .03)); }
.cal__row.is-now .cal__d { color: var(--spark); }
.cal__row.is-now .cal__tag { color: var(--spark); }

/* --- 12. Архив ---------------------------------------------------------- */

.arc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }

.bud {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.bud:hover { border-color: var(--line-2); transform: translateY(-3px); }
.bud__viz {
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
/* Снимките се показват едноцветно и се връщат към цвят при досег —
   решетката остава спокойна, а отделната карта оживява. */
.bud__viz img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.94);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.bud:hover .bud__viz img { filter: none; transform: scale(1.03); }
/* Лека завеса отдолу, за да не се блъска снимката в текста. */
.bud__viz::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 42%;
  background: linear-gradient(to top, rgba(var(--ink-rgb), .55), transparent);
  pointer-events: none;
}
.bud__body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.bud__name {
  font-size: 16.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  margin-bottom: 5px;
}
.bud__cause { font-size: 13.5px; font-weight: 600; color: var(--dim); line-height: 1.4; }
.bud__brief {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--faint);
}
.bud__brief p + p { margin-top: .75em; }
.bud__brief q { font-style: italic; }
.bud__meta {
  margin-top: auto;
  padding-top: 15px;
  display: flex;
  /* На тясна карта „Граждански технологии“ не се побира до годината и се
     отрязваше от ръба. По-добре слиза на свой ред, отколкото да изчезне. */
  flex-wrap: wrap;
  gap: 4px 9px;
  align-items: baseline;
  min-width: 0;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--faint);
}
.bud__year { color: var(--spark); }

/* Архивът в цял ръст. На началната страница дванадесетте имена са решетка за
   преглеждане; на своята страница всеки носител получава ред и място за
   историята си. Четири колони не побират три абзаца — редът ги побира. */
.arc--long { grid-template-columns: 1fr; gap: clamp(14px, 1.8vw, 22px); }
.arc--long .bud { flex-direction: row; }
.arc--long .bud__viz { flex: 0 0 34%; aspect-ratio: auto; }
/* Завесата се завърта: вече не дели снимка от текст отгоре-надолу, а
   омекотява ръба, на който снимката се среща с колоната. */
.arc--long .bud__viz::after {
  inset: 0 0 0 auto;
  width: 40%;
  height: auto;
  background: linear-gradient(to left, rgba(var(--ink-rgb), .55), transparent);
}
.arc--long .bud__body { padding: clamp(20px, 2.5vw, 32px) clamp(22px, 2.8vw, 36px); }
.arc--long .bud__name { font-size: clamp(19px, 1.9vw, 23px); margin-bottom: 6px; }
.arc--long .bud__cause { font-size: 14.5px; }
.arc--long .bud__brief {
  /* Решетката крие брийфа на тесен екран; тук той е самото съдържание. */
  display: block;
  margin-top: 14px;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--dim);
  max-width: 64ch;
}
/* Годината застава най-отгоре — редът се чете като запис в архив, а не като
   карта с подпис под нея. */
.arc--long .bud__meta {
  order: -1;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 11px;
}

/* --- 13. Жури и партньори ----------------------------------------------- */

/* Съставът: седем лица. Четири и три — редът не се разтяга насила. */
/* Шестима души — по три на ред, за да няма празни места. */
.jury {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.jur {
  margin: 0;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color .3s, transform .3s var(--ease);
}
.jur:hover { border-color: var(--line-2); transform: translateY(-3px); }
.jur__viz { aspect-ratio: 1 / 1; position: relative; overflow: hidden; background: var(--ink-3); }
.jur__viz img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.04) brightness(.96);
  transition: filter .45s var(--ease), transform .6s var(--ease);
}
.jur:hover .jur__viz img { filter: none; transform: scale(1.03); }
.jur figcaption { padding: 16px 18px 19px; }
.jur__name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.jur__role { margin-top: 5px; font-size: 13px; line-height: 1.45; color: var(--faint); }

.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
}
.panel {
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(26px, 3.2vw, 40px);
  background: var(--ink-2);
}
.panel h3 { font-size: clamp(21px, 2.3vw, 27px); margin-bottom: 12px; }
.panel p { color: var(--dim); font-size: 16.5px; }
.panel__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-weight: 800;
  font-size: 15px;
  color: var(--spark);
  text-decoration: none;
}
.panel__link:hover { text-decoration: underline; }

/* --- 14. Призив --------------------------------------------------------- */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-l);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: clamp(38px, 6vw, 78px);
  text-align: center;
}
.cta__bg { position: absolute; inset: 0; opacity: .38; }
/* Нишките минават зад текста — този слой ги приглушава в средата, за да остане четим */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(58% 68% at 50% 48%, var(--ink-2) 32%, rgba(var(--ink-rgb), 0) 76%);
  pointer-events: none;
}
.cta__in { position: relative; z-index: 1; }
.cta h2 {
  font-family: "Unbounded", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -.03em;
  font-size: clamp(26px, 4.4vw, 52px);
  line-height: 1.04;
  margin-bottom: 18px;
}
.cta p { color: var(--dim); max-width: 48ch; margin-inline: auto; margin-bottom: 30px; }

/* --- 15. Подвал --------------------------------------------------------- */

.ftr {
  border-top: 1px solid var(--line);
  padding-block: clamp(48px, 6vw, 78px) 34px;
  background: var(--ink);
}
.ftr__top {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3vw, 44px);
  margin-bottom: clamp(38px, 5vw, 60px);
}
.ftr__blurb { color: var(--faint); font-size: 15.5px; max-width: 34ch; margin-top: 16px; }
.ftr h4 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.ftr ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ftr a { color: var(--dim); text-decoration: none; font-size: 15.5px; }
.ftr a:hover { color: var(--paper); }
.ftr__btm {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--faint);
}

/* --- 16. Появяване при скрол -------------------------------------------- */

.rv { opacity: 0; transform: translateY(18px); }
.rv.is-in {
  opacity: 1;
  transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

/* --- 16б. Номинация по имейл -------------------------------------------- */

.nom {
  /* Номинацията е отделен разговор от календара — иска въздух, не шев. */
  margin-top: clamp(48px, 6vw, 96px);
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-l);
  padding: clamp(28px, 4.2vw, 60px);
}
/* Заглавието и обяснението стояха залепени — тук няма решетка, която да ги раздели. */
.nom .lead { margin-top: clamp(14px, 1.8vw, 22px); }

.nom__mail {
  display: inline-block;
  margin: 26px 0 22px;
  font-family: "Unbounded", "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 42px);
  letter-spacing: -.02em;
  color: var(--spark);
  text-decoration: none;
  border-bottom: 2px solid rgba(var(--spark-rgb), .32);
  padding-bottom: 4px;
  transition: border-color .3s var(--ease), color .3s var(--ease);
  overflow-wrap: anywhere;
}
.nom__mail:hover { border-bottom-color: var(--spark); color: var(--spark-soft); }

.nom__note { margin-top: 16px; font-size: 14.5px; color: var(--faint); max-width: 46ch; }

.nom__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: nom;
}
.nom__list li {
  counter-increment: nom;
  position: relative;
  padding: 0 0 18px 40px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
  color: var(--dim);
}
.nom__list li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.nom__list li::before {
  content: counter(nom, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: "Unbounded", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--spark);
}
.nom__list b { color: var(--paper); font-weight: 700; }

/* Имената на финалистите в блока за гласуване. Две колони без номера и
   без подредба, която да се чете като класация — редът идва разбъркан. */
.hfin {
  list-style: none;
  margin: 26px 0 4px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.hfin a {
  display: block;
  height: 100%;
  padding: 14px 16px;
  background: var(--ink-2);
  text-decoration: none;
  transition: background .25s var(--ease);
}
.hfin a:hover { background: var(--ink); }
.hfin b { display: block; color: var(--paper); font-weight: 700; font-size: 15.5px; }
.hfin span { display: block; margin-top: 3px; color: var(--faint); font-size: 13.5px; line-height: 1.45; }
@media (max-width: 560px) { .hfin { grid-template-columns: minmax(0, 1fr); } }

.nom__rule a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.nom__rule a:hover { color: var(--paper); border-bottom-color: var(--spark); }
.nom__rule {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--faint);
}

.cta__mail { margin-top: 18px; font-size: 14.5px; color: var(--faint); }
.cta__mail a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.cta__mail a:hover { color: var(--paper); border-bottom-color: var(--spark); }

/* --- 16в. Знакът на организатора ---------------------------------------- */

.org { margin-top: 28px; }
.org__lab {
  margin: 0 0 13px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
}
.bnr {
  display: block;
  width: 124px;
  height: auto;
  opacity: .52;
  transition: opacity .3s var(--ease);
}
a.bnr:hover, a:hover > .bnr { opacity: .9; }

/* --- 17. Вътрешни страници ----------------------------------------------
   Началната страница има герой с нишки. Вътрешните страници имат по-нисък
   заглавен блок със същия език, за да се познава, че са от същия сайт. */

.phero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding-top: clamp(126px, 13vw, 186px);
  padding-bottom: clamp(44px, 6vw, 76px);
}
/* Вътрешните страници носят същото поле като началната, само по-ниско и
   по-сдържано. Заглавието стои вляво върху потъмнената част, полето диша
   отдясно. Тук бокето е неподвижно — заглавният блок е нисък и движение
   толкова близо до текста разсейва. */
.phero__bokeh {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(16vmax 16vmax at 86% 34%, rgba(255, 196, 214, .42) 0 30%, rgba(255, 196, 214, .24) 48%, rgba(255, 196, 214, 0) 62%),
    radial-gradient(11vmax 11vmax at 71% 78%, rgba(255, 176, 201, .34) 0 30%, rgba(255, 176, 201, 0) 62%),
    radial-gradient(8vmax  8vmax  at 94% 76%, rgba(255, 186, 207, .30) 0 32%, rgba(255, 186, 207, 0) 64%),
    radial-gradient(34vmax 34vmax at 82% 50%, rgba(178, 40, 88, .90), rgba(178, 40, 88, 0) 66%),
    linear-gradient(120deg, #3D0514 0%, #5E031C 62%, #7A0B28 100%);
}
.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(97deg, var(--ink) 30%, rgba(var(--ink-rgb), .80) 56%, rgba(var(--ink-rgb), .26) 84%, rgba(var(--ink-rgb), .12) 100%),
    linear-gradient(to top, var(--ink) 1%, rgba(var(--ink-rgb), 0) 40%);
  pointer-events: none;
}
.phero__in { position: relative; z-index: 3; }
.phero h1 {
  font-family: "Avante Titul Inline", "Manrope", sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .94;
  font-size: clamp(34px, 6.2vw, 74px);
  max-width: 14ch;
}
.phero .lead { margin-top: clamp(20px, 2.6vw, 30px); }

.crumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 22px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--faint);
}
.crumb a { color: var(--spark); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }

/* Съдържателен текст на вътрешна страница */
.prose { max-width: 66ch; }
.prose p { color: var(--dim); }
.prose h3 {
  font-size: clamp(19px, 2.1vw, 24px);
  margin: 38px 0 12px;
}
.prose h3:first-child { margin-top: 0; }
.prose a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.prose a:hover { border-bottom-color: var(--spark); }
.prose b { color: var(--paper); }

/* --- 18. Хронология ------------------------------------------------------ */

.tl { display: grid; gap: 0; }
.tl__i {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: clamp(16px, 3vw, 42px);
  padding: 26px 0;
  border-top: 1px solid var(--line);
  position: relative;
}
.tl__i:last-child { border-bottom: 1px solid var(--line); }
.tl__y {
  font-family: "Unbounded", "Manrope", sans-serif;
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -.02em;
  color: var(--spark);
  line-height: 1.1;
}
.tl__b h3 { font-size: 19px; margin-bottom: 8px; }
.tl__b p { color: var(--dim); font-size: 16.5px; margin: 0; max-width: 62ch; }

/* --- 19. Какво не е ------------------------------------------------------ */

.nots { display: grid; gap: 0; }
.nots__i {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(14px, 3vw, 40px);
  align-items: baseline;
  padding: 21px 0;
  border-top: 1px solid var(--line);
}
.nots__i:last-child { border-bottom: 1px solid var(--line); }
.nots__k {
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.01em;
  position: relative;
  padding-left: 30px;
}
.nots__k::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 17px; height: 2px;
  border-radius: 2px;
  background: var(--t1);
  opacity: .8;
}
.nots__v { color: var(--dim); font-size: 16.5px; }

/* --- 20. Въпроси и отговори ---------------------------------------------- */

.faq { display: grid; gap: 0; }
.faq__i { border-top: 1px solid var(--line); }
.faq__i:last-child { border-bottom: 1px solid var(--line); }
.faq__i summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 44px 22px 0;
  position: relative;
  font-weight: 800;
  font-size: clamp(16.5px, 1.8vw, 19px);
  letter-spacing: -.01em;
  transition: color .2s;
}
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary:hover { color: var(--spark); }
.faq__i summary::after {
  content: "";
  position: absolute;
  right: 6px; top: 50%;
  width: 12px; height: 12px;
  margin-top: -8px;
  border-right: 2px solid var(--spark);
  border-bottom: 2px solid var(--spark);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq__i[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq__a { padding: 0 clamp(0px, 6vw, 80px) 26px 0; color: var(--dim); font-size: 16.5px; }
.faq__a p { max-width: 64ch; }
.faq__a a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.faq__a a:hover { border-bottom-color: var(--spark); }

/* --- 21. Празно място, което е честно ------------------------------------
   Съставът на журито още не е обявен. Вместо страницата да мълчи или да
   лъже с примерни имена, тя показва колко места има и кога се попълват. */

.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.slot {
  border: 1px dashed var(--line-2);
  border-radius: var(--r-m);
  padding: clamp(22px, 2.6vw, 30px);
  background: rgba(255, 255, 255, .015);
  min-height: 148px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.slot__n {
  font-family: "Unbounded", "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--faint);
  margin-bottom: 16px;
}
.slot__t { font-size: 16px; color: var(--faint); line-height: 1.45; }
.slot--note {
  border-style: solid;
  border-color: var(--line);
  background: var(--ink-2);
}
.slot--note .slot__t { color: var(--dim); }

/* --- 22. Филтри на архива ------------------------------------------------ */

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
}
.filters__lab {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  margin-right: 6px;
  flex: none;
}
.chip {
  background: none;
  border: 1.5px solid var(--line);
  border-radius: 100px;
  color: var(--dim);
  padding: 8px 16px;
  font: 700 14px "Manrope", sans-serif;
  cursor: pointer;
  transition: border-color .2s, color .2s, background-color .2s;
}
.chip:hover { border-color: var(--line-2); color: var(--paper); }
.chip.is-on { background: var(--spark); border-color: var(--spark); color: var(--on-spark); }

.arc__count {
  margin: 26px 0 22px;
  font-size: 14px;
  color: var(--faint);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.bud.is-off { display: none; }
/* Картите в архива още не водят никъде — не се правят, че са кликаеми. */
article.bud:hover { transform: none; border-color: var(--line); }

.bud__badge {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  background: var(--spark);
  color: var(--on-spark);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Бележка в края на раздел — казва какво липсва, вместо да се прави, че е пълно */
.note {
  margin-top: clamp(26px, 3.4vw, 40px);
  border-left: 2px solid var(--spark);
  padding: 4px 0 4px 22px;
  color: var(--faint);
  font-size: 15.5px;
  max-width: 66ch;
}
.note b { color: var(--dim); font-weight: 700; }

/* --- 23. Адаптивност ---------------------------------------------------- */

@media (max-width: 1080px) {
  .arc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Редовете на будителите не се броят в колони — тук само ги пазим от
     правилото отгоре, което пренарежда решетката на началната страница. */
  .arc--long { grid-template-columns: 1fr; }
  .jury { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 34px; }
  .steps__line { display: none; }
  .ftr__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  body { font-size: 17px; }
  .nav { display: none; }
  /* Оттук надолу се посяга с пръст, не с курсор — бутонът „Меню“ и филтрите
     на архива стават достатъчно високи, за да се уцелват. */
  .burger { display: block; padding: 13px 18px; }
  .chip { padding: 12px 16px; }
  .hdr .btn--spark { display: none; }
  .nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
    position: absolute;
    inset: 100% 0 auto;
    background: rgba(var(--ink-rgb), .97);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    padding: 22px var(--gut) 28px;
  }
  .nav.is-open a { font-size: 19px; color: var(--paper); }
  /* Хедърът скрива призива под 860px. Ако го нямаше и тук, на телефон
     нямаше откъде да се номинира от навигацията. */
  .nav.is-open .nav__cta {
    display: inline-flex;
    margin-top: 8px;
    font-size: 15px;
    color: var(--on-spark);
  }
  .hero { min-height: auto; padding-top: 128px; padding-bottom: 48px; }
  /* На телефон няма лява колона, в която да се скрие текстът — затова
     завесата спира да е стена и става лек воал: полето на марката трябва
     да се вижда и тук, иначе от макета остава само тъмно петно. */
  .hero__veil {
    background:
      linear-gradient(180deg, rgba(var(--ink-rgb), .58) 0%, rgba(var(--ink-rgb), .20) 26%, rgba(var(--ink-rgb), 0) 44%),
      linear-gradient(to top, var(--ink) 0%, rgba(var(--ink-rgb), .74) 16%, rgba(var(--ink-rgb), .34) 34%, rgba(var(--ink-rgb), 0) 56%);
  }
  .grid--3, .grid--2, .duo { grid-template-columns: minmax(0, 1fr); }
  .arc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .arc--long { grid-template-columns: 1fr; }
  .jury { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sec__head--split { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .cal__row { grid-template-columns: 1fr; gap: 5px; padding-block: 16px; }
  .cal__tag { grid-row: 1; }
  .status__link { margin-left: 0; }
  /* Годината над текста, а не до него — 120-пикселовата колона изяжда реда. */
  .tl__i { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .nots__i { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .slots { grid-template-columns: minmax(0, 1fr); }
  .slot { min-height: 0; }
  .phero h1 { max-width: none; }
}

@media (max-width: 620px) {
  /* Марката се пренарежда на два реда, за да не изяде бутона за меню —
     изписването остава цялото, само се сгъва. */
  .mark {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    justify-items: start;
    gap: 3px 8px;
    font-size: 11px;
    line-height: 1.15;
  }
  .mark__spark { grid-row: 1 / 3; align-self: center; width: 10px; height: 10px; }
  /* В подвала марката получава цялата ширина — иначе изписването не се побира
     в половин колона и минава върху съседната. */
  .ftr__top > :first-child { grid-column: 1 / -1; }
  .ftr__blurb { max-width: none; }
  /* Разтеглени в тесен блок нишките стават вълнички без посока — по-добре без тях. */
  .cta__bg { display: none; }
  /* Адресът е дълъг — списъкът сляга под него, вместо да делят ширината. */
  .nom { grid-template-columns: minmax(0, 1fr); }
  .nom__mail { font-size: clamp(20px, 6.4vw, 30px); }
  /* Дълго име в тясна карта не бива да се отрязва от ръба — по-добре се
     пренася вътре в думата. Правилото важи само когато няма друг изход. */
  .bud__name, .bud__cause, .bud__brief,
  .jur__name, .jur__role { overflow-wrap: break-word; }
  /* Под 620px редът няма ширина за две колони — снимката се връща над текста
     и записът пак изглежда като карта, само по-висока. */
  .arc--long .bud { flex-direction: column; }
  .arc--long .bud__viz { flex: none; aspect-ratio: 4 / 3; }
  .arc--long .bud__viz::after {
    inset: auto 0 0 0;
    width: auto;
    height: 42%;
    background: linear-gradient(to top, rgba(var(--ink-rgb), .55), transparent);
  }
  .arc--long .bud__brief { font-size: 14px; }
}

@media (max-width: 520px) {
  .steps__row { grid-template-columns: minmax(0, 1fr); }
  /* Четворната решетка се държи на две колони чак дотук. По-надолу заглавията
     ѝ са една дума, която Unbounded изнася извън екрана — колоната остава една. */
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
  /* Решетката на началната страница остава на две колони — дванадесет имена в
     една колона стават безкраен списък. Затова картите се свиват. */
  .bud__body { padding: 14px 14px 16px; }
  .bud__name { font-size: 14.5px; }
  .bud__cause { font-size: 12.5px; }
  /* На две колони брийфът изяжда екрана — остават лицето, името и каузата. */
  .bud__brief { display: none; }
  .bud__meta { font-size: 11px; gap: 3px 7px; letter-spacing: .08em; padding-top: 12px; }
  .hero__year { -webkit-text-stroke-width: 1.5px; }
  /* Под 520px Unbounded е по-широк от екрана. Знакът се чупеше на три реда —
     „БУДИТЕЛ / НА / ГОДИНАТА“ — а „НА“ само на ред изглежда като грешка.
     При тези размери втората дума държи един ред. */
  .hero__name { font-size: clamp(30px, 9.4vw, 40px); }
  .hero__year { font-size: clamp(28px, 8.6vw, 37px); }
  /* Същото за вътрешните страници: „ИНИЦИАТИВАТА“ е една дума, която при
     34px излиза извън екрана и се отрязваше. */
  .phero h1 { font-size: clamp(25px, 7.4vw, 34px); }
}

/* Малките телефони — 320px все още се среща. Изписването и бутонът „Меню“
   заедно бяха четири пиксела по-широки от екрана. */
@media (max-width: 370px) {
  .mark { font-size: 11.5px; gap: 8px; }
  .mark__spark { width: 9px; height: 9px; }
  .burger { padding: 13px 14px; font-size: 13.5px; }
  /* „ТЕХНОЛОГИИ“ е една дума. При 320px разреденото главно писмо не се
     побира в половин колона — по-добре по-стегнато, отколкото пренесено. */
  .bud__meta { font-size: 10px; letter-spacing: .04em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
}

/* --- 20. Гласуване ------------------------------------------------------
   Страницата на вота носи същия език като останалите, но с едно
   съзнателно различие: тук няма нищо, което да подсказва кой води.
   Никакви числа, никакви ленти с напредък, никакъв ред, който да се
   чете като класация. Десетимата са финалисти — всеки вече отличен. */

/* Лента за тестов режим. Нарочно не е в марковите цветове — трябва да
   се вижда като предупреждение, а не като част от кампанията. */
.proba {
  background: var(--t2);
  color: #2A1A00;
  padding: 12px 0;
  position: relative;
  z-index: 60;
}
.proba__in {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  font-size: 14px;
  line-height: 1.45;
}
.proba b { font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: 12.5px; }

/* Закованият хедър би покрил лентата и тя не би се прочела. На тази
   страница той се лепи вместо да виси: предупреждението минава, после
   хедърът застава горе. Заглавният блок губи полето за закования
   хедър, защото хедърът вече заема своето място в потока. */
.is-proba .hdr   { position: sticky; }
.is-proba .phero { padding-top: clamp(56px, 7vw, 96px); }

/* Трите правила на вота — стоят преди картите, защото решението да
   гласуваш се взима с тях наум. */
.rules {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, 1fr);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.rules > div { background: var(--ink); padding: clamp(20px, 2.6vw, 30px); }
.rules dt {
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--spark); margin-bottom: 10px;
}
.rules dd { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.6; }

/* Решетката с финалистите */
.fin {
  display: grid;
  gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.fcard {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.fcard:hover { border-color: var(--line-2); }
.fcard.is-chosen { border-color: var(--spark); }

/* Видеовизитката. Докато не бъде поискана, тук няма чужд плеър — само
   поле и бутон. Това не е дребна подробност: вграденият плеър оставя
   следа в браузъра още преди човекът да е решил да гледа. */
.vviz {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(18vmax 18vmax at 78% 30%, rgba(255, 196, 214, .34) 0 34%, rgba(255, 196, 214, 0) 64%),
    linear-gradient(128deg, #7A0B28 0%, #5E031C 58%, #3D0514 100%);
  display: grid;
  place-items: center;
  border: 0;
  width: 100%;
  padding: 0;
  cursor: pointer;
  color: var(--paper);
  overflow: hidden;
}
.vviz__ini {
  font-family: "Avante Titul Inline", "Manrope", sans-serif;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 68px);
  letter-spacing: .04em;
  opacity: .5;
  transition: opacity .35s var(--ease), transform .45s var(--ease);
}
.vviz:hover .vviz__ini { opacity: .62; transform: scale(1.04); }
.vviz__play {
  position: absolute;
  inset: auto auto 14px 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: rgba(var(--ink-rgb), .68);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line-2);
  border-radius: 100px;
  padding: 8px 15px 8px 11px;
  font-size: 13px;
  font-weight: 700;
  transition: background-color .25s, border-color .25s;
}
.vviz:hover .vviz__play { background: var(--spark); color: var(--on-spark); border-color: var(--spark); }
.vviz__play svg { flex: none; }
.vviz iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Бележката, че клипът е заместващ, стои върху самото видео — най-честното
   място, защото точно там може да се сбърка за истински. */
.vviz__note {
  position: absolute;
  inset: 10px 10px auto auto;
  background: rgba(var(--ink-rgb), .74);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 12px;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--faint);
}

.fcard__body { padding: clamp(18px, 2.2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.fcard__name { font-size: 21px; line-height: 1.2; margin-bottom: 6px; }
.fcard__tag { color: var(--spark); font-size: 14.5px; line-height: 1.5; margin-bottom: 14px; }
.fcard__area {
  align-self: flex-start;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 5px 11px;
  margin-bottom: 16px;
}
.fcard__story { color: var(--dim); font-size: 15.5px; line-height: 1.65; margin: 0 0 18px; }
/* Историята се чете преди гласуването — затова се показва скъсена, а не
   скрита. Който иска цялата, я разгъва, без да сменя страницата. */
.fcard__story.is-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fcard__more {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--paper); font-size: 14px; font-weight: 700;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--line-2);
  margin: -6px 0 18px;
  align-self: flex-start;
}
.fcard__more:hover { text-decoration-color: var(--spark); }
.fcard__act { margin-top: auto; }
.fcard__act .btn { width: 100%; justify-content: center; }

/* Панелът за гласуване. Отваря се върху картата, а не на нова страница —
   изборът трябва да остане видим, докато се попълва адресът. */
.vdlg {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 520px;
  width: calc(100% - 32px);
  color: var(--paper);
}
.vdlg::backdrop { background: rgba(10, 0, 4, .78); backdrop-filter: blur(3px); }
.vdlg__in {
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-l);
  padding: clamp(24px, 3.4vw, 36px);
}
.vdlg__who {
  border-left: 3px solid var(--spark);
  padding-left: 14px;
  margin-bottom: 22px;
}
.vdlg__who b { display: block; font-size: 19px; }
.vdlg__who span { color: var(--dim); font-size: 14.5px; }

.field { margin-bottom: 18px; }
.field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.field input[type="email"] {
  width: 100%;
  background: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: var(--r-s);
  color: var(--paper);
  font: inherit;
  font-size: 16px;            /* под 16px iOS увеличава страницата при фокус */
  padding: 14px 16px;
}
.field input[type="email"]:focus { border-color: var(--spark); outline: none; }
.field__hint { color: var(--faint); font-size: 13.5px; line-height: 1.55; margin-top: 8px; }

/* Отметката за съгласие. Не е предварително маркирана и не може да бъде —
   съгласие, дадено вместо човека, не е съгласие. */
.consent { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 22px; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--spark); }
.consent label { font-size: 14px; line-height: 1.6; color: var(--dim); }
.consent a { color: var(--spark); }

/* Капанът за ботове. Скрит от хора и от екранни четци, но не с display:none —
   част от автоматите пропускат точно него. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.vdlg__foot { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.vdlg__foot .btn--spark { flex: 1; justify-content: center; min-width: 180px; }

.note {
  border-radius: var(--r-m);
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  margin-top: 18px;
}
.note--ok   { background: rgba(var(--spark-rgb), .12); border: 1px solid rgba(var(--spark-rgb), .4); }
.note--ok b { color: var(--spark); }
.note--warn { background: rgba(255, 194, 75, .12); border: 1px solid rgba(255, 194, 75, .42); }
.note--err  { background: rgba(255, 122, 92, .12); border: 1px solid rgba(255, 122, 92, .45); }
.note code {
  display: block;
  word-break: break-all;
  margin-top: 10px;
  font-size: 13px;
  color: var(--spark);
}

/* Страницата на потвърждението — един екран с един отговор. */
.confirm { min-height: 78vh; display: grid; place-items: center; text-align: center; }
.confirm__in { max-width: 560px; }
.confirm__icon {
  width: 68px; height: 68px; border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 26px;
  border: 2px solid var(--line-2);
}
.confirm__icon--ok { border-color: var(--spark); color: var(--spark); }
.confirm h1 { font-size: clamp(28px, 4.4vw, 42px); margin-bottom: 16px; }
.confirm p { color: var(--dim); font-size: 17px; line-height: 1.65; }
.confirm .btn { margin-top: 30px; }

/* Какво се събира — таблицата стои на самата страница на вота, а не зад
   връзка. Човек, който дава адреса си, има право да види това без да търси. */
.gdpr { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.gdpr > div { background: var(--ink); padding: 18px clamp(18px, 2.4vw, 26px); display: grid; grid-template-columns: 200px 1fr; gap: 6px 24px; }
.gdpr dt { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.gdpr dd { margin: 0; color: var(--dim); font-size: 15.5px; line-height: 1.6; }
.gdpr a { color: var(--spark); }

@media (max-width: 860px) {
  .rules { grid-template-columns: 1fr; }
  .gdpr > div { grid-template-columns: 1fr; }
  .fin { grid-template-columns: 1fr; }
}