/*
  Новая дизайн-система сайта psycholog-line.ru (замена Bootstrap).
  Источник: утверждённый мокап «Редизайн Яны Фотиной» (claude.ai/artifact/37Nj4XTwd5F46X4J2NPfuf).
  Брейкпоинт «мобильный / десктоп» — 960px. Шрифты Poppins (заголовки) и Rubik (текст)
  уже подключены в views/layout.pug через Google Fonts.

  Структура файла:
  1. Токены (:root)
  2. Reset и база
  3. Кнопки, значки, рубрикаторы
  4. Шапка/навигация (с мобильным drawer-меню)
  5. Hero
  6. Секция «О себе»
  7. Карточки (свет/тёмная), список с маркером-чертой
  8. Видео + статьи (сплит-блок)
  9. Цены
  10. Контакты/форма
  11. Футер
  12. Запись (календарь + слоты) — компоненты для фазы 3
  13. Кабинет специалиста (CRM) — компоненты для фазы 4
  14. Блог: карточка статьи, /blog, страница статьи (в конце файла)
*/

/* ===== 1. Токены ===== */
:root{
  --bg:#faf7f4;
  --card:#ffffff;
  --ink:#211f1c;
  --muted:#4a453f;
  --muted2:#8a847d;
  --muted3:#b7b1a9;
  --faint:#c3beb7;
  --border:#ece7e2;
  --border2:#d8d3cc;
  --tint:#f4e9df;
  --neutral:#f4f3f1;
  --accent:#c1926b;
  --accent-ink:#ffffff;
  --dark:#1c1a18;
  /* фон тёмной карточки «С какими проблемами я работаю» — по просьбе Яны
     тёплый тёмно-коричневый вместо почти чёрного --ink (чёрный «может пугать»).
     Белый текст на нём ≈11.7:1, приглушённый (78%) ≈7.9:1 — выше WCAG AAA. */
  --brown:#4a3326;

  --font-display:'Poppins', sans-serif;
  --font-text:'Rubik', sans-serif;

  --container-max:1160px;
  /* мокап держит на мобильном фиксированные 22px по бокам (.m-section) —
     на типичных ширинах экрана 4vw давало только ~15px, отсюда ощущение
     "мокап смотрится просторнее". */
  --gutter:clamp(22px, 4vw, 40px);
  --nav-breakpoint:960px;
  /* высота шапки вместе с 1px нижней границы — от неё считается высота
     первого экрана (hero), поэтому шапка задана фиксированной высотой, а не
     паддингами по содержимому */
  --header-h:61px;
}
@media (min-width:960px){:root{--header-h:85px;}}

/* ===== 2. Reset и база ===== */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px);}
/* файл подключается только в layout-ds, поэтому трогать body глобально безопасно;
   без этого браузерные 8px давали серые поля по краям и сдвигали первый экран */
body{margin:0;background:var(--bg);}
.ds *{box-sizing:border-box;}
.ds{background:var(--bg);color:var(--ink);font:16px/1.5 var(--font-text);}
.ds a{text-decoration:none;color:inherit;}
.ds button{font-family:inherit;cursor:pointer;}
.ds img{max-width:100%;display:block;}
.ds h1,.ds h2,.ds h3,.ds h4{text-wrap:balance;font-family:var(--font-display);font-weight:600;margin:0;}
.ds .container{max-width:var(--container-max);margin:0 auto;padding-inline:var(--gutter);}
.ds [hidden]{display:none!important;}

/* ===== 3. Кнопки, значки, рубрикаторы ===== */
.ds .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:100px;font-weight:600;font-size:15px;border:none;white-space:nowrap;font-family:var(--font-text);}
.ds .btn-fill{background:var(--accent);color:#fff;}
.ds .btn-line{border:1.5px solid var(--ink);color:var(--ink);background:transparent;}
.ds .btn-dark{background:var(--ink);color:#fff;}
/* без этого в узкой кнопке (flex:1 на мобильном) иконка сжимается в точку */
.ds .btn svg{flex-shrink:0;}

.ds .badge-row{display:flex;flex-wrap:wrap;gap:10px;}
.ds .badge{display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:100px;padding:9px 14px;font-size:13px;color:var(--ink);}
.ds .badge svg{flex-shrink:0;}

.ds .kicker{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.ds .kicker.center{justify-content:center;}
.ds .kicker-line{width:28px;height:2px;background:var(--accent);display:block;}
.ds .kicker-text{font-size:12px;font-weight:600;letter-spacing:0.12em;color:var(--accent);text-transform:uppercase;}

.ds .section{padding-top:clamp(48px,8vw,100px);}
.ds .section-title{margin:0 0 18px;font-size:clamp(26px,3vw,36px);}
.ds .section-title.center{text-align:center;}
.ds .lead{margin:0 0 16px;font-size:15.5px;line-height:1.65;color:var(--muted);}

.ds .price-badge{display:inline-block;background:var(--tint);color:var(--accent);font-size:11.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;margin-bottom:16px;}
.ds .price-badge.alt{background:var(--neutral);color:var(--ink);}

/* ===== 4. Шапка/навигация =====
   По мокапу мобильная шапка — это НЕ уменьшенная десктопная: там только номер
   телефона слева и бургер справа (60px, компактно), без имени и без кнопки
   «Записаться» — они возвращаются в игру только с 960px. */
.ds .site-header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--border);}
.ds .site-header-inner{max-width:var(--container-max);margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
.ds .brand{display:none;flex-direction:column;line-height:1.1;}
.ds .brand b{font-family:var(--font-display);font-weight:600;font-size:18px;}
.ds .brand span{font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted2);margin-top:5px;}
.ds .nav-phone-mobile{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;font-size:14px;}

.ds .nav-links{display:none;align-items:center;gap:clamp(12px,2vw,36px);flex-wrap:wrap;}
.ds .nav-links a{color:var(--ink);font-size:14.5px;font-weight:500;}
.ds .nav-actions{display:flex;align-items:center;gap:16px;}
.ds .nav-phone{display:none;color:var(--ink);font-size:14.5px;font-weight:600;}
.ds .nav-actions .btn-fill{display:none;}
.ds .nav-burger{width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink);flex-shrink:0;}

@media (min-width:960px){
  .ds .site-header-inner{padding:0 var(--gutter);height:84px;}
  .ds .brand{display:flex;}
  .ds .nav-phone-mobile{display:none;}
  .ds .nav-links{display:flex;}
  .ds .nav-phone{display:block;}
  .ds .nav-actions .btn-fill{display:inline-flex;}
  .ds .nav-burger{display:none;}
}

/* мобильное drawer-меню (вкл. классом .open на .nav-drawer через JS) */
.ds .nav-drawer{position:fixed;inset:0;z-index:200;display:none;}
.ds .nav-drawer.open{display:block;}
.ds .nav-drawer-backdrop{position:absolute;inset:0;background:rgba(20,18,16,0.45);}
.ds .nav-drawer-panel{position:absolute;top:0;right:0;bottom:0;width:min(320px,86%);background:var(--card);padding:20px var(--gutter);display:flex;flex-direction:column;box-shadow:-24px 0 60px -32px rgba(20,18,16,0.4);}
.ds .nav-drawer-close{align-self:flex-end;width:40px;height:40px;border-radius:12px;border:1px solid var(--border);background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--ink);margin-bottom:18px;}
.ds .nav-drawer-panel a{padding:14px 4px;font-size:16px;font-weight:500;color:var(--ink);border-bottom:1px solid var(--border);}
.ds .nav-drawer-panel .btn{margin-top:20px;}
@media (min-width:960px){.ds .nav-drawer{display:none!important;}}

/* ===== 5. Hero =====
   По мокапу мобильная и десктопная версии различаются не только шириной:
   на мобильном только заголовок (эйбрау+h1) лежит поверх фото, а кнопки/бейджи —
   отдельным блоком НИЖЕ фото на обычном фоне; на десктопе весь текст (заголовок +
   кнопки + бейджи) стоит одной колонкой слева от фото. Чтобы не дублировать
   разметку под каждый брейкпоинт, используем CSS Grid с именованными областями:
   .hero-heading и .hero-media на мобильном делят одну ячейку (буквально накладываются
   друг на друга), а на десктопе .hero-heading уходит в свою строку над .hero-actions,
   пока .hero-media остаётся отдельной колонкой, растянутой на обе строки. */
