.lunch.menu-showcase {
  --menu-width: 940px;
  --menu-gutter: clamp(14px, 4.2vw, 42px);
  --menu-serif: Georgia, 'Times New Roman', serif;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  background: radial-gradient(ellipse at 100% 22%, #043439 0, transparent 43%),
    radial-gradient(ellipse at 0% 80%, #052d31 0, transparent 48%), #02191c !important;
  color: #f8fcfb;
  font-family: system-ui, sans-serif;
}

.menu-art { position: absolute; inset: 0; pointer-events: none; }
.menu-art::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  right: 0;
  bottom: 0;
  width: min(35vw, 410px);
  aspect-ratio: 337 / 187;
  background: url('./showcase/arc.webp?v=2') left top / contain no-repeat;
  transform: rotate(180deg);
}

body.lunch.menu-showcase > .menu-header,
body.lunch.menu-showcase > .menu-main {
  width: min(calc(100% - 2 * var(--menu-gutter)), var(--menu-width));
  max-width: none;
  margin-inline: auto;
  padding-inline: 0;
}

body.lunch.menu-showcase > .menu-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  position: relative;
  justify-content: stretch;
  justify-items: center;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding-block: clamp(16px, 2vw, 22px) 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.menu-lockup { display: grid; justify-items: center; color: #f0f7f7; text-decoration: none; }
.menu-wordmark {
  width: clamp(156px, 28vw, 282px);
  aspect-ratio: 12 / 5;
  background: url('./showcase/pont-wordmark.webp') center / contain no-repeat;
}
.menu-city {
  display: flex;
  align-items: center;
  gap: clamp(9px, 1.6vw, 17px);
  color: #edf7f7;
  font: 500 clamp(9px, 1.5vw, 15px)/1.2 system-ui, sans-serif;
  letter-spacing: .43em;
  text-indent: .43em;
}
.menu-city::before, .menu-city::after {
  content: '';
  width: clamp(26px, 8.5vw, 82px);
  height: 1px;
  background: linear-gradient(90deg, transparent, #d8eded);
}
.menu-city::after { transform: scaleX(-1); }

.menu-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .62em;
  border: 1px solid #8ce8e3;
  border-radius: 999px;
  color: #f8ffff;
  font-weight: 650;
  text-decoration: none;
}
.menu-back {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: .45em;
  min-height: 44px;
  color: #c6d9d9;
  font-size: clamp(13px, 1.55vw, 15px);
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.menu-back:hover {
  color: #f8ffff;
  text-decoration: underline;
  text-underline-offset: .22em;
}

.menu-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--menu-icon) center / contain no-repeat;
  mask: var(--menu-icon) center / contain no-repeat;
}
.menu-icon--arrow { --menu-icon: url('./showcase/arrow-right.svg'); }
.menu-back .menu-icon--arrow { transform: scaleX(-1); }
.menu-icon--pin { --menu-icon: url('./showcase/location-dot.svg'); }
.menu-icon--utensils { --menu-icon: url('./showcase/utensils.svg'); }

body.lunch.menu-showcase > .menu-main { padding-block: 0; }
.menu-heading {
  margin: 0;
  padding-block: clamp(14px, 2.7vw, 25px) clamp(15px, 2.2vw, 22px);
  text-align: center;
}
.menu-heading h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .34em;
  margin: 0;
  color: #f5f6f6;
  font: 600 clamp(33px, 8.5vw, 83px)/1.05 var(--menu-serif);
  letter-spacing: -.035em;
  text-shadow: 0 2px 1px #0009;
}
.menu-heading .menu-icon--utensils {
  width: .74em;
  height: .91em;
  background: linear-gradient(160deg, #fff2be, #dcae4c);
}
.menu-heading p {
  margin: clamp(7px, 1.25vw, 12px) 0 0;
  color: #ccd9d9;
  font-size: clamp(14px, 3.05vw, 30px);
  line-height: 1.3;
}
.menu-heading::after {
  content: '';
  display: block;
  width: min(54%, 440px);
  height: 2px;
  margin: clamp(12px, 2.4vw, 23px) auto 0;
  background: linear-gradient(90deg, transparent, #28cdd2 44%, #d6ffff 50%, #28cdd2 56%, transparent);
  box-shadow: 0 0 12px #18f5f46b;
}

body.lunch.menu-showcase #customer { margin: 0; }
body.lunch.menu-showcase #customer #list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: clamp(10px, 2.25vw, 23px) !important;
}
.menu-tile:nth-child(-n+2), .menu-empty { grid-column: 1 / -1; }
.menu-tile { display: flex; min-width: 0; }
.menu-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: clamp(126px, 23vw, 233px);
  padding: clamp(11px, 2.8vw, 34px);
  padding-top: clamp(38px, 7vw, 72px);
  border: clamp(1px, .21vw, 2px) solid #6dc1bf;
  border-radius: clamp(16px, 4vw, 40px);
  background: #051b1e;
  color: #f8f9f7;
  text-align: left;
  box-shadow: 0 0 16px #41f7e423, 0 14px 32px #0002;
}
.menu-tile:nth-child(-n+2) .menu-card {
  justify-content: center;
  min-height: clamp(154px, 28.8vw, 294px);
  padding: clamp(15px, 2.65vw, 28px) clamp(15px, 5.4vw, 55px);
  border-color: #a1e1dd;
}
.menu-card-photo, .menu-card::after {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.menu-card-photo { z-index: -2; object-fit: cover; object-position: center 34%; }
.menu-card::after {
  content: '';
  z-index: -1;
  background: linear-gradient(0deg, #041d20 3%, #041d20de 23%, #041d2029 62%, transparent 84%),
    linear-gradient(100deg, #041d2059, transparent 50%);
}
.menu-tile:nth-child(-n+2) .menu-card-photo {
  inset-inline-start: auto;
  width: 69%;
  object-position: right 58%;
}
.menu-tile:nth-child(-n+2) .menu-card::after {
  background: linear-gradient(90deg, #051c20 6%, #051c20 27%, #051c20df 34%, #051c2038 52%, transparent 66%),
    linear-gradient(0deg, #031a1e73 0%, transparent 30%);
}
.menu-card-copy { display: grid; gap: clamp(5px, 1vw, 10px); min-width: 0; }
.menu-tile:nth-child(-n+2) .menu-card-copy { width: 43%; }
.menu-card-name {
  display: block;
  font: 600 clamp(17px, 3.65vw, 36px)/1.04 var(--menu-serif);
  letter-spacing: -.025em;
  overflow-wrap: anywhere;
  text-shadow: 0 2px 10px #000c;
}
.menu-tile:nth-child(-n+2) .menu-card-name {
  font-size: clamp(22px, 5.2vw, 54px);
  max-width: 11ch;
  text-wrap: balance;
}
.menu-card-location {
  display: flex;
  align-items: center;
  gap: .36em;
  font-size: clamp(11px, 2.3vw, 23px);
  font-weight: 450;
  color: #d1e1e1;
  line-height: 1.15;
}
.menu-card-location .menu-icon { width: .84em; }
.menu-card-price {
  position: absolute;
  top: clamp(9px, 1.9vw, 20px);
  right: clamp(8px, 1.9vw, 20px);
  padding: .45em .78em;
  border: 1px solid #fff4c6;
  border-radius: 999px;
  background: linear-gradient(153deg, #fff1c1 4%, #f2ce81 63%, #eab756);
  color: #101614;
  font: 800 clamp(11px, 2.25vw, 22px)/1.12 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  box-shadow: 0 4px 12px #0005;
}
.menu-tile:nth-child(-n+2) .menu-card-price { font-size: clamp(13px, 2.6vw, 26px); }
.menu-card-action {
  display: none;
  justify-self: start;
  padding: .58em .9em;
  background: linear-gradient(160deg, #084345, #05292d 65%, #0a5557);
  box-shadow: inset 0 0 11px #2ce9d870;
  font-size: clamp(11px, 2.45vw, 25px);
  line-height: 1.12;
  white-space: nowrap;
}
.menu-tile:nth-child(-n+2) .menu-card-action { display: inline-flex; margin-top: .35em; }
.menu-card-action .menu-icon { width: .9em; }
.menu-card:hover { border-color: #e4fffb; box-shadow: 0 0 21px #42eedb55; }
.menu-card:active .menu-card-action { background-color: #0f686b; }
.menu-card:focus-visible, .menu-back:focus-visible, .menu-lockup:focus-visible {
  outline: 2px solid #f7d994;
  outline-offset: 3px;
}
.menu-empty {
  margin: 0;
  padding: clamp(28px, 7vw, 64px) 16px;
  border: 1px solid #69bdba65;
  border-radius: clamp(16px, 4vw, 36px);
  background: #072528a8;
  color: #d1e5e4;
  text-align: center;
}
.menu-photo-note { margin: 12px 0 0; color: #a9c3c3; font-size: .75rem; text-align: center; }
.menu-preview-label {
  width: fit-content;
  margin: 0 auto 12px;
  padding: 5px 12px;
  border: 1px solid #d3b77380;
  border-radius: 999px;
  color: #f5d897;
  font-size: .75rem;
  text-align: center;
}

@media (max-width: 700px) {
  body.lunch.menu-showcase > .menu-header { padding-top: 13px; }
  .menu-wordmark { width: clamp(130px, 40vw, 225px); }
  .menu-tile:nth-child(-n+2) .menu-card-copy { width: 49%; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .menu-back { transition: color .22s; }
  .menu-card { transition: border-color .22s, background-color .22s, box-shadow .22s; }
  .menu-card-photo { transition: transform .5s cubic-bezier(.2,.75,.35,1); }
  .menu-card:hover .menu-card-photo { transform: scale(1.035); }
}