:root {
  --bg: #111318;
  --bg-soft: #171b23;
  --ink: #f4f1e7;
  --muted: #c3bbab;
  --gold: #b99346;
  --line: #85652a;
  --red: #8f1d24;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  background:
    radial-gradient(circle at 18% 4%, rgba(185, 147, 70, 0.14), transparent 28%),
    radial-gradient(circle at 84% 78%, rgba(138, 29, 36, 0.14), transparent 30%),
    linear-gradient(180deg, #101217 0%, var(--bg) 100%);
}

.shell {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 1rem 1rem 2rem;
  display: grid;
  gap: 1rem;
}

.logo-block {
  text-align: center;
  padding: 0.8rem 0 0.2rem;
}

.crest-top {
  margin: 0;
  color: var(--gold);
  font-family: "UnifrakturCook", "Times New Roman", serif;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
}

.crest-mid {
  margin: 0.2rem 0 0;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #dbc490;
  font-size: 0.78rem;
}

.hero {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.45rem 1rem 1.7rem;
  text-align: center;
}

h1 {
  margin: 0;
  font-size: clamp(1.5rem, 4.4vw, 2rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.search-bar {
  margin: 1rem auto 0;
  width: min(760px, 100%);
  display: grid;
  grid-template-columns: 1fr auto;
  border: 1px solid #9c9c9c;
  border-radius: 18px;
  overflow: hidden;
  background: #ececec;
}

.search-bar input {
  border: 0;
  padding: 0.8rem 0.9rem;
  font: inherit;
  color: #151515;
}

.search-bar button {
  border: 0;
  border-left: 1px solid #b3b3b3;
  background: #f8f8f8;
  color: #111;
  padding: 0 1rem;
  font: inherit;
  cursor: pointer;
}

.section-title-wrap {
  display: grid;
  place-items: center;
  position: relative;
  padding-top: 0.2rem;
}

.section-title-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 52%;
  border-top: 1px solid var(--line);
  z-index: 0;
}

.section-title-wrap h2 {
  position: relative;
  z-index: 1;
  margin: 0;
  text-transform: uppercase;
  background: #111318;
  border-radius: 18px;
  padding: 0.45rem 1.2rem;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.locations-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.location-card {
  min-height: 205px;
  border: 1px solid #272e3a;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
  background-size: cover;
  background-position: center;
}

.location-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 14, 19, 0.15) 36%, rgba(7, 8, 11, 0.86) 100%);
}

.card-1 {
  background-image: linear-gradient(135deg, #535a58 0%, #343a3d 50%, #23282e 100%);
}

.card-2 {
  background-image: linear-gradient(135deg, #4e5b66 0%, #2f3a45 50%, #202832 100%);
}

.card-3 {
  background-image: linear-gradient(135deg, #6a665d 0%, #403d37 50%, #292723 100%);
}

.card-4 {
  background-image: linear-gradient(135deg, #4f5f47 0%, #303a2e 50%, #212821 100%);
}

.card-5 {
  background-image: linear-gradient(135deg, #5f5365 0%, #3a3040 50%, #23202b 100%);
}

.card-6 {
  background-image: linear-gradient(135deg, #5e473f 0%, #392821 50%, #211713 100%);
}

.card-overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 1;
  padding: 0.55rem;
}

.card-overlay h3 {
  margin: 0;
  font-size: 1.1rem;
  text-transform: uppercase;
}

.card-overlay p {
  margin: 0.1rem 0 0;
  color: #d9d0bc;
  text-transform: uppercase;
  font-size: 0.76rem;
}

.card-overlay a {
  margin-top: 0.4rem;
  display: inline-block;
  text-decoration: none;
  color: #fff5ea;
  background: var(--red);
  border: 1px solid #651219;
  border-radius: 3px;
  padding: 0.2rem 0.62rem;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

.promo-row {
  margin-top: 0.5rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.promo-card {
  min-height: 170px;
  border: 1px solid #272e3a;
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.promo-membership {
  background: linear-gradient(135deg, #0a2b36 0%, #111f2b 45%, #1b2935 100%);
}

.promo-events {
  background: linear-gradient(135deg, #103032 0%, #181b24 45%, #1a242d 100%);
}

.promo-card h2 {
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
}

.promo-card a {
  position: absolute;
  bottom: 0.8rem;
  text-decoration: none;
  color: #fff5ea;
  background: var(--red);
  border: 1px solid #651219;
  border-radius: 3px;
  padding: 0.2rem 0.68rem;
  text-transform: uppercase;
  font-size: 0.74rem;
  font-weight: 700;
}

.map-cta {
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

.map-graphic {
  min-height: 360px;
  border: 1px solid #332916;
  border-radius: 2px;
  background:
    radial-gradient(circle at 22% 30%, rgba(58, 42, 28, 0.38), transparent 34%),
    radial-gradient(circle at 72% 48%, rgba(50, 35, 24, 0.42), transparent 38%),
    linear-gradient(140deg, #c09a72 0%, #ad835f 45%, #8b674a 100%);
  position: relative;
}

.map-graphic a {
  position: absolute;
  left: 50%;
  bottom: 1.1rem;
  transform: translateX(-50%);
  text-decoration: none;
  color: #fff5ea;
  background: var(--red);
  border: 1px solid #651219;
  border-radius: 3px;
  padding: 0.28rem 1.2rem;
  text-transform: uppercase;
  font-size: 0.92rem;
  font-weight: 700;
}

.home-footer {
  border-top: 1px solid var(--line);
  margin-top: 0.9rem;
  padding: 1.5rem 1rem 2rem;
  text-align: center;
}

.footer-brand {
  margin: 0;
  color: var(--gold);
  font-family: "UnifrakturCook", "Times New Roman", serif;
  font-size: 1.6rem;
}

.footer-links {
  margin: 0.6rem 0 0;
  color: #ddd0b1;
  text-transform: uppercase;
  font-size: 0.88rem;
}

.footer-copy {
  margin: 0.35rem 0 0;
  color: #c7baa0;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.site-footer-logo {
  display: block;
  width: 150px;
  margin: 0 auto;
}

@media (max-width: 960px) {
  .locations-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .promo-row,
  .locations-grid {
    grid-template-columns: 1fr;
  }

  .search-bar {
    grid-template-columns: 1fr;
  }

  .search-bar button {
    border-left: 0;
    border-top: 1px solid #b3b3b3;
    padding: 0.65rem 0.9rem;
  }
}