/* MENU page — layout only; components come from style.css */

/* ---------- hero ---------- */
.menu-hero { padding-block: clamp(30px, 6.1vw, 88px) clamp(48px, 7.5vw, 108px); }
.menu-hero__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.menu-hero__title { margin-top: 20px; }
.menu-hero__lead { margin-top: 28px; }
.menu-hero__art { --badge: clamp(76px, 11.7vw, 168px); display: flex; flex-direction: column; align-items: flex-start; flex: none; }
.menu-hero__art .mascot-badge { width: var(--badge); align-self: flex-end; margin: -6px calc(var(--badge) * 0.13) 0 0; }
/* the hero bubble is drawn larger than the shared default */
.menu-hero__art .bubble { margin: 8px calc(var(--badge) - 9px) 0 0; padding: 25px 28px 19px; gap: 9px; }
.menu-hero__art .bubble__en { font-size: clamp(22px, 2.5vw, 36px); }

/* ---------- twister labels on MENU: white, so the yellow DEALS band stands out ----------
   each twister keeps its colour as a hand-drawn marker under its English name */
.twister-grid .label-card { --bg: var(--white); --fg: var(--ink); }
.twister-grid .label-card__body { border: var(--border); }
.twister-grid > li { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23FFE500' d='M2 6C30 3 70 5 110 3S175 1 198 4L197 16C170 18 130 16 95 18S30 19 4 17C1 13 1 9 2 6Z'/%3E%3C/svg%3E"); }
.twister-grid > li:has(.label-card--teriyaki) { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23D28CFF' d='M2 6C30 3 70 5 110 3S175 1 198 4L197 16C170 18 130 16 95 18S30 19 4 17C1 13 1 9 2 6Z'/%3E%3C/svg%3E"); }
.twister-grid > li:has(.label-card--hot) { --marker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='%23FF5BB0' d='M2 6C30 3 70 5 110 3S175 1 198 4L197 16C170 18 130 16 95 18S30 19 4 17C1 13 1 9 2 6Z'/%3E%3C/svg%3E"); }
.marker { padding-inline: 0.12em; margin-inline: -0.12em; background: var(--marker) left 0 bottom 0.2em / 100% 0.48em no-repeat; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.twister__name > .marker { justify-self: start; }

/* ---------- burgers ---------- */
.menu-burgers { padding-block: clamp(48px, 6.67vw, 96px) clamp(64px, 6.67vw, 96px); }
.menu-item {
  --row-y: clamp(32px, 3.9vw, 56px);
  display: grid; grid-template-columns: minmax(0, 440fr) minmax(0, 784fr); align-items: center; gap: 16px clamp(32px, 5vw, 72px);
  padding-block: var(--row-y); border-bottom: 1px solid var(--ink);
}
.menu-item:last-child { border-bottom: 0; }
.menu-item:nth-child(even) { grid-template-columns: minmax(0, 784fr) minmax(0, 440fr); }
.menu-item:nth-child(even) .label-card { order: 2; }
.menu-item__no { display: flex; align-items: center; gap: 12px; font-family: var(--font-label); font-weight: 800; font-size: clamp(12px, 0.97vw, 14px); line-height: 1.2; letter-spacing: 0.12em; }
.menu-item__name { margin-top: 20px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.06vw, 44px); line-height: 1.05; text-wrap: balance; }
.menu-item__row { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.menu-item__jp { font-weight: 700; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.4; }
.menu-item__price { font-size: clamp(32px, 3.33vw, 48px); white-space: nowrap; }
.menu-item__desc { margin-top: 31px; word-break: auto-phrase; }
.menu-item__chips { margin-top: 18px; --cluster: 8px; }

/* desktop Figma: bigger tags and pills, full-ink Japanese in pills (mobile keeps the shared 0.7) */
@media (min-width: 768px) {
  .menu-item__no .tag { font-size: 12px; padding: 8px 14px; }
  .menu-item__chips .pill { padding-block: 8.5px; }
  .menu-item__chips .pill__jp { opacity: 1; }
  .menu-hero__art .bubble__jp { letter-spacing: 0.07em; }
}

/* ---------- section heads (twisters, sides) ---------- */
.menu-sec-head { margin-bottom: clamp(28px, 3.33vw, 48px); }

/* ---------- twisters ---------- */
.twister-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(24px, 2.2vw, 32px); }
.twister__meta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 12px; margin-top: 20px; }
.twister__name { display: grid; gap: 6px; font-family: var(--font-label); font-weight: 800; font-size: clamp(15px, 1.25vw, 18px); line-height: 1.2; letter-spacing: 0.08em; }
.twister__jp { font-family: var(--font-jp); font-weight: 700; font-size: 14px; letter-spacing: 0.02em; opacity: 0.72; }
.twister__price { font-size: clamp(28px, 2.5vw, 36px); white-space: nowrap; }

/* ---------- deals ---------- */
.deal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 2.1vw, 30px); }
.deal { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; justify-items: start; align-content: start; padding: clamp(28px, 2.8vw, 40px); } /* both cards share 4 rows, so the dividers line up */
.deal__what { margin-top: 20px; }
.deal__formula { font-family: var(--font-label); font-weight: 800; font-size: clamp(18px, 1.55vw, 22px); line-height: 1.3; letter-spacing: 0.12em; }
.deal__formula .nobr { white-space: nowrap; }
.deal__jp { margin-top: 6px; font-weight: 700; font-size: 16px; line-height: 1.6; word-break: keep-all; } /* breaks only at the <wbr> */
.deal__price { margin: 16px 0 24px; font-size: clamp(64px, 7.2vw, 104px); color: var(--red); }
.deal__unit { margin-left: 0.2em; font-family: var(--font-label); font-weight: 800; font-size: 0.24em; letter-spacing: 0.1em; }
.deal__off { display: inline-block; margin-left: 0.16em; padding: 0.12em 0.28em 0.1em; border-radius: 0.18em; background: var(--ink); color: var(--pec-bg); font-family: var(--font-label); font-weight: 800; font-size: 0.38em; letter-spacing: 0.08em; vertical-align: 0.42em; rotate: -6deg; box-shadow: 0.08em 0.08em 0 var(--red); }
.deal__notes { justify-self: stretch; align-content: start; padding-top: 18px; border-top: 2px solid rgba(27, 15, 12, 0.5); display: grid; gap: 6px; font-size: 15px; line-height: 1.7; word-break: auto-phrase; }

