/* ДНК сайта: оси стиля поверх темы, шрифтов и углов. Каждая ось — класс на <html> (dna-<ось>-<значение>), меняет все блоки
   сразу, поэтому сайты из одних блоков выходят непохожими. Значение по умолчанию классов не ставит — так выглядели сайты до ДНК.
   Оси и значения — DNA в blocks.js; секции блоков — .sec, надписи над заголовками — .kicker */

/* Воздух: отступы секций */
.dna-density-airy .sec { padding-block: 8rem; }
.dna-density-compact .sec { padding-block: 4rem; }
@media (min-width: 48rem) {
  .dna-density-airy .sec { padding-block: 13rem; }
  .dna-density-compact .sec { padding-block: 6.5rem; }
}

/* Заголовки: масштаб антиквы (умножает --display-zoom пары шрифтов); на телефоне «огромно» не шире экрана */
.dna-scale-calm { --display-scale: .8; }
.dna-scale-huge { --display-scale: 1.16; }
@media (max-width: 40rem) { .dna-scale-huge { --display-scale: 1; } }

/* Фото: подача кадров в блоках (первый экран на весь экран — как есть) */
.dna-photos-round .sec .graded,
.dna-photos-round .sec .mask,
.dna-photos-round .hero-sec .rounded-box { border-radius: calc(var(--radius-box, 1rem) * 1.8 + .75rem); overflow: hidden; }
/* Арка — только у вертикальных кадров, у широких — мягкое скругление */
.dna-photos-arch .sec .graded,
.dna-photos-arch .sec .mask { border-radius: 1.5rem; overflow: hidden; }
.dna-photos-arch .sec .graded[class*="aspect-[4/5]"],
.dna-photos-arch .sec .mask[class*="aspect-[4/5]"],
.dna-photos-arch .sec .graded[class*="aspect-[3/4]"],
.dna-photos-arch .sec .mask[class*="aspect-[3/4]"],
.dna-photos-arch .hero-sec .rounded-box.row-span-2 { border-radius: 999px 999px 1.25rem 1.25rem / 42% 42% 1.25rem 1.25rem; }
/* Паспарту: светлое поле и мягкая тень, как отпечаток */
.dna-photos-framed .sec .graded,
.dna-photos-framed .sec .mask:not(.rounded-full) {
  padding: clamp(6px, .9vw, 14px);
  background: var(--color-base-100);
  box-shadow: 0 1px 0 color-mix(in oklab, var(--color-base-content) 8%, transparent), 0 22px 44px -28px rgb(0 0 0 / .45);
}
.dna-photos-framed .tone-invert .graded,
.dna-photos-framed .tone-invert .mask:not(.rounded-full) { background: color-mix(in oklab, var(--color-neutral-content) 92%, var(--color-neutral)); }
/* Ч/б: кадры без цвета, цвет — только у бренда (статичный фильтр: при прокрутке не пересчитывается) */
.dna-photos-bw .sec img,
.dna-photos-bw .hero-sec img,
.dna-photos-bw .hero-sec video { filter: grayscale(1) contrast(1.06); }

/* Детали: номера секций, метки, черта акцента — у надписи над заголовком */
body { counter-reset: sec; }
.sec { counter-increment: sec; }
.dna-decor-numbers .sec .kicker::before { content: counter(sec, decimal-leading-zero) "\2002\2014\2002"; opacity: 1; }
.dna-decor-marks .kicker {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .55em 1.1em .5em;
  letter-spacing: .18em;
}
.dna-decor-rule .kicker::before {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-bottom: 1.15rem;
  background: var(--hl, var(--color-primary));
}

/* Кнопки: заливка (как было), контур, со стрелкой капителью */
/* Кнопки в углу (чат, мессенджеры) не перекрашиваются: контур над фото не было бы видно */
.dna-buttons-outline .btn-primary:not(.cart-bar):not(.sticky-cta):not(.corner-btn) {
  background: transparent;
  color: inherit;
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.dna-buttons-outline .btn-primary:not(.cart-bar):not(.sticky-cta):not(.corner-btn):hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}
.dna-buttons-arrow .btn:not(.btn-circle):not(.btn-square) { text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; }
.dna-buttons-arrow .btn-primary:not(.corner-btn)::after { content: "→"; margin-left: .55em; font-size: 1.15em; letter-spacing: 0; transition: transform .35s var(--ease, ease); }
.dna-buttons-arrow .btn-primary:hover::after { transform: translateX(4px); }

/* Фон секций: чередование (как было), один фон с линиями, тон бренда, панели на подложке */
.dna-surface-flat .sec.bg-base-200 { background: var(--color-base-100); }
.dna-surface-flat .sec:not(.tone-invert) + .sec:not(.tone-invert) { border-top: 1px solid color-mix(in oklab, var(--color-base-content) 12%, transparent); }
.dna-surface-tinted .sec.bg-base-200 { background: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)); }
.dna-surface-panels body { background: color-mix(in oklab, var(--color-base-content) 7%, var(--color-base-100)); }
.dna-surface-panels .sec { margin: 10px; border-radius: calc(var(--radius-box, 1rem) * 2 + .5rem); overflow: hidden; }
@media (min-width: 48rem) { .dna-surface-panels .sec { margin: 14px; } }