/* Smoke & Suburbs — refreshed static site styles */
:root{
  --bg:#0b0f0d;
  --panel:#0f1412;
  --text:#f3f5f4;
  --muted:#a6b0ab;
  --line:#1d2522;
  --accent:#8DFE4E;   /* replace with your exact logo green if different */
  --accent-ink:#0a1a15;
  --radius:14px;
  --maxw: 72ch;
  --lh: 1.7;
  --fs-0: 14px;
  --fs-1: 17px;
  --fs-2: 18px;
  --fs-3: 22px;
  --fs-4: 28px;
  --fs-5: 38px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: var(--fs-1); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; height:auto}
.container{width:min(1120px,92vw); margin-inline:auto}
/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(180%) blur(6px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:12px; padding:10px 0}
.brand img{width:36px; height:36px; border-radius:8px}
.brand .name{font-weight:800; letter-spacing:.2px}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:8px 0}
.nav{display:flex; gap:22px; align-items:center}
.nav a{color:var(--text); opacity:.9; font-weight:600}
.nav a:hover{opacity:1; color:var(--accent)}
/* Hero */
.hero{padding: clamp(48px,10vw,96px) 0; display:grid; gap:18px; border-bottom:1px solid var(--line)}
.hero h1{font-size: clamp(32px,5vw,54px); line-height:1.15; margin:0 0 6px}
.hero p{color:var(--muted); max-width:70ch; margin:0 0 18px}
.btn{display:inline-flex; align-items:center; gap:10px; background:var(--accent); color:var(--accent-ink); padding:12px 18px; border-radius:999px; font-weight:700; border:0}
.btn:hover{filter:brightness(1.05)}
.btn.outline{background:transparent; color:var(--text); border:1px solid var(--line)}
.btn.outline:hover{border-color:var(--accent); color:var(--accent)}
/* Card grid */
.grid{display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));}
.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .12s ease, border-color .12s}
.card:hover{transform:translateY(-2px); border-color: color-mix(in srgb, var(--accent) 35%, var(--line))}
.card .eyebrow{color:var(--accent); font-weight:700; font-size: var(--fs-0); letter-spacing:.02em; text-transform:uppercase}
.card h3{margin:8px 0 6px}
/* Article */
.article{padding: clamp(28px,6vw,56px) 0 84px}
.article header{margin-bottom:24px}
.article time{color:var(--muted); font-size: var(--fs-0)}
.article h1{font-size: clamp(32px, 4.4vw, var(--fs-5)); line-height:1.2; margin:0 0 8px}
.prose{max-width: var(--maxw); margin-inline:auto}
.prose p{margin:0 0 14px}
.prose p + p{margin-top:10px}
.prose h2{margin:28px 0 12px; font-size: var(--fs-4)}
.prose h3{margin:22px 0 8px; font-size: var(--fs-3)}
.prose ul, .prose ol{padding-left:1.1rem; margin:10px 0 18px}
.prose li{margin:6px 0}
.callout{background:#0e1613; border:1px solid var(--line); border-left:4px solid var(--accent); padding:16px; border-radius:12px; margin:18px 0}
.callout .kicker{color:var(--accent); font-weight:800; text-transform:uppercase; font-size:12px; letter-spacing:.06em}
.summary{display:grid; gap:12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin:18px 0 8px}
.summary .chip{background:#0f1714; border:1px solid var(--line); padding:12px 14px; border-radius:12px}
.summary .chip b{color:var(--accent)}
.faq dt{font-weight:800; margin:16px 0 6px}
.faq dd{margin:0 0 14px; color:var(--muted)}
.section{margin:34px 0; padding-top:6px; border-top:1px solid var(--line)}
/* Newsletter & footer */
.footer{border-top:1px solid var(--line); padding:32px 0; color:var(--muted)}
.news{display:grid; gap:12px; grid-template-columns: 1fr auto; align-items:center; background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:14px}
.news input{width:100%; background:#0a0f0d; color:var(--text); border:1px solid var(--line); border-radius:999px; padding:12px 14px; outline:none}
.news input::placeholder{color:#83908a}
.hr{height:1px; background:var(--line); border:0; margin:22px 0}
.center{text-align:center}
@media (max-width:720px){
  .nav{justify-content:center}
  .hero{text-align:center}
  .btn{width:100%; justify-content:center}
  .news{grid-template-columns:1fr}
}