@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;0,900;1,400;1,700&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Sans+Narrow:wght@400;700&display=swap');

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

:root{
  --paper:#f4f1e8;
  --paper-2:#ebe6d9;
  --ink:#161512;
  --ink-2:#4a4740;
  --ink-3:#7d7869;
  --rule:#161512;
  --hair:rgba(22,21,18,.22);
  --red:#8f2118;
  --display:'Playfair Display',Georgia,serif;
  --text:'PT Serif',Georgia,serif;
  --narrow:'PT Sans Narrow','Arial Narrow',sans-serif;
  --page:1180px;
}

html{font-size:16px;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--text);line-height:1.62;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}

.sheet{max-width:var(--page);margin:0 auto;padding:0 26px 90px}

/* ---------- линейки ---------- */
.rule{border-top:1px solid var(--rule)}
.rule-thick{border-top:3px solid var(--rule)}
.rule-double{border-top:3px double var(--rule)}

/* ---------- служебная строка ---------- */
.dateline{
  font-family:var(--narrow);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-2);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:11px 0 10px;
}

/* ---------- шапка ---------- */
.masthead{text-align:center;padding:22px 0 14px}
.masthead h1,.masthead .name{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.9rem,9.2vw,7.4rem);line-height:.94;letter-spacing:.01em;text-transform:uppercase;
}
.masthead .sub{
  font-family:var(--narrow);font-size:clamp(.8rem,1.5vw,1rem);letter-spacing:.42em;
  text-transform:uppercase;color:var(--ink-2);margin-top:16px;padding-left:.42em;
}
.masthead.small{padding:14px 0 10px}
.masthead.small .name{font-size:clamp(1.7rem,4.4vw,3.1rem)}
.masthead.small .sub{font-size:.76rem;letter-spacing:.34em;margin-top:10px}

/* ---------- рубрики и язык ---------- */
/* липкая полоса рубрик */
.navbar{
  position:sticky;top:0;z-index:60;
  background:var(--paper);
  transition:box-shadow .2s ease;
}
.navbar.is-stuck{box-shadow:0 6px 18px rgba(22,21,18,.09)}

.sections-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.burger{grid-column:1;grid-row:1}
.sections{grid-column:2;grid-row:1}
.lang{grid-column:3;grid-row:1}

/* бургер — только на узких экранах */
.burger{
  display:none;flex-direction:column;gap:5px;
  background:none;border:0;cursor:pointer;padding:10px 0;justify-self:start;
}
.burger span{width:24px;height:1.5px;background:var(--ink);transition:transform .22s ease,opacity .22s ease}
.nav-open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-open .burger span:nth-child(2){opacity:0}
.nav-open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.sections{
  display:flex;justify-content:center;flex-wrap:nowrap;font-family:var(--narrow);
  font-size:.8rem;letter-spacing:.11em;text-transform:uppercase;padding:10px 0 11px;
}
.sections a{padding:2px 11px;border-right:1px solid var(--hair);white-space:nowrap}
.sections a:last-child{border-right:0}
.sections a:hover,.sections a.on{color:var(--red)}
.lang{
  justify-self:end;font-family:var(--narrow);font-size:.88rem;letter-spacing:.2em;
  text-transform:uppercase;display:flex;align-items:center;gap:9px;color:var(--ink-3);
}
.lang a:hover,.lang a.on{color:var(--red)}
.lang .sep{opacity:.5}

/* ---------- типографика ---------- */
.kicker{
  font-family:var(--narrow);font-size:.82rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--red);margin-bottom:16px;
}
.headline{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2.1rem,5vw,3.9rem);line-height:1.05;letter-spacing:-.015em;max-width:20ch;
}
.deck{
  font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.5;max-width:52ch;margin-top:18px;
}
.byline{
  font-family:var(--narrow);font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-top:14px;
}

.cols{columns:3;column-gap:38px;column-rule:1px solid var(--hair);text-align:justify;hyphens:none;padding:26px 0 4px;font-size:1.02rem}
.cols-2{columns:2}
.cols-1{columns:1}
.cols p{margin-bottom:1em;text-indent:1.3em}
.cols p:first-of-type{text-indent:0}
.dropcap::first-letter{
  font-family:var(--display);font-weight:700;float:left;
  font-size:4.3em;line-height:.82;padding:.06em .1em 0 0;margin-top:.02em;
}

/* ---------- первая полоса: липкий портрет ---------- */
.front{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:0;padding-top:30px;align-items:start}
.front-text{padding-right:44px;padding-bottom:10px}
.front-text .body{font-size:1.06rem;padding-top:26px;max-width:38em}
.front-text .body p{margin-bottom:1.05em}
.front-text .body p+p{text-indent:1.3em}
.front-photo{position:sticky;top:22px;border-left:1px solid var(--hair);padding-left:36px;align-self:start}
.front-photo img{width:100%}
.front-photo figcaption{
  font-family:var(--narrow);font-size:.86rem;line-height:1.4;letter-spacing:.04em;
  color:var(--ink-3);margin-top:10px;border-top:1px solid var(--hair);padding-top:9px;
}

/* ---------- заголовок внутренней страницы ---------- */
.pagehead{padding:34px 0 8px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:40px;align-items:end}
.pagehead.solo{display:block;max-width:46em}
.pagehead-aside{
  font-family:var(--narrow);font-size:.9rem;line-height:1.55;letter-spacing:.06em;
  color:var(--ink-2);border-left:1px solid var(--hair);padding-left:24px;
}
.pagehead-aside b{display:block;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}


/* ============ типы первого экрана страниц ============ */

/* A. Плакат: заголовок во всю ширину, лид двумя колонками */
.ph-banner{display:block;padding:34px 0 6px}
.ph-banner .headline{max-width:none;font-size:clamp(2.5rem,6.6vw,5rem);line-height:1}
.ph-banner .ph-lead{
  columns:2;column-gap:40px;column-rule:1px solid var(--hair);
  margin-top:24px;padding-top:20px;border-top:1px solid var(--rule);
  font-family:var(--text);font-size:1.06rem;color:var(--ink-2);
}
.ph-banner .ph-lead p{margin-bottom:.8em}

/* B. С номером маршрута: крупная цифра рядом с заголовком */
.ph-num{display:grid;grid-template-columns:auto minmax(0,1fr);gap:34px;align-items:start;padding:34px 0 6px}
.ph-num.flip{grid-template-columns:minmax(0,1fr) auto}
.ph-num.flip .ph-figure{order:2;text-align:right}
.ph-figure{
  font-family:var(--display);font-weight:900;line-height:.78;
  font-size:clamp(4.5rem,11vw,9rem);color:var(--ink);
}
.ph-figure span{
  display:block;font-family:var(--narrow);font-weight:400;
  font-size:.8rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-top:12px;line-height:1.3;
}
.ph-num .headline{font-size:clamp(2rem,4.4vw,3.4rem)}

/* C. Титульный: всё по центру узкой колонкой */
.ph-center{display:block;text-align:center;padding:44px 0 10px;max-width:34em;margin:0 auto}
.ph-center .kicker{margin-bottom:20px}
.ph-center .headline{max-width:none;margin:0 auto;font-size:clamp(2.2rem,5vw,3.7rem)}
.ph-center .deck{margin:20px auto 0;max-width:40ch}
.ph-center .ph-note{
  margin-top:24px;padding-top:16px;border-top:1px solid var(--rule);
  font-family:var(--narrow);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
}
.ph-note a{color:var(--red);border-bottom:1px solid rgba(143,33,24,.4);padding-bottom:1px}
.ph-note a:hover{border-bottom-color:var(--red)}
.byline a{color:var(--red);border-bottom:1px solid rgba(143,33,24,.35)}
.byline a:hover{border-bottom-color:var(--red)}

/* D. Перевёрнутая иерархия: маленький заголовок, огромный лид */
.ph-invert{display:block;padding:34px 0 6px;max-width:46em}
.ph-invert .headline{
  font-family:var(--narrow);font-weight:700;text-transform:uppercase;
  font-size:clamp(1rem,1.8vw,1.32rem);letter-spacing:.2em;max-width:none;line-height:1.3;
}
.ph-invert .deck{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(1.7rem,3.8vw,2.9rem);line-height:1.22;color:var(--ink);
  max-width:30ch;margin-top:18px;
}

/* E. Широкий в разрядку: заголовок капителью по всей полосе */
.ph-wide{display:block;padding:34px 0 6px}
.ph-wide .headline{
  max-width:none;text-transform:uppercase;letter-spacing:.02em;
  font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.06;
}
.ph-wide .ph-under{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;
  margin-top:22px;padding-top:18px;border-top:3px double var(--rule);
}
.ph-wide .deck{margin-top:0}
.ph-wide .ph-aside{
  font-family:var(--narrow);font-size:.9rem;line-height:1.55;letter-spacing:.05em;color:var(--ink-2);
  border-left:1px solid var(--hair);padding-left:22px;
}
.ph-wide .ph-aside b{display:block;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}

/* F. Развёрнутый: заголовок слева, крупный лид справа */
.ph-side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;padding:34px 0 6px;align-items:end}
.ph-side .ph-left{padding-right:38px}
.ph-side .headline{font-size:clamp(2.1rem,4.8vw,3.6rem);max-width:none}
.ph-side .ph-right{border-left:1px solid var(--hair);padding-left:38px}
.ph-side .deck{
  font-family:var(--display);font-style:italic;font-size:clamp(1.3rem,2.4vw,1.85rem);
  line-height:1.3;color:var(--ink);max-width:none;margin-top:0;
}