/* Первый экран на любом устройстве заканчивается ровно по низу окна:
   на мобильном — шапка + фото + ряд кнопок = высота экрана (бейджи уже ниже
   сгиба), на десктопе — шапка + весь hero = высота экрана. Высота фото
   считается от окна, а не задаётся в пикселях. svh — «малая» высота окна
   (с видимыми панелями мобильного браузера), чтобы кнопки не прятались под
   нижней панелью; строка с vh перед ней — запасной вариант для старых браузеров.
   --hero-cta-block: паддинг над кнопками 18 + кнопка 52 + отступ под ней 18. */
.ds .hero{--hero-cta-block:88px;display:grid;grid-template-columns:1fr;grid-template-areas:"media" "actions";}
.ds .hero-media{grid-area:media;position:relative;width:100%;height:calc(100vh - var(--header-h) - var(--hero-cta-block));height:calc(100svh - var(--header-h) - var(--hero-cta-block));min-height:320px;overflow:hidden;background:linear-gradient(160deg,#e8ddce,#cbb69c);}
/* 30%: лицо на снимке левее центра — при 50% плечо и рука упирались в левый
   край рамки; так в кадре видна рука и есть немного воздуха слева */
.ds .hero-media img{width:100%;height:100%;object-fit:cover;object-position:30% 18%;}
.ds .hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(33,31,28,0) 38%, rgba(20,18,16,0.88) 100%);}
.ds .hero-heading{grid-area:media;position:relative;z-index:2;align-self:end;display:flex;flex-direction:column;gap:14px;padding:0 var(--gutter) 24px;color:#fff;}
.ds .hero-heading h1{color:#fff;font-size:clamp(32px,7vw,40px);line-height:1.15;}
.ds .hero-eyebrow{align-self:flex-start;background:var(--accent);color:#fff;font-size:12px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;padding:6px 14px;border-radius:100px;}
.ds .hero-actions{grid-area:actions;padding:18px var(--gutter) 0;}
.ds .hero-cta{display:flex;gap:12px;margin-bottom:18px;}
.ds .hero-cta .btn{flex:1;min-width:0;}
.ds .hero-cta .btn-line{border-color:var(--ink);color:var(--ink);}

/* Подсказка «листайте вниз»: на мобильном — кружок со стрелкой в правом нижнем
   углу фото (на одной линии с именем), на десктопе — «мышка» по центру под hero.
   Оба варианта внутри одной ссылки на #about, переключаются через display. */
.ds .scroll-hint{grid-area:media;align-self:end;justify-self:end;position:relative;z-index:2;margin:0 var(--gutter) 24px 0;display:flex;align-items:center;justify-content:center;}
.ds .scroll-hint-chevron{width:42px;height:42px;border-radius:100px;border:1.5px solid rgba(255,255,255,0.7);display:flex;align-items:center;justify-content:center;color:#fff;animation:ds-hint-bounce 1.8s ease-in-out infinite;}
.ds .scroll-hint-mouse{display:none;width:26px;height:40px;border:2px solid var(--muted2);border-radius:14px;position:relative;}
.ds .scroll-hint-mouse::before{content:'';position:absolute;left:50%;top:7px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:var(--accent);animation:ds-hint-wheel 1.8s ease-in-out infinite;}
@keyframes ds-hint-bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
@keyframes ds-hint-wheel{0%{opacity:0;transform:translateY(0);}30%{opacity:1;}100%{opacity:0;transform:translateY(12px);}}
@media (prefers-reduced-motion:reduce){
  .ds .scroll-hint-chevron,.ds .scroll-hint-mouse::before{animation:none;}
}

@media (min-width:960px){
  /* Весь hero = окно минус шапка. Две строки 1fr/1fr: заголовок прижат к низу
     верхней половины, кнопки — к верху нижней, т.е. текст стоит по центру
     высоты рядом с фото, которое тянется на обе строки. Нижний паддинг —
     место под «мышку». min-height — чтобы на очень низких окнах текст не
     слипался с фото. */
  .ds .hero{position:relative;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;grid-template-areas:"heading media" "actions media";column-gap:clamp(24px,4vw,64px);row-gap:28px;max-width:var(--container-max);margin:0 auto;height:calc(100vh - var(--header-h));height:calc(100svh - var(--header-h));min-height:560px;padding:clamp(24px,4vh,48px) var(--gutter) 88px;}
  .ds .hero-media{height:auto;min-height:0;align-self:stretch;border-radius:28px;}
  .ds .hero-overlay{display:none;}
  .ds .hero-heading{grid-area:heading;align-self:end;padding:0;gap:22px;color:var(--ink);}
  .ds .hero-heading h1{color:var(--ink);font-size:clamp(34px,5vw,56px);}
  .ds .hero-eyebrow{background:var(--tint);color:var(--accent);font-size:12.5px;padding:8px 16px;}
  .ds .hero-actions{align-self:start;padding:0;}
  .ds .hero-cta{margin-bottom:20px;}
  .ds .hero-cta .btn{flex:0 1 200px;min-width:150px;height:56px;}
  /* grid-area:auto — чтобы абсолютное позиционирование считалось от всего
     .hero, а не от ячейки media, в которую подсказка поставлена на мобильном */
  .ds .scroll-hint{grid-area:auto;position:absolute;left:50%;bottom:28px;margin:0;transform:translateX(-50%);}
  .ds .scroll-hint-chevron{display:none;}
  .ds .scroll-hint-mouse{display:block;}
}

/* ===== 6. Секция «О себе» =====
   По мокапу на мобильном фото стоит НЕ перед текстом, а посередине повествования
   (после реквизита-credential, перед цитатой) — это другой порядок блоков, а не
   просто узкая колонка. На десктопе то же фото — отдельная колонка слева на всю
   высоту. Один DOM-порядок под оба случая: .about-grid — CSS Grid, на мобильном
   обычный поток (порядок в разметке = порядку на экране), на десктопе у
   .about-media выставляется grid-column/row так, что оно занимает всю левую
   колонку, а остальные блоки авто-размещаются во вторую колонку по порядку. */
.ds .about-grid{display:grid;grid-template-columns:1fr;gap:20px;}
.ds .about-media{border-radius:22px;overflow:hidden;height:clamp(220px,60vw,320px);}
.ds .about-media img{width:100%;height:100%;object-fit:cover;}
@media (min-width:960px){
  .ds .about-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);column-gap:clamp(24px,4vw,64px);row-gap:0;align-items:start;}
  /* span 999, а не 1/-1: с неявными (auto-generated) строками "-1" не гарантированно
     достаёт до последней реальной строки, а span с запасом браузер просто обрежет
     по факту имеющихся строк — так колонка с фото надёжно тянется на всю высоту
     текстовой колонки независимо от того, сколько блоков текста в ней. */
  .ds .about-media{grid-column:1;grid-row:1 / span 999;height:100%;align-self:stretch;}
  .ds .credential{padding:14px 18px;font-size:14px;}
  .ds .quote{padding:26px 24px;}
  .ds .quote p{font-size:20px;}
}
.ds .credential{display:inline-block;margin:0 0 20px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--border);font-size:13.5px;line-height:1.5;color:var(--muted);}
.ds .quote{margin:0 0 20px;padding:22px 20px;border-radius:18px;background:var(--tint);}
.ds .quote p{margin:0;font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.4;}
.ds .check-list{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;}
.ds .check-item{display:flex;gap:10px;align-items:flex-start;}
.ds .check-dot{flex-shrink:0;width:22px;height:22px;border-radius:100px;background:var(--accent);display:flex;align-items:center;justify-content:center;margin-top:2px;}
.ds .check-item p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted);}
/* По мокапу это два разных компонента, не один и тот же в узкой колонке: на
   мобильном — чек-лист с более длинными формулировками, на десктопе — компактные
   плашки-теги с короткими. Держим оба в разметке и переключаем через display,
   а не подгоняем один под оба случая. */
.ds .chip-row{display:none;flex-wrap:wrap;gap:10px;margin:0 0 16px;}
.ds .chip{background:var(--card);border:1px solid var(--border);border-radius:100px;padding:9px 16px;font-size:13.5px;color:var(--muted);}
@media (min-width:960px){
  .ds .check-list{display:none;}
  .ds .chip-row{display:flex;}
}

