.menu-page {
  background: var(--color-porcelain);
}

.menu-page section[id],
.menu-page article[id] {
  scroll-margin-top: 7rem;
}

.menu-page .eyebrow {
  margin: 0;
}

.menu-hero__grid,
.menu-table__grid,
.menu-bar__top,
.menu-evenings__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.menu-hero__copy,
.menu-table__copy,
.menu-bar__intro,
.menu-evenings__story,
.menu-evenings__aside,
.menu-hero__media,
.menu-table__media,
.menu-bar__media {
  min-width: 0;
  width: 100%;
}

.menu-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.menu-hero__copy > :is(h1, p),
.menu-hero__copy > .menu-hero__note,
.menu-hero__copy > .menu-hero__actions {
  margin: 0;
}

.menu-hero__copy h1 {
  max-width: 10ch;
}

.menu-hero__lead {
  max-width: 36ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.menu-hero__actions {
  display: flex;
  width: 100%;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.menu-hero__note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
  border-top: var(--border-brass);
  padding-top: var(--space-4);
}

.menu-hero__note-number,
.menu-card__number,
.menu-category__heading > span {
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: 1;
}

.menu-hero__note p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.menu-hero__media,
.menu-table__media,
.menu-bar__media {
  min-width: 0;
  margin: 0;
}

.menu-hero__media img,
.menu-table__media img,
.menu-bar__media img {
  width: 100%;
  max-width: 100%;
  object-fit: cover;
}

.menu-hero__media img {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-organic);
}

.menu-hero__media figcaption {
  color: var(--color-clay);
  font-family: var(--font-heading);
  font-size: var(--text-lead);
  font-style: italic;
}

.menu-reading {
  background: var(--color-porcelain-deep);
}

.menu-reading__heading,
.menu-index__heading,
.menu-kitchen__intro,
.menu-sharing__heading,
.menu-paths__heading {
  min-width: 0;
}

.menu-reading__heading {
  max-width: 30ch;
  margin-bottom: var(--space-7);
}

.menu-reading__heading > :is(h2, p),
.menu-index__heading > :is(h2, p),
.menu-kitchen__intro > :is(h2, p),
.menu-sharing__heading > :is(h2, p),
.menu-paths__heading > :is(h2, p) {
  margin: 0;
}

.menu-reading__heading,
.menu-index__heading,
.menu-kitchen__intro,
.menu-sharing__heading,
.menu-paths__heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.menu-reading__cards,
.menu-kitchen__grid,
.menu-sharing__grid,
.menu-bar__grid,
.menu-paths__grid,
.menu-index__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.menu-reading__card,
.menu-category,
.menu-paths__card,
.menu-index__group {
  min-width: 0;
  width: 100%;
}

.menu-reading__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.menu-reading__card > :is(h3, p) {
  margin: 0;
}

.menu-reading__card h3 {
  font-size: var(--text-h4);
}

.menu-reading__card p {
  max-width: 34ch;
}

.menu-reading__card--blue {
  background: var(--color-dusty-blue);
}

.menu-index__heading {
  max-width: 32ch;
  margin-bottom: var(--space-7);
}

.menu-index__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border-top: var(--border-brass);
}

.menu-index__group > :is(h3, p, ol) {
  margin: 0;
}

.menu-index__group h3 {
  font-size: var(--text-h3);
}

.menu-index__group p {
  max-width: 38ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.menu-index__group--sharing {
  border-radius: var(--radius-lg);
  background: var(--color-porcelain-deep);
}

.menu-index__group--bar {
  border-top-color: var(--color-sage);
}

.menu-index__links {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-2);
}

.menu-index__links li {
  width: 100%;
  min-width: 0;
}

.menu-index__link {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 2.5rem 100%;
  background-repeat: no-repeat;
  background-size: calc(100% - 2.5rem) 1px;
  transition: background-size var(--transition-fast), color var(--transition-fast);
}

