:root{
  --bg:#110d0a;
  --ink:#f4e3c3;
  --muted:#c7b295;
  --panel:#1b1510;
  --accent:#b2472d;
  --accent-2:#7a2b28;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.5}

a{color:var(--ink);text-decoration:underline}
a.btn{display:inline-block;text-decoration:none}

.hero{position:relative;overflow:hidden;border-bottom:1px solid #2c231c}
.hero-bg{background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.6)), url('assets/banner.jpg') center/cover no-repeat; width:100%; height:320px; filter:saturate(0.9) contrast(1.05)}
.hero-inner{text-align:center; margin-top:-120px; padding:0 16px 24px}
.pfp{width:112px;height:112px;border-radius:50%;border:3px solid #3a2e24;background:#2a211a;object-fit:cover}
h1{margin:12px 0 4px; font-size:2rem; letter-spacing:.3px}
.tag{margin:0; color:var(--muted)}
.subtag{margin:.25rem 0 1rem; color:var(--muted)}

.buttons{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; max-width:960px; margin:0 auto 8px}
.btn{padding:10px 14px; border-radius:14px; border:1px solid #3a2e24; background:#211913}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-2)); border-color:#8f3a2b}
.btn:hover{transform:translateY(-1px)}

.content{max-width:980px;margin:24px auto;padding:0 16px 48px}
.panel{border:1px solid #2f261f;background:var(--panel);border-radius:16px;padding:18px 16px;margin:16px 0}
.panel h2{margin:0 0 6px}
.hint{margin:.25rem 0 1rem;color:#a28e74;font-size:.9rem}

.footer{border-top:1px solid #2c231c;text-align:center;color:#a28e74;padding:20px 10px;font-size:.95rem}