/* ============================================================
   MR. CHEN — subpage styles (catering.html · locations.html)
   Loads AFTER css/fonts.css + css/main.css and reuses their
   tokens & components (btn, chip, section-head, script,
   link-arrow, dish__badge, marquee, footer, grain, cursor).
   ============================================================ */

/* ---------- current-page nav link: subtle orange underline ---------- */
/* ---------- shared page hero (designed static — no 3D) ---------- */
.p-hero {
  position: relative; overflow: clip;
  padding: calc(var(--nav-h) + clamp(2.75rem, 7vw, 5rem)) clamp(1rem, 4vw, 3rem) clamp(3.5rem, 8vw, 6rem);
  color: var(--cream);
}
.p-hero--orange { background: var(--orange); }
.p-hero--orange::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 55% at 44% 42%, rgba(244, 126, 66, .85) 0%, rgba(244, 126, 66, 0) 70%);
}
.p-hero--green { background: var(--green); }
.p-hero--green::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 52% at 50% 42%, rgba(14, 101, 52, .9) 0%, rgba(14, 101, 52, 0) 72%);
}
/* cream zigzag out of the hero (used when cream content follows directly) */
.p-hero--zag { padding-bottom: calc(clamp(3.5rem, 8vw, 6rem) + 24px); }
.p-hero--zag::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 24px; z-index: 3;
  background: var(--zigzag-up-cream) repeat-x; background-size: 48px 24px;
  pointer-events: none;
}
.p-hero__pattern {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background: url("../assets/pattern/PATTERN.svg") 0 0 / 640px repeat;
  filter: saturate(0) brightness(2.5);
  -webkit-mask-image: linear-gradient(180deg, transparent 90px, #000 230px);
  mask-image: linear-gradient(180deg, transparent 90px, #000 230px);
}

/* oversized brand-icon masks bleeding off the hero edges (template echo) */
.p-hero__icon { position: absolute; pointer-events: none; z-index: 0; }
.p-hero__icon--wok {
  width: min(58vw, 560px); height: min(58vw, 560px);
  left: -9%; bottom: -20%;
  background: var(--yellow); opacity: .14; transform: rotate(-14deg);
  -webkit-mask: url("../assets/icons/svg/wok.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/wok.svg") center / contain no-repeat;
}
.p-hero__icon--knot {
  width: min(46vw, 460px); height: min(46vw, 460px);
  right: -7%; top: -3%;
  background: var(--yellow); opacity: .11; transform: rotate(12deg);
  -webkit-mask: url("../assets/icons/svg/endless-knot.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/endless-knot.svg") center / contain no-repeat;
}
.p-hero__icon--coin {
  width: min(38vw, 330px); height: min(38vw, 330px);
  left: -6%; bottom: -14%;
  background: var(--yellow); opacity: .11; transform: rotate(-10deg);
  -webkit-mask: url("../assets/icons/svg/coin-charm.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/coin-charm.svg") center / contain no-repeat;
}

.p-hero__inner {
  position: relative; z-index: 2;
  max-width: 1200px; margin: 0 auto;
  display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.p-hero--split .p-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(260px, .95fr); }
.p-hero__copy { display: grid; gap: clamp(.9rem, 2vw, 1.3rem); justify-items: start; text-align: left; min-width: 0; }
.p-hero--center .p-hero__copy { justify-items: center; text-align: center; max-width: 820px; margin-inline: auto; }

.p-hero__kicker { font-size: clamp(1.5rem, 2.6vw, 2.1rem); transform: rotate(-3deg); }
.p-hero--orange .p-hero__kicker { color: var(--cream); }
.p-hero--green .p-hero__kicker { color: var(--yellow); }

.p-hero__title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.2rem, 9.5vw, 7.75rem);
  line-height: .92; text-transform: uppercase; letter-spacing: .01em;
}
.p-hero__line { display: block; overflow: hidden; }
.p-hero__word {
  display: inline-block; transform: translateY(110%);
  text-shadow: 0.045em 0.045em 0 var(--chrome);
  animation: p-word-up .9s var(--ease-out) forwards;
}
.p-hero__line:nth-child(2) .p-hero__word { animation-delay: .08s; }
.p-hero__line:nth-child(3) .p-hero__word { animation-delay: .16s; }
@keyframes p-word-up { to { transform: translateY(0); } }
.p-hero__word--cream { color: var(--cream); }
.p-hero__word--yellow { color: var(--yellow); }
.p-hero__word--green { color: var(--green); }

