:root{
  --bg: #f7fff7;
  --ink: #071a12;
  --accent: #16a34a;
  --accent2: #8b5cf6;
}

body{background:linear-gradient(135deg, rgba(22,163,74,.10), rgba(139,92,246,.08)), var(--bg); color:var(--ink);}
.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{position:sticky; top:0; z-index:20; background:rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom:1px solid rgba(0,0,0,.06);}
.top__row{display:flex; gap:.75rem; align-items:center; padding:.85rem .75rem;}
#logo a{font-weight:900; color:var(--accent); text-decoration:none;}
.top__tagline{margin-left:auto; color:rgba(7,26,18,.6); font-size:.95rem; max-width: 48ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

.off{position:fixed; inset:0; z-index:50;}
.off__bg{position:absolute; inset:0; background:rgba(0,0,0,.35);}
.off__panel{position:absolute; left:0; top:0; bottom:0; width:min(86vw, 340px); background:#fff; padding:1rem;}
.off__head{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:1rem;}

.panes{display:grid; grid-template-columns: 220px minmax(0, 1fr) 260px; gap:1rem; padding:1rem .75rem 2rem;}
.pane--main #content{border-left:4px solid rgba(22,163,74,.25);}
.panes.is-focus{grid-template-columns: 1fr;}
.panes.is-focus .pane--left, .panes.is-focus .pane--right{display:none;}

@media (max-width: 960px){
  .panes{grid-template-columns: 1fr;}
  .pane--left, .pane--right{display:none;}
}

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