*{box-sizing:border-box}
body{margin:0;font:16px/1.6 Georgia,'Times New Roman',serif;background:#161311;color:#e8e2d8}
a{color:#d8b46a}
.hero{text-align:center;padding:96px 16px 64px;background:radial-gradient(ellipse at 50% 120%,#2a1f14 0%,#161311 70%)}
.hero.small{padding:40px 16px 24px}
.hero h1{font-size:clamp(40px,9vw,84px);letter-spacing:.18em;margin:0;color:#d8b46a;text-shadow:0 0 40px rgba(216,180,106,.25)}
.hero h1 a{text-decoration:none}
.tag{font-style:italic;color:#b8ae9f;margin:8px 0 24px}
.status{font-size:14px;color:#9a9086}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px}
.dot.on{background:#7fc06a;box-shadow:0 0 8px #7fc06a}
.dot.off{background:#e07050}
.btn{display:inline-block;background:#d8b46a;color:#161311;font-weight:bold;padding:12px 28px;border-radius:6px;text-decoration:none;font-family:system-ui}
.btn:hover{background:#e8c87e}
.muted{color:#9a9086;font-size:13px}
main{max-width:760px;margin:0 auto;padding:24px 16px 64px}
section{margin:48px 0}
h2{color:#d8b46a;font-variant:small-caps;letter-spacing:.08em;border-bottom:1px solid #3a322a;padding-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px}
.grid img{width:100%;border-radius:4px;border:1px solid #3a322a}
.note{border-left:3px solid #3a322a;padding-left:16px;margin:24px 0}
.note .meta{font-size:13px;color:#9a9086;font-weight:normal;font-style:italic;margin-left:8px}
footer{text-align:center;padding:24px;border-top:1px solid #2a241e}