:root{
  --bg:#000;
  --accent:#d6b27c;
  --text:#f2f2f2;
  --muted:#c9c2bb;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

a{
  color:inherit;
  text-decoration:none;
}

/* ========= HERO ========= */

.hero{
  position:relative;
  min-height:clamp(320px, 62vh, 520px);
  overflow:hidden;
  background:#000;
}

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.88)),
    url("/images/hand.jpg") center 35% / cover no-repeat;
  transform:scale(1.02);
  z-index:0;
}

.hero-inner{
  position:relative;
  z-index:2;
  max-width:1100px;
  margin:0 auto;
  padding:1.2rem 1rem 2rem;
}

/* ========= TOP BAR ========= */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

.brand{
  font-family:Cinzel, serif;
  letter-spacing:.1em;
  font-size:clamp(1.1rem, 2.4vw, 1.6rem);
 
  line-height:1.1;
}

.brand small{
  display:block;
  font-family:Inter, sans-serif;
  font-size:.8rem;
  color:var(--muted);
  letter-spacing:.08em;
  margin-top:.25rem;
  text-transform:none;
}

.navlinks{
  display:flex;
  gap:1rem;
  align-items:center;
}

.navlinks a{
  font-family:Cinzel, serif;
  letter-spacing:.12em;
  font-size:1.05rem;
  font-weight:600;
  color:var(--accent);
  padding:.55rem .85rem;
  border-radius:999px;
  transition:background .18s ease, color .18s ease;
}

.navlinks a:hover{
  background:rgba(214,178,124,.18);
  color:var(--text);
}

/* ========= HERO TITLE ========= */

.hero-title{
  margin-top:clamp(5rem, 14vh, 9rem);
  max-width:760px;
  padding-left:2%;
}

.hero-title h1{
  margin:0;
  font-family:Cinzel, serif;
  font-weight:600;
  letter-spacing:.1em;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
 
  color:var(--accent);
  text-shadow:1px 1px 6px rgba(0,0,0,.65);
}

.hero-title p{
  margin-top:1rem;
  color:var(--muted);
  line-height:1.7;
  max-width:580px;
}

/* ========= PAGE CONTENT ========= */

main{
  max-width:900px;
  margin:3rem auto 4rem;
  padding:0 1rem;
}

.listing{
  padding:1.7rem 0;
}

.listing h2{
  margin:0 0 .6rem;
  font-family:Cinzel, serif;
  font-size:1.45rem;
  color:var(--accent);
}

.listing p{
  margin:.45rem 0;
  color:var(--muted);
  line-height:1.8;
}

.listing strong{
  color:var(--text);
}

.listing a{
  color:var(--accent);
}

hr{
  border:none;
  border-top:1px solid rgba(214,178,124,.18);
}

/* ========= RESPONSIVE ========= */

@media (max-width:860px){

  .navlinks{
    display:none;
  }

  .hero-title{
    margin-top:4rem;
  }

}
h1,
h2,
.brand,
.navlinks a{
  text-transform:none !important;
}