.p-hero__sub { max-width: 48ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.55; }
.p-hero--orange .p-hero__sub { color: var(--ink); font-weight: 500; }
.p-hero--green .p-hero__sub { color: rgba(253, 246, 227, .92); }
.p-hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .3rem; }
.p-hero--center .p-hero__actions { justify-content: center; }

/* hero photo chip — big rounded chrome-bordered image with a script caption pill */
.p-hero__visual { position: relative; z-index: 2; margin: 0; min-width: 0; }
.p-hero__photo {
  border: 4px solid var(--chrome); border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 0 var(--chrome);
  transform: rotate(3deg);
}
.p-hero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.p-hero__photo-caption {
  position: absolute; left: -1rem; bottom: -1rem; z-index: 2;
  background: var(--yellow); color: var(--green);
  font-family: var(--font-script); font-size: 1.25rem; line-height: 1;
  padding: .45rem 1rem .55rem;
  border: 3px solid var(--chrome); border-radius: 999px;
  box-shadow: 0 4px 0 var(--chrome);
  transform: rotate(-4deg); white-space: nowrap;
}
@media (max-width: 900px) {
  .p-hero--split .p-hero__inner { grid-template-columns: 1fr; }
  .p-hero--split .p-hero__copy { justify-items: center; text-align: center; margin-inline: auto; }
  .p-hero__visual { max-width: 440px; margin: 0 auto; }
}
/* poster-scale headline on small screens — Anton must out-weigh the body copy */
@media (max-width: 600px) {
  .p-hero__title { font-size: clamp(4rem, 14vw, 5rem); }
}

/* motion escape hatches — mirror index hero behavior */
html.revealed-all .p-hero__word,
html.capture .p-hero__word { animation: none !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .p-hero__word { transform: none; animation: none; }
}

/* ---------- dotted-leader rows (package lists, hours, coming-soon) ---------- */
.lead-row { display: flex; align-items: baseline; gap: .7rem; }
.lead-row > :first-child {
  order: 1;
  font-family: var(--font-label); font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; font-size: .9rem;
}
.lead-row::before {
  content: ""; order: 2; flex: 1 1 1.5rem; min-width: 1.5rem;
  border-bottom: 3px dotted currentColor; opacity: .4;
  transform: translateY(-3px);
}
.lead-row > :last-child {
  order: 3; text-align: right;
  font-family: var(--font-label); font-weight: 500;
  font-variant-numeric: tabular-nums; font-size: .9rem;
}

/* ============================================================
   CATERING
   ============================================================ */

