:root {
  --ink: #220812;
  --wine: #2b0718;
  --wine-soft: #4c0d22;
  --cream: #f7efd9;
  --paper: #fff9e9;
  --gold: #e7d28a;
  --yellow: #f6cb38;
  --orange: #f05a24;
  --teal: #0f645c;
  --line: rgba(34, 8, 18, 0.18);
  --radius: 26px;
  --shadow: 0 18px 50px rgba(43, 7, 24, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; padding: .75rem 1rem; background: var(--paper); border-radius: 8px; }
.skip-link:focus { top: 1rem; }

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem clamp(1.25rem, 4vw, 4.5rem);
  color: var(--cream);
}
.mini-brand img { width: 180px; height: 58px; object-fit: contain; object-position: left center; }
nav { display: flex; gap: 1.5rem; align-items: center; }
nav a { font-size: .88rem; font-weight: 700; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
nav a:hover, nav a:focus-visible { color: var(--yellow); }

.hero {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 78% 44%, rgba(240, 90, 36, .24), transparent 22%),
    radial-gradient(circle at 15% 85%, rgba(246, 203, 56, .1), transparent 24%),
    var(--wine);
}
.hero-pattern {
  position: absolute;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(30deg, transparent 48%, var(--gold) 49%, var(--gold) 51%, transparent 52%),
    linear-gradient(-30deg, transparent 48%, var(--gold) 49%, var(--gold) 51%, transparent 52%);
  background-size: 80px 80px;
  mask-image: linear-gradient(90deg, #000, transparent 65%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1180px, calc(100% - 2.5rem));
  min-height: 760px;
  margin: 0 auto;
  padding: 9.5rem 0 7rem;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 7rem);
}
.eyebrow { margin: 0 0 1.1rem; color: var(--yellow); font-weight: 800; letter-spacing: .13em; text-transform: uppercase; font-size: .78rem; }
.eyebrow.dark { color: var(--orange); }
h1, h2, h3 { margin: 0; line-height: .98; }
h1 { max-width: 770px; font-family: "Bebas Neue", sans-serif; font-size: clamp(4.8rem, 10vw, 8.6rem); letter-spacing: -.025em; text-transform: uppercase; }
h1 span { color: var(--yellow); }
.hero-lede { max-width: 610px; margin: 1.4rem 0 2rem; color: rgba(255, 249, 233, .82); font-size: clamp(1.05rem, 2vw, 1.25rem); }
.order-label { margin: 0 0 .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; }
.order-actions { display: flex; flex-wrap: wrap; gap: .7rem; }
.order-button {
  min-width: 190px;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(0,0,0,.2);
  transition: transform .2s ease, box-shadow .2s ease;
}
.order-button:hover, .order-button:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.28); }
.order-button small { font-size: .64rem; font-weight: 600; opacity: .72; }
.order-button.uber { background: #131313; }
.order-button.doordash { background: #e7462d; }
.hero-mark { position: relative; display: grid; place-items: center; min-height: 440px; text-align: center; }
.hero-mark img { position: relative; z-index: 2; width: min(100%, 510px); filter: drop-shadow(0 24px 34px rgba(0,0,0,.25)); }
.hero-mark p { position: relative; z-index: 2; margin: 1.6rem 0 0; font-family: "Bebas Neue", sans-serif; letter-spacing: .12em; text-transform: uppercase; font-size: 1.1rem; }
.sun-disc { position: absolute; width: 390px; aspect-ratio: 1; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 18px rgba(246,203,56,.13), 0 0 0 44px rgba(246,203,56,.06); }
.scallop { position: absolute; left: -20px; right: -20px; bottom: -2px; height: 28px; background: radial-gradient(circle at 18px 30px, var(--cream) 17px, transparent 18px) 0 0 / 36px 28px repeat-x; }

.section { width: min(1180px, calc(100% - 2.5rem)); margin: 0 auto; padding: clamp(5rem, 9vw, 8rem) 0; }
.section-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin-bottom: 2.4rem; }
h2 { max-width: 740px; font-family: "Rye", serif; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.04; font-weight: 400; }
.text-link { font-weight: 800; color: var(--teal); text-underline-offset: .35em; }
.events { padding-bottom: 2.5rem; }
.food { margin-top: 0; padding-top: 2.5rem; padding-bottom: clamp(4rem, 6vw, 5rem); }
.food-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.food-card { overflow: hidden; border-radius: var(--radius); background: var(--wine); box-shadow: var(--shadow); }
.food-card-raised { transform: translateY(1.5rem); }
.food-card > a { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; color: var(--paper); text-decoration: none; }
.food-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s ease, filter .5s ease; }
.food-card:hover img, .food-card a:focus-visible img { transform: scale(1.035); filter: saturate(1.08); }
.food-overlay { position: absolute; inset: auto 0 0; min-height: 42%; padding: 4.5rem 1.35rem 1.35rem; display: flex; flex-direction: column; justify-content: end; background: linear-gradient(transparent, rgba(34, 8, 18, .94)); }
.food-overlay small { color: var(--yellow); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.food-overlay strong { margin-top: .25rem; font-family: "Bebas Neue", sans-serif; font-size: clamp(2.3rem, 4vw, 3.6rem); line-height: .95; letter-spacing: .01em; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.event-card { overflow: hidden; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.event-card.featured { transform: translateY(-1.5rem); }
.event-poster { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; background: var(--wine); }
.event-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
.event-poster:hover img, .event-poster:focus-visible img { transform: scale(1.025); }
.date-stamp { position: absolute; left: 1rem; bottom: 1rem; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; background: var(--yellow); color: var(--ink); font-family: "Bebas Neue", sans-serif; line-height: .82; box-shadow: 0 10px 25px rgba(0,0,0,.25); }
.date-stamp b { display: block; font-size: 2.2rem; }
.event-info { padding: 1.45rem 1.35rem 1.6rem; }
.event-kicker { margin: 0 0 .6rem; color: var(--orange); font-size: .78rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.event-info h3 { font-family: "Bebas Neue", sans-serif; font-size: 2rem; letter-spacing: .01em; }
.event-info p:not(.event-kicker) { min-height: 4.6em; color: rgba(34,8,18,.72); }
.event-info a { font-weight: 800; color: var(--teal); text-underline-offset: .3em; }
.event-actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.event-actions .whatsapp-button { display: inline-flex; padding: .7rem 1rem; border-radius: 999px; color: #fff; background: #167b4d; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.event-actions .whatsapp-button:hover, .event-actions .whatsapp-button:focus-visible { transform: translateY(-2px); background: #11653f; }

.visit { padding-top: 1rem; padding-bottom: clamp(4rem, 6vw, 5rem); }
.visit-card { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.2fr .8fr; gap: 2rem; padding: clamp(2rem, 5vw, 4.5rem); border-radius: 34px 34px 0 0; color: var(--cream); background: var(--wine); }
.visit-card::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border: 45px solid rgba(246,203,56,.12); border-radius: 50%; }
.visit-copy, .hours { position: relative; z-index: 1; }
.visit h2 { font-size: clamp(2.2rem, 4.5vw, 4rem); }
address { margin: 1.5rem 0; font-style: normal; font-size: 1.12rem; color: rgba(255,249,233,.8); }
.map-button { display: inline-flex; padding: .9rem 1.2rem; border-radius: 999px; background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 800; }
.hours { align-self: center; padding: 1.5rem; border: 1px solid rgba(231,210,138,.35); border-radius: 22px; background: rgba(255,255,255,.05); }
.hours dl { margin: 0; }
.hours dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.12); }
.hours dl div:last-child { border-bottom: 0; }
.hours dt { color: rgba(255,249,233,.72); }
.hours dd { margin: 0; font-weight: 800; }
.map-frame { height: 380px; overflow: hidden; border-radius: 0 0 34px 34px; box-shadow: var(--shadow); }
.map-frame iframe { width: 100%; height: 100%; border: 0; filter: saturate(.8) contrast(.95); }

.social-band { padding: 2rem clamp(1.25rem, 4vw, 4rem); display: flex; justify-content: center; align-items: center; gap: 1.5rem 3rem; flex-wrap: wrap; text-align: center; background: var(--orange); color: var(--paper); }
.social-band p { margin: 0; font-family: "Bebas Neue", sans-serif; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: .03em; }
.social-band a { padding: .8rem 1.15rem; border: 2px solid currentColor; border-radius: 999px; font-weight: 800; text-decoration: none; }
.social-band .social-whatsapp { color: #fff; background: #167b4d; border-color: #167b4d; }
footer { display: grid; place-items: center; gap: .8rem; padding: 4rem 1.25rem; text-align: center; color: var(--cream); background: var(--ink); }
footer img { width: min(300px, 76vw); }
footer p { margin: 0; color: rgba(255,249,233,.68); }
footer .copyright { font-size: .8rem; }

@media (max-width: 900px) {
  nav a:not(:last-child) { display: none; }
  .hero-inner { grid-template-columns: 1fr; padding-top: 8.5rem; text-align: center; }
  .hero-copy { display: grid; justify-items: center; }
  .hero-mark { min-height: 330px; }
  .sun-disc { width: min(320px, 76vw); }
  .event-grid { grid-template-columns: 1fr 1fr; }
  .food-grid { grid-template-columns: 1fr 1fr; }
  .food-card-raised { transform: none; }
  .food-card:last-child { grid-column: 1 / -1; width: calc(50% - .625rem); justify-self: center; }
  .event-card.featured { transform: none; }
  .event-card:last-child { grid-column: 1 / -1; width: calc(50% - .625rem); justify-self: center; }
  .visit-card { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .site-header { padding: 1rem 1.1rem; }
  .mini-brand img { width: 140px; }
  nav { gap: .8rem; }
  nav a { font-size: .75rem; }
  .hero-inner { width: min(100% - 2rem, 1180px); padding-bottom: 5rem; }
  h1 { font-size: clamp(4.1rem, 21vw, 6.2rem); }
  .hero-lede { font-size: 1rem; }
  .order-actions { width: 100%; }
  .order-button { width: 100%; }
  .hero-mark { min-height: 280px; }
  .hero-mark p { font-size: .9rem; }
  .section { width: min(100% - 2rem, 1180px); padding: 4.5rem 0; }
  .section-heading { display: block; }
  .text-link { display: inline-block; margin-top: 1.2rem; }
  .events { padding-bottom: 1.25rem; }
  .food { margin-top: -1rem; padding-top: 1.25rem; padding-bottom: 3.5rem; }
  .event-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .food-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .food-card:last-child { grid-column: auto; width: 100%; }
  .event-card:last-child { grid-column: auto; width: 100%; }
  .event-info p:not(.event-kicker) { min-height: auto; }
  .visit { padding-top: 0; padding-bottom: 3.5rem; }
  .visit-card { padding: 2rem 1.3rem; border-radius: 24px 24px 0 0; }
  .hours { padding: 1rem; }
  .hours dl div { display: block; }
  .map-frame { height: 300px; border-radius: 0 0 24px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}