/* root palette */
:root{
  --gold:#d4af37;
  --charcoal:#0b0b0b;
  --text:#f8f1e1;
  --accent:#e8c93e;
  --serif:'Playfair Display',serif;
  --sans:'Inter',sans-serif;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:wght@600&display=swap');
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--charcoal);color:var(--text);line-height:1.6;}
header{background:#000;border-bottom:1px solid var(--gold);padding:1.25rem;text-align:center;}
.logo{width:155px;height:auto;margin:0 auto 0.75rem;}
nav ul{display:flex;justify-content:center;gap:1.5rem;list-style:none;flex-wrap:wrap;}
nav a{color:var(--text);text-decoration:none;font-weight:600;position:relative;}
nav a::after{content:"";display:block;height:2px;background:transparent;transition:.3s;width:100%;position:absolute;left:0;bottom:-4px;}
nav a:hover::after,nav a.active::after{background:var(--gold);}  
main{padding:2rem;min-height:60vh;}
footer{text-align:center;border-top:1px solid var(--gold);padding:1rem 0;font-size:.875rem;background:#070707;color:#888;}

/* cards, buttons, form fields reused in fragments */
.card{background:#111;border:1px solid var(--gold);border-radius:6px;padding:1.5rem;text-align:center;margin:0 auto 2rem;max-width:600px;}
button,.btn{display:inline-block;background:var(--gold);color:#000;padding:.6rem 1.2rem;border:none;border-radius:4px;font-weight:bold;cursor:pointer;transition:.25s;}
button:hover,.btn:hover{background:var(--accent);}   
input,textarea{width:100%;background:#2a2a2a;border:1px solid var(--gold);color:var(--text);padding:.75rem;border-radius:4px;font-size:1rem;}
textarea{min-height:120px;resize:vertical;}

/* responsive tweaks */
@media(max-width:768px){
  .logo{width:72px;margin-bottom:.5rem;}
  main{padding:1.5rem;}
}
@media(max-width:480px){
  nav ul{gap:1rem;}
  .logo{width:60px;}
}

/* utility */
.text-center{text-align:center;}
.text-gold{color:var(--gold);}