/* ==========================================================================
   СТАН — база теми й головна сторінка. Редизайн stan.zelenagazeta.com
   Токени взяті з ТЗ (розділ «Кольорова палітра»).
   Підключається на всьому сайті: тут живуть токени, .shell, спільні
   примітиви, шапка й підвал. Секції головної на решті сторінок просто не
   зустрічаються. Внутрішні сторінки — у stan-pages.css.
   ========================================================================== */

:root{
  /* --- палітра ТЗ --- */
  --bg:        #F7F3EA;   /* фон, тепла айворі         60–70% */
  --text:      #151515;   /* текст, графіт             15–20% */
  --brand:     #183D34;   /* бренд, глибокий зелений    8–12% */
  --accent:    #C76F4E;   /* акцент, тепла теракота      3–6% */
  --sage:      #6F8F7C;   /* другорядний, шавлія         3–5% */
  --line:      #B7AB92;   /* лінії, пісочно-сірий        5–8% */

  /* --- похідні, виведені з палітри, нових барв не додано --- */
  /* Контраст піднято двічі на вимогу редакції: дрібні написи й лінії на айворі
     читалися блідо. --muted пішов з 4,5:1 на 5,9:1, --line — з майже
     невидимого #D8D1C4 через #C6BCA7 на #B7AB92 (2,05:1): рамка картки тепер
     видно, що є, а смуга ще не читається як сіра.
     Теракота лишається тим самим брендовим #C76F4E у заливках, але як текст
     дає лише 3,2:1 — нижче за AA, — тож для написів і підкреслень заведено
     темніший --accent-ink (5,5:1). Той самий прийом для шавлії: --sage
     тримає макет, --sage-ink (4,4:1) малює значки. Один колір у двох ролях:
     пляма лишається з макета, чорнило стає читабельним. */
  --muted:     #5B5548;
  --accent-ink:#9E4A2B;
  --sage-ink:  #557A65;
  --card:      #F1ECE0;
  --peach:     #F6E3D6;

  /* Перемикач основної кнопки.
     var(--text)  — як у затвердженому макеті (графіт).
     var(--brand) — як вимагає ТЗ за часткою зеленого 8–12%.
     Змінюється в одному місці, решта сторінки підхопить. */
  --btn:       var(--text);
  --btn-on:    var(--bg);

  /* --- кольори рубрик --- */
  /* Дев'ять кольорів на дев'ять рубрик. Змінні названі за рубрикою, а не за
     старим рубрикатором, — інакше через рік ніхто не згадає, чому «сон»
     фарбується змінною --t-brain. Палітра лишається теплою: чотири зелені
     тримають основу, чотири теплі відтінки розводять сусідні плитки, новинам
     віддано теплу графітову — найнейтральніший тон гами, але не чорний:
     чистий #151515 у смузі рубрик читався як «текст», а не як мітка.
     Три найсвітліші тони поглиблено двічі: теракота, шавлія й вохра на айворі
     давали спершу 3,2–3,4:1, потім 4,2–4,7:1 — тобто мітка «ресурс» досі
     читалася блідішою за сусідній «сон». Тепер увесь набір лежить у смузі
     5,6–10,8:1, і жоден тон не випадає з ряду. Відтінок скрізь той самий,
     узятий глибше. Виграш подвійний: раз колір сам собою читабельний як
     текст, його більше не треба підмішувати до графіту (див. --tone-ink), і
     назви рубрик стали і контрастнішими, і кольоровішими водночас. */
  --t-news:     #3D382E;   /* новини    — тепла графітова, факт без інтонації */
  --t-anxiety:  #9E4722;   /* тривога   — теракота, найгучніший теплий */
  --t-resource: #3C6250;   /* ресурс    — шавлія, відновлення */
  --t-mood:     #855715;   /* настрій   — вохра, тепле світло */
  --t-burnout:  #8B4A35;   /* вигорання — випалена сієна */
  --t-sleep:    #2F4A4E;   /* сон       — глибокий сіро-зелений, ніч */
  --t-focus:    #3E5C50;   /* фокус     — середній зелений */
  --t-stress:   #9B3B39;   /* стрес     — цегляний, напруга */
  --t-podcast:  #183D34;   /* подкасти  — темно-зелений бренду */

  /* --- сітка ТЗ --- */
  --maxw: 1440px;
  --margin: 64px;
  --gutter: 24px;

  --ff-display: 'Manrope', system-ui, sans-serif;
  --ff-text: 'Inter', system-ui, sans-serif;
}

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

html{ -webkit-text-size-adjust:100%; }

body.stan{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-text);
  font-size:16px;
  line-height:1.55;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
}

/* height:auto — інакше HTML-атрибут height перебиває aspect-ratio.
   :where() лишає ваги нуль: атрибут-підказку все одно б'ємо, а компонентні
   «height:100%» (герой, «Вибір редакції») більше не програють цьому скиданню. */
:where(.stan) img{ display:block; max-width:100%; height:auto; }
/* Скидання полів абзаца теж у :where(): «.stan p» важить (0,1,1) і перебивало
   всі компонентні «.hero__dek{margin:0 0 30px}» вагою (0,1,0) — ліди й підписи
   злипалися з кнопками. З :where() вага нульова, але UA-стилі все одно б'ємо. */
:where(.stan) p{ margin-block:0; }

/* Скидання кольору посилань і полів загорнуте в :where(): так воно має нульову
   вагу і не перебиває .btn, .round-btn, .skip — інакше «color:inherit» вигравав
   у компонентів і кнопка виходила чорним текстом на чорному тлі. */