@media(max-width:760px){
  .ph-banner .ph-lead{columns:1;column-rule:0}
  .ph-num,.ph-num.flip{grid-template-columns:1fr;gap:14px}
  .ph-num.flip .ph-figure{order:0;text-align:left}
  .ph-figure{font-size:3.6rem}
  .ph-wide .ph-under{grid-template-columns:1fr;gap:16px}
  .ph-wide .ph-aside{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:12px}
  .ph-side{grid-template-columns:1fr;gap:18px}
  .ph-side .ph-left{padding-right:0}
  .ph-side .ph-right{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:14px}
  .ph-center{padding:26px 0 8px}
}

/* ---------- секции ---------- */
.sec{padding:44px 0 0}
.sec-label{font-family:var(--narrow);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);padding:9px 0 0}
.sec-title{font-family:var(--display);font-weight:700;font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-.01em;margin:6px 0 6px}
.sec-deck{font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:clamp(1.12rem,1.55vw,1.28rem);line-height:1.5;max-width:58ch;margin-bottom:22px}

/* ---------- колонки-материалы ---------- */
.stories{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:12px}
.stories.two{grid-template-columns:repeat(2,1fr)}
.story{padding:22px 26px 24px;border-right:1px solid var(--hair)}
.story:first-child{padding-left:0}
.story:last-child{border-right:0;padding-right:0}
.story-num{font-family:var(--display);font-weight:700;font-size:.95rem;color:var(--red);letter-spacing:.14em;margin-bottom:9px}
.story h3{font-family:var(--display);font-weight:700;font-size:1.28rem;line-height:1.18;margin-bottom:9px}
.story p{font-size:.97rem;color:var(--ink-2);text-align:justify;hyphens:none}
.story p+p{margin-top:.7em}
.more{
  font-family:var(--narrow);font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--red);display:inline-block;margin-top:12px;border-bottom:1px solid var(--red);padding-bottom:1px;
}

/* ---------- эпиграф и врезка ---------- */
.epigraph{text-align:center;padding:40px 0 38px;margin-top:44px;border-top:3px double var(--rule);border-bottom:3px double var(--rule)}
.epigraph .lat{font-family:var(--display);font-style:italic;font-size:clamp(1.5rem,3.2vw,2.4rem);line-height:1.25;max-width:26ch;margin:0 auto}
.epigraph .trn{font-family:var(--narrow);font-size:.86rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);margin-top:16px}
.pull{font-family:var(--display);font-style:italic;font-size:clamp(1.35rem,2.6vw,2rem);line-height:1.28;text-align:center;max-width:26ch;margin:0 auto;padding:34px 0}

/* ---------- иллюстрации ---------- */
figure.plate{margin:28px 0 0;border-top:1px solid var(--hair);padding-top:14px}
figure.plate img{width:100%;filter:saturate(.3) contrast(1.03)}
figure.plate figcaption{font-family:var(--narrow);font-size:.86rem;letter-spacing:.05em;color:var(--ink-3);margin-top:9px}
figure.plate.narrow{max-width:620px}


/* ---------- полполосы: изображение слева, текст справа ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:0;align-items:start;margin-top:14px}
.split.match{align-items:stretch}
.split.match .split-photo{display:flex;flex-direction:column;padding-right:44px}
.split.match .split-photo img{flex:1;min-height:0;height:100%;object-fit:cover;object-position:center 18%}
.split.match .split-text{padding-left:44px}
.split-photo{padding-right:34px;border-right:1px solid var(--hair)}
.split-photo img{width:100%}
.split-photo.line img{filter:none}
.split-photo figcaption{
  font-family:var(--narrow);font-size:.86rem;line-height:1.45;letter-spacing:.04em;
  color:var(--ink-3);margin-top:10px;border-top:1px solid var(--hair);padding-top:9px;
}
.split-text{padding-left:34px;font-size:1.02rem;text-align:justify;hyphens:none}
.split-text p{margin-bottom:1em}
.split-text p+p{text-indent:1.3em}
.split-text .marks{columns:1;margin-top:20px}
.split-text .marks li{font-size:.98rem}

/* зеркальный вариант: текст слева, изображение справа */
.split.flip{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}
.split.flip .split-text{padding-left:0;padding-right:34px}
.split.flip .split-photo{padding-right:0;padding-left:34px;border-right:0;border-left:1px solid var(--hair)}

@media(max-width:960px){
  .split,.split.flip{grid-template-columns:1fr;gap:24px}
  .split-photo,.split.flip .split-photo{padding:0;border:0}
  .split-text,.split.flip .split-text{padding:0;text-align:left}
  .split.flip .split-photo{order:-1}
}

/* ---------- перечни ---------- */
.marks{list-style:none;margin-top:6px;columns:2;column-gap:38px;column-rule:1px solid var(--hair)}
.marks li{padding:11px 0;border-bottom:1px solid var(--hair);break-inside:avoid;font-size:1rem}
.marks li::before{content:'—';color:var(--red);margin-right:10px}
.steps{list-style:none;counter-reset:s;border-top:1px solid var(--rule);margin-top:12px}
.steps li{counter-increment:s;display:grid;grid-template-columns:64px 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--hair)}
.steps li::before{
  content:counter(s,decimal-leading-zero);font-family:var(--display);font-weight:700;
  font-size:1.5rem;color:var(--red);line-height:1.1;
}
.steps h3{font-family:var(--display);font-size:1.2rem;font-weight:700;margin-bottom:5px}
.steps p{color:var(--ink-2);font-size:.99rem}

/* ---------- факты ---------- */
.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.42fr);gap:52px;align-items:stretch;padding-top:10px}
.about-photo{display:flex;flex-direction:column}
.about-photo img{width:100%;flex:1;min-height:0;height:100%;object-fit:cover;object-position:center 12%}
.about-photo figcaption{font-family:var(--narrow);font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin-top:10px;border-top:1px solid var(--hair);padding-top:9px}
.facts{width:100%;border-collapse:collapse}
.facts tr{border-bottom:1px solid var(--hair)}
.facts tr:first-child{border-top:1px solid var(--rule)}
.facts th{text-align:left;vertical-align:top;font-family:var(--display);font-weight:700;font-size:1.42rem;padding:15px 20px 15px 0;white-space:nowrap;width:1%}
.facts td{padding:17px 0 15px;font-size:.97rem;color:var(--ink-2)}
.facts td b{display:block;font-family:var(--narrow);font-weight:700;font-size:.84rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-bottom:3px}
.bio{margin-top:24px;font-size:1rem;color:var(--ink-2);text-align:justify;hyphens:none}
.bio p{margin-bottom:.85em}
.bio p+p{text-indent:1.2em}

/* ---------- объявления ---------- */
.ads{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:16px}
.ads.four{grid-template-columns:repeat(4,1fr)}
.ad{padding:22px 24px;border-right:1px solid var(--hair);text-align:center}
.ad:first-child{padding-left:0}
.ad:last-child{border-right:0;padding-right:0}
.ad .t{font-family:var(--display);font-weight:700;font-size:1.18rem;margin-bottom:7px}
.ad .d{font-size:.94rem;color:var(--ink-2)}
.ad .go{font-family:var(--narrow);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);display:inline-block;margin-top:11px;border-bottom:1px solid var(--red)}

/* ---------- рубрикатор блога ---------- */
.rubrics{border-top:1px solid var(--rule);margin-top:14px}
.rubric{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr);gap:34px;padding:26px 0;border-bottom:1px solid var(--hair)}
.rubric h3{font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:1.15}
.rubric .rub-note{font-family:var(--narrow);font-size:.88rem;letter-spacing:.05em;color:var(--ink-3);margin-top:7px;line-height:1.5}
.entries{list-style:none}
.entries li{padding:8px 0;border-bottom:1px dotted var(--hair)}
.entries li:last-child{border-bottom:0}
.entries a{font-family:var(--display);font-size:1.06rem;line-height:1.3}
.entries a:hover{color:var(--red)}
.entries .note{display:block;font-family:var(--text);font-size:.93rem;color:var(--ink-2);margin-top:3px}

/* ---------- прайс ---------- */
.price{border-top:3px double var(--rule);border-bottom:3px double var(--rule);padding:30px 0;margin-top:34px;text-align:center}
.price .amount{font-family:var(--display);font-weight:700;font-size:clamp(2.6rem,6vw,4.4rem);line-height:1}
.price .terms{font-family:var(--narrow);font-size:.9rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-top:12px}


/* ---------- календарь и оплата ---------- */
.booking{border:1px solid var(--rule);background:#faf7ef;margin-top:14px;overflow:hidden}
.booking iframe{
  width:100%;height:740px;border:0;display:block;
  filter:sepia(.26) hue-rotate(-10deg) saturate(.9) brightness(1.03) contrast(.97);
}
.paybar{
  display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;
  border-bottom:1px solid var(--rule);border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  padding:20px 24px;background:var(--paper-2);
}
.paybar-t{font-family:var(--display);font-weight:700;font-size:1.2rem}
.paybar-d{font-size:.95rem;color:var(--ink-2);margin-top:4px;max-width:52ch}
.paybtn{
  font-family:var(--narrow);font-size:1rem;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:15px 30px;white-space:nowrap;
  border:1px solid var(--ink);transition:background .2s,color .2s;
}
.paybtn:hover{background:var(--red);border-color:var(--red);color:var(--paper)}
@media(max-width:600px){
  .booking iframe{height:620px}
  .paybar{padding:18px}
  .paybtn{width:100%;text-align:center}
}


/* ---------- марка метода ---------- */
.wordmark{
  font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.4rem);line-height:.96;letter-spacing:.01em;
  margin:2px 0 10px;
}
.wordmark + .headline{font-size:clamp(1.5rem,2.8vw,2.3rem);font-weight:400;font-style:italic;max-width:24ch}

