/* Start:/local/assets/blog/blog.css?179257307217213*/
/* ==========================================================================
   Блог — редизайн 21.10.2026. Разметка: local/templates/dveryaninov/include/blog-page.php,
   движение: blog.js (GSAP). Язык новых страниц (главная, коллекция, избранное):
   края как у шапки (до 1440 px, отступ clamp(16px, 3vw, 40px)), заголовок с приглушённой
   второй частью, острые углы, ссылки с подчёркиванием, которое сжимается при наведении.
   Режим — чтение: одна мера строки 68ch, оглавление сбоку, ничего не мигает.
   DESIGN.md: Manrope, текст #1A1A1A, бордовый — только действия и выбранное.

   ГОЧИ общих стилей (css/main.css): [class*="btn"] и [class*="__tab"] скругляют — углы
   заданы явно; классы с display перебивают [hidden].
   ========================================================================== */
.bl {
  --text: #1A1A1A;
  --mute: #6E6862;
  --soft: #8C857D;
  --line: rgba(26, 26, 26, .12);
  --warm: #F7F5F2;
  --stone: #EDE8E1;
  --accent: #8C1F3B;
  --accent-h: #6E1630;
  --pad: clamp(16px, 3vw, 40px);
  --edge: max(var(--pad), calc((100% - 1440px) / 2 + var(--pad)));
  --ease: cubic-bezier(.22, .61, .36, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
  --head-h: var(--dv-header-h, 104px);
  display: block; width: 100%;
  background: #fff; color: var(--text); font-family: Manrope, system-ui, sans-serif; overflow-x: clip;
}
.bl *, .bl *::before, .bl *::after { box-sizing: border-box; }
.bl [hidden] { display: none !important; }
.bl img { display: block; max-width: 100%; }
.bl a { color: inherit; text-decoration: none; }
.bl :where(h1, h2, h3, p, ul, ol, figure) { margin: 0; padding: 0; }
.bl :where(ul, ol) { list-style: none; }
.bl svg { width: 12px; height: 12px; flex: none; }
.bl ::selection { background: rgba(140, 31, 59, .16); color: var(--text); }
.bl :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.bl button, .bl a, .bl img, .bl span, .bl figure { border-radius: 0; }

/* ---------- общие элементы ---------- */
.bl-crumbs { display: flex; flex-wrap: wrap; gap: 10px; padding: 24px var(--edge) 0; font-size: 14px; color: var(--mute); }
.bl-crumbs a { transition: color .2s; }
.bl-crumbs a:hover { color: var(--accent); }
.bl-crumbs [aria-current] { color: var(--text); }

.bl-h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1.05; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.bl-h2 > span:not(.bl-w), .bl-title > span:not(.bl-w) { color: var(--soft); }
/* Слова заголовка для анимации подъёма (blog.js) — маска по строке. */
.bl-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.bl-w__i { display: inline-block; will-change: transform; }

.bl-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; line-height: 1.4; color: var(--mute); font-variant-numeric: tabular-nums; }
.bl-dot { width: 3px; height: 3px; background: currentColor; opacity: .55; }

.bl-link {
  display: inline-flex; align-items: center; gap: 10px; padding-bottom: 6px; font-size: 15px; font-weight: 500; color: var(--text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .5s var(--ease), color .25s;
}
.bl-link:hover { color: var(--accent); background-size: 40% 1px; }
.bl-link svg { transition: transform .35s var(--ease); }
.bl-link:hover svg { transform: translate(2px, -2px); }

.bl-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; padding: 0 26px;
  border: 0; border-radius: 0; background: var(--accent); color: #fff; font: 500 15px/1 Manrope, system-ui, sans-serif; cursor: pointer;
  overflow: hidden; isolation: isolate; transition: color .3s;
}
/* Заливка снизу при наведении — как у кнопок главной и коллекции. */
.bl-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--accent-h); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s var(--out); }
.bl-btn:hover::before { transform: scaleY(1); }
.bl-btn svg { transition: transform .35s var(--ease); }
.bl-btn:hover svg { transform: translate(2px, -2px); }
.bl-btn:active { transform: translateY(1px); }

