/* Цитата первого экрана — 20 вариантов оформления (бета, ключ qt). Текст один и тот же.
   08.10: начало цитаты лежит на переходе от фото к фону (там серый) — основной текст тёмный (контраст ≥ 5:1 даже на сером),
   золото — только для акцентов и тёмное, плюс мягкий светлый ореол вокруг букв. */
.hk { position: relative; }
.qt-sw { position: absolute; z-index: 6; right: 24px; bottom: 24px; display: flex; flex-wrap: wrap; justify-content: flex-end; max-width: 560px; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.12); border-radius: 18px; font: 500 12px/1 var(--f-sans, sans-serif); color: #333; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.qt-sw span { margin-right: 4px; letter-spacing: .04em; }
.qt-sw button { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: #fff; color: #333; cursor: pointer; font: inherit; }
.qt-sw button[aria-pressed="true"] { background: #26262C; color: #fff; border-color: #26262C; }
@media (max-width: 599px) { .qt-sw { right: 8px; bottom: 8px; transform: scale(.8); transform-origin: bottom right; max-width: 330px; } }

.hk__q { --q-ink: #2B241D; --q-ink2: #3E352B; --q-gold: #5E4722; --q-deco: #B08D4A;
         --q-halo: 0 0 18px rgba(242,234,222,.95), 0 0 4px rgba(242,234,222,.95);
         color: var(--q-ink); font-weight: 500; text-shadow: var(--q-halo); }
.hk__q em { font-style: inherit; }

/* 1 — Курсив: тёмный текст, «единицы» тёмным золотом */
html[data-qt="1"] .hk__q .hq3 em { color: var(--q-gold); font-weight: 600; }
/* 2 — Лестница */
html[data-qt="2"] .hk__q .hq { display: block; }
html[data-qt="2"] .hk__q .hq2 { padding-left: 1.2em; font-size: 1.08em; }
html[data-qt="2"] .hk__q .hq3 { padding-left: 2.4em; font-size: 1.2em; font-weight: 600; }
html[data-qt="2"] .hk__q .hq3 em { color: var(--q-gold); }
/* 3 — Числа золотом */
html[data-qt="3"] .hk__q em { font: 700 .74em/1 var(--f-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--q-gold); }
/* 4 — Затухание: светлее → темнее, без прозрачности */
html[data-qt="4"] .hk__q .hq { display: block; }
html[data-qt="4"] .hk__q .hq1 { color: #6A5D4F; }
html[data-qt="4"] .hk__q .hq2 { color: #463C32; }
html[data-qt="4"] .hk__q .hq3 { color: var(--q-ink); font-weight: 600; }
/* 5 — Золотая черта */
html[data-qt="5"] .hk__q { font-style: normal; padding-left: 18px; border-left: 3px solid var(--q-deco); }
html[data-qt="5"] .hk__q .hq3 { display: block; margin-top: .15em; color: var(--q-gold); font-style: italic; font-weight: 600; }
/* 6 — Девиз капителями */
html[data-qt="6"] .hk__q { font: 700 .9375rem/1.7 var(--f-sans); letter-spacing: .18em; text-transform: uppercase; }
html[data-qt="6"] .hk__q .hq:not(:last-child)::after { content: " ·"; color: var(--q-deco); }
html[data-qt="6"] .hk__q .hq3 em { color: var(--q-gold); }
/* 7 — Большие кавычки */
html[data-qt="7"] .hk__q { position: relative; padding-left: .95em; }
html[data-qt="7"] .hk__q::before { content: "«"; position: absolute; left: -.08em; top: -.3em; font: 400 2.4em/1 var(--f-serif); color: var(--q-deco); }
html[data-qt="7"] .hk__q::after { content: "»"; margin-left: .08em; font: 400 1.5em/0 var(--f-serif); color: var(--q-deco); vertical-align: -.2em; }
/* 8 — Плашка */
html[data-qt="8"] .hk__q { display: inline-block; padding: .55em 1.1em; border: 1px solid var(--q-deco); border-radius: 999px; background: rgba(251,247,241,.94); font-size: 1.05rem; text-shadow: none; }
html[data-qt="8"] .hk__q em { color: var(--q-gold); font-weight: 700; }
/* 9 — Три счётчика */
html[data-qt="9"] .hk__q { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 26px; font: 600 .82rem/1.3 var(--f-sans); color: var(--q-ink2); }
html[data-qt="9"] .hk__q em { display: block; margin-top: 2px; font: italic 600 2rem/1.05 var(--f-serif); color: var(--q-gold); }
html[data-qt="9"] .hk__q .hq3 em { color: var(--q-ink); }
@media (max-width: 599px) { html[data-qt="9"] .hk__q { grid-template-columns: 1fr 1fr; } html[data-qt="9"] .hk__q .hq3 { grid-column: 1 / -1; } }
/* 10 — От руки */
html[data-qt="10"] .hk__q { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.15rem)/1.25 'Marck Script', cursive; }
html[data-qt="10"] .hk__q .hq3 em { color: var(--q-gold); }

/* ===== новые 11–20 ===== */
/* 11 — Тёмная плашка */
html[data-qt="11"] .hk__q { display: inline-block; padding: .7em 1.1em; border-radius: 14px; background: rgba(38,34,30,.94); color: #F3EBDD; text-shadow: none; font-size: 1.2rem; }
html[data-qt="11"] .hk__q em { color: #E1C68B; }
/* 12 — Маркер */
html[data-qt="12"] .hk__q em { padding: 0 .08em; background: linear-gradient(transparent 58%, rgba(198,163,108,.55) 58%); }
html[data-qt="12"] .hk__q .hq3 em { background: linear-gradient(transparent 52%, rgba(198,163,108,.8) 52%); font-weight: 600; }
/* 13 — Девиз-заголовок */
html[data-qt="13"] .hk__q { font: 600 calc(clamp(1.3rem, 1.05rem + 1vw, 1.9rem) * var(--k-h, 1))/1.2 var(--f-serif); }
html[data-qt="13"] .hk__q .hq3 { display: block; }
html[data-qt="13"] .hk__q .hq3 em { font-style: italic; color: var(--q-gold); }
/* 14 — I · II · III */
html[data-qt="14"] .hk__q .hq { display: block; position: relative; padding-left: 2.1em; }
html[data-qt="14"] .hk__q .hq::before { position: absolute; left: 0; top: .42em; font: 700 .6em/1 var(--f-sans); letter-spacing: .1em; color: var(--q-gold); }
html[data-qt="14"] .hk__q .hq1::before { content: "I"; } html[data-qt="14"] .hk__q .hq2::before { content: "II"; } html[data-qt="14"] .hk__q .hq3::before { content: "III"; }
html[data-qt="14"] .hk__q .hq3 { font-weight: 600; }
/* 15 — Линии */
html[data-qt="15"] .hk__q .hq { display: block; padding: .18em 0; border-bottom: 1px solid rgba(94,71,34,.35); }
html[data-qt="15"] .hk__q .hq3 { border-bottom: 0; font-weight: 600; }
html[data-qt="15"] .hk__q .hq3 em { color: var(--q-gold); }
/* 16 — Карточка */
html[data-qt="16"] .hk__q { display: inline-block; padding: .9em 1.25em; border-radius: 12px; border-left: 4px solid var(--q-deco); background: #FBF7F1; box-shadow: 0 14px 30px -14px rgba(43,36,29,.35); text-shadow: none; }
html[data-qt="16"] .hk__q .hq3 em { color: var(--q-gold); font-weight: 600; }
/* 17 — Финал крупно */
html[data-qt="17"] .hk__q .hq1, html[data-qt="17"] .hk__q .hq2 { font: 700 .82rem/1.6 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--q-ink2); }
html[data-qt="17"] .hk__q .hq3 { display: block; margin-top: .2em; font-size: 1.3em; font-weight: 600; }
html[data-qt="17"] .hk__q .hq3 em { color: var(--q-gold); }
/* 18 — Фольга (тёмное золото, читается и на сером) */
html[data-qt="18"] .hk__q { font-weight: 600; text-shadow: none; background: linear-gradient(100deg, #3E2E14 0%, #6E5427 45%, #4A3618 70%, #6E5427 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 19 — Кредо */
html[data-qt="19"] .hk__q::before { content: "Кредо"; display: block; margin-bottom: .55em; font: 700 .7rem/1 var(--f-sans); letter-spacing: .32em; text-transform: uppercase; color: var(--q-gold); text-shadow: none; }
html[data-qt="19"] .hk__q::after { content: ""; display: block; width: 56px; height: 2px; margin-top: .6em; background: var(--q-deco); }
html[data-qt="19"] .hk__q .hq3 em { color: var(--q-gold); font-weight: 600; }
/* 20 — С гербом */
html[data-qt="20"] .hk__q { position: relative; padding-left: 60px; min-height: 56px; }
html[data-qt="20"] .hk__q::before { content: ""; position: absolute; left: 0; top: .1em; width: 44px; height: 54px; background: url("../img/logo-c-mark.png") center / contain no-repeat; }
html[data-qt="20"] .hk__q .hq3 em { color: var(--q-gold); font-weight: 600; }

/* ===== Компоновка первого экрана — 10 вариантов (ключ hs): убрать пустоту сверху и справа ===== */
.hs-sw { position: absolute; z-index: 6; right: 24px; bottom: 64px; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.12); border-radius: 18px; font: 500 12px/1 var(--f-sans, sans-serif); color: #333; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.hs-sw span { margin-right: 4px; letter-spacing: .04em; }
.hs-sw button { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: #fff; color: #333; cursor: pointer; font: inherit; }
.hs-sw button[aria-pressed="true"] { background: #26262C; color: #fff; border-color: #26262C; }
@media (max-width: 599px) { .hs-sw { right: 8px; bottom: 56px; transform: scale(.8); transform-origin: bottom right; } }

.hk__top, .ht { display: none; }
html[data-hs="4"] .hk__top, html[data-hs="6"] .hk__top, html[data-hs="7"] .hk__top { display: block; margin-bottom: clamp(20px, 4.5vh, 52px); }
html[data-hs="4"] .ht-reg, html[data-hs="6"] .ht-facts, html[data-hs="7"] .ht-dirs { display: flex; }
.ht-reg { align-items: center; gap: .8em; margin: 0; font: 700 .78rem/1.4 var(--f-sans); letter-spacing: .14em; text-transform: uppercase; color: #3E352B; }
.ht-reg::after { content: ""; flex: 1; min-width: 40px; height: 1px; background: linear-gradient(90deg, #B08D4A, rgba(176,141,74,0)); }
.ht-facts { justify-content: space-between; gap: 16px; margin: 0; padding: 0 0 14px; list-style: none; border-bottom: 1px solid rgba(94,71,34,.3); font: 500 .9rem/1.2 var(--f-sans); color: #3E352B; }
.ht-facts li { display: flex; align-items: baseline; gap: .35em; }
.ht-facts b { font: 600 1.7rem/1 var(--f-serif); color: #5E4722; }
.ht-dirs { flex-wrap: wrap; gap: 8px; }
.ht-dirs a { padding: 8px 14px; border: 1px solid rgba(94,71,34,.35); border-radius: 999px; background: rgba(251,247,241,.7); font: 500 .85rem/1 var(--f-sans); color: #2B241D; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .ht-dirs a:hover { border-color: #B08D4A; background: #FBF7F1; } }

@media (min-width: 768px) {
  /* текст вверх (убираем пустоту сверху) */
  html[data-hs="2"] .hk, html[data-hs="4"] .hk, html[data-hs="5"] .hk, html[data-hs="6"] .hk, html[data-hs="7"] .hk, html[data-hs="9"] .hk { align-items: flex-start; padding-top: calc(var(--hdr) + 8vh); }
  /* шире до правого края (убираем пустоту справа) */
  html[data-hs="2"] .hk__copy > *, html[data-hs="3"] .hk__copy > *, html[data-hs="4"] .hk__copy > *, html[data-hs="5"] .hk__copy > *, html[data-hs="6"] .hk__copy > *, html[data-hs="7"] .hk__copy > *, html[data-hs="9"] .hk__copy > *, html[data-hs="10"] .hk__copy > * { grid-column: 6 / -1; }
  html[data-hs="2"] .hk__t, html[data-hs="9"] .hk__t, html[data-hs="10"] .hk__t { font-size: calc(clamp(2.75rem, min(6.4vw, 10.5vh), 7rem) * var(--k-h)); }
  /* 3 — экран ниже: следующий блок виден сразу */
  html[data-hs="3"] .hk { height: 80svh; }
  /* 5 — цитата крупно сверху на всю ширину */
  html[data-hs="5"] .hk__q { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.6rem); line-height: 1.2; margin-bottom: clamp(18px, 4vh, 44px); }
  /* 8 — две колонки: имя и кнопки слева, цитата столбиком справа */
  html[data-hs="8"] .hk__copy > * { grid-column: 6 / span 4; }
  html[data-hs="8"] .hk__q { grid-column: 10 / -1; grid-row: 1 / span 4; align-self: center; padding-left: 24px; border-left: 1px solid rgba(94,71,34,.3); }
  html[data-hs="8"] .hk__q .hq { display: block; margin-bottom: .45em; }
  /* 9 — по краям: цитата прижата вправо, кнопки к правому краю */
  html[data-hs="9"] .hk__q { text-align: right; }
  html[data-hs="9"] .hk__row { justify-content: space-between; }
  /* 10 — равномерно: цитата сверху, имя в центре, кнопки снизу */
  html[data-hs="10"] .hk { align-items: stretch; padding: calc(var(--hdr) + 6vh) 0 7vh; }
  html[data-hs="10"] .hk__copy { align-content: space-between; }
}
/* плашки бета-показа — слева внизу, друг над другом, не перекрывают текст */
.qt-sw { right: auto; left: 24px; bottom: 24px; justify-content: flex-start; }
.hs-sw { right: auto; left: 24px; bottom: 100px; justify-content: flex-start; }
@media (max-width: 599px) { .qt-sw { left: 8px; bottom: 8px; transform-origin: bottom left; } .hs-sw { left: 8px; bottom: 74px; transform-origin: bottom left; } }
@media (min-width: 768px) {
  html[data-hs="8"] .hk__copy > * { grid-column: 6 / span 5; }
  html[data-hs="8"] .hk__q { grid-column: 11 / -1; }
  html[data-hs="8"] .hk__t { font-size: calc(clamp(2.25rem, min(4.3vw, 8vh), 4.75rem) * var(--k-h)); }
}

/* ===== 08.10: выбранные заказчиком варианты — золотая звёздочка ===== */
.hs-sw button[data-hs="9"], .qt-sw button[data-qt="1"], .qt-sw button[data-qt="4"] { position: relative; box-shadow: 0 0 0 2px #C6A36C; }
.hs-sw button[data-hs="9"]::after, .qt-sw button[data-qt="1"]::after, .qt-sw button[data-qt="4"]::after { content: "★"; position: absolute; top: -9px; right: -5px; font-size: 11px; line-height: 1; color: #B08D4A; }

/* ===== Правое поле первого экрана — 7 вариантов (ключ hx) ===== */
.hx-sw { position: absolute; z-index: 6; left: 24px; bottom: 150px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 5px 6px 5px 12px; background: rgba(255,255,255,.94); border: 1px solid rgba(0,0,0,.12); border-radius: 18px; font: 500 12px/1 var(--f-sans, sans-serif); color: #333; box-shadow: 0 6px 24px rgba(0,0,0,.08); }
.hx-sw span { margin-right: 4px; letter-spacing: .04em; }
.hx-sw button { min-width: 26px; height: 26px; padding: 0 6px; border-radius: 999px; border: 1px solid rgba(0,0,0,.15); background: #fff; color: #333; cursor: pointer; font: inherit; }
.hx-sw button[aria-pressed="true"] { background: #26262C; color: #fff; border-color: #26262C; }
@media (max-width: 599px) { .hx-sw { left: 8px; bottom: 140px; transform: scale(.8); transform-origin: bottom left; } }
.hk__side { display: none; }
@media (min-width: 768px) {
  /* 2, 7 — текст шире: колонка доходит почти до правого края окна */
  html[data-hx="2"] .hk__copy, html[data-hx="5"] .hk__copy, html[data-hx="6"] .hk__copy, html[data-hx="7"] .hk__copy { max-width: none; padding-right: clamp(20px, 3vw, 56px); }
  html[data-hx="2"] .hk__t, html[data-hx="5"] .hk__t, html[data-hx="7"] .hk__t { font-size: calc(clamp(3rem, min(7.2vw, 11vh), 8rem) * var(--k-h)); }
  /* 3, 7 — фото светлее и переход к фону мягче */
  html[data-hx="3"] .hk__bg::after, html[data-hx="7"] .hk__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,248,238,0) 0 78%, rgba(255,248,238,.34) 92%, rgba(255,248,238,.34) 100%); /* только серая полоса за лицом — лицо не трогаем */ mix-blend-mode: screen; -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%); }
  /* 4 — вертикальная надпись на правом поле */
  html[data-hx="4"] .hk__side { display: flex; position: absolute; z-index: 2; right: clamp(16px, 2.4vw, 40px); top: 50%; transform: translateY(-50%); align-items: center; gap: 16px; margin: 0; writing-mode: vertical-rl; font: 700 .74rem/1 var(--f-sans); letter-spacing: .34em; text-transform: uppercase; color: #5E4722; }
  html[data-hx="4"] .hk__side::before, html[data-hx="4"] .hk__side::after { content: ""; width: 1px; height: 80px; background: #B08D4A; }
  /* 5 — фото уже, текст шире */
  html[data-hx="5"] .hk__bg { width: 54%; }
  html[data-hx="5"] .hk__copy > * { grid-column: 6 / -1; }
  /* 6 — золотая вертикальная линия по правому полю */
  html[data-hx="6"] .hk::after { content: ""; position: absolute; z-index: 1; right: clamp(16px, 2vw, 32px); top: calc(var(--hdr) + 28px); bottom: 36px; width: 1px; background: linear-gradient(180deg, rgba(176,141,74,0), #B08D4A 18%, #B08D4A 82%, rgba(176,141,74,0)); }
}

/* 08.10: лицо никогда не растворяется. Лицо в портрете кончается на ~64% ширины фото,
   поэтому растворение в фон начинается с 70%, а фото чуть уже, чтобы текст справа лежал на светлом фоне */
@media (min-width: 768px) {
  .hk__bg { width: 54%; }
  .hk__img img { -webkit-mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%); mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%); }
}
/* мелкие подписи первого экрана читаются и над растворяющимся плечом */
.hk .hk__meta, .hk .hk__pre { color: #2B241D; text-shadow: 0 0 14px rgba(242,234,222,.95), 0 0 3px rgba(242,234,222,.95); }

/* 15.10: первый экран снова во весь экран — «Обо мне» начинается на следующем. Пустоту снизу закрывает сама композиция:
   цитата сверху, имя — посередине свободного места, линия и кнопки — внизу, отступ снизу равен верхнему.
   Портрет чуть крупнее, выше и левее (не «бюст»): рамка шире и сдвинута влево, правый край и растворение на прежнем месте */
@media (min-width: 768px) {
  html[data-hs="9"] .hk { height: auto; min-height: 100svh; align-items: stretch; padding-bottom: 8vh; }
  /* 26.10: строка с именем не сжимается меньше текста — на низких экранах (телефон боком) первый экран растёт, а не наезжает сам на себя */
  html[data-hs="9"] .hk__copy { grid-template-rows: auto 1fr auto auto; }
  html[data-hs="9"] .hk__t { align-self: center; }
  html[data-hs="9"] .hk__bg { left: -5%; width: 57%; }
  html[data-hs="9"] .hk__img img { object-position: 50% 16%; }
}