:where(.stan) a{ color:inherit; text-decoration:none; }
:where(.stan) button,
:where(.stan) input{ font:inherit; color:inherit; }

.stan :focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.shell{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--margin);
}

.skip{
  position:absolute; left:-9999px;
  background:var(--brand); color:var(--bg);
  padding:12px 20px; z-index:99;
}
.skip:focus{ left:var(--margin); top:12px; }

/* --- дрібні спільні примітиви ----------------------------------------- */

.eyebrow{                       /* надзаголовок секції */
  font-family:var(--ff-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin:0;
}

/* Мітка рубрики — єдиний кольоровий напис на картці, і при 12px вона мусить
   виграти в чорного заголовка не розміром, а вагою: 600 на світлому айворі
   читалося як вицвіла графіка. */
.tag{                            /* рубрика над заголовком матеріалу */
  font-family:var(--ff-display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
a.tag:hover{ border-bottom-color:currentColor; }

.meta{
  font-size:12px;
  color:var(--muted);
}
/* У рядку «автор · час читання» ім'я — не примітка, а підпис під матеріалом.
   Той самий прийом, що й у шапці статті (.byline__name): гротеск замість
   тексту, 700 і колір основного тексту проти сірого службового. */
.meta__who{
  font-family:var(--ff-display);
  font-weight:700;
  color:var(--text);
}

.arrow-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--ff-display);
  font-size:13px;
  font-weight:600;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
  transition:border-color .18s, color .18s;
}
.arrow-link:hover{ color:var(--accent-ink); border-bottom-color:var(--accent-ink); }
.arrow-link svg{ transition:transform .18s; }
.arrow-link:hover svg{ transform:translateX(4px); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--btn);
  color:var(--btn-on);
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.01em;
  padding:14px 26px;
  border:1px solid var(--btn);
  border-radius:4px;                 /* ТЗ: радіус 4px, без тіней */
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.btn:hover{ background:var(--brand); border-color:var(--brand); color:var(--bg); }

/* Головна дія на першому екрані — теракотою, щоб не сплутати з «Підписатися»:
   дві однакові графітові кнопки в одному екрані змагаються за увагу.
   Заливка — --accent-ink, а не сам --accent: айворі на чистій теракоті дає
   3,3:1, нижче за AA для 14px, а на глибшому тоні того ж відтінку — 5,5:1.
   Той самий прийом, що з назвами рубрик: колір той, узятий глибше. Наведення
   веде в зелений — як у кружка «Обрати рубрику», щоб обидві акцентні дії
   поводилися однаково. */
.btn--accent{ background:var(--accent-ink); border-color:var(--accent-ink); color:var(--bg); }

/* ==========================================================================
   1. Шапка
   ========================================================================== */

.masthead{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:48px;
  padding-block:17px;
}

.lockup{
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--text);
}
.lockup__mark{
  width:150px;
  height:auto;
  flex:none;
}
.lockup__rule{
  align-self:stretch;
  width:1px;
  background:var(--line);
  margin-block:4px;
}
.lockup__tagline{
  font-size:11px;
  line-height:1.5;
  color:var(--muted);
  white-space:nowrap;
}

.nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px;
}
.nav a{
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:500;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .18s, color .18s;
  white-space:nowrap;
}
.nav a:hover{ color:var(--brand); border-bottom-color:var(--brand); }

/* Перший ярус меню — рубрики. На десктопі меню лежить рядком, і перелік із
   дев'яти тем у ньому не поміститься: там за це відповідає смуга під героєм.
   Тому блок вмикається тільки на телефоні (@720), як і ряд соцмереж. */
.navtopics{ display:none; }

/* justify-end потрібен на мобільному, де ця група живе у гнучкій колонці 1fr
   і без нього тулилася б до вивіски. На десктопі колонка auto — вирівнювання
   там ні на що не впливає, тож правило одне на всі ширини. */
.masthead__end{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:22px;
}
.masthead__rule{
  width:1px;
  height:36px;
  background:var(--line);
}
.icon-btn{
  display:grid;
  place-items:center;
  width:36px; height:36px;
  background:none;
  border:0;
  border-radius:4px;
  cursor:pointer;
  transition:color .18s;
}
.icon-btn:hover{ color:var(--accent-ink); }

.nav-toggle{ display:none; }

/* Перемикач мобільного меню працює без JS. Сам чекбокс ховаємо назавжди,
   але фокус із нього переносимо на видимий бургер. */
#nav-switch{
  position:absolute;
  left:auto;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  clip-path:inset(50%);
  overflow:hidden;
}
#nav-switch:focus-visible + .masthead .nav-toggle{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* ==========================================================================
   2. Герой
   ========================================================================== */

.hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.30fr) 224px;
  border-top:1px solid var(--line);
}

/* Висоту героя задає не картинка, а заголовок: у макеті це двослівне гасло,
   а в житті — справжній заголовок статті, який розгортався на п'ять рядків і
   тягнув перший екран до 610px. Тому текст обмежено рамкою.
   Де саме поставити рамку — питання не смаку, а бази: 2223 опублікованих
   матеріали, середній заголовок 70 знаків, 93% коротші за 90. У три рядки
   влазить близько 55 знаків — обрізало б три заголовки з чотирьох, а це
   головне посилання сторінки, за яким читач вирішує, чи заходити. Тому
   чотири рядки при трохи меншому кеглі: 34px замість 38 дають ~96 знаків,
   тобто ціле гасло у 19 випадках із 20. Лід лишається у двох рядках.
   Той рідкісний хвіст, що все-таки не влазить, не губиться: повний
   заголовок стоїть у картці нижче й у title сторінки. */
