
:root{
  --olive:#5b6447;
  --black:#0f0f0f;
  --soft:#f5f4f2;
  --white:#ffffff;
  --orange:#c86f3a;
  --deep-green:#3b4430;
  --maxw:1100px;
  --radius:8px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--soft);color:#111;font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; line-height:1.6;}
img{max-width:100%; display:block}
.site-header{background:var(--olive);color:var(--white);position:sticky;top:0;z-index:100;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.header-inner{max-width:var(--maxw);margin:0 auto;padding:16px 20px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--white)}
.brand img{width:44px;height:44px}
.brand .name{font-weight:700;letter-spacing:.04em;font-size:20px;text-transform:uppercase}
.nav{margin-left:auto;display:flex;gap:22px}
.nav a{color:var(--white);text-decoration:none;font-weight:600;opacity:.95}
.nav a:hover{opacity:1;text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:40px 20px}
.block{background:var(--black);color:var(--white);padding:36px;border-radius:var(--radius);margin-bottom:26px;}
.block h2{margin:0 0 12px;font-size:36px;line-height:1.15;font-family:'Georgia','Times New Roman',serif;font-weight:600;}
.block p{opacity:.95}
.frame{border:3px solid var(--deep-green);border-radius:6px;padding:10px;background:#d9dbd5;min-height:160px}
.accent{color:var(--orange)}
.kicker{letter-spacing:.1em;text-transform:uppercase;font-weight:700;font-size:12px;color:var(--orange)}
.grid{display:grid;gap:22px}
.grid.two{grid-template-columns:1.1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.btn{display:inline-block;padding:10px 16px;border-radius:6px;text-decoration:none;font-weight:700;border:2px solid var(--white);color:var(--white)}
.btn:hover{background:var(--white);color:var(--black)}
.btn.alt{border-color:var(--orange);color:var(--orange)}
.btn.alt:hover{background:var(--orange);color:var(--white)}
.hero{padding-top:24px}
.hero h1{font-size:64px;margin:0 0 10px;font-family:'Georgia','Times New Roman',serif}
.hero p{max-width:60ch;opacity:.9}
.card{background:#1a1a1a;border:1px solid rgba(255,255,255,.08);border-radius:8px;padding:16px}
.card h3{margin:.2rem 0 .4rem;font-size:20px}
.card .meta{font-size:12px;opacity:.75}
@media (max-width:900px){
  .grid.two,.grid.three{grid-template-columns:1fr}
  .hero h1{font-size:42px}
}
