:root{--colors-ground:#2B150C;--colors-spotlight:#8E4A1C;--colors-spotlight-mid:#4A2411;--colors-card:#3A1C0F;--colors-map-fallback:#2F170C;--colors-hairline:#4A2411;--colors-cream:#F7ECDC;--colors-white:#FFFFFF;--colors-text-secondary:#E6D2B8;--colors-text-tertiary:#C9B59E;--colors-text-muted:#A8865A;--colors-muted-gold:#D4B071;--colors-amber:#F0B04A;--colors-orange:#D9641E;--colors-terracotta:#C8561B;--colors-pill-cream:#FFE7C2;--colors-star-empty:#5A3A24;--colors-whatsapp:#25D366;--colors-bar-ground-phone:#2B150CE6;--colors-bar-ground-desktop:#2B150CDB;--colors-sheet-dim:#1409048C;--colors-menu-list-ground:#0000002E;--typography-body-font-family:Poppins;--typography-body-font-size:17px;--typography-body-font-weight:400;--typography-body-line-height:1.5;--typography-script-hero-font-family:Allison;--typography-script-hero-font-size:34px;--typography-script-hero-font-weight:400;--typography-script-hero-line-height:1;--typography-script-hero-desktop-font-family:Allison;--typography-script-hero-desktop-font-size:46px;--typography-script-hero-desktop-font-weight:400;--typography-script-hero-desktop-line-height:1;--typography-script-section-font-family:Allison;--typography-script-section-font-size:44px;--typography-script-section-font-weight:400;--typography-script-section-line-height:1;--typography-script-section-desktop-font-family:Allison;--typography-script-section-desktop-font-size:56px;--typography-script-section-desktop-font-weight:400;--typography-script-section-desktop-line-height:1;--typography-script-tagline-font-family:Allison;--typography-script-tagline-font-size:30px;--typography-script-tagline-font-weight:400;--typography-script-tagline-line-height:1.1;--typography-script-tagline-desktop-font-family:Allison;--typography-script-tagline-desktop-font-size:40px;--typography-script-tagline-desktop-font-weight:400;--typography-script-tagline-desktop-line-height:1.1;--typography-dish-name-font-family:Poppins;--typography-dish-name-font-size:36px;--typography-dish-name-font-weight:700;--typography-dish-name-line-height:1.1;--typography-dish-name-letter-spacing:-0.01em;--typography-dish-name-long-font-family:Poppins;--typography-dish-name-long-font-size:31px;--typography-dish-name-long-font-weight:700;--typography-dish-name-long-line-height:1.1;--typography-dish-name-long-letter-spacing:-0.01em;--typography-dish-name-desktop-font-family:Poppins;--typography-dish-name-desktop-font-size:52px;--typography-dish-name-desktop-font-weight:700;--typography-dish-name-desktop-line-height:1.1;--typography-dish-name-desktop-letter-spacing:-0.01em;--typography-voice-font-family:Poppins;--typography-voice-font-size:17px;--typography-voice-font-weight:300;--typography-voice-desktop-font-family:Poppins;--typography-voice-desktop-font-size:19px;--typography-voice-desktop-font-weight:300;--typography-rating-number-font-family:Poppins;--typography-rating-number-font-size:48px;--typography-rating-number-font-weight:700;--typography-rating-number-line-height:1;--typography-rating-number-letter-spacing:-0.02em;--typography-rating-number-desktop-font-family:Poppins;--typography-rating-number-desktop-font-size:56px;--typography-rating-number-desktop-font-weight:700;--typography-rating-number-desktop-line-height:1;--typography-rating-number-desktop-letter-spacing:-0.02em;--typography-rating-count-font-family:Poppins;--typography-rating-count-font-size:16px;--typography-rating-count-font-weight:600;--typography-rating-count-desktop-font-family:Poppins;--typography-rating-count-desktop-font-size:17px;--typography-rating-count-desktop-font-weight:600;--typography-nav-link-font-family:Poppins;--typography-nav-link-font-size:15px;--typography-nav-link-font-weight:600;--typography-nav-link-letter-spacing:0.02em;--typography-sheet-row-font-family:Poppins;--typography-sheet-row-font-size:22px;--typography-sheet-row-font-weight:600;--typography-caps-label-font-family:Poppins;--typography-caps-label-font-size:11px;--typography-caps-label-font-weight:400;--typography-caps-label-letter-spacing:0.22em;--typography-menu-group-label-font-family:Poppins;--typography-menu-group-label-font-size:11px;--typography-menu-group-label-font-weight:600;--typography-menu-group-label-letter-spacing:0.18em;--typography-card-title-font-family:Poppins;--typography-card-title-font-size:21px;--typography-card-title-font-weight:700;--typography-card-title-line-height:1.2;--typography-price-font-family:Poppins;--typography-price-font-size:18px;--typography-price-font-weight:600;--typography-variants-font-family:Poppins;--typography-variants-font-size:14px;--typography-variants-font-weight:400;--typography-quote-font-family:Poppins;--typography-quote-font-size:17px;--typography-quote-font-weight:300;--typography-card-copy-font-family:Poppins;--typography-card-copy-font-size:14px;--typography-card-copy-font-weight:400;--typography-pill-label-font-family:Poppins;--typography-pill-label-font-size:12px;--typography-pill-label-font-weight:600;--typography-source-line-font-family:Poppins;--typography-source-line-font-size:12px;--typography-source-line-font-weight:400;--typography-source-line-letter-spacing:0.01em;--typography-order-label-caps-font-family:Poppins;--typography-order-label-caps-font-size:11px;--typography-order-label-caps-font-weight:700;--typography-order-label-caps-line-height:1;--typography-order-label-caps-letter-spacing:0.16em;--typography-order-label-caps-footer-font-family:Poppins;--typography-order-label-caps-footer-font-size:13px;--typography-order-label-caps-footer-font-weight:700;--typography-order-label-caps-footer-line-height:1;--typography-order-label-caps-footer-letter-spacing:0.14em;--typography-link-strong-font-family:Poppins;--typography-link-strong-font-size:16px;--typography-link-strong-font-weight:600;--typography-hint-font-family:Poppins;--typography-hint-font-size:13px;--typography-hint-font-weight:400;--typography-outlet-place-font-family:Poppins;--typography-outlet-place-font-size:14px;--typography-outlet-place-font-weight:400;--typography-outlet-place-line-height:1.45;--typography-outlet-hours-font-family:Poppins;--typography-outlet-hours-font-size:15px;--typography-outlet-hours-font-weight:400;--typography-outlet-rating-number-font-family:Poppins;--typography-outlet-rating-number-font-size:17px;--typography-outlet-rating-number-font-weight:700;--typography-outlet-rating-number-line-height:1;--typography-outlet-count-font-family:Poppins;--typography-outlet-count-font-size:13px;--typography-outlet-count-font-weight:400;--typography-pill-link-font-family:Poppins;--typography-pill-link-font-size:15px;--typography-pill-link-font-weight:600;--typography-pill-link-desktop-font-family:Poppins;--typography-pill-link-desktop-font-size:14px;--typography-pill-link-desktop-font-weight:600;--typography-menu-row-font-family:Poppins;--typography-menu-row-font-size:14px;--typography-menu-row-font-weight:400;--typography-menu-code-font-family:Poppins;--typography-menu-code-font-size:11px;--typography-menu-code-font-weight:400;--typography-menu-code-letter-spacing:0.04em;--typography-story-body-font-family:Poppins;--typography-story-body-font-size:16px;--typography-story-body-font-weight:400;--typography-story-body-desktop-font-family:Poppins;--typography-story-body-desktop-font-size:17px;--typography-story-body-desktop-font-weight:400;--typography-halal-title-font-family:Poppins;--typography-halal-title-font-size:18px;--typography-halal-title-font-weight:700;--typography-halal-body-font-family:Poppins;--typography-halal-body-font-size:15px;--typography-halal-body-font-weight:400;--typography-footer-body-font-family:Poppins;--typography-footer-body-font-size:14px;--typography-footer-body-font-weight:400;--typography-fine-font-family:Poppins;--typography-fine-font-size:12px;--typography-fine-font-weight:400;--rounded-full:999px;--rounded-sheet:24px;--rounded-card:20px;--rounded-order-first-screen:18px;--rounded-order-compact:16px;--rounded-disclosure:14px;--rounded-frame:12px;--rounded-thumb:10px;--spacing-breakpoint:760px;--spacing-gutter-phone:20px;--spacing-gutter-desktop:24px;--spacing-content-max:1120px;--spacing-section-top-phone:44px;--spacing-section-top-desktop:72px;--spacing-head-gap-phone:18px;--spacing-head-gap-desktop:28px;--spacing-card-gap-phone:18px;--spacing-card-gap-desktop:20px;--spacing-outlet-swipe-gap:12px;--spacing-outlet-row-gap:14px;--spacing-card-pad:18px;--spacing-card-rhythm-phone:10px;--spacing-bar-min-height:64px;--spacing-tap-min:44px;--spacing-map-width-desktop:260px;--spacing-map-height-phone:150px}
/* Madam Tang's, the one-page draft. Written from DESIGN.md's tokens (emitted above as custom
   properties by tools/build.py), not from the mock's stacked rules. Blocks: rules for every width,
   hover, the phone (max-width 759.98px), the desktop (min-width 760px), the tablet band (760 to
   1023.98px) and reduced motion. A property set in a width block is never also set for the same
   selector outside the queries (test_media_query_lint in tools/test_page.py). */

@font-face{font-family:Poppins;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-400-normal.7d93459d86.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-600-normal.f4e80d9dfd.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-latin-700-normal.9338e65fc0.woff2) format('woff2')}
@font-face{font-family:Poppins;font-weight:300;font-style:italic;font-display:swap;src:url(/assets/fonts/poppins-latin-300-italic.f0ae296f5c.woff2) format('woff2')}
@font-face{font-family:Allison;font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/allison-latin-400-normal.e685e2af5d.woff2) format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{color:var(--colors-cream);font-family:var(--typography-body-font-family),-apple-system,"Helvetica Neue",Arial,sans-serif;font-size:var(--typography-body-font-size);font-weight:var(--typography-body-font-weight);line-height:var(--typography-body-line-height);
  background-color:var(--colors-ground);background-image:radial-gradient(ellipse 70% 55% at 35% 30%,var(--colors-spotlight) 0%,var(--colors-spotlight-mid) 45%,var(--colors-ground) 100%)}
