:root{
  --bg: #f5f5f7;
  --panel: #ffffff;
  --ink: #0f172a;
  --accent: #dc2626;
}

body{background: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;}

.top{background:rgba(255,255,255,.9); border-bottom:1px solid rgba(0,0,0,.06); padding:.85rem 0;}
.site-title{font-weight:900; line-height:1.1;}
.site-tagline{color:rgba(15,23,42,.65); font-size:.95rem;}

.layout{display:grid; grid-template-columns: minmax(0, 1fr) 360px; gap:1rem; padding:1rem 0 2rem;}
.content{background:var(--panel); border:1px solid rgba(0,0,0,.06); border-radius:16px; padding:1.2rem;}
.aside .callout{border-radius:16px; border:1px solid rgba(0,0,0,.06);}

.layout.is-collapsed{grid-template-columns: 1fr;}
.layout.is-collapsed .aside{display:none;}

@media (max-width: 980px){
  .layout{grid-template-columns: 1fr;}
  .aside{order:-1;}
}

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