/* ---------- рубрикатор «Думок» ---------- */
.rubnav{
  display:flex;flex-wrap:wrap;gap:0;margin-top:26px;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  font-family:var(--narrow);font-size:.83rem;letter-spacing:.13em;text-transform:uppercase;
}
.rubnav a{padding:11px 14px;border-right:1px solid var(--hair);color:var(--red)}
.rubnav a:last-child{border-right:0}
.rubnav a:hover{color:var(--ink);background:var(--paper-2)}

.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);margin-top:12px}
.tcard{
  display:block;padding:22px 26px 26px;border-right:1px solid var(--hair);border-bottom:1px solid var(--hair);
  transition:background .18s;
}
.tcard:nth-child(3n){border-right:0}
.tcard:hover{background:var(--paper-2)}
.tcard-title{
  display:block;font-family:var(--display);font-weight:700;font-size:1.14rem;
  line-height:1.25;margin-top:14px;
}
.tcard:hover .tcard-title{color:var(--red)}
.tcard-note{display:block;font-size:.93rem;color:var(--ink-2);line-height:1.55;margin-top:7px}

/* ---------- миниатюра ---------- */
.thumb{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  aspect-ratio:4/3;background:var(--paper-2);border:1px solid var(--hair);
  position:relative;overflow:hidden;
}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-letter{
  font-family:var(--display);font-weight:900;font-size:3.2rem;line-height:1;
  color:var(--ink);opacity:.82;
}
.thumb-rub{
  font-family:var(--narrow);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-3);margin-top:8px;padding:0 10px;text-align:center;
}
.thumb.big{aspect-ratio:16/7}
.thumb.big .thumb-letter{font-size:5.6rem}
.thumb.big .thumb-rub{font-size:.8rem;margin-top:12px}

/* ---------- страница матеріалу ---------- */
.post{padding-top:34px}
.post-head{max-width:52em}
.post-head .kicker a:hover{color:var(--ink)}
.post-title{
  font-family:var(--display);font-weight:700;
  font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.06;letter-spacing:-.015em;max-width:22ch;
}
.post-head .deck{max-width:56ch}
.post-plate{margin:30px 0 6px;border-top:1px solid var(--rule);padding-top:14px}
.post-plate figcaption{
  font-family:var(--narrow);font-size:.84rem;letter-spacing:.06em;color:var(--ink-3);margin-top:9px;
}
.post-body{padding-top:26px}
.post-body p:first-of-type::first-letter{
  font-family:var(--display);font-weight:700;float:left;
  font-size:4.3em;line-height:.82;padding:.06em .1em 0 0;
}

/* ---------- переход между материалами ---------- */
.post-nav{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:3px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:56px;
}
.pn{padding:20px 26px;border-right:1px solid var(--hair);display:block}
.pn:last-child{border-right:0}
.pn.prev{padding-left:0}
.pn.next{padding-right:0;text-align:right}
.pn.back{text-align:center}
.pn-lbl{
  display:block;font-family:var(--narrow);font-size:.76rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:8px;
}
.pn-t{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.3}
.pn:hover .pn-t{color:var(--red)}

@media(max-width:960px){
  .tgrid{grid-template-columns:1fr;border-top:0}
  .tcard{border-right:0;border-top:1px solid var(--hair);padding:20px 0}
  .post-nav{grid-template-columns:1fr}
  .pn{border-right:0;border-top:1px solid var(--hair);padding:16px 0;text-align:left}
  .pn.back,.pn.next{text-align:left}
  .rubnav{font-size:.78rem}
  .rubnav a{padding:9px 12px}
}

/* ---------- завершение полосы: карточки-переходы ---------- */
.next{border-top:3px solid var(--rule);margin-top:56px;padding-top:18px}
.next .lbl{font-family:var(--narrow);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
/* на головній таких карток чотири */
.next-grid.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.next-grid.four{grid-template-columns:repeat(2,1fr)}}
.next-card{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 22px 18px;
  border:1px solid var(--hair);background:var(--paper-2);
  transition:border-color .18s,background .18s,transform .18s;
}
.next-card .t{
  font-family:var(--display);font-weight:700;font-size:1.14rem;line-height:1.25;
}
.next-card .d{font-size:.92rem;color:var(--ink-2);line-height:1.5}
.next-card .go{
  margin-top:auto;padding-top:12px;
  font-family:var(--narrow);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);display:inline-flex;align-items:center;gap:7px;
}
.next-card .go::after{content:'→';transition:transform .18s}
.next-card:hover{border-color:var(--red);background:var(--paper);transform:translateY(-2px)}
.next-card:hover .t{color:var(--red)}
.next-card:hover .go::after{transform:translateX(4px)}

/* ---------- юридический документ ---------- */
.doc{max-width:44em;padding-top:22px;font-size:1rem}
.doc p{margin-bottom:.95em;color:var(--ink-2)}
.doc .doc-h{
  font-family:var(--display);font-weight:700;font-size:1.24rem;line-height:1.25;
  color:var(--ink);margin:30px 0 10px;padding-top:16px;border-top:1px solid var(--hair);
}
.doc .doc-h:first-child{border-top:0;padding-top:0;margin-top:0}
.doc .doc-li{padding-left:20px;position:relative;margin-bottom:.5em}
.doc .doc-li::before{content:'—';position:absolute;left:0;color:var(--red)}

/* ---------- подвал ---------- */
.colophon{
  margin-top:56px;border-top:3px double var(--rule);padding-top:18px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--narrow);font-size:.84rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);
}
.colophon a:hover{color:var(--red)}

/* ---------- адаптив ---------- */
@media(max-width:960px){
  .sections{font-size:.76rem;letter-spacing:.12em}
  .sections a{padding:2px 10px}
  .lang{font-size:.8rem}
  .front{grid-template-columns:1fr;gap:26px}
  .front-text{padding-right:0;order:2}
  .front-photo{position:static;border-left:0;padding-left:0;order:1;border-bottom:1px solid var(--hair);padding-bottom:14px}
  .pagehead{grid-template-columns:1fr;gap:20px}
  .pagehead-aside{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:14px}
  .cols{columns:2}
  .stories,.stories.two{grid-template-columns:1fr;border-top:0}
  .story{padding:20px 0;border-right:0;border-top:1px solid var(--hair)}
  .about{grid-template-columns:1fr;gap:26px}
  .ads,.ads.four{grid-template-columns:1fr}
  .ad{border-right:0;border-top:1px solid var(--hair);padding:18px 0}
  .ad:first-child{border-top:0}
  .rubric{grid-template-columns:1fr;gap:12px}
  .next-grid,.next-grid.four{grid-template-columns:1fr;gap:12px}
  .next-card{padding:16px 18px 14px}
  .marks{columns:1}
}
@media(max-width:600px){
  .sheet{padding:0 18px 60px}
  .cols{columns:1;text-align:left;font-size:1.05rem}
  .sections{font-size:.78rem}
  .sections a{padding:2px 10px}
  .dateline{justify-content:center;text-align:center;font-size:.7rem}
  .steps li{grid-template-columns:46px 1fr;gap:14px}
}

/* ============ последние публикации: 5 в ряд ============ */
.latest{margin-top:30px}
.latest-lbl{font-family:var(--narrow);font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);padding:10px 0 12px;}
.lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);}
.lcard{display:block;padding:16px 15px 20px;border-right:1px solid var(--hair);transition:background .18s}
.lcard:last-child{border-right:0}
.lcard:hover{background:var(--paper-2)}
.thumb.lat{aspect-ratio:4/3}
.thumb.lat .thumb-letter{font-size:2.4rem}
.thumb.lat .thumb-rub{font-size:.6rem;letter-spacing:.18em;margin-top:6px}
.lcard-rub{display:block;font-family:var(--narrow);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-top:11px}
.lcard-title{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;
  line-height:1.26;margin-top:5px}
.lcard:hover .lcard-title{color:var(--red)}

/* ============ рубрикатор: структурный список ============ */
.tlist{border-top:1px solid var(--rule);margin-top:12px;
  display:grid;grid-template-columns:1fr 1fr;column-gap:38px}
.trow{display:grid;grid-template-columns:74px 1fr;gap:15px;align-items:start;
  padding:14px 0 15px;border-bottom:1px solid var(--hair);transition:background .18s}
.trow:hover{background:var(--paper-2)}
.thumb.mini{aspect-ratio:1/1;width:74px}
.thumb.mini .thumb-letter{font-size:1.8rem}
.thumb.mini .thumb-rub{display:none}
.trow-text{display:block;min-width:0}
.trow-title{display:block;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.27}
.trow:hover .trow-title{color:var(--red)}
.trow-note{display:block;font-size:.86rem;color:var(--ink-2);line-height:1.5;margin-top:5px}
.sec-count{font-family:var(--narrow);font-weight:400;font-size:.7em;letter-spacing:.1em;
  color:var(--ink-3);vertical-align:.28em;margin-left:6px}

@media(max-width:960px){
  .lgrid{grid-template-columns:repeat(2,1fr)}
  .lcard:nth-child(2n){border-right:0}
  .lcard:nth-child(n+3){border-top:1px solid var(--hair)}
  .tlist{grid-template-columns:1fr}
}

/* ============ разворот на две полосы: два маршрута рядом ============ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:3px solid var(--rule);margin-top:16px}
.duo-col{padding:24px 34px 30px;min-width:0}
.duo-col+.duo-col{border-left:1px solid var(--rule)}
.duo-col:first-child{padding-left:0}
.duo-col:last-child{padding-right:0}
/* якорь не должен уезжать под липкое меню */
.duo-col{scroll-margin-top:90px}