img{display:block}
a{color:inherit}
svg.g{display:block;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--colors-amber);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.script{font-family:Allison,cursive;font-weight:400;color:var(--colors-cream)}

/* Sticky header bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;min-height:var(--spacing-bar-min-height);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.bar .logo{display:block;aspect-ratio:600/190;background:url(/assets/logo/logo-gold.b02dded51b.webp) center/contain no-repeat}
.nav a{color:var(--colors-cream);text-decoration:none;font-size:var(--typography-nav-link-font-size);font-weight:var(--typography-nav-link-font-weight);letter-spacing:var(--typography-nav-link-letter-spacing);padding:10px 0;min-height:var(--spacing-tap-min);display:inline-flex;align-items:center}
.menu{width:48px;height:48px;flex-direction:column;justify-content:center;align-items:flex-end;gap:6px;padding:0 4px;text-decoration:none}
.menu i{display:block;height:2px;width:26px;background:var(--colors-cream);border-radius:2px}
.menu i:nth-child(2){width:20px}

/* Menu sheet: phone only; without script a :target panel, with script toggled by .open */
.sheetwrap{display:none}

/* First screen */
.hero{position:relative}
.photowrap{position:relative}
.pl{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;opacity:0}
.pl:first-child{opacity:1}
.tx{display:grid}
.tg{grid-area:1/1;opacity:0;align-self:end}
.tg:first-child{opacity:1}
.tg .script{line-height:var(--typography-script-hero-line-height)}
.tg .dn{display:block;font-weight:var(--typography-dish-name-font-weight);line-height:var(--typography-dish-name-line-height);letter-spacing:var(--typography-dish-name-letter-spacing);color:var(--colors-white)}
.voice{font-weight:300;font-style:italic;color:var(--colors-cream)}
.badges{position:absolute}
.badges img{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55))}
.stars{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:14px}
.stars .num{font-weight:var(--typography-rating-number-font-weight);line-height:var(--typography-rating-number-line-height);letter-spacing:var(--typography-rating-number-letter-spacing);color:var(--colors-amber)}
.stars .row{display:flex;gap:3px}
.stars .row svg{display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.stars .count{display:inline-flex;align-items:center;gap:7px;font-weight:var(--typography-rating-count-font-weight);color:var(--colors-cream)}
.stars .count svg{width:18px;height:18px;color:var(--colors-amber)}
.oline{margin-top:14px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--colors-text-secondary)}
.oline a{color:var(--colors-amber);text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-weight:600;padding:8px 0;margin:-8px 0}
.oline svg{width:18px;height:18px}
.oline .clock{display:inline-flex;align-items:center;gap:6px}
.actions{display:flex}
.grab{display:flex;align-items:center;justify-content:center;background:var(--colors-orange);color:var(--colors-white);text-decoration:none;white-space:nowrap}
.grab .lbl{font-weight:700;text-transform:uppercase;line-height:1;color:var(--colors-ground)}
.grab-first{flex-direction:column;gap:3px;min-height:62px;padding:9px 28px 10px;border-radius:var(--rounded-order-first-screen);box-shadow:0 10px 24px rgba(0,0,0,.35)}
.grab-first .lbl{font-size:var(--typography-order-label-caps-font-size);letter-spacing:var(--typography-order-label-caps-letter-spacing)}
.grab-first img{height:22px;width:auto}
.more{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--spacing-tap-min);color:var(--colors-cream);text-decoration:none;font-size:var(--typography-link-strong-font-size);font-weight:var(--typography-link-strong-font-weight)}
.more svg{width:18px;height:18px}
.pause{position:absolute;z-index:3;border-radius:var(--rounded-full);border:0;background:var(--colors-sheet-dim);color:var(--colors-cream);display:flex;align-items:center;justify-content:center;cursor:pointer}
.pause .i-play{display:none}
.hero.paused .pause .i-play{display:block}
.hero.paused .pause .i-pause{display:none}