/* ---------- package cards ---------- */
.packs-wrap { padding: clamp(4rem, 9vw, 6.5rem) clamp(1rem, 4vw, 3rem); max-width: 1400px; margin: 0 auto; }
.packs {
  list-style: none;
  display: grid; gap: clamp(1.4rem, 2.5vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  margin-top: clamp(2.4rem, 5vw, 3.4rem);
  align-items: stretch;
}
.packs > li { min-width: 0; }
.pack {
  background: var(--white);
  border: 3px solid var(--chrome); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--chrome);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .25s var(--ease-spring), box-shadow .25s var(--ease-spring);
}
.pack:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 10px 0 var(--chrome); }
.pack__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-bottom: 3px solid var(--chrome);
}
.pack__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s var(--ease-spring); }
.pack:hover .pack__media img { transform: scale(1.05); }
.pack__media--orange { background: var(--orange); }
.pack__media--green { background: var(--green); }
.pack__media--yellow { background: var(--yellow); }
.pack__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  mix-blend-mode: multiply; opacity: .14; pointer-events: none;
}
.pack__media--orange::after { background: var(--orange); }
.pack__media--green::after { background: var(--green); }
.pack__media--yellow::after { background: var(--yellow); }
.pack__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; gap: .7rem; flex: 1; min-width: 0; }
.pack__name { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; text-transform: uppercase; color: var(--green); line-height: 1.05; }
.pack__price { display: flex; align-items: baseline; gap: .7rem; flex-wrap: wrap; }
.pack__price strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; color: var(--orange-deep); }
.pack__price span {
  font-family: var(--font-label); font-weight: 600; font-size: .88rem;
  text-transform: uppercase; letter-spacing: .05em; color: rgba(12, 11, 8, .6);
}
.pack__desc { font-size: .95rem; line-height: 1.55; color: rgba(12, 11, 8, .75); }
.pack__list { list-style: none; display: grid; gap: .55rem; margin: .3rem 0 1.1rem; color: var(--ink); }
.pack__list .lead-row > :last-child { color: rgba(12, 11, 8, .7); }
.pack .btn { margin-top: auto; align-self: start; }
/* "Most booked" card — yellow field behind the title block sets it apart */
.pack--featured { box-shadow: 0 8px 0 var(--chrome); }
.pack--featured .pack__head {
  background: var(--yellow);
  margin: -1.4rem -1.5rem .2rem;
  padding: 1.15rem 1.5rem 1rem;
  border-bottom: 3px solid var(--chrome);
  display: grid; gap: .45rem;
}
.packs-note { text-align: center; margin-top: 1.6rem; color: rgba(12, 11, 8, .65); }

