:root {
  --night: #171b3d;
  --night-lift: #202658;
  --ember: #ff4325;
  --cream: #f4eadc;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  background: #0e1128;
  color-scheme: dark;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--cream);
  background: #0e1128;
  font-family: var(--display);
  letter-spacing: 0;
}

img { display: block; max-width: 100%; }

p, h1, h2, h3, dl, dd, figure { margin: 0; }

main {
  width: min(100%, 1440px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--night);
}

.opening { display: block; }

.poster-frame {
  width: min(100%, 960px);
  margin-inline: auto;
}

.event-poster {
  display: block;
  width: 100%;
  height: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.menu-panel {
  padding: clamp(52px, 5.4vw, 78px) clamp(44px, 5.55vw, 80px) 64px;
  background: var(--night);
}

.eyebrow {
  color: var(--ember);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.section-heading h1,
.section-heading h2 {
  margin-top: 20px;
  color: var(--cream);
  font-size: clamp(40px, 3.62vw, 52px);
  font-weight: 700;
  line-height: 1.12;
}

.menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "one two" "three four";
  gap: 64px 40px;
  margin-top: 72px;
}

.dish-1 { grid-area: one; }
.dish-2 { grid-area: two; }
.dish-3 { grid-area: three; }
.dish-4 { grid-area: four; }

.dish span {
  display: block;
  color: var(--ember);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
}

.dish h2 {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(28px, 2.02vw, 30px);
  font-weight: 700;
  line-height: 1.17;
}

.dish p {
  margin-top: 12px;
  font-family: var(--display);
  font-size: clamp(19px, 1.6vw, 23px);
  line-height: 1.5;
}

.evening {
  padding: 64px 5% 68px;
  background: var(--night-lift);
}

.evening-heading h2 {
  font-size: clamp(40px, 3.33vw, 48px);
  line-height: 1.17;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 44px;
}

.service { padding-top: 0; }

.service + .service {
  border-left: 1px solid rgba(255, 67, 37, .45);
  padding-left: 10.4%;
}

.service h3 {
  color: var(--ember);
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
}

.price-line {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 12px;
}

.price-line strong {
  font-size: clamp(68px, 5.84vw, 84px);
  line-height: 1;
}

.price-line span {
  font-size: clamp(14px, 1.12vw, 16px);
  font-weight: 500;
  line-height: 1.25;
  text-transform: uppercase;
}

.timings,
.pickup-label,
.pickup-time {
  font-size: clamp(17px, 1.4vw, 20px);
  font-weight: 500;
  line-height: 1.45;
}

.timings { margin-top: 28px; }
.timings div { display: flex; gap: 28px; }
.timings div + div { margin-top: 8px; }
.timings dt { min-width: 145px; text-transform: uppercase; }
.pickup-label { margin-top: 32px; text-transform: uppercase; }
.pickup-time { margin-top: 12px; }

.about {
  padding: 72px 5% 64px;
  background: var(--night);
}

.about h2 {
  margin-top: 16px;
  font-size: clamp(42px, 3.48vw, 50px);
  line-height: 1.12;
  text-transform: uppercase;
}

.about > p:last-child {
  max-width: 1040px;
  margin-top: 24px;
  font-size: clamp(20px, 1.53vw, 22px);
  line-height: 1.55;
}

.closing {
  padding: 42px 5% 46px;
  color: var(--night);
  background: var(--ember);
  font-weight: 700;
  text-transform: uppercase;
}

.closing-title { font-size: clamp(38px, 3.33vw, 48px); line-height: 1.08; }
.closing > p:last-child { margin-top: 12px; font-size: clamp(14px, 1.12vw, 16px); line-height: 1.25; }

@media (min-width: 1200px) {
  .opening {
    display: grid;
    grid-template-columns: 46.875% 53.125%;
    align-items: stretch;
  }

  .poster-frame {
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width: 899px) {
  .menu-panel { padding: 48px 24px 56px; }
  .eyebrow { font-size: 14px; }
  .section-heading h1 { margin-top: 18px; font-size: 40px; line-height: 1.1; }

  .menu-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "one" "two" "three" "four";
    gap: 0;
    margin-top: 56px;
  }

  .dish + .dish { margin-top: 48px; }
  .dish span { font-size: 14px; }
  .dish h2 { margin-top: 10px; font-size: 30px; line-height: 1.18; }
  .dish p { margin-top: 12px; font-size: 19px; line-height: 1.5; }

  .evening { padding: 52px 24px 56px; }
  .evening-heading h2 { margin-top: 18px; font-size: 36px; line-height: 1.18; }
  .service-grid { display: block; margin-top: 36px; }
  .service { padding-top: 0; }
  .service + .service {
    margin-top: 40px;
    border-top: 1px solid rgba(255, 67, 37, .45);
    border-left: 0;
    padding-top: 40px;
    padding-left: 0;
  }
  .service h3 { font-size: 15px; }
  .price-line { gap: 24px; margin-top: 10px; }
  .price-line strong { font-size: 68px; }
  .price-line span { font-size: 14px; }
  .timings,
  .pickup-label,
  .pickup-time { font-size: 17px; line-height: 1.5; }
  .timings { margin-top: 22px; }
  .timings div { display: grid; grid-template-columns: 117px 1fr; gap: 14px; }
  .timings dt { min-width: 0; }
  .pickup-label { margin-top: 26px; }
  .pickup-time { margin-top: 10px; }

  .about { padding: 52px 24px 56px; }
  .about h2 { margin-top: 16px; font-size: 36px; line-height: 1.16; }
  .about > p:last-child { margin-top: 20px; font-size: 19px; line-height: 1.55; }

  .closing { padding: 40px 24px 44px; }
  .closing-title { max-width: 342px; font-size: 36px; line-height: 1.08; }
  .closing > p:last-child { max-width: 342px; margin-top: 16px; font-size: 14px; line-height: 1.3; }
}

@media (max-width: 359px) {
  .menu-panel, .evening, .about, .closing { padding-right: 20px; padding-left: 20px; }
  .section-heading h1 { font-size: 36px; }
  .timings,
  .pickup-label,
  .pickup-time { font-size: 16px; }
  .timings div { grid-template-columns: 106px 1fr; gap: 8px; }
}