/* =========================================================================
   Блог surgay.ru — дизайн «WOM» (вариант H макета surgay-blog-design.surgaygpt.ru)
   Шаблон сайта: /local/templates/surgay_blog/
   ========================================================================= */

/* ---------- Шрифты (self-hosted) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ptserif-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ptserif-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ptserif-400i-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/ptserif-400i-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ptserif-700-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/ptserif-700-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
/* Montserrat (вместо коммерческого Gilroy Heavy в баннерах) */
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("../fonts/montserrat-italic-var.woff2") format("woff2"); }

/* ---------- Токены ---------- */
:root {
  --wom-brand: #ffc800;
  --wom-brand-hover: #e9b700;
  --wom-brand-soft: #fff2b6;
  --wom-brand-pale: #fff6cf;
  --wom-ink: #171717;
  --wom-text: #333333;
  --wom-noise: #909090;
  --wom-line: #ececec;
  --wom-soft: #f5f5f2;
  --wom-link: #161616;
  --wom-radius: 16px;
  --wom-font-ui: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --wom-font-serif: "PT Serif", Georgia, serif;
  --wom-font-banner: "Montserrat", "Arial Black", Arial, sans-serif;
  --wom-header-h: 69px;
}

/* ---------- База ---------- */
.wom, .wom * , .wom *::before, .wom *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.wom {
  margin: 0;
  color: var(--wom-text);
  font-family: var(--wom-font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: #f4f4ef;
  background-image: radial-gradient(rgba(23, 23, 23, .075) 1px, transparent 1px);
  background-size: 22px 22px;
}
.wom a { color: var(--wom-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.wom a:hover { color: var(--wom-ink); }
.wom h1, .wom h2, .wom h3, .wom h4 { font-family: var(--wom-font-ui); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; color: var(--wom-ink); }
.wom img { max-width: 100%; height: auto; }
.wom a:active, .wom button:active { opacity: .85; }
.wom :focus-visible { outline: 2px solid var(--wom-ink); outline-offset: 2px; }

.wom-preview-badge {
  position: relative; z-index: 30;
  background: var(--wom-ink); color: #fff; text-align: center;
  font: 600 13px/1.4 var(--wom-font-ui); padding: 7px 12px;
}
.wom-preview-badge a { color: var(--wom-brand) !important; }

/* Декоративные стикеры по краям (только на очень широких экранах) */
.wom-backdrop { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; display: none; }
.wom-note { position: absolute; width: 160px; padding: 20px; border: 1px solid rgba(23,23,23,.094); border-radius: 10px;
  background: rgba(255,255,255,.6); color: rgba(23,23,23,.196); font: 800 13px/1.5 var(--wom-font-ui); box-shadow: 0 14px 25px rgba(23,23,23,.027); }
.wom-note i { display: block; font: 900 35px/1.5 Arial, sans-serif; letter-spacing: 4px; font-style: normal; }
.wom-note.n1 { left: 20px; top: 180px; transform: rotate(-9deg); }
.wom-note.n2 { right: 12px; top: 520px; transform: rotate(9deg); }
.wom-note.n3 { left: 45px; top: 790px; transform: rotate(5deg); }
@media (min-width: 1701px) { .wom-backdrop { display: block; } }

/* ---------- Шапка ---------- */
.wom-header { position: sticky; top: 0; z-index: 20; background: #fff; border-bottom: 1px solid var(--wom-line); }
.wom-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1320px; margin: 0 auto; padding: 12px 22px; }
.wom-logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; }
.wom-logo__mark { font: italic 900 27px/1 var(--wom-font-banner); color: #151515; background: var(--wom-brand);
  padding: 7px 9px; letter-spacing: -1.5px; }
.wom-logo__mark span { color: #fff; text-shadow: 2px 0 0 #161616; }
.wom-logo__descr { font: 500 10px/1.4 var(--wom-font-ui); color: #555; }
.wom .wom-btn-tg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--wom-brand); color: var(--wom-ink); text-decoration: none;
  font: 500 15px/1.6 var(--wom-font-ui); padding: 9px 16px; border-radius: 24px;
  box-shadow: 0 3px 0 #dcae00; transition: background .15s, box-shadow .15s; }
.wom .wom-btn-tg:hover { background: var(--wom-brand-soft); color: var(--wom-ink); box-shadow: 0 4px 0 #dcae00; }
.wom-btn-tg svg { flex: 0 0 auto; }

/* Полоса рубрик — только когда левое меню скрыто */
.wom-strip { display: none; gap: 18px; overflow-x: auto; white-space: nowrap; scrollbar-width: none;
  padding: 0 16px 10px; -webkit-overflow-scrolling: touch; }
.wom-strip::-webkit-scrollbar { display: none; }
.wom .wom-strip a { flex: 0 0 auto; color: var(--wom-ink); text-decoration: none; font: 500 14.5px/1.5 var(--wom-font-ui);
  padding: 2px 0; border-bottom: 2px solid transparent; }
.wom .wom-strip a.is-on { font-weight: 700; border-bottom-color: var(--wom-brand); }

/* ---------- Сетка ---------- */
.wom-journal { position: relative; z-index: 1; display: grid; grid-template-columns: 236px minmax(0, 760px) 268px;
  gap: 22px; max-width: 1320px; margin: 0 auto; padding: 18px 22px 64px; align-items: start; justify-content: center;
  background: #fff; box-shadow: 0 10px 60px rgba(38, 38, 26, .043); }
.wom-journal > * { min-width: 0; }
.wom-main { min-width: 0; }

.wom-card { background: #fff; border: 1px solid var(--wom-line); border-radius: var(--wom-radius); padding: 18px; max-width: 100%; overflow-wrap: anywhere; }
.wom-card h4 { margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--wom-line); font-size: 15px; font-weight: 600; color: var(--wom-text); letter-spacing: 0; line-height: 1.6; }

/* ---------- Левое меню ---------- */
.wom-sidenav { position: sticky; top: calc(var(--wom-header-h) + 7px); padding-bottom: 24px; }
.wom .wom-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--wom-ink);
  text-decoration: none; font-size: 15px; line-height: 1.3; margin-bottom: 2px; }
.wom .wom-nav-item:hover { background: var(--wom-soft); color: var(--wom-ink); }
.wom .wom-nav-item.is-on { background: var(--wom-brand-soft); font-weight: 600; }
.wom-nav-item i { font-style: normal; font-size: 16px; width: 22px; text-align: center; flex: 0 0 auto; }
.wom-nav-item span { flex: 1 1 auto; min-width: 0; }
.wom-nav-item small { font-size: 12px; color: var(--wom-noise); font-weight: 500; }
.wom-nav-sep { height: 1px; background: var(--wom-line); margin: 14px 10px; }
.wom-nav-grp { margin: 0 0 8px 12px; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--wom-noise); }
.wom-nav-foot { margin-top: 20px; padding: 0 12px; display: grid; gap: 7px; }
.wom .wom-nav-foot a { color: var(--wom-noise); font-size: 13.5px; text-decoration: none; }
.wom .wom-nav-foot a:hover { color: var(--wom-ink); }

/* ---------- Правая колонка ---------- */
.wom-aside { position: sticky; top: calc(var(--wom-header-h) + 7px); display: grid; gap: 16px; min-width: 0; }

.wom-offer-image { display: block; border: 1px solid var(--wom-line); border-radius: var(--wom-radius); overflow: hidden; text-decoration: none !important;
  transition: transform .16s, box-shadow .16s; }
.wom-offer-image:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }

.wom-top7__list { display: block; }
.wom .wom-t7 { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid var(--wom-line); text-decoration: none; color: var(--wom-ink); }
.wom-t7:last-child { border-bottom: 0; padding-bottom: 0; }
.wom-t7__n { width: 20px; flex: 0 0 auto; text-align: center; font-size: 15px; font-weight: 700; color: #edebeb; line-height: 1.35; }
.wom-t7:first-child .wom-t7__n { color: var(--wom-ink); }
.wom-t7__tx b { display: block; font-size: 14px; line-height: 1.35; font-weight: 500; margin-bottom: 4px; }
.wom-t7:hover .wom-t7__tx b { text-decoration: underline; text-underline-offset: 3px; }
.wom-t7__m { display: block; font-size: 12px; color: var(--wom-noise); }

.wom-author-card .wom-portrait { display: block; margin-bottom: 8px; }
.wom-author-card__role { font-size: 13px; color: var(--wom-noise); }
.wom-author-card b { display: block; font-size: 18px; margin: 3px 0 7px; }
.wom .wom-author-card b a { color: var(--wom-ink); text-decoration: none; }
.wom-author-card p { margin: 0; font-size: 14px; line-height: 1.45; }

.wom-toc ol { list-style: none; margin: 0; padding: 0; max-height: 52vh; overflow-y: auto; }
.wom-toc li { margin: 0; }
.wom .wom-toc a { display: block; font-size: 14px; line-height: 1.4; color: var(--wom-text); text-decoration: none;
  padding: 8px 0 8px 12px; border-left: 2px solid transparent; }
.wom .wom-toc a:hover { color: var(--wom-ink); }
.wom .wom-toc a.is-active { border-left-color: var(--wom-brand); color: var(--wom-ink); font-weight: 600; }

/* ---------- Фото-стикеры ---------- */
.wom-person { display: block; object-fit: contain; object-position: center bottom; }
.wom-portrait { width: 90px; height: 120px; object-fit: cover; object-position: center top; background: var(--wom-brand); flex: 0 0 auto; }

/* ---------- Жёлтые баннеры: общее ---------- */
.wom-hero, .wom-cover, .wom-wide, .wom-replica {
  position: relative; overflow: hidden; color: var(--wom-ink);
  background-color: var(--wom-brand);
  background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,.533), transparent 48%),
                    linear-gradient(115deg, transparent 66%, rgba(234,184,0,.4) 66%, transparent 87%);
}
.wom-hero small, .wom-cover small, .wom-wide small, .wom-replica small {
  display: block; position: relative; z-index: 1; font: 700 10px/1.4 var(--wom-font-ui); letter-spacing: 1.5px; text-transform: uppercase; }
