/* =========================================================================
   MONARQUE — ШАПКИ САЙТОВ (sites.css)
   -------------------------------------------------------------------------
   У каждого из 8 сайтов экосистемы СВОЯ шапка: свой бренд, своя подпись,
   свой акцент, своя типографика, своя форма кнопки.

   База взята из styles.css, слой 33 (стеклянная липкая шапка: sticky,
   градиент, backdrop-filter blur) и переработана под каждый сайт.
   styles.css НЕ изменяется — все правила адресуются через
   html[data-showcase="<id>"], который проставляет app.js.

   Бренды и подписи — строго по CONCEPT.md, раздел 2 «Матрица платформ».
   ========================================================================= */

/* =========================================================================
   1. ОБЩАЯ БАЗА ШАПКИ (стекло, sticky, blur — как в styles.css слой 33)
   ========================================================================= */

/* Шапка лежит поверх первого экрана. В styles.css есть правило
   `body > *:not(.ambient) { position: relative; z-index: 1; }` со
   специфичностью выше .site-header, из-за него шапку перекрывал первый
   экран. Здесь шапка возвращается наверх слоёв. */
html[data-showcase] header.site-header,
header.site-header#ecobar {
  position: sticky;
  top: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  height: var(--site-h, 5rem);
  margin-bottom: calc(var(--site-h, 5rem) * -1);
  border-bottom: 1px solid var(--site-line, rgba(255, 255, 255, .09));
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