/* The cycle runs only with .cycling (added by script, N9) and never under reduced motion */
@keyframes hp0{0%{opacity:1}40.7407%{opacity:1}44.4444%{opacity:0}96.2963%{opacity:0}100%{opacity:1}}
@keyframes hp1{0%{opacity:0}40.7407%{opacity:0}44.4444%{opacity:1}59.2593%{opacity:1}62.963%{opacity:0}100%{opacity:0}}
@keyframes hp2{0%{opacity:0}59.2593%{opacity:0}62.963%{opacity:1}77.7778%{opacity:1}81.4815%{opacity:0}100%{opacity:0}}
@keyframes hp3{0%{opacity:0}77.7778%{opacity:0}81.4815%{opacity:1}96.2963%{opacity:1}100%{opacity:0}}
@keyframes hb0{0%{opacity:1}11.1111%{opacity:1}14.8148%{opacity:0}96.2963%{opacity:0}100%{opacity:1}}
@keyframes hb1{0%{opacity:0}11.1111%{opacity:0}14.8148%{opacity:1}25.9259%{opacity:1}29.6296%{opacity:0}100%{opacity:0}}
@keyframes hb2{0%{opacity:0}25.9259%{opacity:0}29.6296%{opacity:1}40.7407%{opacity:1}44.4444%{opacity:0}100%{opacity:0}}
@keyframes dp0{0%{opacity:1}23.8095%{opacity:1}28.5714%{opacity:0}95.2381%{opacity:0}100%{opacity:1}}
@keyframes dp1{0%{opacity:0}23.8095%{opacity:0}28.5714%{opacity:1}47.619%{opacity:1}52.381%{opacity:0}100%{opacity:0}}
@keyframes dp2{0%{opacity:0}47.619%{opacity:0}52.381%{opacity:1}71.4286%{opacity:1}76.1905%{opacity:0}100%{opacity:0}}
@keyframes dp3{0%{opacity:0}71.4286%{opacity:0}76.1905%{opacity:1}95.2381%{opacity:1}100%{opacity:0}}
@keyframes dbadge{0%{opacity:1}23.8095%{opacity:1}28.5714%{opacity:0}95.2381%{opacity:0}100%{opacity:1}}
.hero.paused .pl,.hero.paused .tg,.hero.paused .badges,.hero.paused .badges img{animation-play-state:paused}

