.restaurant-page {
  background: var(--color-warm-ivory);
}

.restaurant-page .eyebrow {
  margin-block-end: var(--space-3);
}

.restaurant-hero {
  padding-block: var(--space-10) var(--space-14);
}

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

.restaurant-hero__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-4);
  max-width: 34rem;
}

.restaurant-hero__copy > * {
  min-width: 0;
  margin: 0;
}

.restaurant-hero__copy h1 {
  font-size: clamp(2.25rem, 9vw, 4rem);
  line-height: 1;
}

.restaurant-hero__deck {
  max-width: 31rem;
}

.restaurant-hero__ten {
  position: absolute;
  z-index: 0;
  inset-inline-start: -0.25rem;
  inset-block-start: 1.5rem;
  color: color-mix(in srgb, var(--color-eucalyptus) 10%, transparent);
  font-family: var(--font-serif);
  font-size: clamp(6rem, 21vw, 11.25rem);
  font-weight: var(--weight-semibold);
  line-height: 0.8;
  pointer-events: none;
}

.restaurant-hero__copy > :not(.restaurant-hero__ten) {
  position: relative;
  z-index: 1;
}

.restaurant-hero__markers {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-strong-width) solid var(--color-eucalyptus);
}

.restaurant-hero__markers p {
  margin: 0;
  font-size: var(--text-14);
  line-height: 1.43;
}

.restaurant-hero__action {
  font-weight: var(--weight-bold);
}

.restaurant-hero__media {
  width: 100%;
  min-width: 0;
  min-height: 20rem;
}

.restaurant-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 20rem;
  object-fit: cover;
  object-position: 65% center;
}

.restaurant-menu__layout {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-8);
}

.restaurant-menu__intro {
  width: 100%;
  max-width: 42rem;
}

.restaurant-menu__cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  width: 100%;
  min-width: 0;
}

.restaurant-menu-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-line-sand);
  border-block-start: var(--border-strong-width) solid var(--color-line-sand);
  background: var(--color-sandstone);
  transition: border-color var(--transition-fast);
}

.restaurant-menu-card:hover,
.restaurant-menu-card:focus-within {
  border-block-start-color: var(--color-eucalyptus);
}

.restaurant-menu-card > * {
  min-width: 0;
  margin: 0;
}

.restaurant-menu-card--ivory {
  background: var(--color-warm-ivory);
  border-block-end: var(--border-strong-width) solid var(--color-burnt-apricot);
}

.restaurant-menu-card__number,
.restaurant-drinks__number,
.restaurant-gathering__number,
.restaurant-moment-card__rank {
  color: var(--color-muted-cobalt);
  font-size: var(--text-12);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
}

.restaurant-menu-card h3 {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  letter-spacing: 0;
}

.restaurant-menu-card p:last-child {
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-line-sand);
}

.restaurant-menu__detail {
  display: none;
  width: 100%;
  min-width: 0;
}

.restaurant-menu__detail img {
  width: 100%;
  height: 100%;
  min-height: 22rem;
  object-fit: cover;
  object-position: center;
}

.restaurant-drinks {
  background: var(--color-sandstone);
}

.restaurant-drinks__layout {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-8);
}

.restaurant-drinks__intro {
  width: 100%;
  max-width: 40rem;
  padding-block-end: var(--space-4);
  border-block-end: var(--border-strong-width) solid var(--color-bright-timber);
}

.restaurant-drinks__categories {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
}

.restaurant-drinks__category {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
  padding-block: var(--space-6);
  border-block-start: var(--border-strong-width) solid var(--color-eucalyptus);
}

.restaurant-drinks__category > * {
  min-width: 0;
  margin: 0;
}

.restaurant-drinks__category h3 {
  font-family: var(--font-sans);
  font-size: var(--text-18);
  letter-spacing: 0;
}

.restaurant-drinks__number--cobalt {
  color: var(--color-muted-cobalt);
}

.restaurant-bridge__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}

.restaurant-bridge__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: var(--space-4);
  max-width: 40rem;
}

.restaurant-bridge__copy > * {
  min-width: 0;
  margin: 0;
}

.restaurant-bridge__media {
  width: 100%;
  min-width: 0;
}

.restaurant-bridge__media img {
  width: 100%;
  min-height: 20rem;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
}

.restaurant-bridge__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  margin-block-start: var(--space-6);
  border: var(--border-width) solid var(--color-line-sand);
}

.restaurant-bridge__fact {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-6);
  border-block-start: var(--border-width) solid var(--color-line-sand);
}

.restaurant-bridge__fact:first-child {
  border-block-start: 0;
}

.restaurant-bridge__fact > * {
  min-width: 0;
  margin: 0;
}