.menu-index__link:hover,
.menu-index__link.is-active {
  color: var(--color-clay);
  background-size: 0 1px;
}

.menu-index__link span {
  color: var(--color-brass);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
}

.menu-kitchen__intro {
  max-width: 42ch;
  margin-bottom: var(--space-7);
}

.menu-kitchen__intro p:last-child {
  max-width: 42ch;
}

.menu-category {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  border: var(--border);
  border-radius: var(--radius-lg);
  background: var(--color-porcelain);
}

.menu-category > :is(p, div) {
  margin: 0;
}

.menu-category > p {
  max-width: 38ch;
}

.menu-category__heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: var(--space-3);
}

.menu-category__heading h3 {
  min-width: 0;
  margin: 0;
}

.menu-category--brass {
  border-color: var(--color-brass);
}

.menu-category--seasonal {
  border-color: transparent;
  background: var(--color-dusty-blue);
}

.menu-records {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.menu-record {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  border-top: var(--border);
  padding-block: var(--space-4);
}

.menu-record:last-child {
  border-bottom: var(--border);
}

.menu-record > div,
.menu-record > strong {
  min-width: 0;
}

.menu-record h4,
.menu-record p {
  margin: 0;
}

.menu-record h4 {
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
}

.menu-record p,
.menu-record strong {
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.menu-record strong {
  color: var(--color-clay);
}

.menu-table {
  background: var(--color-porcelain-deep);
}

.menu-table__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.menu-table__copy > :is(h2, p) {
  margin: 0;
}

.menu-table__copy h2,
.menu-table__copy > p:not(.menu-table__footnote) {
  max-width: 36ch;
}

.menu-table__footnote {
  max-width: 48ch;
  border-left: 2px solid var(--color-brass);
  padding-left: var(--space-4);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.menu-table__media img,
.menu-bar__media img {
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-organic);
}

.menu-sharing__heading {
  max-width: 38ch;
  margin-bottom: var(--space-7);
}

.menu-category--sharing {
  border-color: transparent;
  border-radius: var(--radius-xl);
  background: var(--color-porcelain-deep);
}

.menu-category--dessert {
  border-top: 2px solid var(--color-clay);
}

.menu-sharing__link {
  display: inline-block;
  margin-top: var(--space-6);
}

.menu-bar {
  background: var(--color-porcelain-deep);
}

.menu-bar__top {
  margin-bottom: var(--space-7);
}

.menu-bar__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.menu-bar__intro > :is(h2, p) {
  margin: 0;
}

.menu-bar__intro h2,
.menu-bar__intro p:last-child {
  max-width: 38ch;
}

.menu-category--wine {
  border-left-color: var(--color-brass);
}

.menu-category--soft {
  border-color: transparent;
  background: var(--color-sage);
}

.menu-bar__event-note {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-6);
  border-top: 2px solid var(--color-burgundy);
  border-radius: var(--radius-lg);
  background: var(--color-felt-green);
  color: var(--color-porcelain);
}

.menu-bar__event-note > :is(p, a) {
  margin: 0;
}

.menu-bar__event-note .eyebrow {
  color: var(--color-brass);
}

.menu-bar__event-note p:not(.eyebrow) {
  max-width: 70ch;
}

.menu-evenings {
  background: var(--color-felt-green);
  color: var(--color-porcelain);
}

.menu-evenings .eyebrow {
  color: var(--color-brass);
}

.menu-evenings h2,
.menu-evenings h3 {
  color: var(--color-porcelain);
}

.menu-evenings__story,
.menu-evenings__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.menu-evenings__story > :is(h2, p),
.menu-evenings__aside > :is(p, a) {
  margin: 0;
}

.menu-evenings__story h2 {
  max-width: 15ch;
}

.menu-evenings__story p {
  max-width: 45ch;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.menu-evenings__aside {
  padding-top: var(--space-5);
}

.menu-evenings__aside > p {
  max-width: 42ch;
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.menu-evenings__notice {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-5);
  border: var(--border-brass);
  border-radius: var(--radius-lg);
}

.menu-evenings__notice > :is(h3, p) {
  margin: 0;
}

.menu-evenings__notice p {
  max-width: 34ch;
}

.menu-paths__heading {
  max-width: 34ch;
  margin-bottom: var(--space-7);
}

.menu-paths__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.menu-paths__card > :is(h3, p, a) {
  margin: 0;
}

.menu-paths__card p {
  max-width: 34ch;
}

.menu-paths__card--primary {
  border-color: var(--color-felt-green);
}

.menu-paths__card--muted {
  background: var(--color-porcelain-deep);
}

.menu-final__panel {
  padding: var(--space-7) var(--space-5);
  border-radius: var(--radius-xl);
}

.menu-final__content {
  display: flex;
  max-width: 40ch;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-inline: auto;
  text-align: center;
}

.menu-final__content > :is(h2, p, a) {
  margin: 0;
}

.menu-final__content .eyebrow {
  color: var(--color-brass);
}

.menu-final__content h2 {
  color: var(--color-porcelain);
}

.menu-final__content p {
  max-width: 40ch;
}

@media (min-width: 30rem) {
  .menu-hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (min-width: 48rem) {
  .menu-reading__cards,
  .menu-paths__grid,
  .menu-bar__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-reading__card:nth-child(3),
  .menu-paths__card:nth-child(3),
  .menu-bar__grid > :nth-child(3) {
    grid-column: 1 / -1;
  }

  .menu-index__grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .menu-index__group--kitchen {
    grid-column: 1 / -1;
  }

  .menu-index__group--sharing {
    grid-column: span 4;
  }

  .menu-index__group--bar {
    grid-column: span 4;
  }

  .menu-final__panel {
    padding: var(--space-8) var(--space-7);
  }
}

@media (min-width: 64rem) {
  .menu-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-5);
  }

  .menu-hero__copy {
    grid-column: span 5;
  }

  .menu-hero__media {
    grid-column: span 7;
  }

  .menu-reading__cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .menu-reading__card:nth-child(3) {
    grid-column: span 1;
  }

  .menu-index__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .menu-index__group--kitchen {
    grid-column: span 5;
  }

  .menu-index__group--sharing {
    grid-column: span 3;
  }

  .menu-index__group--bar {
    grid-column: span 4;
  }

  .menu-kitchen__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .menu-table__grid,
  .menu-bar__top,
  .menu-evenings__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-5);
  }

  .menu-table__copy,
  .menu-bar__intro {
    grid-column: span 5;
  }

  .menu-table__media,
  .menu-bar__media {
    grid-column: span 7;
  }

  .menu-sharing__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .menu-category--sharing {
    grid-column: span 7;
  }

  .menu-category--dessert {
    grid-column: span 5;
  }

  .menu-bar__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu-bar__grid > :nth-child(3) {
    grid-column: span 1;
  }

  .menu-evenings__story {
    grid-column: span 7;
  }

  .menu-evenings__aside {
    grid-column: 9 / span 4;
  }

  .menu-paths__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .menu-paths__card:nth-child(3) {
    grid-column: span 1;
  }

  .menu-record {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-4);
  }

  .menu-record strong {
    max-width: 13ch;
    text-align: right;
  }

  .menu-final__content {
    max-width: 40ch;
  }
}

@media (min-width: 80rem) {
  .menu-hero__grid,
  .menu-table__grid,
  .menu-bar__top,
  .menu-evenings__grid {
    gap: var(--space-6);
  }
}

@media (max-width: 63.999rem) {
  .menu-hero__media {
    order: 2;
  }

  .menu-hero__copy {
    order: 1;
  }
}

@media (max-width: 29.999rem) {
  .menu-hero__actions .button,
  .menu-final__content .button,
  .menu-paths__card--primary .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-index__link {
    transition: none;
  }
}