/* ===== 7. Карточки ===== */
.ds .card-row{display:flex;flex-wrap:wrap;gap:24px;}
.ds .card{flex:1 1 320px;min-width:0;border-radius:22px;background:var(--card);border:1px solid var(--border);padding:clamp(20px,4vw,32px);}
.ds .card h3{margin:0 0 16px;font-size:clamp(18px,1.6vw,21px);}
.ds .card-dark{flex:1 1 320px;min-width:0;border-radius:22px;background:var(--brown);padding:clamp(20px,4vw,32px);}
.ds .card-dark h3{margin:0 0 16px;font-size:clamp(18px,1.6vw,21px);color:#fff;}
.ds .line-list{display:flex;flex-direction:column;gap:12px;}
.ds .line-item{margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);padding-left:16px;border-left:2px solid var(--accent);}
.ds .line-item-dark{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,0.78);padding-left:0;border-left:none;}
.ds .line-item-dark b{color:#fff;}

/* ===== 8. Видео + статьи ===== */
.ds .split-row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);}
.ds .split-col{flex:1 1 420px;min-width:0;}
@media (min-width:961px){.ds .split-row.center-v{align-items:center;}}
.ds .video-frame{display:block;position:relative;border-radius:20px;overflow:hidden;height:clamp(220px,40vw,280px);background:#d8c9b4;cursor:pointer;}
.ds .video-frame img{width:100%;height:100%;object-fit:cover;}
.ds .video-frame-overlay{position:absolute;inset:0;background:rgba(20,18,16,0.28);}
.ds .play-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;}
.ds .media-title{margin:16px 0 4px;font-family:var(--font-display);font-weight:600;font-size:17px;}
.ds .media-byline{margin:0 0 16px;font-size:13.5px;color:var(--muted2);}
.ds .pill-btn{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:14px;border:none;font-family:var(--font-text);}

.ds .read-link{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:14px;}

/* ===== 9. Цены ===== */
.ds .pricing-row{display:flex;flex-wrap:wrap;gap:26px;}
.ds .price-card{flex:1 1 340px;min-width:0;border-radius:22px;border:1.5px solid var(--accent);padding:clamp(20px,4vw,32px);}
.ds .price-card.alt{border:1px solid var(--border);}
.ds .price-amount{display:flex;align-items:baseline;gap:8px;margin-bottom:18px;}
.ds .price-amount b{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,3vw,40px);}
.ds .price-amount span{font-size:13.5px;color:var(--muted2);}
.ds .price-rows{display:flex;flex-direction:column;gap:12px;margin-bottom:22px;}
.ds .price-row{display:flex;justify-content:space-between;font-size:13.5px;gap:12px;}
.ds .price-row span:first-child{color:var(--muted2);flex-shrink:0;}
.ds .price-row span:last-child{font-weight:500;text-align:right;}
.ds .book-btn{display:flex;align-items:center;justify-content:center;height:52px;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;border:none;font-family:var(--font-text);width:100%;}
.ds .book-btn.line{background:transparent;border:1.5px solid var(--ink);color:var(--ink);}

/* мини-превью «Ближайшие свободные окна» под ценами — упрощённая версия календаря,
   ссылается на форму записи; полноценный интерактивный календарь — фаза 3 (.booking-*) */
.ds .book-preview{flex:1 1 380px;min-width:0;border-radius:24px;background:var(--card);border:1px solid var(--border);padding:28px;}
.ds .day-chip-row{display:flex;gap:8px;margin-bottom:16px;}
.ds .day-chip{flex:1;text-align:center;padding:10px 4px;border-radius:12px;font-size:12.5px;font-weight:600;line-height:1.3;}
.ds .day-chip.active{background:var(--accent);color:#fff;}
.ds .day-chip:not(.active){background:var(--bg);border:1px solid var(--border);color:var(--ink);}
/* align-content/items: при min-height (выравнивание высоты по самому длинному дню
   в превью) ряды не растягиваются, а прижимаются к верху */
.ds .mini-slot-row{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;align-items:flex-start;}
.ds .mini-slot{padding:9px 14px;border-radius:100px;font-size:13px;font-weight:600;}
.ds .mini-slot.free{background:var(--card);border:1.5px solid var(--border);color:var(--ink);}
.ds button.day-chip{font-family:var(--font-text);cursor:pointer;}
.ds a.mini-slot.free:hover{border-color:var(--accent);}
.ds .mini-slot.busy{background:var(--bg);border:1.5px dashed var(--border2);color:var(--muted3);}
/* заглушки на время загрузки (размеры как у настоящих чипов, без прыжков) */
.ds .day-chip.skeleton{min-height:51px;background:var(--neutral);border:1px solid var(--border);}
.ds .mini-slot.skeleton{width:72px;height:37px;background:var(--neutral);border:1.5px solid var(--border);animation:ds-pulse 1.4s ease-in-out infinite;}
.ds .day-chip.skeleton{animation:ds-pulse 1.4s ease-in-out infinite;}
@keyframes ds-pulse{0%,100%{opacity:1}50%{opacity:.55}}
@media (prefers-reduced-motion:reduce){.ds .skeleton{animation:none;}}
.ds .book-preview-note{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}

/* ===== 10. Контакты/форма ===== */
.ds .contact-row{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,48px);}
.ds .contact-form{flex:1 1 420px;min-width:0;border-radius:22px;background:var(--card);border:1px solid var(--border);padding:28px;}
.ds .contact-form input,.ds .contact-form textarea,
.ds .form-field input,.ds .form-field textarea{width:100%;border-radius:12px;border:1px solid var(--border);background:var(--bg);padding:0 14px;font-size:14px;font-family:var(--font-text);color:var(--ink);}
.ds .contact-form input,.ds .form-field input{height:50px;}
.ds .contact-form textarea,.ds .form-field textarea{height:110px;padding:12px 14px;resize:none;}
.ds .contact-form label,.ds .form-field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted2);margin-bottom:6px;}
.ds .form-row{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:16px;}
.ds .form-row > div{flex:1 1 180px;min-width:0;}
.ds .contact-side{flex:1 1 320px;min-width:0;}
.ds .contact-title{margin:0 0 6px;font-size:20px;}
.ds .contact-rule{display:block;width:36px;height:3px;background:var(--accent);border-radius:2px;margin-bottom:20px;}
.ds .contact-list{display:flex;flex-direction:column;gap:14px;margin-bottom:16px;}
.ds .contact-link{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:14.5px;}
.ds .contact-link.start{align-items:flex-start;}
.ds .icon-circle{flex-shrink:0;width:38px;height:38px;border-radius:100px;background:var(--tint);display:flex;align-items:center;justify-content:center;}

/* ===== 11. Футер ===== */
.ds .site-footer{margin-top:clamp(48px,8vw,100px);background:var(--dark);padding:32px var(--gutter);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;}
.ds .site-footer p{margin:0;font-size:13px;line-height:1.6;color:rgba(255,255,255,0.5);}
.ds .footer-socials{display:flex;gap:14px;}
.ds .social-icon{width:44px;height:44px;border-radius:100px;background:rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;}
.ds .social-icon.wide{width:auto;padding:0 16px;font-size:12px;font-weight:600;}
.ds .footer-cabinet-link{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:rgba(255,255,255,0.4);}