/* ---------- how it works strip ---------- */
.steps {
  position: relative; overflow: clip;
  background: var(--green); color: var(--cream);
  padding: calc(clamp(4rem, 8vw, 6rem) + 24px) clamp(1rem, 4vw, 3rem);
}
.steps::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 24px; z-index: 3;
  background: var(--zigzag-down-cream) repeat-x; background-size: 48px 24px;
  pointer-events: none;
}
.steps::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 24px; z-index: 3;
  background: var(--zigzag-up-cream) repeat-x; background-size: 48px 24px;
  pointer-events: none;
}
.steps__pattern {
  position: absolute; inset: 0; opacity: .05; pointer-events: none;
  background: url("../assets/pattern/PATTERN.svg") 0 0 / 640px repeat;
}
.steps .section-head { position: relative; z-index: 1; }
.steps .section-head__title { color: var(--yellow); }
.steps__grid {
  list-style: none; position: relative; z-index: 1;
  max-width: 1100px; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  counter-reset: step;
}
.step { position: relative; display: grid; justify-items: center; text-align: center; gap: .7rem; min-width: 0; }
/* sticker-disc: colored disc + chrome ring + hard shadow behind every icon mask */
.step__art { position: relative; width: 112px; height: 112px; }
.step__art::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 3px solid var(--chrome);
  box-shadow: 0 5px 0 var(--chrome);
}
.step__art--yellow::before { background: var(--yellow); }
.step__art--orange::before { background: var(--orange); }
.step__art--cream::before  { background: var(--cream); }
.step__num {
  position: absolute; top: -8px; left: -16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--cream); color: var(--green);
  border: 3px solid var(--chrome);
  box-shadow: 0 3px 0 var(--chrome);
  font-family: var(--font-display); font-size: 1.25rem; line-height: 1;
}
.step__art--cream .step__num { background: var(--yellow); }
.step__icon { position: absolute; inset: 22px; display: block; }
.step__art--yellow .step__icon { background: var(--green); }
.step__art--orange .step__icon { background: var(--cream); }
.step__art--cream .step__icon  { background: var(--orange); }
.step__icon--cookie {
  -webkit-mask: url("../assets/icons/svg/fortune-cookie.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/fortune-cookie.svg") center / contain no-repeat;
}
.step__icon--box {
  -webkit-mask: url("../assets/icons/svg/pagoda-box.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/pagoda-box.svg") center / contain no-repeat;
}
.step__icon--noodles {
  -webkit-mask: url("../assets/icons/svg/noodles.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/noodles.svg") center / contain no-repeat;
}
.step__label {
  font-family: var(--font-label); font-weight: 600; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .04em; color: var(--yellow);
}
.step__copy { font-size: .95rem; line-height: 1.55; color: rgba(253, 246, 227, .85); max-width: 30ch; }
/* dotted connectors between steps on desktop */
@media (min-width: 861px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 56px; left: 100%;
    width: clamp(1.5rem, 4vw, 3rem);
    border-top: 3px dotted rgba(250, 209, 52, .45);
  }
}
@media (max-width: 860px) {
  .steps__grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ---------- inquiry CTA band — checklist card + mail CTA ---------- */
.inquire {
  position: relative; overflow: clip;
  max-width: 1080px; margin: 0 auto; text-align: center;
  padding: clamp(3.5rem, 8vw, 5.5rem) clamp(1rem, 4vw, 3rem) clamp(4rem, 8vw, 6rem);
}
.inquire__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3rem); align-items: center;
  max-width: 900px; margin: clamp(2rem, 4vw, 2.6rem) auto 0;
  text-align: left;
}
/* "your fiesta checklist" — the exact three things to put in the email */
.inquire__card {
  position: relative;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--chrome); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--chrome);
  padding: 1.6rem 1.7rem 1.8rem;
  transform: rotate(-1deg);
}
/* chopsticks sticker — confident, anchored to the card corner */
.inquire__deco {
  position: absolute; top: -34px; right: -14px; z-index: 2;
  width: 104px; height: 104px;
  background: var(--orange); transform: rotate(24deg);
  filter: drop-shadow(0 3px 0 var(--chrome));
  pointer-events: none;
  -webkit-mask: url("../assets/icons/svg/chopsticks.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/chopsticks.svg") center / contain no-repeat;
}
.inquire__card-flair {
  font-size: 1.5rem; color: var(--green);
  transform: rotate(-2deg); width: max-content; max-width: 100%;
}
.inquire__list { list-style: none; display: grid; gap: .75rem; margin-top: 1rem; }
.inquire__list .lead-row > :last-child { color: rgba(12, 11, 8, .75); text-transform: none; letter-spacing: 0; font-size: .95rem; }
.inquire__actions {
  position: relative; z-index: 1;
  display: grid; gap: 1.1rem; justify-items: start;
}
.inquire__mail {
  font-size: clamp(1.05rem, 2.6vw, 1.45rem);
  padding: 1.2rem clamp(1.8rem, 4vw, 2.8rem);
  text-transform: none; letter-spacing: .02em;
}
.inquire .link-arrow { color: var(--green); }
.inquire__note { color: rgba(12, 11, 8, .65); font-size: .95rem; margin-top: .2rem; }
@media (max-width: 760px) {
  .inquire__grid { grid-template-columns: 1fr; }
  .inquire__actions { justify-items: center; text-align: center; }
}

/* ============================================================
   LOCATIONS
   ============================================================ */

.flagship { max-width: 1200px; margin: 0 auto; padding: clamp(4rem, 9vw, 6.5rem) clamp(1rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); }
.flagship__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.6rem, 3.5vw, 2.5rem);
  margin-top: clamp(3.5rem, 6vw, 4.2rem);
  align-items: stretch;
}
@media (max-width: 880px) { .flagship__grid { grid-template-columns: 1fr; } }

