/* ════════════════════════════════════════════════════════════════
   portal-layout.css
   Sidebar + content layout shared across all portal pages.
   Depends on wardrobe-pages.css for base tokens (--ink, --ivory,
   --muted, --gold, --radius, etc.)
   ════════════════════════════════════════════════════════════════ */

/* ── Layout shell ───────────────────────────────────────────────── */

.portal-wrap {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

/* ── Sidebar ────────────────────────────────────────────────────── */

.sidebar {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  /* overflow выполняется внутри .sidebar-nav, чтобы Studio CTA внизу
     оставался в видимой области (флекс с sticky-bottom). */
  overflow: hidden;
  background: #2b2521;
  color: #f4efe6;
  display: flex;
  flex-direction: column;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  text-decoration: none;
  color: #f4efe6;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Графический знак: либо <img class="brand-mark"> с реальным логотипом,
   либо <span class="brand-mark"> как fallback. */
.sidebar-logo .brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  /* fallback paint если это <span> без картинки */
  background: radial-gradient(circle at 35% 35%, #bd8b2e, #80324d 70%, #111);
  border: 1.5px solid rgba(189,139,46,.4);
  display: block;
}

.sidebar-logo .brand-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.sidebar-logo .brand-name {
  font-family: Georgia, serif;
  font-size: 20px;
  font-weight: 520;
  color: #f4efe6;
  letter-spacing: .01em;
}

.sidebar-logo .brand-tagline {
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #bd8b2e;
  margin-top: 3px;
}

/* ── Sidebar nav ────────────────────────────────────────────────── */

.sidebar-nav {
  flex: 1 1 auto;
  min-height: 0; /* критично для overflow внутри flex */
  overflow-y: auto;
  padding: 4px 0 8px;
  /* override global nav { display: flex } from wardrobe-pages.css */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}

/* Section divider */
.sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 8px 0;
}

/* Top-level section link */
.sidebar-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 16px;
  font-size: 12.5px;
  font-weight: 720;
  color: rgba(244,239,230,.7);
  text-decoration: none;
  letter-spacing: .02em;
  transition: color .15s, background .15s;
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}

.sidebar-section:hover,
.sidebar-section.is-open {
  color: #f4efe6;
  background: rgba(255,255,255,.05);
}

.sidebar-section.is-active {
  color: #bd8b2e;
}

/* Квизы — highlighted entry point */
.sidebar-section.is-primary {
  color: #bd8b2e;
  font-weight: 780;
}

.sidebar-section.is-primary:hover {
  background: rgba(189,139,46,.12);
}

/* Chevron for collapsible sections — компактный hit area, чтобы строки
   с › имели ту же высоту, что и обычные ссылки без шеврона. */
.sidebar-section .chevron {
  margin-left: auto;
  margin-right: -10px;       /* compensate inner padding so visual stays right-aligned */
  font-size: 10px;
  opacity: .5;
  transition: transform .2s;
  /* Touch-friendly hit area: ≥44×44 — Apple HIG минимум для мобильного.
     На десктопе тоже не вредно: чуть проще попасть мышью. */
  padding: 12px 14px;
  min-width: 44px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}

.sidebar-section .chevron:hover {
  background: rgba(255,255,255,.06);
  opacity: .9;
}

.sidebar-section.is-open .chevron {
  transform: rotate(90deg);
  opacity: .8;
}

/* Icon slot — оставлено для совместимости со старыми страницами, скрыто. */
.sidebar-section .s-icon {
  display: none;
}

/* Заголовок раздела sidebar (Библиотека идей / Гид по стилю).
   Большой padding-top отделяет блоки визуально — «между жёлтыми воздух». */
.sidebar-heading {
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(189,139,46,.65);
  padding: 28px 16px 6px;
}
/* Первый heading в sidebar — без верхнего отступа (упирается в blok «Я»). */
.sidebar-nav > .sidebar-heading:first-of-type,
.sidebar-nav > .sidebar-heading:first-child {
  padding-top: 18px;
}

/* Studio CTA — выделенная карточка-кнопка */
.sidebar-studio-cta {
  display: block;
  /* Закреплён внизу sidebar-а — не уходит при прокрутке меню. */
  flex-shrink: 0;
  margin: 8px 12px 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #80324d, #4a1a2e);
  border-radius: 12px;
  color: #f4efe6;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  border: 1px solid rgba(189,139,46,.3);
  /* Небольшая тень над cta — отделяет визуально от прокручивающегося меню. */
  box-shadow: 0 -6px 14px rgba(0,0,0,.18);
}
.sidebar-studio-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(128,50,77,.4);
  text-decoration: none;
}
.sidebar-studio-cta .ssc-eyebrow {
  display: block;
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #bd8b2e;
  margin-bottom: 4px;
}
.sidebar-studio-cta .ssc-title {
  display: block;
  font-family: Georgia, serif;
  font-size: 15px;
  font-weight: 520;
}
.sidebar-studio-cta .ssc-sub {
  display: block;
  font-size: 11.5px;
  color: rgba(244,239,230,.7);
  margin-top: 3px;
  line-height: 1.4;
}
.sidebar-studio-cta .ssc-arrow {
  float: right;
  margin-top: 6px;
  font-size: 18px;
  color: #bd8b2e;
}

/* Sub-items */
.sidebar-sub {
  display: none;
  flex-direction: column;
}

.sidebar-sub.is-open {
  display: flex;
}

.sidebar-sub a {
  display: block;
  padding: 2px 16px 2px 32px;
  font-size: 11.5px;
  color: rgba(244,239,230,.55);
  text-decoration: none;
  transition: color .14s;
  line-height: 1.35;
}

.sidebar-sub a:hover {
  color: #f4efe6;
}

/* Sub-section: expandable item inside .sidebar-sub (3-level support) */
.sidebar-sub-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 16px 2px 32px;
  font-size: 11.5px;
  font-weight: 660;
  color: rgba(244,239,230,.55);
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  line-height: 1.4;
  transition: color .14s, background .14s;
}