.hero__text{
  padding:38px 44px 38px 0;
  align-self:center;
}
.hero__tag{
  display:inline-block;
  margin-bottom:12px;
}
.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(27px,2.35vw,34px);
  font-weight:700;
  line-height:1.13;
  letter-spacing:-.02em;
  margin:0 0 18px;
  text-wrap:balance;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:4;
  line-clamp:4;
  overflow:hidden;
}
.hero__title a{
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
.hero__title a:hover{ border-bottom-color:var(--text); }
.hero__dek{
  max-width:40ch;
  font-size:15.5px;
  line-height:1.58;
  color:#2C2A26;
  margin:0 0 24px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}
.hero__cta{
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.hero__meta{ margin-top:16px; }

/* Зріз кута — єдиний фірмовий жест теми, і він масштабується разом із кадром:
   120px у герої, 72px у лід-картці, 56px у «Виборі редакції», 32px у картці
   сітки, 24px у превʼю новини. Кут завжди той самий — лівий нижній, той, що
   дивиться на текст. Один жест на п'яти масштабах читається як система;
   п'ять різних заокруглень читалися б як недогляд. */
.hero__figure{ margin:0; }
.hero__figure a{ display:block; height:100%; }
.hero__figure img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 40%;
  border-radius:4px 4px 4px 120px;
}

/* 41px згори — не «на око»: рубрика зліва («стиль життя») стоїть на 38px
   відступу .hero__text плюс власний півінтерліньяж рядка, тож надрядок правої
   колонки лягає з нею в одну лінію лише на 41. Два дрібні написи в одній
   смузі мусять читатися як пара, а не як випадковий збіг. */
.hero__aside{
  display:flex;
  flex-direction:column;
  padding:41px 0 22px 28px;
  border-left:1px solid var(--line);
}
.hero__aside .eyebrow{ margin-bottom:16px; }
.hero__aside p{
  font-size:13px;
  line-height:1.62;
  color:var(--muted);
  margin:0;
}
.hero__aside-stem{           /* короткий вертикальний штрих із макета */
  width:1px;
  flex:1 1 auto;
  min-height:34px;
  margin:22px 0 0 1px;
  background:var(--line);
}
.hero__aside-foot{
  margin-top:auto;
  padding-top:26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.hero__aside-foot span{
  font-family:var(--ff-display);
  font-size:12px;
  font-weight:600;
  line-height:1.35;
  white-space:nowrap;
}
.round-btn{
  flex:none;
  display:grid;
  place-items:center;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--accent);
  color:var(--bg);
  border:1px solid var(--accent);
  cursor:pointer;
  transition:background .18s, border-color .18s, transform .18s;
}
.round-btn:hover{ background:var(--brand); border-color:var(--brand); transform:translateX(3px); }

/* ==========================================================================
   3. Смуга рубрик — підпис «ТЕМИ» стоїть коренцем, як на палітурці
   ========================================================================== */

/* Один ряд, як у макеті: підпис «теми», шість плиток і вихід на решту.
   Дев'ять плиток розгорталися на два ряди й тягли перший екран униз на
   112px — а смуга під героєм має читатися одним поглядом, інакше це вже
   не покажчик, а другий зміст сторінки. */
.topics{
  display:grid;
  grid-template-columns:44px repeat(6,minmax(0,1fr)) auto;
  align-items:stretch;
  border-block:1px solid var(--line);
}

/* Обгортка існує заради телефону, де плитки їдуть однією рейкою вбік. На
   ширших екранах вона розчиняється: display:contents прибирає саму коробку,
   і плитки лишаються прямими комірками сітки .topics. Побічний зиск — лічба
   nth-child починається з першої плитки, а не зі спини, тож рамки на планшеті
   рахуються по-людськи. */
.topics__rail{ display:contents; }

.topics__spine{
  display:grid;
  place-items:center;
  border-right:1px solid var(--line);
  margin:0;
}
.topics__spine span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--ff-display);
  font-size:11px;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Кожна плитка несе свій --tone (інлайном із front-page.php). Ним фарбується
   знак, ним же — назва, і плитка перестає бути шістьма однаковими чорними
   рядками. Раніше назву доводилося гасити сумішшю з графітом — інакше вохра
   не добирала до AA. Після другого поглиблення тонів найсвітліший із них дає
   5,6:1, тож підмішувати більше нічого не треба: назва йде чистим кольором
   рубрики. Змінна лишається окремою — місце, де це рішення можна відкотити,
   не переписуючи правила. */
.topic{
  --tone: var(--text);
  --tone-ink: var(--tone);
  --tone-wash: color-mix(in srgb, var(--tone) 9%, var(--bg));
  display:block;
  padding:18px 16px;
  border-right:1px solid var(--line);
  transition:background .18s;
}
.topic:hover,
.topic:focus-visible{ background:var(--card); background:var(--tone-wash); }
/* Усі назви — одне слово, тож резерв на два рядки не потрібен: висоту голови
   задає іконка (24px), а не текст. Опис лишаємо у два рядки — він у рубрик
   різної довжини. */
.topic__head{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:24px;
  margin-bottom:8px;
}
.topic__icon{ flex:none; }
.topic__name{
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:700;
  line-height:1.4;
  padding-top:1px;
  color:var(--tone-ink);
}
.topic__desc{
  font-size:11.5px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  min-height:35px;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  overflow:hidden;
}

.topics__all{
  display:grid;
  place-items:center;
  padding-inline:22px;   /* лінію ліворуч дає border-right шостої плитки */
}

/* ==========================================================================
   4. Три колонки
   ========================================================================== */