/* the big flagship card — visit-card language scaled up */
.flag-card {
  position: relative;
  background: var(--orange); color: var(--cream);
  border: 3px solid var(--chrome); border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--chrome);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  display: flex; flex-direction: column; gap: 1.2rem;
}
.flag-card__mascot {
  position: absolute; top: -48px; right: -22px; z-index: 2;
  width: 130px; height: auto;
  transform: rotate(-10deg);
  pointer-events: none;
}
.flag-card__flair { font-family: var(--font-script); font-size: clamp(1.4rem, 2.4vw, 1.7rem); color: var(--yellow); transform: rotate(-2deg); width: max-content; }
.flag-card__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 4.5vw, 3.2rem); text-transform: uppercase; line-height: 1; margin-top: -0.6rem; }
.flag-card__addr { font-size: 1.05rem; line-height: 1.6; font-weight: 500; font-style: normal; }
.flag-card__phone {
  margin-top: -.7rem;
  font-family: var(--font-label); font-weight: 600; font-size: 1rem;
  letter-spacing: .03em; font-variant-numeric: tabular-nums;
}
.flag-card__phone a { color: var(--yellow); text-decoration: none; border-bottom: 2px dotted rgba(253, 246, 227, .55); }
.flag-card__phone a:hover { border-bottom-style: solid; }
.flag-card__hours { display: grid; gap: .6rem; }
.flag-card__hours .lead-row > :first-child { font-size: .95rem; }
.flag-card__hours .lead-row > :last-child { font-size: .95rem; }
.flag-card__actions { margin-top: auto; padding-top: .6rem; display: flex; gap: 1rem 1.5rem; flex-wrap: wrap; align-items: center; }

/* stylized "map" — a decorative brand panel, not a real embed */
.map-panel {
  position: relative; overflow: hidden;
  background: var(--green);
  border: 3px solid var(--chrome); border-radius: var(--radius);
  box-shadow: 0 8px 0 var(--chrome);
  min-height: 420px;
}
@media (max-width: 880px) { .map-panel { min-height: 340px; } }
.map-panel__pattern {
  position: absolute; inset: 0; opacity: .03; pointer-events: none;
  background: url("../assets/pattern/PATTERN.svg") 0 0 / 420px repeat;
  filter: saturate(0) brightness(2.5);
}
/* the island — a wide rounded landmass (≈3.5:1, like PR) with water on all sides */
.map-panel__isle {
  position: absolute; left: 7%; top: 40%; width: 64%; height: 26%;
  background: var(--green-bright);
  border: 3px dashed rgba(253, 246, 227, .5);
  border-radius: 44px 50px 46px 52px / 30px 34px 28px 32px;
}
/* dashed inlet notch on the north coast — the Condado lagoon */
.map-panel__inlet {
  position: absolute; left: 58%; top: calc(40% - 3px); width: 30px; height: 15px;
  background: var(--green);
  border: 2px dashed rgba(253, 246, 227, .45); border-top: 0;
  border-radius: 0 0 999px 999px;
}
/* Vieques y Culebra off the east coast */
.map-panel__isleta {
  position: absolute;
  background: var(--green-bright);
  border: 3px dashed rgba(253, 246, 227, .4);
  border-radius: 62% 38% 55% 45% / 60% 55% 45% 40%;
}
.map-panel__isleta--vieques { left: 76%; top: 55%; width: 11%; height: 8%; }
.map-panel__isleta--culebra { left: 80%; top: 41%; width: 7%; height: 6%; }
.map-panel__sea-label {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%) rotate(-2deg);
  font-family: var(--font-label); font-weight: 600; font-size: .7rem;
  letter-spacing: .5em; text-indent: .5em; text-transform: uppercase;
  color: rgba(253, 246, 227, .55); white-space: nowrap;
}
/* compass chip — N over a chevron, pinned bottom-left */
.map-panel__compass {
  position: absolute; left: 14px; bottom: 14px;
  display: grid; justify-items: center; gap: 1px;
  padding: .34rem .5rem .3rem;
  background: var(--cream); color: var(--green);
  border: 2px solid var(--chrome); border-radius: 10px;
  box-shadow: 0 3px 0 var(--chrome);
  font-family: var(--font-label); font-weight: 700; font-size: .8rem; line-height: 1;
}
.map-panel__compass::before {
  content: ""; width: 7px; height: 7px; margin-bottom: 1px;
  border-top: 3px solid currentColor; border-right: 3px solid currentColor;
  transform: rotate(-45deg);
}
/* "Ashford Ave" micro-label hugging the north shore */
.map-panel__ave {
  position: absolute; left: 20%; top: 42%;
  font-family: var(--font-label); font-weight: 600; font-size: .55rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(253, 246, 227, .6); white-space: nowrap;
}
/* the coin-charm pin marking Condado — north coast, east of center (San Juan) */
.map-panel__pin {
  position: absolute; left: 54%; top: 24%; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .3rem;
}
.map-panel__coin {
  display: block; width: 52px; height: 52px;
  background: var(--yellow);
  filter: drop-shadow(0 3px 0 var(--chrome));
  -webkit-mask: url("../assets/icons/svg/coin-charm.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/coin-charm.svg") center / contain no-repeat;
  animation: pin-bob 2.6s ease-in-out infinite;
}
@keyframes pin-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.map-panel__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); box-shadow: 0 2px 0 var(--chrome); }
.map-panel__label {
  font-family: var(--font-label); font-weight: 600; font-size: .85rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--cream);
}
.map-panel__aqui {
  position: absolute; left: 63%; top: 11%;
  font-family: var(--font-script); font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--yellow); transform: rotate(-8deg);
  text-shadow: 2px 3px 0 var(--chrome);
  white-space: nowrap;
}
html.capture .map-panel__coin { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .map-panel__coin { animation: none; } }