.wom-hero h1, .wom-cover b, .wom-wide__copy > b, .wom-replica b {
  position: relative; z-index: 1; display: block; text-transform: uppercase; font-family: var(--wom-font-banner);
  font-weight: 900; font-style: italic; letter-spacing: 0; line-height: 1.16; color: var(--wom-ink);
  transform: rotate(-4.1deg); transform-origin: left center; font-synthesis: none; }
.wom-hero h1 em, .wom-cover em, .wom-wide em, .wom-replica em {
  font: inherit; font-style: italic; background: #111; color: var(--wom-brand); padding: 2px 7px 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wom-mark-float { position: absolute; z-index: 0; pointer-events: none; user-select: none; color: #fff; font: 900 65px/1 Arial, sans-serif; }
.wom-mark-float.m1 { right: 22px; top: 16px; transform: rotate(-20deg); }
.wom-mark-float.m2 { right: 120px; bottom: 12px; transform: rotate(16deg); }
.wom-mark-float.m3 { left: 16px; bottom: 7px; transform: rotate(-14deg); opacity: .35; }
.wom-meme { position: absolute; z-index: 2; right: 16px; bottom: 10px; font: 700 10px/1.4 var(--wom-font-ui); background: #fff; color: var(--wom-ink);
  padding: 7px 9px; transform: rotate(-3deg); }

/* Кнопки-пилюли на жёлтом */
.wom .wom-primary, .wom-wide strong, .wom-replica strong {
  position: relative; z-index: 3; display: inline-block; background: #fff; color: var(--wom-ink); text-decoration: none;
  border: 1px solid #fff; border-radius: 24px; box-shadow: 0 3px 0 #dcae00; font: 700 12px/1.4 var(--wom-font-ui); padding: 10px 16px;
  transition: background .15s, box-shadow .15s; }
.wom .wom-primary:hover, .wom-wide-offer:hover .wom-wide strong, .wom-offer-image:hover .wom-replica strong {
  background: var(--wom-brand-soft); color: var(--wom-ink); box-shadow: 0 4px 0 #dcae00; }

/* ---------- Hero ---------- */
.wom-hero { height: 240px; padding: 20px 24px; border: 0; border-radius: 16px; margin-bottom: 16px; }
.wom-hero__copy { position: relative; z-index: 1; max-width: 460px; }
.wom-hero h1 { max-width: 450px; font-size: 29px; line-height: 1.12; margin: 16px 0 14px; word-spacing: 1px; }
.wom-hero h1 br:first-of-type { display: none; }
.wom-hero p { max-width: 370px; font: 12px/1.4 var(--wom-font-ui); color: #262626; margin: 10px 0; }
.wom-hero .wom-mark-float.m1 { right: 14px; top: 6px; }
.wom-hero .wom-mark-float.m2 { right: 175px; bottom: 20px; }
.wom-hero .wom-mark-float.m3 { opacity: .16; }
.wom-hero__person { position: absolute; z-index: 0; width: 165px; right: 0; bottom: 0; }

/* ---------- «Что нового» / «Популярное» ---------- */
.wom-news { padding: 18px 22px 8px; margin-bottom: 16px; }
.wom-news__head { display: flex; align-items: center; margin-bottom: 14px; }
.wom-news__head b { font-size: 15px; color: var(--wom-ink); }
.wom .wom-news__head a { margin-left: auto; font-size: 14px; color: var(--wom-link); text-decoration: none; }
.wom .wom-news__head a:hover { text-decoration: underline; }
.wom-news__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 30px; }
.wom .wom-news__item { display: block; padding: 12px 0 14px; text-decoration: none; color: var(--wom-ink); border-bottom: 1px solid var(--wom-line); }
.wom-news__item:hover .wom-news__t { text-decoration: underline; text-underline-offset: 3px; }
.wom-news__d { display: block; font-size: 13px; color: var(--wom-noise); margin-bottom: 6px; }
.wom-news__t { display: block; font-size: 16px; line-height: 1.35; font-weight: 500; margin-bottom: 8px; }
.wom-news__m { font-size: 13px; color: var(--wom-noise); }

.wom-notes { padding: 18px 22px; margin: 16px 0; }
.wom-notes ul { list-style: none; margin: 0; padding: 0; }
.wom-notes li + li { border-top: 1px solid var(--wom-line); }
.wom .wom-notes a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; text-decoration: none; color: var(--wom-ink); }
.wom-notes a:hover .wom-notes__t { text-decoration: underline; text-underline-offset: 3px; }
.wom-notes__t { font-size: 15.5px; line-height: 1.4; }
.wom-notes__m { margin-left: auto; font-size: 13px; color: var(--wom-noise); white-space: nowrap; }

/* ---------- Заголовок рубрики / страницы ---------- */
.wom-rubric-head { padding: 22px 24px; margin-bottom: 16px; }
.wom-rubric-head__label { margin: 0 0 6px; font-size: 13px; font-weight: 600; color: var(--wom-noise); text-transform: uppercase; letter-spacing: .04em; }
.wom-rubric-head__label i { font-style: normal; }
.wom-rubric-head h1 { margin: 0 0 8px; font-size: 34px; }
.wom-rubric-head__meta { margin: 0; font-size: 14px; color: var(--wom-noise); }

/* ---------- Лента ---------- */
.wom-post { padding: 20px 22px 16px; overflow: hidden; }
.wom-post + .wom-post { margin-top: -1px; }
.wom-post__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; font-size: 14px; font-weight: 500; color: var(--wom-noise); }
.wom-post__rub { display: inline-flex; align-items: center; gap: 7px; color: var(--wom-ink); font-weight: 600; }
.wom-post__rub i { font-style: normal; font-size: 15px; }
.wom .wom-post__rub a { color: var(--wom-ink); text-decoration: none; }
.wom .wom-post__rub a:hover { text-decoration: underline; }
.wom-post__dt { margin-left: auto; }
.wom-post h2 { margin: 0 0 10px; font-size: 25px; line-height: 1.28; letter-spacing: -.01em; }
.wom .wom-post h2 a { color: var(--wom-ink); text-decoration: none; }
.wom .wom-post h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--wom-brand); }
.wom-post__lead { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: var(--wom-text); }
.wom-post__bar { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; font-size: 14px; color: var(--wom-noise); }
.wom-post__views { display: inline-flex; align-items: center; gap: 7px; }
.wom-post__views b { font-weight: 600; }
.wom-post__rt { margin-left: auto; }

