/* style-web.css */
:root{
 --bg:#f3f4f6; --card:#fff; --accent:#d58f79; --blue:#dff4fb;
}
*{box-sizing:border-box}
body{
 margin:0;
 font-family:system-ui,sans-serif;
 background:var(--bg);
 color:#222;
 line-height:1.6;
}
.site-shell{
 display:grid;
 grid-template-columns:240px 1fr;
 min-height:100vh;
}
.sidebar{
 background:#0f172a;
 color:white;
 padding:1rem;
 position:sticky; top:0; height:100vh;
}
.sidebar a{color:#dbeafe;text-decoration:none;display:block;padding:.4rem 0}
main{padding:2rem}
.hero-banner{
 background:url('images/cover.jpg') center/cover no-repeat;
 border-radius:20px;
 min-height:420px;
 display:flex;
 align-items:end;
 padding:2rem;
 color:white;
}
.content-card{
 background:var(--card);
 border-radius:16px;
 padding:1.25rem;
 margin:1rem 0;
 box-shadow:0 2px 10px rgba(0,0,0,.08);
}
.sidebar-box{
 background:var(--blue);
 border-left:4px solid #6ca7bb;
 padding:1rem;
 border-radius:10px;
}
.section-title{
 border-bottom:2px solid var(--accent);
 display:inline-block;
 padding-bottom:.2rem;
}
@media (max-width: 800px){
 .site-shell{grid-template-columns:1fr}
 .sidebar{position:relative;height:auto}
}