.sidebar-sub-section:hover,
.sidebar-sub-section.is-open {
  color: #f4efe6;
  background: rgba(255,255,255,.04);
}

.sidebar-sub-section.is-active {
  color: #bd8b2e;
}

.sidebar-sub-section .chevron {
  margin-left: auto;
  margin-right: -10px;       /* compensate inner padding */
  font-size: 9px;
  opacity: .4;
  transition: transform .2s;
  /* Touch-friendly: тот же стандарт что и у top-level chevron */
  padding: 12px 14px;
  min-width: 44px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 6px;
}

.sidebar-sub-section .chevron:hover {
  background: rgba(255,255,255,.08);
  opacity: .85;
}

.sidebar-sub-section.is-open .chevron {
  transform: rotate(90deg);
  opacity: .7;
}

/* Sub-sub items: 3rd level (e.g. 14 color guides, 13 wardrobe items) */
.sidebar-sub-sub {
  display: none;
  flex-direction: column;
  background: rgba(0,0,0,.18);
}

.sidebar-sub-sub.is-open {
  display: flex;
}

.sidebar-sub-sub a {
  display: block;
  padding: 4px 20px 4px 64px;
  font-size: 11.5px;
  color: rgba(244,239,230,.5);
  text-decoration: none;
  transition: color .14s;
  line-height: 1.4;
}

.sidebar-sub-sub a:hover {
  color: #f4efe6;
}

.sidebar-sub-sub a.is-active {
  color: #bd8b2e;
}

.sidebar-sub a.is-active {
  color: #bd8b2e;
}

/* "скоро" badge */
.soon-badge {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  font-size: 10px;
  font-weight: 680;
  color: rgba(244,239,230,.4);
  letter-spacing: .04em;
  vertical-align: middle;
  white-space: nowrap;
}

/* ── Portal topbar (inside content area) ────────────────────────── */

.portal-topbar {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 40px;
  height: 56px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 10;
}

.portal-topbar .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.portal-topbar .breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}

.portal-topbar .breadcrumb a:hover {
  color: var(--ink);
}

.portal-topbar .breadcrumb-sep {
  opacity: .35;
}

.portal-topbar .topbar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Content area ───────────────────────────────────────────────── */

.portal-content {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

/* ── Portal page sections ───────────────────────────────────────── */

.portal-content {
  --portal-content-width: min(1120px, calc(100% - clamp(64px, 12.5vw, 176px)));
}

.portal-hero {
  padding: 56px 0 48px;
  border-bottom: 1px solid var(--line);
}

.portal-hero > * {
  width: var(--portal-content-width);
  margin-left: auto;
  margin-right: auto;
}

.portal-hero h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 520;
  line-height: 1.06;
  margin: 0 0 16px;
  max-width: 700px;
}

.portal-hero p {
  font-size: 18px;
  color: var(--muted);
  max-width: 580px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.portal-section {
  padding: 48px 0;
  border-bottom: 1px solid var(--line);
}

.portal-section:last-child {
  border-bottom: none;
}

/* Заголовок секции выравнивается с .shell — иначе он съезжает
   к левому краю относительно центрированного контента ниже. */
.portal-section-head {
  width: var(--portal-content-width);
  max-width: none;
  margin: 0 auto 28px;
}

.portal-content .portal-section > .shell {
  width: var(--portal-content-width);
}

.portal-section-head h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 520;
  margin: 0 0 8px;
}

.portal-section-head p {
  font-size: 15px;
  color: var(--muted);
  margin: 0;
  max-width: 760px;
}

/* ── Footer-style section: light block at page end ─────── */
/* Раньше был тёмный (#1c1c1c) — вырубалось из editorial-watercolor стиля.
   Теперь — тёплый cream с тонкой золотой границей сверху. */

.portal-section.is-footer {
  background: #faf6ee;
  color: #3f3932;
  padding-top: 56px;
  padding-bottom: 72px;
  border-top: 1px solid rgba(189,139,46,.22);
  border-bottom: none;
  margin-top: 32px;
}

.portal-section.is-footer .portal-section-head h2 {
  color: #3f3932;
}

.portal-section.is-footer .portal-section-head p {
  color: #7a6f63;
}

/* Compact link cards inside footer (used in Wave A pages) */
.portal-section.is-footer .next-compact a,
.portal-section.is-footer .next-item,
.portal-section.is-footer .related-card {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: #3f3932 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}

.portal-section.is-footer .next-compact a:hover,
.portal-section.is-footer .next-item:hover,
.portal-section.is-footer .related-card:hover {
  background: #fffdf7 !important;
  border-color: rgba(189,139,46,.4) !important;
  transform: translateY(-2px);
}

.portal-section.is-footer .next-compact a h4,
.portal-section.is-footer .next-item h4,
.portal-section.is-footer .related-card h4,
.portal-section.is-footer .next-compact a strong,
.portal-section.is-footer .next-item strong,
.portal-section.is-footer .related-card strong {
  color: #3f3932 !important;
}

.portal-section.is-footer .next-compact a p,
.portal-section.is-footer .next-item p,
.portal-section.is-footer .related-card p,
.portal-section.is-footer .next-compact a span,
.portal-section.is-footer .next-item span:not(.label):not(.nx-label):not(.rel-label),
.portal-section.is-footer .related-card span:not(.label):not(.nx-label):not(.rel-label) {
  color: #5a4f42 !important;
}

.portal-section.is-footer .next-compact a .label,
.portal-section.is-footer .next-item .nx-label,
.portal-section.is-footer .related-card .rel-label {
  color: #8a6218 !important;
}

/* ── Section cards (main entry points) ──────────────────────────── */

.section-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.section-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius);
  background: var(--ivory);
  box-shadow: 0 8px 28px rgba(17,17,17,.07);
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .18s, transform .18s;
  border: 1.5px solid transparent;
}

.section-card:hover {
  box-shadow: 0 16px 42px rgba(17,17,17,.12);
  transform: translateY(-2px);
}

.section-card.is-primary {
  background: #2b2521;
  color: #f4efe6;
  grid-column: span 3; /* квизы across full width */
  flex-direction: row;
  align-items: center;
  gap: 24px;
}