/* Тема — плашка с тонкой рамкой. Выбранная — бордовой рамкой и текстом (выбранное = акцент). */
.bl-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--line); font-size: 14px; line-height: 1; color: var(--text); white-space: nowrap;
  transition: border-color .25s, color .25s, background-color .25s;
}
.bl-chip sup { position: static; font-size: 11px; color: var(--soft); font-variant-numeric: tabular-nums; transition: color .25s; }
.bl-chip:hover { border-color: var(--text); }
.bl-chip.is-on { border-color: var(--accent); color: var(--accent); }
.bl-chip.is-on sup { color: inherit; }

.bl-tagline { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 14px; font-size: 13px; }
.bl-tagline__a { color: var(--mute); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: color .2s, background-size .4s var(--ease); }
.bl-tagline__a:hover { color: var(--accent); background-size: 100% 1px; }

/* ---------- список: шапка и темы ---------- */
/* Заголовок во всю ширину (рядом с подводкой он сжимался в 3 строки), вторая часть — с новой строки. */
.bl-head { padding: clamp(28px, 3.6vw, 52px) var(--edge) 0; }
.bl-title { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.04; letter-spacing: -.04em; font-weight: 500; }
.bl-title > span:not(.bl-w) { display: block; }
.bl-lead { max-width: 60ch; margin-top: clamp(16px, 1.6vw, 24px); font-size: 17px; line-height: 1.6; color: var(--mute); }
.bl-topics { display: flex; flex-wrap: wrap; gap: 8px; padding: clamp(28px, 3vw, 44px) var(--edge) 0; }
.bl-topics + .bl-grid { margin-top: clamp(36px, 4vw, 60px); }

/* ---------- ведущая статья ---------- */
.bl-feat {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 28px clamp(32px, 4.4vw, 80px);
  margin-top: clamp(36px, 4vw, 60px); padding: 0 var(--edge);
}
.bl-feat__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--stone); }
.bl-feat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--out); }
.bl-feat:hover .bl-feat__media img { transform: scale(1.03); }
.bl-feat__title { margin-top: 16px; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.1; letter-spacing: -.03em; font-weight: 500; text-wrap: balance; }
.bl-feat__title a { transition: color .25s; }
.bl-feat__title a:hover { color: var(--accent); }
.bl-feat__text { max-width: 46ch; margin: 18px 0 28px; font-size: 16px; line-height: 1.6; color: var(--mute); }
.bl-feat .bl-tagline { margin-top: 24px; }

/* ---------- сетка статей ---------- */
.bl-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px) clamp(20px, 2.4vw, 40px);
  padding: 0 var(--edge);
}
.bl-grid_after { margin-top: clamp(64px, 7vw, 112px); padding-top: clamp(40px, 4vw, 64px); background: linear-gradient(var(--line), var(--line)) var(--edge) 0 / calc(100% - 2 * var(--edge)) 1px no-repeat; }
.bl-card { display: flex; flex-direction: column; min-width: 0; }
.bl-card__link { display: flex; flex-direction: column; }
.bl-card__media { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 18px; background: var(--stone); }
.bl-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--out); }
.bl-card__link:hover .bl-card__media img { transform: scale(1.04); }
.bl-card__media_empty { display: grid; place-items: center; color: var(--soft); background: var(--warm); }
.bl-card__door { width: auto !important; height: 46% !important; opacity: .7; transition: transform .8s var(--out); }
.bl-card__link:hover .bl-card__door { transform: scale(1.04); }
.bl-feat__media.bl-card__media_empty .bl-card__door { height: 52% !important; }
.bl-card__title { margin-top: 10px; font-size: clamp(19px, 1.45vw, 22px); line-height: 1.3; letter-spacing: -.015em; font-weight: 500; text-wrap: balance; transition: color .25s; }
.bl-card__link:hover .bl-card__title { color: var(--accent); }
.bl-card__text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--mute);
}