/* ===== 12. Запись (фаза 3) ===== */
/* «← На главную» внизу страницы записи, под календарём и формой */
.ds .booking-back{display:flex;justify-content:center;margin-top:clamp(28px,4vw,40px);}
.ds .back-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px 8px 10px;border-radius:100px;border:1px solid var(--border);background:var(--card);font-size:13.5px;font-weight:600;color:var(--ink);}
.ds .back-link:hover{border-color:var(--accent);color:var(--accent);}
.ds .back-link svg{flex-shrink:0;}
.ds .booking-wrap{max-width:var(--container-max);margin:0 auto;padding:clamp(32px,6vw,56px) var(--gutter) clamp(48px,8vw,80px);}
.ds .booking-main{display:flex;flex-wrap:wrap;gap:32px;align-items:stretch;}
.ds .booking-calendar{flex:2 1 480px;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:24px;padding:clamp(20px,3vw,32px);}
.ds .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;}
.ds .cal-head b{font-family:var(--font-display);font-weight:600;font-size:18px;}
.ds .cal-nav-btn{width:36px;height:36px;border-radius:100px;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--muted3);background:none;}
.ds .cal-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(4px,1.5vw,10px);margin-bottom:26px;}
.ds .cal-day{border-radius:14px;padding:8px 2px;text-align:center;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;overflow:hidden;}
.ds .cal-day .wd{font-size:11px;text-transform:uppercase;letter-spacing:0.04em;}
.ds .cal-day .num{font-family:var(--font-display);font-weight:600;font-size:clamp(14px,4vw,18px);line-height:1;}
.ds .cal-day .info{font-size:10px;font-weight:700;line-height:1;}
.ds .cal-day.today{background:var(--accent);color:#fff;}
.ds .cal-day.avail{background:var(--card);border:1.5px solid var(--border);color:var(--ink);}
.ds .cal-day.avail .wd{color:var(--muted2);}
.ds .cal-day.avail .info{color:var(--accent);}
.ds .cal-day.off{background:var(--neutral);color:var(--faint);}
.ds .slots-label{margin:0 0 14px;font-size:13.5px;font-weight:600;}
.ds .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px;margin-bottom:22px;}
.ds .slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:64px;border-radius:14px;font-weight:600;font-size:15px;background:none;font-family:var(--font-text);}
.ds .slot .cap{font-size:10px;font-weight:500;}
.ds .slot[data-status="available"]{cursor:pointer;background:var(--card);color:var(--ink);border:1.5px solid var(--border);}
.ds .slot[data-status="booked"]{cursor:default;background:var(--bg);color:var(--muted3);border:1.5px dashed var(--border2);}
.ds .slot[data-status="past"]{cursor:default;background:var(--neutral);color:var(--faint);border:1.5px solid var(--neutral);}
.ds .slot[data-status="selected"]{cursor:pointer;background:var(--accent);color:#fff;border:1.5px solid var(--accent);}
.ds .cal-legend{display:flex;flex-wrap:wrap;gap:20px;padding-top:18px;border-top:1px solid var(--border);}
.ds .cal-legend-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted2);}
.ds .cal-legend-dot{width:14px;height:14px;border-radius:5px;display:block;}
.ds .booking-panel{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;}
.ds .booking-panel-card{background:var(--card);border:1px solid var(--border);border-radius:24px;padding:28px;flex:1;display:flex;flex-direction:column;}
.ds .booking-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:10px;}
.ds .booking-panel-head b{font-family:var(--font-display);font-weight:600;font-size:18px;}
.ds .booking-clear{font-size:12.5px;color:var(--muted2);background:none;border:none;font-family:var(--font-text);}
.ds .booking-selected{margin:0 0 22px;font-size:15px;font-weight:600;color:var(--accent);}
.ds .format-row{display:flex;gap:10px;margin-bottom:20px;}
.ds .format-pill{flex:1;height:44px;border-radius:100px;font-weight:600;font-size:13.5px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);background:var(--card);color:var(--ink);}
.ds .format-pill.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.ds .booking-panel-card label{display:block;font-size:12.5px;font-weight:600;color:var(--muted2);margin-bottom:6px;}
.ds .booking-panel-card input,.ds .booking-panel-card textarea{width:100%;border-radius:12px;border:1px solid var(--border);background:var(--bg);padding:0 14px;font-size:14px;font-family:var(--font-text);color:var(--ink);margin-bottom:14px;}
.ds .booking-panel-card input{height:48px;}
.ds .booking-panel-card textarea{height:70px;padding:12px 14px;resize:none;}
.ds .booking-submit{width:100%;height:52px;border:none;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;font-family:var(--font-text);margin-bottom:10px;}
.ds .booking-hint{margin:0;font-size:11.5px;line-height:1.4;color:var(--muted3);}
.ds .booking-placeholder{background:var(--card);border:1.5px dashed var(--border);border-radius:24px;padding:40px 28px;text-align:center;}
.ds .booking-placeholder-icon{width:52px;height:52px;border-radius:100px;background:var(--tint);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.ds .booking-placeholder p{margin:0;font-size:14.5px;line-height:1.5;color:var(--muted2);}
.ds .booking-title{margin:0 0 12px;font-size:clamp(26px,4vw,38px);}
.ds .booking-sub{margin:0 0 32px;font-size:15px;line-height:1.5;color:var(--muted2);max-width:560px;}
.ds .cal-hint{margin:-12px 0 24px;font-size:11.5px;line-height:1.4;color:var(--muted2);}
.ds .cal-hint.warn{color:#9b3b32;font-weight:600;font-size:12.5px;}
/* дни и слоты — кнопки: сбрасываем браузерные стили */
.ds button.cal-day{border:none;font-family:var(--font-text);width:100%;}
.ds .cal-day.avail{cursor:pointer;}
.ds .cal-day.avail:hover,.ds .slot[data-status="available"]:hover{border-color:var(--accent);}
.ds .cal-day.selected{background:var(--accent);border:1.5px solid var(--accent);color:#fff;}
.ds .cal-day.selected .wd,.ds .cal-day.selected .info{color:#fff;}
.ds .cal-day.off{cursor:default;}
.ds .cal-nav-btn:not(:disabled){color:var(--ink);cursor:pointer;}
.ds .cal-nav-btn:disabled{cursor:default;opacity:0.5;}
.ds .cal-day:focus-visible,.ds .slot:focus-visible,.ds .format-pill:focus-visible,.ds .cal-nav-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.ds .format-pill{cursor:pointer;font-family:var(--font-text);}
.ds .booking-submit{cursor:pointer;}
.ds .booking-submit:disabled{opacity:0.6;cursor:default;}
.ds .booking-error{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#fbeae5;color:#8a3a22;font-size:13.5px;line-height:1.45;}
.ds .booking-panel-card.centered{justify-content:center;text-align:center;}
.ds .booking-success h3{margin:0 0 10px;font-size:21px;}
.ds .booking-success p{margin:0 0 8px;font-size:14.5px;line-height:1.55;color:var(--muted);}
.ds .booking-success .booking-selected{margin:0 0 14px;}
.ds .booking-loading{padding:40px 0;text-align:center;font-size:14px;color:var(--muted2);}

/* ===== 13. Кабинет специалиста / CRM (фаза 4) ===== */
.ds .crm-login-wrap{display:flex;justify-content:center;padding:clamp(40px,8vw,72px) 16px;}
.ds .crm-login-card{width:min(380px,100%);background:var(--card);border:1px solid var(--border);border-radius:24px;padding:32px;text-align:center;}
.ds .crm-login-icon{width:52px;height:52px;border-radius:100px;background:var(--tint);color:var(--accent);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;}
.ds .crm-login-card h2{margin:0 0 6px;font-size:22px;}
.ds .crm-login-card > p{margin:0 0 24px;font-size:13.5px;color:var(--muted2);}
.ds .crm-login-card label{display:block;text-align:left;font-size:12.5px;font-weight:600;color:var(--muted2);margin-bottom:6px;}
.ds .crm-login-card input{width:100%;height:48px;border-radius:12px;border:1px solid var(--border);background:var(--bg);padding:0 14px;font-size:14px;font-family:var(--font-text);color:var(--ink);margin-bottom:14px;}
.ds .crm-login-card button{width:100%;height:52px;border:none;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:15px;margin-top:4px;font-family:var(--font-text);}
.ds .crm-login-hint{margin-top:16px!important;font-size:11.5px!important;line-height:1.4;color:var(--muted3)!important;}

.ds .crm-topbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px var(--gutter);background:var(--card);border-bottom:1px solid var(--border);}
.ds .crm-topbar-user{display:flex;align-items:center;gap:12px;}
.ds .crm-avatar{width:38px;height:38px;border-radius:100px;background:var(--tint);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--font-display);font-size:13px;flex-shrink:0;}
.ds .crm-topbar-user-text{display:flex;flex-direction:column;gap:3px;}
.ds .crm-topbar-user b{font-family:var(--font-display);font-weight:600;font-size:14.5px;color:var(--ink);}
.ds .crm-topbar-user span{font-size:10.5px;font-weight:500;letter-spacing:0.07em;text-transform:uppercase;color:var(--muted2);}
.ds .crm-logout{font-size:13px;color:var(--muted2);background:none;border:1px solid var(--border);border-radius:100px;padding:8px 16px;font-family:var(--font-text);}

.ds .crm-wrap{max-width:var(--container-max);margin:0 auto;padding:clamp(24px,4vw,36px) var(--gutter) 60px;}
.ds .crm-stats{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:28px;}
.ds .crm-stat{flex:1 1 160px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:16px 20px;}
.ds .crm-stat b{display:block;font-family:var(--font-display);font-weight:600;font-size:24px;}
.ds .crm-stat span{font-size:12px;color:var(--muted2);}

.ds .crm-main{display:flex;flex-wrap:wrap;gap:24px;align-items:stretch;}
.ds .crm-list{flex:1 1 300px;min-width:0;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:18px;display:flex;flex-direction:column;}
.ds .crm-list h4{margin:2px 6px 12px;font-size:15px;}
.ds .crm-search{width:100%;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--bg);padding:0 14px;font-size:14px;font-family:var(--font-text);color:var(--ink);margin-bottom:14px;}
.ds .crm-client-row{display:flex;align-items:center;gap:12px;padding:11px;border-radius:14px;border:1px solid transparent;background:none;width:100%;text-align:left;font-family:var(--font-text);}
.ds .crm-client-row:hover{background:var(--bg);}
.ds .crm-client-row.active{background:var(--tint);border-color:var(--accent);}
.ds .crm-client-avatar{flex-shrink:0;width:40px;height:40px;border-radius:100px;background:var(--neutral);color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:600;font-family:var(--font-display);font-size:14px;}
.ds .crm-client-row-info{flex:1;min-width:0;}
.ds .crm-client-row-info b{display:block;font-size:14.5px;color:var(--ink);}
.ds .crm-client-row-info span{font-size:12px;color:var(--muted2);}
.ds .crm-client-tag{flex-shrink:0;font-size:10.5px;font-weight:600;padding:4px 9px;border-radius:100px;background:var(--neutral);color:var(--muted2);white-space:nowrap;}
.ds .crm-client-tag.regular{background:var(--tint);color:var(--accent);}

.ds .crm-card{flex:2 1 480px;min-width:0;display:flex;flex-direction:column;gap:20px;}
.ds .crm-card-head{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:24px;}
.ds .crm-card-head-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:16px;}
.ds .crm-card-head h3{margin:0 0 4px;font-size:22px;}
.ds .crm-card-head-top p{margin:0;font-size:13px;color:var(--muted2);}
.ds .crm-card-meta{display:flex;flex-wrap:wrap;gap:24px;padding-top:16px;border-top:1px solid var(--border);}
.ds .crm-meta-item span{display:block;font-size:11.5px;color:var(--muted2);margin-bottom:2px;}
.ds .crm-meta-item b{font-size:14.5px;}

.ds .crm-upcoming{background:var(--tint);border-radius:16px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.ds .crm-upcoming b{font-size:14px;display:block;}
.ds .crm-upcoming span{font-size:12.5px;color:var(--muted);}
.ds .crm-upcoming.empty{background:var(--neutral);}
.ds .crm-upcoming.empty span{color:var(--muted2);}

.ds .crm-history{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:24px;}
.ds .crm-history h4{margin:0 0 16px;font-size:16px;}
.ds .crm-session{display:flex;gap:14px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border);}
.ds .crm-session:last-of-type{border-bottom:none;margin-bottom:0;padding-bottom:0;}
.ds .crm-session-dot{flex-shrink:0;width:10px;height:10px;border-radius:100px;background:var(--accent);margin-top:6px;}
.ds .crm-session-dot.cancelled{background:var(--border2);}
.ds .crm-session-body{flex:1;min-width:0;}
.ds .crm-session-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px;}
.ds .crm-session-when{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ds .crm-session-when b{font-size:14px;}
.ds .crm-session-format{font-size:11.5px;color:var(--muted2);}
.ds .crm-session-note{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);}
.ds .crm-session-note.empty{color:var(--muted3);font-style:italic;}
.ds .crm-status{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:100px;white-space:nowrap;}
.ds .crm-status.done{background:var(--tint);color:var(--accent);}
.ds .crm-status.cancelled{background:var(--neutral);color:var(--muted3);}