.duo-num{font-family:var(--display);font-weight:900;font-size:2.9rem;line-height:.9;color:var(--ink)}
.duo-num span{display:block;font-family:var(--narrow);font-weight:400;font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin-top:7px}
.duo-col .kicker{margin:16px 0 8px}
.duo-title{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.3vw,2rem);
  line-height:1.12;letter-spacing:-.01em}
.duo-col .deck{font-size:1.08rem;margin-top:12px;max-width:none}
.duo-lede{margin-top:12px;font-size:1.02rem;line-height:1.6}

.duo-part{margin-top:26px;padding-top:16px;border-top:1px solid var(--rule)}
.duo-lbl{font-family:var(--narrow);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);margin-bottom:10px}
.duo-part>p{font-size:1rem;line-height:1.6}

/* внутри узкой полосы всё выстраивается в один столбец */
.duo-col .marks{columns:1;margin-top:8px}
.duo-col .marks li{font-size:.98rem;padding:9px 0}
.duo-col .steps{border-top:0;margin-top:4px}
.duo-col .steps li{grid-template-columns:38px 1fr;gap:14px;padding:14px 0}
.duo-col .steps li::before{font-size:1.15rem}
.duo-col .steps h3{font-size:1.05rem}
.duo-col .steps p{font-size:.96rem}

.duo-cases{list-style:none;margin-top:8px}
.duo-cases li{padding:12px 0;border-bottom:1px solid var(--hair);font-size:.97rem;line-height:1.55}
.case-lbl{display:block;font-family:var(--narrow);font-size:.7rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:3px}

.duo-pull{font-family:var(--display);font-style:italic;font-size:1.22rem;line-height:1.35;
  margin-top:24px;padding:18px 0;border-top:3px double var(--rule);border-bottom:3px double var(--rule)}
.duo-note{margin-top:22px;padding-top:12px;border-top:1px solid var(--hair);
  font-family:var(--narrow);font-size:.86rem;letter-spacing:.06em;color:var(--ink-2)}
.duo-note a{color:var(--red);border-bottom:1px solid rgba(143,33,24,.4)}

@media(max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo-col{padding:24px 0 28px}
  .duo-col+.duo-col{border-left:0;border-top:3px solid var(--rule)}
}

/* ============ полоса брендов: бегущая строка ============ */
.brands{margin-top:38px}
.brands .brands-lbl{font-family:var(--narrow);font-size:.78rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red);padding-bottom:10px}
.brands .brands-deck{font-family:var(--text);font-style:italic;color:var(--ink-2);
  font-size:1.05rem;line-height:1.5;max-width:56ch;margin-bottom:16px}
.marq{position:relative;overflow:hidden;padding:26px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.marq-track{display:flex;width:max-content;animation:marq linear infinite}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.bmark{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:44px;padding:0 42px}
/* логотип уводим в цвет типографской краски; multiply убирает белую подложку */
.bmark img{max-height:36px;width:auto;opacity:.84;mix-blend-mode:multiply;
  filter:grayscale(1) contrast(1.05) brightness(.95)}
/* широкие начертания-логотипы: в общем ряду они перевешивают знаки */
.bmark.sm img{max-height:26px;max-width:200px}
.bword{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:.02em;
  text-transform:uppercase;color:var(--ink);opacity:.88;white-space:nowrap;line-height:1}
.bnote{font-family:var(--narrow);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);margin-top:5px;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .marq-track{animation:none}
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* ============ мобильная версия ============ */
@media(max-width:760px){
  :root{--page:100%}
  .sheet{padding:0 16px 54px}

  .dateline{font-size:.66rem;letter-spacing:.12em;gap:6px;padding:8px 0 7px;justify-content:center;text-align:center}
  .dateline span:nth-child(3){display:none}

  .masthead{padding:14px 0 10px}
  .masthead h1{font-size:2.35rem;line-height:1}
  .masthead .sub{font-size:.62rem;letter-spacing:.22em;margin-top:9px;padding-left:.22em}
  .masthead.small{padding:10px 0 8px}
  .masthead.small .name{font-size:1.45rem}
  .masthead.small .sub{font-size:.6rem;letter-spacing:.2em;margin-top:6px}

  .sections-row{grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
  .burger{display:flex;grid-column:1;grid-row:1}
  .lang{grid-column:3;grid-row:1}
  .sections{
    display:none;grid-column:1 / -1;grid-row:2;
    flex-direction:column;align-items:stretch;padding:6px 0 12px;flex-wrap:wrap;
  }
  .nav-open .sections{display:flex}
  .sections a{
    padding:12px 0;border-right:0;border-bottom:1px solid var(--hair);
    font-size:.95rem;letter-spacing:.16em;
  }
  .sections a:last-child{border-bottom:0}
  .lang{justify-self:end;padding:0;font-size:.82rem}

  .headline{font-size:1.95rem;line-height:1.12;max-width:none}
  .post-title{font-size:1.85rem}
  .wordmark{font-size:2.3rem}
  .deck{font-size:1.02rem;margin-top:14px}
  .sec{padding:32px 0 0}
  .sec-title{font-size:1.5rem}
  .pagehead{padding:24px 0 4px}

  .front{padding-top:20px}
  .front-text .body{font-size:1.02rem;padding-top:18px}
  .front-photo img{max-height:none;object-fit:contain}

  .cols{columns:1;column-rule:0;text-align:left;padding:18px 0 0;font-size:1.04rem}
  .cols p{text-indent:0;margin-bottom:.9em}
  .dropcap::first-letter{font-size:3.4em}

  .epigraph{padding:30px 0 28px;margin-top:32px}
  .epigraph .lat{font-size:1.5rem}
  .pull{font-size:1.3rem;padding:26px 0}

  .steps li{grid-template-columns:40px 1fr;gap:12px;padding:16px 0}
  .steps li::before{font-size:1.2rem}
  .facts th{font-size:1.15rem;padding:12px 14px 12px 0}
  .facts td{font-size:.94rem;padding:14px 0 12px}

  .price{padding:24px 0;margin-top:26px}
  .price .amount{font-size:2.6rem}
  .booking iframe{height:560px}

  .rubnav{margin-top:18px;font-size:.74rem}
  .rubnav a{padding:9px 11px}
  .tcard{padding:18px 0 20px}
  .tcard-title{font-size:1.08rem}

  .lgrid{grid-template-columns:1fr 1fr}
  .lcard{padding:14px 12px 17px}
  .lcard:nth-child(2n){border-right:0}
  .lcard:nth-child(n+3){border-top:1px solid var(--hair)}
  .lcard-title{font-size:.92rem}
  .trow{grid-template-columns:62px 1fr;gap:13px;padding:13px 0 14px}
  .thumb.mini{width:62px}
  .trow-title{font-size:1rem}
  .trow-note{font-size:.83rem;margin-top:4px}

  .brands{margin-top:28px}
  .bmark{height:36px;padding:0 26px}
  .bmark img{max-height:28px}
  .bmark.sm img{max-height:21px;max-width:150px}
  .bword{font-size:.95rem}
  .bnote{font-size:.58rem}

  .post-plate{margin-top:22px}
  .post-nav{margin-top:36px}

  /* до 960 px ставимо два на два, а не стовпчиком: підвал займав чотири рядки.
     Міжлітерний інтервал трохи вужчий, щоб адреса пошти влізла в колонку */
  .colophon{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;
    row-gap:12px;column-gap:16px;align-items:start;justify-items:start;
    font-size:.74rem;letter-spacing:.08em}
  .colophon>*{min-width:0;overflow-wrap:anywhere}
}

@media(max-width:420px){
  .masthead h1{font-size:1.95rem}
  .headline{font-size:1.72rem}
  .sheet{padding:0 14px 46px}
}

/* заклик у меню замість «Контакту» */
.sections a.cta{color:var(--red);font-weight:700}
.sections a.cta:hover{color:var(--ink)}

/* «Метод»: картинка крупніше, текст вужчою колонкою, краї на одній висоті */
.split.wide{grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);align-items:stretch}
.split.wide .split-photo{display:flex;flex-direction:column;padding-right:34px}
.split.wide .split-photo img{flex:1;min-height:0;height:100%;object-fit:contain;object-position:center top}
.split.wide .split-text{padding-left:34px;font-size:.99rem;
  display:flex;flex-direction:column;justify-content:center}
@media(max-width:900px){
  .split.wide{grid-template-columns:1fr}
  .split.wide .split-photo{padding-right:0;border-right:0}
  .split.wide .split-text{padding-left:0}
}

/* ── «Метод»: кроки вужче, праворуч поле фіксованого розміру з канвою ── */
.with-pane{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);
  gap:0;align-items:start;margin-top:12px}
.with-pane .steps{border-top:1px solid var(--rule);padding-right:34px}
.with-pane .steps li{grid-template-columns:52px 1fr;gap:18px}
.pane{border-left:1px solid var(--rule);padding:0 0 0 34px;position:sticky;top:78px}
.pane-lbl{font-family:var(--narrow);font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);padding-bottom:6px}
.pane-h{font-family:var(--display);font-weight:700;font-size:1.24rem;line-height:1.16;
  margin-bottom:12px}
.pane p{font-size:.93rem;line-height:1.52;color:var(--ink-2);margin-bottom:.7em}
.pane-note{font-family:var(--narrow);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--hair);
  padding-top:8px;margin-top:4px}
.canvas-svg{width:100%;height:auto;display:block;margin-bottom:14px;
  border:1px solid var(--hair);background:var(--paper-2)}

/* чотири функції: перелік з виділеною назвою */
.marks.fn{columns:2;column-gap:38px;column-rule:1px solid var(--hair)}
.marks.fn li{padding:12px 0;font-size:.98rem;line-height:1.5}
.marks.fn li::before{content:''}
.marks.fn li b{font-family:var(--display);font-weight:700}