/* ---------- coming soon + delivery row ---------- */
.more-grid {
  max-width: 1200px; margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 3rem) clamp(4rem, 9vw, 6.5rem);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}
.more-grid > * { min-width: 0; }
.soon-card {
  background: var(--cream-dim); color: rgba(12, 11, 8, .75);
  border: 3px dashed rgba(6, 51, 26, .45); border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: .9rem;
}
.soon-card__flair { font-family: var(--font-script); font-size: clamp(1.7rem, 3vw, 2.1rem); color: var(--orange); transform: rotate(-2deg); width: max-content; }
.soon-card__title { font-family: var(--font-label); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: rgba(6, 51, 26, .75); }
.soon-card__list { list-style: none; display: grid; gap: .6rem; margin-top: .2rem; }
.soon-card__list .lead-row > :last-child { color: rgba(12, 11, 8, .55); }
.soon-card__note { font-size: .9rem; line-height: 1.55; color: rgba(12, 11, 8, .6); margin-top: .4rem; }
.delivery-card {
  position: relative; overflow: hidden;
  background: var(--yellow); color: var(--ink);
  border: 3px solid var(--chrome); border-radius: var(--radius);
  box-shadow: 0 6px 0 var(--chrome);
  padding: clamp(1.6rem, 3vw, 2.2rem);
  display: flex; flex-direction: column; gap: .8rem;
}
/* bubble-tea cup planted on the card's bottom edge — deliberate, not cropped */
.delivery-card__icon {
  position: absolute; right: 16px; bottom: -20px;
  width: 132px; height: 132px;
  background: var(--green); opacity: .2; transform: rotate(-8deg);
  pointer-events: none;
  -webkit-mask: url("../assets/icons/svg/bubble-tea.svg") center / contain no-repeat;
  mask: url("../assets/icons/svg/bubble-tea.svg") center / contain no-repeat;
}
.delivery-card__title { font-family: var(--font-label); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; color: var(--green); }
.delivery-card p { position: relative; z-index: 1; line-height: 1.6; color: rgba(12, 11, 8, .8); max-width: 44ch; }
.delivery-card__list { position: relative; z-index: 1; list-style: none; display: grid; gap: .6rem; margin-top: .1rem; }
.delivery-card__list .lead-row > :last-child { color: rgba(12, 11, 8, .7); }
.delivery-card .link-arrow { position: relative; z-index: 1; width: max-content; margin-top: .2rem; }