/* ---------- заявка ---------- */
.bl-cta {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; /* заголовок по верхнему краю, вровень с текстом справа (заказчик 21.10) */ gap: 28px clamp(32px, 5vw, 96px);
  margin-top: clamp(96px, 10vw, 160px); padding: clamp(48px, 6vw, 96px) var(--edge); background: var(--stone);
}
.bl-cta__text { max-width: 46ch; font-size: 16px; line-height: 1.6; color: var(--mute); }
.bl-cta__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 28px; }
.bl-empty { padding: 48px var(--edge) 0; color: var(--mute); }
.bl-empty p { max-width: 52ch; margin-bottom: 24px; font-size: 16px; line-height: 1.6; }

/* ---------- статья ---------- */
.bl-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 120; height: 2px; pointer-events: none; }
.bl-progress span { display: block; height: 100%; background: var(--accent, #8C1F3B); transform: scaleX(0); transform-origin: 0 50%; }

.bl_post { --toc: 248px; --col: 720px; --gap: clamp(40px, 5vw, 96px); }
.bp-head { padding: clamp(28px, 3.6vw, 52px) var(--edge) 0; }
.bp-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.bp-head__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-title { max-width: 22ch; margin-top: clamp(20px, 2vw, 28px); font-size: clamp(34px, 4vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 500; text-wrap: balance; }
.bp-lead { max-width: 60ch; margin-top: clamp(18px, 1.8vw, 26px); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: var(--mute); }

.bp-cover { position: relative; overflow: hidden; width: min(calc(var(--toc) + var(--gap) + var(--col)), calc(100% - 2 * var(--edge))); margin: clamp(32px, 4vw, 56px) 0 0 var(--edge); aspect-ratio: 16 / 9; background: var(--stone); }
.bp-cover img { width: 100%; height: 100%; object-fit: cover; }
/* Вертикальная обложка не режется в полосу — стоит в колонке текста в своих пропорциях. */
.bp-cover_tall { width: min(560px, calc(100% - 2 * var(--edge))); margin-left: calc(var(--edge) + var(--toc) + var(--gap)); aspect-ratio: 4 / 5; }

.bp-layout {
  display: grid; grid-template-columns: var(--toc) minmax(0, var(--col)); gap: var(--gap); align-items: start;
  margin-top: clamp(40px, 4.4vw, 72px); padding: 0 var(--edge);
}
.bp-main { grid-column: 2; min-width: 0; }

/* Оглавление: липкое, тонкая направляющая слева заполняется по мере чтения. */
.bp-toc { position: sticky; top: calc(var(--head-h) + 32px); padding-left: 18px; }
.bp-toc__title { margin-bottom: 14px; font-size: 13px; color: var(--mute); }
.bp-toc__list { display: grid; gap: 2px; }
.bp-toc__a { display: block; padding: 6px 0; font-size: 14px; line-height: 1.4; color: var(--mute); transition: color .25s; }
.bp-toc__a:hover { color: var(--text); }
.bp-toc__a.is-on { color: var(--accent); }
.bp-toc__rail { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line); }
.bp-toc__rail span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleY(0); transform-origin: 50% 0; }

/* Тело статьи — HTML из админки: только типографика, без классов. */
.bp-body { font-size: 18px; line-height: 1.7; color: var(--text); }
.bp-body > * + * { margin-top: 1.05em; }
.bp-body h2 { margin-top: 2.2em; font-size: clamp(25px, 2.1vw, 32px); line-height: 1.2; letter-spacing: -.025em; font-weight: 500; text-wrap: balance; scroll-margin-top: calc(var(--head-h) + 24px); }
.bp-body h3 { margin-top: 1.8em; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; font-weight: 600; }
.bp-body h2 + *, .bp-body h3 + * { margin-top: .7em; }
.bp-body > :first-child { margin-top: 0; }
.bp-body strong, .bp-body b { font-weight: 600; }
.bp-body a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(140, 31, 59, .45); transition: color .2s, text-decoration-color .2s; }
.bp-body a:hover { color: var(--accent); text-decoration-color: currentColor; }
.bp-body ul, .bp-body ol { display: grid; gap: .55em; }
.bp-body ul > li { position: relative; padding-left: 28px; }
.bp-body ul > li::before { content: ""; position: absolute; left: 0; top: .85em; width: 14px; height: 1px; background: var(--text); }
.bp-body ol { counter-reset: bp; }
.bp-body ol > li { position: relative; padding-left: 36px; counter-increment: bp; }
.bp-body ol > li::before { content: counter(bp); position: absolute; left: 0; top: 0; min-width: 22px; color: var(--soft); font-variant-numeric: tabular-nums; }
.bp-body img { width: 100%; height: auto; }
.bp-body figure img + figcaption { display: none; }
.bp-body blockquote { margin-left: 0; margin-right: 0; padding: 28px 32px; background: var(--warm); font-size: 20px; line-height: 1.55; }
.bp-body table { width: 100%; border-collapse: collapse; font-size: 16px; }
.bp-body th, .bp-body td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.bp-video { position: relative; aspect-ratio: 16 / 9; margin-bottom: 40px; background: var(--stone); }
.bp-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.bp-topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(48px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line); }
.bp-topics > span { margin-right: 8px; font-size: 13px; color: var(--mute); }