.grid3{
  display:grid;
  grid-template-columns:minmax(0,549fr) minmax(0,325fr) minmax(0,281fr);
  gap:30px;
  padding-block:32px;
}

.col{ min-width:0; }
.col--new{
  padding-left:30px;
  border-left:1px solid var(--line);
}

.col__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  min-height:26px;
  margin-bottom:22px;
}

/* --- вибір редакції --- */

/* Знімок стояв збоку від тексту — вузька колонка 296px при висоті 386px
   різала горизонтальний кадр у портрет 3:4 і лишала від нього центральну
   смужку. Кладемо картинку зверху на всю ширину колонки: панорамний кроп
   21:9 знімає з оригіналу тільки верх і низ, а не дві третини кадру.
   Нижній лівий кут зрізаний дугою — той самий жест, що й арки на картці
   розсилки в третій колонці, тільки дзеркально; ряд читається як ціле. */
.feature{
  display:flex;
  flex-direction:column;
  gap:22px;
}
/* Висоту ряду задає найдовша з трьох колонок. Зайві пікселі віддаємо кадру,
   а не проміжку: інакше між знімком і заголовком зависала б стометрова
   порожнеча. Так низи всіх трьох колонок сходяться в одну лінію. */
.col--feature{ display:flex; flex-direction:column; }
.col--feature .feature{ flex:1 1 auto; }
.feature__media{
  display:block;
  flex:1 1 auto;
  min-height:0;
}
.feature__img{
  display:block;
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
  border-radius:4px 4px 4px 56px;
}
/* Якщо у «Вибір редакції» потрапив подкаст — обкладинку не кадруємо, як і
   всюди: вона лягає цілком на підкладку кольору бренду. */
.feature--cover .feature__img{
  object-fit:contain;
  background:color-mix(in srgb, var(--brand) 7%, var(--card));
}
.feature .tag{ display:block; margin-bottom:12px; }
.feature__title{
  font-family:var(--ff-display);
  font-size:24px;
  font-weight:700;
  line-height:1.24;
  letter-spacing:-.01em;
  margin:0 0 14px;
  text-wrap:pretty;
}
.feature__title a{
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
.feature__title a:hover{ border-bottom-color:var(--text); }
.feature__dek{
  font-size:13.5px;
  line-height:1.62;
  color:var(--muted);
  margin:0 0 18px;
  max-width:62ch;
}

/* --- нове --- */

/* Три новини коротші за сусідню колонку, тому роздільні лінійки закінчувалися
   за пів сотні пікселів до низу ряду. Розтягуємо пункти рівними частками —
   останній рядок сідає рівно на спільну лінію низу. */
.col--new{ display:flex; flex-direction:column; }
.col--new .newslist{ flex:1 1 auto; display:flex; flex-direction:column; }
.col--new .newslist li{ flex:1 1 0; }   /* саме 0, а не auto: інакше зайва висота ділиться пропорційно вмісту й останній рядок виходить на 37px нижчим */
.col--new .newsitem{ height:100%; align-content:center; }
.col--new .newslist li:first-child .newsitem{ padding-top:16px; }

.newslist{
  list-style:none;
  margin:0;
  padding:0;
}
.newslist li + li{
  border-top:1px solid var(--line);
}
/* Превʼю було 88×55 у рядку заввишки 130px — картинка губилася, а половина
   рядка стояла порожня. Беремо 116px: знімок майже вдвічі більший за площею,
   під текст лишається 189px — заголовок у 14px тримає ті самі три рядки.
   Зріз кута повторює жест «Вибору редакції», але вдвічі дрібніший — на такому
   масштабі більший з'їв би саму картинку.

   Пропорція 3:2, як і в картках сітки: така сама в 1631 мініатюри з ~2200,
   тож у переважній більшості рядків зрізу немає взагалі. */
.newsitem{
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  gap:16px;
  padding-block:16px;
  align-items:start;
}
.newslist li:first-child .newsitem{ padding-top:0; }
.newsitem > a{ display:block; width:116px; }
.newsitem img{
  width:116px;
  height:auto;
  aspect-ratio:3/2;
  object-fit:cover;
  border-radius:4px 4px 4px 24px;
}
/* Обкладинка подкасту в рядку 116px: зрізати її нема куди — назва випуску
   набрана до краю, і на такому масштабі зникає першою. Вписуємо цілком. */
.newsitem--cover img{
  object-fit:contain;
  background:color-mix(in srgb, var(--brand) 7%, var(--card));
}
.newsitem .tag{ display:block; margin-bottom:6px; font-size:11.5px; }
.newsitem h3{
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:600;
  line-height:1.34;
  margin:0 0 8px;
  text-wrap:pretty;
}
.newsitem h3 a{
  border-bottom:1px solid transparent;
  transition:border-color .18s;
}
.newsitem h3 a:hover{ border-bottom-color:var(--text); }

/* --- розсилка --- */

/* Картка тягнеться на висоту ряду, а тексту в ній менше, ніж у сусідніх
   колонках, — тож знизу лишалося 130px порожньої пастелі. Центруємо вміст:
   поля згори й знизу стають однакові, декор по кутах працює як і працював. */
.letter{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  background:var(--peach);
  border-radius:4px;
  padding:30px 28px;
  height:100%;
}
.letter__title{
  font-family:var(--ff-display);
  font-size:23px;
  font-weight:700;
  line-height:1.22;
  letter-spacing:-.01em;
  margin:0 0 16px;
  position:relative;
}
.letter > p{
  font-size:13px;
  line-height:1.6;
  color:#6B4E3F;
  margin:0 0 22px;
  max-width:26ch;
  position:relative;
}

/* Форма — реальна Contact Form 7 (форма 180 «Підписуйся на новини»).
   Розмітку плагіна не чіпаємо, тільки приводимо її до вигляду макета.
   Класи form__top / form__box / form__submit — з розмітки самої форми. */
.letter form,
.letter .wpcf7{
  position:relative;
  display:block;
}
.letter .screen-reader-response{ position:absolute; left:-9999px; }
.letter .wpcf7 form > p,
.letter form > p{ margin:0 0 10px; max-width:none; }
.letter .wpcf7-form-control-wrap{ display:block; }

.letter .form__top{ margin:0 0 20px; }
.letter .form__title{
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  margin:0 0 4px;
}
.letter .form__text{
  font-size:13px;
  line-height:1.6;
  color:#6B4E3F;
  margin:0;
}
.letter .form__box{ display:grid; gap:10px; }
.letter .form__label{ display:block; }
.letter input[type="email"],
.letter input[type="text"],
.letter input[type="tel"]{
  width:100%;
  background:#FFFCF8;
  border:1px solid #E7CDBB;
  border-radius:4px;
  padding:13px 15px;
  font-size:13px;
}
.letter input::placeholder{ color:#A98B79; }
.letter input[type="submit"],
.letter .wpcf7-submit,
.letter .form__submit,
.letter .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  background:var(--btn);
  color:var(--btn-on);
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:600;
  padding:14px 26px;
  border:1px solid var(--btn);
  border-radius:4px;
  cursor:pointer;
  transition:background .18s, border-color .18s, color .18s;
}
.letter input[type="submit"]:hover,
.letter .wpcf7-submit:hover,
.letter .form__submit:hover,
.letter .btn:hover{ background:var(--brand); border-color:var(--brand); color:var(--bg); }
.letter .wpcf7-not-valid-tip,
.letter .wpcf7-response-output{
  position:relative;
  font-size:12px;
  line-height:1.45;
  color:#8B4A35;
  margin:8px 0 0;
  padding:0;
  border:0;
}
.letter .wpcf7-spinner{ display:none; }

/* декор картки розсилки: крапкова сітка + дуги, побудовані з палітри */
.letter__dots,
.letter__arcs{ position:absolute; pointer-events:none; }
.letter__dots{
  top:22px; right:20px;
  width:76px; height:64px;
  background-image:radial-gradient(var(--accent) 1.1px, transparent 1.1px);
  background-size:11px 11px;
  opacity:.55;
}
.letter__arcs{
  right:-34px; bottom:-30px;
  width:200px; height:200px;
  opacity:.7;
}

/* ==========================================================================
   5. Свіже — сітка матеріалів під трьома колонками
   ========================================================================== */

/* Заголовок смуги набраний тим самим надрядком, що й «Вибір редакції» та
   «Нове» на рядок вище, і сидить на такій самій лінійці — сітка читається як
   продовження ряду, а не як нова сторінка. Картки беруться готові, з .grid:
   інакше на головній завівся б другий різновид картки, який рано чи пізно
   розійшовся б з архівним. */
.latest{
  padding-top:26px;
  border-top:1px solid var(--line);
}
.latest__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  min-height:26px;
  margin-bottom:26px;
}
.latest__head .eyebrow{ color:var(--muted); }
.latest .grid{ padding-block:0 56px; }