.restaurant-bridge__fact-label {
  color: var(--color-eucalyptus);
  font-size: var(--text-12);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.restaurant-bridge__fact ol {
  padding-inline-start: 1.25rem;
}

.restaurant-best__intro {
  position: relative;
  width: 100%;
  max-width: 46rem;
}

.restaurant-best__intro > :not(.restaurant-best__ten) {
  position: relative;
  z-index: 1;
}

.restaurant-best__ten {
  position: absolute;
  z-index: 0;
  inset-inline-start: 12rem;
  inset-block-start: -1rem;
  color: color-mix(in srgb, var(--color-muted-cobalt) 10%, transparent);
  font-family: var(--font-serif);
  font-size: var(--text-96);
  font-weight: var(--weight-semibold);
  line-height: 0.85;
  pointer-events: none;
}

.restaurant-best__chapter {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  gap: var(--space-6);
  margin-block-start: var(--space-10);
}

.restaurant-best__chapter h3 {
  margin: 0;
  padding-block-end: var(--space-3);
  border-block-end: var(--border-strong-width) solid var(--color-eucalyptus);
}

.restaurant-best__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  padding-block-start: var(--space-4);
  border-block-start: var(--border-width) solid var(--color-line-sand);
}

.restaurant-best__entry--inset {
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-line-sand);
  background: color-mix(in srgb, var(--color-sandstone) 45%, var(--color-warm-ivory));
}

.restaurant-best__rank {
  margin: 0;
  color: var(--color-muted-cobalt);
  font-size: var(--text-14);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
}

.restaurant-best__entry > div {
  min-width: 0;
  max-width: 42rem;
}

.restaurant-best__entry h4 {
  margin-block-end: var(--space-2);
}

.restaurant-best__entry:hover,
.restaurant-best__entry:focus-within {
  border-inline-start: var(--border-strong-width) solid var(--color-burnt-apricot);
}

.restaurant-gathering {
  background: var(--color-eucalyptus);
  color: var(--color-soft-white);
}

.restaurant-gathering .eyebrow,
.restaurant-gathering :is(h2, h3) {
  color: var(--color-soft-white);
}

.restaurant-gathering__layout {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-8);
}

.restaurant-gathering__intro {
  width: 100%;
  max-width: 43.75rem;
  margin-inline: auto;
  text-align: center;
}

.restaurant-gathering__routes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-6);
}

.restaurant-gathering__route {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100%;
  gap: var(--space-4);
  padding: var(--space-6);
  border: var(--border-width) solid var(--color-line-sand);
  border-block-start: var(--border-strong-width) solid var(--color-burnt-apricot);
}

.restaurant-gathering__route > * {
  min-width: 0;
  margin: 0;
}

.restaurant-gathering__number {
  color: var(--color-burnt-apricot);
}

.restaurant-gathering a {
  color: var(--color-soft-white);
}

.restaurant-gathering a:hover {
  color: var(--color-burnt-apricot);
}

.restaurant-moments__intro {
  width: 100%;
  max-width: 39rem;
}

.restaurant-moments__scroller {
  display: flex;
  width: 100%;
  min-width: 0;
  gap: var(--space-4);
  margin-block-start: var(--space-8);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-color: var(--color-line-sand) transparent;
}

.restaurant-moment-card {
  display: flex;
  flex: 0 0 min(82vw, 22rem);
  flex-direction: column;
  min-width: 17.5rem;
  scroll-snap-align: start;
  border: var(--border-width) solid var(--color-line-sand);
  background: var(--color-warm-ivory);
}

.restaurant-moment-card figure {
  width: 100%;
  overflow: hidden;
}

.restaurant-moment-card img {
  width: 100%;
  height: 22rem;
  object-fit: cover;
  object-position: center;
  transition: transform var(--transition-fast);
}

.restaurant-moment-card:hover img,
.restaurant-moment-card:focus-within img {
  transform: translateY(-2px);
}

.restaurant-moment-card__copy {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: var(--space-3);
  padding: var(--space-6);
}

.restaurant-moment-card__copy > * {
  min-width: 0;
  margin: 0;
}

.restaurant-moment-card__copy h3 {
  font-size: var(--text-24);
}

.restaurant-moment-card:hover .restaurant-moment-card__rank,
.restaurant-moment-card:focus-within .restaurant-moment-card__rank {
  color: var(--color-burnt-apricot);
}

.restaurant-next {
  padding-block-start: var(--space-10);
  border-block-start: var(--border-width) solid var(--color-line-sand);
}

.restaurant-next__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  gap: var(--space-8);
}

.restaurant-next__copy {
  width: 100%;
  max-width: 45rem;
  margin-inline: auto;
  text-align: center;
}

.restaurant-next__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-3);
}

.restaurant-next__actions .button {
  width: 100%;
  min-width: 0;
  min-height: 2.75rem;
  justify-content: flex-start;
}

.restaurant-reminder {
  padding-block-start: 0;
}

.restaurant-reminder__strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  gap: var(--space-2);
  padding: var(--space-6);
  background: var(--color-sandstone);
}

.restaurant-reminder__strip > * {
  min-width: 0;
  margin: 0;
}