/* Sections */
section{scroll-margin-top:calc(var(--bar-h) + 8px)}
.shead{display:flex;flex-direction:column;gap:6px}
.shead .script{line-height:var(--typography-script-section-line-height)}
.caps{font-size:var(--typography-caps-label-font-size);font-weight:var(--typography-caps-label-font-weight);letter-spacing:var(--typography-caps-label-letter-spacing);text-transform:uppercase;color:var(--colors-muted-gold)}

/* Dish cards */
.dish{display:flex;flex-direction:column;background:var(--colors-card);border-radius:var(--rounded-card);overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.35)}
.dphoto{aspect-ratio:4/3;background-size:cover;background-position:center;background-color:var(--colors-card)}
.dtext{padding:16px var(--spacing-card-pad) var(--spacing-card-pad)}
.pills{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.code,.tag{font-size:var(--typography-pill-label-font-size);font-weight:var(--typography-pill-label-font-weight);padding:3px 10px;border-radius:var(--rounded-full)}
.code{background:var(--colors-orange);color:var(--colors-ground);letter-spacing:.02em}
.tag{background:var(--colors-spotlight);color:var(--colors-pill-cream);display:inline-flex;align-items:center;gap:5px}
.tag svg{width:13px;height:13px}
.dish h3{font-size:var(--typography-card-title-font-size);font-weight:var(--typography-card-title-font-weight);line-height:var(--typography-card-title-line-height);color:var(--colors-white)}
.price{font-size:var(--typography-price-font-size);font-weight:var(--typography-price-font-weight);color:var(--colors-amber);margin-top:4px}
.variants{font-size:var(--typography-variants-font-size);color:var(--colors-text-tertiary);margin-top:2px}
.quote{font-weight:300;font-style:italic;font-size:var(--typography-quote-font-size);color:var(--colors-cream);margin-top:10px}
.qsrc{display:flex;align-items:center;flex-wrap:wrap;gap:4px 7px;font-size:var(--typography-source-line-font-size);letter-spacing:var(--typography-source-line-letter-spacing);color:var(--colors-text-tertiary);margin-top:6px}
.qsrc .st{display:inline-flex;gap:1px}
.qsrc .st svg{width:11px;height:11px}
.qsrc span{line-height:1}
.qsrc img{height:13px;width:auto}
.book{font-size:var(--typography-card-copy-font-size);color:var(--colors-text-secondary);margin-top:6px}

/* Full-menu disclosure */
.fullmenu-wrap{margin-top:28px}
.fullmenu{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--spacing-tap-min);border:1.5px solid var(--colors-spotlight);border-radius:var(--rounded-disclosure);padding:14px 18px;color:var(--colors-cream);font-weight:600}
.fullmenu::-webkit-details-marker{display:none}
.fullmenu svg{width:20px;height:20px;transition:none}
.fullmenu-wrap[open] .fullmenu{border-radius:var(--rounded-disclosure) var(--rounded-disclosure) 0 0;border-bottom:0}
.fullmenu-wrap[open] .fullmenu svg{transform:rotate(180deg)}
.menulist{border:1.5px solid var(--colors-spotlight);border-top:0;border-radius:0 0 var(--rounded-disclosure) var(--rounded-disclosure);background:var(--colors-menu-list-ground)}
.mcat{break-inside:avoid;padding-top:14px}
.mcat h4{display:flex;align-items:center;gap:10px;font-size:var(--typography-menu-group-label-font-size);font-weight:var(--typography-menu-group-label-font-weight);letter-spacing:var(--typography-menu-group-label-letter-spacing);text-transform:uppercase;color:var(--colors-muted-gold);margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--colors-hairline)}
.mthumb{width:52px;height:52px;border-radius:var(--rounded-thumb);object-fit:cover;flex:none;box-shadow:0 4px 10px rgba(0,0,0,.35);background:var(--colors-card)}
.mrow{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:var(--typography-menu-row-font-size);color:var(--colors-cream)}
.mcode{font-size:var(--typography-menu-code-font-size);letter-spacing:var(--typography-menu-code-letter-spacing);color:var(--colors-text-muted);width:44px;flex:none}
.mname{flex:1}
.mprice{color:var(--colors-amber);font-weight:600;white-space:nowrap;text-align:right}