/* ==========================================================================
   6. Промо-смуга
   ========================================================================== */

/* Рівні третини й той самий міжколонник 30px, що й у сітці вище: смуга промо
   стає продовженням загального ритму, а не окремою сіткою з власним кроком. */
.promos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:30px;
  padding-bottom:56px;
}

.promo{
  display:flex;
  align-items:center;
  border-radius:4px;
  background:var(--card);
  min-height:110px;
  overflow:hidden;
  transition:background .18s;
}
.promo:hover{ background:#EDE7D9; }

.promo__plate{
  flex:none;
  align-self:stretch;
  display:grid;
  place-items:center;
  width:186px;
  background:var(--text);
  color:var(--bg);
  position:relative;
}
.promo__plate svg{ width:104px; height:auto; position:relative; z-index:1; }
.promo__plate::after{                       /* крапкова текстура праворуч */
  content:"";
  position:absolute;
  right:16px; top:50%;
  transform:translateY(-50%);
  width:34px; height:52px;
  background-image:radial-gradient(rgba(247,243,234,.5) 1px, transparent 1px);
  background-size:9px 9px;
}

.promo__body{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex:1;
  min-width:0;
  padding:20px 24px;
}
.promo__title{
  display:block;
  font-family:var(--ff-display);
  font-size:14px;
  font-weight:700;
  margin:0 0 4px;
}
.promo__sub{
  display:block;
  font-size:12.5px;
  line-height:1.5;
  color:var(--muted);
  margin:0;
  text-wrap:pretty;
}
.promo__go{
  flex:none;
  color:var(--muted);
  transition:transform .18s, color .18s;
}
.promo:hover .promo__go{ transform:translateX(4px); color:var(--accent-ink); }

.stat{
  display:flex;
  align-items:center;
  gap:20px;
  min-width:0;
  flex:1;
}
.stat__num{
  font-family:var(--ff-display);
  font-size:44px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1;
  flex:none;
}
.wave{ flex:none; margin-left:16px; width:80px; height:auto; }
.wave rect{ fill:var(--muted); opacity:.45; }
.promo:hover .wave rect{ opacity:.7; }

/* ==========================================================================
   6. Підвал (спільний для всього сайту)
   ========================================================================== */

.foot{
  border-top:1px solid var(--line);
  padding-block:26px 40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--muted);
}
.foot nav{ display:flex; gap:24px; flex-wrap:wrap; }
.foot a:hover{ color:var(--accent-ink); }