/* Обложка первой карточки */
.wom .wom-cover { display: block; min-height: 285px; margin: -20px -22px 22px; padding: 28px 215px 28px 28px;
  border-radius: 15px 15px 0 0; text-decoration: none; color: var(--wom-ink); }
.wom-cover b { font-size: 38px; line-height: 1.08; margin: 20px 0 28px; }
.wom-cover__txt { position: relative; z-index: 1; font: 600 13px/1.5 var(--wom-font-ui); }
.wom-cover .wom-mark-float.m3 { left: auto; right: 50px; bottom: 10px; opacity: 1; }
.wom-cover__person { position: absolute; width: 220px; right: 0; bottom: -12px; transform: rotate(-5deg); }

/* Пагинация */
.wom-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 16px 0; padding: 12px 14px; background: #fff; border: 1px solid var(--wom-line); border-radius: var(--wom-radius); }
.wom-pager__nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wom .wom-pager a, .wom-pager .is-on { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px;
  padding: 0 10px; border-radius: 10px; color: var(--wom-ink); text-decoration: none; font-weight: 600; }
.wom .wom-pager a:hover { background: var(--wom-soft); }
.wom-pager .is-on { background: var(--wom-brand-soft); }
.wom-pager__gap { color: var(--wom-noise); padding: 0 4px; }
.wom .wom-pager__step { border: 1px solid var(--wom-line); }
.wom .wom-pager__step--next { margin-left: auto; }

