/* ============================================================
   Grillers Mark — Landing (Location Chooser)
   Brand: dark green / gold / cream
   Type:  Cormorant Garamond (serif) · Josefin Sans (sans)
   Rules: zero JS, no render-blocking imports, CLS-safe media
   ============================================================ */

:root {
  --ink:        #0B1315;  /* page background            */
  --pine:       #093324;  /* card background            */
  --pine-2:     #214028;  /* gradients / hover tint     */
  --gold:       #A7893E;  /* primary accent             */
  --gold-bright:#FCB900;  /* hover accent               */
  --gold-light: #C9AB81;  /* muted accent text          */
  --cream:      #F3EEE3;  /* primary text               */
  --cream-dim:  rgba(243, 238, 227, 0.72);
  --line:       rgba(167, 137, 62, 0.25);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans:  'Josefin Sans', 'Helvetica Neue', Arial, sans-serif;
  --maxw:  1120px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--cream);
  font: 400 16px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.label {
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.35em; text-transform: uppercase;
  color: var(--gold);
}
.btn {
  display: inline-block;
  font: 500 12px/1 var(--sans);
  letter-spacing: 0.25em; text-transform: uppercase;
  padding: 15px 34px;
  border: 1px solid var(--gold);
  color: var(--cream); background: transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover { background: var(--gold); color: var(--ink); }
.btn-solid { background: var(--gold); color: var(--ink); }
.btn-solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); }

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 10;
  background: #000000; /* pure black — logo has black bg, so it blends in */
  border-bottom: 1px solid var(--line);
}
.site-head .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand img { height: 44px; width: auto; display: block; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 48px; text-align: center; }
.hero .label { display: block; margin-bottom: 18px; }
.hero h1 {
  font: 500 clamp(48px, 7vw, 88px)/1.05 var(--serif);
  margin-bottom: 20px;
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero p {
  max-width: 540px; margin: 0 auto;
  color: var(--cream-dim); font-weight: 300; font-size: 17px;
}

/* ---------- venue cards ---------- */
.venues { padding: 8px 0 56px; }
.venues > .wrap > .label { display: block; text-align: center; margin-bottom: 32px; }
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.card {
  display: flex; flex-direction: column;
  background: var(--pine);
  border: 1px solid rgba(167, 137, 62, 0.35);
  transition: transform 0.35s, border-color 0.35s;
}
.card:hover { transform: translateY(-6px); border-color: var(--gold); }
.card-img {
  aspect-ratio: 16 / 10;
  background: linear-gradient(160deg, var(--pine-2), var(--ink)); /* placeholder until real photo */
  background-size: cover; background-position: center;
}
.card-body { padding: 30px 32px 36px; display: flex; flex-direction: column; flex: 1; }
.chip {
  align-self: flex-start;
  background: var(--gold); color: var(--ink);
  font: 600 11px/1 var(--sans); letter-spacing: 0.25em; text-transform: uppercase;
  padding: 6px 14px; margin-bottom: 18px;
}
.card h2 { font: 500 34px/1.1 var(--serif); }
.card .sub {
  color: var(--gold-light);
  font: 400 13px/1.4 var(--sans); letter-spacing: 0.18em; text-transform: uppercase;
  margin: 8px 0 14px;
}
.card .desc { font-weight: 300; font-size: 15px; color: var(--cream-dim); margin-bottom: 18px; }
.card .addr { font-size: 14px; color: var(--gold-light); opacity: 0.85; margin-bottom: 26px; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); padding: 40px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 40px; }
.foot-grid h4 { font: 500 20px/1.2 var(--serif); margin-bottom: 12px; }
.foot-grid p { font-size: 14px; font-weight: 300; color: var(--cream-dim); }
.foot-grid a { color: var(--gold-light); }
.foot-grid a:hover { color: var(--gold-bright); }
.foot-grid .socials { margin-top: 14px; }
.foot-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(167, 137, 62, 0.15);
  padding-top: 24px;
  font-size: 13px; color: var(--cream-dim);
}
.socials { display: flex; gap: 12px; }
.socials a {
  width: 38px; height: 38px;
  border: 1px solid rgba(167, 137, 62, 0.4);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; letter-spacing: 0.1em;
  transition: background 0.3s, color 0.3s;
}
.socials a:hover { background: var(--gold); color: var(--ink); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .cards, .foot-grid { grid-template-columns: 1fr; }
  .hero { padding: 48px 0 32px; }
  .card .addr { margin-bottom: 22px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card, .btn, .socials a { transition: none; }
  .card:hover { transform: none; }
}