/* --- соцмережі ------------------------------------------------------------
   Ряд живе у двох місцях: у підвалі та в розкритому мобільному меню. Кнопка
   бере той самий зріз кута, що й решта теми, тільки в найменшому масштабі
   (14px на 38px) — знаки стають частиною мови макета, а не наліпками.

   Селектори навмисно подвійні (.socials .socials__link): у підвалі стоїть
   .foot a:hover, у меню — .nav a з border-bottom і padding-block, і обидва
   за вагою перебивають одиночний клас. */
.socials{
  display:flex;
  align-items:center;
  gap:8px;
  list-style:none;
  margin:0;
  padding:0;
}
.socials .socials__link{
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  padding:0;
  border:1px solid var(--line);
  border-bottom:1px solid var(--line);
  border-radius:4px 4px 4px 14px;
  color:var(--muted);
  transition:color .18s, background .18s, border-color .18s, transform .18s;
}
.socials .socials__link:hover,
.socials .socials__link:focus-visible{
  color:var(--bg);
  background:var(--brand);
  border-color:var(--brand);
  transform:translateY(-2px);
}

/* У меню ряд показується лише на мобільному — на десктопі меню розкрите
   завжди, і п'ять знаків посеред пунктів були б зайвим шумом. */
.socials--nav{ display:none; }

/* ==========================================================================
   7. Поява при завантаженні — один стриманий такт, без розсипу ефектів
   ========================================================================== */

