/* Tavern Crawl Landing Page — Dark Medieval Theme */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0806;
  --bg-card:#151210;
  --bg-card-hover:#1c1915;
  --gold:#c9a55c;
  --gold-dim:#8a7340;
  --text:#d4cdc0;
  --text-dim:#8a8275;
  --heading:#e8dcc8;
  --border:#2a2318;
  --shadow:0 4px 24px rgba(0,0,0,.6);
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Crimson Text',Georgia,serif;
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:#e0c476;text-decoration:underline}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:90vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:2rem 1rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:url('/images/locations/tavern.webp') center/cover no-repeat;
  filter:brightness(.35);
  z-index:0;
}
.hero__content{position:relative;z-index:1;max-width:700px}

.hero__title{
  font-family:'Cinzel Decorative','Cinzel',serif;
  font-size:clamp(2.2rem,6vw,4rem);
  color:var(--gold);
  text-shadow:0 2px 12px rgba(0,0,0,.8);
  margin-bottom:.5rem;
  letter-spacing:.04em;
}
.hero__tagline{
  font-size:clamp(1rem,2.5vw,1.35rem);
  color:var(--text);
  margin-bottom:2rem;
  text-shadow:0 1px 6px rgba(0,0,0,.8);
}

.badge{
  display:inline-block;
  transition:transform .2s;
}
.badge:hover{transform:scale(1.05)}
.badge img{height:60px;width:auto}

/* ---------- Section shared ---------- */
.section{padding:4rem 1.5rem;max-width:1100px;margin:0 auto}
.section__title{
  font-family:'Cinzel',serif;
  font-size:clamp(1.4rem,3vw,2rem);
  color:var(--gold);
  text-align:center;
  margin-bottom:2.5rem;
  letter-spacing:.03em;
}

/* ---------- Features ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.5rem}
.feature-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:10px;
  padding:1.8rem 1.4rem;
  text-align:center;
  transition:background .2s,border-color .2s;
}
.feature-card:hover{background:var(--bg-card-hover);border-color:var(--gold-dim)}
.feature-card__icon{font-size:2.2rem;margin-bottom:.6rem}
.feature-card__title{
  font-family:'Cinzel',serif;
  font-size:1.1rem;
  color:var(--heading);
  margin-bottom:.5rem;
}
.feature-card__desc{font-size:.95rem;color:var(--text-dim);line-height:1.6}

/* ---------- Characters ---------- */
.characters{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:2rem;justify-items:center}
.char-card{text-align:center;max-width:220px}
.char-card__img{
  width:160px;height:160px;
  border-radius:50%;
  object-fit:cover;
  object-position:center 20%;
  border:3px solid var(--gold-dim);
  margin-bottom:.8rem;
  box-shadow:0 2px 16px rgba(0,0,0,.5);
}
.char-card__name{
  font-family:'Cinzel',serif;
  font-size:1.05rem;
  color:var(--heading);
}
.char-card__title{font-size:.85rem;color:var(--text-dim)}

/* ---------- Locations ---------- */
.locations{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.2rem}
.loc-card{
  position:relative;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:16/10;
}
.loc-card img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.loc-card:hover img{transform:scale(1.05)}
.loc-card__label{
  position:absolute;bottom:0;left:0;right:0;
  padding:.6rem .8rem;
  background:linear-gradient(transparent,rgba(0,0,0,.85));
  font-family:'Cinzel',serif;
  font-size:.95rem;
  color:var(--heading);
}

/* ---------- CTA ---------- */
.cta{
  text-align:center;
  padding:3rem 1rem 4rem;
}
.cta__heading{
  font-family:'Cinzel',serif;
  font-size:clamp(1.3rem,3vw,1.8rem);
  color:var(--heading);
  margin-bottom:1.2rem;
}

/* ---------- Footer ---------- */
.footer{
  text-align:center;
  padding:2rem 1rem;
  border-top:1px solid var(--border);
  font-size:.85rem;
  color:var(--text-dim);
}
.footer a{color:var(--gold-dim)}
.footer a:hover{color:var(--gold)}
.footer__links{margin-bottom:.5rem}
.footer__links a+a{margin-left:1.2rem}

/* ---------- Responsive ---------- */
@media(max-width:600px){
  .hero{min-height:80vh}
  .section{padding:2.5rem 1rem}
  .char-card__img{width:120px;height:120px}
}