.restaurant-reminder__label {
  color: var(--color-eucalyptus);
  font-size: var(--text-12);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.restaurant-reminder__text {
  font-size: var(--text-14);
  line-height: 1.43;
}

.restaurant-reminder__link {
  align-self: start;
  font-weight: var(--weight-bold);
}

@media (min-width: 45.0625rem) {
  .restaurant-hero {
    padding-block: var(--space-14) var(--space-20);
  }

  .restaurant-hero__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: var(--space-8);
  }

  .restaurant-hero__copy {
    align-self: center;
  }

  .restaurant-hero__copy h1 {
    font-size: var(--text-44);
  }

  .restaurant-hero__media,
  .restaurant-hero__media img {
    min-height: 30rem;
  }

  .restaurant-menu__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .restaurant-menu__detail {
    display: block;
    grid-column: 1 / -1;
  }

  .restaurant-drinks__categories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
  }

  .restaurant-drinks__category {
    padding-inline: var(--space-4);
  }

  .restaurant-drinks__category:nth-child(3) {
    grid-column: 1 / -1;
  }

  .restaurant-bridge__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: var(--space-8);
  }

  .restaurant-bridge__media,
  .restaurant-bridge__media img {
    min-height: 25rem;
  }

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

  .restaurant-bridge__fact {
    border-block-start: 0;
    border-inline-start: var(--border-width) solid var(--color-line-sand);
  }

  .restaurant-bridge__fact:first-child {
    border-inline-start: 0;
  }

  .restaurant-bridge__fact:nth-child(3) {
    grid-column: 1 / -1;
    border-block-start: var(--border-width) solid var(--color-line-sand);
    border-inline-start: 0;
  }

  .restaurant-best__entry {
    grid-template-columns: 4rem minmax(0, 1fr);
    gap: var(--space-4);
  }

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

  .restaurant-moments__scroller {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  .restaurant-moment-card {
    flex: none;
    min-width: 0;
  }

  .restaurant-moment-card:first-child {
    grid-column: 1 / -1;
  }

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

  .restaurant-reminder__strip {
    grid-template-columns: minmax(10rem, 2fr) minmax(0, 7fr) minmax(10rem, 3fr);
    align-items: center;
    gap: var(--space-4);
  }

  .restaurant-reminder__link {
    justify-self: end;
  }
}

@media (min-width: 61.3125rem) {
  .restaurant-hero__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
    min-height: 38.75rem;
  }

  .restaurant-hero__copy {
    grid-column: 1 / span 5;
    max-width: 31.875rem;
  }

  .restaurant-hero__media {
    grid-column: 7 / span 6;
  }

  .restaurant-hero__copy h1 {
    font-size: var(--text-64);
  }

  .restaurant-menu__layout {
    gap: var(--space-10);
  }

  .restaurant-menu__intro {
    width: 41.6667%;
    max-width: 38rem;
  }

  .restaurant-menu__cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .restaurant-menu__detail {
    display: none;
  }

  .restaurant-drinks__categories {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0;
  }

  .restaurant-drinks__category {
    padding: 0 var(--space-6);
    border-block-start: 0;
    border-inline-start: var(--border-width) solid var(--color-line-sand);
  }

  .restaurant-drinks__category:first-child {
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .restaurant-drinks__category:nth-child(3) {
    grid-column: auto;
  }

  .restaurant-bridge__top {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.25rem;
  }

  .restaurant-bridge__copy {
    grid-column: 1 / span 5;
    max-width: 38rem;
  }

  .restaurant-bridge__media {
    grid-column: 7 / span 6;
    align-self: end;
  }

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

  .restaurant-bridge__fact:nth-child(3) {
    grid-column: auto;
    border-block-start: 0;
    border-inline-start: var(--border-width) solid var(--color-line-sand);
  }

  .restaurant-best__intro {
    max-width: 43rem;
  }

  .restaurant-best__chapter {
    margin-block-start: var(--space-20);
  }

  .restaurant-best__entry {
    grid-template-columns: minmax(0, 2fr) minmax(0, 6fr) minmax(0, 4fr);
    gap: 0;
  }

  .restaurant-best__rank {
    grid-column: 1;
  }

  .restaurant-best__entry > div {
    grid-column: 2;
  }

  .restaurant-best__entry--inset {
    padding: var(--space-6) 0;
    border-inline: 0;
    background: transparent;
  }

  .restaurant-gathering__intro {
    grid-column: 3 / span 8;
  }

  .restaurant-moments__scroller {
    grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr);
    gap: 1.25rem;
  }

  .restaurant-moment-card:first-child {
    grid-column: auto;
  }

  .restaurant-moment-card:first-child img {
    height: 25rem;
  }

  .restaurant-moment-card:nth-child(2) img {
    height: 29rem;
  }

  .restaurant-moment-card:nth-child(3) img {
    height: 20rem;
  }

  .restaurant-next__actions {
    grid-template-columns: repeat(4, minmax(11.875rem, 1fr));
  }

  .restaurant-next__actions .button {
    justify-content: center;
  }
}

@media (max-width: 45rem) {
  .restaurant-hero__media img {
    aspect-ratio: 4 / 5;
  }

  .restaurant-bridge__media img {
    aspect-ratio: 4 / 5;
  }
}