@media(max-width:760px){
  .with-pane{grid-template-columns:1fr}
  .with-pane .steps{padding-right:0}
  .pane{border-left:0;padding-left:0;position:static;
    border-top:3px solid var(--rule);padding-top:18px;margin-top:22px}
  .marks.fn{columns:1}
}

/* підписи всередині схеми: атрибути SVG не розуміють var(), тому класами */
.canvas-svg .n{font-family:var(--narrow);letter-spacing:.16em;fill:var(--ink-3)}
.canvas-svg .d{font-family:var(--display);font-weight:700;fill:var(--ink)}
.canvas-svg .core{font-family:var(--display);font-weight:900;fill:var(--paper)}
.canvas-svg .core-sub{font-family:var(--narrow);letter-spacing:.18em;fill:var(--paper)}

/* дзеркальний широкий: текст вужчою колонкою ліворуч, фото крупніше праворуч */
.split.flip.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr);align-items:stretch}
.split.flip.wide .split-text{padding-right:34px;padding-left:0;
  display:flex;flex-direction:column;justify-content:center;font-size:.99rem}
.split.flip.wide .split-photo{display:flex;flex-direction:column;
  padding-left:34px;padding-right:0}
.split.flip.wide .split-photo img{flex:1;min-height:0;height:100%;object-fit:cover}

/* нижній тизер блоку */
.teaser{border-top:1px solid var(--rule);border-bottom:3px double var(--rule);
  margin-top:26px;padding:16px 0 18px;
  font-family:var(--display);font-style:italic;color:var(--ink);
  font-size:clamp(1.12rem,1.7vw,1.44rem);line-height:1.38;max-width:44ch}
@media(max-width:760px){
  .split.flip.wide{grid-template-columns:1fr}
  .split.flip.wide .split-text{padding-right:0}
  .split.flip.wide .split-photo{padding-left:0;border-left:0}
}

/* два яскраві кейси на головній */
.cases-two{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rule);margin-top:12px}
.case-big{padding:22px 34px 24px 0}
.case-big+.case-big{border-left:1px solid var(--rule);padding:22px 0 24px 34px}
.case-kick{font-family:var(--narrow);font-size:.76rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--red);padding-bottom:10px}
.case-fig{font-family:var(--display);font-weight:900;line-height:.98;
  font-size:clamp(2.1rem,3.6vw,3.1rem);letter-spacing:-.02em;margin-bottom:14px}
.case-fig span{display:block;font-weight:400;font-size:.42em;letter-spacing:0;
  color:var(--ink-2);margin-top:6px}
.case-big p{font-size:.99rem;line-height:1.58;color:var(--ink-2)}
.case-big p+p{margin-top:.8em}
.case-out{border-top:1px solid var(--hair);padding-top:12px;margin-top:14px !important;
  color:var(--ink) !important}
@media(max-width:760px){
  .cases-two{grid-template-columns:1fr}
  .case-big,.case-big+.case-big{padding:20px 0;border-left:0;
    border-top:1px solid var(--hair)}
}



/* «Метод», перший екран: тільки ширини полів, кеглі без змін */
.pagehead{grid-template-columns:minmax(0,1.52fr) minmax(0,1fr)}
.pagehead .headline{max-width:17ch}
.pagehead .deck{max-width:40ch}
.pagehead-aside{max-width:30ch}
.split.wide{grid-template-columns:minmax(0,1.72fr) minmax(0,1fr)}

/* «Метод»: шапка без боковика */
.pagehead.ph-top{display:block}
.split.flip.wide{grid-template-columns:minmax(0,1fr) minmax(0,1.72fr)}
.split.flip.wide .split-photo{border-left:1px solid var(--hair)}
.teza{margin-top:22px;padding:14px 0 15px;
  border-top:1px solid var(--rule);border-bottom:3px double var(--rule);
  font-family:var(--narrow);font-size:.95rem;line-height:1.5;letter-spacing:.04em;
  color:var(--ink-2);text-align:left}
.teza b{display:block;font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--red);margin-bottom:6px}

/* стоимость — спокойной строкой, без крика */
.price.quiet{border-top:1px solid var(--rule);border-bottom:1px solid var(--hair);
  padding:15px 0 16px;margin-top:30px;text-align:left}
.price.quiet .line{font-family:var(--narrow);font-size:1.02rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2)}
.price.quiet .line b{font-weight:700;color:var(--ink)}

/* «Метод», перший екран: шапка на всю ширину, лід і текст ліворуч, фото праворуч від ліду */
.mfirst{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.72fr);
  column-gap:0;row-gap:10px;align-items:start;padding:34px 0 8px}
.mfirst-top{grid-column:1 / -1;grid-row:1}
.mfirst-top .headline{max-width:none;white-space:nowrap}
.mfirst-text{grid-column:1;grid-row:2;padding-right:34px;
  font-size:.99rem;text-align:justify;hyphens:none}
.mfirst-text .deck{margin-top:0;max-width:none}
.mfirst-text .dropcap{margin-top:14px}
.mfirst-text p{margin-bottom:1em}
.mfirst-text p+p{text-indent:1.3em}
.mfirst-text .deck+p{text-indent:0}
.mfirst-fig{grid-column:2;grid-row:2;
  padding-left:34px;padding-right:0;border-left:1px solid var(--hair);border-right:0}
@media(max-width:860px){
  .mfirst-top .headline{white-space:normal}
}
@media(max-width:760px){
  .mfirst{grid-template-columns:1fr;row-gap:22px}
  .mfirst-text{grid-column:1;grid-row:3;padding-right:0;text-align:left}
  .mfirst-fig{grid-column:1;grid-row:2;padding-left:0;border-left:0}
}

/* «Публічна діяльність»: виступи 2/5, курси 3/5; теми — сіткою 2×2 */
.duo.uneven{grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
.duo-col .stories{grid-template-columns:1fr 1fr}
.duo-col .story{padding:17px 20px 19px}
.duo-col .story:nth-child(odd){padding-left:0}
.duo-col .story:nth-child(even){border-right:0;padding-right:0}
.duo-col .story:nth-child(n+3){border-top:1px solid var(--hair)}
.duo-col .story h3{font-size:1.12rem}
.duo-col .story p{font-size:.93rem}
/* неравные колонки складываются раньше */
@media(max-width:900px){
  .duo.uneven{grid-template-columns:1fr}
}

/* видеоархив: графический экран с кнопкой YouTube */
.varchive{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  align-items:center;margin-top:12px;border-top:1px solid var(--rule)}
.varchive-text{padding:24px 34px 24px 0}
.varchive-text .kicker{margin-bottom:8px}
.varchive-title{font-family:var(--display);font-weight:700;
  font-size:clamp(1.35rem,2.2vw,1.9rem);line-height:1.16;margin-bottom:10px}
.varchive-text p{font-size:1.02rem;color:var(--ink-2)}
.varchive-note{font-family:var(--narrow);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);margin-top:14px}
.vscreen{display:block;padding:24px 0 24px 34px;border-left:1px solid var(--hair)}
.vscreen-frame{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;
  border:1px solid rgba(22,21,18,.3);border-radius:14px;background-color:var(--paper-2);
  background-image:radial-gradient(var(--hair) 1px,transparent 1px);background-size:7px 7px;
  transition:background-color .2s ease}
