/* ====== COMMON (общие стили для всех страниц) ====== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", Arial; color:#EBEEF2; background:#000; overflow-x:hidden}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit}
@font-face{ font-family:"LoosWide"; src:url("./fonts/Loos Latin, Cyrillic Wide-Bold-Desktop.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }

:root{
  --fg:#EBEEF2; --muted:#A6ACB8; --accent:#8AB4FF;
  --card: rgba(255,255,255,.06); --glass: rgba(255,255,255,.08);
  --shadow: 0 12px 36px rgba(0,0,0,.46);
}

.gradient{position:fixed; inset:-20vmax -20vmax auto -20vmax; height:60vmax; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60vmax 60vmax at 30% 20%, hsl(255 90% 8%), transparent 55%),
    radial-gradient(50vmax 50vmax at 70% 30%, hsl(200 90% 10%), transparent 55%),
    radial-gradient(40vmax 40vmax at 50% 75%, rgba(104,205,255,.15), transparent 60%);
  filter:saturate(110%) blur(30px);
}

.container{width:min(1240px,92vw); margin-inline:auto}
.section{padding: clamp(72px, 14vh, 160px) 0}

header{position:sticky; top:0; backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(0,0,0,.65), transparent);
  border-bottom:1px solid rgba(255,255,255,.06); z-index:20;
}
nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{display:flex; gap:10px; align-items:center; font-weight:800; letter-spacing:.2px}
.logo{display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(180deg, rgba(138,180,255,.3), rgba(138,180,255,.12));
  box-shadow:var(--shadow); border:1px solid rgba(138,180,255,.35)}
.nav-links{display:flex; gap:14px}
.nav-links a{opacity:.85; padding:8px 10px; border-radius:10px; transition:opacity .2s, background .2s}
.nav-links a:hover{opacity:1; background:rgba(255,255,255,.05)}

.button{display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow:var(--shadow); transition: transform .15s ease, background .2s}
.button:hover{transform:translateY(-1px)}
.button.primary{background:linear-gradient(180deg, rgba(138,180,255,.35), rgba(138,180,255,.14));
  border-color: rgba(138,180,255,.45)}

h1,h2{font-family:"LoosWide", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial}
h1{font-size:clamp(32px,6.6vw,64px); margin:0 0 12px; line-height: 1.3}
h2{font-size:clamp(28px, 4.6vw, 48px); margin:0 0 16px; line-height: 1.3}
.kicker{color:var(--muted); max-width:72ch; margin:0 0 24px}

/* карточки (как на главной) */
.cards{display:grid; grid-template-columns:repeat(12,1fr); gap:22px}
.card{grid-column:span 4; background:var(--glass); border:1px solid rgba(255,255,255,.12);
  border-radius:18px; overflow:hidden; position:relative; isolation:isolate; box-shadow:var(--shadow);
  display:flex; flex-direction:column}
@media (max-width:1100px){ .card{grid-column:span 6} }
@media (max-width:720px){ .card{grid-column:span 12} }
.card .head{display:flex; justify-content:space-between; align-items:center; padding:18px}
.pill{font-size:12px; color:#cfe0ff; padding:6px 10px; border-radius:999px;
  background:rgba(138,180,255,.12); border:1px solid rgba(138,180,255,.35)}
.card .media{aspect-ratio:16/9; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-top:1px solid rgba(255,255,255,.12); display:grid; place-items:center}
.cover{width:100%; height:100%; background: var(--img) center/cover no-repeat}
.card .body{padding:0 18px 16px; display:flex; flex-direction:column; gap:10px}

/* контент статьи */
.article-wrap{width:min(840px,92vw); margin-inline:auto}
.meta{color:var(--muted); margin-bottom:22px}
.post-cover{border-radius:18px; overflow:hidden; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); margin:18px 0 22px}
.post-cover .img{aspect-ratio:16/9; background:var(--img) center/cover no-repeat; filter:saturate(1.05) contrast(1.02)}
.content{color:#DCE3EE; line-height:1.8}
.content h2{margin:28px 0 10px}
.note{padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); margin:16px 0; color:#C8D0DD}

footer{padding:80px 0 120px; color:#A6ACB8; text-align:center}
/* === Burger & mobile panel === */
.burger{display:none;width:42px;height:42px;border:1px solid rgba(255,255,255,.12);
    border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
    align-items:center;justify-content:center;cursor:pointer}
  .burger svg{width:22px;height:22px;opacity:.9}
  .menu-btn{display:inline-flex}
  
  .mobile-panel{
    position:fixed; inset:0 0 0 auto; width:min(86vw,360px); background:rgba(10,12,18,.92);
    backdrop-filter: blur(10px); border-left:1px solid rgba(255,255,255,.08);
    transform:translateX(100%); transition:.28s cubic-bezier(.2,.7,.2,1); z-index:30; padding:18px;
  }
  .mobile-panel.open{transform:none}
  .mobile-panel a{display:block; padding:12px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.06); margin-bottom:10px}
  .mobile-dim{position:fixed; inset:0; background:rgba(0,0,0,.35); opacity:0; pointer-events:none; transition:.2s; z-index:29}
  .mobile-dim.show{opacity:1; pointer-events:auto}
  
  /* breakpoint: прячем десктоп-меню и показываем бургер */
  @media (max-width:880px){
    .nav-links{display:none}
    .burger{display:flex}
  }
/* Правый блок в шапке */
.nav-right{
    display:flex;
    gap:10px;
    align-items:center;
    flex-shrink:0;         /* <= не даём сжиматься до нуля */
  }
  
  /* На узких экранах убираем второстепенную кнопку,
     чтобы точно влезало вместе с бургером */
  @media (max-width:520px){
    .nav-right .button:not(.primary){ display:none; }
  }