.ds .crm-add-note{margin-top:18px;padding-top:18px;border-top:1px dashed var(--border);}
.ds .crm-add-note label{display:block;font-size:12.5px;font-weight:600;color:var(--muted2);margin-bottom:8px;}
.ds .crm-add-note textarea{width:100%;height:64px;border-radius:12px;border:1px solid var(--border);background:var(--bg);padding:12px 14px;font-size:14px;font-family:var(--font-text);color:var(--ink);resize:none;margin-bottom:10px;}
.ds .crm-add-note button{height:40px;padding:0 18px;border:none;border-radius:100px;background:var(--ink);color:#fff;font-weight:600;font-size:13px;font-family:var(--font-text);}

/* ===== Видео-модалка (замена magnific-popup) ===== */
.ds .video-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;}
.ds .video-modal.open{display:flex;}
.ds .video-modal-backdrop{position:absolute;inset:0;background:rgba(20,18,16,0.72);}
.ds .video-modal-body{position:relative;width:min(880px,100%);aspect-ratio:16/9;background:#000;border-radius:16px;overflow:hidden;}
.ds .video-modal-body iframe{width:100%;height:100%;border:0;}
/* кнопка закрытия — фиксирована к вьюпорту, а не к контенту, чтобы не уезжать
   за экран у высокой прокручиваемой модалки статьи */
.ds .video-modal-close{position:fixed;top:20px;right:20px;width:40px;height:40px;border-radius:100px;background:rgba(20,18,16,0.65);border:none;color:#fff;display:flex;align-items:center;justify-content:center;z-index:310;font-size:20px;line-height:1;}


/* ===== Планшет/мобильный: точка перелома для рядных секций =====
   Ниже 960px эти ряды (about/карточки/видео+статьи/контакты/запись/CRM) не
   имели точки перелома в колонку — flex-wrap с min-width:0 просто сжимал
   колонки вместе на любой ширине, а align-items:stretch тянуло картинки по
   высоте текста в узкой колонке (переносы на много строк → раздутая высота).
   Правило намеренно вынесено В КОНЕЦ файла: при равной специфичности CSS
   отдаёт приоритет более позднему правилу независимо от @media, так что
   помещённое раньше (рядом с остальными правилами про #6-13) — не сработало бы,
   его бы перебивали базовые .about-media{flex:1 1 320px} и подобные. */
@media (max-width:960px){
  .ds .card-row,.ds .split-row,.ds .contact-row,
  .ds .booking-main,.ds .crm-main{flex-direction:column;}
  /* flex-basis, заданный для рядной раскладки (420px/320px и т.п.), в колоночном
     режиме считается по высоте, а не по ширине — сбрасываем на auto, иначе
     картинки/карточки/панели раздуваются до этой высоты как до минимума. */
  .ds .card,.ds .card-dark,
  .ds .split-col,
  .ds .contact-form,.ds .contact-side,
  .ds .booking-calendar,.ds .booking-panel,
  .ds .crm-list,.ds .crm-card{flex:1 1 auto;}
}

/* ===== Запись, телефон: дни — нормальные плашки в ряд с горизонтальной
   прокруткой (а не 7 узких колонок по ~40px). Стоит в конце файла, чтобы
   перекрыть базовые правила .cal-days/.cal-day выше. Выбранный день
   прокручивается в центр в booking.js. ===== */
@media (max-width:560px){
  /* карточки — ровно по ширине экрана, иначе ряд дней растягивает их (и страницу) вбок */
  .ds .booking-calendar,.ds .booking-panel{align-self:stretch;width:100%;}
  .ds .cal-days{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;position:relative;padding:2px 2px 8px;margin:0 -2px 18px;scrollbar-width:thin;}
  .ds .cal-days .cal-day{flex:0 0 64px;height:78px;scroll-snap-align:start;}
  .ds button.cal-day{width:64px;}
  .ds .cal-day .wd{font-size:12px;}
  .ds .cal-day .num{font-size:21px;}
  .ds .cal-day .info{font-size:11px;}
}

/* Первый экран, телефон/планшет: фото кадрируется узкой полосой, а лицо на
   снимке левее центра — при 50% оно упиралось в левый край. 32% ставит лицо
   ближе к середине. На десктопе — 30% (правило выше). */
@media (max-width:959px){
  .ds .hero-media img{object-position:32% 18%;}
}

/* ===== 14. Блог: карточка на главной, /blog, страница статьи =====
   Перенесено из утверждённого мокапа «Блог психолога»
   (claude.ai/artifact/DaZJFAYPHYiec1PGvxzC9a). В мокапе раскладка
   переключалась по @container, здесь — обычные @media с тем же брейкпоинтом
   960px, что и во всём файле. Классы блоков статьи — внутри .art-body, чтобы
   не задеть одноимённые (.num есть в календаре записи, .quote — в «О себе»). */
.ds{--text:#38332e;--accent-text:#93643f;--ok:#2f6b3a;--ok-bg:#e6f0e6;}

/* шапка: активный пункт и полоска чтения */
.ds .nav-links a.on{color:var(--accent-text);position:relative;}
.ds .nav-links a.on::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;border-radius:2px;background:var(--accent);}
.ds .read-progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none;}
.ds .read-progress i{display:block;height:100%;width:0;background:var(--accent);border-radius:0 3px 3px 0;}

.ds .btn-light{background:#fff;color:var(--ink);}
.ds .crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;color:var(--muted2);margin-bottom:18px;}
.ds .crumbs a:hover{color:var(--accent-text);}

/* --- карточка статьи (главная и сетка /blog) --- */
.ds .post-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--border);border-radius:20px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.ds .post-card:hover{border-color:var(--border2);box-shadow:0 10px 30px rgba(74,51,38,.08);}
.ds .post-img{position:relative;height:220px;background:#e9e3db;overflow:hidden;flex-shrink:0;}
.ds .post-img img{width:100%;height:100%;object-fit:cover;object-position:50% 32%;transition:transform .6s ease;}
.ds .post-card:hover .post-img img{transform:scale(1.03);}
.ds .post-tag{position:absolute;left:16px;top:16px;background:rgba(255,255,255,.94);color:var(--ink);font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:100px;}
.ds .post-body{padding:20px 20px 22px;display:flex;flex-direction:column;align-items:flex-start;flex:1;}
.ds .post-meta{font-size:12.5px;color:var(--muted2);margin-bottom:8px;display:flex;gap:8px;flex-wrap:wrap;}
.ds .post-meta span+span::before{content:"·";margin-right:8px;}
.ds .post-card h4{font-size:20px;line-height:1.25;}
.ds .post-sub{margin:6px 0 14px;font-size:15px;color:var(--muted);line-height:1.45;}
/* анонс: весь текст видно, последняя строка растворяется — обрыв «на полуслове» */
.ds .teaser{margin:0 0 18px;font-size:15.5px;line-height:1.65;color:var(--muted);
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 3.3em),transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 3.3em),transparent);}
.ds .continue{display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border-radius:100px;background:var(--accent);color:#fff;font-weight:600;font-size:14.5px;margin-top:auto;}
.ds .continue svg{flex-shrink:0;transition:transform .2s;}
.ds .post-card:hover .continue svg,.ds .feature:hover .continue svg{transform:translateX(3px);}
.ds .all-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-weight:600;font-size:14.5px;color:var(--accent-text);}

