:root{
  --bg: #f8fafc;
  --card: #ffffff;
  --ink: #0f172a;
  --accent: #0ea5e9;
}

body{background:linear-gradient(180deg, rgba(14,165,233,.08), transparent 55%), var(--bg); color:var(--ink);}
#logo img{height:34px; width:auto; display:block;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.topbar{background:rgba(255,255,255,.86); border-bottom:1px solid rgba(0,0,0,.06); backdrop-filter: blur(10px);}
.headroom--pinned{transform:translateY(0); transition:transform .18s ease;}
.headroom--unpinned{transform:translateY(-110%); transition:transform .18s ease;}

.masonry{column-count: 2; column-gap: 1rem;}
.masonry > *{break-inside: avoid; background:var(--card); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1rem; margin:0 0 1rem;}
.masonry h1,.masonry h2,.masonry h3{margin-top:0;}

@media (max-width: 900px){
  .masonry{column-count:1;}
}

#footer{background:#fff; border-top:1px solid rgba(0,0,0,.06);}
#footer .container{max-width:1100px; margin:0 auto; padding:1.2rem;}