/* ============================================================
   Treo Insights — shared dark stylesheet
   ============================================================ */
:root{
  --bg:#0B0F13; --bg-soft:#10161B; --surface:#161D23; --surface-2:#1C242B;
  --line:#232C34; --fg:#F4F6FA; --body:#B8C1CA; --muted:#8A949D;
  --accent:#CE2128; --accent-dark:#A81A20; --accent-ink:#FFFFFF;
  --maxw:1180px; --readw:740px; --pad:clamp(20px,5vw,40px); --radius:14px;
  --section-y:clamp(56px,8vw,104px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--body);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Space Grotesk','Inter',sans-serif;color:var(--fg);line-height:1.14;letter-spacing:-0.01em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.97rem;padding:14px 26px;border-radius:999px;border:1.5px solid transparent;transition:transform .15s,background .15s,color .15s;cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-dark)}
.btn-ghost{border-color:rgba(255,255,255,.32);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.07)}

/* Header / Footer */
header.site{position:sticky;top:0;z-index:50;background:rgba(11,15,19,.85);backdrop-filter:saturate(160%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{font-family:'Space Grotesk';font-weight:700;font-size:1.35rem;color:#fff;letter-spacing:.02em;display:flex;align-items:center}
.brand span{color:var(--accent)}
.nav-links{display:flex;gap:30px;align-items:center}
.nav-links a{color:#AEB7BE;font-size:.93rem;font-weight:500;transition:color .15s}
.nav-links a:hover{color:#fff}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}
footer.site{background:#07090C;color:var(--muted);padding-block:48px;border-top:1px solid var(--line);margin-top:var(--section-y)}
footer .cols{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px}
footer p{font-size:.9rem;max-width:36ch;margin-top:14px}
footer .fcol h5{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
footer .fcol a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:9px;transition:color .15s}
footer .fcol a:hover{color:#fff}
footer .legal{border-top:1px solid var(--line);margin-top:36px;padding-top:22px;font-size:.82rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* Insights index */
.page-head{padding-block:clamp(56px,8vw,96px) 0}
.page-head h1{font-size:clamp(2.2rem,4.4vw,3.4rem);margin:14px 0 14px}
.page-head p{font-size:clamp(1.05rem,1.6vw,1.2rem);color:var(--muted);max-width:60ch}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
.filters span{font-size:.82rem;font-weight:600;color:#C6CDD3;border:1px solid var(--line);padding:8px 16px;border-radius:999px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:46px}
.post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);transition:transform .2s,border-color .2s}
.post:hover{transform:translateY(-4px);border-color:#33404b}
.post .thumb{height:170px;background:linear-gradient(135deg,#202A32,#0C1116);display:flex;align-items:flex-end;padding:16px}
.post .thumb span{color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;background:var(--accent);padding:5px 12px;border-radius:999px}
.post .body{padding:24px;display:flex;flex-direction:column;flex:1}
.post .date{font-size:.78rem;color:var(--muted);margin-bottom:8px}
.post h3{font-size:1.18rem;margin-bottom:10px;line-height:1.25}
.post p{font-size:.92rem;margin-bottom:16px;color:var(--body)}
.post .more{margin-top:auto;color:#fff;font-weight:600;font-size:.86rem;border-bottom:2px solid var(--accent);padding-bottom:2px;align-self:flex-start}

/* Article */
.article{padding-block:clamp(48px,7vw,84px) 0}
.article .meta{display:flex;gap:14px;align-items:center;font-size:.85rem;color:var(--muted);margin-top:18px;flex-wrap:wrap}
.article .meta .cat{color:var(--accent);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:.76rem}
.article h1{font-size:clamp(2rem,4vw,3rem);max-width:20ch;margin:14px 0 0}
.prose{max-width:var(--readw);margin:46px auto 0;font-size:1.075rem;color:#CDD4DB}
.prose h2{color:var(--fg);font-size:1.45rem;margin:38px 0 14px}
.prose p{margin-bottom:22px}
.prose strong{color:var(--fg);font-weight:600}
.prose .lead{font-size:1.2rem;color:var(--fg);line-height:1.55;margin-bottom:26px}
.figure{max-width:var(--readw);margin:36px auto;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface)}
.figure .ph{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#202A32,#0C1116);color:var(--muted);font-size:.85rem;text-align:center;padding:20px}
.figure figcaption{font-size:.8rem;color:var(--muted);padding:12px 18px;border-top:1px solid var(--line)}
.tags{max-width:var(--readw);margin:34px auto 0;display:flex;gap:10px;flex-wrap:wrap}
.tags span{border:1px solid var(--line);color:#C6CDD3;font-size:.82rem;padding:7px 14px;border-radius:999px}
.article-cta{max-width:var(--readw);margin:46px auto 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:32px 34px}
.article-cta h3{font-size:1.3rem;margin-bottom:8px}
.article-cta p{color:var(--body);margin-bottom:18px}
.back{max-width:var(--readw);margin:40px auto 0;font-size:.9rem;color:var(--muted)}
.back a{color:#fff;border-bottom:2px solid var(--accent);padding-bottom:1px}
.prose,.tags,.article-cta,.back{padding-inline:var(--pad)}

@media(max-width:900px){
  .nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:rgba(11,15,19,.98);border-bottom:1px solid var(--line);padding:8px 0;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:14px var(--pad)}
  .menu-btn{display:block}
  .posts{grid-template-columns:1fr}
}