/* Outlets */
.swipe{align-items:center;gap:8px;font-size:var(--typography-hint-font-size);color:var(--colors-muted-gold)}
.swipe svg{width:16px;height:16px}
.outlet{display:flex;background:var(--colors-card);border-radius:var(--rounded-card);overflow:hidden}
.omap{position:relative;display:block;background-size:cover;background-position:center;background-image:var(--map),linear-gradient(135deg,var(--colors-spotlight-mid),var(--colors-map-fallback))}
.mpin{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-92%);filter:drop-shadow(0 4px 8px rgba(0,0,0,.6))}
.otext h3{font-size:var(--typography-card-title-font-size);font-weight:var(--typography-card-title-font-weight);color:var(--colors-white)}
.oplace{font-size:var(--typography-outlet-place-font-size);color:var(--colors-text-secondary)}
.ohours{display:inline-flex;align-items:center;gap:6px;font-size:var(--typography-outlet-hours-font-size);color:var(--colors-cream)}
.ohours svg{width:16px;height:16px}
.orate{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
.orate b{font-size:var(--typography-outlet-rating-number-font-size);font-weight:var(--typography-outlet-rating-number-font-weight);line-height:var(--typography-outlet-rating-number-line-height);color:var(--colors-amber)}
.orow{display:inline-flex;gap:2px}
.ocount{width:100%;font-size:var(--typography-outlet-count-font-size);color:var(--colors-text-secondary)}
.olinks{display:flex;flex-direction:column;gap:8px}
.olinks a{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 16px;border:1.5px solid var(--colors-spotlight);border-radius:var(--rounded-full);font-weight:600;text-decoration:none;white-space:nowrap;color:var(--colors-amber)}
.olinks a.maps{background:var(--colors-spotlight);color:var(--colors-pill-cream)}
.olinks svg{width:16px;height:16px}
.attrib{font-size:var(--typography-fine-font-size);line-height:16px;color:var(--colors-text-muted);margin-top:4px}
.attrib a{color:var(--colors-text-muted);font-weight:600;display:inline-block;padding:14px 0;text-underline-offset:2px}
.tablenote{font-size:15px;color:var(--colors-text-secondary);margin-top:6px;display:flex;gap:8px;align-items:flex-start}
.tablenote svg{width:18px;height:18px;margin-top:3px;color:var(--colors-muted-gold)}
.tablenote .ms{display:block;color:var(--colors-muted-gold)}

/* Story */
.story{background:var(--colors-card);border-radius:var(--rounded-card);overflow:hidden}
.sphoto{background:url(/assets/photos/shopfront-petanak-vintage.2facee2681.webp) center/cover,var(--colors-card)}
.stext .tagline{font-family:Allison,cursive;line-height:var(--typography-script-tagline-line-height);color:var(--colors-amber);margin:0 0 12px}
.stext p{color:var(--colors-cream);margin-top:10px}

/* Halal */
.halal{border:1px solid var(--colors-spotlight);border-radius:var(--rounded-card);padding:18px;display:flex}
.halal h2{font-size:var(--typography-halal-title-font-size);font-weight:var(--typography-halal-title-font-weight);color:var(--colors-white)}
.halal p{font-size:var(--typography-halal-body-font-size);color:var(--colors-cream);margin-top:6px}
.halal a{color:var(--colors-amber);font-weight:600;text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:var(--spacing-tap-min)}
.halal a svg{width:16px;height:16px}
.cert{border:1.5px dashed var(--colors-text-muted);border-radius:var(--rounded-frame);display:flex;align-items:center;justify-content:center;color:var(--colors-text-muted);font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-align:center;padding:0 16px}

/* Footer */
footer{border-top:1px solid var(--colors-hairline);color:var(--colors-text-secondary);font-size:var(--typography-footer-body-font-size)}
footer .logo{display:block;width:150px;aspect-ratio:600/190;background:url(/assets/logo/logo-white.c955ad07bd.webp) center/contain no-repeat;margin-bottom:14px}
.frow a{display:inline-flex;align-items:center;gap:10px;color:var(--colors-cream);text-decoration:none;min-height:var(--spacing-tap-min)}
.frow svg,.frow img{width:20px;height:20px;color:var(--colors-amber)}
.frow b{font-weight:600}
.fcta{display:flex;flex-direction:column}
.grab-foot{flex-direction:row;gap:10px;min-height:54px;padding:10px 22px;border-radius:var(--rounded-order-compact)}
.grab-foot .lbl{font-size:var(--typography-order-label-caps-footer-font-size);letter-spacing:var(--typography-order-label-caps-footer-letter-spacing);transform:translateY(1px)}
.grab-foot img{height:21px;width:auto}
.fcopy p{margin-top:6px}
.fine{font-size:var(--typography-fine-font-size);color:var(--colors-text-muted)}

/* WhatsApp bubble */
.wa{position:fixed;z-index:5;border-radius:var(--rounded-full);background:var(--colors-whatsapp);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.wa svg,.wa img{width:30px;height:30px}

/* Hover and pressed (G11; a desktop pointer only) */
@media (hover:hover){
  .grab:hover,.olinks a:hover,.pause:hover{filter:brightness(1.08)}
  .nav a:hover,.oline a:hover,.more:hover,.halal a:hover,.frow a:hover,.attrib a:hover{text-decoration:underline;text-underline-offset:3px}
}
.grab:active,.olinks a:active,.pause:active{filter:brightness(.92)}

/* ---------- Phone ---------- */
@media (max-width:759.98px){
  :root{--bar-h:72px}
  .bar{background:var(--colors-bar-ground-phone);padding:12px 16px;height:var(--bar-h)}
  .bar .logo{width:150px}
  .nav{display:none}
  .menu{display:flex}
  .sheetwrap:target,.sheetwrap.open{display:block}
  .dim{position:fixed;inset:0;z-index:25;background:var(--colors-sheet-dim)}
  .sheet{position:fixed;z-index:30;top:0;left:0;right:0;background:var(--colors-ground);border-radius:0 0 var(--rounded-sheet) var(--rounded-sheet);padding:72px 20px 22px;box-shadow:0 20px 50px rgba(0,0,0,.5);color:var(--colors-cream)}
  .sheet .x{position:absolute;top:14px;right:16px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--colors-cream)}
  .sheet .x svg{width:26px;height:26px}
  .sheet .row{display:flex;align-items:center;min-height:56px;text-decoration:none;font-size:var(--typography-sheet-row-font-size);font-weight:var(--typography-sheet-row-font-weight);border-bottom:1px solid var(--colors-hairline)}
  .sheet .acts{margin-top:18px;display:flex;flex-direction:column;gap:6px}
  .grab-sheet{min-height:56px;gap:10px;border-radius:var(--rounded-order-compact)}
  .grab-sheet .lbl{font-size:var(--typography-order-label-caps-footer-font-size);letter-spacing:var(--typography-order-label-caps-footer-letter-spacing)}
  .grab-sheet img{height:20px;width:auto}
  .sheet .call{display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;font-weight:600;text-decoration:none}
  .sheet .call svg{width:20px;height:20px;color:var(--colors-amber)}

  .photowrap{height:42vh;min-height:330px;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 74%,transparent 100%)}
  .badges{top:16px;right:16px;width:88px;height:88px}
  .badges img{position:absolute;inset:0;width:88px;height:88px;opacity:0}
  .badges img:first-child{opacity:1}
  .pause{right:16px;top:calc(max(42vh,330px) - 66px);width:var(--spacing-tap-min);height:var(--spacing-tap-min)}
  .pause svg{width:20px;height:20px}
  .text{position:relative;z-index:1;margin-top:-40px;padding:0 var(--spacing-gutter-phone) 84px}
  .tg .script{font-size:var(--typography-script-hero-font-size)}
  .tg .dn{font-size:var(--typography-dish-name-font-size)}
  .tg .dn.long{font-size:var(--typography-dish-name-long-font-size)}
  .voice{font-size:var(--typography-voice-font-size);margin-top:8px}
  .stars .num{font-size:var(--typography-rating-number-font-size)}
  .stars .row svg{width:30px;height:30px}
  .stars .count{width:100%;font-size:var(--typography-rating-count-font-size)}
  .actions{flex-direction:column;gap:10px;margin-top:20px}
  .cycling .pl,.cycling .tg{animation:27s linear infinite}
  .cycling .pl:nth-child(1),.cycling .tg:nth-child(1){animation-name:hp0}
  .cycling .pl:nth-child(2),.cycling .tg:nth-child(2){animation-name:hp1}
  .cycling .pl:nth-child(3),.cycling .tg:nth-child(3){animation-name:hp2}
  .cycling .pl:nth-child(4),.cycling .tg:nth-child(4){animation-name:hp3}
  .cycling .badges img{animation:27s linear infinite}
  .cycling .badges img:nth-child(1){animation-name:hb0}
  .cycling .badges img:nth-child(2){animation-name:hb1}
  .cycling .badges img:nth-child(3){animation-name:hb2}

  section{padding:var(--spacing-section-top-phone) var(--spacing-gutter-phone) 8px}
  .shead{margin-bottom:var(--spacing-head-gap-phone)}
  .shead .script{font-size:var(--typography-script-section-font-size)}
  .grid4{display:flex;flex-direction:column;gap:var(--spacing-card-gap-phone)}
  .menulist{padding:6px 18px 18px}
  .swipe{display:flex;margin:-6px 0 12px}
  .grid3{display:flex;gap:var(--spacing-outlet-swipe-gap);overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--spacing-gutter-phone));padding:0 var(--spacing-gutter-phone) 14px;scroll-padding:0 var(--spacing-gutter-phone);scrollbar-width:none}
  .grid3::-webkit-scrollbar{display:none}
  .grid3::after{content:"";flex:0 0 1px;margin-left:calc(var(--spacing-gutter-phone) - var(--spacing-outlet-swipe-gap) - 1px)}
  .outlet{flex:0 0 82%;flex-direction:column;scroll-snap-align:start}
  .outlet:last-child{scroll-snap-align:end}
  .omap{height:var(--spacing-map-height-phone)}
  .otext{padding:16px 18px 18px;display:flex;flex-direction:column;gap:var(--spacing-card-rhythm-phone)}
  .ocol{display:block}
  .otext h3{line-height:var(--typography-card-title-line-height)}
  .oplace{line-height:var(--typography-outlet-place-line-height)}
  .orow svg{width:15px;height:15px}
  .olinks{margin-top:4px}
  .olinks a{min-height:var(--spacing-tap-min);font-size:var(--typography-pill-link-font-size)}
  .story{display:block}
  .sphoto{aspect-ratio:16/10}
  .stext{padding:20px 18px 24px}
  .stext .tagline{font-size:var(--typography-script-tagline-font-size)}
  .stext p{font-size:var(--typography-story-body-font-size)}
  .halal{flex-direction:column;gap:12px}
  .cert{height:120px}
  footer{display:flex;flex-direction:column;gap:22px;margin-top:36px;padding:36px var(--spacing-gutter-phone) 110px}
  .fcta{align-items:stretch}
  .grab-foot{width:100%}
  .wa{right:16px;bottom:16px;width:56px;height:56px}
}

