@import url("../../assets/demo.css");

:root {
  --paper: #f8f2e7;
  --ink: #2d2119;
  --muted: #5f4d40;
  --rule: #ccb8a0;
  --accent: #795033;
  --notice: #e9dac7;
  --notice-text: #4f3d2c;
  --hero-bg: #322216;
  --hero-text: #fff7e9;
  --hero-muted: #f0e1cf;
  --hero-accent: #f4cd9c;
  --button: #f0c38f;
  --button-text: #302115;
  --band: #efe1cf;
  --end: #3f2c22;
  --end-text: #fff3e5;
  --end-muted: #ebdac7;
  --end-accent: #edc59d;
  --display: Georgia, "Times New Roman", serif;
  --heading-weight: 400;
}

.hero { position: relative; isolation: isolate; }
.hero .hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 66% 55%;
  z-index: -2;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #21150ff7 0%, #21150fdf 31%, #21150f87 59%, #21150f24 100%);
}
.hero-inner { display: flex; min-height: clamp(28rem, 54vw, 40rem); }
.hero .btn { margin-top: 1.5rem; }
.menu-heading { text-align: center; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.menu-heading .lead { margin-inline: auto; }
.menu-grid, .visit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(2rem, 7vw, 6rem); }
.menu-grid h3 { font-size: 1.7rem; margin-bottom: .45rem; }
.menu-list { margin: 0; }
.menu-list > div { display: flex; justify-content: space-between; gap: .6rem; padding-block: .65rem; border-bottom: 1px solid var(--rule); }
.menu-list dd { margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hours { align-self: center; }
.hours > div { border-color: #977c67; }

@media (max-width: 640px) {
  .hero::before { background: linear-gradient(90deg, #21150ff0, #21150fc9 65%, #21150f8c); }
  .hero .hero-photo { object-position: 65% center; }
  .menu-grid, .visit-grid { grid-template-columns: minmax(0, 1fr); }
}