.bp-nav { display: grid; grid-template-columns: 1fr 1fr; margin-top: 28px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bp-nav__a { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px 0; }
.bp-nav__a + .bp-nav__a_next { border-left: 1px solid var(--line); }
.bp-nav__a_next { grid-column: 2; padding: 26px 0 28px 24px; text-align: right; align-items: flex-end; }
.bp-nav__dir { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mute); }
.bp-nav__dir svg { transition: transform .35s var(--ease); }
.bp-nav__a_prev:hover .bp-nav__dir svg { transform: translateX(-3px); }
.bp-nav__a_next:hover .bp-nav__dir svg { transform: translateX(3px); }
.bp-nav__name { font-size: 18px; line-height: 1.35; font-weight: 500; text-wrap: balance; transition: color .25s; }
.bp-nav__a:hover .bp-nav__name { color: var(--accent); }

.bl-more { margin-top: clamp(80px, 9vw, 140px); }
.bl-more .bl-h2 { padding: 0 var(--edge); margin-bottom: clamp(32px, 3.4vw, 52px); }
.bl_post { padding-bottom: clamp(80px, 9vw, 140px); }
.bl_post .bl-cta { margin-top: clamp(80px, 9vw, 140px); }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .bl_post { --toc: 200px; }
  .bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .bl-cta { grid-template-columns: 1fr; align-items: start; }
  .bl-feat { grid-template-columns: 1fr; }
  .bp-layout { grid-template-columns: minmax(0, 1fr); }
  .bp-main { grid-column: 1; }
  .bp-toc { display: none; }
  .bp-cover { width: calc(100% - 2 * var(--edge)); }
  .bp-cover_tall { width: min(560px, calc(100% - 2 * var(--edge))); margin-left: var(--edge); }
}
@media (max-width: 760px) {
  .bl { --pad: 16px; }
  .bl-grid { grid-template-columns: 1fr; gap: 48px; }
  .bl-title { font-size: clamp(34px, 9vw, 44px); }
  .bp-title { font-size: clamp(30px, 8.4vw, 40px); }
  .bp-body { font-size: 17px; }
  .bp-nav { grid-template-columns: 1fr; }
  .bp-nav__a, .bp-nav__a_next { grid-column: 1; padding: 22px 0; text-align: left; align-items: flex-start; }
  .bp-nav__a + .bp-nav__a_next { border-left: 0; border-top: 1px solid var(--line); }
  .bl-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .bl *, .bl *::before { transition: none !important; }
}

/* End */
/* /local/assets/blog/blog.css?179257307217213 */