html[data-showcase] .site-header__container {
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-left: clamp(1.4rem, 5vw, 6rem);
  padding-right: clamp(1.4rem, 5vw, 6rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

/* Бренд: знак + имя + подпись */
html[data-showcase] .site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: 0 0 auto;
  min-width: 0;
}
html[data-showcase] .site-header .brand__mark {
  width: var(--site-mark, 1.9rem);
  height: var(--site-mark, 1.9rem);
  padding: var(--site-mark-pad, .28rem);
  border-radius: var(--site-mark-radius, 8px);
  background: var(--site-mark-bg, transparent);
  border: 1px solid var(--site-mark-line, transparent);
  box-sizing: content-box;
  filter: var(--site-mark-filter, none);
  transition: filter .25s ease, background .25s ease;
}
html[data-showcase] .site-header .brand__text {
  display: grid;
  gap: .12rem;
  min-width: 0;
}
html[data-showcase] .site-header .brand__name {
  display: block;
  font-family: var(--site-name-font, var(--font-body));
  font-size: var(--site-name-size, 1rem);
  font-weight: var(--site-name-weight, 700);
  letter-spacing: var(--site-name-track, .02em);
  line-height: 1.05;
  color: var(--site-name-color, #fff);
  white-space: nowrap;
}
html[data-showcase] .site-header .brand__sub {
  display: block;
  font-size: var(--site-sub-size, .6rem);
  font-weight: 600;
  letter-spacing: var(--site-sub-track, .18em);
  text-transform: var(--site-sub-case, uppercase);
  line-height: 1.2;
  color: var(--site-sub-color, rgba(255, 255, 255, .6));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Меню */
html[data-showcase] .header-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  min-width: 0;
}
html[data-showcase] .header-nav-links {
  display: flex;
  align-items: center;
  gap: var(--site-nav-gap, 1.5rem);
  min-width: 0;
}
html[data-showcase] .header-nav-links .domain {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--site-nav-color, rgba(255, 255, 255, .72));
  font-family: var(--site-nav-font, var(--font-body));
  font-size: var(--site-nav-size, .78rem);
  font-weight: var(--site-nav-weight, 600);
  letter-spacing: var(--site-nav-track, .04em);
  text-transform: var(--site-nav-case, none);
  text-decoration: none;
  padding-block: .35rem;
  transition: color .2s ease;
}
html[data-showcase] .header-nav-links .domain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--site-nav-line-h, 1px);
  background: var(--site-accent, #fff);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
  border-radius: 2px;
}
html[data-showcase] .header-nav-links .domain:hover { color: var(--site-nav-hover, #fff); }
html[data-showcase] .header-nav-links .domain:hover::after { transform: scaleX(1); }

/* Блок действий */
html[data-showcase] .header-nav__actions {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex: 0 0 auto;
}

/* Переключатель языка */
html[data-showcase] .seg--lang {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 999px;
  background: var(--site-lang-bg, rgba(255, 255, 255, .06));
  border: 1px solid var(--site-lang-line, rgba(255, 255, 255, .12));
}
html[data-showcase] .seg--lang .seg__btn {
  border: 0;
  border-radius: 999px;
  padding: .3rem .48rem;
  background: transparent;
  color: var(--site-lang-color, rgba(255, 255, 255, .62));
  font-family: var(--font-body);
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
html[data-showcase] .seg--lang .seg__btn.is-active {
  background: var(--site-accent, #fff);
  color: var(--site-accent-ink, #0b0b0d);
}

/* Главное действие сайта (кнопка призыва в шапке) */
html[data-showcase] .header-nav__login#head-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: .5rem 1rem;
  border: var(--site-cta-line, 0);
  border-radius: var(--site-cta-radius, 6px);
  background: var(--site-cta-bg, var(--site-accent, #fff));
  color: var(--site-cta-color, #0b0b0d);
  font-family: var(--site-cta-font, var(--font-body));
  font-size: var(--site-cta-size, .76rem);
  font-weight: 800;
  letter-spacing: var(--site-cta-track, .06em);
  text-transform: var(--site-cta-case, uppercase);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter .2s ease, box-shadow .2s ease, background .2s ease;
}
html[data-showcase] .header-nav__login#head-cta:hover {
  filter: brightness(1.08);
  box-shadow: var(--site-cta-glow, 0 4px 16px rgba(0, 0, 0, .28));
}

/* Вход — спокойная вторичная кнопка (не спорит с главным действием) */
html[data-showcase] .header-nav__btn#head-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.3rem;
  padding: .45rem .85rem;
  border: 1px solid var(--site-login-line, rgba(255, 255, 255, .2));
  border-radius: var(--site-cta-radius, 6px);
  background: transparent;
  color: var(--site-login-color, #fff);
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s ease, border-color .2s ease;
}
html[data-showcase] .header-nav__btn#head-login:hover {
  background: var(--site-login-bg-hover, rgba(255, 255, 255, .1));
  border-color: var(--site-accent, rgba(255, 255, 255, .35));
}

/* Тонкая акцентная линия снизу — «подпись» сайта */
html[data-showcase] header.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--site-rule, linear-gradient(90deg, transparent, var(--site-accent, #fff), transparent));
  opacity: var(--site-rule-opacity, .55);
}

/* =========================================================================
   2. MONARQUE CLUB — monarque.ru · «Obsidian & Gold»
   Деловой хаб клуба. Строгий чёрный с золотом, разрежённая антиква,
   прямоугольная золотая кнопка.
   ========================================================================= */
html[data-showcase="club"] {
  --site-h: 5.2rem;
  --site-accent: #d9bc7a;
  --site-accent-ink: #14100a;
  --site-line: rgba(217, 188, 122, .26);
  --site-rule: linear-gradient(90deg, rgba(217, 188, 122, 0), #d9bc7a 22%, #f0e2bd 50%, #d9bc7a 78%, rgba(217, 188, 122, 0));
  --site-rule-opacity: .5;
  --site-mark: 1.85rem;
  --site-mark-pad: .26rem;
  --site-mark-radius: 6px;
  --site-mark-bg: rgba(217, 188, 122, .07);
  --site-mark-line: rgba(217, 188, 122, .4);
  --site-mark-filter: saturate(.55) brightness(1.1) hue-rotate(-6deg);
  --site-name-color: #f5f1e7;
  --site-sub-color: #cdb98d;
  --site-nav-size: .7rem;
  --site-nav-weight: 700;
  --site-nav-track: .18em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(245, 241, 231, .66);
  --site-nav-gap: 1.8rem;
  --site-cta-bg: linear-gradient(135deg, #e6cd94 0%, #c9a86a 100%);
  --site-cta-color: #17120a;
  --site-cta-radius: 4px;
  --site-cta-size: .7rem;
  --site-cta-track: .16em;
  --site-cta-glow: 0 6px 18px rgba(201, 168, 106, .3);
  --site-lang-bg: rgba(217, 188, 122, .08);
  --site-lang-line: rgba(217, 188, 122, .26);
  --site-lang-color: rgba(245, 241, 231, .6);
  --site-login-line: rgba(217, 188, 122, .34);
  --site-login-color: #f0e9d8;
}
html[data-showcase="club"] header.site-header {
  background: linear-gradient(to bottom, rgba(9, 8, 11, .96) 0%, rgba(9, 8, 11, .82) 68%, rgba(9, 8, 11, .35) 100%);
}
html[data-showcase="club"] header.site-header.is-stuck {
  background: rgba(8, 7, 10, .98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

/* =========================================================================
   3. МОНАРХ — monarque.ru, кабинет Резидента · «Obsidian & Gold»
   Шапка кабинета = шапка публичной части: золото на обсидиане, те же токены
   значение-в-значение, что у club. club и monarque — один сайт monarque.ru,
   поэтому вход в кабинет не должен менять оформление шапки.
   Решение владельца: «Всё золото на чёрном — публичная часть и кабинет одинаковые».
   ========================================================================= */
html[data-showcase="monarque"] {
  --site-h: 5.2rem;
  --site-accent: #d9bc7a;
  --site-accent-ink: #14100a;
  --site-line: rgba(217, 188, 122, .26);
  --site-rule: linear-gradient(90deg, rgba(217, 188, 122, 0), #d9bc7a 22%, #f0e2bd 50%, #d9bc7a 78%, rgba(217, 188, 122, 0));
  --site-rule-opacity: .5;
  --site-mark: 1.85rem;
  --site-mark-pad: .26rem;
  --site-mark-radius: 6px;
  --site-mark-bg: rgba(217, 188, 122, .07);
  --site-mark-line: rgba(217, 188, 122, .4);
  --site-mark-filter: saturate(.55) brightness(1.1) hue-rotate(-6deg);
  --site-name-color: #f5f1e7;
  --site-sub-color: #cdb98d;
  --site-nav-size: .7rem;
  --site-nav-weight: 700;
  --site-nav-track: .18em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(245, 241, 231, .66);
  --site-nav-gap: 1.8rem;
  --site-cta-bg: linear-gradient(135deg, #e6cd94 0%, #c9a86a 100%);
  --site-cta-color: #17120a;
  --site-cta-radius: 4px;
  --site-cta-size: .7rem;
  --site-cta-track: .16em;
  --site-cta-glow: 0 6px 18px rgba(201, 168, 106, .3);
  --site-lang-bg: rgba(217, 188, 122, .08);
  --site-lang-line: rgba(217, 188, 122, .26);
  --site-lang-color: rgba(245, 241, 231, .6);
  --site-login-line: rgba(217, 188, 122, .34);
  --site-login-color: #f0e9d8;
}
html[data-showcase="monarque"] header.site-header {
  background: linear-gradient(to bottom, rgba(9, 8, 11, .96) 0%, rgba(9, 8, 11, .82) 68%, rgba(9, 8, 11, .35) 100%);
}
html[data-showcase="monarque"] header.site-header.is-stuck {
  background: rgba(8, 7, 10, .98);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

/* =========================================================================
   4. MONARQUE LADY — monarque-lady.ru · «Blush atelier»
   Кабинет участницы. Тёплое розовое стекло, округлые формы, курсивная антиква.
   ========================================================================= */
html[data-showcase="studio"] {
  --site-h: 4.9rem;
  --site-accent: #e0a3b4;
  --site-accent-ink: #2a1017;
  --site-line: rgba(224, 163, 180, .24);
  --site-rule: linear-gradient(90deg, rgba(224, 163, 180, 0), #e0a3b4 30%, #f6d3dc 55%, #e0a3b4 80%, rgba(224, 163, 180, 0));
  --site-rule-opacity: .45;
  --site-mark: 1.8rem;
  --site-mark-pad: .26rem;
  --site-mark-radius: 999px;
  --site-mark-bg: rgba(224, 163, 180, .1);
  --site-mark-line: rgba(224, 163, 180, .42);
  --site-mark-filter: hue-rotate(-42deg) saturate(.7) brightness(1.18);
  --site-name-color: #fdf1f4;
  --site-sub-color: #e6b6c3;
  --site-nav-size: .78rem;
  --site-nav-weight: 600;
  --site-nav-track: .02em;
  --site-nav-color: rgba(253, 241, 244, .72);
  --site-nav-gap: 1.25rem;
  --site-cta-bg: linear-gradient(135deg, #f0b9c8 0%, #d98aa4 100%);
  --site-cta-color: #2a1017;
  --site-cta-radius: 999px;
  --site-cta-size: .75rem;
  --site-cta-track: .04em;
  --site-cta-case: none;
  --site-cta-glow: 0 6px 20px rgba(217, 138, 164, .34);
  --site-lang-bg: rgba(224, 163, 180, .1);
  --site-lang-line: rgba(224, 163, 180, .26);
  --site-lang-color: rgba(253, 241, 244, .66);
  --site-login-line: rgba(224, 163, 180, .38);
  --site-login-color: #fdf1f4;
}
html[data-showcase="studio"] header.site-header {
  background: linear-gradient(180deg, rgba(30, 20, 26, .95) 0%, rgba(26, 18, 24, .78) 70%, rgba(20, 14, 19, .42) 100%);
}
html[data-showcase="studio"] header.site-header.is-stuck {
  background: rgba(26, 17, 23, .98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}
html[data-showcase="studio"] .header-nav-links .domain::after {
  height: 2px;
  border-radius: 999px;
}

/* =========================================================================
   5. MONARQUE DATING — monarque-dating.ru · «Bordeaux night»
   Закрытый клуб знакомств. Тёмный бордо, ромбовидные разделители,
   контурная золотая кнопка.
   ========================================================================= */
html[data-showcase="dating"] {
  --site-h: 5rem;
  --site-accent: #c99a86;
  --site-accent-ink: #1b0f14;
  --site-line: rgba(201, 154, 134, .22);
  --site-rule: linear-gradient(90deg, rgba(201, 154, 134, 0), #c99a86 40%, #efd0c2 50%, #c99a86 60%, rgba(201, 154, 134, 0));
  --site-rule-opacity: .4;
  --site-mark: 1.75rem;
  --site-mark-pad: .25rem;
  --site-mark-radius: 3px;
  --site-mark-bg: rgba(201, 154, 134, .08);
  --site-mark-line: rgba(201, 154, 134, .38);
  --site-mark-filter: hue-rotate(-26deg) saturate(.5) brightness(1.02);
  --site-name-color: #f7e9e3;
  --site-sub-color: #cfa595;
  --site-nav-size: .68rem;
  --site-nav-weight: 700;
  --site-nav-track: .16em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(247, 233, 227, .64);
  --site-nav-gap: 1.35rem;
  --site-cta-bg: transparent;
  --site-cta-color: #f2d9cd;
  --site-cta-line: 1px solid rgba(201, 154, 134, .62);
  --site-cta-radius: 999px;
  --site-cta-size: .68rem;
  --site-cta-track: .14em;
  --site-cta-glow: 0 0 0 1px rgba(201, 154, 134, .2);
  --site-lang-bg: rgba(201, 154, 134, .08);
  --site-lang-line: rgba(201, 154, 134, .22);
  --site-lang-color: rgba(247, 233, 227, .6);
  --site-login-line: rgba(201, 154, 134, .26);
  --site-login-color: #f7e9e3;
}
html[data-showcase="dating"] header.site-header {
  background: linear-gradient(180deg, rgba(26, 13, 18, .95) 0%, rgba(23, 12, 16, .8) 70%, rgba(18, 10, 13, .42) 100%);
}
html[data-showcase="dating"] header.site-header.is-stuck {
  background: rgba(23, 11, 16, .98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}
/* ромб между пунктами меню — приём этого сайта */
html[data-showcase="dating"] .header-nav-links { gap: .9rem; }
html[data-showcase="dating"] .header-nav-links .domain + .domain::before {
  content: "◆";
  position: absolute;
  inset-inline-start: calc(-.62rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: .34rem;
  color: rgba(201, 154, 134, .55);
}

/* =========================================================================
   6. MISS MONARQUE — miss-monarque.ru · «Pageant porcelain»
   Конкурс красоты и грантов. Светлая фарфоровая шапка с тёмной
   антиквой и двойной золотой линией.
   ========================================================================= */
html[data-showcase="miss"] {
  --site-h: 5.4rem;
  --site-accent: #b18a3e;
  --site-accent-ink: #fdf8ee;
  --site-line: rgba(177, 138, 62, .34);
  --site-rule: linear-gradient(90deg, #d9c08a, #b18a3e 50%, #d9c08a);
  --site-rule-opacity: .8;
  --site-mark: 1.9rem;
  --site-mark-pad: .26rem;
  --site-mark-radius: 999px;
  --site-mark-bg: #fbf6ea;
  --site-mark-line: rgba(177, 138, 62, .45);
  --site-mark-filter: hue-rotate(-8deg) saturate(.85) brightness(.82);
  --site-name-color: #241c12;
  --site-sub-color: #8c7440;
  --site-nav-size: .72rem;
  --site-nav-weight: 700;
  --site-nav-track: .14em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(36, 28, 18, .68);
  --site-nav-hover: #241c12;
  --site-nav-gap: 1.6rem;
  --site-cta-bg: #241c12;
  --site-cta-color: #fbf6ea;
  --site-cta-radius: 999px;
  --site-cta-size: .7rem;
  --site-cta-track: .12em;
  --site-cta-glow: 0 6px 18px rgba(36, 28, 18, .28);
  --site-lang-bg: rgba(36, 28, 18, .05);
  --site-lang-line: rgba(177, 138, 62, .3);
  --site-lang-color: rgba(36, 28, 18, .6);
  --site-lang-active-color: #fbf6ea;
  --site-login-line: rgba(36, 28, 18, .28);
  --site-login-color: #241c12;
  --site-login-bg-hover: rgba(36, 28, 18, .07);
}
html[data-showcase="miss"] header.site-header {
  background: linear-gradient(180deg, rgba(251, 246, 234, .97) 0%, rgba(247, 240, 225, .93) 100%);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .34);
}
html[data-showcase="miss"] header.site-header.is-stuck {
  background: rgba(251, 246, 234, .99);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
}
/* двойная золотая линия под шапкой — конкурсный приём */
html[data-showcase="miss"] header.site-header::after {
  height: 3px;
  background: linear-gradient(90deg, #d9c08a, #b18a3e 50%, #d9c08a);
  opacity: .9;
}

/* =========================================================================
   7. MONARQUE CAREER — monarque-career.ru · «Graphite editorial»
   Подбор ассистенток. Графитовая шапка, стальная линия слева,
   строгая прямоугольная кнопка, меню с вертикальными разделителями.
   ========================================================================= */
html[data-showcase="career"] {
  --site-h: 4.7rem;
  --site-accent: #8fa6b8;
  --site-accent-ink: #101820;
  --site-line: rgba(143, 166, 184, .2);
  --site-rule: linear-gradient(90deg, #5f7c93, #a9c0d0, #5f7c93);
  --site-rule-opacity: .55;
  --site-mark: 1.7rem;
  --site-mark-pad: .24rem;
  --site-mark-radius: 2px;
  --site-mark-bg: rgba(143, 166, 184, .1);
  --site-mark-line: rgba(143, 166, 184, .3);
  --site-mark-filter: hue-rotate(168deg) saturate(.4) brightness(1.05);
  --site-name-color: #e9eff5;
  --site-sub-case: none;
  --site-sub-color: rgba(169, 192, 208, .85);
  --site-nav-size: .68rem;
  --site-nav-weight: 700;
  --site-nav-track: .16em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(233, 239, 245, .62);
  --site-nav-gap: 1.15rem;
  --site-cta-bg: linear-gradient(135deg, #7d9ab0 0%, #5f7c93 100%);
  --site-cta-color: #0d141a;
  --site-cta-radius: 2px;
  --site-cta-size: .68rem;
  --site-cta-track: .14em;
  --site-cta-glow: 0 4px 14px rgba(95, 124, 147, .34);
  --site-lang-bg: rgba(143, 166, 184, .09);
  --site-lang-line: rgba(143, 166, 184, .24);
  --site-lang-color: rgba(233, 239, 245, .6);
  --site-login-line: rgba(143, 166, 184, .34);
  --site-login-color: #e9eff5;
}
html[data-showcase="career"] header.site-header {
  background: linear-gradient(180deg, rgba(15, 19, 24, .96) 0%, rgba(14, 18, 23, .84) 70%, rgba(12, 16, 20, .42) 100%);
  border-inline-start: 3px solid rgba(143, 166, 184, .6);
}
html[data-showcase="career"] header.site-header.is-stuck {
  background: rgba(13, 17, 22, .98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
html[data-showcase="career"] .header-nav-links .domain {
  padding-inline-start: .85rem;
  border-inline-start: 1px solid rgba(143, 166, 184, .22);
}
html[data-showcase="career"] .header-nav-links .domain:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}

/* =========================================================================
   8. MONARQUE VOYAGE — monarque-voyage.ru · «Resort teal»
   Попутчицы и Plus-One. Морское стекло, широкий трекинг имени,
   выпуклая бирюзовая кнопка-пилюля.
   ========================================================================= */
html[data-showcase="travel"] {
  --site-h: 5rem;
  --site-accent: #7fc4b0;
  --site-accent-ink: #08211c;
  --site-line: rgba(127, 196, 176, .22);
  --site-rule: linear-gradient(90deg, rgba(127, 196, 176, 0), #7fc4b0 30%, #cfeae2 50%, #7fc4b0 70%, rgba(127, 196, 176, 0));
  --site-rule-opacity: .45;
  --site-mark: 1.8rem;
  --site-mark-pad: .26rem;
  --site-mark-radius: 999px;
  --site-mark-bg: rgba(127, 196, 176, .1);
  --site-mark-line: rgba(127, 196, 176, .36);
  --site-mark-filter: hue-rotate(118deg) saturate(.5) brightness(1.1);
  --site-name-color: #e6f6f2;
  --site-sub-case: none;
  --site-sub-color: #8fd0bd;
  --site-nav-size: .76rem;
  --site-nav-weight: 600;
  --site-nav-track: .06em;
  --site-nav-color: rgba(230, 246, 242, .7);
  --site-nav-gap: 1.4rem;
  --site-cta-bg: linear-gradient(135deg, #9edbc9 0%, #52a892 100%);
  --site-cta-color: #06201b;
  --site-cta-radius: 999px;
  --site-cta-size: .74rem;
  --site-cta-track: .06em;
  --site-cta-case: none;
  --site-cta-glow: 0 6px 20px rgba(82, 168, 146, .34);
  --site-lang-bg: rgba(127, 196, 176, .1);
  --site-lang-line: rgba(127, 196, 176, .24);
  --site-lang-color: rgba(230, 246, 242, .66);
  --site-login-line: rgba(127, 196, 176, .36);
  --site-login-color: #e6f6f2;
}
html[data-showcase="travel"] header.site-header {
  background: linear-gradient(110deg, rgba(9, 30, 28, .95) 0%, rgba(8, 26, 27, .85) 55%, rgba(10, 22, 24, .92) 100%);
}
html[data-showcase="travel"] header.site-header.is-stuck {
  background: rgba(8, 26, 25, .98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
}

/* =========================================================================
   9. MONARQUE CASTING — monarque-casting.ru · «Silver studio»
   Кастинги и портфолио. Холодная серебристо-лиловая шапка, моно-трекинг,
   острые углы без скруглений.
   ========================================================================= */
html[data-showcase="models"] {
  --site-h: 4.6rem;
  --site-accent: #b5a8c9;
  --site-accent-ink: #171321;
  --site-line: rgba(181, 168, 201, .22);
  --site-rule: linear-gradient(90deg, rgba(181, 168, 201, 0), #b5a8c9 45%, #e6e0f0 55%, rgba(181, 168, 201, 0));
  --site-rule-opacity: .5;
  --site-mark: 1.6rem;
  --site-mark-pad: .22rem;
  --site-mark-radius: 0;
  --site-mark-bg: rgba(181, 168, 201, .1);
  --site-mark-line: rgba(181, 168, 201, .34);
  --site-mark-filter: hue-rotate(226deg) saturate(.45) brightness(1.2);
  --site-name-color: #e4dff0;
  --site-sub-color: rgba(181, 168, 201, .9);
  --site-nav-size: .64rem;
  --site-nav-weight: 700;
  --site-nav-track: .2em;
  --site-nav-case: uppercase;
  --site-nav-color: rgba(228, 223, 240, .6);
  --site-nav-gap: 1rem;
  --site-nav-line-h: 2px;
  --site-cta-bg: transparent;
  --site-cta-color: #e4dff0;
  --site-cta-line: 1px solid rgba(181, 168, 201, .6);
  --site-cta-radius: 0;
  --site-cta-size: .66rem;
  --site-cta-track: .18em;
  --site-cta-glow: 0 0 0 1px rgba(181, 168, 201, .22);
  --site-lang-bg: rgba(181, 168, 201, .08);
  --site-lang-line: rgba(181, 168, 201, .22);
  --site-lang-color: rgba(228, 223, 240, .58);
  --site-login-line: rgba(181, 168, 201, .24);
  --site-login-color: #e4dff0;
}
html[data-showcase="models"] header.site-header {
  background: linear-gradient(180deg, rgba(19, 18, 24, .95) 0%, rgba(18, 17, 23, .82) 70%, rgba(16, 15, 21, .4) 100%);
}
html[data-showcase="models"] header.site-header.is-stuck {
  background: rgba(17, 16, 22, .98);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .55);
}
html[data-showcase="models"] .header-nav-links { gap: .55rem; }
html[data-showcase="models"] .header-nav-links .domain + .domain::before {
  content: "/";
  position: absolute;
  inset-inline-start: -.45rem;
  color: rgba(181, 168, 201, .45);
  font-weight: 400;
}
html[data-showcase="models"] .header-nav-links .domain + .domain { padding-inline-start: .1rem; }

/* =========================================================================
   10. MONARQUE GRANT — monarque-grant.ru · «Emerald capital»
   Гранты и менторство. Тёмно-изумрудная шапка, золотая антиква,
   кнопка с золотой обводкой.
   ========================================================================= */
html[data-showcase="venture"] {
  --site-h: 4.8rem;
  --site-accent: #d8b45a;
  --site-accent-ink: #12190f;
  --site-line: rgba(216, 180, 90, .26);
  --site-rule: linear-gradient(90deg, #2f7f63, #d8b45a 50%, #2f7f63);
  --site-rule-opacity: .7;
  --site-mark: 1.72rem;
  --site-mark-pad: .25rem;
  --site-mark-radius: 4px;
  --site-mark-bg: rgba(47, 127, 99, .22);
  --site-mark-line: rgba(216, 180, 90, .38);
  --site-mark-filter: hue-rotate(78deg) saturate(.5) brightness(.98);
  --site-name-color: #f0e8cd;
  --site-sub-color: #96c7b2;
  --site-nav-size: .72rem;
  --site-nav-weight: 600;
  --site-nav-track: .1em;
  --site-nav-color: rgba(240, 232, 205, .68);
  --site-nav-gap: 1.5rem;
  --site-cta-bg: linear-gradient(135deg, #2f7f63 0%, #1f5b46 100%);
  --site-cta-color: #f4eed6;
  --site-cta-line: 1px solid rgba(216, 180, 90, .55);
  --site-cta-radius: 5px;
  --site-cta-size: .7rem;
  --site-cta-track: .1em;
  --site-cta-glow: 0 6px 18px rgba(47, 127, 99, .34);
  --site-lang-bg: rgba(216, 180, 90, .08);
  --site-lang-line: rgba(216, 180, 90, .24);
  --site-lang-color: rgba(240, 232, 205, .6);
  --site-login-line: rgba(216, 180, 90, .3);
  --site-login-color: #f0e8cd;
}
html[data-showcase="venture"] header.site-header {
  background: linear-gradient(180deg, rgba(10, 22, 18, .96) 0%, rgba(9, 20, 17, .84) 70%, rgba(8, 17, 14, .42) 100%);
}
html[data-showcase="venture"] header.site-header.is-stuck {
  background: rgba(8, 19, 15, .98);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
}

/* =========================================================================
   11. Адаптив
   ========================================================================= */
@media (max-width: 1180px) {
  html[data-showcase] .header-nav { gap: .7rem; }
  html[data-showcase] .header-nav-links { gap: 1rem; }
  html[data-showcase] .header-nav-links .domain { font-size: .7rem; }
  html[data-showcase] .site-header .brand__sub { font-size: .52rem; }
}

@media (max-width: 900px) {
  html[data-showcase] .site-header__container { padding-inline: 1.15rem; }
  html[data-showcase] .header-nav-links { display: none; }
  html[data-showcase] .site-header .brand__sub { display: block; }
  html[data-showcase] .header-nav__login#head-cta { padding: .45rem .8rem; font-size: .68rem; }
  html[data-showcase] .header-nav__btn#head-login { padding: .4rem .65rem; font-size: .68rem; }
  html[data-showcase="career"] header.site-header { border-inline-start-width: 2px; }
}

@media (max-width: 720px) {
  html[data-showcase] .session .site-header__container,
  html[data-showcase] .site-header__container {
    gap: .5rem;
    padding-inline: 1rem;
  }
  /* Меню на узких экранах убираем по id: в styles.css есть #domain-nav
     с display:flex, и селектор по классу его не перекрывает. */
  html[data-showcase] #domain-nav { display: none !important; }
  html[data-showcase] .site-header .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  html[data-showcase] .site-header .brand__text { min-width: 0; }
  html[data-showcase] .site-header .brand__name {
    font-size: var(--site-name-size-m, .82rem);
    letter-spacing: var(--site-name-track-m, .12em);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html[data-showcase] .header-nav { flex: 0 0 auto; gap: 0; }
  html[data-showcase] .seg--lang { display: none; }
  /* Кнопки не должны выталкивать друг друга за экран */
  html[data-showcase] .header-nav__actions { gap: .35rem; flex-wrap: nowrap; }
  html[data-showcase] .header-nav__login#head-cta {
    padding: .42rem .7rem;
    font-size: .62rem;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  html[data-showcase] .header-nav__btn#head-login {
    padding: .38rem .55rem;
    font-size: .62rem;
    min-height: 2rem;
  }
}

@media (max-width: 620px) {
  html[data-showcase] { --site-h: 4.2rem; }
  html[data-showcase] .site-header .brand__mark { width: 1.55rem; height: 1.55rem; }
  html[data-showcase] .site-header .brand__sub { font-size: .46rem; letter-spacing: .12em; }
}

/* На самых узких экранах уступает вход, а главное действие остаётся */
@media (max-width: 480px) {
  html[data-showcase] .header-nav__btn#head-login { display: none; }
  html[data-showcase] .site-header .brand__name { letter-spacing: .08em; }
  html[data-showcase] .header-nav__login#head-cta { padding: .42rem .6rem; }
}

/* Узкие экраны: подпись бренда уступает место кнопкам */
@media (max-width: 420px) {
  html[data-showcase] .site-header .brand__sub { display: none; }
  html[data-showcase="miss"] header.site-header::after { height: 2px; }
}

/* RTL */
html[dir="rtl"][data-showcase] .header-nav-links .domain::after { transform-origin: right center; }
html[dir="rtl"][data-showcase="career"] .header-nav-links .domain {
  padding-inline-start: 0;
  padding-inline-end: .85rem;
  border-inline-start: 0;
  border-inline-end: 1px solid rgba(143, 166, 184, .22);
}
html[dir="rtl"][data-showcase="career"] .header-nav-links .domain:first-child {
  padding-inline-end: 0;
  border-inline-end: 0;
}

/* Печать: шапка не нужна */
@media print {
  html[data-showcase] header.site-header { display: none !important; }
}

/* =========================================================================
   12. КОНТЕНТ САЙТОВ — блоки, которые задают характер каждого сайта
   Базовые классы (.list-row, .trip, .venture, .casting, .lb, .wish,
   .mycard, .mstat) живут в styles.css; здесь — только то, что добавляет
   каждому сайту свой предметный разговор: вакансия = оклад и условия,
   поездка = даты и отель, проект = цель и собранная сумма,
   портфолио = рост и параметры.
   ========================================================================= */

/* ---------- CAREER: вакансия = оклад, город, командировки ----------
   Тема сайта тёмная, а список вакансий — редакционный (styles.css, слой 25:
   карточка без фона, разделители-линии). Поэтому все цвета берём из токенов
   темы, а не задаём светлую карточку. */
/* Горизонтальные поля 18px: у строки вакансии свой фон (--site-surface §14.6),
   и job__main прилипал к левому краю фона (замер до: padding 20.8px 0,
   job__main gapLeft=0). Вертикаль 1.3rem (20.8px) сохранена, горизонталь 18px —
   как у .trip__body. Сетка не ломается: box-sizing border-box (styles.css §2),
   ширина строки прежняя, разницу забирает колонка minmax(0, 1fr). */
html[data-showcase="career"] .list-row.job {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 1.4rem;
  align-items: start;
  padding: 1.3rem 0;
  padding-inline: 18px;
}
html[data-showcase="career"] .job__main { display: grid; gap: .45rem; min-width: 0; }
html[data-showcase="career"] .job__main h4 {
  font-size: 1.02rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--ink);
}
html[data-showcase="career"] .job__company {
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
}
html[data-showcase="career"] .job__text {
  font-size: .8rem;
  line-height: 1.62;
  color: var(--ink-2);
  margin: .1rem 0 0;
  max-width: 62ch;
}
html[data-showcase="career"] .job__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.6rem;
  margin: .6rem 0 0;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
}
html[data-showcase="career"] .job__facts > div { display: grid; gap: .12rem; min-width: 0; }
html[data-showcase="career"] .job__facts dt {
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
html[data-showcase="career"] .job__facts dd {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-2);
}
html[data-showcase="career"] .job__side {
  display: grid;
  gap: .5rem;
  justify-items: end;
  text-align: end;
  align-content: start;
}
html[data-showcase="career"] .job__side .list-row__salary {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
}
html[data-showcase="career"] .job__hint {
  font-size: .6rem;
  line-height: 1.45;
  color: var(--muted);
  max-width: 12rem;
}
@media (max-width: 780px) {
  html[data-showcase="career"] .list-row.job { grid-template-columns: 1fr; gap: .9rem; }
  html[data-showcase="career"] .job__side { justify-items: start; text-align: start; }
}

/* подбор кандидаток: список, а не сетка «процентов» */
html[data-showcase] .matches {
  display: grid;
  gap: .5rem;
  margin-top: 1rem;
}
html[data-showcase] .matches .match__body i {
  font-style: normal;
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--muted, #8e8e8a);
}

/* ---------- TRAVEL: поездка = даты, отель, кто платит ---------- */
html[data-showcase="travel"] .trip { display: flex; flex-direction: column; }
html[data-showcase="travel"] .trip__body { display: grid; gap: .45rem; align-content: start; flex: 1 1 auto; }
html[data-showcase="travel"] .trip__row {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  font-size: .76rem;
  line-height: 1.5;
  color: var(--ink-2, #d6d6d2);
}
html[data-showcase="travel"] .trip__row > span { min-width: 0; }
html[data-showcase="travel"] .trip__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-top: .9rem;
  padding-top: .8rem;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .1));
}
html[data-showcase="travel"] .trip__spots {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #8e8e8a);
}

/* ---------- MODELS: портфолио = параметры на первом месте ---------- */
html[data-showcase="models"] .casting__langs {
  display: block;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #8e8e8a);
  margin: .1rem 0 .5rem;
}
html[data-showcase="models"] .casting__params {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .3rem;
  font-family: var(--font-mono);
}
html[data-showcase="models"] .casting__params .param {
  font-size: .55rem;
  letter-spacing: .14em;
  color: var(--muted, #8e8e8a);
  display: grid;
  gap: .18rem;
}
html[data-showcase="models"] .casting__params .param b {
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--ink, #f4f4f2);
}
html[data-showcase="models"] .casting__filters { flex-wrap: wrap; }

/* ---------- VENTURE: проект = цель, собрано, что ищет ---------- */
html[data-showcase="venture"] .venture { display: flex; flex-direction: column; }
html[data-showcase="venture"] .venture__format {
  font-size: .76rem;
  line-height: 1.55;
  color: var(--ink-2, #d6d6d2);
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid var(--line, rgba(255, 255, 255, .1));
}
html[data-showcase="venture"] .funding__meta {
  display: flex;
  justify-content: space-between;
  gap: .8rem;
  font-size: .72rem;
  color: var(--muted, #8e8e8a);
}
html[data-showcase="venture"] .funding__meta b { color: var(--ink, #f4f4f2); font-weight: 700; }

/* ---------- MISS: рейтинг сезона ---------- */
html[data-showcase="miss"] .lb__votes span { letter-spacing: .1em; text-transform: uppercase; font-size: .55rem; }

/* ---------- STUDIO: образы из примерочной ---------- */
html[data-showcase="studio"] .garments {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 1rem;
}
html[data-showcase="studio"] .garment-card {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(224, 163, 180, .2);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255, 255, 255, .03);
  transition: border-color .22s ease, transform .22s ease;
}
html[data-showcase="studio"] .garment-card:hover { border-color: rgba(224, 163, 180, .45); }
html[data-showcase="studio"] .garment-card.is-active { border-color: #e0a3b4; box-shadow: 0 10px 30px -18px rgba(224, 163, 180, .6); }
html[data-showcase="studio"] .garment-card__media { position: relative; aspect-ratio: 3 / 4; overflow: hidden; }
html[data-showcase="studio"] .garment-card__media img { width: 100%; height: 100%; object-fit: cover; }
html[data-showcase="studio"] .garment-card__brand {
  position: absolute;
  top: .6rem;
  left: .6rem;
  background: rgba(26, 17, 23, .82);
  border: 1px solid rgba(224, 163, 180, .4);
  color: #fdf1f4;
}
html[data-showcase="studio"] .garment-card__body {
  display: grid;
  gap: .25rem;
  padding: .8rem .9rem .5rem;
}
html[data-showcase="studio"] .garment-card__body b {
  font-size: .82rem;
  line-height: 1.35;
  font-weight: 600;
  color: #fdf1f4;
}
html[data-showcase="studio"] .garment-card__body > span {
  font-family: var(--font-mono);
  font-size: .74rem;
  color: #e6b6c3;
}
html[data-showcase="studio"] .garment-card__foot {
  display: flex;
  gap: .4rem;
  padding: .5rem .9rem .9rem;
  margin-top: auto;
}

/* ---------- MY-CARDS: карточка на конкретном сайте ---------- */
html[data-showcase] .mycard__stats {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted, #8e8e8a);
}

/* Кнопка отклика внутри вакансии: акцент сайта, а не заливка цветом текста */
html[data-showcase="career"] .list-row.job .btn--gold,
html[data-showcase="career"] .list-row.job .btn--gold:hover {
  background: var(--site-accent, #8fa6b8);
  color: var(--site-accent-ink, #101820);
  border-color: transparent;
  box-shadow: var(--site-cta-glow, none);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .62rem;
  padding-inline: 1rem;
}

/* =========================================================================
   13. КОМПЕНСАЦИЯ ЛИПКОЙ ШАПКИ
   Шапка лежит поверх первого экрана (margin-bottom = -высота шапки).
   Страницы с первым экраном-промо компенсируют это своим padding-top,
   а кабинеты (Монарх, Студия) начинаются сразу с контента — им нужен отступ.
   ========================================================================= */
html[data-showcase="monarque"] main#view > .cc:first-child,
html[data-showcase="studio"] main#view > .cc:first-child {
  padding-top: calc(var(--site-h, 4.8rem) + 1.2rem);
}

/* То же для страниц, где первый блок — не промо, а обычная секция */
html[data-showcase] main#view > .section:first-child {
  padding-top: calc(var(--site-h, 4.8rem) + 1rem);
}

/* =========================================================================
   14. ФОН СТРАНИЦЫ В ТОНЕ ШАПКИ
   -------------------------------------------------------------------------
   Требование владельца: если у сайта свой цвет шапки, то и весь сайт
   должен быть в этом тоне, а не чёрный у всех.

   Механика: у каждого сайта свой набор переменных (--site-bg, --site-bg-2,
   --site-surface, --site-text, ...). Дальше эти переменные подставляются в
   общие токены styles.css (--bg, --surface, --ink, --muted, --line, --acc),
   поэтому перекрашиваются сразу все компоненты: секции, карточки, панели,
   футер, модалки, кнопки, бейджи, разделители.

   Контраст посчитан по WCAG: основной текст ≥ 14:1, вторичный ≥ 11:1,
   приглушённый ≥ 5.5:1 на фоне и на карточках — везде выше AA (4.5:1).
   ========================================================================= */

/* ---------- 14.1. Общая связка токенов ---------- */
html[data-showcase] {
  --bg: var(--site-bg);
  --obsidian-0: var(--site-bg);
  --obsidian-1: var(--site-bg);
  --obsidian-2: var(--site-bg-2);
  --obsidian-3: var(--site-surface);
  --surface: var(--site-surface);
  --surface-2: var(--site-surface-2);
  --ink: var(--site-text);
  --ink-2: var(--site-text-soft);
  --muted: var(--site-muted);
  --muted-2: var(--site-muted);
  --line: var(--site-border);
  --line-2: var(--site-border-strong);
  --gold-line: var(--site-border);
  --gold-line-strong: var(--site-border-strong);
  --gold-1: var(--site-text);
  --gold-2: var(--site-text-soft);
  --gold-3: var(--site-text-soft);
  --gold-4: var(--site-muted);
  --gold-5: var(--site-muted);
  --acc: var(--site-acc);
  --acc-2: var(--site-acc-2);
  --glass: var(--site-surface);
  --panel: var(--site-surface);

  background-color: var(--site-bg);
  color: var(--site-text);
}
html[data-showcase] body {
  background-color: var(--site-bg);
  color: var(--site-text);
}

/* ---------- 14.2. Палитры сайтов ---------- */

/* CLUB — золото на обсидиане */
html[data-showcase="club"] {
  --site-bg: #060509;
  --site-bg-2: #0a090e;
  --site-surface: #101017;
  --site-surface-2: #16161f;
  --site-text: #f7f2e2;
  --site-text-soft: #e0d3b0;
  --site-muted: #b3a583;
  --site-border: rgba(217, 188, 122, .22);
  --site-border-strong: rgba(217, 188, 122, .40);
  --site-acc: #d9bc7a;
  --site-acc-2: #e8d3a0;
  --site-on-accent: #1a160c;
}

/* МОНАРХ — золото на обсидиане (палитра идентична club: club и monarque —
   один сайт monarque.ru, вход в кабинет не должен менять оформление.
   Решение владельца: «Всё золото на чёрном — публичная часть и кабинет
   одинаковые».) */
html[data-showcase="monarque"] {
  --site-bg: #060509;
  --site-bg-2: #0a090e;
  --site-surface: #101017;
  --site-surface-2: #16161f;
  --site-text: #f7f2e2;
  --site-text-soft: #e0d3b0;
  --site-muted: #b3a583;
  --site-border: rgba(217, 188, 122, .22);
  --site-border-strong: rgba(217, 188, 122, .40);
  --site-acc: #d9bc7a;
  --site-acc-2: #e8d3a0;
  --site-on-accent: #1a160c;
}

/* STUDIO — розовое стекло на тёмной сливе */
html[data-showcase="studio"] {
  --site-bg: #1a0c10;
  --site-bg-2: #241217;
  --site-surface: #301a20;
  --site-surface-2: #3a2028;
  --site-text: #fdf1f4;
  --site-text-soft: #e8cdd5;
  --site-muted: #c2a3ad;
  --site-border: rgba(224, 163, 180, .22);
  --site-border-strong: rgba(224, 163, 180, .40);
  --site-acc: #e0a3b4;
  --site-acc-2: #efc0cd;
  --site-on-accent: #2a1017;
}

/* DATING — бордо */
html[data-showcase="dating"] {
  --site-bg: #1a0b10;
  --site-bg-2: #241016;
  --site-surface: #301a21;
  --site-surface-2: #3a2129;
  --site-text: #f7e9e3;
  --site-text-soft: #e2c7bb;
  --site-muted: #bd9f94;
  --site-border: rgba(201, 154, 134, .22);
  --site-border-strong: rgba(201, 154, 134, .40);
  --site-acc: #c99a86;
  --site-acc-2: #dcb5a4;
  --site-on-accent: #1b0f14;
}

/* MISS — фарфор (единственный СВЕТЛЫЙ сайт) */
html[data-showcase="miss"] {
  --site-bg: #f7f2e6;
  --site-bg-2: #fbf7ee;
  --site-surface: #fffdf8;
  --site-surface-2: #ffffff;
  --site-text: #241c12;
  --site-text-soft: #3d3222;
  --site-muted: #6b5f4a;
  --site-border: rgba(36, 28, 18, .14);
  --site-border-strong: rgba(36, 28, 18, .26);
  /* акцент как ТЕКСТ должен читаться на фарфоре: #b18a3e давал 2.9:1,
     поэтому для текста и кнопок берём тёмное золото 5.5:1 */
  --site-acc: #7d5c20;
  --site-acc-2: #8f6b28;
  --site-on-accent: #fdf8ee;
}

/* CAREER — сталь на графите */
html[data-showcase="career"] {
  --site-bg: #0c141a;
  --site-bg-2: #121c24;
  --site-surface: #1a2630;
  --site-surface-2: #22303b;
  --site-text: #e9eff5;
  --site-text-soft: #c6d2dc;
  --site-muted: #93a2b1;
  --site-border: rgba(143, 166, 184, .22);
  --site-border-strong: rgba(143, 166, 184, .40);
  --site-acc: #8fa6b8;
  --site-acc-2: #a9bccb;
  --site-on-accent: #101820;
}

/* TRAVEL — морское стекло */
html[data-showcase="travel"] {
  --site-bg: #0c1a16;
  --site-bg-2: #12241f;
  --site-surface: #1a302a;
  --site-surface-2: #223b34;
  --site-text: #e6f6f2;
  --site-text-soft: #c2e2d9;
  --site-muted: #8fb2a8;
  --site-border: rgba(127, 196, 176, .22);
  --site-border-strong: rgba(127, 196, 176, .40);
  --site-acc: #7fc4b0;
  --site-acc-2: #9edbc9;
  --site-on-accent: #08211c;
}

/* MODELS — серебристый лиловый */
html[data-showcase="models"] {
  --site-bg: #120c1a;
  --site-bg-2: #191224;
  --site-surface: #231a30;
  --site-surface-2: #2c223b;
  --site-text: #e4dff0;
  --site-text-soft: #c8c0dc;
  --site-muted: #a196b6;
  --site-border: rgba(181, 168, 201, .22);
  --site-border-strong: rgba(181, 168, 201, .40);
  --site-acc: #b5a8c9;
  --site-acc-2: #cbbfdc;
  --site-on-accent: #171321;
}

/* VENTURE — изумруд с золотом */
html[data-showcase="venture"] {
  --site-bg: #0a1712;
  --site-bg-2: #0f2219;
  --site-surface: #152d22;
  --site-surface-2: #1c392c;
  --site-text: #f0e8cd;
  --site-text-soft: #d6cfae;
  --site-muted: #a3a184;
  --site-border: rgba(216, 180, 90, .24);
  --site-border-strong: rgba(216, 180, 90, .42);
  --site-acc: #d8b45a;
  --site-acc-2: #e6c87c;
  --site-on-accent: #12190f;
}

/* ---------- 14.3. Фоновая подложка ---------- */
/* .ambient в styles.css уже display:none, но если его включат — он не должен
   перекрывать фон сайта чёрным градиентом. */
html[data-showcase] .ambient {
  display: none;
  background: none;
}
html[data-showcase] .ambient__glow { display: none; }

/* ---------- 14.4. Первый экран ---------- */
html[data-showcase] .hero-compact { background-color: var(--site-bg); }
html[data-showcase] .hero-compact__video-wrap::before {
  background: linear-gradient(
    to right,
    var(--site-bg) 0%,
    color-mix(in srgb, var(--site-bg) 92%, transparent) 30%,
    color-mix(in srgb, var(--site-bg) 45%, transparent) 70%,
    transparent 100%
  );
}
html[data-showcase] .hero-compact__video-wrap::after {
  background: linear-gradient(
    to left,
    var(--site-bg) 0%,
    color-mix(in srgb, var(--site-bg) 92%, transparent) 30%,
    color-mix(in srgb, var(--site-bg) 45%, transparent) 70%,
    transparent 100%
  );
}
html[data-showcase] .hero-compact__overlay {
  background:
    linear-gradient(90deg,
      var(--site-bg) 0%,
      color-mix(in srgb, var(--site-bg) 86%, transparent) 16%,
      color-mix(in srgb, var(--site-bg) 30%, transparent) 38%,
      transparent 55%,
      transparent 70%,
      color-mix(in srgb, var(--site-bg) 55%, transparent) 90%,
      var(--site-bg) 100%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--site-bg) 35%, transparent) 0%,
      transparent 22%,
      transparent 62%,
      var(--site-bg) 100%);
}
html[data-showcase] .hero-compact__hide {
  background: color-mix(in srgb, var(--site-bg) 78%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text-soft);
}
html[data-showcase] .hero-restore {
  background: var(--site-bg-2);
  border-bottom-color: var(--site-border);
  color: var(--site-muted);
}
html[data-showcase] .hero-restore button { color: var(--site-acc); }

/* ---------- 14.5. Полосы секций ----------
   В styles.css у models/venture/travel были СВЕТЛЫЕ полосы с тёмным текстом,
   а финальный слой перекрасил фон полосы в тёмный — текст остался тёмным на
   тёмном (контраст ~1.05, нечитаемо). Здесь полоса снова становится
   производной от фона сайта, а текст — от токенов. */
html[data-showcase="models"] .section:nth-of-type(2),
html[data-showcase="models"] .section:nth-of-type(2) h2,
html[data-showcase="models"] .section:nth-of-type(2) .lead,
html[data-showcase="models"] .section:nth-of-type(2) .card__body,
html[data-showcase="models"] .section:nth-of-type(2) .card__text {
  color: var(--site-text);
}
html[data-showcase="models"] .section:nth-of-type(2)::before { background: var(--site-bg-2); }
html[data-showcase="models"] .section:nth-of-type(2) .kicker { color: var(--site-acc); }
html[data-showcase="models"] .section:nth-of-type(2) .card {
  background: var(--site-surface);
  border-color: var(--site-border);
}
html[data-showcase="models"] .section:nth-of-type(2) .chip {
  color: var(--site-text-soft);
  border-color: var(--site-border-strong);
  background: transparent;
}
html[data-showcase="models"] .section:nth-of-type(2) .chip.is-active {
  background: var(--site-acc);
  color: var(--site-on-accent);
  border-color: var(--site-acc);
}
html[data-showcase="models"] .section:nth-of-type(2) .param {
  background: transparent;
  color: var(--site-muted);
}
html[data-showcase="models"] .section:nth-of-type(2) .param b { color: var(--site-text); }
html[data-showcase="models"] .section:nth-of-type(2) .card__foot { border-color: var(--site-border); }
html[data-showcase="models"] .section:nth-of-type(2) .btn--ghost {
  color: var(--site-text);
  border-color: var(--site-border-strong);
}
html[data-showcase="models"] .section:nth-of-type(2) .btn--gold { color: var(--site-on-accent); }

html[data-showcase="venture"] .section:nth-of-type(3),
html[data-showcase="venture"] .section:nth-of-type(3) h2,
html[data-showcase="venture"] .section:nth-of-type(3) .lead,
html[data-showcase="venture"] .section:nth-of-type(3) .wish__body b {
  color: var(--site-text);
}
html[data-showcase="venture"] .section:nth-of-type(3)::before { background: var(--site-bg-2); }
html[data-showcase="venture"] .section:nth-of-type(3) .kicker { color: var(--site-acc); }
html[data-showcase="venture"] .section:nth-of-type(3) .wish {
  background: var(--site-surface);
  border-color: var(--site-border);
}
html[data-showcase="venture"] .section:nth-of-type(3) .wish__status { color: var(--site-muted); }
html[data-showcase="venture"] .section:nth-of-type(3) .btn--gold { color: var(--site-on-accent); }

/* Полоса — во всю ширину экрана; контент остаётся на сетке (left: 34px), поэтому
   выравнивание с соседними секциями не меняется: горизонтальный padding у секции
   остаётся 0. Замер до правки (1440px): у travel/miss фон был на самой секции и шёл
   от x=34 до x=1086; у models/venture псевдоэлемент с left/right:
   calc((100vw - 100%) / -2) накрывал -160..1280, то есть справа оставалась дыра 160px.
   ПОЧЕМУ НЕ calc(50% - 50vw): полоса стоит в сетке с боковой колонкой новостей, секция
   не центрирована в вьюпорте (left: 34px, width: 1052px), и симметричный расчёт даёт
   сдвинутую полосу. inset-inline: -100vw уводит полосу за оба края вьюпорта при любой
   раскладке; вылет обрезает body { overflow-x: hidden } (styles.css), поэтому
   горизонтальной прокрутки нет: при попытке scrollTo(800, 0) window.scrollX остаётся 0
   (scrollWidth при этом равен ширине псевдоэлемента — это обрезанная, не прокручиваемая
   часть). */
html[data-showcase="travel"] .section:nth-of-type(2),
html[data-showcase="miss"] .section.section:nth-of-type(2) {
  background: none;
  position: relative;
  z-index: 0;
  /* clip-path из styles.css обрезал бы псевдоэлемент; рамка переезжает на него,
     чтобы идти по краю экрана, а не по границе контейнера */
  clip-path: none;
  border-block: 0;
}
html[data-showcase="travel"] .section:nth-of-type(2)::before,
html[data-showcase="miss"] .section.section:nth-of-type(2)::before {
  content: "";
  position: absolute;
  inset-inline: -100vw;
  inset-block: -1px;
  background: var(--site-bg-2);
  border-block: 1px solid var(--site-border);
  z-index: -1;
}
/* у models/venture псевдоэлемент с фоном уже есть — расширяем inset-inline, не дублируем */
html[data-showcase="models"] .section:nth-of-type(2)::before,
html[data-showcase="venture"] .section:nth-of-type(3)::before {
  inset-inline: -100vw;
}
html[data-showcase="travel"] .section:nth-of-type(2) .kicker { color: var(--site-acc); }
html[data-showcase="studio"] .hero { background: var(--site-bg); }

/* ---------- 14.6. Карточки, панели, полосы CTA ---------- */
html[data-showcase] .panel,
html[data-showcase] .card,
html[data-showcase] .tripwire,
html[data-showcase] .venture,
html[data-showcase] .lb,
html[data-showcase] .wish,
html[data-showcase] .match,
html[data-showcase] .picker,
html[data-showcase] .garment,
html[data-showcase] .trip,
html[data-showcase] .media-panel,
html[data-showcase] .lipsync,
html[data-showcase] .stage,
html[data-showcase] .list-row,
html[data-showcase] .cta-band,
html[data-showcase] .mstat,
html[data-showcase] .panel--pad {
  background: var(--site-surface);
  border-color: var(--site-border);
}
html[data-showcase] .cta-band {
  background:
    radial-gradient(600px 220px at 92% -10%, color-mix(in srgb, var(--site-acc) 12%, transparent), transparent 70%),
    var(--site-surface);
  border-color: var(--site-border-strong);
}
html[data-showcase] .cta-band h2,
html[data-showcase] .cta-band .lead { color: var(--site-text); }
html[data-showcase] .cta-band .lead { color: var(--site-text-soft); }
html[data-showcase] .param {
  background: color-mix(in srgb, var(--site-acc) 10%, transparent);
  color: var(--site-text-soft);
}
html[data-showcase] .param b { color: var(--site-text); }
html[data-showcase] .badge {
  background: color-mix(in srgb, var(--site-acc) 12%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text-soft);
}
html[data-showcase] .badge--gold {
  background: color-mix(in srgb, var(--site-acc) 18%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .chip {
  background: transparent;
  border-color: var(--site-border-strong);
  color: var(--site-text-soft);
}
html[data-showcase] .chip:hover {
  background: var(--site-surface-2);
  border-color: var(--site-acc);
  color: var(--site-text);
}
html[data-showcase] .chip.is-active {
  background: var(--site-acc);
  color: var(--site-on-accent);
  border-color: var(--site-acc);
}

/* ---------- 14.7. Кнопки ---------- */
html[data-showcase] .btn--gold {
  background: var(--site-acc);
  color: var(--site-on-accent);
  border-color: var(--site-acc);
}
html[data-showcase] .btn--gold:hover {
  background: var(--site-acc-2);
  border-color: var(--site-acc-2);
  color: var(--site-on-accent);
}
html[data-showcase] .hero__actions .btn--gold {
  background: var(--site-acc);
  color: var(--site-on-accent);
}
html[data-showcase] .hero__actions .btn--gold:hover {
  background: var(--site-acc-2);
  color: var(--site-on-accent);
}
html[data-showcase] .btn--ghost {
  background: color-mix(in srgb, var(--site-text) 7%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .btn--ghost:hover {
  background: color-mix(in srgb, var(--site-text) 13%, transparent);
}
html[data-showcase] .m-cta .btn--gold,
html[data-showcase] .m-hero__actions .btn--gold,
html[data-showcase] .cta-band .btn--gold {
  background: var(--site-acc);
  color: var(--site-on-accent);
  border-color: var(--site-acc);
}

/* ---------- 14.8. Подвал ---------- */
html[data-showcase] .foot {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--site-bg-2) 82%, transparent),
    var(--site-bg));
  border-top-color: var(--site-border-strong);
  color: var(--site-text-soft);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-showcase] .foot h5 { color: var(--site-text-soft); }
html[data-showcase] .foot a,
html[data-showcase] .foot li,
html[data-showcase] .foot__brand p { color: var(--site-muted); }
html[data-showcase] .foot a:hover { color: var(--site-text); }
html[data-showcase] .foot__bottom {
  border-top-color: var(--site-border);
  color: var(--site-muted);
}
html[data-showcase] .foot__brand .brand__name { color: var(--site-text); }

/* ---------- 14.9. Модалки, тосты, служебные чипы ---------- */
html[data-showcase] .sheet {
  background:
    radial-gradient(600px 240px at 50% 0%, color-mix(in srgb, var(--site-acc) 10%, transparent), transparent 70%),
    var(--site-surface-2);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .modal__backdrop { background: color-mix(in srgb, var(--site-bg) 78%, transparent); }
html[data-showcase] .toast {
  background: var(--site-surface-2);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .reel__sheet {
  background: color-mix(in srgb, var(--site-bg) 94%, transparent);
  border-top-color: var(--site-border-strong);
}
html[data-showcase] .reel__handle {
  background: color-mix(in srgb, var(--site-bg) 62%, transparent);
  border-color: var(--site-border-strong);
}
html[data-showcase] .reel__handle:hover {
  background: var(--site-acc);
  border-color: var(--site-acc);
}
html[data-showcase] .reel__videotag {
  background: color-mix(in srgb, var(--site-bg) 66%, transparent);
  border-color: var(--site-border-strong);
}
html[data-showcase] .notice {
  background: color-mix(in srgb, var(--site-acc) 9%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .filters .select,
html[data-showcase] .select {
  background: var(--site-surface-2);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase] .toggle { background: color-mix(in srgb, var(--site-text) 14%, transparent); }

/* карточки Студии и Монарха */
html[data-showcase] .mycard,
html[data-showcase] .garment-card {
  background: var(--site-surface);
  border-color: var(--site-border);
}
html[data-showcase] .mycard__bar,
html[data-showcase] .mycard__stats { border-color: var(--site-border); }

/* ---------- 14.10. MISS: светлый сайт, тёмный текст ---------- */
/* Первый экран: подложка фарфоровая, поэтому текст на ней — тёмный. */
html[data-showcase="miss"] .hero-compact h1 { color: var(--site-text); text-shadow: none; }
html[data-showcase="miss"] .hero-compact h1 span,
html[data-showcase="miss"] .hero-compact h1 em {
  color: var(--site-acc);
  text-shadow: none;
}
html[data-showcase="miss"] .hero-compact p { color: var(--site-text-soft); }
html[data-showcase="miss"] .hero__badge {
  background: color-mix(in srgb, var(--site-acc) 12%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-acc);
}
html[data-showcase="miss"] .hero__dot {
  background: var(--site-acc);
  box-shadow: 0 0 10px color-mix(in srgb, var(--site-acc) 55%, transparent);
}
html[data-showcase="miss"] .hero__dot::after { border-color: var(--site-acc); }
html[data-showcase="miss"] .hero__actions .btn--ghost {
  background: color-mix(in srgb, var(--site-text) 6%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text);
}
html[data-showcase="miss"] .hero-compact__hide {
  background: color-mix(in srgb, var(--site-surface) 88%, transparent);
  color: var(--site-text-soft);
}
/* Чипы статусов и служебные подписи на светлом фоне */
html[data-showcase="miss"] .badge {
  background: color-mix(in srgb, var(--site-text) 7%, transparent);
  border-color: var(--site-border-strong);
  color: var(--site-text-soft);
}
html[data-showcase="miss"] .badge--real {
  background: rgba(47, 122, 79, .12);
  border-color: rgba(47, 122, 79, .34);
  color: #245c3a;
}
html[data-showcase="miss"] .media-panel,
html[data-showcase="miss"] .lipsync { background: var(--site-surface); }
html[data-showcase="miss"] .modal__backdrop { background: rgba(36, 28, 18, .55); }
html[data-showcase="miss"] .toast { background: var(--site-surface-2); color: var(--site-text); }

/* ---------- 14.11. MISS: точечные правки поверх styles.css ---------- */
/* В styles.css для miss зашиты светлые цвета, рассчитанные на тёмный фон
   (#ded6c7 на фарфоре даёт 1.29:1 — нечитаемо). Возвращаем контраст. */
html[data-showcase="miss"] .leaderboard .lb__votes b,
html[data-showcase="miss"] .lb__votes b { color: var(--site-text); }
html[data-showcase="miss"] .lb__votes span { color: var(--site-muted); }
html[data-showcase="miss"] .lb__rank { color: var(--site-muted); }
html[data-showcase="miss"] .lb__rank--top {
  background: var(--site-text);
  color: var(--site-bg);
  border-radius: 4px;
  padding-inline: .35rem;
}
html[data-showcase="miss"] .lb__name b { color: var(--site-text); }
html[data-showcase="miss"] .lb__name span { color: var(--site-muted); }
html[data-showcase="miss"] .lb { border-color: var(--site-border); }
html[data-showcase="miss"] .leaderboard .lb { border-color: var(--site-border); }
/* Фон полосы miss рисует ::before из §14.5 — на самой секции фона быть не должно,
   иначе полоса снова упирается в границу контейнера (x=34). */
html[data-showcase="miss"] .section.section:nth-of-type(2) .kicker { color: var(--site-acc); }
html[data-showcase="miss"] .domain:not(.is-active) .domain__key { color: var(--site-text-soft); }
html[data-showcase="miss"] .domain:hover .domain__key { color: var(--site-text); }
html[data-showcase="miss"] .card__text,
html[data-showcase="miss"] .lead,
html[data-showcase="miss"] .muted { color: var(--site-muted); }
html[data-showcase="miss"] .kicker { color: var(--site-acc); }
html[data-showcase="miss"] h1,
html[data-showcase="miss"] h2,
html[data-showcase="miss"] h3,
html[data-showcase="miss"] h4 { color: var(--site-text); }

/* =========================================================================
   15. ЛОГОТИП В ШАПКЕ
   -------------------------------------------------------------------------
   Замечание владельца: «Сам утверждённый логотип ОК, но у тебя он весь
   кривой. Убери рамку и уменьши расстояние между буквами в MONARQUE CLUB».

   Что исправлено:
   1. Убрана рамка и подложка у знака — квадрат с обводкой и скруглением
      больше не рисуется, монограмма стоит свободно.
   2. Знак берёт цвет акцента своего сайта: на клубе золотой, на студии
      розовый, на знакомствах бордовый и т.д. Раньше это делалось фильтром
      hue-rotate над оранжевым градиентом — цвет получался «на глаз» и
      плавал от сайта к сайту. Теперь SVG работает как маска, а заливка —
      var(--site-acc): цвет точный, из той же палитры, что и шапка.
   3. Трекинг имени сжат: было .28–.34em, стало .08–.12em. Слово
      «MONARQUE CLUB» больше не растянуто.
   4. Размер знака выровнен между сайтами (--site-mark: 1.75rem везде),
      чтобы при переходах он не «прыгал».
   5. Hover не меняет ни положение, ни размер знака.
   ========================================================================= */

/* ---------- 15.1. Знак: без рамки, в цвете акцента ---------- */
html[data-showcase] .site-header .brand__mark {
  width: var(--site-mark, 1.75rem);
  height: var(--site-mark, 1.75rem);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  filter: none;
  box-sizing: border-box;
  flex: 0 0 auto;
}

/* Окраска: SVG как маска + заливка акцентом сайта.
   <img> изолирован от страницы, поэтому currentColor в нём не работает —
   маска единственный способ отдать знаку точный цвет палитры сайта. */
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  html[data-showcase] .site-header .brand__mark {
    /* картинку скрываем, её место занимает маска на ::before */
    display: none;
  }
  html[data-showcase] .site-header .brand::before {
    content: "";
    display: block;
    flex: 0 0 auto;
    width: var(--site-mark, 1.75rem);
    height: var(--site-mark, 1.75rem);
    background-color: var(--site-acc, currentColor);
    -webkit-mask: url("../brand/logo.svg") center / contain no-repeat;
    mask: url("../brand/logo.svg") center / contain no-repeat;
    transition: none;
  }
}

/* Hover: знак не двигается и не масштабируется.
   Размер здесь НЕ повторяется намеренно. Раньше тут стояли width/height
   от --site-mark; после перехода на высоту двух строк (раздел 16) это
   правило с более высокой специфичностью (:hover) откатывало знак
   с 30.27px до 28px — при наведении логотип дёргался. Гасим только
   transform/filter, отдав размер базовому правилу. */
html[data-showcase] .site-header .brand:hover .brand__mark,
html[data-showcase] .site-header .brand:focus-visible .brand__mark,
html[data-showcase] .site-header .brand:hover::before,
html[data-showcase] .site-header .brand:focus-visible::before {
  transform: none;
  filter: none;
}

/* ---------- 15.2. Трекинг имени: плотно ---------- */

/* Единый размер знака на всех сайтах — не «прыгает» при переходе */
html[data-showcase="club"],
html[data-showcase="monarque"],
html[data-showcase="studio"],
html[data-showcase="dating"],
html[data-showcase="miss"],
html[data-showcase="career"],
html[data-showcase="travel"],
html[data-showcase="models"],
html[data-showcase="venture"] {
  --site-mark: 1.75rem;
}

/* ---------- 15.3. Оптическое выравнивание знака и текста ---------- */
html[data-showcase] .site-header .brand {
  align-items: center;
  gap: .65rem;
}
html[data-showcase] .site-header .brand__text {
  align-content: center;
}

/* На узких экранах знак и трекинг сжимаются вместе, но не ломаются */
@media (max-width: 620px) {
  html[data-showcase] { --site-mark: 1.5rem; }
  html[data-showcase] .site-header .brand { gap: .5rem; }
}

/* =========================================================================
   16. ЛОГОТИП: ЕДИНОЕ НАЧЕРТАНИЕ И ВЫРАВНИВАНИЕ ЗНАКА ПО ДВУМ СТРОКАМ
   -------------------------------------------------------------------------
   Замечание владельца: «В логотипе нельзя менять начертание шрифта — это
   грубое нарушение канонов использования логотипов! Буква М должна совпадать
   по высоте с двумя строчками справа от неё. Шрифт как на скрине.»

   Было: название бренда набиралось разными шрифтами — на club/studio/dating/
   miss/venture серифом (Cormorant), на monarque/career/travel гротеском,
   на models моноширинным. Один знак клуба — три разных начертания.

   Стало: одно начертание на всех 9 сайтах — гротеск var(--font-body) (Manrope),
   weight 800, как на travel (эталон владельца). Размер, трекинг и цвет
   по-прежнему задаются темой сайта, но САМ ШРИФТ больше не варьируется.

   Знак M теперь равен по высоте двум строкам: бокс знака растягивается по
   высоте блока из названия и подписи (flex stretch + aspect-ratio: 1), а маска
   отмасштабирована так, чтобы нарисованная литера совпадала с этим боксом.
   ========================================================================= */

/* ---------- 16.1. Единое начертание названия и подписи ---------- */
html[data-showcase] .site-header .brand__name {
  font-family: var(--font-body);
  font-size: var(--site-name-size, 1rem);
  font-weight: 800;
  letter-spacing: var(--site-name-track, .08em);
  line-height: 1.1;
  color: var(--site-name-color, #fff);
}
html[data-showcase] .site-header .brand__sub {
  font-family: var(--font-body);
  font-size: var(--site-sub-size, .56rem);
  font-weight: 600;
  letter-spacing: var(--site-sub-track, .16em);
  line-height: 1.2;
  color: var(--site-sub-color, rgba(255, 255, 255, .6));
}

/* Один размер и трекинг на всех сайтах: бренд должен читаться одинаково.
   Различие осталось только в цвете — он часть палитры сайта, а не начертания. */
html[data-showcase] {
  --site-name-size: 1rem;
  --site-name-track: .08em;
  --site-sub-size: .56rem;
  --site-sub-track: .16em;
}

/* ---------- 16.2. Знак по высоте двух строк ---------- */
/* Блок бренда: знак и текст выравниваются по общей высоте, а не по центру
   первой строки. Высота текстового блока = название + отступ + подпись. */
html[data-showcase] .site-header .brand {
  align-items: stretch;
  gap: .6rem;
}
html[data-showcase] .site-header .brand__text {
  display: grid;
  align-content: center;
  gap: var(--logo-line-gap, .12rem);
  min-width: 0;
}
/* В styles.css у подписи задан margin-top — он ломал расчёт высоты блока */
html[data-showcase] .site-header .brand__sub { margin-top: 0; }

/* Высота блока бренда. Считается из тех же токенов, что задают типографику,
   поэтому знак и текст сходятся автоматически на всех 9 сайтах и на мобильном.
   На узких экранах подпись скрывается (правило ниже, ≤420px) — там блок
   становится однострочным, и высота знака пересчитывается соответственно. */
html[data-showcase] {
  --logo-line-gap: .12rem;
  --logo-h: calc(var(--site-name-size) * 1.1 + var(--logo-line-gap) + var(--site-sub-size) * 1.2);
}

/* Бокс знака: ровно по высоте двухстрочного блока, форма — квадрат */
@supports ((-webkit-mask: url("")) or (mask: url(""))) {
  html[data-showcase] .site-header .brand::before {
    align-self: center;
    height: var(--logo-h);
    width: var(--logo-h);
    aspect-ratio: 1 / 1;
    /* Монограмма нарисована внутри viewBox 0 0 64 64 с полями: штрих занимает
       47.5 из 64 единиц по высоте (с учётом толщины 7.5). Чтобы нарисованная
       литера совпала по высоте с боксом, маска увеличена до 64/47.5 = 134.74%.
       По горизонтали штрих смещён влево (центр на 26 из 64), поэтому маска
       сдвинута на 13.65% — так литера стоит по оптическому центру бокса. */
    -webkit-mask-size: 134.74% 134.74%;
    mask-size: 134.74% 134.74%;
    -webkit-mask-position: 13.65% 50%;
    mask-position: 13.65% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}

/* Текст держим по центру бокса знака */
html[data-showcase] .site-header .brand__text { align-self: center; }

/* ≤420px подпись бренда скрыта — блок однострочный, знак равен одной строке */
@media (max-width: 420px) {
  html[data-showcase] {
    --logo-h: calc(var(--site-name-size) * 1.1);
  }
}

/* ---------- 16.3. Узкие экраны ---------- */
@media (max-width: 720px) {
  html[data-showcase] {
    --site-name-size: .82rem;
    --site-name-track: .06em;
    --site-sub-size: .46rem;
    --site-sub-track: .12em;
  }
  html[data-showcase] .site-header .brand { gap: .45rem; }
}

/* =========================================================================
   17. МОБИЛЬНЫЙ ПЕРВЫЙ ЭКРАН ВИТРИН (≤767px). Замеры 390x844.
   -------------------------------------------------------------------------
   Жалоба владельца: белый текст героя наезжает на светлое фото, кнопки
   «ВЫБРАТЬ КАРТУ» / «ВОЙТИ ПО MONARQUE ID» и «Скрыть промо» просвечивают.

   Блок сознательно в конце файла: он перекрывает и §14.4, и точечные
   правила MISS (§14.10), потому что специфичность у них одинаковая, а
   порядок в файле решает.

   Цвет слоя берётся из --site-bg, поэтому одно правило работает на всех
   8 витринах: у тёмных сайтов слой чёрный (#060509 у club), у светлого
   Конкурса — фарфоровый (#f7f2e6), и тёмный текст MISS остаётся читаемым.
   Один общий тёмный слой на MISS сделал бы её текст нечитаемым.
   ========================================================================= */
@media (max-width: 767px) {
  /* 17.1. Плотная подложка героя: фото/видео остаётся видимым, текст читается
     на любом кадре. Два слоя перемножаются по альфе: в зоне H1/абзаца ~0.75,
     у нижнего края ~0.95. */
  html[data-showcase] .hero-compact__overlay {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--site-bg) 58%, transparent) 0%,
        color-mix(in srgb, var(--site-bg) 66%, transparent) 40%,
        color-mix(in srgb, var(--site-bg) 88%, transparent) 82%,
        var(--site-bg) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--site-bg) 48%, transparent) 0%,
        color-mix(in srgb, var(--site-bg) 34%, transparent) 55%,
        color-mix(in srgb, var(--site-bg) 52%, transparent) 100%);
  }

  /* Светлый Конкурс: слой той же плотности, но фарфоровый — фото остаётся
     узнаваемым, а тёмный текст держит контраст. Замер: 7.8:1 в худшем пикселе. */
  html[data-showcase="miss"] .hero-compact__overlay {
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--site-bg) 50%, transparent) 0%,
        color-mix(in srgb, var(--site-bg) 58%, transparent) 40%,
        color-mix(in srgb, var(--site-bg) 84%, transparent) 82%,
        color-mix(in srgb, var(--site-bg) 97%, transparent) 100%),
      linear-gradient(90deg,
        color-mix(in srgb, var(--site-bg) 42%, transparent) 0%,
        color-mix(in srgb, var(--site-bg) 28%, transparent) 55%,
        color-mix(in srgb, var(--site-bg) 46%, transparent) 100%);
  }

  /* 17.2. Кнопки героя — непрозрачные (alpha = 1).
     Главная: сплошное золото сайта, тёмный текст.
     Вторая: сплошная тёмная поверхность сайта, светлый текст, видимая рамка.
     Никаких color-mix(..., transparent) в фоне кнопок героя. */
  html[data-showcase] .hero__actions .btn--gold,
  html[data-showcase] .hero__actions .btn--gold:hover {
    background: var(--site-acc);
    border-color: var(--site-acc);
    color: var(--site-on-accent);
    box-shadow: none;
  }
  html[data-showcase] .hero__actions .btn--ghost,
  html[data-showcase] .hero__actions .btn--ghost:hover,
  html[data-showcase] .hero__actions .btn:not(.btn--gold):not(.btn--gold):hover {
    background: var(--site-surface-2);
    border-color: var(--site-border-strong);
    color: var(--site-text);
  }
  html[data-showcase] .hero__actions .btn { min-height: 2.75rem; }

  /* 17.3. «Скрыть промо» — сплошная плашка, не просвечивает.
     Позицию (ниже кнопок) задаёт hero.css; здесь только цвет. */
  html[data-showcase] .hero-compact__hide {
    background: var(--site-surface-2);
    border-color: var(--site-border-strong);
    color: var(--site-text);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* 17.4. Парящая плашка консьержа на мобильном: компактнее и полностью
     непрозрачная — чтобы текст под ней не просвечивал через плашку.
     Позицию плашки задаёт showcases/concierge.js (перетаскивание по §1.7.1),
     CSS её не двигает.
     Цвет плашки — от токенов сайта: на тёмных сайтах тёмная поверхность,
     на светлом Конкурсе — тёмная же (как кнопка в шапке), иначе белая
     плашка на фарфоре сливалась бы с фоном и белое имя не читалось. */
  html[data-showcase] .mnq-cq__pill {
    padding: 4px 9px 4px 4px;
    gap: 6px;
    background: var(--site-surface-2);
    border-color: var(--site-border-strong);
    color: var(--site-text);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 14px 34px -18px rgba(0, 0, 0, 0.95);
  }
  html[data-showcase] .mnq-cq__name { font-size: 10px; line-height: 1.15; color: var(--site-text); }
  html[data-showcase] .mnq-cq__role {
    font-size: 6.5px;
    letter-spacing: 0.1em;
    line-height: 1.15;
    color: color-mix(in srgb, var(--site-text) 62%, transparent);
  }
  html[data-showcase] .mnq-cq__face--pill { width: 26px; height: 26px; }
  html[data-showcase] .mnq-cq__face--pill b { font-size: 0.85rem; }
  /* светлый сайт: плашка тёмная, текст светлый (как «ПОДАТЬ ЗАЯВКУ» в шапке) */
  html[data-showcase="miss"] .mnq-cq__pill {
    background: #241c12;
    border-color: #7d5c20;
    color: #f7f2e6;
  }
  html[data-showcase="miss"] .mnq-cq__name { color: #f7f2e6; }
  html[data-showcase="miss"] .mnq-cq__role { color: rgba(247, 242, 230, 0.62); }

  /* 17.5. Горизонтальный «вылет» полос на мобильном.
     Полосы-фоны (§14.5, `inset-inline: -100vw`) рассчитаны на десктоп: там
     вылет гасит `body { overflow-x: hidden }`. На мобильном Chrome это
     правило layout-вьюпорт не удерживает — замер показал layout 390, а
     scrollWidth 764 на miss/travel/models/venture. Следствие ровно то, на
     что жалуется владелец: cookie-баннер и тосты растягивались на 748px и
     уезжали за правый край. На мобильном полосе достаточно выйти за .wrap
     на его же отступ (--pad = 16px), а не на 100vw — вылета не остаётся. */
  /* селектор усилен до специфичности правил §14.5
     (html[data-showcase="miss"] .section.section:nth-of-type(2)::before),
     иначе они перебивают это правило: файл один и тот же. */
  html[data-showcase] .section.section:nth-of-type(n)::before {
    inset-inline: calc(-1 * var(--pad, 16px));
  }

  /* 17.6. Нижний безопасный отступ страницы: конец документа (подвал и
     последний блок) не уходит под парящую плашку консьержа. */
  html[data-showcase] body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================================
   18. МОБИЛЬНАЯ ШАПКА (D-4): вход, регистрация и меню в шапке
   ========================================================================= */
/*
 * На 390 px в шапке оставались только логотип и маркер возраста: «Войти»,
 * переключатель языка и разделы были display:none, а единственным входом
 * был язычок 18 px у края экрана. Женщина, пришедшая по рекламе, не видела,
 * куда нажать.
 *
 * Теперь на мобильном в шапке: логотип, маркер возраста, «Войти» (или
 * «Кабинет»), главное действие сайта (на LADY — «Регистрация») и кнопка
 * меню. Языки остаются в левом сайдбаре, который открывает кнопка меню, —
 * в шапке их нет. Каждая тап-зона не меньше 44×44 px.
 */
.header-nav__menu { display: none; }

@media (max-width: 767px) {
  /* 18.1. Кнопка меню: 44×44, три полосы. Открывает тот же левый сайдбар,
     что и язычок у края (data-action="open-menu"). */
  html[data-showcase] .header-nav__actions .header-nav__menu {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    inline-size: 44px;
    block-size: 44px;
    min-width: 44px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    background: rgba(255, 255, 255, .06);
    color: #fff;
    cursor: pointer;
  }
  html[data-showcase] .header-nav__menu-bar {
    display: block;
    inline-size: 18px;
    block-size: 2px;
    border-radius: 2px;
    background: currentColor;
  }
  html[data-showcase] .header-nav__menu:hover,
  html[data-showcase] .header-nav__menu:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .32);
  }
  html[data-showcase] .header-nav__menu[aria-expanded="true"] {
    background: var(--site-accent, #ff9000);
    border-color: transparent;
    color: var(--site-accent-ink, #0b0b0d);
  }

  /* 18.2. «Войти» не скрываем ни на одной ширине: без него гость не понимает,
     что вход вообще есть. Специфичность выше правила max-width: 480px. */
  html[data-showcase] .header-nav__actions .header-nav__btn#head-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: .7rem;
  }

  /* 18.3. Главное действие сайта — тоже нормальная тап-зона. На LADY это
     «Регистрация» (D-3), на витринах — «Подать заявку». */
  html[data-showcase] .header-nav__actions .header-nav__login#head-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding-inline: .7rem;
  }

  /* 18.4. Кнопки не должны выталкивать друг друга за экран. */
  html[data-showcase] .site-header__container { gap: .4rem; }
  html[data-showcase] .header-nav__actions { flex: 0 0 auto; gap: .3rem; }
  html[data-showcase] .site-header .brand { min-width: 0; }
}

/* 18.5. Узкие телефоны: имя бренда читается целиком, вход, регистрация и
   меню остаются на месте. Уступают отступы и кегль, а не кнопки. */
@media (max-width: 430px) {
  html[data-showcase] .site-header__container { padding-inline: .7rem; }
  html[data-showcase] .site-header .brand { gap: .35rem; }
  html[data-showcase] .site-header .brand__name { font-size: .56rem; letter-spacing: 0; }
  html[data-showcase] .header-nav__actions { gap: .22rem; }
  html[data-showcase] .header-nav__actions .header-nav__login#head-cta {
    font-size: .55rem;
    padding-inline: .5rem;
    letter-spacing: .02em;
  }
  html[data-showcase] .header-nav__actions .header-nav__btn#head-login {
    font-size: .55rem;
    padding-inline: .45rem;
  }
}

/* =========================================================================
   19. «ОБРАЗЫ» КАБИНЕТА LADY: кнопка «Показать ещё» (D-5)
   ========================================================================= */
html[data-showcase="studio"] .garments__more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: 1.1rem;
}
html[data-showcase="studio"] .garments__more .btn { min-height: 44px; padding-inline: 1.6rem; }

/* 19.1. D-5: на мобильном «Образы» — две карточки в ряд, а не одна во всю
   ширину. Одна колонка из карточек 356×650 и была причиной документа в
   27 493 px: даже после ограничения выдачи лента оставалась нерабочей длины.
   Размеры подписей и кнопок поджаты, тап-зона кнопок — не меньше 44 px. */
@media (max-width: 767px) {
  html[data-showcase="studio"] .garments {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }
  html[data-showcase="studio"] .garment-card { border-radius: 12px; }
  html[data-showcase="studio"] .garment-card__body { padding: .55rem .6rem .35rem; gap: .15rem; }
  html[data-showcase="studio"] .garment-card__body b { font-size: .68rem; line-height: 1.3; }
  html[data-showcase="studio"] .garment-card__body > span { font-size: .66rem; }
  html[data-showcase="studio"] .garment-card__body .tiny { display: none; }
  html[data-showcase="studio"] .garment-card__foot {
    flex-direction: column;
    gap: .3rem;
    padding: .35rem .6rem .6rem;
  }
  html[data-showcase="studio"] .garment-card__foot .btn {
    min-height: 44px;
    font-size: .58rem;
    padding-inline: .3rem;
    white-space: normal;
    text-align: center;
  }
}