.section-card.is-soon {
  opacity: .6;
  cursor: default;
}

.section-card.is-soon:hover {
  transform: none;
  box-shadow: 0 8px 28px rgba(17,17,17,.07);
}

.card-icon {
  font-size: 28px;
  line-height: 1;
}

.card-label {
  font-size: 11px;
  font-weight: 780;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #bd8b2e;
  margin-bottom: 2px;
}

.section-card.is-primary .card-label {
  color: rgba(189,139,46,.9);
}

.section-card h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  font-weight: 520;
  line-height: 1.1;
}

.section-card p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
}

.section-card.is-primary p {
  color: rgba(244,239,230,.65);
}

.section-card .card-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 680;
  color: #bd8b2e;
  display: flex;
  align-items: center;
  gap: 4px;
}

.section-card.is-primary .card-cta {
  padding: 12px 24px;
  border-radius: 999px;
  background: #bd8b2e;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0;
  margin-left: auto;
}

/* ── Quick links grid ───────────────────────────────────────────── */

.quick-links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.quick-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, background .15s;
}

.quick-link:hover {
  border-color: rgba(17,17,17,.25);
  background: var(--ivory);
}

.quick-link .ql-type {
  font-size: 10px;
  font-weight: 780;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}

.quick-link strong {
  font-size: 14px;
  font-weight: 680;
  line-height: 1.3;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .section-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .section-card.is-primary {
    grid-column: span 2;
  }

  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .portal-wrap {
    grid-template-columns: 1fr;
  }

  /* Off-canvas sidebar. По умолчанию уехал влево, тёмная подложка скрыта.
     При .sidebar.is-open — выезжает + появляется overlay через .portal-wrap::before. */
  .sidebar {
    position: fixed;
    left: -300px;
    top: 0;
    z-index: 100;
    transition: left .28s ease;
    height: 100vh;
    width: 280px;
    max-width: 85vw;
    box-shadow: 2px 0 24px rgba(0,0,0,.35);
  }

  .sidebar.is-open {
    left: 0;
  }

  /* Тёмная подложка при открытом sidebar — клик закрывает. */
  body.has-open-sidebar::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99;
    animation: sidebar-fade-in .28s ease;
  }

  @keyframes sidebar-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Hamburger кнопка — показывается ТОЛЬКО на мобильном.
     Inline `style="display:none"` с HTML override'им через !important. */
  .sidebar-toggle,
  #sidebarToggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    line-height: 1;
    background: transparent;
    border: none;
    color: var(--ink, #2a241e);
    cursor: pointer;
    padding: 0;
    margin: 0 4px 0 -4px;
  }
  .sidebar-toggle:active,
  #sidebarToggle:active {
    background: rgba(0,0,0,.06);
    border-radius: 8px;
  }

  .portal-topbar,
  .portal-content {
    grid-column: 1;
  }

  .portal-topbar {
    padding: 0 16px;
  }

  /* Защитный padding для всего контента — чтобы текст и hero не «влипали»
     в края экрана на мобиле даже если внутренние блоки имеют свой padding 0. */
  .portal-content {
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
    --portal-content-width: min(100% - 34px, 1180px);
  }

  .portal-hero,
  .portal-section {
    padding-left: 0;
    padding-right: 0;
  }

  /* Inner content carriers — некоторые страницы используют .shell или
     inline-style padding: 0 40px. Принудительно убираем на мобиле. */
  .portal-content [style*="padding:0 40px"],
  .portal-content [style*="padding: 0 40px"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .section-cards {
    grid-template-columns: 1fr;
  }

  .section-card.is-primary {
    grid-column: 1;
    flex-direction: column;
    align-items: flex-start;
  }

  .section-card.is-primary .card-cta {
    margin-left: 0;
  }

  .quick-links {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ── Wishlist hint — мягкое приглашение сохранить продукт в виш-лист ─── */
.wishlist-hint {
  margin: 24px 0 8px;
  padding: 20px 24px;
  border-radius: var(--radius);
  background: var(--ivory, #fffdf8);
  border-left: 3px solid #bd8b2e;
  display: flex;
  align-items: flex-start;
  gap: 18px;
}
.wishlist-hint .wh-icon {
  font-family: Georgia, serif;
  font-size: 26px;
  color: #bd8b2e;
  line-height: 1;
  flex-shrink: 0;
}
.wishlist-hint .wh-text {
  font-size: 14.5px;
  color: #3f3932;
  line-height: 1.55;
  flex: 1;
}
.wishlist-hint .wh-text b {
  color: var(--ink, #111);
  font-weight: 660;
}
.wishlist-hint .wh-text a {
  color: #bd8b2e;
  text-decoration: underline;
  font-weight: 660;
}
@media (max-width: 640px) {
  .wishlist-hint { flex-direction: column; gap: 10px; padding: 18px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   .section.is-footer — mirror of .portal-section.is-footer for legacy
   pages that use the old <section class="section"> markup
   (mostly makiyazh-*: makiyazh.html, makiyazh-instrumenty.html,
    makiyazh-kosmetika-segmenty.html)
   ════════════════════════════════════════════════════════════════ */
.section.is-footer {
  background: #faf6ee;
  color: #3f3932;
  border-top: 1px solid rgba(189,139,46,.22);
  border-bottom: none;
  margin-top: 32px;
}
.section.is-footer .section-head h2,
.section.is-footer h2 { color: #3f3932; }
.section.is-footer .section-head p,
.section.is-footer > .shell > p { color: #7a6f63; }

.section.is-footer .next-compact a,
.section.is-footer .next-item,
.section.is-footer .related-box {
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  color: #3f3932 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.section.is-footer .next-compact a:hover,
.section.is-footer .next-item:hover,
.section.is-footer .related-box:hover {
  background: #fffdf7 !important;
  border-color: rgba(189,139,46,.4) !important;
  transform: translateY(-2px);
}
.section.is-footer .next-compact a h4,
.section.is-footer .next-compact a strong,
.section.is-footer .related-box h3 { color: #3f3932 !important; }
.section.is-footer .next-compact a p,
.section.is-footer .next-compact a span,
.section.is-footer .related-box p { color: #5a4f42 !important; }
.section.is-footer .next-compact .label,
.section.is-footer .related-box .tag { color: #8a6218 !important; }

/* ── Canonical end-of-page reading links ──────────────────────────
   Последний блок перед футером: светлая подложка, белые карточки,
   короткая подпись + заголовок + текст. Старые чёрные related-box
   и вертикальные списки в этом месте больше не используем. */
.portal-content #next.portal-section,
.portal-content #next.section,
.portal-content section#next {
  background: #faf6ee !important;
  color: #3f3932 !important;
  padding-top: 56px;
  padding-bottom: 72px;
  margin-top: 32px;
}

.portal-content #next .next-grid,
.portal-content #next .next-compact,
.portal-content #next .next-list,
.portal-content #next .combo-next-compact,
.portal-content #next .related-grid,
.portal-content #next .neighbour-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.portal-content #next .next-card,
.portal-content #next .next-compact a,
.portal-content #next .next-item,
.portal-content #next .combo-next-compact a,
.portal-content #next .related-card,
.portal-content #next .neigh-card {
  display: block !important;
  padding: 22px 24px !important;
  border-radius: var(--radius) !important;
  background: #fff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 6px 18px rgba(17,17,17,.07) !important;
  color: #3f3932 !important;
  text-decoration: none !important;
}

.portal-content #next .next-card:hover,
.portal-content #next .next-compact a:hover,
.portal-content #next .next-item:hover,
.portal-content #next .combo-next-compact a:hover,
.portal-content #next .related-card:hover,
.portal-content #next .neigh-card:hover {
  background: #fffdf7 !important;
  border-color: rgba(189,139,46,.4) !important;
  transform: translateY(-2px);
}

.portal-content #next .next-card h4,
.portal-content #next .next-compact h4,
.portal-content #next .next-item h4,
.portal-content #next .combo-next-compact h4,
.portal-content #next .related-card strong,
.portal-content #next .related-card h4,
.portal-content #next .neigh-card h4 {
  color: #3f3932 !important;
}

.portal-content #next .next-card p,
.portal-content #next .next-compact p,
.portal-content #next .combo-next-compact p,
.portal-content #next .related-card p,
.portal-content #next .neigh-card p,
.portal-content #next .related-card span:not(.rel-label),
.portal-content #next .next-item span:not(.label):not(.nx-label):not(.rel-label) {
  color: #5a4f42 !important;
}

.portal-content #next .next-label,
.portal-content #next .label,
.portal-content #next .nx-label,
.portal-content #next .rel-label,
.portal-content #next .neigh-card .label,
.portal-content #next .related-card span:first-child {
  color: #8a6218 !important;
  font-size: 10.5px !important;
  font-weight: 780 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
}

@media (max-width: 980px) {
  .portal-content #next .next-grid,
  .portal-content #next .next-compact,
  .portal-content #next .next-list,
  .portal-content #next .combo-next-compact,
  .portal-content #next .related-grid,
  .portal-content #next .neighbour-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   Site footer — единый футер всех страниц портала.
   Шаблон: scripts/_footer-template.html
   Раскат: scripts/apply-footer.mjs
   ════════════════════════════════════════════════════════════════ */

.site-footer {
  /* Светлый футер в едином тоне с порталом (2026-05-27). Был тёмный
     editorial-стиль, но рядом с другими светлыми блоками выглядел как
     контрастный «разрез» внизу. */
  background: var(--ivory);
  color: var(--ink);
  padding: 56px 40px 28px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 56px;
}

.site-footer .footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 56px;
  align-items: start;
}

.site-footer .footer-brand .footer-logo {
  font-family: Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: .02em;
  margin: 0 0 8px;
}

.site-footer .footer-brand .footer-tag {
  color: var(--muted);
  font-size: 13px;
  max-width: 280px;
  margin: 0 0 18px;
}

.site-footer .footer-studio-cta {
  display: inline-block;
  padding: 10px 18px;
  background: #bd8b2e;
  color: #1c1816;
  text-decoration: none;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .03em;
  transition: background .14s, transform .14s;
}

.site-footer .footer-studio-cta:hover {
  background: #d4a040;
  transform: translateY(-1px);
}

.site-footer .footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.site-footer .footer-col h4 {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #8a6218;
  margin: 0 0 14px;
}

.site-footer .footer-col a {
  display: block;
  color: var(--muted);
  text-decoration: none;
  padding: 4px 0;
  font-size: 13px;
  transition: color .14s;
}

.site-footer .footer-col a:hover {
  color: var(--ink);
}

.site-footer .footer-bottom {
  max-width: 1200px;
  margin: 36px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
}

.site-footer .footer-bottom a {
  color: var(--muted);
  text-decoration: none;
  transition: color .14s;
}

.site-footer .footer-bottom a:hover {
  color: var(--ink);
}

@media (max-width: 800px) {
  .site-footer {
    padding: 40px 20px 22px;
    margin-top: 40px;
  }
  .site-footer .footer-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .site-footer .footer-nav {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .site-footer .footer-bottom {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin-top: 28px;
  }
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY V2 — раскатка на все страницы (2026-05-27)
   Источник правды: lichnyy-stil.html demo (одобрено).
   Скоп: общий контент внутри .portal-content. Не трогает плашки
   (.not-card, .word-card, .compare-table) — у них свой font-size.
   ════════════════════════════════════════════════════════════════ */

.portal-content p,
.portal-content li {
  font-size: 16px;
  line-height: 1.55;
}

.portal-content h2 {
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 32px 0 16px;
}
.portal-content h3 {
  font-size: clamp(20px, 2.2vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 24px 0 12px;
}
.portal-content h4 {
  font-size: 17px;
  line-height: 1.35;
  margin: 16px 0 8px;
}

/* Lead / introductory text */
.portal-content .lead,
.portal-content .intro-essay,
.portal-content .three-words-intro,
.portal-content .def-text {
  font-size: 17px;
  line-height: 1.55;
}

/* Sidebar — поднимаем размеры до читаемых */
.sidebar-section { font-size: 14px; padding: 5px 16px; }
.sidebar-sub a {
  font-size: 13.5px;
  padding: 6px 16px 6px 32px;
  line-height: 1.4;
}
.sidebar-sub-section {
  font-size: 13.5px;
  padding: 6px 16px 6px 32px;
  line-height: 1.4;
}
.sidebar-sub-sub a {
  font-size: 13px;
  padding: 6px 20px 6px 64px;
  line-height: 1.4;
}
.sidebar-heading {
  font-size: 10.5px;
  padding: 32px 16px 8px;
}
.sidebar-logo .brand-name { font-size: 22px; }
.sidebar-logo .brand-tagline { font-size: 10px; }

/* Mobile typography — body 16px (через @media (max-width: 800px)
   в wardrobe-pages.css), всё остальное автоматически адаптируется
   через clamp(). */
@media (max-width: 800px) {
  .portal-content h2 { font-size: clamp(26px, 7vw, 32px); }
  .portal-content h3 { font-size: clamp(19px, 5vw, 22px); }
}

/* ════════════════════════════════════════════════════════════════
   Age perspective grid — «По возрасту» на гидах одежды (Жакет,
   Платья, Юбки, Брюки, Пальто). Из START-HERE Q3 §4.2.
   ════════════════════════════════════════════════════════════════ */
.age-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.age-card {
  padding: 24px 22px;
  border-radius: var(--radius);
  background: rgba(189,139,46,.04);
  border: 1px solid rgba(189,139,46,.18);
}
.age-tag {
  display: inline-block;
  padding: 4px 10px;
  background: rgba(189,139,46,.14);
  color: #8a6218;
  font-size: 12px;
  font-weight: 760;
  letter-spacing: .04em;
  border-radius: 999px;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.age-card h3 {
  font-size: 17px;
  font-weight: 660;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.age-card p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 800px) {
  .age-grid { grid-template-columns: 1fr; gap: 14px; }
  .age-card { padding: 20px 18px; }
}

/* ════════════════════════════════════════════════════════════════
   DESKTOP TOP-NAV (v1) — выпадающее меню сверху на десктопе (>800px).
   На мобильном (≤800px) скрыт: там работает прежний off-canvas sidebar.
   Источник ссылок — тот же, что и в sidebar. Markup: .portal-desknav.
   ════════════════════════════════════════════════════════════════ */

/* База: скрыт. Показывается только на десктопе (медиа ниже). */
.portal-desknav { display: none; }

@media (min-width: 801px) {
  /* Только на страницах с верхним меню (body.has-topnav): убираем sidebar,
     раскладка одноколоночная. Прочие страницы сохраняют прежний sidebar. */
  body.has-topnav .portal-wrap { display: block; }
  body.has-topnav .portal-wrap > .sidebar { display: none; }
  body.has-topnav .portal-topbar,
  body.has-topnav .portal-content { grid-column: auto; }

  /* Хлебные крошки — на всех страницах, КРОМЕ главной (там только меню). */
  body.has-topnav.is-home .portal-topbar { display: none; }

  body.has-topnav .portal-desknav {
    display: flex;
    align-items: stretch;
    gap: 4px;
    position: sticky;
    top: 0;
    z-index: 60;
    background: #2b2521;
    color: #f4efe6;
    padding: 0 28px;
    height: 62px;
    border-bottom: 1px solid rgba(189,139,46,.28);
  }

  /* ── Логотип ─────────────────────────────────────────── */
  .portal-desknav .dn-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #f4efe6;
    padding-right: 22px;
    margin-right: 4px;
    flex-shrink: 0;
  }
  .portal-desknav .dn-logo .brand-mark {
    width: 32px; height: 32px; border-radius: 50%;
    object-fit: cover; flex-shrink: 0;
    background: radial-gradient(circle at 35% 35%, #bd8b2e, #80324d 70%, #111);
    border: 1.5px solid rgba(189,139,46,.4);
  }
  .portal-desknav .dn-logo .brand-name {
    font-family: Georgia, serif; font-size: 21px; font-weight: 520;
    color: #f4efe6; letter-spacing: .01em; line-height: 1;
  }
  .portal-desknav .dn-logo .brand-tagline {
    display: block; font-size: 8.5px; font-weight: 760; letter-spacing: .16em;
    text-transform: uppercase; color: #bd8b2e; margin-top: 3px;
  }

  /* ── Горизонтальное меню ─────────────────────────────── */
  .portal-desknav .dn-menu {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0; padding: 0; list-style: none;
  }
  .dn-item { position: relative; display: flex; align-items: stretch; }

  .dn-link {
    display: flex; align-items: center; gap: 5px;
    padding: 0 13px;
    font-size: 13.5px; font-weight: 680; letter-spacing: .01em;
    color: rgba(244,239,230,.74);
    text-decoration: none;
    background: none; border: none; cursor: pointer;
    font-family: inherit;
    transition: color .15s, background .15s;
  }
  .dn-item:hover > .dn-link,
  .dn-link:focus-visible,
  .dn-link.is-active { color: #f4efe6; }
  .dn-link.is-active { box-shadow: inset 0 -2px 0 #d9a93f; }
  .dn-link.is-primary { color: #d9a93f; font-weight: 740; }
  .dn-item:hover > .dn-link.is-primary { color: #e9bf5e; }

  .dn-caret { font-size: 8px; opacity: .55; transition: transform .18s; margin-top: 1px; }
  .dn-item:hover .dn-caret { transform: rotate(180deg); opacity: .8; }

  /* ── Выпадающая панель ───────────────────────────────── */
  .dn-panel {
    position: absolute; top: 100%; left: 0;
    min-width: 230px;
    background: #fff; color: #2a241e;
    border: 1px solid var(--line, #e7e0d4);
    border-top: 2px solid #bd8b2e;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 22px 48px rgba(17,17,17,.16);
    padding: 14px 16px 16px;
    /* Закрытая панель убрана из раскладки (display:none) — иначе широкая
       скрытая мега-панель растягивает страницу по горизонтали. */
    display: none;
    z-index: 5;
  }
  .dn-item:hover > .dn-panel,
  .dn-item.is-open > .dn-panel {
    display: block;
    animation: dnFade .15s ease;
  }
  @keyframes dnFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Колонки внутри панели (мега-меню) */
  .dn-cols { display: grid; gap: 22px; grid-auto-flow: column; }
  .dn-col { min-width: 150px; }
  .dn-col-wide { min-width: 180px; }

  .dn-col-label {
    display: block;
    font-size: 9.5px; font-weight: 780; letter-spacing: .1em;
    text-transform: uppercase; color: #8a6218;
    margin: 2px 8px 8px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(189,139,46,.18);
  }
  .dn-panel a {
    display: block;
    padding: 6px 8px;
    border-radius: 7px;
    font-size: 13.5px; line-height: 1.3;
    color: #3f3932; text-decoration: none;
    transition: background .13s, color .13s;
    white-space: nowrap;
  }
  .dn-panel a:hover { background: var(--ivory, #faf6ee); color: #111; }
  .dn-panel a.dn-hub { font-weight: 700; color: #80324d; }
  .dn-panel a.dn-hub:hover { color: #5a1f37; }
  .dn-panel a.is-active { background: var(--ivory, #faf6ee); color: #80324d; font-weight: 680; }

  /* ── Studio CTA справа ───────────────────────────────── */
  .portal-desknav .dn-cta {
    margin-left: auto;
    align-self: center;
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: linear-gradient(135deg, #80324d, #4a1a2e);
    border: 1px solid rgba(189,139,46,.4);
    border-radius: 999px;
    color: #f4efe6; text-decoration: none;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    transition: transform .14s, box-shadow .14s;
    flex-shrink: 0;
  }
  .portal-desknav .dn-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(128,50,77,.4);
  }
  .portal-desknav .dn-cta .dn-cta-arrow { color: #d9a93f; font-size: 15px; }

  /* На десктопе скрываем breadcrumb-топбар-хамбургер (он только для мобилы). */
  .portal-desknav + .portal-topbar .sidebar-toggle { display: none; }
}

/* Узкий десктоп — чуть ужимаем, чтобы всё поместилось в одну строку. */
@media (min-width: 801px) and (max-width: 1080px) {
  .portal-desknav { padding: 0 16px; }
  .dn-link { padding: 0 9px; font-size: 13px; }
  .portal-desknav .dn-logo { padding-right: 12px; }
  .portal-desknav .dn-logo .brand-tagline { display: none; }
}

/* Top-nav: страховка — панель не шире вьюпорта (JS дополнительно сдвигает её внутрь). */
@media (min-width: 801px) {
  .dn-panel { max-width: calc(100vw - 24px); }
}

/* ── No section dividers ─────────────────────────────────────────
   Общий слой для страниц портала: убирает горизонтальные линии между
   контентными блоками, включая старые page-specific стили с .section. */
.portal-content .portal-hero,
.portal-content .portal-section,
.portal-content .portal-section.is-footer,
.portal-content .section,
.portal-content .section.is-footer,
.portal-content .dark-section,
.portal-content .reading-band,
.portal-content .me-conclusions,
.site-footer {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* ── First-screen alignment guard ────────────────────────────────
   Первый содержательный блок страницы должен попадать в ту же линию,
   что и основной контент: не висеть у края и не раздувать h1 старым
   крупным шаблоном из ранних мини-гайдов. */
.portal-content > .portal-section:first-child {
  padding-top: 48px !important;
}

.portal-content > .portal-section:first-child > .shell,
.portal-content > section.shell.hero {
  width: var(--portal-content-width) !important;
  max-width: none !important;
}

.portal-content > .portal-hero h1,
.portal-content > .portal-section:first-child h1,
.portal-content > section.shell.hero h1,
.portal-content > .home-hero h1 {
  max-width: 760px !important;
  font-size: clamp(34px, 3.8vw, 50px) !important;
  line-height: 1.04 !important;
}

.portal-content > .portal-hero > h1 {
  width: min(760px, var(--portal-content-width)) !important;
  margin-left: calc((100% - var(--portal-content-width)) / 2) !important;
  margin-right: auto !important;
}

.portal-content > .portal-hero > p,
.portal-content > .portal-hero > .hero-tags,
.portal-content > .portal-hero > .hero-note,
.portal-content > .portal-hero > .inline-links {
  margin-left: calc((100% - var(--portal-content-width)) / 2) !important;
  margin-right: auto !important;
}

.portal-content > .portal-hero > p {
  width: min(650px, var(--portal-content-width)) !important;
}

.portal-content > .portal-hero .lead,
.portal-content > .portal-section:first-child .lead,
.portal-content > section.shell.hero .lead {
  max-width: 650px;
}

@media (max-width: 800px) {
  .portal-content > .portal-section:first-child {
    padding-top: 32px !important;
  }

  .portal-content > .portal-hero h1,
  .portal-content > .portal-section:first-child h1,
  .portal-content > section.shell.hero h1,
  .portal-content > .home-hero h1 {
    font-size: clamp(32px, 10vw, 42px) !important;
  }
}

/* ── Dramatic wine surfaces ───────────────────────────────────────
   Большие тёмные подложки теперь не чёрные: используем брендовый
   винный #80324d и тёмный конец #4a1a2e из CTA, чтобы белый текст
   оставался контрастным, а блоки не выпадали из палитры. */
.portal-content .cta-block,
.portal-content .studio-cta-block,
.portal-content .diagn-block,
.portal-content .filter-box,
.portal-content .principle-box,
.portal-content .mood-strip,
.portal-content .balance-block,
.portal-content .your-style-box,
.portal-content .capsule-block,
.portal-content .beyond-summary,
.portal-content .mistakes-block,
.portal-content .kps-studio,
.portal-content .accents-block .ac,
.portal-content .scenario-card {
  background:
    radial-gradient(circle at 12% 0%, rgba(189,139,46,.18), transparent 36%),
    linear-gradient(135deg, #80324d 0%, #6f2743 40%, #4a1a2e 100%) !important;
  background-color: #6f2743 !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(189,139,46,.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 24px 64px rgba(74,26,46,.2) !important;
}

.portal-content .cta-block h3,
.portal-content .studio-cta-block h3,
.portal-content .diagn-block h2,
.portal-content .diagn-block h3,
.portal-content .filter-box h4,
.portal-content .principle-box h3,
.portal-content .mood-strip h3,
.portal-content .balance-block h3,
.portal-content .your-style-box h3,
.portal-content .capsule-block h3,
.portal-content .beyond-summary h4,
.portal-content .mistakes-block h3,
.portal-content .kps-studio h3,
.portal-content .accents-block .ac h3,
.portal-content .scenario-card h3 {
  color: #fffaf0 !important;
}

.portal-content .cta-block p,
.portal-content .studio-cta-block p,
.portal-content .diagn-block p,
.portal-content .diagn-block span,
.portal-content .filter-box p,
.portal-content .principle-box p,
.portal-content .mood-strip p,
.portal-content .balance-block p,
.portal-content .your-style-box p,
.portal-content .capsule-block p,
.portal-content .beyond-summary p,
.portal-content .mistakes-block p,
.portal-content .kps-studio p,
.portal-content .accents-block .ac p,
.portal-content .scenario-card p {
  color: rgba(255,250,240,.82) !important;
}

.portal-content .diagn-block b,
.portal-content .diagn-block strong,
.portal-content .diagn-row strong,
.portal-content .diagn-row span.check,
.portal-content .filter-box b,
.portal-content .principle-box b,
.portal-content .your-style-box b,
.portal-content .your-style-box a,
.portal-content .capsule-block b,
.portal-content .beyond-summary b,
.portal-content .accents-block .ac .label {
  color: #f0d49a !important;
}

/* ── Restored coffee surfaces ────────────────────────────────────
   После снятия старых чёрных подложек часть legacy-блоков сохранила
   светлый текст. Возвращаем им не чёрный, а мягкий тёмно-кофейный фон. */
.portal-content .dark-section,
.portal-content .outfit-math-board,
.portal-content .texture-card,
.portal-content .mono-mistake,
.portal-content .sponge-card,
.portal-content .care-item,
.portal-content .priority-item,
.portal-content .business,
.portal-content .look-body,
.portal-content .eye-body,
.portal-content .stat-card,
.portal-content .dark-section .lesson-row,
.portal-content .cc-card,
.portal-content .corr-card,
.portal-content .illus-caption,
.portal-content .diagnosis-block,
.portal-content .grey-callout,
.portal-content .mood-card,
.portal-content .balance-card,
.portal-content .rule-box,
.portal-content .fs-card,
.portal-content .ct-zone {
  background:
    radial-gradient(circle at 10% 0%, rgba(189,139,46,.14), transparent 34%),
    linear-gradient(135deg, #2b2521 0%, #211b17 56%, #14110f 100%) !important;
  background-color: #211b17 !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(189,139,46,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 54px rgba(43,37,33,.16) !important;
}

.portal-content .dark-section h1,
.portal-content .dark-section h2,
.portal-content .dark-section h3,
.portal-content .dark-section h4,
.portal-content .dark-section h5,
.portal-content .outfit-math-board h4,
.portal-content .texture-card h3,
.portal-content .texture-card h4,
.portal-content .mono-mistake h3,
.portal-content .mono-mistake h4,
.portal-content .sponge-card h3,
.portal-content .care-item h3,
.portal-content .care-item h4,
.portal-content .priority-item h3,
.portal-content .priority-item h4,
.portal-content .business h3,
.portal-content .business h4,
.portal-content .look-body h3,
.portal-content .look-body h4,
.portal-content .eye-body h3,
.portal-content .eye-body h4,
.portal-content .stat-card h3,
.portal-content .stat-card h4,
.portal-content .cc-card h3,
.portal-content .cc-card h4,
.portal-content .corr-card h3,
.portal-content .corr-card h4,
.portal-content .diagnosis-block h2,
.portal-content .diagnosis-block h3,
.portal-content .grey-callout h3,
.portal-content .mood-card h3,
.portal-content .mood-card h4,
.portal-content .balance-card h3,
.portal-content .balance-card h4,
.portal-content .rule-box h3,
.portal-content .rule-box h4,
.portal-content .fs-card h3,
.portal-content .fs-card h4,
.portal-content .ct-zone h3,
.portal-content .ct-zone h4 {
  color: #fffaf0 !important;
}

.portal-content .dark-section p,
.portal-content .dark-section li,
.portal-content .dark-section span,
.portal-content .dark-section td,
.portal-content .outfit-math-board p,
.portal-content .outfit-math-board span,
.portal-content .texture-card p,
.portal-content .mono-mistake p,
.portal-content .sponge-card p,
.portal-content .care-item p,
.portal-content .care-item li,
.portal-content .priority-item p,
.portal-content .priority-item li,
.portal-content .business p,
.portal-content .business li,
.portal-content .look-body p,
.portal-content .look-body span,
.portal-content .look-body div,
.portal-content .eye-body p,
.portal-content .eye-body span,
.portal-content .eye-body div,
.portal-content .stat-card p,
.portal-content .stat-card span,
.portal-content .stat-card div,
.portal-content .cc-card p,
.portal-content .cc-card span,
.portal-content .cc-card div,
.portal-content .corr-card p,
.portal-content .corr-card span,
.portal-content .corr-card div,
.portal-content .illus-caption,
.portal-content .diagnosis-block p,
.portal-content .diagnosis-block span,
.portal-content .diagnosis-block div,
.portal-content .grey-callout p,
.portal-content .grey-callout span,
.portal-content .grey-callout div,
.portal-content .mood-card p,
.portal-content .mood-card span,
.portal-content .mood-card div,
.portal-content .balance-card p,
.portal-content .balance-card span,
.portal-content .balance-card div,
.portal-content .rule-box p,
.portal-content .rule-box span,
.portal-content .rule-box div,
.portal-content .fs-card p,
.portal-content .fs-card span,
.portal-content .fs-card div,
.portal-content .ct-zone p,
.portal-content .ct-zone span,
.portal-content .ct-zone div {
  color: rgba(255,250,240,.78) !important;
}

.portal-content .dark-section b,
.portal-content .dark-section strong,
.portal-content .outfit-math-board b,
.portal-content .outfit-math-board strong,
.portal-content .texture-card b,
.portal-content .texture-card strong,
.portal-content .mono-mistake b,
.portal-content .mono-mistake strong,
.portal-content .sponge-card b,
.portal-content .sponge-card strong,
.portal-content .care-item b,
.portal-content .care-item strong,
.portal-content .priority-item b,
.portal-content .priority-item strong,
.portal-content .business b,
.portal-content .business strong,
.portal-content .look-body b,
.portal-content .look-body strong,
.portal-content .eye-body b,
.portal-content .eye-body strong,
.portal-content .stat-card b,
.portal-content .stat-card strong,
.portal-content .cc-card b,
.portal-content .cc-card strong,
.portal-content .corr-card b,
.portal-content .corr-card strong,
.portal-content .diagnosis-block b,
.portal-content .diagnosis-block strong,
.portal-content .grey-callout b,
.portal-content .grey-callout strong,
.portal-content .mood-card b,
.portal-content .mood-card strong,
.portal-content .balance-card b,
.portal-content .balance-card strong,
.portal-content .rule-box b,
.portal-content .rule-box strong,
.portal-content .fs-card b,
.portal-content .fs-card strong,
.portal-content .ct-zone b,
.portal-content .ct-zone strong {
  color: #f0d49a !important;
}

.portal-content .btn-override {
  background: #4a1a2e !important;
  color: #fffaf0 !important;
  border-color: rgba(189,139,46,.28) !important;
}

.portal-content .seq-badge {
  background: #2b2521 !important;
  color: #fffaf0 !important;
  border: 1px solid rgba(189,139,46,.18) !important;
}

.portal-content .outfit-row + .outfit-row {
  border-top-color: rgba(255,250,240,.16) !important;
}

.portal-content .outfit-chip {
  background: #3a332d !important;
  color: rgba(255,250,240,.9) !important;
}

.portal-content .outfit-chip.anchor {
  background: #bd8b2e !important;
  color: #14110f !important;
}

.portal-content .math-result {
  background: rgba(189,139,46,.14) !important;
  color: rgba(255,250,240,.82) !important;
}

.portal-content .gap-formula-card.works,
.portal-content .gap-formula-card.broken {
  background: #211b17 !important;
  color: #fffaf0 !important;
  border-color: rgba(189,139,46,.18) !important;
}

.portal-content .gap-formula-card p {
  color: rgba(255,250,240,.78) !important;
}

.portal-content .gap-formula-card h4 {
  color: #fffaf0 !important;
}

.portal-content .gap-formula-card.works .gap-status {
  color: #9fd9ad !important;
}

.portal-content .gap-formula-card.broken .gap-status {
  color: #f3a19c !important;
}

/* Home cards: если изображение не загрузилось, белый текст не должен
   оставаться на светлом fallback-фоне. */
.portal-content .hcard {
  background: #2b2521 !important;
}

.portal-content .hcard::after {
  background:
    linear-gradient(180deg, rgba(43,37,33,.08), rgba(43,37,33,.66) 50%, rgba(20,17,15,.94)) !important;
}

.portal-content .hcard:hover::after {
  background:
    linear-gradient(180deg, rgba(43,37,33,.16), rgba(43,37,33,.76) 48%, rgba(20,17,15,.96)) !important;
}

.portal-content .home-hero-cta,
.portal-content .home-real-inner,
.portal-content .home-quizcta {
  background-color: #211b17 !important;
}

.quiz-fab,
.portal-content .quiz-fab {
  background-color: #9d6a16 !important;
}

.portal-content #sponzhi .lesson-photo-stack {
  padding: 28px !important;
  border-radius: var(--radius, 8px) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(189,139,46,.14), transparent 34%),
    linear-gradient(135deg, #2b2521 0%, #211b17 56%, #14110f 100%) !important;
  background-color: #211b17 !important;
  border: 1px solid rgba(189,139,46,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 20px 54px rgba(43,37,33,.16) !important;
}

.portal-content #sponzhi .lesson-photo-stack h3 {
  color: #fffaf0 !important;
}

.portal-content #sponzhi .lesson-photo-stack p {
  color: rgba(255,250,240,.78) !important;
}

.portal-content #sponzhi .lesson-photo-stack strong {
  color: #f0d49a !important;
}

/* Светлые HEX-метки на цветовых страницах: #FFFFFF, пастели, металлики.
   Это не полноценные карточки, но им тоже нужна маленькая кофейная плашка. */
.portal-content .suits-card .what span[style*="color"],
.portal-content .suits-card .what span[style*="Color"],
.portal-content .suits-card .what span[style*="COLOR"] {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  margin: 0 2px;
  padding: 1px 7px 2px;
  border-radius: 999px;
  background: #2b2521 !important;
  color: #fffaf0 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font-weight: 760;
  letter-spacing: .01em;
  text-shadow: none;
}

/* Full-width learning text: лиды и основные учебные абзацы идут
   по ширине своего блока, а не обрываются узкой колонкой слева. */
.portal-content :where(
  .lead,
  .section-intro,
  .section-lead,
  .sec-lead,
  .portal-section-head > p,
  .section-head > p,
  .essay,
  .v2-essay,
  .intro-essay,
  .section-text,
  .lesson-intro,
  .care-essay,
  .quality-essay,
  .link-note,
  .ofis-essay,
  .sv-essay,
  .lifestyle-essay,
  .three-words-intro,
  .section-copy
) {
  max-width: 100% !important;
  width: 100%;
}

.portal-content :where(
  .essay,
  .v2-essay,
  .intro-essay,
  .ofis-essay,
  .sv-essay,
  .lifestyle-essay
) > p {
  max-width: 100% !important;
}