/* Color + Typography constants (from screenshot sample) */
:root{
  --bg:#151d28;
  --ink:#e8e2d3;
  --muted:#c9bea5;
  --accent:#d9c9a2;
  --line:#2a3347;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family: Georgia, Cambria, "Times New Roman", Times, serif; line-height:1.75;}
h1,h2,h3{margin:0 0 .6rem 0;color:var(--accent)}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
/* Sidebar layout */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;padding:1rem;overflow:auto;
  background:transparent;border-right:1px solid var(--line)}
.brand{font-weight:700;letter-spacing:.02em;margin:.25rem 0 .5rem}
.toc a{display:block;padding:.45rem .5rem;border-radius:.5rem;color:var(--ink)}
.toc a:hover,.toc a.active{background:rgba(255,255,255,.06)}
.main{margin-left:280px;min-height:100vh}
.header{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
.container{max-width:1000px;margin:0 auto;padding:2rem 1.25rem}
.card{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:.8rem;padding:1rem}
.content p{margin:1rem 0}
.navlinks{display:flex;gap:1rem;margin-top:1.25rem}
.footer{color:var(--muted);border-top:1px solid var(--line);padding:1.25rem;margin-top:2rem}
.hero{position:relative;min-height:48vh;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(1.05)}
.hero .overlay{position:relative;text-align:center;padding:2rem;max-width:980px}
.hero h1{font-size:clamp(2rem,6vw,4rem)}
.hero h2{font-size:clamp(1.1rem,3vw,1.6rem);color:var(--muted);font-weight:400}
@media (max-width: 860px){
  .sidebar{position:static;width:auto}
  .main{margin-left:0}
  .hero{min-height:36vh}
}