/* --- /blog --- */
.ds .blog-head{padding-top:28px;padding-bottom:8px;}
.ds .blog-head h1{font-size:34px;line-height:1.15;margin-bottom:14px;}
.ds .page-lead{max-width:600px;margin:0 0 20px;font-size:16.5px;line-height:1.65;color:var(--muted);}
.ds .author-chip{display:inline-flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;border-radius:100px;background:#fff;border:1px solid var(--border);font-size:13.5px;}
.ds .author-chip img{width:36px;height:36px;border-radius:50%;object-fit:cover;object-position:30% 45%;}
.ds .author-chip b{font-weight:600;}
.ds .author-chip span{color:var(--muted2);}
.ds .blog-empty{margin:28px 0 0;font-size:16px;color:var(--muted2);}

.ds .feature{display:grid;grid-template-columns:minmax(0,1fr);margin-top:28px;background:#fff;border:1px solid var(--border);border-radius:24px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
.ds .feature:hover{border-color:var(--border2);box-shadow:0 14px 40px rgba(74,51,38,.08);}
.ds .feature-img{position:relative;height:260px;background:#e9e3db;overflow:hidden;}
.ds .feature-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;}
.ds .feature-body{padding:22px 22px 26px;display:flex;flex-direction:column;align-items:flex-start;}
.ds .feature h2{font-size:26px;line-height:1.2;}
.ds .feature .continue{margin-top:0;}
.ds .post-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:28px;}
@media (min-width:640px){.ds .post-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}

.ds .talk{margin-top:56px;background:var(--brown);color:#fff;border-radius:24px;padding:28px 24px;display:flex;flex-wrap:wrap;gap:18px 32px;align-items:center;justify-content:space-between;}
.ds .talk h3{font-size:24px;margin-bottom:8px;}
.ds .talk p{margin:0;max-width:520px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);}

/* --- статья --- */
.ds .preview-bar{position:sticky;top:var(--header-h);z-index:50;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding:10px var(--gutter);background:#fdf4e3;border-bottom:1px solid #f0dcb0;color:#6b4a12;font-size:13.5px;line-height:1.45;}
.ds .preview-bar a{font-weight:600;text-decoration:underline;}

.ds .art{max-width:var(--container-max);margin:0 auto;padding:24px var(--gutter) 0;display:grid;grid-template-columns:minmax(0,1fr);gap:26px;grid-template-areas:"head" "fig" "body";}
.ds .art-head{grid-area:head;}
.ds .art-fig{grid-area:fig;margin:0;}
.ds .art-body{grid-area:body;max-width:660px;min-width:0;}
.ds .art-head h1{font-size:34px;line-height:1.12;letter-spacing:-.01em;}
.ds .art-sub{margin:12px 0 22px;font-size:19px;line-height:1.45;color:var(--muted);}
.ds .byline{display:flex;align-items:center;gap:12px;padding-bottom:22px;border-bottom:1px solid var(--border);}
.ds .byline img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:30% 45%;}
.ds .byline b{display:block;font-size:14.5px;font-weight:600;}
.ds .byline span{font-size:13px;color:var(--muted2);}

.ds .art-img{border-radius:20px;overflow:hidden;background:#e9e3db;display:flex;justify-content:center;}
.ds .art-img img{width:100%;height:auto;}
.ds .art-fig figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted2);}
.ds .hint{margin-top:14px;background:#fff;border:1px solid var(--border);border-radius:16px;}
.ds .hint summary{list-style:none;cursor:pointer;padding:13px 16px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:10px;}
.ds .hint summary::-webkit-details-marker{display:none;}
.ds .hint summary .q{width:24px;height:24px;border-radius:50%;background:var(--tint);color:var(--accent-text);display:grid;place-items:center;font-size:13px;flex-shrink:0;}
.ds .hint summary .chev{margin-left:auto;transition:transform .2s;color:var(--muted2);flex-shrink:0;}
.ds .hint[open] summary .chev{transform:rotate(180deg);}
.ds .hint-body{padding:0 16px 16px;}
.ds .seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;border-radius:100px;background:var(--neutral);margin-bottom:12px;}
.ds .seg button{border:0;background:transparent;font:500 13px var(--font-text);color:var(--muted);padding:7px 14px;border-radius:100px;}
.ds .seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(0,0,0,.08);}
.ds .hint-body p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted);}

.ds .art-body>p,.ds .art-body .ps p{font-size:17px;line-height:1.72;color:var(--text);margin:0 0 18px;}
.ds .art-body .lead-q{font-size:21px;line-height:1.5;color:var(--ink);margin:24px 0 26px;}
.ds .art-body h2{font-size:24px;line-height:1.25;margin:44px 0 16px;}
.ds .art-body .lead-in{font-weight:500;color:var(--ink);}

.ds .art-body .pull{position:relative;margin:34px 0;padding-top:30px;font-family:var(--font-display);font-size:23px;line-height:1.4;font-weight:500;color:var(--ink);}
.ds .art-body .pull::before{content:"\201C";position:absolute;top:-14px;left:-4px;font:72px/1 Georgia,'Times New Roman',serif;color:var(--accent);}
.ds .art-body .pull p{margin:0;}
.ds .art-body .pull footer{margin-top:12px;font:500 15px var(--font-text);color:var(--muted2);}
.ds .art-body .pull footer::before{content:"— ";}

.ds .art-body .pair{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:6px 0 24px;}
@media (min-width:560px){.ds .art-body .pair{grid-template-columns:repeat(2,minmax(0,1fr));}.ds .art-body .pair.single{grid-template-columns:minmax(0,1fr);}}
.ds .art-body .variant{background:#fff;border:1px solid var(--border);border-radius:18px;padding:20px 20px 18px;}
.ds .art-body .variant small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:8px;}
.ds .art-body .variant b{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.25;}
.ds .art-body .variant p{margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted);}
.ds .art-body .or{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--bg);border:1px solid var(--border2);display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--accent-text);}

.ds .art-body .nums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:6px 0 24px;}
.ds .art-body .nums.single{grid-template-columns:minmax(0,1fr);}
.ds .art-body .nums.three{grid-template-columns:minmax(0,1fr);}
@media (min-width:560px){.ds .art-body .nums.three{grid-template-columns:repeat(3,minmax(0,1fr));}}
.ds .art-body .num{background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px 18px 16px;display:flex;flex-direction:column;min-width:0;}
.ds .art-body .num small{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px;}
.ds .art-body .num b{font-family:var(--font-display);font-weight:600;font-size:34px;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;}
.ds .art-body .num b em{font-style:normal;font-size:18px;margin-left:4px;color:var(--muted);}
.ds .art-body .num p{margin:10px 0 0;font-size:14.5px;line-height:1.45;color:var(--muted);}
.ds .art-body .num .bar{margin-top:auto;padding-top:16px;}
.ds .art-body .num .bar span{display:block;height:6px;border-radius:6px;background:var(--neutral);overflow:hidden;}
.ds .art-body .num .bar i{display:block;height:100%;border-radius:6px;background:var(--accent);}
.ds .art-body .num a{color:var(--accent-text);font-weight:600;white-space:nowrap;}
.ds .art-body .nums-src{margin:-12px 0 24px;font-size:12.5px;line-height:1.5;color:var(--muted2);}

