:root { --ink:#14221c; --brass:#c4a15a; --paper:#efe7d6; --card:#f7f3ea; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:18px/1.5 "Segoe UI", sans-serif; }
.top { display:flex; gap:24px; align-items:center; padding:22px 6vw; background:var(--ink); color:var(--paper); }
.brand { color:var(--brass); font-weight:700; letter-spacing:.08em; text-decoration:none; text-transform:uppercase; }
nav { margin-left:auto; display:flex; gap:18px; }
nav a { color:var(--paper); text-decoration:none; }
.nav-toggle { display:none; }
.layout { display:grid; grid-template-columns:240px 1fr; min-height:70vh; }
.rail { background:var(--ink); color:var(--paper); padding:32px 24px; }
.rail span { display:block; color:var(--brass); font-size:13px; letter-spacing:.14em; text-transform:uppercase; }
.stage { padding:48px 6vw; }
.stage h1 { font-size:clamp(40px, 6vw, 76px); line-height:.95; margin:0 0 16px; }
.hero-img { width:100%; height:auto; display:block; border:8px solid #fff; }
.cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:28px; }
.card { background:var(--card); padding:18px; border-top:4px solid var(--brass); }
.foot { padding:24px 6vw; font-size:14px; }
@media (max-width:800px) {
  .layout, .cards { grid-template-columns:1fr; }
  .nav-toggle { display:inline-block; margin-left:auto; background:transparent; color:var(--paper); border:1px solid var(--brass); }
  nav { display:none; }
  body.nav-open nav { display:flex; flex-direction:column; position:absolute; top:70px; left:0; right:0; background:var(--ink); padding:16px 6vw; }
}