/* ---------- sides & drinks ---------- */
.side-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr); gap: clamp(24px, 2.1vw, 30px); }
.side-card { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px 32px 36px; }
.side-card > :not(.side-card__art) { position: relative; }
/* watermark line drawing in the bottom-right corner, cut off by the card edge */
.side-card__art { position: absolute; right: -4%; bottom: -14%; height: 74%; width: auto; max-width: 56%; stroke: #DCD6CC; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.side-card__name { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.8vw, 40px); line-height: 1.05; }
.side-card__jp { margin: 12px 0 11px; font-size: 16px; line-height: 1.6; }
.side-card__price { margin-top: auto; padding-top: 18px; border-top: 2px solid rgba(27, 15, 12, 0.5); font-size: clamp(28px, 2.8vw, 40px); }
.drinks { padding: 32px 32px 20px; }
.drinks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid rgba(27, 15, 12, 0.5); }
.drinks__price { font-size: clamp(28px, 2.8vw, 40px); white-space: nowrap; }
.drinks__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.drinks__list li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 12px 0; border-bottom: 1px solid rgba(27, 15, 12, 0.2); font-family: var(--font-label); font-weight: 800; font-size: 15px; line-height: 1.3; letter-spacing: 0.08em; }
.drinks__list li:nth-last-child(-n + 2) { border-bottom: 0; }
.drinks__jp { font-family: var(--font-jp); font-weight: 700; font-size: 13px; letter-spacing: 0.02em; opacity: 0.72; }