.ds .art-body .callout{display:flex;gap:14px;align-items:flex-start;background:var(--tint);border-radius:18px;padding:18px 20px;margin:8px 0 26px;}
.ds .art-body .callout svg{flex-shrink:0;color:var(--accent-text);margin-top:2px;}
.ds .art-body .callout p{margin:0;font-family:var(--font-display);font-weight:500;font-size:18px;line-height:1.5;color:var(--ink);}

.ds .art-body .pause{display:flex;align-items:center;justify-content:center;gap:14px;margin:40px 0;color:var(--accent);}
.ds .art-body .pause::before,.ds .art-body .pause::after{content:"";height:1px;width:56px;background:var(--border2);}

.ds .art-body .exp{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px;margin:6px 0 26px;display:grid;grid-template-columns:88px minmax(0,1fr);gap:18px;align-items:center;}
.ds .art-body .exp.no-thumb{grid-template-columns:minmax(0,1fr);}
@media (min-width:560px){.ds .art-body .exp{grid-template-columns:120px minmax(0,1fr);padding:24px;}.ds .art-body .exp.no-thumb{grid-template-columns:minmax(0,1fr);}}
@media (max-width:420px){.ds .art-body .exp{grid-template-columns:minmax(0,1fr);}.ds .art-body .exp-thumb{width:110px;}}
.ds .art-body .exp-thumb{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:677/950;background:#e9e3db;transition:box-shadow .4s;}
.ds .art-body .exp-thumb img{width:100%;height:100%;object-fit:cover;transition:filter .6s ease;}
.ds .art-body .exp[data-state="run"] .exp-thumb img{filter:blur(9px) grayscale(.4);}
.ds .art-body .exp[data-state="done"] .exp-thumb{box-shadow:0 0 0 3px var(--accent);}
.ds .art-body .exp-ring{position:absolute;inset:0;display:none;place-items:center;}
.ds .art-body .exp[data-state="run"] .exp-ring{display:grid;}
.ds .art-body .exp-ring svg{width:70%;height:auto;}
.ds .art-body .exp-ring circle{fill:none;stroke-width:4;}
.ds .art-body .exp-ring .track{stroke:rgba(255,255,255,.5);}
.ds .art-body .exp-ring .val{stroke:#fff;stroke-linecap:round;transition:stroke-dashoffset 1s linear;transform:rotate(-90deg);transform-origin:50% 50%;}
.ds .art-body .exp-ring text{fill:#fff;font:600 20px var(--font-text);text-anchor:middle;dominant-baseline:central;}
.ds .art-body .exp small{display:block;font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);margin-bottom:6px;}
.ds .art-body .exp-text{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--text);}
.ds .art-body .exp-status{margin:0 0 14px;font-family:var(--font-display);font-weight:500;font-size:17px;line-height:1.45;color:var(--ink);}
.ds .art-body .exp-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;}
.ds .art-body .exp-row .btn{height:44px;font-size:14px;padding:0 18px;}
.ds .art-body .exp-sound{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted2);cursor:pointer;}
.ds .art-body .exp-sound input{accent-color:var(--accent);width:16px;height:16px;margin:0;}