/* ---------- Баннер в правой колонке ---------- */
.wom-replica { display: flex; flex-direction: column; min-height: 290px; padding: 24px 20px; border-radius: 16px; font-family: var(--wom-font-ui); }
.wom-replica b { font-size: 31px; line-height: 1.08; margin: 20px 0 0; }
.wom-replica__txt { position: relative; z-index: 1; font-size: 12px; line-height: 1.35; margin: 16px 0; }
.wom-replica strong { align-self: flex-start; margin-top: 14px; }
.wom-replica .wom-mark-float.m1 { right: 8px; top: 18px; font-size: 48px; }
.wom-replica .wom-mark-float.m2 { right: 12px; bottom: 60px; font-size: 55px; }

/* ---------- Финальный CTA ---------- */
.wom-lead { margin: 72px 0 0; background: var(--wom-brand); border-radius: 20px; }
.wom-lead__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 36px 40px; }
.wom-lead__txt { max-width: 60ch; }
.wom-lead__when { display: inline-block; background: #1a1a1a; color: #fff; border-radius: 7px; padding: 4px 10px; font-size: 13px; font-weight: 600; margin-bottom: 12px; }
.wom-lead h2 { margin: 0 0 8px; font-size: 30px; }
.wom-lead p { margin: 0; color: #1a1a1a; font-size: 16px; }
.wom-lead__acts { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.wom .wom-lead__all { font-size: 14px; color: #1a1a1a; text-decoration: underline; text-underline-offset: 3px; }

/* Кнопки */
.wom .wom-btn { display: inline-block; font: 600 15px/1.4 var(--wom-font-ui); color: var(--wom-ink); background: var(--wom-brand);
  border: 0; border-radius: 24px; padding: 12px 22px; text-decoration: none; cursor: pointer; box-shadow: 0 3px 0 #dcae00;
  transition: background .15s, box-shadow .15s; }
.wom .wom-btn:hover { background: var(--wom-brand-soft); color: var(--wom-ink); box-shadow: 0 4px 0 #dcae00; }
/* Исправление макета: тёмная кнопка на жёлтом фоне (в макете сливалась с фоном) */
.wom .wom-btn--dark { background: var(--wom-ink); color: #fff; font-size: 17px; padding: 16px 32px; white-space: nowrap; box-shadow: 0 3px 0 #000; }
.wom .wom-btn--dark:hover { background: #2a2a2a; color: #fff; box-shadow: 0 4px 0 #000; }

/* ---------- Статья ---------- */
.wom-art { padding: 26px 30px 24px; }
.wom-art__head { padding: 0 0 8px; }
.wom-art__meta { margin: 0; font: 500 13px/1.6 var(--wom-font-ui); color: var(--wom-noise); }
.wom .wom-art__meta a { color: var(--wom-noise); text-decoration: none; }
.wom .wom-art__meta a:hover { color: var(--wom-ink); text-decoration: underline; }
.wom-art__head h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.12; letter-spacing: -.015em; margin: 12px 0 16px; }
.wom-art__lede { font-family: var(--wom-font-serif); font-size: 20px; line-height: 1.55; color: #444; margin: 0 0 10px; }
.wom-byline { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 14px; color: var(--wom-noise); margin: 0 0 8px; }
.wom .wom-byline__name { font-weight: 600; color: var(--wom-ink); text-decoration: none; border-bottom: 1px solid var(--wom-line); }
.wom .wom-byline__name:hover { border-color: currentColor; }
.wom-art__stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 14px 0 0; padding-bottom: 16px; border-bottom: 1px solid var(--wom-line);
  font-size: 14px; color: var(--wom-noise); }
.wom-art__stats span { display: inline-flex; align-items: center; gap: 6px; }

/* Карточка-оффер для планшетов/телефонов */
.wom-offer-inline { display: none; background: var(--wom-brand); border-radius: var(--wom-radius); padding: 18px; margin: 22px 0 4px; }
.wom-offer-inline__tag { display: inline-block; justify-self: start; background: #1a1a1a; color: #fff; border-radius: 6px; padding: 3px 8px; font-size: 12px; font-weight: 600; }
.wom-offer-inline__ttl { display: block; color: var(--wom-ink); font-size: 19px; font-weight: 800; line-height: 1.15; letter-spacing: -.015em; margin: 10px 0 7px; }
.wom-offer-inline__txt { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: #1a1a1a; }
/* Исправление макета: кнопка тёмная (в макете сливалась с жёлтым фоном) */
.wom .wom-offer-inline__go { display: block; text-align: center; background: var(--wom-ink); color: #fff; border-radius: 10px; padding: 12px; font-weight: 600; text-decoration: none; }
.wom .wom-offer-inline__go:hover { background: #2a2a2a; color: #fff; }

/* Текст статьи */
.wom-prose { font-family: var(--wom-font-serif); font-size: 19px; line-height: 1.65; color: #222; }
.wom-prose > *:first-child { margin-top: 24px; }
.wom-prose p { margin: 0 0 1em; }
.wom-prose h2 { font-family: var(--wom-font-ui); font-size: 28px; margin: 1.9em 0 .55em; scroll-margin-top: calc(var(--wom-header-h) + 16px); }
.wom-prose h3 { font-family: var(--wom-font-ui); font-size: 22px; font-weight: 700; margin: 1.5em 0 .5em; scroll-margin-top: calc(var(--wom-header-h) + 16px); }
.wom-prose ul, .wom-prose ol { margin: 0 0 1em; padding-left: 1.4em; }
.wom-prose li { margin: .4em 0; }
.wom-prose li > p { margin: 0; }
.wom-prose a { color: var(--wom-ink); text-decoration: underline; text-decoration-color: var(--wom-brand); text-decoration-thickness: 2px; }
.wom-prose a:hover { background: var(--wom-brand-pale); }
.wom-prose b, .wom-prose strong { color: var(--wom-ink); }
.wom-prose img { display: block; border-radius: 12px; margin: 0 auto; }
.wom-prose figure { margin: 1.6em 0; }
.wom-prose iframe { max-width: 100%; border: 0; border-radius: 12px; }
.wom-prose pre { color: #252525; background: var(--wom-soft); padding: 20px 22px; border-radius: 10px; overflow-x: auto;
  font: 14px/1.65 "SF Mono", Menlo, Consolas, ui-monospace, monospace; white-space: pre-wrap; }
.wom-prose code { font: .85em "SF Mono", Menlo, Consolas, ui-monospace, monospace; background: var(--wom-soft); padding: .1em .35em; border-radius: 5px; }
.wom-prose hr { border: 0; border-top: 1px solid var(--wom-line); margin: 2em 0; }

/* Маркированные и нумерованные списки старой разметки */
.wom-prose ul.circle-list { list-style: none; padding-left: 0; }
.wom-prose ul.circle-list > li { position: relative; padding-left: 1.4em; }
.wom-prose ul.circle-list > li::before { content: ""; position: absolute; left: .2em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--wom-brand); }
.wom-prose ol.num-list { list-style: none; padding-left: 0; counter-reset: wom-num; }
.wom-prose ol.num-list > li { position: relative; padding-left: 2.4em; counter-increment: wom-num; }
.wom-prose ol.num-list > li::before { content: counter(wom-num); position: absolute; left: 0; top: .15em; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--wom-brand); color: var(--wom-ink); font: 700 14px/1.6em var(--wom-font-ui); text-align: center; }

/* Рамки старой разметки → блоки макета */
.wom-prose .red-border, .wom-prose .gray-border, .wom-prose .line-border, .wom-prose blockquote, .wom-prose .shadow-border {
  position: relative; margin: 1.8em 0; padding: 18px 24px 16px; font-size: 16.5px; line-height: 1.6; }
.wom-prose .red-border, .wom-prose .gray-border, .wom-prose .line-border, .wom-prose blockquote {
  background: var(--wom-soft); border-left: 3px solid var(--wom-brand); border-radius: 0 14px 14px 0; }
.wom-prose .red-border::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 40px;
  margin-bottom: 8px; background: var(--wom-brand); color: var(--wom-ink); font: 900 32px/1 Arial, sans-serif; transform: rotate(-8deg); }
.wom-prose .shadow-border { background: #fff; border: 1px solid var(--wom-line); border-radius: 14px; box-shadow: 0 8px 24px rgba(23,23,23,.06); }
.wom-prose .red-border p, .wom-prose .gray-border p, .wom-prose .line-border p, .wom-prose blockquote p, .wom-prose .shadow-border p { margin: .4em 0 0; }
.wom-prose .red-border p:first-of-type, .wom-prose .gray-border p:first-of-type, .wom-prose .line-border p:first-of-type,
.wom-prose blockquote p:first-of-type, .wom-prose .shadow-border p:first-of-type { margin-top: 0; }
.wom-prose blockquote { font-style: italic; }

/* Картинка с подписью */
.wom-prose .img-caption { margin: 1.6em 0; }
.wom-prose .img-caption__top { display: none; }
.wom-prose .img-caption p { margin: 10px 0 0; font: 14px/1.5 var(--wom-font-ui); color: var(--wom-noise); text-align: center; }

/* Таблицы */
.wom-prose .table-container { margin: 1.6em 0; overflow-x: auto; border: 1px solid var(--wom-line); border-radius: 12px; }
.wom-prose table { width: 100% !important; border-collapse: collapse; font: 15px/1.5 var(--wom-font-ui); }
.wom-prose > table { display: block; overflow-x: auto; margin: 1.6em 0; }
.wom-prose th, .wom-prose td { padding: 10px 14px; border-bottom: 1px solid var(--wom-line); text-align: left; vertical-align: top; }
.wom-prose th { background: var(--wom-soft); color: var(--wom-ink); font-weight: 600; }
.wom-prose tr:last-child td { border-bottom: 0; }
.wom-prose td p, .wom-prose th p { margin: 0; }

/* Встроенное оглавление статьи («Из этого материала вы узнаете») */
.wom-prose .article-link { margin: 1.6em 0; padding: 20px 24px; background: var(--wom-soft); border-radius: 14px; font-family: var(--wom-font-ui); }
.wom-prose .article-link__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--wom-ink); }
.wom-prose .article-link__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.wom-prose .article-link__list li { margin: 0; padding: 5px 0; font-size: 15px; line-height: 1.4; break-inside: avoid; }
.wom-prose .article-link__list a { display: block; text-decoration: none; color: var(--wom-text); }
.wom-prose .article-link__list a:hover { background: none; color: var(--wom-ink); text-decoration: underline; text-decoration-color: var(--wom-brand); }

/* FAQ старой разметки (blog_faq + schema.org) */
.wom-prose .blog_faq { margin: 48px 0 0; font-family: var(--wom-font-ui); }
.wom-prose .blog_faq > h3, .wom-prose .blog_faq > h2 { font-size: 26px; font-weight: 800; margin: 0 0 16px; }
.wom-prose .blog_faq [itemprop="mainEntity"] { background: var(--wom-soft); border-radius: 12px; padding: 14px 18px; margin: 10px 0; }
.wom-prose .blog_faq-toogle { position: relative; display: block; padding-left: 20px; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--wom-ink); cursor: pointer; }
.wom-prose .blog_faq-toogle::before { content: ""; position: absolute; left: 2px; top: .45em; border: 5px solid transparent; border-left: 7px solid var(--wom-ink);
  transition: transform .15s; transform-origin: 3px 5px; }
.wom-prose .blog_faq-toogle.is-open::before { transform: rotate(90deg); }
.wom-prose .blog_faq-arrow { display: none !important; }
.wom-prose .blog_faq-text { padding-top: 8px; font-size: 15.5px; line-height: 1.55; }
.wom-prose .blog_faq-text p { margin: 0 0 .5em; }

/* Врезки внутри статьи */
.wom-cta-inline { font-family: var(--wom-font-ui); margin: 2.2em 0; padding: 26px 28px; background: var(--wom-brand-pale);
  border-left: 4px solid var(--wom-brand); border-radius: var(--wom-radius); }
.wom-cta-inline p { margin: 0 0 14px; font-size: 16px; line-height: 1.5; color: var(--wom-text); }
.wom-cta-inline ul { margin: 0 0 14px; padding-left: 1.2em; font-size: 15.5px; line-height: 1.5; }
.wom-cta-inline strong { color: var(--wom-ink); }
.wom .wom-cta-inline .wom-btn { font-size: 14px; padding: 10px 18px; text-decoration: none; background: var(--wom-brand); }
.wom .wom-cta-inline .wom-btn:hover { background: var(--wom-brand-soft); }

.wom-wide-offer { display: block; width: 100%; margin: 30px 0; border-radius: var(--wom-radius); overflow: hidden; text-decoration: none !important;
  transition: transform .16s, box-shadow .16s; font-family: var(--wom-font-ui); }
.wom-prose .wom-wide-offer:hover { background: none; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.wom-wide { position: relative; display: flex; align-items: center; min-height: 350px; padding: 32px 215px 32px 32px; border-radius: 14px; }
.wom-wide__copy { position: relative; z-index: 1; flex: 1 1 0%; }
.wom-wide__copy > b { font-size: 29px; line-height: 1.1; margin: 20px 0 25px; }
.wom-wide__copy > span { display: block; font: 14px/1.5 var(--wom-font-ui); color: var(--wom-ink); }
.wom-wide strong { margin-top: 22px; }
.wom-wide__person { position: absolute; width: 225px; right: -10px; bottom: 0; }
.wom-wide .wom-meme { font-size: 8px; max-width: 175px; }

.wom .wom-rlink { display: flex; align-items: center; gap: 16px; margin: 1.8em 0; padding: 14px; background: #fff; border: 1px solid var(--wom-line);
  border-radius: 14px; text-decoration: none; font-family: var(--wom-font-ui); transition: border-color .15s, box-shadow .15s; }
.wom .wom-prose .wom-rlink:hover { background: #fff; border-color: var(--wom-brand); box-shadow: 0 6px 18px rgba(23,23,23,.06); }
.wom-rlink__img { flex: 0 0 120px; }
.wom-rlink__img img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 10px; margin: 0; }
.wom-rlink__body { flex: 1 1 auto; min-width: 0; }
.wom-rlink__label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wom-noise); margin-bottom: 4px; }
.wom-rlink__name { display: block; font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--wom-ink); }
.wom-rlink__go { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: var(--wom-brand); color: var(--wom-ink);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }

/* Блок об авторе и комментарии */
.wom-author-box { margin-top: 48px; padding: 22px 26px; background: var(--wom-soft); border-radius: var(--wom-radius); }
.wom-author-box__name { font-weight: 700; color: var(--wom-ink); margin: 0 0 6px; }
.wom .wom-author-box__name a { color: var(--wom-ink); }
.wom-author-box__bio { margin: 0; font-size: 14.5px; color: #555; }
.wom .wom-author-box__tg { display: inline-block; margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--wom-ink);
  text-decoration: none; border-bottom: 2px solid var(--wom-brand); padding-bottom: 2px; }
.wom-comments { margin-top: 40px; }
.wom-comments h2 { font-size: 26px; margin: 0 0 16px; }

/* ---------- Подвал ---------- */
.wom-footer { position: relative; z-index: 1; margin-top: 88px; border-top: 1px solid var(--wom-line); padding: 36px 0 28px; background: var(--wom-soft); }
.wom-footer__cols, .wom-footer__bottom { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.wom-footer__cols { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wom-footer__title { font-weight: 800; color: var(--wom-ink); margin: 0 0 4px; }
.wom-footer__meta { margin: 0; font-size: 13px; font-weight: 500; color: var(--wom-noise); }
.wom .wom-footer__meta a { color: var(--wom-noise); }
.wom-footer__links { display: flex; flex-direction: column; gap: 8px; }
.wom .wom-footer__links a { color: var(--wom-ink); font-size: 15px; text-decoration: none; }
.wom .wom-footer__links a:hover { text-decoration: underline; }
.wom-footer__bottom { margin-top: 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- Наверх ---------- */
.wom-scrolltop { position: fixed; right: 20px; bottom: 20px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--wom-brand); color: var(--wom-ink); box-shadow: 0 3px 0 #dcae00, 0 8px 20px rgba(0,0,0,.12); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.wom-scrolltop.is-visible { opacity: 1; visibility: visible; }
.wom-scrolltop:hover { background: var(--wom-brand-soft); }

/* ---------- Cookie ---------- */
.wom-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 999999; background: #17181e; color: #fff; padding: 20px; font-size: 18px; line-height: 1.35; }
.wom-cookie__inner { max-width: 1200px; margin: 0 auto; display: flex; gap: 40px; align-items: center; justify-content: space-between; }
.wom .wom-cookie a { color: #fff; text-decoration: underline; }
.wom-cookie__ok { cursor: pointer; flex: 0 0 auto; font: 600 16px/1.35 var(--wom-font-ui); background: #fff; color: #000; border: 0; border-radius: 15px; padding: 9px 17px; }

/* =========================================================================
   Адаптив (брейкпоинты макета: 1280 / 1100 / 700 / 560)
   ========================================================================= */
@media (max-width: 1280px) {
  .wom-journal { grid-template-columns: 236px minmax(0, 1fr); }
  .wom-aside { display: none; }
  .wom-offer-inline { display: block; }
}
@media (min-width: 620px) and (max-width: 1280px) {
  .wom-offer-inline { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tag tag" "ttl go" "txt go";
    align-items: center; gap: 0 24px; padding: 22px 24px; }
  .wom-offer-inline__tag { grid-area: tag; }
  .wom-offer-inline__ttl { grid-area: ttl; font-size: 22px; margin-bottom: 4px; }
  .wom-offer-inline__txt { grid-area: txt; margin: 0; }
  .wom .wom-offer-inline__go { grid-area: go; align-self: center; padding: 13px 26px; white-space: nowrap; }
}
@media (max-width: 1100px) {
  .wom-sidenav { display: none; }
  .wom-strip { display: flex; }
  .wom-journal { grid-template-columns: minmax(0, 1fr); padding: 12px 16px 48px; }
  :root { --wom-header-h: 104px; }
}
@media (max-width: 1100px) and (min-width: 701px) {
  .wom-hero__copy { max-width: calc(100% - 125px); }
  .wom-hero h1 { font-size: 24px; }
  .wom-hero h1 br:first-of-type { display: block; }
  .wom-hero__person { width: 140px; }
}
@media (max-width: 700px) {
  .wom-header__bar { padding: 10px 16px; }
  .wom-logo { gap: 8px; }
  .wom-logo__mark { font-size: 23px; }
  .wom-logo__descr { font-size: 9px; max-width: 100px; }
  .wom .wom-btn-tg { font-size: 13px; padding: 8px 12px; gap: 6px; }

  .wom-post { padding: 16px; }
  .wom-post h2 { font-size: 21px; }
  .wom-news { padding: 16px 16px 6px; }
  .wom-news__grid { grid-template-columns: 1fr; gap: 0; }
  .wom-notes { padding: 16px; }
  .wom-rubric-head { padding: 18px 16px; }
  .wom-rubric-head h1 { font-size: 28px; }

  .wom-hero { height: 315px; padding: 20px; }
  .wom-hero__copy { max-width: 100%; }
  .wom-hero h1 { font-size: 25px; margin: 20px 0 18px; }
  .wom-hero h1 br:first-of-type { display: block; }
  .wom-hero small { font-size: 8px; }
  .wom-hero p { max-width: 205px; font-size: 11px; }
  .wom-hero .wom-primary { max-width: 185px; font-size: 11px; padding: 10px 12px; }
  .wom-hero__person { width: 110px; right: -3px; }
  .wom-hero .wom-mark-float.m1 { top: 15px; right: 12px; font-size: 50px; }
  .wom-hero .wom-mark-float.m2 { right: 110px; bottom: 12px; }

  .wom .wom-cover { min-height: 355px; margin: -16px -16px 20px; padding: 24px 20px 150px; }
  .wom-cover b { font-size: 31px; }
  .wom-cover__txt { display: block; max-width: 145px; font-size: 12px; }
  .wom-cover__person { width: 160px; bottom: -20px; }
  .wom-cover .wom-meme { font-size: 8px; }

  .wom-art { padding: 20px 16px; }
  .wom-portrait { width: 60px; height: 80px; }
  .wom-prose .article-link__list { columns: 1; }
  .wom-prose .article-link { padding: 16px 18px; }

  .wom-wide-offer { margin: 24px 0; border-radius: 10px; }
  .wom-wide { min-height: 495px; padding: 24px 22px 175px; align-items: flex-start; }
  .wom-wide__copy > b { font-size: 26px; }
  .wom-wide__person { width: 165px; right: 10px; bottom: -12px; }
  .wom-wide .wom-meme { right: auto; left: 18px; bottom: 85px; width: 130px; }
  .wom-wide .wom-mark-float.m2 { right: 18px; }

  .wom-rlink { gap: 12px; padding: 12px; }
  .wom-rlink__img { flex-basis: 84px; }
  .wom-rlink__img img { width: 84px; height: 60px; }
  .wom-rlink__name { font-size: 15px; }
  .wom-rlink__go { display: none; }

  .wom-pager { padding: 10px; }
  .wom .wom-pager__step { flex: 1 1 auto; }

  .wom-cookie { padding: 15px 20px; font-size: 12px; }
  .wom-cookie__inner { display: block; }
  .wom-cookie__ok { display: block; width: 100%; margin-top: 5px; font-size: 12px; }
  .wom-scrolltop { right: 14px; bottom: 14px; width: 42px; height: 42px; }
}
@media (max-width: 560px) {
  .wom-lead__inner { padding: 26px 22px; }
  .wom-lead h2 { font-size: 25px; }
  .wom-lead__acts { width: 100%; }
  .wom .wom-lead__acts .wom-btn { width: 100%; text-align: center; }
}
@media (max-width: 380px) {
  .wom-logo__descr { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wom *, .wom *::before, .wom *::after { animation: none !important; transition: none !important; }
}
.wom-prose .wom-person { border-radius: 0; margin: 0; }

/* Текст статьи: слова не рвём; таблицы на узких экранах прокручиваются по горизонтали */
.wom-prose { overflow-wrap: break-word; }
.wom-prose .table-container table, .wom-prose > table { min-width: 560px; }
.wom-prose td, .wom-prose th { overflow-wrap: normal; word-break: normal; hyphens: auto; }
.wom-byline span { white-space: nowrap; }

/* ---------- Кейсы (/case/) ---------- */
.wom-rubric-head__text { margin: 0 0 10px; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--wom-text); }
.wom .wom-post__img { display: block; margin: -20px -22px 18px; border-radius: 15px 15px 0 0; overflow: hidden; background: var(--wom-soft); }
.wom-post__img img { display: block; width: 100%; height: auto; aspect-ratio: 760 / 400; object-fit: cover; transition: transform .25s; }
.wom-post__img:hover img { transform: scale(1.02); }
.wom-art__cover { margin: 22px 0 0; }
.wom-art__cover img { display: block; width: 100%; height: auto; max-height: 520px; object-fit: cover; border-radius: 14px; }
.wom-portrait--photo { background: var(--wom-soft); object-position: center; }
.wom-byline .wom-byline__name:not(a) { border-bottom: 0; }
@media (max-width: 700px) {
  .wom .wom-post__img { margin: -16px -16px 16px; }
}