/* ===== layout.css — header, footer, grids ===== */

/* ---- Header ---- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(10,10,12,.78);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:72px}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--ff-head);font-weight:800;font-size:1.32rem;color:var(--white);letter-spacing:-.02em}
.brand-mark{width:38px;height:38px;flex:0 0 auto}
.brand span{color:var(--red-soft)}

.nav{display:flex;align-items:center;gap:.35rem}
.nav a{
  font-family:var(--ff-head);font-weight:600;font-size:.93rem;
  color:var(--text-dim);padding:.55rem .85rem;border-radius:9px;position:relative;
}
.nav a:hover{color:var(--white);background:var(--ink-2)}
.nav a.active{color:var(--white)}
.nav a.active::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.28rem;height:2px;
  background:var(--red);border-radius:2px;
}

.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav-toggle span{width:20px;height:2px;background:var(--white);border-radius:2px;transition:.3s var(--ease)}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---- Footer ---- */
.site-footer{background:var(--black);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 32px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.5rem}
.footer-brand .brand{margin-bottom:1rem}
.footer-brand p{font-size:.92rem;max-width:30ch}
.footer-col h4{font-family:var(--ff-head);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
.footer-col ul li{margin-bottom:.6rem}
.footer-col a{color:var(--text-dim);font-size:.94rem}
.footer-col a:hover{color:var(--red-soft)}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;align-items:center;margin-top:3rem;padding-top:1.6rem;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted)}
.footer-bottom a{color:var(--muted)}
.footer-bottom a:hover{color:var(--text)}
.socials{display:flex;gap:.6rem}
.socials a{width:38px;height:38px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;color:var(--text-dim)}
.socials a:hover{border-color:var(--red);color:var(--red-soft);transform:translateY(-2px)}

/* ---- generic grids ---- */
.grid{display:grid;gap:clamp(20px,2.5vw,30px)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.feed{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,28px)}

/* article reading layout */
.article-wrap{max-width:820px;margin-inline:auto}
.article-body{margin-top:2.2rem}
.article-body h2{margin:2.4rem 0 1rem}
.article-body h3{margin:1.8rem 0 .8rem;color:var(--red-soft)}
.article-body p{margin-bottom:1.15rem;font-size:1.06rem;line-height:1.8}
.article-body ul.bullets{margin:0 0 1.3rem;padding-left:0}
.article-body ul.bullets li{position:relative;padding-left:1.6rem;margin-bottom:.7rem;color:var(--text-dim)}
.article-body ul.bullets li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;background:var(--red);border-radius:2px;transform:rotate(45deg)}

@media (max-width:980px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav{
    position:fixed;inset:72px 0 auto 0;
    flex-direction:column;align-items:stretch;gap:.2rem;
    background:rgba(12,12,15,.98);backdrop-filter:blur(18px);
    padding:1rem clamp(18px,4vw,40px) 1.4rem;
    border-bottom:1px solid var(--line);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:.32s var(--ease);
  }
  .nav.open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:.85rem .9rem;font-size:1.02rem}
  .nav a.active::after{display:none}
  .nav-toggle{display:flex}
  .grid-3,.grid-2{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr;gap:2rem}
}