/* ---------- notes ---------- */
.menu-notes { padding-block: clamp(48px, 5vw, 72px); }
.notes-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 32px; }
.note-card { border: 2px solid var(--ink); border-radius: 20px; padding: 25px 28px 22px; }
.note-card__title { font-family: var(--font-label); font-weight: 800; font-size: 13px; line-height: 1.2; letter-spacing: 0.14em; }
.note-card p { margin-top: 11px; font-size: 15px; line-height: 2; letter-spacing: 0.08em; word-break: auto-phrase; }
.note-card p [lang="en"] { letter-spacing: inherit; }
.note-card a { white-space: nowrap; text-underline-offset: 3px; }
.note-card a:hover { text-decoration-thickness: 2px; }

/* ---------- tablet ---------- */
@media (max-width: 1099px) {
  .side-card { padding: 24px 20px 28px; }
  .side-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drinks { grid-column: 1 / -1; }
  .twister__meta { flex-direction: column; align-items: flex-start; }
  .notes-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .menu-hero__inner { flex-direction: column; gap: 17px; }
  .menu-hero__title { margin-top: 17px; }
  .menu-hero__lead { margin-top: 19px; font-weight: 500; line-height: 1.85; }
  .menu-hero__art { flex-direction: row; align-items: center; gap: 8px; }
  .menu-hero__art .mascot-badge { order: -1; margin: 0; }
  .menu-hero__art .bubble { margin: 0; padding: 16px 20px 10px; gap: 5px; }
  .menu-hero__art .bubble__en { font-size: 24px; }
  .menu-hero__art .bubble__jp { font-size: 12px; }

  /* the mobile design drops the eyebrow and the English name (the label card shows it); keep both for screen readers */
  .menu-burgers__title, .menu-item__name { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* phones: small label on the left, number / name / price beside it, description and chips full width */
  .menu-item, .menu-item:nth-child(even) { grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); gap: 0 18px; }
  .menu-item__body { display: contents; }
  .menu-item .label-card { grid-column: 1; grid-row: 1 / span 2; }
  .menu-item__no { grid-column: 2; grid-row: 1; align-self: end; }
  .label-card--shadow .label-card__body { box-shadow: var(--shadow); }
  .menu-item__no .tag { padding: 6px 10px 7px; }
  .menu-item__row { grid-column: 2; grid-row: 2; align-self: start; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; }
  .menu-item__jp { font-size: 15px; }
  .menu-item__desc { grid-column: 1 / -1; margin-top: 20px; }
  .menu-item__chips { grid-column: 1 / -1; margin-top: 14px; }
  .menu-item__chips .pill { gap: 6px; padding: 7.5px 12px; font-size: 11px; }

  .twister-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .twister-grid > li { display: grid; grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: center; column-gap: 18px; }
  .twister__meta { margin-top: 0; gap: 10px; }
  .deal-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .deal { padding: 24px 20px; }
  .deal__what { margin-top: 16px; }
  .deal__formula { font-size: 16px; }
  .deal__notes { font-size: 14px; }

  .side-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .drinks { padding: 22px 20px 10px; }
  .drinks__list { grid-template-columns: minmax(0, 1fr); }
  .drinks__list li:nth-last-child(2) { border-bottom: 1px solid rgba(27, 15, 12, 0.2); }
  .side-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 16px; padding: 22px 20px; }
  .side-card__art { right: 1%; bottom: -44%; height: auto; width: 28%; }
  .side-card__name { font-size: 26px; align-self: end; }
  .side-card__jp { margin: 2px 0 0; font-size: 13px; align-self: start; opacity: 0.72; }
  .side-card__price { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 0; border: 0; font-size: 28px; }

  .note-card { padding: 24px 20px 22px; }
  .note-card p { margin-top: 10px; font-size: 13px; line-height: 1.7; letter-spacing: 0.02em; }
}

/* ---------- very small phones ---------- */
@media (max-width: 359px) {
  .menu-item__jp { font-size: 13px; }
}