/* ---------- Desktop ---------- */
@media (min-width:760px){
  :root{--bar-h:96px}
  .bar{background:var(--colors-bar-ground-desktop);padding:18px 32px;height:var(--bar-h)}
  .bar .logo{width:190px}
  .nav{display:flex;gap:28px}
  .menu{display:none}

  .hero{display:flex;min-height:calc(100vh - 84px)}
  .photowrap{flex:0 0 60%;align-self:stretch;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%),linear-gradient(to right,#000 0%,#000 66%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,#000 0%,#000 90%,transparent 100%),linear-gradient(to right,#000 0%,#000 66%,transparent 100%);mask-composite:intersect}
  .badges{left:36px;bottom:40px;display:flex;gap:18px}
  .badges img{width:140px;height:140px}
  .pause{left:max(calc(60% - 128px), calc(36px + 3 * 140px + 2 * 18px + 12px));bottom:40px;width:56px;height:56px}
  .pause svg{width:24px;height:24px}
  .text{flex:1;position:relative;z-index:1;margin:0 0 0 -60px;padding:48px 48px 48px 0;display:flex;flex-direction:column;justify-content:center}
  .tg .script{font-size:var(--typography-script-hero-desktop-font-size)}
  .tg .dn{font-size:var(--typography-dish-name-desktop-font-size)}
  .voice{font-size:var(--typography-voice-desktop-font-size);margin-top:12px}
  .stars .num{font-size:var(--typography-rating-number-desktop-font-size)}
  .stars .row svg{width:34px;height:34px}
  .stars .count{font-size:var(--typography-rating-count-desktop-font-size)}
  .actions{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px 22px;margin-top:28px}
  .grab-first{min-width:230px}
  .cycling .pl,.cycling .tg,.cycling .badges{animation:21s linear infinite}
  .cycling .pl:nth-child(1),.cycling .tg:nth-child(1){animation-name:dp0}
  .cycling .pl:nth-child(2),.cycling .tg:nth-child(2){animation-name:dp1}
  .cycling .pl:nth-child(3),.cycling .tg:nth-child(3){animation-name:dp2}
  .cycling .pl:nth-child(4),.cycling .tg:nth-child(4){animation-name:dp3}
  .cycling .badges{animation-name:dbadge}

  section{max-width:var(--spacing-content-max);margin:0 auto;padding:var(--spacing-section-top-desktop) var(--spacing-gutter-desktop) 8px}
  .shead{margin-bottom:var(--spacing-head-gap-desktop)}
  .shead .script{font-size:var(--typography-script-section-desktop-font-size)}
  .grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--spacing-card-gap-desktop)}
  .menulist{columns:3;column-gap:32px;padding:10px 24px 24px}
  .swipe{display:none}
  .grid3{display:grid;grid-template-columns:1fr;gap:var(--spacing-outlet-row-gap)}
  .outlet{flex-direction:row;align-items:stretch;min-height:150px}
  .omap{flex:0 0 var(--spacing-map-width-desktop);min-height:150px}
  .otext{flex:1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.1fr) auto;gap:0 32px;align-items:center;padding:18px 28px 18px 24px}
  .ocol{display:flex;flex-direction:column;gap:6px;min-width:0}
  .otext h3{line-height:1.15}
  .oplace{line-height:1.4}
  .orow svg{width:16px;height:16px}
  .olinks a{min-height:40px;font-size:var(--typography-pill-link-desktop-font-size)}
  .story{display:flex}
  .sphoto{flex:0 0 46%}
  .stext{padding:36px 40px}
  .stext .tagline{font-size:var(--typography-script-tagline-desktop-font-size)}
  .stext p{font-size:var(--typography-story-body-desktop-font-size)}
  .halal{flex-direction:row;align-items:center;gap:32px}
  .halal>div:first-child{flex:1}
  .cert{flex:0 0 260px;height:150px}
  footer{max-width:var(--spacing-content-max);margin:48px auto 0;padding:40px var(--spacing-gutter-desktop) 120px;display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:start}
  .fcta{justify-self:center;align-items:center}
  .grab-foot{min-width:260px}
  .fcopy{text-align:right}
  .wa{right:24px;bottom:24px;width:60px;height:60px}
}

/* ---------- Tablet band (760 to 1023 px; G7: the 768 check broke, new rules allowed) ---------- */
@media (min-width:760px) and (max-width:1023.98px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .omap{flex-basis:200px}
  .otext{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;gap:10px 24px}
  .otext .ocol{grid-column:1}
  .otext .olinks{grid-column:2;grid-row:1 / span 2;align-self:center}
  .menulist{columns:2}
  .badges img{width:104px;height:104px}
  .pause{left:calc(36px + 3 * 104px + 2 * 18px + 12px)}
}

/* Reduced motion: the laksa layer and its words alone, no animation (both widths) */
@media (prefers-reduced-motion:reduce){
  .pl,.tg,.badges,.badges img{animation:none!important}
  .pl+.pl,.tg+.tg{display:none}
}