.vscreen:hover .vscreen-frame{background-color:#e2dbc8}
.vplay{position:absolute;inset:0;margin:auto;width:33%;height:auto;transition:transform .2s ease}
.vplay rect{fill:var(--red)}
.vplay polygon{fill:var(--paper)}
.vscreen:hover .vplay{transform:scale(1.06)}
.vscreen-bar{position:absolute;left:18px;right:18px;bottom:16px;height:2px;
  background:var(--hair);border-radius:2px}
.vscreen-bar i{display:block;width:18%;height:100%;background:var(--red);border-radius:2px}
.vscreen-cta{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:13px;padding-bottom:8px;border-bottom:1px solid rgba(143,33,24,.4);
  font-family:var(--narrow);font-size:.9rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.vscreen-cta b{font-weight:400}
.vscreen:hover .vscreen-cta{color:var(--ink);border-bottom-color:var(--rule)}
@media(max-width:760px){
  .duo.uneven{grid-template-columns:1fr}
  .duo-col .stories{grid-template-columns:1fr}
  .duo-col .story{padding:18px 0}
  .varchive{grid-template-columns:1fr}
  .varchive-text{padding:20px 0}
  .vscreen{padding:0 0 20px;border-left:0}
}

/* «Персональна консультація»: заголовок крупніший за шапку, у два рядки; лід — у три */
.ph-center{max-width:none}
.ph-center .headline{font-size:clamp(2.6rem,6.6vw,5.3rem);line-height:1.02;
  letter-spacing:-.022em;max-width:20ch}
.ph-center .deck{max-width:47ch;font-size:clamp(1.08rem,1.7vw,1.4rem)}
@media(max-width:760px){
  .ph-center .headline{font-size:clamp(2rem,8.4vw,2.9rem);max-width:none}
  .ph-center .deck{max-width:none}
}

/* выключка без переносов: строку добирает не дефис, а межсловный и межбуквенный интервал */
/* переносы отключены по всему тексту */
.cols,.story p,.split-text,.bio,.mfirst-text,.duo-part>p,.front-text .body,
.varchive-text p,.marks li,.teza{
  hyphens:none;-webkit-hyphens:none;
  text-justify:inter-character;
  text-wrap:pretty;
}

/* «Бізнес-консалтинг»: заголовок ровно в два рядки, тизер на всю ширину */
.ph-banner .headline{text-wrap:balance;max-width:none}
.teaser{max-width:none}

/* красная кнопка призыва: поддерживает «Обговорімо» в меню */
.btn-cta{display:inline-block;margin-top:20px;padding:14px 30px 13px;
  background:var(--red);color:var(--paper);
  font-family:var(--narrow);font-size:.94rem;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--red);transition:background-color .18s ease,color .18s ease}
.btn-cta:hover{background:var(--paper);color:var(--red)}
@media(max-width:600px){
  .btn-cta{padding:12px 20px;font-size:.86rem;letter-spacing:.14em}
}

/* врезка с заданной разбивкой строк */
.pull.set{max-width:none}
@media(max-width:600px){
  .pull.set br{display:none}
}

/* «живий» кадр: короткий mp4 на місці фотографії — грає один раз і замирає */
.livev{position:relative;display:block;overflow:hidden}
.livev>img{width:100%;display:block}
.livev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.livev.on>video{opacity:1}
@media(prefers-reduced-motion:reduce){
  .livev>video{display:none}
}

/* надпись поверх «живого» кадра: лежит отдельным слоем, не двигается и не мутнеет */
.livev-cap{position:absolute;inset:0;z-index:2;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;color:var(--paper)}
.livev-cap.right{align-items:flex-end;text-align:right;padding-right:6%}
.livev-cap.left{align-items:flex-start;text-align:left;padding-left:6%}
.livev-cap>img{width:54%;height:auto}          /* если надпись отдельным PNG */
.livev-cap .l1{font-family:var(--display);font-weight:400;text-transform:uppercase;
  letter-spacing:.07em;font-size:clamp(1.3rem,3.4vw,3rem);line-height:1.12}
.livev-cap .l2{font-family:var(--display);font-style:italic;
  font-size:clamp(.88rem,1.7vw,1.5rem);line-height:1.3;margin-top:.55em}

/* миниатюры кейсов: по умолчанию тихая версия, при наведении шторка открывает цвет */
.duo-cases li.thumbed{display:grid;grid-template-columns:96px minmax(0,1fr);
  gap:16px;align-items:start}
.cthumb{position:relative;display:block;width:96px;aspect-ratio:1/1;
  overflow:hidden;border:1px solid var(--hair)}
.cthumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cthumb .v{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s cubic-bezier(.22,.68,.16,1)}
.duo-cases li.thumbed:hover .cthumb .v,
.duo-cases li.thumbed:focus-within .cthumb .v{clip-path:inset(0 0 0 0);
  transition-duration:1.05s}
.duo-cases li.thumbed .cthumb .v{transition-duration:.6s}
@media(hover:none){
  .cthumb .v{display:none}
}
@media(prefers-reduced-motion:reduce){
  .cthumb .v{transition:none}
}
@media(max-width:600px){
  .duo-cases li.thumbed{grid-template-columns:74px minmax(0,1fr);gap:12px}
  .cthumb{width:74px}
}

/* первая полоса: выключка по формату — текст держит колонку, как в газете */
.front-text .body{text-align:justify;text-justify:inter-character;
  hyphens:none;-webkit-hyphens:none;text-wrap:pretty}
.front-text .body p:first-child{text-indent:0}
.front-text .body p:last-child{margin-bottom:0}
/* лид и подпись — по той же мере, чтобы блок стоял стройно */
.front-text .deck{max-width:36ch}
.front-text .headline{max-width:18ch}
@media(max-width:760px){
  .front-text .body{text-align:left}
  .front-text .deck,.front-text .headline{max-width:none}
}

/* молот: одно слово над заголовком, под ним линейка */
.hammer{font-family:var(--display);font-weight:900;text-transform:uppercase;
  font-size:clamp(2.8rem,6.8vw,5rem);line-height:.9;letter-spacing:.01em;margin:6px 0 0}
.hammer-rule{border-top:3px solid var(--rule);margin:14px 0 16px;max-width:9em}
/* первая полоса: больше воздуха между колонкой и портретом */
.front-text{padding-right:60px}
.front-photo{padding-left:52px}
@media(max-width:960px){
  .front-text{padding-right:44px}
  .front-photo{padding-left:36px}
}
@media(max-width:760px){
  .hammer{font-size:clamp(2.2rem,10vw,3.2rem)}
  .hammer-rule{margin:10px 0 12px}
  .front-text{padding-right:0}
  .front-photo{padding-left:0}
}

/* ======================= мобильная версия ======================= */
/* обложка «тема дня» и сворачиваемые блоки. На десктопе ничего не меняется. */
.mcover{display:none}
.mfold-btn{display:none}

@media(max-width:760px){
  /* кегли первых экранов: строки больше не наезжают */
  .ph-banner .headline,.ph-side .headline,.ph-center .headline,
  .mfirst-top .headline,.pagehead .headline{
    font-size:1.9rem;line-height:1.16;max-width:none}
  .ph-banner,.ph-side,.ph-center,.pagehead{padding-bottom:14px}
  .hammer{font-size:2.4rem}

  /* ---- обложка номера ---- */
  .mcover{display:block;position:relative;overflow:hidden;margin:10px 0 4px}
  .mcover img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:center 14%;display:block}
  .mcover::after{content:"";position:absolute;inset:0;
    background:linear-gradient(to bottom,rgba(20,18,14,0) 30%,rgba(20,18,14,.30) 52%,rgba(20,18,14,.86) 100%)}
  .mcover-txt{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 16px 22px}
  .mcover .kicker{color:#e8cfc8;margin-bottom:8px;font-size:.7rem;letter-spacing:.22em}
  .mcover .hammer{color:var(--paper);font-size:2.5rem;margin:0 0 8px}
  .mcover .mc-h{font-family:var(--display);font-weight:700;color:var(--paper);
    font-size:1.42rem;line-height:1.14;overflow-wrap:normal}
  /* типографская обложка — если фотографии нет */
  .mcover.plain{background:var(--paper-2);border-top:3px solid var(--rule);
    border-bottom:3px double var(--rule)}
  .mcover.plain::after{display:none}
  .mcover.plain .mcover-txt{position:static;padding:20px 14px 22px}
  .mcover.plain .mc-h{font-size:2.5rem;line-height:1.02;letter-spacing:-.015em}
  .mcover.plain .kicker{color:var(--red)}
  .mcover.plain .hammer,.mcover.plain .mc-h{color:var(--ink)}

  /* горизонтальный кадр не кропаем: он информативный, текст уходит под него */
  .mcover.wide img{aspect-ratio:auto;height:auto;object-fit:contain;object-position:center}
  .mcover.wide .mc-h{font-size:1.62rem;line-height:1.1}
  .mcover.wide::after{display:none}
  .mcover.wide .mcover-txt{position:static;padding:14px 0 4px}
  .mcover.wide .kicker{color:var(--red)}
  .mcover.wide .hammer,.mcover.wide .mc-h{color:var(--ink)}
  .mcover-dup{display:none}

  /* своя кнопка в каждой колонке «Публічної діяльності» */
  .duo-col .mfold-btn{margin:10px 0 4px}

  /* то, что обложка уже показала, второй раз не нужно */
  .front-photo,.mfirst-fig,.mfirst-top,
  .front-text .kicker,.front-text .hammer,.front-text .hammer-rule,.front-text .headline,
  .ph-side .ph-left{display:none}
  /* на «Контактах» і «Політиці» обкладинки немає — там заголовок єдиний,
     ховати його не можна */
  .sheet:has(.mcover) .pagehead .kicker,
  .sheet:has(.mcover) .pagehead .headline{display:none}

  /* рубрикатор на мобильном не нужен: каждая группа и так под кнопкой */
  .rubnav{display:none}
  .sec-count{font-size:.8em;color:var(--ink-3)}

  /* лишняя линейка над первым заголовком: её работу делает линейка под шапкой */
  #public>.rule:first-child,#ways>.rule:first-child{display:none}

  /* «Публічна діяльність»: заголовок живёт на обложке, на бумаге его не повторяем */
  #public .sec-label,#public .sec-deck,#public .sec-title{display:none}
  .mcover.talk .mc-h{font-size:2.05rem;line-height:1.06;max-width:11ch}
  .mcover.talk .mcover-txt{padding-bottom:24px}

  /* шапка на мобильном пустая (её работу делает обложка) — высоты не занимает */
  .pagehead,.pagehead.ph-center,.pagehead.ph-banner,.pagehead.ph-side{padding-top:0;padding-bottom:0}
  .pagehead .deck{margin-top:0}
  .lead-only{margin-top:0}
  /* первый заголовок страницы контактов — крупно, в две строки */
  #ways>.sec-title{font-size:2.5rem;line-height:1.02;letter-spacing:-.015em;
    max-width:11ch;margin:10px 0 4px}

  /* лид консультации по левому краю, как на остальных страницах */
  .ph-center{text-align:left}
  .ph-center .deck{margin-left:0;margin-right:0;max-width:none;text-align:left}
  .ph-center .ph-note{text-align:left}

  /* лид «Методу» вплотную к подзаголовку: читается как продолжение */
  .mfirst{padding:0;row-gap:0}
  .mfirst-text{padding-right:0}
  .mfirst-text .deck{margin-top:6px;font-size:1.05rem}
  .mcover.wide .mcover-txt{padding-bottom:0}

  /* линеек на мобильном должно быть меньше: убираем те, что стоят вплотную друг к другу */
  .mcover.plain{border-top:0;border-bottom:1px solid var(--rule)}
  .latest .rule-double{display:none}
  .latest{margin-top:18px}
  .lgrid{border-bottom:0}
  .sec>.rule+.sec-label{margin-top:2px}

  /* ---- «Читати далі» ---- */
  .mfold-btn{display:inline-block;margin:12px 0 2px;padding:9px 16px 8px;
    background:none;border:1px solid var(--red);color:var(--red);cursor:pointer;
    font-family:var(--narrow);font-size:.82rem;letter-spacing:.18em;text-transform:uppercase}
  .mfold-btn[aria-expanded="true"]{border-color:var(--rule);color:var(--ink-2)}
  .mfold{max-height:0;overflow:hidden;opacity:.001;
    transition:max-height 1.05s cubic-bezier(.22,.68,.16,1),opacity .45s ease}
  .mfold.is-open{opacity:1}
  .sec-deck.mob{font-size:1.02rem}
}
@media(min-width:761px){
  .sec-deck.mob{display:none}
}
/* очень узкие экраны: заголовок обложки не должен вылезать за поле */
@media(max-width:400px){
  .mcover.plain .mc-h{font-size:2.05rem}
  #ways>.sec-title,#public>.sec-title{font-size:2.05rem}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
  .mfold{transition:none}
}

