/* ============================================================
   ОБЩИЙ КАРКАС САЙТА (02.09.2026, план vitrina-po-obrazcu-smyslokod)
   Одна шапка, одно подменю бесплатного раздела, один подвал — на всех
   страницах. Классы с приставкой sh-, чтобы не драться со стилями страниц.
   Тёмная тема — основная (rules/dizayn.md). Светлая включается только на
   страницах, где сама страница адаптивна: html[data-adaptive].
   ============================================================ */
.sh-header,.sh-sub,.sh-footer{
  --sh-bg:#14110C; --sh-bg2:#0F0D09; --sh-panel:#1E1A12;
  --sh-ink:#EFE9DC; --sh-ink2:#C0B6A2; --sh-mut:#948B77;
  --sh-gold:#FFCE00; --sh-gold2:#E7C24A; --sh-ongold:#17150F;
  --sh-hair:rgba(239,233,220,.11); --sh-hair2:rgba(239,233,220,.2);
  --sh-goldhair:rgba(255,206,0,.42);
  --sh-font:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sh-head:"Unbounded",system-ui,sans-serif;
  --sh-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-family:var(--sh-font);color:var(--sh-ink);
  -webkit-font-smoothing:antialiased;
}
@media (prefers-color-scheme:light){
  html[data-adaptive] .sh-header,html[data-adaptive] .sh-sub,html[data-adaptive] .sh-footer{
    --sh-bg:#f4efe2; --sh-bg2:#efe8d6; --sh-panel:#fbf7ec;
    --sh-ink:#211d15; --sh-ink2:#4f4835; --sh-mut:#6d6650;
    --sh-gold:#a9791b; --sh-gold2:#8a6314; --sh-ongold:#fff8e6;
    --sh-hair:rgba(33,29,21,.12); --sh-hair2:rgba(33,29,21,.22);
    --sh-goldhair:rgba(169,121,27,.45);
  }
}
.sh-header *,.sh-sub *,.sh-footer *{box-sizing:border-box}
.sh-wrap{max-width:1220px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---------- шапка ---------- */
.sh-header{
  position:sticky;top:0;z-index:120;height:64px;
  background:color-mix(in srgb,var(--sh-bg) 82%,transparent);
  backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--sh-hair);
}
.sh-header .sh-wrap{height:100%;display:flex;align-items:center;gap:10px}
.sh-brand{
  font-family:var(--sh-head);font-weight:500;font-size:1.02rem;letter-spacing:-.01em;
  color:var(--sh-ink);text-decoration:none;display:inline-flex;align-items:center;height:44px;flex:none;margin-right:6px;
}
.sh-brand i{font-style:normal;color:var(--sh-gold)}
.sh-nav{display:flex;align-items:center;gap:2px;min-width:0;flex:1}
.sh-nav a{
  display:inline-flex;align-items:center;height:38px;padding:0 12px;border-radius:8px;
  font-weight:500;font-size:.95rem;color:var(--sh-ink2);text-decoration:none;white-space:nowrap;
  transition:color .2s,background .2s;
}
.sh-nav a:hover{color:var(--sh-ink);background:var(--sh-hair)}
.sh-nav a[aria-current="page"]{color:var(--sh-ink);background:var(--sh-hair)}
.sh-pills{display:flex;gap:6px;margin-left:8px}
.sh-pill{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border-radius:999px;
  border:1px solid var(--sh-goldhair);color:var(--sh-ink);font-weight:600;font-size:.88rem;
  text-decoration:none;white-space:nowrap;background:color-mix(in srgb,var(--sh-gold) 7%,transparent);
  transition:background .2s,border-color .2s;
}
.sh-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--sh-gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--sh-gold) 22%,transparent)}
.sh-pill:hover,.sh-pill[aria-current="page"]{border-color:var(--sh-gold);background:color-mix(in srgb,var(--sh-gold) 14%,transparent)}
.sh-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex:none}
.sh-login{
  display:inline-flex;align-items:center;height:36px;padding:0 13px;border-radius:999px;
  border:1px solid var(--sh-hair2);color:var(--sh-ink2);font-weight:500;font-size:.9rem;text-decoration:none;white-space:nowrap;
}
.sh-login:hover{color:var(--sh-ink);border-color:var(--sh-ink2)}
.sh-cta{
  display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  background:var(--sh-gold);color:var(--sh-ongold);font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap;
  /* 🚨 Д9 07.09: inline-flex схлопывал пробел перед хвостом — читалось «Первый вечер— бесплатно».
     Зазор даёт gap: на 480 px хвост display:none, промежутка между элементами нет, кнопка не растёт. */
  gap:.25em;
  box-shadow:0 10px 22px -12px color-mix(in srgb,var(--sh-gold) 60%,transparent);
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.sh-cta:hover{transform:translateY(-2px)}
/* мобильное меню без скриптов */
.sh-burger{display:none}
.sh-burger summary{
  list-style:none;cursor:pointer;width:40px;height:38px;border-radius:8px;border:1px solid var(--sh-hair2);
  display:flex;align-items:center;justify-content:center;color:var(--sh-ink);
}
.sh-burger summary::-webkit-details-marker{display:none}
.sh-burger summary svg{width:20px;height:20px}
/* закрытое меню не должно занимать место: его пункты шире бургера и вылезали за правый край */
.sh-burger:not([open]) .sh-drop{display:none}
.sh-burger .sh-drop{
  position:absolute;left:0;right:0;top:64px;background:var(--sh-bg);border-bottom:1px solid var(--sh-hair);
  padding:10px clamp(18px,4vw,40px) 18px;display:flex;flex-direction:column;gap:2px;
}
.sh-burger .sh-drop a{
  display:flex;align-items:center;height:44px;padding:0 10px;border-radius:8px;color:var(--sh-ink);text-decoration:none;font-weight:500;
}
.sh-burger .sh-drop a:hover{background:var(--sh-hair)}
.sh-burger .sh-drop .sh-pill{height:38px;width:fit-content;margin-top:6px}
@media (max-width:1120px){
  .sh-nav a{padding:0 9px;font-size:.9rem}
  .sh-login{display:none}
}
@media (max-width:1000px){
  .sh-cta{padding:0 13px;font-size:.85rem}
}
@media (max-width:950px){
  .sh-nav,.sh-pills{display:none}
  /* 🚨 03.09: position:relative тут делал сам бургер (40 px) точкой отсчёта для .sh-drop,
     и меню раскрывалось полосой в 40 px. Отсчёт должен идти от .sh-header (он sticky). */
  .sh-burger{display:block}
  .sh-cta{padding:0 13px;font-size:.85rem}
}
@media (max-width:480px){
  /* на 390 px бренд + кнопка + бургер не помещались: страница уезжала вбок (scrollWidth 431).
     Прячем хвост призыва, смысл кнопки сохраняется. */
  .sh-cta-tail{display:none}
  .sh-cta{padding:0 12px;font-size:.85rem}
  .sh-brand{font-size:.95rem;margin-right:2px}
}

/* ---------- подменю раздела «Бесплатно» ---------- */
.sh-sub{background:var(--sh-bg);border-bottom:1px solid var(--sh-hair)}
.sh-sub .sh-wrap{display:flex;align-items:center;gap:4px;height:50px;overflow-x:auto;scrollbar-width:none}
.sh-sub .sh-wrap::-webkit-scrollbar{display:none}
.sh-sub .sh-lbl{
  font-family:var(--sh-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sh-gold);
  margin-right:10px;white-space:nowrap;flex:none;
}
.sh-sub a{
  display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:999px;
  color:var(--sh-ink2);font-size:.9rem;font-weight:500;text-decoration:none;white-space:nowrap;border:1px solid transparent;
}
.sh-sub a .n{
  font-family:var(--sh-mono);font-size:11.5px;color:var(--sh-mut);
  background:var(--sh-hair);border-radius:999px;padding:2px 7px;line-height:1;
}
.sh-sub a:hover{color:var(--sh-ink);background:var(--sh-hair)}
.sh-sub a[aria-current="page"]{color:var(--sh-ink);border-color:var(--sh-goldhair);background:color-mix(in srgb,var(--sh-gold) 9%,transparent)}
.sh-sub a[aria-current="page"] .n{color:var(--sh-gold);background:color-mix(in srgb,var(--sh-gold) 16%,transparent)}

/* ---------- подвал ---------- */
.sh-footer{background:var(--sh-bg2);border-top:1px solid var(--sh-hair);padding:clamp(44px,6vw,64px) 0 40px;margin-top:clamp(56px,8vw,96px)}
.sh-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-bottom:40px}
.sh-cols h4{
  margin:0 0 10px;font-family:var(--sh-font);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sh-mut);
}
.sh-cols a{display:flex;align-items:center;min-height:36px;color:var(--sh-ink2);text-decoration:none;font-size:.97rem;width:fit-content}
.sh-cols a:hover{color:var(--sh-ink)}
.sh-cols a .n{font-family:var(--sh-mono);font-size:11px;color:var(--sh-mut);margin-left:8px}
.sh-cols .sh-req{font-size:.9rem;line-height:1.6;color:var(--sh-ink2)}
.sh-cols .sh-req b{display:block;color:var(--sh-ink);font-weight:600}
.sh-cols .sh-req a{display:inline;min-height:0;color:var(--sh-gold2);text-decoration:underline;text-underline-offset:3px}
.sh-bottom{border-top:1px solid var(--sh-hair);padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;justify-content:space-between}
.sh-bottom .sh-copy{font-family:var(--sh-head);font-weight:500;font-size:.95rem;color:var(--sh-ink);margin:0}
.sh-bottom .sh-legal{margin:0;font-size:.82rem;color:var(--sh-mut);line-height:1.55;max-width:78ch}
.sh-bottom .sh-legal a{color:var(--sh-mut);text-decoration:underline;text-underline-offset:2px}
@media (max-width:860px){.sh-cols{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:480px){.sh-cols{grid-template-columns:1fr}.sh-bottom{flex-direction:column}}
@media (prefers-reduced-motion:reduce){.sh-cta{transition:none}}