.ds .art-body .art-inline-img{margin:10px 0 28px;}
.ds .art-body .art-inline-img img{width:100%;height:auto;border-radius:18px;background:#e9e3db;}
.ds .art-body .art-inline-img figcaption{margin-top:10px;font-size:13px;line-height:1.5;color:var(--muted2);}

.ds .art-body .ps{margin:44px 0 0;background:var(--brown);color:#fff;border-radius:24px;padding:28px 24px 26px;}
.ds .art-body .ps-mark{display:flex;align-items:center;gap:12px;margin-bottom:18px;font-size:14px;color:rgba(255,255,255,.55);}
.ds .art-body .ps-mark b{min-width:40px;height:40px;padding:0 12px;border-radius:100px;background:var(--accent);color:#fff;display:grid;place-items:center;font:600 16px var(--font-display);}
.ds .art-body .ps-mark em{font-style:normal;margin-left:auto;font:600 13px var(--font-text);letter-spacing:.12em;color:rgba(255,255,255,.55);}
.ds .art-body .ps p{color:rgba(255,255,255,.88);margin-bottom:14px;}
.ds .art-body .ps p:first-of-type{font-family:var(--font-display);font-size:20px;line-height:1.5;color:#fff;}
.ds .art-body .ps p:last-child{margin-bottom:0;}

.ds .sign{display:flex;align-items:center;gap:16px;margin:28px 0 0;}
.ds .sign img{width:72px;height:72px;border-radius:50%;object-fit:cover;object-position:30% 45%;flex-shrink:0;}
.ds .sign p{margin:0;font-size:15.5px;line-height:1.55;color:var(--muted);}
.ds .sign b{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);margin-top:2px;}

.ds .share{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:32px 0 0;padding-top:22px;border-top:1px solid var(--border);}
.ds .share>span{font-size:13.5px;color:var(--muted2);margin-right:4px;}
.ds .share button,.ds .share a{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:100px;border:1px solid var(--border);background:#fff;font:500 13px var(--font-text);color:var(--ink);}
.ds .share button:hover,.ds .share a:hover{border-color:var(--accent);color:var(--accent-text);}
.ds .next{margin-top:28px;display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px 24px;}
.ds .next h3{font-size:19px;margin-bottom:4px;}
.ds .next p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5;max-width:360px;}
.ds .next-actions{display:flex;flex-wrap:wrap;gap:10px;}
.ds .next-actions .btn{height:46px;font-size:14px;}

.ds .art-body a:focus-visible,.ds .share :focus-visible,.ds .hint summary:focus-visible,.ds .seg button:focus-visible,.ds .post-card:focus-visible,.ds .feature:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* десктоп: обложка слева и «прилипает», текст справа; крупнее заголовки */
@media (min-width:960px){
  .ds .post-img{height:260px;}
  .ds .post-body{padding:24px 26px 26px;}
  .ds .blog-head{padding-top:56px;}
  .ds .blog-head h1{font-size:48px;}
  .ds .feature{grid-template-columns:minmax(0,5fr) minmax(0,6fr);margin-top:40px;}
  .ds .feature-img{height:auto;min-height:440px;}
  .ds .feature-body{padding:44px 48px;justify-content:center;}
  .ds .feature h2{font-size:34px;}
  .ds .feature .teaser{font-size:16.5px;}
  .ds .post-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ds .talk{padding:40px 48px;}

  .ds .art{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:64px;row-gap:0;padding-top:48px;grid-template-areas:"fig head" "fig body";}
  .ds .art.no-cover{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "body";justify-items:center;}
  .ds .art.no-cover .art-head,.ds .art.no-cover .art-body{width:100%;max-width:720px;}
  .ds .art-fig{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;}
  /* вся обложка + подпись помещаются в окно под шапкой */
  .ds .art-img img{width:auto;max-width:100%;max-height:calc(100vh - 220px);max-height:calc(100svh - 220px);}
  /* раскрытая подсказка тоже должна поместиться в окно — картинка уступает ей место */
  .ds .art-fig:has(.hint[open]) .art-img img{max-height:calc(100svh - 440px);min-height:260px;}
  .ds .art-head h1{font-size:48px;}
  .ds .art-sub{font-size:22px;}
  .ds .art-body>p{font-size:18px;}
  .ds .art-body .lead-q{font-size:24px;margin-top:30px;}
  .ds .art-body h2{font-size:28px;margin-top:52px;}
  .ds .art-body .pull{font-size:27px;}
  .ds .art-body .num b{font-size:40px;}
  .ds .art-body .ps{padding:36px 40px 34px;}
}
@media (prefers-reduced-motion:reduce){
  .ds .post-img img,.ds .continue svg,.ds .art-body .exp-thumb img,.ds .art-body .exp-ring .val,.ds .hint summary .chev{transition:none;}
}

/* ===== 14b. Блог: раскрывашка и слова-ссылки на неё ===== */
.ds .art-body .reveal{margin:6px 0 26px;}
.ds .hint-body p+p{margin-top:10px;}
.ds .hint-body p+.seg{margin-top:14px;}
.ds .art-body .reveal-link{color:var(--accent-text);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;}
.ds .art-body .reveal-link:hover{text-decoration-thickness:2px;}
.ds .hint-body p[data-hint-text]{margin-top:0;}

/* ===== 14c. Блог: подпись картинки и игровые блоки (статья 2) =====
   Блоки — реестр lib/blog-blocks.js, вёрстка — views/blog/_blocks.pug,
   JS — public/javascripts/blocks/<type>.js. Без JS каждый блок читается как
   обычный текст. Брейкпоинты и prefers-reduced-motion — в конце файла. */
.ds .art-fig figcaption a,.ds .art-body .art-inline-img figcaption a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px;}
.ds .cap-src{display:block;margin-top:3px;font-size:12px;line-height:1.45;color:var(--muted2);}
@keyframes blkIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes blkBreathe{0%,100%{box-shadow:0 0 0 0 rgba(193,146,107,0);}50%{box-shadow:0 0 0 6px rgba(193,146,107,.18);}}

/* «Обрыв» */
.ds .art-body .cliff{margin:24px 0 30px;}
.ds .art-body .cliff p{margin:0;font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.5;color:var(--ink);}
.ds .art-body .cliff .cliff-b{margin-top:10px;color:var(--accent-text);outline:none;}
.ds .art-body .cliff[data-open="false"] .cliff-b{display:none;}
.ds .art-body .cliff[data-open="true"] .cliff-b{animation:blkIn .7s ease both;}
.ds .art-body .cliff-btn{display:inline-flex;align-items:center;margin-left:4px;vertical-align:.15em;height:32px;padding:0 14px;border-radius:100px;border:1.5px solid var(--accent);background:#fff;color:var(--accent-text);font:600 13px var(--font-text);animation:blkBreathe 2.6s ease-in-out infinite;}
.ds .art-body .cliff-btn:hover{background:var(--tint);}

/* «Печати» */
.ds .art-body .stamps{background:#fff;border:1px solid var(--border);border-radius:22px;padding:20px;margin:6px 0 24px;}
.ds .art-body .stamps+.nums-src{margin-top:-12px;}
.ds .art-body .stamps-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.ds .art-body .letter{position:relative;aspect-ratio:3/4;border-radius:6px;border:1px solid var(--border);background:#fbf8f4 repeating-linear-gradient(to bottom,transparent 0 9px,#ece5dc 9px 10px);background-clip:padding-box;background-origin:content-box;padding:14% 14% 26%;overflow:hidden;}
.ds .art-body .letter em{position:absolute;left:0;right:0;bottom:5px;text-align:center;font-style:normal;font-size:10.5px;color:var(--muted3);font-variant-numeric:tabular-nums;}
.ds .art-body .st{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(1.9);opacity:0;border:2px solid #a4473b;color:#a4473b;background:rgba(251,248,244,.85);font:700 10.5px var(--font-text);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:4px;white-space:nowrap;transition:transform .2s cubic-bezier(.3,1.7,.5,1),opacity .12s;}
.ds .art-body .letter.hit .st{opacity:.92;transform:translate(-50%,-50%) rotate(var(--r,-8deg)) scale(1);}
.ds .art-body .yes{display:flex;align-items:center;gap:14px;margin-top:12px;padding:12px 14px;border-radius:16px;background:var(--tint);}
.ds .art-body .yes.show{animation:blkIn .6s ease both;}
.ds .art-body .yes .letter{width:54px;flex-shrink:0;background-color:#fff;}
.ds .art-body .yes .st{border-color:var(--accent);color:var(--accent-text);font-size:12px;}
.ds .art-body .yes b{display:block;font-family:var(--font-display);font-weight:600;font-size:17px;}
.ds .art-body .yes span{font-size:13.5px;color:var(--muted);}
.ds .art-body .stamps-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px;}
.ds .art-body .stamps-foot .btn,.ds .art-body .draft-foot .btn{height:44px;font-size:14px;padding:0 18px;}
.ds .art-body .stamps-foot .btn:disabled,.ds .art-body .draft-foot .btn:disabled{opacity:.6;cursor:default;}
.ds .art-body .stamps-count{font-size:14px;color:var(--muted2);font-variant-numeric:tabular-nums;}
.ds .art-body .stamps-count b{color:#a4473b;font-weight:600;}

/* «Голоса» */
.ds .art-body .voices{background:var(--neutral);border-radius:22px;padding:20px;margin:6px 0 24px;}
.ds .art-body .voices-group+.voices-group{margin-top:18px;}
.ds .art-body .voices-label{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted2);margin-bottom:10px;}
.ds .art-body .bubbles{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none;}
.ds .art-body .bubble{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:18px 18px 18px 4px;background:#fff;border:1px solid var(--border);font:15px/1.4 var(--font-text);color:var(--ink);text-align:left;transform:rotate(var(--r,0deg));transition:opacity .4s ease,transform .4s ease,background .2s;}
.ds .art-body button.bubble{padding-right:10px;}
.ds .art-body button.bubble:hover{background:#fffaf5;}
.ds .art-body .bubble i{width:22px;height:22px;border-radius:50%;background:var(--neutral);color:var(--muted2);display:grid;place-items:center;font-style:normal;font-size:13px;flex-shrink:0;}
.ds .art-body .bubble.c1{background:#f7ece2;}
.ds .art-body .bubble.c2{background:#fdf4e3;}
.ds .art-body .bubble.c3{background:#eef0ea;}
.ds .art-body .bubble.gone{opacity:0;transform:translate(var(--dx,24px),-22px) rotate(calc(var(--r,0deg) * 5)) scale(.9);pointer-events:none;}
.ds .art-body .voices-hint{margin:14px 0 0;font-size:12.5px;color:var(--muted2);}
.ds .art-body .voices-quiet{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:4px 2px;animation:blkIn .6s ease both;}
.ds .art-body .voices-quiet b{font-family:var(--font-display);font-weight:500;font-size:18px;color:var(--ink);}
.ds .art-body .voices-quiet button{border:0;background:none;padding:0;color:var(--accent-text);font:600 13.5px var(--font-text);text-decoration:underline;}

/* «Черновик»: лист в линейку с полем слева */
.ds .art-body .draft{position:relative;margin:6px 0 24px;border:1px solid #eadfce;border-radius:18px;padding:20px 20px 18px 50px;background:#fffdf8 linear-gradient(90deg,transparent 34px,#ecc3b6 34px,#ecc3b6 35px,transparent 35px);}
.ds .art-body .draft label{display:block;font-family:var(--font-display);font-weight:500;font-size:17px;color:var(--ink);margin-bottom:6px;}
.ds .art-body .draft textarea{display:block;width:100%;min-height:128px;border:0;padding:0;resize:vertical;outline:none;color:var(--ink);font:17px/32px var(--font-text);background:repeating-linear-gradient(to bottom,transparent 0 31px,#e8e1d6 31px 32px);}
.ds .art-body .draft textarea:focus-visible{box-shadow:0 2px 0 var(--accent);}
.ds .art-body .draft-stamp{position:absolute;right:18px;bottom:76px;width:min-content;transform:rotate(-9deg) scale(1.7);opacity:0;pointer-events:none;border:2.5px solid var(--accent);color:var(--accent-text);background:rgba(255,253,248,.8);font:700 14px/1.2 var(--font-text);letter-spacing:.1em;text-transform:uppercase;text-align:center;padding:7px 11px;border-radius:6px;transition:transform .25s cubic-bezier(.3,1.7,.5,1),opacity .15s;}
.ds .art-body .draft.stamped .draft-stamp{opacity:.95;transform:rotate(-9deg) scale(1);}
.ds .art-body .draft-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:14px;}
.ds .art-body .draft-foot small{font-size:12.5px;color:var(--muted2);line-height:1.4;}
.ds .art-body .cliff-btn:focus-visible,.ds .art-body .bubble:focus-visible,.ds .art-body .voices-quiet button:focus-visible,.ds .art-fig figcaption a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

@media (min-width:560px){
  .ds .art-body .stamps-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;}
}
@media (min-width:960px){
  .ds .art-body .cliff p{font-size:24px;}
}
@media (prefers-reduced-motion:reduce){
  .ds .art-body .cliff-btn,.ds .art-body .cliff[data-open="true"] .cliff-b,.ds .art-body .yes.show,.ds .art-body .voices-quiet{animation:none;}
  .ds .art-body .st,.ds .art-body .bubble,.ds .art-body .draft-stamp{transition:none;}
}