/* ============================================================
   Компоненты: шапка, кнопки, театральное окно, карточки, плашки
   ============================================================ */
  /* ---------- фирменный паттерн «Театральное окно» (Theatre Window) ---------- */
  /* Единый компонент: контейнер class="stage-window", первым ребёнком — медиа.
     Позади медиа — подложка-«кулиса» той же формы, смещённая вправо-вверх.
     Лёгкая версия для небольших изображений: .stage-window--lite */
  .stage-window {
    --tw-radius: 90px 34px 90px 34px;   /* форма окна — её же повторяет подложка */
    --tw-shift: -18px -12px 16% 24%;    /* inset подложки: вверх-вправо; вылеты ≤12px,
                                           чтобы декор никогда не прилипал к краю экрана */
    --tw-tint: linear-gradient(210deg, rgba(217,183,167,.55), rgba(246,233,215,.92));
    --tw-shadow: 0 24px 50px rgba(25,20,16,.18);
    position: relative;
  }
  .stage-window > :first-child { position:relative; z-index:1; overflow:hidden;
    border-radius:var(--tw-radius); box-shadow:var(--tw-shadow); }
  .stage-window::before { content:""; position:absolute; z-index:0; pointer-events:none;
    inset:var(--tw-shift); background:var(--tw-tint); border-radius:var(--tw-radius); }
  /* лёгкая версия: небольшие изображения — компактная форма, тонкая подложка */
  .stage-window--lite { --tw-radius:18px 26px 18px 26px;
    --tw-shift:-10px -8px 34% 30%; --tw-shadow:0 12px 28px rgba(25,20,16,.12); }
  .stage-window--lite::before { filter:blur(10px); }
  /* широкая горизонтальная форма — анонсы статей и большие медиа */
  .stage-window--wide { --tw-radius:120px 36px 120px 36px;
    --tw-shift:-14px -10px 12% 20%; --tw-shadow:0 20px 44px rgba(25,20,16,.14); }
  /* второй смещённый контур позади окна (деликатный, поддерживает первый) */
  .stage-window--layered::after { content:""; position:absolute; z-index:0; pointer-events:none;
    inset:auto auto -12% -12px; width:52%; height:58%;
    background:linear-gradient(160deg, rgba(185,146,75,.18), rgba(217,183,167,.42));
    border-radius:var(--tw-radius); filter:blur(2px); }

  /* ---------- header: на первом экране спрятана (навигация — в hero),
     выезжает фиксированной, когда первый экран прокручен ---------- */
  .site-head { position:fixed; top:0; left:0; right:0; z-index:50; transform:translateY(-110%);
    transition:transform .45s cubic-bezier(.7,0,.2,1); border-bottom:1px solid var(--line);
    background:rgba(250,242,231,.88); backdrop-filter:blur(14px);
    box-shadow:0 12px 32px -20px rgba(25,20,16,.25); }
  .site-head.head-show { transform:none; }
  .head-in { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 0; }
  .logo { display:flex; align-items:center; gap:14px; text-decoration:none; }
  .logo img { width:48px; height:48px; border-radius:50%; object-fit:cover; }
  /* покачивание логотипа при наведении: влево с акцентом, затем вправо */
  @keyframes logo-rock {
    0% { transform:rotate(0); }
    30% { transform:rotate(-7deg); }
    65% { transform:rotate(7deg); }
    85% { transform:rotate(-3deg); }
    100% { transform:rotate(0); }
  }
  .logo:hover img { animation:logo-rock .9s ease-in-out; }
  .logo-sub { max-width:250px; font-size:15px; font-weight:500; line-height:1.5; color:var(--txt); }
  .logo-sub em { font-style:normal; color:var(--accent); }
  .site-nav { display:flex; gap:26px; list-style:none; }
  .site-nav a { color:var(--ink-2); text-decoration:none; font-size:15px; font-weight:600; transition:color .2s; }
  .site-nav a:hover { color:var(--accent); }
  .site-nav a.active { color:var(--accent); font-weight:700; }
  .site-nav a[aria-current="page"] { color:var(--accent); font-weight:700; }
  .burger { display:none; width:46px; height:46px; border:1px solid var(--line); border-radius:12px; background:none; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
  .burger span { width:20px; height:2px; background:var(--txt); display:block; }
  .nav-cta { display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:var(--paper);
    font-weight:700; font-size:13.5px; padding:13px 24px; border-radius:999px; text-decoration:none;
    transition:background .2s; white-space:nowrap; }
  .nav-cta:hover { background:var(--action-hover); }
  /* винтажная печатная стрелка: древко + ажурный наконечник; при наведении
     только сдвигается (transform), размер не меняется — вёрстку не сдвигает */
  .btn-arrow::after { content:""; display:inline-block; vertical-align:middle; width:30px; height:10px;
    margin-left:10px; background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M0 6h27M25.5 1.5 33 6l-7.5 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M0 6h27M25.5 1.5 33 6l-7.5 4.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center / contain;
    transition:transform .25s ease; }
  .btn-arrow:hover::after { transform:translateX(4px); }
  .nav-cta:active { background:var(--action-active); }
  .m-menu { position:fixed; inset:0; background:var(--bg); z-index:100; display:flex; flex-direction:column;
    justify-content:flex-start; padding:104px 32px 36px; gap:12px; transform:translateY(-102%);
    transition:transform .45s cubic-bezier(.7,0,.2,1); overflow-y:auto; }
  .m-menu.open { transform:none; }
  .m-menu .m-logo { position:absolute; top:20px; left:24px; transition:transform .2s; }
  .m-menu .m-logo:hover { transform:scale(1.05); }
  .m-menu .m-logo img { width:60px; height:60px; border-radius:50%; display:block; }
  .m-menu a { font-family:'Playfair Display',serif; font-size:clamp(30px,7.6vw,46px); font-weight:600; color:var(--txt); text-decoration:none; }
  .m-menu a:hover { color:var(--accent); }
  .m-menu a[aria-current="page"] { color:var(--accent); }
  /* CTA меню — не цветом (красный зарезервирован за текущим разделом),
     а обводкой-капсулой; кегль меньше пунктов, чтобы влезала одной строкой */
  .m-menu .m-cta { color:var(--txt); border:2px solid var(--accent); border-radius:999px;
    font-size:clamp(22px,6vw,28px); padding:10px 22px; width:fit-content;
    margin-top:14px; transition:background .2s; }
  .m-menu .m-cta:hover { color:var(--txt); background:rgba(228,61,32,.08); }
  .m-close { position:absolute; top:22px; right:24px; font-size:30px; background:none; border:0; cursor:pointer; color:var(--txt); }

  /* ---------- editorial labels ---------- */
  .label { font-family:'Montserrat',sans-serif; font-size:12.5px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--bordeaux); display:flex; align-items:center; gap:12px; }
  .label::before { content:""; width:34px; height:1px; background:var(--bordeaux); }
  .head-left { display:flex; flex-direction:column; gap:10px; }
  .head-left h2 { margin:0; }

  /* ---------- видео-модалка ---------- */
  .vlb { position:fixed; inset:0; z-index:320; background:rgba(20,16,12,.94);
    display:grid; place-items:center; }
  .vlb[hidden] { display:none; }
  .vlb-frame { width:min(1200px, 94vw); aspect-ratio:16/9; background:#000;
    border-radius:var(--r-card); overflow:hidden; box-shadow:0 40px 100px rgba(0,0,0,.6); }
  .vlb-frame iframe { width:100%; height:100%; border:0; display:block; }
  .vlb-frame video.vlb-video { width:100%; height:100%; border:0; display:block; background:#000; }
  .vlb-frame iframe[hidden], .vlb-frame video[hidden] { display:none; }
  .vlb-x { position:absolute; top:20px; right:20px; width:52px; height:52px;
    border-radius:50%; border:1px solid var(--line); background:var(--panel);
    color:var(--txt); font-size:20px; cursor:pointer; transition:border-color .2s, color .2s; }
  .vlb-x:hover { border-color:var(--accent); color:var(--accent); }

  /* ---------- лента галереи «Жизнь клуба» ---------- */
  .strip {
    display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none;
    cursor: grab; padding: 4px 32px 12px;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  .strip.drag { cursor: grabbing; }
  .strip::-webkit-scrollbar { display: none; }
  .strip figure { flex: 0 0 auto; width: 300px; aspect-ratio: 3 / 4; overflow: hidden;
    scroll-snap-align: start; margin: 0; }
  .strip figure:nth-child(4n) { width: 440px; aspect-ratio: 3 / 2; }
  .strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

  /* ---------- лайтбокс фотографий ---------- */
  .lb { position: fixed; inset: 0; z-index: 300; background: rgba(25, 20, 16, .95);
    display: grid; place-items: center; }
  .lb[hidden] { display: none; }
  .lb img { max-width: 92vw; max-height: 86vh; border-radius: 10px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
  .lb button { position: absolute; background: rgba(244, 237, 220, .08);
    border: 1px solid rgba(244, 237, 220, .3); color: #F4EDDC;
    width: 52px; height: 52px; border-radius: 50%; font-size: 20px; cursor: pointer; }
  .lb button:hover { background: #C8371F; border-color: #C8371F; color: #F4EDDC; }
  .lb-x { top: 20px; right: 20px; }
  .lb-p { left: 20px; top: 50%; transform: translateY(-50%); }
  .lb-n { right: 20px; top: 50%; transform: translateY(-50%); }