@keyframes rise{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:none; }
}
.rise{ animation:rise .62s cubic-bezier(.22,.61,.36,1) backwards; }
.rise--1{ animation-delay:.05s; }
.rise--2{ animation-delay:.14s; }
.rise--3{ animation-delay:.23s; }
.rise--4{ animation-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  .stan *,.stan *::before,.stan *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ==========================================================================
   8. Планшет — 834 (ТЗ: поля 40, 8 колонок)
   ========================================================================== */

@media (max-width:1180px){
  :root{ --margin:40px; }

  .masthead{ gap:28px; }
  .nav{ gap:22px; }
  .nav a{ font-size:13px; }
  .lockup__mark{ width:120px; }
  /* Дескриптор поряд із лого — перше, що йде: шапка перестає вміщатися
     в рядок уже близько 950px, а сенс дескриптора дублює підвал. */
  .lockup__rule,
  .lockup__tagline{ display:none; }

  .hero{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .hero__text{ padding:44px 36px 44px 0; }
  .hero__aside{
    grid-column:1 / -1;
    flex-direction:row;
    align-items:flex-start;
    gap:36px;
    padding:24px 0;
    border-left:0;
    border-top:1px solid var(--line);
  }
  /* Нижній margin надрядка потрібен лише у вузькій правій колонці десктопа.
     Тут смуга горизонтальна: 16px нижнього поля лишалися в потоці й робили
     просвіт під смугою на 13px більшим за верхній, а нижче — подвоювали gap
     мобільного стовпчика. Ритм тримають padding і gap. */
  .hero__aside .eyebrow{ margin-bottom:0; }
  .hero__aside p{ max-width:46ch; }
  .hero__aside-stem{ display:none; }
  .hero__aside-foot{ margin:0 0 0 auto; padding-top:0; }

  /* Шість плиток по три — рівно два ряди. Плитки лічаться в межах .topics__rail,
     тож перша з них і є nth-child(1). */
  .topics{ grid-template-columns:44px repeat(3,minmax(0,1fr)); }
  .topics__spine{ grid-row:span 2; }
  .topic{ border-bottom:1px solid var(--line); }
  .topic:nth-child(3n){ border-right:0; }     /* 3 і 6 — правий стовпчик */
  .topic:nth-child(n+4){ border-bottom:0; }   /* нижній ряд закриває рамка смуги */
  /* Спина займає обидва ряди, тож третій ряд у першій колонці лишається
     порожнім. Тягнемо смугу «Усі теми» через усю ширину — інакше її верхня
     лінія обривалася б за 44px від лівого краю. Вміст усе одно притиснутий
     праворуч, тож візуально нічого не зсувається. */
  .topics__all{
    grid-column:1 / -1;
    justify-items:end;
    padding:16px 20px;
    border-top:1px solid var(--line);
  }

  .grid3{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:28px;
  }
  .col--letter{ grid-column:1 / -1; }
  /* Колонки вирівнюються по-іншому, розтягувати кадр на залишок висоти більше
     нема потреби — тримаємо чесні 16:9, зріз кута зменшуємо пропорційно. */
  .feature{ gap:18px; }
  .feature__media{ flex:0 0 auto; }
  .feature__img{ height:auto; min-height:0; aspect-ratio:16/9; border-radius:4px 4px 4px 40px; }
  .feature__title{ font-size:22px; }

  /* На всю ширину картка розсилки лишала дві третини порожньої пастелі.
     Ліворуч — звертання, праворуч — форма; декор працює по кутах, як і був. */
  .letter{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:40px;
    align-content:center;
    padding:36px 32px;
  }
  .letter__title{ grid-column:1; grid-row:1; margin-bottom:0; }
  .letter > p{ grid-column:1; grid-row:2; margin-top:16px; }
  .letter > form,
  .letter > .wpcf7{ grid-column:2; grid-row:1 / -1; align-self:center; max-width:420px; }

  .promos{ grid-template-columns:minmax(0,1fr); gap:14px; }
}

/* Вузький планшет. Двоколонковий герой лишає під заголовок ~336px: у 30px
   Manrope це п'ять рваних рядків, а пара «кнопка + посилання» переноситься.
   Складаємо героя в одну колонку раніше, ніж вмикається мобільне меню. */
@media (max-width:900px){
  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero__figure{ order:0; }
  .hero__figure img{ height:auto; aspect-ratio:16/9; border-radius:4px 4px 4px 72px; }
  .hero__text{ order:1; padding:32px 0 36px; }
  .hero__dek{ max-width:60ch; }
  .hero__aside{ order:2; }
}

/* Вузький планшет: меню з шести пунктів і кнопка вже не стають в один рядок.
   Кнопку прибираємо — форма підписки лишається в сітці нижче. */
@media (max-width:1000px){
  .masthead{ gap:20px; }
  .nav{ gap:18px; }
  .masthead__cta{ display:none; }
  .masthead__rule{ display:none; }
}

/* ==========================================================================
   9. Мобільний — 390 (ТЗ: поля 20, 4 колонки)
   ========================================================================== */

@media (max-width:720px){
  :root{ --margin:20px; }

  body.stan{ font-size:15px; }

  .masthead{
    grid-template-columns:auto 1fr;
    gap:14px;
    padding-block:18px;
  }
  .lockup__mark{ width:86px; }
  .lockup__rule,
  .lockup__tagline{ display:none; }
  /* Меню відкривається другим рядком, під вивіскою. Рядок і колонку знаків
     задаємо явно: інакше автопотік ставить .masthead__end після .nav, тобто
     аж під списком, і кнопка, якою меню закривають, тікає вниз ліворуч. */
  .nav{
    display:none;
    grid-column:1 / -1;
    grid-row:2;
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }
  .nav a{ font-size:16px; padding-block:9px; }
  /* 36px — розмір знака, а не зони натискання: між лупою й бургером лишалося
     22px, і палець на межі відкривав не те. Кнопки ростуть до 44px і з'їдають
     цей проміжок від'ємним полем — рухається зона натискання, не знаки. */
  .masthead__end{
    grid-column:2;
    grid-row:1;
    gap:6px;
    /* Поле кнопки (12px) виносимо за поле сторінки, щоб риски бургера
       закінчувалися рівно на правому полі — там, де ліворуч починається
       слово «СТАН». Інакше знак стоїть на 8px глибше за назву, і верхівка
       виглядає перекошеною. */
    margin-right:-12px;
  }
  .icon-btn{ width:44px; height:44px; }
  .masthead__rule{ display:none; }
  .nav-toggle{ display:grid; }
  .masthead__cta{ display:none; }
  #nav-switch:checked ~ .masthead .nav{ display:flex; }

  /* --- перший ярус меню: рубрики ---------------------------------------
     Меню відповідає на два різні питання — «про що почитати» і «що це за
     видання». Рубрики йдуть першими, бо шукають частіше їх; сторінки — під
     лінією. Пункти «Теми» й «Подкасти» з нижнього переліку зняті: вони вже
     стоять тут (див. позначку dup у stan_nav()). */
  .navtopics{
    display:block;
    align-self:stretch;
    padding-bottom:14px;
    margin-bottom:4px;
    border-bottom:1px solid var(--line);
  }
  .navtopics__title{ margin-bottom:12px; }
  .navtopics__grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:16px;
  }
  /* Рядок рубрики: знак у кольорі теми, назва тим самим кольором. Це та сама
     пара, що в смузі під героєм, тільки покладена в рядок. */
  .navtopic{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:44px;                      /* зона натискання, не декор */
    padding-block:4px;
    color:var(--tone);
  }
  .navtopic .topic__icon{ width:20px; height:20px; flex:none; }
  .navtopic__name{
    font-family:var(--ff-display);
    font-size:15px;
    font-weight:700;
  }
  .navtopics__all{ margin-top:12px; }
  .nav a.nav__dup{ display:none; }
  /* Ряд знаків закриває меню знизу: пункти — куди йти всередині сайту,
     знаки — куди йти назовні. Розділені лінією, як підвал від сторінки. */
  .socials--nav{
    display:flex;
    align-self:stretch;
    margin-top:10px;
    padding-top:14px;
    border-top:1px solid var(--line);
  }

  .hero{ grid-template-columns:minmax(0,1fr); }
  .hero__text{
    order:1;
    padding:30px 0;
  }
  .hero__figure{
    order:0;
    margin-inline:calc(var(--margin) * -1);
  }
  /* Кадр виходить за поля в край екрана, тому зріз працює на самому зрізі
     полотна — жест лишається, але вдвічі тихіший, ніж на десктопі. */
  .hero__figure img{ aspect-ratio:16/11; border-radius:0 0 0 56px; }
  .hero__title{ font-size:28px; }
  .hero__dek{ font-size:15px; margin-bottom:26px; }
  .hero__cta{ gap:20px; }
  .btn{ padding:13px 22px; }

  .hero__aside{
    order:2;
    flex-direction:column;
    gap:18px;
    padding:22px 0;
  }
  /* Підпис ліворуч, кружок на правому полі — рядок стоїть від краю до краю, як
     заголовки смуг нижче («Свіже … Усі матеріали →»). Зсунутий до підпису кружок
     лишав праворуч 180px порожнечі, і блок висів лівим боком у стовпчику, де все
     інше тримає обидва поля. */
  /* align-self, бо на планшетному брейкпоінті смуга — рядок із
     align-items:flex-start, і в стовпчику рядок лишався завширшки з підпис. */
  .hero__aside-foot{ margin:0; align-self:stretch; justify-content:space-between; gap:18px; padding-top:4px; }

  /* Стовпчиком рубрики займали 881px — восьму частину всієї головної. Спершу
     смуга лягала набік однією рейкою, яку гортають пальцем, але горизонтальна
     прокрутка тут не читалася: плитка без картинки, обрізана краєм екрана,
     виглядає не як карусель, а як зламана верстка — і половина рубрик просто
     зникала з очей. Тому рейка розкладається переносом: ті самі шість тем плюс
     «усі теми» стають рядом таблеток на три рядки, і жодну не треба шукати.
     Форма й розмір — ті самі, що в чипів рубрик на архівних сторінках, тож на
     телефоні перелік рубрик усюди виглядає однаково.
     (Опис знято: у таблетці на нього лишалося 164px — він обрізався на
     четвертому слові й нічого не пояснював, лише шумів.) */
  .topics{
    grid-template-columns:minmax(0,1fr);
  }
  .topics__spine{
    place-items:start;
    padding:18px 0 12px;
    border-right:0;
    grid-row:auto;              /* скидаємо span 2 з планшетного брейкпоінта */
  }
  .topics__spine span{
    writing-mode:horizontal-tb;
    transform:none;
  }
  /* Не перенос, а сітка. Коли ширину таблетки задає слово в ній, ряди виходять
     різної довжини — правий край гуляє на два-три десятки пікселів від рядка до
     рядка, і блок читається як недоверстаний. Дві рівні колонки ставлять обидва
     краї на одну лінію, а знаки рубрик — у два вертикальні стовпчики. Це та сама
     сітка, що в переліку рубрик у меню, тільки в рамках. */
  .topics__rail{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    padding-bottom:20px;
  }
  .topic{
    display:flex;
    align-items:center;
    padding:9px 13px;
    border-radius:4px;
  }
  /* Планшетні правила бордерів адресні (nth-child) і за вагою перебивають
     звичайний .topic, тож рамку таблетки ставимо так само адресно. */
  .topic:nth-child(n){ border:1px solid var(--line); }
  .topic__head{ min-height:0; margin-bottom:0; gap:7px; }
  .topic__icon{ width:16px; height:16px; }
  .topic__name{ font-size:13px; }
  .topic__desc{ display:none; }
  .topics__all{
    grid-column:1 / -1;
    display:flex;
    align-items:center;
    /* По лівому полю, в одну лінію з надстрочником «Теми» й краєм таблеток:
       раніше 5px відступу зсували посилання відносно всього стовпчика. */
    padding:14px 0 0;
    border-top:0;               /* скидаємо планшетну лінію: тут її нема */
  }

  .grid3{
    grid-template-columns:minmax(0,1fr);
    gap:34px;
    padding-block:26px;
  }
  .col--new{ padding-left:0; border-left:0; }
  .col--new,
  .col--letter{ padding-top:28px; border-top:1px solid var(--line); }

  .feature{ gap:18px; }
  .feature__title{ font-size:22px; }

  /* На телефоні поруч із превʼю лишається ~200px, тому картинку тримаємо
     меншою за десктопні 116px — інакше заголовок ріжеться на два слова в рядок. */
  .newsitem{ grid-template-columns:96px minmax(0,1fr); gap:14px; }
  .newsitem > a,
  .newsitem img{ width:96px; }
  .newsitem img{ border-radius:4px 4px 4px 20px; }

  .letter{ display:block; padding:28px 22px; }   /* знімаємо планшетні дві колонки */
  /* Дуги малювалися під формою: на вузькій картці вони лягають рівно на поле
     вводу й кнопку і читаються як брудна пляма. Лишаємо самі крапки — вони
     сидять у кутку над заголовком і нічому не заважають. */
  .letter__arcs{ display:none; }
  .letter__title{ margin-bottom:16px; }
  .letter > p{ margin-top:0; }
  .letter form,
  .letter .wpcf7{ max-width:none; }

  .promo{ flex-direction:column; align-items:stretch; }
  .promo__plate{ width:100%; padding-block:22px; }
  /* На вузькій плашці знак стоїть по центру, а крапкова текстура лишалася
     притиснутою до правого краю — за 50px від знака вона читається як
     випадкова пляма, а не як його фактура. */
  .promo__plate::after{ display:none; }
  .promo__body{ padding:18px 22px 22px; }
  /* Розриви рядків у підписах розраховані на широку картку. У колонці 156px
     вони давали рвану драбинку («статті, новини та / розбори, / зібрані…») —
     на мобільному текст має переноситися сам. */
  .promo__title br,
  .promo__sub br{ display:none; }
  /* 44px числа з'їдали третину рядка й лишали підпису 156px. */
  .stat{ gap:16px; }
  .stat__num{ font-size:34px; }

  /* У стовпчик підвал читається згори вниз, тож знаки соцмереж ідуть першими:
     це єдиний вихід із сайту назовні, і ховати його під службовими
     посиланнями й копірайтом сенсу немає. */
  .foot{ padding-bottom:32px; justify-content:flex-start; gap:18px; }
  .socials--foot{ order:-1; }
  /* Чотири службові посилання переносом ставали в два стовпці, які не збігалися:
     другий починався то на 169px, то на 188px — за довжиною сусіда зліва. Сітка
     з двох рівних колонок ставить їх на одну вертикаль. Колонка не вужча за
     150px: на найвужчих екранах лишається одна, і чотири посилання стають
     стовпчиком — теж по одній лінії, без обрізків. */
  .foot nav{
    /* Ряд підвалу переносний, і без цього рядка nav лишається завширшки зі свій
       вміст — сітка тоді рахує колонки від невизначеної ширини й згортається
       в одну. Ціла смуга дає їй знати, звідки й доки міряти. */
    flex:1 1 100%;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
    gap:10px 16px;
  }
}