/* ==========================================================================
   KM-TOP — новая шапка + первый экран (только десктоп ≥ 1024px)
   Полностью изолирован: все классы с префиксом km-, свои переменные --km-*.
   Ниже 1024px блок скрыт, сайт показывает свою текущую шапку и первый экран.
   1p = 1px макета 1024×668; масштаб — меньшая из сторон окна (ширина до 1920).
   ========================================================================== */

.km-top { display: none; }

@media (min-width: 1024px) {
  /* Прячем старые шапку и первый экран только на десктопе.
     Классы km-hide-desktop нужно добавить в шаблоне на старые <header> и hero-секцию. */
  .km-hide-desktop { display: none !important; }

  .km-top {
    --km-vh: 100vh;
    --km-p: max(0.9px, min(calc(min(100vw, 1920px) / 1024), calc(var(--km-vh) / 668)));
    --km-ink: #1C1A19;
    --km-ink-2: #2E2A27;
    --km-muted: #5E5650;
    --km-red: #C62433;
    --km-red-hover: #B01E2C;
    --km-navy: #1F3A6B;
    --km-cream: #F7F3EF;
    --km-serif: "Noto Serif Display", Georgia, "Times New Roman", serif;
    --km-sans: "Manrope", "Helvetica Neue", Arial, sans-serif;
    --km-hand: "Caveat", "Segoe Script", cursive;
    display: block;
    position: relative;
    font-family: var(--km-sans);
    color: var(--km-ink);
    font-feature-settings: "lnum" 1;
    -webkit-font-smoothing: antialiased;
  }
  @supports (height: 100svh) {
    .km-top { --km-vh: 100svh; }
  }
  /* сброс с нулевой специфичностью — не перебивает правила блока */
  :where(.km-top) *, :where(.km-top) *::before, :where(.km-top) *::after { box-sizing: border-box; }
  :where(.km-top) a { color: inherit; text-decoration: none; }
  :where(.km-top) p, :where(.km-top) ul { margin: 0; padding: 0; list-style: none; }
  .km-top :focus-visible { outline: 2px solid var(--km-red); outline-offset: 3px; border-radius: 6px; }

  /* ---------- Шапка ---------- */
  .km-header {
    position: sticky; top: 0; z-index: 60;
    max-width: none; margin: 0 auto calc(-80 * var(--km-p));
    transition: background .2s ease, box-shadow .2s ease;
  }
  .km-header.is-solid, .km-header--solid {
    background: rgba(247,243,239,.95);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    box-shadow: 0 1px 0 #E8DFD6;
  }
  .km-header--solid { margin-bottom: 0; }
  .km-header__inner {
    width: calc(1024 * var(--km-p));
    max-width: 100%;
    margin: 0 auto;
    height: calc(80 * var(--km-p));
    padding: 0 calc(26 * var(--km-p)) 0 calc(45 * var(--km-p));
    display: flex; align-items: center;
    transition: height .2s ease;
  }
  .km-header.is-solid .km-header__inner { height: calc(62 * var(--km-p)); }

  /* v0.33.1: знак — исходный PNG/WebP (logo-color-trim 916×388), без набранного текста и CSS-уголков.
     Высота 63p: уголки знака (364 из 388 px файла) по высоте совпадают с прежними 59p. */
  .km-logo { position: relative; display: block; flex-shrink: 0; height: calc(63 * var(--km-p)); aspect-ratio: 916 / 388; line-height: 0; transform-origin: left center; transition: transform .2s ease; }
  .km-header.is-solid .km-logo { transform: scale(.82); }
  .km-logo picture { display: block; width: 100%; height: 100%; }
  .km-logo__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }

  .km-nav { display: flex; gap: calc(25 * var(--km-p)); margin-left: calc(66 * var(--km-p)); font-size: max(calc(10.5 * var(--km-p)), 13px); font-weight: 500; }
  .km-nav a:hover, .km-nav a[aria-current="page"] { color: var(--km-red); }

  .km-btn { display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--km-sans); font-weight: 600; white-space: nowrap; transition: background .15s ease, transform .15s ease; }
  .km-btn svg { flex-shrink: 0; width: calc(13 * var(--km-p)); height: calc(13 * var(--km-p)); }
  .km-btn--white { margin-left: auto; height: calc(42 * var(--km-p)); padding: 0 calc(18 * var(--km-p)) 0 calc(24 * var(--km-p)); gap: calc(10 * var(--km-p)); font-size: max(calc(10.5 * var(--km-p)), 13px); background: #fff; color: var(--km-ink); box-shadow: 0 calc(6 * var(--km-p)) calc(18 * var(--km-p)) rgba(20,10,5,.12); }
  .km-btn--red { height: calc(44 * var(--km-p)); padding: 0 calc(22 * var(--km-p)) 0 calc(25 * var(--km-p)); gap: calc(12 * var(--km-p)); font-size: max(calc(10.8 * var(--km-p)), 13px); background: var(--km-red); color: #fff !important; box-shadow: 0 calc(8 * var(--km-p)) calc(20 * var(--km-p)) rgba(198,36,51,.25); }
  .km-btn--red:hover { background: var(--km-red-hover); transform: translateY(-1px); }

  .km-burger { display: none; /* desktop ≥1024: меню уже в шапке, бургер только на мобильной */ flex-direction: column; justify-content: center; gap: calc(6 * var(--km-p)); width: calc(26 * var(--km-p)); height: calc(30 * var(--km-p)); margin-left: calc(27 * var(--km-p)); padding: 0; background: none; border: 0; cursor: pointer; color: #fff; }
  .km-burger span { display: block; width: 100%; height: calc(1.6 * var(--km-p)); background: currentColor; border-radius: 2px; }
  .km-burger span:nth-child(2) { width: 70%; align-self: flex-end; }
  .km-header.is-solid .km-burger, .km-header--solid .km-burger { color: var(--km-ink); }

  /* ---------- Первый экран ---------- */
  .km-hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    height: calc(668 * var(--km-p));
    overflow: hidden;
    background: #2A2420;
  }
  .km-hero__backdrop {
    position: absolute; inset: -60px;
    background: url("img/hero-bg.webp?v=4") center / cover no-repeat;
    filter: blur(32px) saturate(.9);
    transform: scale(1.05);
  }
  .km-hero__stage {
    position: relative;
    width: calc(1024 * var(--km-p));
    height: 100%;
    margin: 0 auto;
  }
  .km-hero__bg { position: absolute; inset: 0; display: block; }
  .km-hero__bg img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }

  .km-hero__text { position: absolute; left: calc(45 * var(--km-p)); top: calc(102 * var(--km-p)); width: calc(350 * var(--km-p)); display: flex; flex-direction: column; }
  .km-hero__eyebrow { font-size: max(calc(8.4 * var(--km-p)), 10px); font-weight: 600; letter-spacing: .33em; text-transform: uppercase; color: var(--km-muted); }
  .km-hero__title { margin: calc(9 * var(--km-p)) 0 0; font-family: var(--km-serif); font-size: calc(63 * var(--km-p)); font-weight: 520; font-variation-settings: "wdth" 92; line-height: .885; letter-spacing: -.015em; color: var(--km-ink); }
  .km-hero__title em { font-style: normal; color: var(--km-red); }
  .km-hero__lead { margin-top: calc(18 * var(--km-p)); font-size: max(calc(11.6 * var(--km-p)), 13px); line-height: 1.6; color: var(--km-ink-2); white-space: nowrap; }
  .km-hero__actions { margin-top: calc(20 * var(--km-p)); display: flex; align-items: center; gap: calc(14 * var(--km-p)); }
  .km-play { display: inline-flex; align-items: center; gap: calc(9 * var(--km-p)); font-size: max(calc(10 * var(--km-p)), 12px); font-weight: 500; line-height: 1.35; }
  .km-play__icon { display: inline-flex; align-items: center; justify-content: center; width: calc(32 * var(--km-p)); height: calc(32 * var(--km-p)); border: calc(1.2 * var(--km-p)) solid var(--km-ink); border-radius: 50%; }
  .km-play__icon svg { width: calc(10 * var(--km-p)); height: calc(10 * var(--km-p)); margin-left: calc(1.5 * var(--km-p)); }
  .km-stats { margin-top: calc(26 * var(--km-p)); display: flex; }
  .km-stat { display: flex; flex-direction: column; gap: calc(6 * var(--km-p)); padding: calc(4 * var(--km-p)) calc(18 * var(--km-p)); border-left: 1px solid rgba(28,26,25,.22); }
  .km-stat:first-child { border-left: 0; }
  .km-stat__num { font-family: var(--km-serif); font-size: calc(26 * var(--km-p)); font-weight: 450; font-variation-settings: "wdth" 92; line-height: 1; white-space: nowrap; }
  .km-stat__num small { font-family: var(--km-sans); font-size: calc(10 * var(--km-p)); font-weight: 500; margin-right: calc(3 * var(--km-p)); }
  .km-stat__label { font-size: max(calc(8.2 * var(--km-p)), 10px); color: #3B3632; }

  .km-hero__deco { position: absolute; left: calc(368 * var(--km-p)); top: calc(108 * var(--km-p)); width: calc(210 * var(--km-p)); height: calc(230 * var(--km-p)); overflow: visible; pointer-events: none; color: #2A2622; }
  .km-hero__hand { position: absolute; left: 0; top: calc(8 * var(--km-p)); font-family: var(--km-hand); font-weight: 500; font-size: calc(25 * var(--km-p)); line-height: 1.25; white-space: nowrap; transform: rotate(-11deg); transform-origin: left top; }
  .km-hero__hand span { display: block; }
  .km-hero__hand span:nth-child(2) { margin-left: calc(14 * var(--km-p)); }
  .km-hero__hand span:nth-child(3) { margin-left: calc(28 * var(--km-p)); }
  .km-hero__arrow { position: absolute; left: calc(52 * var(--km-p)); top: calc(118 * var(--km-p)); width: calc(48 * var(--km-p)); height: calc(58 * var(--km-p)); }

  .km-hero__side { position: absolute; left: calc(820 * var(--km-p)); top: calc(88 * var(--km-p)); display: flex; flex-direction: column; color: #EFE9E3; }
  .km-hero__words { font-family: var(--km-serif); font-size: calc(17 * var(--km-p)); font-weight: 400; font-variation-settings: "wdth" 92; line-height: 1.3; }
  .km-hero__rule { width: calc(30 * var(--km-p)); height: 1px; margin: calc(12 * var(--km-p)) 0 calc(18 * var(--km-p)); background: rgba(255,255,255,.55); }
  .km-hero__name { font-size: max(calc(7.8 * var(--km-p)), 10px); font-weight: 700; letter-spacing: .1em; }
  .km-hero__role { margin-top: calc(5 * var(--km-p)); font-size: max(calc(7.4 * var(--km-p)), 9.5px); line-height: 1.6; letter-spacing: .08em; text-transform: uppercase; color: #D9D2CB; }
}

/* Окно шире пропорции 1024:668 — края фото растворяются в боковых полях. */
@media (min-width: 1024px) and (min-aspect-ratio: 1024/668) {
  .km-hero__bg {
    /* #fff, not #000: Safari treats mask black as transparent and the dark hero
       background then paints a bar across the face. White stays opaque in both modes. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #fff 4%, #fff 96%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #fff 4%, #fff 96%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
}

@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .km-top *, .km-top *::before, .km-top *::after { transition: none !important; }
}