/* лид первого экрана без фотографии: одна колонка, набор как в газете */
.lead-only{margin-top:14px}
.lead-only .split-text{padding:0;font-size:1.02rem;text-align:justify;
  hyphens:none;-webkit-hyphens:none;text-justify:inter-character;max-width:62ch}
.lead-only .split-text p+p{text-indent:1.3em}
@media(max-width:760px){
  .lead-only .split-text{text-align:left;max-width:none}
}

/* врезка-перебивка: курсивная строка и подпись под ней */
.ph-side.solo{grid-template-columns:1fr}
.ph-side.solo .ph-left{padding-right:0}
.strap{border-top:1px solid var(--rule);border-bottom:3px double var(--rule);
  margin-top:26px;padding:20px 0 22px;
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px;align-items:end}
.strap .deck{font-family:var(--display);font-style:italic;color:var(--ink);
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.3;max-width:none;margin-top:0}
.strap .byline{margin-top:0}
@media(max-width:760px){
  .strap{grid-template-columns:1fr;gap:12px;margin-top:20px;padding:16px 0 18px}
}

/* «Наприклад» — заголовок примера внутри блока */
.ex-lbl{font-family:var(--narrow);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);margin-top:24px;padding-top:13px;border-top:1px solid var(--hair)}
.ex-lbl+.cols{padding-top:12px}

/* кадр, который показываем только в мобильной версии — внутри свёрнутого текста */
.only-mob{display:none}
@media(max-width:760px){
  .only-mob{display:block}
  .mfold-fig{margin-top:18px;border-top:1px solid var(--hair);padding-top:14px}
  .mfold-fig img{width:100%}
  .mfold-fig figcaption{font-family:var(--narrow);font-size:.84rem;line-height:1.4;
    letter-spacing:.04em;color:var(--ink-3);margin-top:9px}
}

/* линия под врезкой не должна дублироваться линейкой следующей рубрики */
@media(max-width:760px){
  .strap+.sec>.rule:first-child,
  .rubnav+.sec>.rule:first-child{display:none}
  .strap{margin-bottom:6px}
}

/* афиша в архиве: миниатюра в пятую часть полосы, текст рядом */
.parch{display:grid;grid-template-columns:minmax(0,225px) minmax(0,1fr);gap:28px;
  align-items:start;margin-top:26px;padding-top:22px;border-top:1px solid var(--hair)}
.parch>img{width:100%;display:block;border:1px solid var(--hair)}
.parch .kicker{margin-bottom:8px}
.parch-title{font-family:var(--display);font-weight:700;font-size:1.3rem;line-height:1.18;
  margin-bottom:10px}
.parch p{font-size:1rem;color:var(--ink-2);max-width:52ch}
.parch-note{font-family:var(--narrow);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin-top:12px}
@media(max-width:760px){
  .parch{grid-template-columns:110px minmax(0,1fr);gap:16px;margin-top:20px;padding-top:16px}
  .parch-title{font-size:1.08rem}
  .parch p{font-size:.95rem}
}

/* «Публічна діяльність»: заголовок и афиша в одной полосе */
.phead-poster{display:grid;grid-template-columns:minmax(0,1fr) 225px;gap:38px;align-items:end}
.phead-poster>div{min-width:0}
.phead-poster .sec-title{font-size:clamp(2.3rem,4.4vw,3.5rem);line-height:1.04;max-width:13ch}
.phead-poster .sec-deck{max-width:46ch}
.phead-fig{margin:0}
.phead-fig img{width:100%;display:block;border:1px solid var(--hair)}
.phead-fig figcaption{font-family:var(--narrow);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-top:8px;line-height:1.4}
@media(max-width:960px){
  .phead-poster{grid-template-columns:minmax(0,1fr) 180px;gap:26px}
}
@media(max-width:760px){
  .phead-poster{grid-template-columns:1fr}
  .phead-fig{display:none}
}

/* афиша как обложка: кадр целиком, заголовок под ним */
@media(max-width:760px){
  .mcover.wide.talk .mcover-txt{padding:16px 0 6px}
  .mcover.wide.talk .kicker{color:var(--red)}
  .mcover.wide.talk .mc-h{color:var(--ink);font-size:2.05rem;line-height:1.06;max-width:11ch}
}

/* «Про мене»: кадр не розтягуємо під висоту тексту — показуємо цілком, як на телефоні */
.about{align-items:start}
.about-photo img{height:auto;flex:none;object-fit:cover;object-position:center}
.about-photo{position:sticky;top:22px}

/* «Про мене» без фотографії: таблиця фактів ліворуч, біографія праворуч */
.about.no-photo{grid-template-columns:1fr;gap:0}
/* линейка ровно посередине блока, поля слева и справа от неё равные */
.about.no-photo .about-text{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:start}
.about.no-photo .facts-wrap{padding-right:38px}
.about.no-photo .facts{width:100%;margin:0}
.about.no-photo .bio{margin-top:0;padding-left:38px;border-left:1px solid var(--hair)}
@media(max-width:760px){
  .about.no-photo .about-text{grid-template-columns:1fr}
  .about.no-photo .facts-wrap{padding-right:0}
  .about.no-photo .bio{padding-left:0;border-left:0;margin-top:20px}
}

/* биография: воздуха между абзацами больше, чтобы колонка сравнялась с таблицей */
.about.no-photo .bio p{margin-bottom:1.75em}
.about.no-photo .bio p:last-child{margin-bottom:0}
.about.no-photo .bio b{font-weight:700;color:var(--ink)}

/* первые строки колонок должны совпадать: слева над текстом линейка (1 px) и отступ ячейки (17 px) */
.about.no-photo .bio{padding-top:18px}
@media(max-width:760px){
  .about.no-photo .bio{padding-top:0}
}

/* лид блока на узких экранах — чуть меньше, но не мельче основного текста */
@media(max-width:760px){
  .sec-deck{font-size:1.08rem}
}

/* первый экран консультации — по левому краю, как на остальных страницах */
.pagehead.ph-center{text-align:left;max-width:none;margin:0}
.pagehead.ph-center .headline{margin:0;max-width:none}
.pagehead.ph-center .deck{margin:18px 0 0;max-width:54ch}
.pagehead.ph-center .ph-note{text-align:left}

/* заголовок «Публічної діяльності» — як на «Думках» */
#public>.sec-title{font-size:clamp(2.1rem,4.8vw,3.6rem);line-height:1.06;letter-spacing:-.015em;
  margin:8px 0 10px}

/* один ритм перших екранів: голова → 26 px → колонки, верх тексту і картинки на одній лінії */
@media(min-width:761px){
  .sec .split.flip.wide{align-items:start;margin-top:26px}
  .sec .split.flip.wide .split-text{justify-content:flex-start}
  .sec .split.flip.wide .split-photo img{height:auto;flex:none;object-fit:cover}
  .mfirst{row-gap:26px}
}

/* кадр у першому розвороті ховаємо не тільки на телефоні, а й на вузькому екрані */
@media(max-width:900px){
  /* правило .split.flip.wide .split-photo сильніше за клас, тому селектор теж посилюємо */
  .mcover-dup,.split.flip.wide .split-photo.mcover-dup{display:none}
}
/* перший блок після плаката: та сама відбивка, що на «Методі» */
@media(min-width:761px){
  .ph-banner{padding-bottom:0}
  .ph-banner + .sec{padding-top:0}
}

/* кнопка ніде не розтягується: у флекс-колонці вона отримувала всю ширину */
@media(max-width:760px){
  .mfold-btn{align-self:flex-start;width:max-content;white-space:nowrap}
}

/* жодних переносів — ні на якій ширині екрана */
*,*::before,*::after{-webkit-hyphens:none;hyphens:none}
/* кнопка на першому екрані: та сама відбивка, що й у наступних блоках */
@media(max-width:760px){
  .ph-banner + .sec{padding-top:0}
  .lead-only .mfold-btn{margin-top:14px}
}

/* жодних переносів у словах — ні в тексті, ні в заголовках, на будь-якій ширині */
html,body{hyphens:none;-webkit-hyphens:none}
.headline,.sec-title,.mc-h,.hammer,.duo-title,.wordmark,.deck,.sec-deck,
.cols,.split-text,.bio,.mfirst-text,.story p,.duo-part>p,.front-text .body,.teaser,.pull{
  hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:normal}
/* службовий клас: тримає слова разом */
.nb{white-space:nowrap}

/* кнопка «Читати далі» на першому екрані стоїть у потоці, як і на решті блоків */
@media(max-width:760px){
  .split.flip.wide .split-text{justify-content:flex-start;display:block}
  .split.flip.wide .split-text .mfold-btn{margin:12px 0 2px}
}

/* перший блок на телефоні: та сама відбивка до кнопки, що й у наступних блоках — 34 px */
@media(max-width:760px){
  .ph-banner+.sec{padding-top:0}
  .ph-banner+.sec .split.flip.wide{margin-top:18px}
}

/* живий кадр: залишаємо липкий портрет (position:relative його ламав) */
.front-photo.livev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease}
.front-photo.livev.on>video{opacity:1}
/* тепер ролик працює й на десктопі */

/* маска накладається css-фільтром поверх, а не запікається в кадри:
   підібрано так, щоб ролик і знімок сіли в палітру сайту (розбіжність 0,6 з 255) */
.front-photo.livev img,
.front-photo.livev video{filter:sepia(.08) saturate(.32) contrast(.96)}


/* перша полоса: колонка портрета вужча (1,3 : 1) і портрет липне під меню */
@media(min-width:761px){
  .front{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:start}
  .front-photo{position:sticky;top:64px;align-self:start}
}

/* живий кадр на мобільній обкладинці: ролик під градієнтом, текст поверх */
@media(max-width:760px){
  .mcover.livev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    object-position:center 14%;opacity:0;transition:opacity .45s ease}
  .mcover.livev.on>video{opacity:1}
  .mcover.livev>img,.mcover.livev>video{filter:sepia(.08) saturate(.32) contrast(.96)}
}
@media(min-width:761px){
  .mcover.livev>video{display:none}
}

/* обкладинка головної вища: 2:3 замість 4:5 — кадр іде цілком, текст сідає на піджак.
   Тільки .tall: на інших сторінках обкладинка лишається 4:5 */
@media(max-width:760px){
  .mcover.livev.tall>img,.mcover.livev.tall>video{aspect-ratio:2/3;object-position:center top}
  .mcover.livev>video{height:100%}
}

/* живий кадр у розвороті: ролик поверх знімка, та сама маска фільтром */
.split-photo.livev{position:relative}
.split-photo.livev>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 18%;opacity:0;transition:opacity .45s ease}
.split-photo.livev.on>video{opacity:1}
.split-photo.livev img,.split-photo.livev video{filter:sepia(.08) saturate(.32) contrast(.96)}
@media(prefers-reduced-motion:reduce){
  .split-photo.livev>video{display:none}
}

/* напис окремим шаром поверх кадру: не рухається і не втрачає різкості */
.split-photo.livev .cap-layer{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;filter:none}

/* затемнення під написом: радіальний градієнт від центру тексту до країв */
/* рівна сіра підкладка 15 % під написом: без градієнта, тільки щоб букви читалися */
.split-photo.mcover-dup.livev{isolation:isolate}
/* підкладка строго по кадру: раніше сиділа на фігурі й вилазила на підпис і поля */
.split-photo.mcover-dup.livev .live-box::after{content:"";position:absolute;inset:0;
  pointer-events:none;z-index:1;background:
    radial-gradient(46% 42% at 57% 50%,
      rgba(34,34,34,.143) 0%, rgba(34,34,34,.143) 46%, rgba(34,34,34,0) 100%),
    rgba(34,34,34,.30)}
.split-photo.livev .cap-layer{z-index:2}

/* «Лебідь, рак і щука»: маска в колір газети — білий фон стає паперовим, лінії лишаються */
.mfirst-fig.livev{isolation:isolate}
/* маска по самому кадру: на фігурі вона залазила на підпис і на відбивку */
.mfirst-fig.livev .live-box::after{content:"";position:absolute;inset:0;pointer-events:none;
  z-index:1;background:var(--paper);mix-blend-mode:multiply}
.mfold-fig{position:relative;isolation:isolate}
.mfold-fig::after{content:"";position:absolute;left:0;right:0;top:14px;aspect-ratio:4/3;
  pointer-events:none;background:var(--paper);mix-blend-mode:multiply}

/* жива афіша на обкладинці «Публічної діяльності»: тільки мобільна версія */
@media(max-width:760px){
  .mcover.wide.livev>video{position:absolute;inset:0;width:100%;height:auto;
    opacity:0;transition:opacity .45s ease}
  .mcover.wide.livev.on>video{opacity:1}
  .mcover.wide.livev>img,.mcover.wide.livev>video{filter:sepia(.08) saturate(.32) contrast(.96)}
}
@media(min-width:761px){
  .mcover.wide.livev>video{display:none}
}

/* спільна рамка для знімка й ролика: підпис більше не розтягує відео */
.live-box{position:relative;display:block;overflow:hidden;flex:1;min-height:0}
.live-box>img,.live-box>video{display:block;width:100%;height:100%;object-fit:cover}
.split.match .live-box>img,.split.match .live-box>video{object-position:center 18%}
.split-photo.livev>video,.front-photo.livev>video{position:static}
.live-box>video{position:absolute;inset:0;opacity:0;transition:opacity .45s ease}
.livev.on .live-box>video{opacity:1}
.front-photo.livev .live-box>img,.front-photo.livev .live-box>video{height:auto}
.mfirst-fig.livev .live-box>img,.mfirst-fig.livev .live-box>video{height:auto}
.split-photo.mcover-dup.livev .live-box>img{height:auto}
.live-box>.cap-layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  pointer-events:none;filter:none;z-index:2}

/* маска не повинна чіпати шар напису */
.live-box>.cap-layer{filter:none}

/* напис не висить із самого початку: спершу читається рух (машини, туман),
   і лише потім поволі проявляються літери.
   .armed ставить скрипт — без нього напис видимий завжди */
.livev.armed .cap-layer{opacity:0;transition:opacity .5s ease}
.livev.armed.on .cap-layer{opacity:1;transition:opacity 2.4s cubic-bezier(.4,0,.5,1) 1.1s}


/* ─── живі кадри в мобільній версії ─────────────────────────────────────────── */

/* напис REACH окремим шаром на обкладинці консалтингу */
@media(max-width:760px){
  .mcover.wide.livev>.cap-layer{position:absolute;left:0;top:0;width:100%;height:auto;
    object-fit:contain;pointer-events:none;filter:none;z-index:2}
}

/* «Лебідь, рак і щука» під кнопкою «Читати далі»: ролик поверх знімка,
   паперова маска лишається зверху (::after у .mfold-fig) */
.mfold-fig.livev>video{position:absolute;left:0;top:14px;width:100%;height:auto;
  opacity:0;transition:opacity .45s ease}
.mfold-fig.livev.on>video{opacity:1}
@media(min-width:761px){
  .mfold-fig.livev>video{display:none}
}
@media(prefers-reduced-motion:reduce){
  .mfold-fig.livev>video,.mcover.livev>video{display:none}
}


/* та сама підкладка на мобільній обкладинці консалтингу: без неї білі літери
   тонуть у тумані. Розмір задаємо пропорцією кадру, щоб не залізти на текст нижче */
@media(max-width:760px){
  .mcover.wide.livev.capped{position:relative;isolation:isolate}
  .mcover.wide.livev.capped::after{content:"";position:absolute;left:0;top:0;width:100%;
    aspect-ratio:1280/880;display:block;pointer-events:none;z-index:1;background:
      radial-gradient(46% 42% at 57% 50%,
        rgba(34,34,34,.143) 0%, rgba(34,34,34,.143) 46%, rgba(34,34,34,0) 100%),
      rgba(34,34,34,.30)}
}


/* ─── картки публікацій: рух у протилежні боки ───────────────────────────────
   У спокої знімок притемнений на 30 %, при наведенні фон темніє (як і раніше),
   а сам знімок, навпаки, розкривається на повну. Різниця читається оком. */
.lcard .thumb img,.tcard .thumb img{
  filter:brightness(.7) saturate(.86);
  transition:filter .34s cubic-bezier(.3,0,.4,1);
}
.lcard:hover .thumb img,.tcard:hover .thumb img,
.lcard:focus-visible .thumb img,.tcard:focus-visible .thumb img{
  filter:brightness(1.04) saturate(1.02);
}
@media(hover:none){
  /* на дотик наведення не буває: знімок лишається світлим */
  .lcard .thumb img,.tcard .thumb img{filter:none}
}


/* ─── правки після ревізії перед публікацією ─────────────────────────────────── */

/* 761-900 px: обкладинки вже немає, а дубль кадру ще схований — на консалтингу
   лишалася порожня друга колонка. Зводимо розворот в одну колонку */
@media(max-width:900px){
  .split.flip.wide{grid-template-columns:1fr}
}

/* мобільний лебідь мав інший тон, ніж десктопний: додаємо той самий фільтр */
@media(max-width:760px){
  .mfold-fig.livev img,.mfold-fig.livev video{filter:sepia(.08) saturate(.32) contrast(.96)}
}

/* на дотик наведення немає, тому знімок теж притемнений у спокої, а тон
   розкривається на час натискання — той самий рух, що мишею на десктопі */
@media(hover:none){
  .lcard .thumb img,.tcard .thumb img,.trow .thumb img,
  .lcard:hover .thumb img,.tcard:hover .thumb img,.trow:hover .thumb img{
    filter:brightness(.7) saturate(.86)}
  .lcard:active .thumb img,.tcard:active .thumb img,.trow:active .thumb img{
    filter:brightness(1.06) saturate(1.02);transition-duration:.12s}
}

/* той самий зворотний рух тону в рубрикаторі «Думок»: там 26 рядків зі знімками */
.trow .thumb img{filter:brightness(.7) saturate(.86);
  transition:filter .34s cubic-bezier(.3,0,.4,1)}
.trow:hover .thumb img,.trow:focus-visible .thumb img{filter:brightness(1.04) saturate(1.02)}

/* напис не мигає при завантаженні: коли скрипт живий, шар схований з першого кадру */
.js .livev .cap-layer{opacity:0}
@media(prefers-reduced-motion:reduce){
  .js .livev .cap-layer{opacity:1}
}