/* =========================================================
   မဟာရန်ကုန် လက်ဖက်ရည်ဆိုင် · Mahar Yangon Teashop (Nok)
   Brand colours sampled directly from the shop's own logo art.
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --maroon:#3F170F;
  --maroon-2:#2A0E09;
  --maroon-3:#55231A;
  --maroon-4:#6B3025;
  --cream:#FBEEC4;
  --cream-2:#F6E4B4;
  --sand:#F4DCB4;
  --paper:#FFF8EA;
  --paper-2:#FBEFDC;
  --gold:#D9A441;
  --gold-2:#E9C173;
  --wood:#8B5D46;
  --terra:#AD7762;

  /* Burmese: a calligraphic face for names and headings, a warm humanist one for reading */
  --f-my:"Padauk","Noto Sans Myanmar","Myanmar Text","Pyidaungsu",sans-serif;
  /* Display Burmese. PDA18-Stone is a hand-drawn Myanmar face many people in
     Myanmar already have installed; naming it here costs nothing and costs no
     licence, and anyone without it falls straight through to Noto Serif Myanmar,
     which is the most characterful Burmese face that is free to embed. */
  --f-my-dis:"PDA18-Stone","Noto Serif Myanmar","Padauk","Myanmar Text","Pyidaungsu",serif;
  /* Latin: hand-cut display, rounded body, and a marker hand for warm accents */
  --f-dis:"Fraunces",Georgia,"Times New Roman",serif;
  --f-ui:"Nunito",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-hand:"Shantell Sans","Nunito",-apple-system,"Segoe UI",cursive;
  /* Fraunces' soft + wonk axes give headings a hand-cut, slightly imperfect warmth */
  --wonk:"SOFT" 100,"WONK" 1;

  --wrap:1180px;
  --r-s:14px; --r-m:22px; --r-l:32px; --r-xl:44px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --sh-1:0 6px 20px rgba(42,14,9,.10);
  --sh-2:0 18px 44px rgba(42,14,9,.18);
  --sh-3:0 30px 80px rgba(42,14,9,.30);
  --nav-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;background:var(--paper);color:var(--maroon);
  font-family:var(--f-ui);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,picture,video,svg,iframe{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,p{margin:0}
::selection{background:var(--gold);color:var(--maroon)}

/* ---------- bilingual ---------- */
.t-my,.b-my{font-family:var(--f-my);line-height:1.95;overflow-wrap:break-word}
[data-lang="en"] .t-my{display:none!important}
[data-lang="my"] .t-en{display:none!important}
.b-my,.b-en{display:block}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.break{word-break:break-word}

/* ---------- layout ---------- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.section{position:relative;padding:clamp(64px,10vw,124px) 0;overflow:hidden}
.sec-paper{background:
  radial-gradient(120% 80% at 100% 0%,rgba(217,164,65,.10),transparent 60%),
  linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%);
  color:var(--maroon)}
.sec-maroon{background:
  radial-gradient(100% 70% at 0% 0%,rgba(217,164,65,.14),transparent 62%),
  linear-gradient(180deg,var(--maroon) 0%,var(--maroon-2) 100%);
  color:var(--cream)}
.sec-gold{background:linear-gradient(140deg,var(--gold-2) 0%,var(--gold) 55%,#C48F31 100%);color:var(--maroon-2)}

.skip-link{position:fixed;left:-9999px;top:10px;z-index:200;background:var(--gold);color:var(--maroon);padding:10px 18px;border-radius:999px;font-weight:700}
.skip-link:focus{left:14px}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ---------- type ---------- */
.eyebrow{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--f-ui);font-size:.74rem;font-weight:800;
  letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.eyebrow .b-my{display:inline;font-size:.95rem;letter-spacing:.06em}
.eyebrow .b-en{display:inline}
.eyebrow .dot{opacity:.55}
.sec-maroon .eyebrow,.sec-gold .eyebrow{color:var(--gold-2)}
.sec-gold .eyebrow{color:var(--maroon-2);opacity:.72}

.h-sec{margin-bottom:16px;letter-spacing:-.01em}
.h-sec .b-my{
  font-family:var(--f-my);font-weight:700;line-height:1.6;
  font-size:clamp(1.55rem,5.2vw,2.85rem);
}
.h-sec .b-en{
  font-family:var(--f-dis);font-weight:700;font-style:italic;
  font-size:clamp(1.05rem,3vw,1.55rem);opacity:.62;margin-top:4px;
}
.h-sec.light .b-my{color:var(--cream)}
.h-sec.light .b-en{color:var(--gold-2);opacity:.85}
.h-sub{margin-bottom:10px}
.h-sub .b-my{font-family:var(--f-my);font-weight:700;font-size:clamp(1.25rem,4vw,1.9rem);line-height:1.6}
.h-sub .b-en{font-family:var(--f-dis);font-style:italic;font-weight:700;font-size:clamp(.95rem,2.4vw,1.2rem);opacity:.6;margin-top:2px}
.h-sub.light .b-my{color:var(--cream)}
.h-sub.light .b-en{color:var(--gold-2);opacity:.85}

.sec-head{max-width:720px;margin-bottom:clamp(34px,5vw,56px)}
.sec-lede{font-size:clamp(.98rem,2.3vw,1.08rem);opacity:.8;max-width:62ch}
.sec-maroon .sec-lede{color:var(--cream);opacity:.75}
.rich p{margin-bottom:14px;opacity:.86;font-size:clamp(.98rem,2.2vw,1.06rem)}
.rich p:last-child{margin-bottom:0}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--gold);--fg:var(--maroon);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:13px 24px;border-radius:999px;background:var(--bg);color:var(--fg);
  font-family:var(--f-ui);font-weight:800;font-size:.94rem;letter-spacing:.01em;
  border:2px solid transparent;position:relative;overflow:hidden;
  transition:transform .45s var(--spring),box-shadow .35s var(--ease),background .3s,color .3s,border-color .3s;
  will-change:transform;
}
.btn .t-my,.btn .t-en{font-family:var(--f-my);line-height:1.5}
.btn .t-en{font-family:var(--f-ui)}
.btn svg{width:19px;height:19px;fill:currentColor;flex:none}
.btn-lg{padding:16px 30px;font-size:1rem}
.btn::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.42),transparent 60%);
  opacity:0;transition:opacity .35s;pointer-events:none;
}
.btn:hover::after{opacity:1}
.btn:hover{transform:translateY(-4px) scale(1.035);box-shadow:var(--sh-2)}
.btn:active{transform:translateY(-1px) scale(.98)}
.btn-gold{--bg:var(--gold);--fg:var(--maroon);box-shadow:0 8px 26px rgba(217,164,65,.4)}
.btn-dark{--bg:var(--maroon);--fg:var(--cream)}
.btn-ghost{--bg:transparent;--fg:var(--cream);border-color:rgba(251,238,196,.5);backdrop-filter:blur(8px)}
.btn-ghost:hover{--bg:var(--cream);--fg:var(--maroon);border-color:var(--cream)}
.btn-ghost-dark{--bg:transparent;--fg:var(--maroon);border-color:rgba(63,23,15,.28)}
.btn-ghost-dark:hover{--bg:var(--maroon);--fg:var(--cream)}
.btn-outline-dark{--bg:transparent;--fg:var(--maroon-2);border-color:rgba(42,14,9,.4)}
.btn-outline-dark:hover{--bg:var(--maroon-2);--fg:var(--gold-2)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transition:opacity .8s var(--ease),transform .8s var(--spring);will-change:opacity,transform}
.reveal[data-rv="up"]{transform:translateY(38px)}
.reveal[data-rv="left"]{transform:translateX(-42px)}
.reveal[data-rv="right"]{transform:translateX(42px)}
.reveal[data-rv="pop"]{transform:scale(.86)}
.reveal[data-rv="fade"]{transform:none}
.reveal.in{opacity:1;transform:none}

@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.float{animation:floaty 5s ease-in-out infinite}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes pulseGlow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.12)}}
@keyframes riseSteam{
  0%{opacity:0;transform:translateY(6px) scaleX(.85)}
  25%{opacity:.75}
  100%{opacity:0;transform:translateY(-38px) scaleX(1.35)}
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes bobIn{0%{transform:scale(.5) rotate(-14deg);opacity:0}60%{transform:scale(1.1) rotate(4deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}

/* ================= PRELOADER ================= */
.preloader{
  position:fixed;inset:0;z-index:300;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--maroon) 0%,var(--maroon-2) 100%);
  transition:opacity .7s var(--ease),visibility .7s;
}
.preloader.done{opacity:0;visibility:hidden}
.pre-inner{display:grid;justify-items:center;gap:26px}
.pre-cup{position:relative;display:grid;place-items:center}
.pre-logo{width:112px;height:112px;object-fit:contain;animation:bobIn .9s var(--spring) both}
.steam{
  position:absolute;top:-16px;width:7px;height:34px;border-radius:99px;
  background:linear-gradient(to top,rgba(251,238,196,.85),transparent);
  filter:blur(3px);animation:riseSteam 2.4s ease-in-out infinite;
}
.steam.s1{left:calc(50% - 26px);animation-delay:.1s}
.steam.s2{left:calc(50% - 3px);animation-delay:.55s}
.steam.s3{left:calc(50% + 20px);animation-delay:1s}
.pre-bar{width:170px;height:3px;border-radius:99px;background:rgba(251,238,196,.2);overflow:hidden}
.pre-bar i{display:block;height:100%;width:40%;border-radius:99px;background:var(--gold);animation:preload 1.15s var(--ease) infinite}
@keyframes preload{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}

/* ================= SCROLL PROGRESS ================= */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;transform-origin:0 50%;
  transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--cream),var(--gold));
}

/* ================= NAV ================= */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:110;height:var(--nav-h);
  display:flex;align-items:center;gap:18px;
  padding:0 clamp(16px,4vw,34px);
  background:transparent;transition:background .4s var(--ease),box-shadow .4s,backdrop-filter .4s,height .3s;
}
.nav.stuck{
  background:rgba(35,11,7,.97);backdrop-filter:blur(16px) saturate(1.3);
  box-shadow:0 8px 30px rgba(0,0,0,.3);height:62px;
  border-bottom:1px solid rgba(217,164,65,.22);
}
.nav-brand{display:flex;align-items:center;gap:11px;flex:none;min-width:0}
.nav-mark{width:40px;height:40px;object-fit:contain;transition:transform .6s var(--spring)}
.nav-brand:hover .nav-mark{transform:rotate(180deg) scale(1.08)}
.nav-name b{font-family:var(--f-my);font-size:1.02rem;font-weight:700;color:var(--cream);line-height:1.35;display:block}
.nav-name i{font-family:var(--f-dis);font-style:italic;font-size:.68rem;letter-spacing:.06em;color:var(--gold-2);display:block;opacity:.9}

.nav-links{display:none;gap:2px;margin-left:auto;flex-wrap:nowrap;min-width:0}
.nav-links a{
  position:relative;padding:9px 12px;border-radius:999px;font-weight:600;font-size:.9rem;color:var(--cream);
  opacity:.86;white-space:nowrap;flex:none;
  transition:opacity .25s,background .25s,transform .4s var(--spring);
}
.nav-links a .t-my{font-family:var(--f-my)}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:4px;width:0;height:2px;border-radius:2px;
  background:var(--gold);transform:translateX(-50%);transition:width .35s var(--spring);
}
.nav-links a:hover{opacity:1;transform:translateY(-2px)}
.nav-links a:hover::after,.nav-links a.active::after{width:22px}
.nav-links a.active{opacity:1;color:var(--gold-2)}

.nav-actions{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-links + .nav-actions{margin-left:0}
.nav-cta{display:none;padding:10px 18px;font-size:.86rem}

.lang-toggle{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 8px;border-radius:999px;
  background:rgba(251,238,196,.12);border:1px solid rgba(251,238,196,.22);transition:background .3s,transform .4s var(--spring)}
.lang-toggle:hover{background:rgba(251,238,196,.2);transform:translateY(-2px)}
.lt-track{width:34px;height:19px;border-radius:99px;background:rgba(251,238,196,.25);position:relative;flex:none}
.lt-thumb{position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:var(--gold);
  transition:transform .45s var(--spring)}
[data-lang="en"] .lt-thumb{transform:translateX(15px)}
.lt-labels{display:flex;gap:6px;font-size:.7rem;font-weight:800;letter-spacing:.06em}
.lt-labels b:first-child{font-family:var(--f-my);color:var(--gold);transition:color .3s,opacity .3s}
.lt-labels b:last-child{color:var(--cream);opacity:.45;transition:color .3s,opacity .3s}
[data-lang="en"] .lt-labels b:first-child{color:var(--cream);opacity:.45}
[data-lang="en"] .lt-labels b:last-child{color:var(--gold);opacity:1}

.nav-burger{width:42px;height:42px;border-radius:14px;display:grid;place-content:center;gap:5px;
  background:rgba(251,238,196,.12);border:1px solid rgba(251,238,196,.22)}
.nav-burger i{display:block;width:18px;height:2px;border-radius:2px;background:var(--cream);transition:transform .4s var(--spring),opacity .3s}
.nav-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobile drawer */
.nav-links.open{
  display:flex;flex-direction:column;gap:2px;position:fixed;top:var(--nav-h);left:12px;right:12px;
  padding:14px;border-radius:var(--r-l);background:rgba(42,14,9,.97);backdrop-filter:blur(18px);
  box-shadow:var(--sh-3);border:1px solid rgba(251,238,196,.14);
  animation:drawerIn .45s var(--spring) both;
}
@keyframes drawerIn{from{opacity:0;transform:translateY(-14px) scale(.97)}to{opacity:1;transform:none}}
.nav-links.open a{padding:13px 16px;border-radius:16px;font-size:1rem;white-space:normal}
.nav-links.open a:hover{background:rgba(251,238,196,.1)}
.nav-links.open a::after{display:none}

/* ================= HERO ================= */
.hero{
  position:relative;min-height:100svh;display:grid;align-items:center;overflow:hidden;
  padding:calc(var(--nav-h) + 20px) 0 96px;isolation:isolate;color:var(--cream);
}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--maroon-2)}
.hero-video{width:100%;height:100%;object-fit:cover;filter:saturate(.82) brightness(.62) contrast(1.06);transform:scale(1.06);animation:heroDrift 26s ease-in-out infinite alternate}
@keyframes heroDrift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.16) translate3d(0,-1.6%,0)}}
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(26,8,5,.94) 0%,rgba(26,8,5,.72) 26%,rgba(26,8,5,.80) 58%,rgba(26,8,5,.95) 84%,var(--maroon-2) 100%),
    radial-gradient(78% 52% at 50% 40%,rgba(26,8,5,.42) 0%,rgba(26,8,5,.86) 100%);
}
.hero-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{width:min(100% - 36px,880px);margin-inline:auto;text-align:center;display:grid;justify-items:center;gap:clamp(13px,2.4vw,22px)}

.hero-est{display:flex;align-items:center;gap:12px;font-size:.68rem;font-weight:800;letter-spacing:.28em;color:var(--gold-2);text-transform:uppercase}
.hero-est span:not(.rule){font-family:var(--f-my-dis)}
.hero-est .rule{width:clamp(20px,7vw,54px);height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.hero-est .rule:last-child{background:linear-gradient(90deg,var(--gold),transparent)}

.hero-logo{position:relative;display:grid;place-items:center;padding:6px 0}
.hero-logo img{width:min(88vw,560px);height:auto;filter:drop-shadow(0 12px 34px rgba(0,0,0,.5))}
.hero-logo .halo{
  position:absolute;width:min(90vw,600px);aspect-ratio:1;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(217,164,65,.34),transparent 62%);filter:blur(34px);
  animation:pulseGlow 6s ease-in-out infinite;
}

.hero-title{margin-top:2px}
.hero-title .b-my{font-family:var(--f-my-dis);font-weight:800;font-size:clamp(1.2rem,4.7vw,2rem);line-height:1.72;color:var(--cream)}
.hero-title .b-en{font-family:var(--f-dis);font-style:italic;font-weight:500;font-size:clamp(.92rem,2.6vw,1.25rem);color:var(--gold-2);opacity:.9;margin-top:3px}
.hero-sub{max-width:60ch;font-size:clamp(.95rem,2.4vw,1.06rem);color:var(--cream);opacity:.82}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:2px}

.hero-stats{display:flex;gap:clamp(16px,5vw,46px);margin-top:6px;flex-wrap:wrap;justify-content:center}
.hero-stats li{display:grid;justify-items:center;gap:1px}
.hero-stats b{font-family:var(--f-dis);font-weight:900;font-size:clamp(1.5rem,5vw,2.2rem);color:var(--gold);line-height:1.1;font-variant-numeric:tabular-nums}
.hero-stats span{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.68}
.hero-stats .b-my{font-family:var(--f-my-dis);font-weight:800;letter-spacing:0;text-transform:none;font-size:.82rem}

.hero-scroll{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;
  display:grid;justify-items:center;gap:8px;font-family:var(--f-my-dis);font-weight:800;font-size:.76rem;color:var(--cream);opacity:.6;
  animation:floaty 3.4s ease-in-out infinite;
}
.hero-scroll .mouse{width:24px;height:38px;border:2px solid rgba(251,238,196,.55);border-radius:99px;display:grid;justify-items:center;padding-top:6px}
.hero-scroll .mouse i{width:3px;height:7px;border-radius:2px;background:var(--gold);animation:wheel 1.7s ease-in-out infinite}
@keyframes wheel{0%{opacity:0;transform:translateY(-3px)}40%{opacity:1}100%{opacity:0;transform:translateY(11px)}}

/* ================= MARQUEE ================= */
.marquee{
  background:var(--maroon-2);border-block:1px solid rgba(217,164,65,.28);
  padding:14px 0;overflow:hidden;position:relative;
}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--maroon-2),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--maroon-2),transparent)}
.marquee-track{display:flex;width:max-content;animation:marquee 34s linear infinite}
.marquee-track span{
  font-family:var(--f-my);font-size:clamp(.9rem,2.6vw,1.15rem);font-weight:700;
  color:var(--cream);white-space:nowrap;padding-right:0;letter-spacing:.03em;line-height:1.9;
}
.marquee-track em{color:var(--gold);font-style:normal;padding:0 4px}

/* ================= ORNAMENT DIVIDERS ================= */
.orn-top,.orn-bottom{position:absolute;left:0;right:0;height:16px;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='16' viewBox='0 0 48 16'%3E%3Cpath d='M24 2 34 8 24 14 14 8Z' fill='none' stroke='%23D9A441' stroke-width='1.1'/%3E%3Ccircle cx='0' cy='8' r='1.6' fill='%23D9A441'/%3E%3Ccircle cx='48' cy='8' r='1.6' fill='%23D9A441'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center}
.orn-top{top:20px}
.orn-bottom{bottom:20px}

/* ================= STORY ================= */
.story-grid{display:grid;gap:clamp(34px,6vw,72px);align-items:center}
.art-frame{position:relative;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-2);
  border:1px solid rgba(63,23,15,.1);transform:rotate(-1.2deg);transition:transform .7s var(--spring)}
.art-frame:hover{transform:rotate(0) scale(1.015)}
.art-frame img{width:100%;aspect-ratio:1;object-fit:cover}
.art-frame .corner{position:absolute;width:26px;height:26px;border:2px solid var(--gold);opacity:.9}
.corner.tl{top:12px;left:12px;border-right:0;border-bottom:0;border-radius:6px 0 0 0}
.corner.tr{top:12px;right:12px;border-left:0;border-bottom:0;border-radius:0 6px 0 0}
.corner.bl{bottom:12px;left:12px;border-right:0;border-top:0;border-radius:0 0 0 6px}
.corner.br{bottom:12px;right:12px;border-left:0;border-top:0;border-radius:0 0 6px 0}
.story-art{position:relative}
.art-badge{
  position:absolute;right:-6px;bottom:-18px;display:grid;justify-items:center;gap:2px;
  padding:14px 20px;border-radius:var(--r-m);background:var(--maroon);color:var(--cream);
  box-shadow:var(--sh-2);border:1px solid rgba(217,164,65,.35);text-align:center;
}
.art-badge img{width:38px;height:38px;object-fit:contain;margin-bottom:2px}
.art-badge .b-my{font-family:var(--f-my);font-weight:700;font-size:.92rem;color:var(--gold-2)}
.art-badge .b-en{font-family:var(--f-dis);font-style:italic;font-size:.72rem;opacity:.72}

.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:26px}
.pillars li{
  padding:18px 18px 16px;border-radius:var(--r-m);background:rgba(255,255,255,.65);
  border:1px solid rgba(63,23,15,.09);box-shadow:var(--sh-1);
  transition:transform .5s var(--spring),box-shadow .4s,background .3s;
}
.pillars li:hover{transform:translateY(-7px) scale(1.02);box-shadow:var(--sh-2);background:#fff}
.pill-ico{font-size:1.5rem;display:block;margin-bottom:8px}
.pillars b{display:block;line-height:1.5}
.pillars .b-my{font-family:var(--f-my);font-weight:700;font-size:1rem}
.pillars .b-en{font-family:var(--f-dis);font-style:italic;font-weight:700;font-size:.8rem;opacity:.55;margin-bottom:6px}
.pillars p{font-size:.86rem;opacity:.75;line-height:1.6}
.pillars p .t-my{font-size:.84rem}

/* ================= MENU ================= */
.menu-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:clamp(16px,2.4vw,24px)}
.dish{
  position:relative;border-radius:var(--r-l);overflow:hidden;background:rgba(251,238,196,.06);
  border:1px solid rgba(217,164,65,.22);box-shadow:0 14px 40px rgba(0,0,0,.24);
  transition:transform .55s var(--spring),box-shadow .45s,border-color .4s;
  transition-delay:calc(var(--i,0) * 40ms);
}
.dish:hover{transform:translateY(-12px) scale(1.018);border-color:rgba(217,164,65,.6);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.dish-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--maroon-3)}
.dish-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease),filter .5s}
.dish:hover .dish-img img{transform:scale(1.09)}
.dish-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(42,14,9,.86) 100%)}
.dish-body{padding:18px 20px 22px;position:relative;margin-top:-46px;z-index:2}
.dish-body h3 .b-my{font-family:var(--f-my);font-weight:700;font-size:1.16rem;color:var(--cream);line-height:1.6}
.dish-body h3 .b-en{font-family:var(--f-dis);font-style:italic;font-weight:700;font-size:.84rem;color:var(--gold-2);opacity:.9;margin-top:1px}
.dish-body p{margin-top:9px;font-size:.88rem;line-height:1.65;color:var(--cream);opacity:.72}
.dish-body p .t-my{font-size:.86rem}
.tag{
  display:inline-flex;align-items:center;gap:6px;margin-top:13px;padding:6px 14px;border-radius:999px;
  background:rgba(217,164,65,.16);border:1px solid rgba(217,164,65,.4);color:var(--gold-2);
  font-size:.74rem;font-weight:800;letter-spacing:.04em;
}
.tag .t-my{font-family:var(--f-my);font-size:.78rem}
.tag.price{background:var(--gold);color:var(--maroon);border-color:var(--gold);font-size:.9rem;font-family:var(--f-dis);font-weight:900}
.tag.price small{font-weight:700;font-size:.68rem;opacity:.75;font-family:var(--f-ui)}
.tag.price small .t-my{font-family:var(--f-my)}

.steam-mini{position:absolute;top:14%;left:50%;transform:translateX(-50%);display:flex;gap:11px;z-index:2;pointer-events:none}
.steam-mini i{width:6px;height:30px;border-radius:99px;background:linear-gradient(to top,rgba(251,238,196,.8),transparent);
  filter:blur(3px);animation:riseSteam 2.8s ease-in-out infinite}
.steam-mini i:nth-child(2){animation-delay:.6s}
.steam-mini i:nth-child(3){animation-delay:1.2s}

/* toppings */
.toppings{margin-top:clamp(46px,7vw,76px);text-align:center;display:grid;justify-items:center;gap:6px}
.toppings .sec-lede{margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:12px}
.chips li{
  padding:10px 18px;border-radius:999px;background:rgba(251,238,196,.08);
  border:1px dashed rgba(217,164,65,.45);color:var(--cream);
  transition:transform .5s var(--spring),background .3s,border-color .3s,color .3s;
  cursor:default;
}
.chips li:hover{transform:translateY(-6px) rotate(-2deg) scale(1.06);background:var(--gold);color:var(--maroon);border-color:var(--gold);border-style:solid}
.chips .b-my{font-family:var(--f-my);font-weight:700;font-size:.94rem;line-height:1.5}
.chips .b-en{font-family:var(--f-ui);font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;opacity:.6}
.chips li:hover .b-en{opacity:.85}

/* ================= REELS =================
   One horizontal scroller. Drag, swipe, wheel, arrows, dots and the
   keyboard all move the same element, so nothing can fall out of sync. */
.reels-sec{overflow:visible}
.reels-viewport{position:relative}
.reels-rail{
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:8px 0 22px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent;
  cursor:grab;
}
.reels-rail.dragging{cursor:grabbing;scroll-snap-type:none}
.reels-rail:focus-visible{outline:3px solid var(--gold);outline-offset:-3px;border-radius:var(--r-m)}
.reels-rail::-webkit-scrollbar{height:7px}
.reels-rail::-webkit-scrollbar-thumb{background:var(--gold);border-radius:99px}
.reels-rail::-webkit-scrollbar-track{background:rgba(63,23,15,.08)}
.reels-track{display:flex;gap:clamp(14px,2.4vw,22px);width:max-content;
  padding-inline:max(20px,calc((100vw - var(--wrap))/2))}

/* the edges fade so it reads as "there is more over there" */
.reels-viewport::before,.reels-viewport::after{
  content:"";position:absolute;top:0;bottom:22px;width:clamp(24px,6vw,72px);z-index:3;
  pointer-events:none;transition:opacity .35s;
}
.reels-viewport::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.reels-viewport::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.reels-viewport:has(.at-start)::before,.reels-viewport:has(.at-end)::after{opacity:0}

.rail-arrow{
  position:absolute;top:calc(50% - 20px);translate:0 -50%;z-index:4;
  width:48px;height:48px;border-radius:50%;display:none;place-items:center;
  color:var(--maroon);background:rgba(255,253,246,.94);border:1px solid rgba(217,164,65,.6);
  box-shadow:0 12px 28px rgba(63,23,15,.24);
  transition:transform .45s var(--spring),background .3s,opacity .3s;
}
.rail-arrow .ico{font-size:25px;stroke-width:2}
.rail-arrow.prev{left:clamp(6px,2vw,26px)}
.rail-arrow.next{right:clamp(6px,2vw,26px)}
.rail-arrow:hover{background:var(--gold);transform:scale(1.1)}
.rail-arrow[disabled]{opacity:0;pointer-events:none}
@media (min-width:760px){.rail-arrow{display:grid}}

.reels-dots{display:flex;gap:8px;justify-content:center;margin:2px 0 22px}
.reel-dot{
  width:9px;height:9px;padding:0;border-radius:50%;transform:rotate(45deg);
  border:1.5px solid rgba(63,23,15,.32);background:transparent;
  transition:background .35s,border-color .3s,transform .45s var(--spring),width .35s;
}
.reel-dot:hover{border-color:var(--gold);transform:rotate(45deg) scale(1.2)}
.reel-dot.on{background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.25)}

.reel{scroll-snap-align:center;width:min(72vw,262px);display:grid;gap:12px}
.phone{
  position:relative;aspect-ratio:9/16;border-radius:28px;overflow:hidden;background:var(--maroon-2);
  border:3px solid var(--maroon);box-shadow:var(--sh-2);cursor:pointer;
  transition:transform .55s var(--spring),box-shadow .45s,border-color .4s;
}
.reel:hover .phone{transform:translateY(-10px) scale(1.025);box-shadow:var(--sh-3);border-color:var(--gold)}
.phone video{width:100%;height:100%;object-fit:cover;background:var(--maroon-2)}
.reel-glow{position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 -70px 70px -40px rgba(42,14,9,.85)}
.reel-play{
  position:absolute;inset:0;display:grid;place-items:center;background:rgba(42,14,9,.24);
  transition:opacity .35s,background .35s;
}
.reel-play svg{width:26px;height:26px;fill:var(--maroon);
  box-sizing:content-box;background:var(--cream);border-radius:50%;
  padding:16px 15px 16px 19px;box-shadow:0 10px 26px rgba(0,0,0,.4);
  transition:transform .5s var(--spring)}
.reel:hover .reel-play svg{transform:scale(1.12)}
.phone.playing .reel-play{opacity:0;pointer-events:none}
.reel-sound{position:absolute;right:10px;top:10px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:rgba(42,14,9,.6);backdrop-filter:blur(6px);
  font-size:.9rem;opacity:0;transition:opacity .3s;z-index:2}
.phone.playing .reel-sound{opacity:1}

/* buffering: a quiet gold ring rather than a frozen poster */
.phone::after{
  content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border-radius:50%;border:2px solid rgba(251,238,196,.28);border-top-color:var(--gold);
  opacity:0;pointer-events:none;z-index:3;transition:opacity .25s;
}
.phone.buffering::after{opacity:1;animation:spinSlow .9s linear infinite}
.phone.buffering .reel-play{opacity:0}

/* how far through the clip we are */
.reel-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(251,238,196,.22);
  opacity:0;transition:opacity .3s;z-index:2}
.phone.playing .reel-bar{opacity:1}
.reel-bar i{display:block;height:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%}

.reel h3{text-align:center;padding:0 6px}
.reel h3 .b-my{font-family:var(--f-my);font-weight:700;font-size:.94rem;line-height:1.6}
.reel h3 .b-en{font-family:var(--f-dis);font-style:italic;font-size:.76rem;opacity:.6;margin-top:1px}
.reels-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:8px}

/* ================= GALLERY ================= */
.masonry{columns:2;column-gap:clamp(10px,1.8vw,18px)}
.ph{margin:0 0 clamp(10px,1.8vw,18px);break-inside:avoid;position:relative;border-radius:var(--r-m);
  overflow:hidden;cursor:zoom-in;box-shadow:0 12px 34px rgba(0,0,0,.28);
  border:1px solid rgba(217,164,65,.16);
  transition:transform .55s var(--spring),box-shadow .45s,border-color .4s}
.ph:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 24px 56px rgba(0,0,0,.42);border-color:rgba(217,164,65,.5)}
.ph img{width:100%;transition:transform 1.1s var(--ease)}
.ph:hover img{transform:scale(1.07)}
.ph figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:34px 14px 13px;
  background:linear-gradient(180deg,transparent,rgba(42,14,9,.92));color:var(--cream);
  opacity:0;transform:translateY(10px);transition:opacity .4s,transform .5s var(--spring);
}
.ph figcaption{z-index:3}
.ph:hover figcaption,.ph:focus-visible figcaption{opacity:1;transform:none}
.ph figcaption .b-my{font-family:var(--f-my);font-weight:700;font-size:.86rem;line-height:1.6}
.ph figcaption .b-en{font-family:var(--f-dis);font-style:italic;font-size:.72rem;color:var(--gold-2);opacity:.9}

/* ================= CATERING ================= */
.cater-grid{display:grid;gap:clamp(36px,6vw,64px);align-items:center}
.cater-list{display:grid;gap:9px;margin:22px 0 26px}
.cater-list li{padding-left:28px;position:relative;font-weight:600}
.cater-list li::before{content:"";position:absolute;left:0;top:.6em;width:11px;height:11px;
  background:var(--maroon-2);transform:rotate(45deg);border-radius:2px}
.cater-list .b-my{font-family:var(--f-my);font-size:1rem;line-height:1.7}
.cater-list .b-en{font-family:var(--f-dis);font-style:italic;font-weight:700;font-size:.84rem;opacity:.6;line-height:1.4}
.cater-cta{display:flex;flex-wrap:wrap;gap:12px}
.sec-gold .h-sec .b-en{opacity:.55}
.sec-gold .rich p{opacity:.88}

.stack{position:relative;padding-bottom:34px}
.stack picture{display:block;border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh-3);border:3px solid rgba(255,255,255,.5)}
.stack .s1{transform:rotate(-2.2deg);transition:transform .7s var(--spring)}
.stack .s2{position:absolute;right:-4%;bottom:0;width:47%;transform:rotate(4.5deg);transition:transform .7s var(--spring)}
.stack:hover .s1{transform:rotate(0) scale(1.02)}
.stack:hover .s2{transform:rotate(1.5deg) scale(1.06)}
.stack img{width:100%;aspect-ratio:4/5;object-fit:cover}

/* ================= VISIT ================= */
.visit-grid{display:grid;gap:clamp(22px,4vw,34px)}
.visit-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.vcard{
  display:grid;align-content:start;gap:3px;padding:22px 20px;border-radius:var(--r-m);
  background:rgba(251,238,196,.06);border:1px solid rgba(217,164,65,.22);
  transition:transform .55s var(--spring),background .35s,border-color .35s,box-shadow .4s;
}
.vcard:hover{transform:translateY(-8px);background:rgba(251,238,196,.12);border-color:rgba(217,164,65,.6);box-shadow:0 22px 50px rgba(0,0,0,.35)}
.vico{font-size:1.55rem;margin-bottom:7px}
.tel-line{display:block}
.tel-line.alt{opacity:.78}
.vcard b{line-height:1.5}
.vcard .b-my{font-family:var(--f-my);font-weight:700;font-size:1.02rem;color:var(--cream)}
.vcard .b-en{font-family:var(--f-dis);font-style:italic;font-weight:700;font-size:.76rem;color:var(--gold-2);opacity:.85;margin-bottom:7px}
.vcard p{font-size:.9rem;line-height:1.7;color:var(--cream);opacity:.76}
.vcard p.mono{opacity:.9;font-size:.95rem;line-height:1.9}
.vlink{display:inline-block;margin-top:11px;font-size:.8rem;font-weight:800;color:var(--gold);
  transition:transform .4s var(--spring),color .3s}
.vcard:hover .vlink{transform:translateX(5px);color:var(--gold-2)}
.vlink .t-my{font-family:var(--f-my);font-size:.84rem}
.vcard.grab:hover{border-color:#00B14F;background:rgba(0,177,79,.12)}
.vcard.tiktok:hover{border-color:#FF3B5C;background:rgba(255,59,92,.1)}

.visit-map{position:relative;border-radius:var(--r-l);overflow:hidden;min-height:300px;
  border:1px solid rgba(217,164,65,.3);box-shadow:var(--sh-3);background:var(--maroon-3)}
.visit-map iframe{width:100%;height:100%;min-height:300px;border:0;background:var(--maroon-3);
  filter:grayscale(.25) sepia(.2) contrast(1.05)}
.map-open{
  position:absolute;left:14px;bottom:32px;z-index:2;  /* clears Google's own attribution strip */
  display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 11px;border-radius:999px;
  background:rgba(42,14,9,.92);backdrop-filter:blur(10px);color:var(--cream);
  border:1px solid rgba(217,164,65,.5);box-shadow:0 10px 26px rgba(0,0,0,.45);
  font-weight:700;font-size:.84rem;
  transition:transform .45s var(--spring),background .3s,border-color .3s;
}
.map-open img{width:24px;height:24px;object-fit:contain}
.map-open .t-my{font-family:var(--f-my);line-height:1.6}
.map-open:hover{transform:translateY(-3px);background:var(--gold);color:var(--maroon);border-color:var(--gold)}

/* ================= FOOTER ================= */
.foot{background:var(--maroon-2);color:var(--cream);padding:clamp(48px,7vw,74px) 0 0;border-top:1px solid rgba(217,164,65,.22)}
.foot-grid{display:grid;gap:36px}
.foot-brand img{width:min(78vw,270px);margin-bottom:16px}
.foot-brand p{font-size:.9rem;opacity:.7;max-width:38ch;line-height:1.8}
.foot-social{display:flex;gap:10px;margin-top:16px}
.foot-social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(251,238,196,.1);border:1px solid rgba(251,238,196,.18);
  transition:transform .5s var(--spring),background .3s,border-color .3s}
.foot-social a:hover{transform:translateY(-5px) scale(1.08);background:var(--gold);border-color:var(--gold)}
.foot-social svg{width:19px;height:19px;fill:var(--cream);transition:fill .3s}
.foot-social a:hover svg{fill:var(--maroon)}

.foot-links,.foot-contact{display:grid;align-content:start;gap:7px}
.foot-links b,.foot-contact b{line-height:1.5}
.foot-links .b-my,.foot-contact .b-my{font-family:var(--f-my);font-weight:700;font-size:1rem;color:var(--gold-2)}
.foot-links .b-en,.foot-contact .b-en{font-family:var(--f-dis);font-style:italic;font-size:.78rem;opacity:.6;margin-bottom:6px}
.foot-links a,.foot-contact a{font-size:.9rem;opacity:.72;transition:opacity .3s,transform .4s var(--spring),color .3s;width:fit-content}
.foot-links a .t-my,.foot-contact .t-my{font-family:var(--f-my)}
.foot-links a:hover,.foot-contact a:hover{opacity:1;color:var(--gold-2);transform:translateX(4px)}
.foot-contact p{font-size:.9rem;opacity:.72;line-height:1.85;margin-bottom:6px}

.foot-bar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;
  margin-top:44px;padding:20px 0 calc(20px + env(safe-area-inset-bottom));border-top:1px solid rgba(251,238,196,.12);
  font-size:.78rem;opacity:.6;font-family:var(--f-my);line-height:1.9}
.foot-made .t-en{font-family:var(--f-ui)}

/* ================= MOBILE DOCK ================= */
.dock{
  position:fixed;left:10px;right:10px;bottom:10px;z-index:100;display:none;
  padding:8px;border-radius:24px;background:rgba(42,14,9,.94);backdrop-filter:blur(18px);
  border:1px solid rgba(217,164,65,.28);box-shadow:0 -6px 32px rgba(0,0,0,.4);
  transform:translateY(140%);transition:transform .55s var(--spring);
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.dock.show{transform:none}
.dock a{flex:1;display:grid;justify-items:center;gap:2px;padding:8px 4px;border-radius:16px;
  color:var(--cream);transition:background .3s,transform .4s var(--spring)}
.dock a:active{transform:scale(.92);background:rgba(251,238,196,.12)}
.dock a span{font-size:1.15rem;line-height:1}
.dock a i{font-style:normal;font-size:.66rem;font-weight:700;opacity:.85;font-family:var(--f-my);line-height:1.5}

/* ================= LIGHTBOX ================= */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;
  background:rgba(20,7,4,.95);backdrop-filter:blur(8px);animation:lbIn .35s var(--ease)}
.lightbox[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lightbox figure{margin:0;display:grid;gap:14px;justify-items:center;max-width:min(94vw,1000px)}
.lightbox img{max-height:78svh;width:auto;border-radius:var(--r-m);box-shadow:var(--sh-3);
  animation:lbPop .45s var(--spring)}
@keyframes lbPop{from{transform:scale(.9);opacity:0}to{transform:none;opacity:1}}
.lightbox figcaption{color:var(--cream);text-align:center;font-family:var(--f-my);font-size:.92rem;opacity:.85;line-height:1.8}
.lb-close{position:absolute;top:14px;right:18px;font-size:2.4rem;line-height:1;color:var(--cream);
  width:48px;height:48px;border-radius:50%;background:rgba(251,238,196,.1);transition:background .3s,transform .4s var(--spring)}
.lb-close:hover{background:var(--gold);color:var(--maroon);transform:rotate(90deg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;
  font-size:2rem;color:var(--cream);background:rgba(251,238,196,.1);transition:background .3s,transform .4s var(--spring)}
.lb-nav:hover{background:var(--gold);color:var(--maroon)}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-prev:hover{transform:translateY(-50%) translateX(-4px)}
.lb-next:hover{transform:translateY(-50%) translateX(4px)}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .dock{display:flex}
  body{padding-bottom:78px}
  .foot-bar{padding-bottom:20px}
}

@media (min-width:560px){
  .masonry{columns:2}
  .reel{width:250px}
}

@media (min-width:760px){
  .masonry{columns:3}
  .story-grid{grid-template-columns:.92fr 1.08fr}
  .cater-grid{grid-template-columns:1.05fr .95fr}
  .hero-est{font-size:.74rem}
}

@media (min-width:1060px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex}
  .nav-burger{display:none}
  .nav-actions{margin-left:0}
}
@media (min-width:901px){
  :root{--nav-h:78px}
  .visit-grid{grid-template-columns:1.15fr .85fr}
  .visit-map{min-height:100%}
  .foot-grid{grid-template-columns:1.5fr .8fr 1.1fr}
  .reel{width:268px}
}

@media (min-width:1180px){
  .masonry{columns:4}
  .hero-inner{gap:24px}
}

/* Landscape phones: keep the hero from over-cropping */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding:calc(var(--nav-h) + 26px) 0 60px}
  .hero-logo img{width:min(60vw,340px)}
  .hero-scroll{display:none}
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal{opacity:1!important;transform:none!important}
  .hero-video{animation:none;transform:scale(1.02)}
  .marquee-track{animation:none;transform:none}
  .float,.hero-scroll{animation:none}
  .steam,.steam-mini i{display:none}
  .preloader{display:none}
}

/* Print */
@media print{
  .nav,.dock,.preloader,.scroll-progress,.hero-media,.reels-rail,.lightbox,.hero-scroll{display:none!important}
  body{background:#fff;color:#000}
  .section{padding:18px 0;background:#fff!important;color:#000!important}
  .h-sec .b-my,.h-sec .b-en,.vcard .b-my,.vcard p{color:#000!important}
}

/* =========================================================
   SMALL-PHONE FIT-UPS (nav overflow, hero density)
   ========================================================= */
@media (max-width:440px){
  .nav{gap:10px;padding-inline:14px}
  .nav-mark{width:34px;height:34px}
  .nav-name b{font-size:.92rem}
  .nav-name i{display:none}                 /* keep the bar from overflowing */
  .lt-labels{display:none}                  /* compact toggle: just the switch */
  .lang-toggle{padding:7px 9px}
  .nav-actions{gap:8px}
  .hero-est{font-size:.62rem;letter-spacing:.06em;gap:7px;flex-wrap:nowrap;white-space:nowrap;max-width:100%}
  .hero-est span:not(.rule){min-width:0;overflow:hidden;text-overflow:ellipsis}
  .hero-est .rule{width:clamp(10px,4vw,34px);flex:none}
  .hero-logo img{width:min(80vw,420px)}
  .hero-cta .btn{flex:1 1 100%;justify-content:center}
  .hero-stats{gap:14px}
  .hero-stats b{font-size:1.35rem}
  .hero-stats span{font-size:.62rem}
  .hero-stats .b-my{font-size:.68rem}
  .hero-scroll{display:none}
}
@media (max-width:370px){
  .hero-est .rule{display:none}
}
@media (max-width:340px){
  .nav-name{display:none}
}

/* =========================================================
   BRAND ICON SET — line art in the logo's geometry
   ========================================================= */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ico{
  width:1em;height:1em;display:block;
  fill:none;stroke:currentColor;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;overflow:visible;
}
.ico use{fill:inherit;stroke:inherit}
.ico[data-solid]{stroke-width:0;fill:currentColor}

/* --- nav wordmark: the shop's own lettering, not a system font --- */
.nav-word{height:26px;width:auto;display:block;transition:transform .6s var(--spring)}
.nav-brand:hover .nav-word{transform:translateY(-1px) scale(1.03)}

/* --- pillar icons: gold disc with a diamond halo --- */
.pill-ico{
  --sz:46px;
  width:var(--sz);height:var(--sz);display:grid;place-items:center;margin-bottom:12px;
  border-radius:14px;position:relative;color:var(--gold);
  background:linear-gradient(150deg,rgba(217,164,65,.2),rgba(217,164,65,.06));
  border:1px solid rgba(217,164,65,.42);
  transition:transform .55s var(--spring),background .35s,color .35s,border-color .35s,box-shadow .4s;
}
.pill-ico .ico{font-size:24px}
.pill-ico::after{
  content:"";position:absolute;inset:-5px;border-radius:18px;border:1px solid rgba(217,164,65,.3);
  opacity:0;transform:scale(.86) rotate(45deg);transition:opacity .5s,transform .6s var(--spring);
}
.pillars li:hover .pill-ico{
  transform:translateY(-4px) rotate(-6deg) scale(1.08);
  background:var(--gold);color:var(--maroon);border-color:var(--gold);
  box-shadow:0 12px 26px rgba(217,164,65,.42);
}
.pillars li:hover .pill-ico::after{opacity:1;transform:scale(1) rotate(0)}

/* --- visit card icons --- */
.vico{
  --sz:50px;
  width:var(--sz);height:var(--sz);display:grid;place-items:center;margin-bottom:12px;
  border-radius:15px;color:var(--gold-2);position:relative;
  background:linear-gradient(150deg,rgba(217,164,65,.18),rgba(217,164,65,.05));
  border:1px solid rgba(217,164,65,.36);
  transition:transform .55s var(--spring),background .35s,color .35s,border-color .35s,box-shadow .4s;
  font-size:0;
}
.vico .ico{font-size:25px}
.vcard:hover .vico{
  transform:translateY(-3px) rotate(-7deg) scale(1.1);
  background:var(--gold);color:var(--maroon);border-color:var(--gold);
  box-shadow:0 12px 28px rgba(217,164,65,.4);
}
.vcard.grab:hover .vico{background:#00B14F;border-color:#00B14F;color:#fff;box-shadow:0 12px 28px rgba(0,177,79,.42)}
.vcard.tiktok:hover .vico{background:#FF3B5C;border-color:#FF3B5C;color:#fff;box-shadow:0 12px 28px rgba(255,59,92,.4)}

/* --- dock icons --- */
.dock-ico{font-size:21px;margin-inline:auto}
.dock a span{display:grid;place-items:center;height:23px}
.dock a{color:var(--cream)}
.dock a:active .dock-ico{transform:scale(.9)}

/* --- reel sound badge --- */
.reel-sound .ico{font-size:16px;color:var(--cream)}

/* --- footer inline icon --- */
.ico-sm{font-size:15px;display:inline-block;vertical-align:-2px;color:var(--gold-2)}
.foot-made{display:inline-flex;align-items:center;gap:7px}

/* =========================================================
   NICHE CARD TREATMENT — gold diamond corners echoing the logo
   ========================================================= */
.dish,.vcard,.pillars li,.phone,.ph{position:relative}

/* diamond corner ticks, drawn from the logo's frame motif */
.dish::before,.dish::after,
.vcard::before,.vcard::after{
  content:"";position:absolute;width:9px;height:9px;pointer-events:none;
  border:1px solid var(--gold);transform:rotate(45deg);
  opacity:0;transition:opacity .45s var(--ease),transform .6s var(--spring);
}
.dish::before,.vcard::before{top:12px;left:12px}
.dish::after,.vcard::after{bottom:12px;right:12px}
.dish:hover::before,.vcard:hover::before{opacity:.85;transform:rotate(45deg) translate(-2px,-2px)}
.dish:hover::after,.vcard:hover::after{opacity:.85;transform:rotate(45deg) translate(2px,2px)}
.dish::before{z-index:3}

/* card entrance stagger — each card springs in a beat after the last */
.menu-grid > .dish.in{animation:cardIn .8s var(--spring) backwards}
.menu-grid > .dish:nth-child(1).in{animation-delay:.02s}
.menu-grid > .dish:nth-child(2).in{animation-delay:.10s}
.menu-grid > .dish:nth-child(3).in{animation-delay:.18s}
.menu-grid > .dish:nth-child(4).in{animation-delay:.26s}
.menu-grid > .dish:nth-child(5).in{animation-delay:.34s}
.menu-grid > .dish:nth-child(6).in{animation-delay:.42s}
@keyframes cardIn{
  0%{opacity:0;transform:translateY(34px) scale(.94)}
  60%{opacity:1;transform:translateY(-6px) scale(1.015)}
  100%{opacity:1;transform:none}
}
.pillars li.in,.visit-cards > .in{animation:cardIn .75s var(--spring) backwards}
.pillars li:nth-child(2).in{animation-delay:.08s}
.pillars li:nth-child(3).in{animation-delay:.16s}
.pillars li:nth-child(4).in{animation-delay:.24s}
.visit-cards > *:nth-child(2).in{animation-delay:.07s}
.visit-cards > *:nth-child(3).in{animation-delay:.14s}
.visit-cards > *:nth-child(4).in{animation-delay:.21s}
.visit-cards > *:nth-child(5).in{animation-delay:.28s}
.visit-cards > *:nth-child(6).in{animation-delay:.35s}
.visit-cards > *:nth-child(7).in{animation-delay:.42s}

/* chips get a springy pop-in */
.chips li{animation:chipIn .6s var(--spring) backwards;animation-play-state:paused}
.toppings.in .chips li{animation-play-state:running}
@keyframes chipIn{0%{opacity:0;transform:translateY(14px) scale(.8)}100%{opacity:1;transform:none}}
.chips li:nth-child(1){animation-delay:.04s}.chips li:nth-child(2){animation-delay:.09s}
.chips li:nth-child(3){animation-delay:.14s}.chips li:nth-child(4){animation-delay:.19s}
.chips li:nth-child(5){animation-delay:.24s}.chips li:nth-child(6){animation-delay:.29s}
.chips li:nth-child(7){animation-delay:.34s}.chips li:nth-child(8){animation-delay:.39s}
.chips li:nth-child(9){animation-delay:.44s}.chips li:nth-child(10){animation-delay:.49s}

/* gold sweep across a card on hover — a welcoming "shine" */
.dish .dish-img::before,.ph::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(251,238,196,.22) 50%,transparent 62%);
  transform:translateX(-120%);transition:transform .95s var(--ease);
}
.dish:hover .dish-img::before,.ph:hover::before{transform:translateX(120%)}

/* section headings get a small diamond flourish */
.sec-head .h-sec{position:relative}
.sec-head .h-sec::after{
  content:"";display:block;height:2px;width:0;margin-top:14px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold),rgba(217,164,65,0));
  transition:width 1.1s var(--ease) .18s;
}
.sec-head.center .h-sec::after{margin-inline:auto;background:linear-gradient(90deg,rgba(217,164,65,0),var(--gold),rgba(217,164,65,0))}
.sec-head .h-sec.in::after{width:min(190px,58%)}
@media (prefers-reduced-motion:reduce){.sec-head .h-sec::after{width:min(190px,58%);transition:none}}
.eyebrow::before{
  content:"";width:8px;height:8px;border:1px solid currentColor;transform:rotate(45deg);
  display:inline-block;flex:none;opacity:.85;
}

/* price tag gets a gentle attention pulse */
.tag.price{animation:tagPulse 3.4s ease-in-out infinite}
@keyframes tagPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(217,164,65,.5)}
  50%{box-shadow:0 0 0 9px rgba(217,164,65,0)}
}

/* buttons: a soft welcoming glow that breathes */
.btn-gold{animation:goldBreathe 4.5s ease-in-out infinite}
@keyframes goldBreathe{
  0%,100%{box-shadow:0 8px 26px rgba(217,164,65,.34)}
  50%{box-shadow:0 10px 34px rgba(217,164,65,.55)}
}
.btn:hover{animation:none}

/* reels: playing card gets a warm gold ring */
.phone.playing{border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,164,65,.25),var(--sh-2)}

@media (prefers-reduced-motion:reduce){
  .menu-grid > .dish.in,.pillars li.in,.visit-cards > .in,.chips li{animation:none!important}
  .tag.price,.btn-gold{animation:none!important}
  .dish .dish-img::before,.ph::before{display:none}
}

/* =========================================================
   TYPE PASS 2 — hand-crafted, warm, family teahouse
   Burmese headings use the calligraphic Noto Serif Myanmar so they
   sit next to the shop's own lettering; body copy uses Padauk, which
   is rounder and friendlier at small sizes. Latin display gets
   Fraunces' SOFT/WONK axes; accents use a marker hand.
   ========================================================= */
body{font-family:var(--f-ui);letter-spacing:.002em}
.t-my,.b-my{font-family:var(--f-my);line-height:1.9}

/* --- Burmese headings: calligraphic --- */
.h-sec .b-my,.h-sub .b-my,.hero-title .b-my{
  font-family:var(--f-my-dis);font-weight:900;letter-spacing:0;
}
.h-sec .b-my{line-height:1.55}
.dish-body h3 .b-my,.vcard .b-my,.reel h3 .b-my,
.pillars .b-my,.foot-links .b-my,.foot-contact .b-my,.art-badge .b-my{
  font-family:var(--f-my-dis);font-weight:800;
}

/* --- Latin display: hand-cut --- */
.h-sec .b-en,.h-sub .b-en,.hero-title .b-en,.dish-body h3 .b-en,
.reel h3 .b-en,.pillars .b-en,.vcard .b-en,.foot-links .b-en,
.foot-contact .b-en,.art-badge .b-en,.cater-list .b-en{
  font-family:var(--f-dis);font-variation-settings:var(--wonk);
}
.hero-stats b{font-family:var(--f-dis);font-variation-settings:var(--wonk)}

/* --- handwritten accents: the warm, human touches --- */
.eyebrow,.tag,.tag.price,.tag.price small,.hero-est,
.hero-stats span,.dock a i,.hero-scroll,.chips .b-en,
.art-badge .b-en,.foot-made,.vlink{
  font-family:var(--f-hand);
}
.eyebrow{
  font-size:.9rem;font-weight:700;letter-spacing:.06em;text-transform:none;
}
.eyebrow .b-my{font-family:var(--f-my);font-size:.95rem;font-weight:700}
.hero-est{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:none}
.hero-stats span{font-size:.76rem;letter-spacing:.02em;text-transform:none;font-weight:600}
.hero-stats .b-my{font-family:var(--f-my);font-size:.76rem}
.tag{font-family:var(--f-hand);font-size:.82rem;font-weight:700;letter-spacing:0}
.tag .t-my{font-family:var(--f-my);font-weight:700}
.tag.price{font-family:var(--f-hand);font-weight:700;font-size:1rem}
.tag.price small{font-family:var(--f-hand);font-weight:600}
.tag.price small .t-my{font-family:var(--f-my)}
.dock a i{font-size:.7rem;font-weight:700}
.dock a i.t-my{font-family:var(--f-my)}
.hero-scroll{font-family:var(--f-hand);font-size:.76rem;letter-spacing:.02em}
.hero-scroll .b-my{font-family:var(--f-my)}
.chips .b-en{font-family:var(--f-hand);font-size:.76rem;letter-spacing:.02em;text-transform:none;font-weight:600}
.vlink{font-family:var(--f-hand);font-weight:700;font-size:.86rem;letter-spacing:.01em}
.vlink .t-my{font-family:var(--f-my);font-weight:700}
.art-badge .b-en{font-family:var(--f-hand);font-style:normal;font-weight:700;font-size:.78rem}
.foot-made{font-family:var(--f-hand);font-weight:600}
.foot-made .t-my{font-family:var(--f-my)}

/* Padauk sits a little small — nudge Burmese body copy up so the two
   scripts read at the same optical size */
.t-my{font-size:1.04em}
.rich p .t-my,.sec-lede .t-my,.hero-sub .t-my{font-size:1.06em;line-height:1.95}

/* =========================================================
   MENU PASS 2 — cream paper cards pinned on the maroon wall
   ========================================================= */
.menu-grid{gap:clamp(18px,2.6vw,26px)}
.dish{
  background:linear-gradient(168deg,#FFFaf0 0%,var(--paper-2) 100%);
  border:1px solid rgba(63,23,15,.12);
  border-radius:26px;
  box-shadow:0 16px 40px rgba(20,7,4,.34);
  overflow:hidden;
}
.dish:hover{
  transform:translateY(-13px) rotate(-.5deg) scale(1.02);
  border-color:rgba(217,164,65,.75);
  box-shadow:0 30px 66px rgba(20,7,4,.46);
}
.dish:nth-child(even):hover{transform:translateY(-13px) rotate(.5deg) scale(1.02)}

/* photo sits in a rounded window with a warm mat around it */
.dish-img{
  aspect-ratio:1/1;margin:12px 12px 0;border-radius:18px;
  border:1px solid rgba(63,23,15,.1);background:var(--sand);
}
.dish-img::after{
  background:linear-gradient(180deg,transparent 55%,rgba(63,23,15,.28) 100%);
}
.dish-body{margin-top:0;padding:16px 20px 22px;color:var(--maroon)}

/* name, then a dotted leader, then the price — like a written menu */
.dish-head{display:flex;align-items:baseline;gap:9px;width:100%}
.dish-head .b-my{display:inline;flex:0 1 auto;min-width:0}
.dish-body h3 .b-my{color:var(--maroon);font-size:1.2rem;line-height:1.55}
.dish-body h3 .b-en{color:var(--wood);opacity:.9;font-size:.86rem;margin-top:1px}
.dish-body p{color:var(--maroon);opacity:.74;margin-top:10px}

.leader{
  flex:1 1 auto;height:1px;min-width:14px;align-self:baseline;position:relative;top:-.32em;
  background-image:radial-gradient(circle,rgba(63,23,15,.42) 1px,transparent 1px);
  background-size:6px 2px;background-repeat:repeat-x;opacity:.8;
}
.dish-price{
  flex:none;font-family:var(--f-hand);font-weight:700;
  font-size:1.12rem;color:var(--maroon);white-space:nowrap;line-height:1.3;
}
.dish-price small{display:block;font-size:.66rem;font-weight:600;opacity:.6;text-align:right}
.dish-price small .t-my{font-family:var(--f-my)}
.dish-price.ask{font-size:.92rem;opacity:.72}

/* a hand-drawn underline that draws itself in when the card arrives */
.dish-body h3::after{
  content:"";display:block;height:5px;width:0;margin-top:7px;
  background:no-repeat left center/100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 6' preserveAspectRatio='none'%3E%3Cpath d='M1 4.2C22 1.6 44 1.2 66 2.4c18 1 35 2.2 53 1.1' fill='none' stroke='%23D9A441' stroke-width='2.1' stroke-linecap='round'/%3E%3C/svg%3E");
  transition:width .7s var(--ease) .15s;
}
.dish.in .dish-body h3::after{width:64px}
.dish:hover .dish-body h3::after{width:100%}

/* tags read as pencilled notes on the card */
.dish .tag{
  background:rgba(217,164,65,.2);border:1px dashed rgba(63,23,15,.32);color:var(--maroon);
}
.dish .tag.price{background:var(--gold);border-style:solid;border-color:var(--gold);color:var(--maroon)}
.dish::before,.dish::after{border-color:var(--wood)}
.dish .steam-mini i{background:linear-gradient(to top,rgba(255,255,255,.95),transparent)}

/* pin the card to the wall with a little brass tack */
.dish .tack{
  position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  width:16px;height:16px;border-radius:50%;z-index:4;
  background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold) 55%,#9d7327 100%);
  box-shadow:0 3px 7px rgba(20,7,4,.5),inset 0 -1px 2px rgba(0,0,0,.28);
  transition:transform .5s var(--spring);
}
.dish:hover .tack{transform:translateX(-50%) scale(1.16) rotate(12deg)}

@media (max-width:560px){
  .dish-img{aspect-ratio:4/3}
  .dish-price{font-size:1.05rem}
}

/* =========================================================
   TEA GUIDE — how Yangon actually orders a cup
   ========================================================= */
.sec-tea{
  background:
    radial-gradient(90% 60% at 12% 0%,rgba(217,164,65,.20),transparent 58%),
    radial-gradient(80% 60% at 92% 100%,rgba(173,119,98,.22),transparent 60%),
    linear-gradient(170deg,var(--paper) 0%,var(--sand) 100%);
  color:var(--maroon);
}
.sec-tea::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M36 6 66 36 36 66 6 36z' fill='none' stroke='%233F170F' stroke-opacity='.07' stroke-width='1'/%3E%3Cpath d='M36 26 46 36 36 46 26 36z' fill='none' stroke='%23D9A441' stroke-opacity='.13' stroke-width='1'/%3E%3C/svg%3E");
  mask-image:radial-gradient(120% 80% at 50% 40%,#000 12%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 40%,#000 12%,transparent 78%);
}
.sec-tea > *{position:relative}
.sec-head.center{margin-inline:auto;text-align:center;max-width:760px}
.sec-head.center .eyebrow{justify-content:center}
.sec-head.center .sec-lede{margin-inline:auto}

.tea-leaf{position:absolute;color:var(--wood);opacity:.13;pointer-events:none;font-size:150px}
.tea-leaf .ico{stroke-width:1}
.tea-leaf.l1{top:6%;left:-42px;transform:rotate(-18deg);animation:floaty 9s ease-in-out infinite}
.tea-leaf.l2{bottom:5%;right:-46px;transform:rotate(150deg);animation:floaty 11s ease-in-out infinite reverse}

.tea-grid{
  display:grid;gap:16px;margin-top:clamp(26px,4vw,40px);
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
}
.tea-card{
  position:relative;display:grid;align-content:start;gap:2px;
  padding:24px 20px 20px;border-radius:24px;
  background:linear-gradient(168deg,#FFFCF4 0%,#FFF4E0 100%);
  border:1px solid rgba(63,23,15,.12);box-shadow:0 12px 30px rgba(63,23,15,.13);
  transition:transform .55s var(--spring),box-shadow .45s,border-color .35s;
}
.tea-card:hover{
  transform:translateY(-10px) rotate(-.6deg) scale(1.025);
  border-color:rgba(217,164,65,.75);box-shadow:0 26px 54px rgba(63,23,15,.22);
}
.tea-card:nth-child(even):hover{transform:translateY(-10px) rotate(.6deg) scale(1.025)}
.tea-ico{
  width:46px;height:46px;display:grid;place-items:center;margin-bottom:10px;
  border-radius:14px;color:var(--gold);
  background:linear-gradient(150deg,rgba(217,164,65,.22),rgba(217,164,65,.07));
  border:1px solid rgba(217,164,65,.45);
  transition:transform .55s var(--spring),background .35s,color .3s;
}
.tea-ico .ico{font-size:25px}
.tea-card:hover .tea-ico{transform:rotate(-8deg) scale(1.1);background:var(--gold);color:var(--maroon)}
.tea-card b{font-family:var(--f-my-dis);font-weight:800;font-size:1.28rem;line-height:1.5;display:block}
.tea-card i{
  font-family:var(--f-hand);font-style:normal;font-weight:700;font-size:.86rem;
  color:var(--wood);display:block;margin-bottom:9px;letter-spacing:.02em;
}
.tea-card p{font-size:.9rem;line-height:1.7;opacity:.78;margin-bottom:13px}
.tea-card p .t-my{font-size:.92rem;line-height:1.9}

/* strength meters drawn as the logo's diamonds */
.meter{display:flex;align-items:center;gap:5px;margin-top:5px}
.meter::before{
  content:attr(data-label-en);flex:none;width:52px;
  font-family:var(--f-hand);font-size:.72rem;font-weight:700;color:var(--wood);opacity:.85;
}
[data-lang="my"] .meter::before{content:attr(data-label-my);font-family:var(--f-my)}
.meter i{
  width:10px;height:10px;flex:none;transform:rotate(45deg);border-radius:2px;
  border:1px solid rgba(63,23,15,.34);background:transparent;
  transition:background .4s var(--ease),transform .5s var(--spring),border-color .3s;
}
.meter i.on{background:var(--gold);border-color:var(--gold)}
.tea-card:hover .meter i.on{transform:rotate(45deg) scale(1.22)}
.tea-card:hover .meter i.on:nth-child(2){transition-delay:.04s}
.tea-card:hover .meter i.on:nth-child(3){transition-delay:.08s}
.tea-card:hover .meter i.on:nth-child(4){transition-delay:.12s}
.tea-card:hover .meter i.on:nth-child(5){transition-delay:.16s}

.tea-note{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  margin:clamp(26px,4vw,38px) auto 0;max-width:640px;text-align:center;
  padding:16px 26px;border-radius:26px;
  background:rgba(63,23,15,.06);border:1px dashed rgba(63,23,15,.28);
  font-family:var(--f-hand);font-size:.98rem;font-weight:600;
}
.tea-note .t-my{font-family:var(--f-my);font-weight:700}
.tea-note .ico{font-size:20px;color:var(--gold);flex:none}
.tea-note b{font-weight:700;color:var(--maroon)}

@media (max-width:520px){
  .tea-grid{grid-template-columns:1fr}
  .tea-leaf{font-size:110px}
}

/* --- back to top (the page is a long scroll by design) --- */
.to-top{
  position:fixed;right:22px;bottom:26px;z-index:99;display:none;
  width:50px;height:50px;border-radius:50%;place-items:center;
  color:var(--maroon);background:var(--gold);
  box-shadow:0 10px 28px rgba(217,164,65,.45);
  opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:opacity .4s var(--ease),transform .55s var(--spring),background .3s;
}
.to-top .ico{font-size:22px;stroke-width:2.2}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{transform:translateY(-4px) scale(1.09);background:var(--gold-2)}
@media (min-width:901px){.to-top{display:grid}}

/* =========================================================
   BLUR-UP PLACEHOLDERS
   Each photo carries a 24px inline preview of itself, so a card is
   never an empty box while the real image is still on the wire —
   which is what a Yangon visitor on mobile data sees most.
   ========================================================= */
.dish-img[style*="--lqip"],
.ph[style*="--lqip"]{
  background-image:var(--lqip);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
.dish-img[style*="--lqip"]::before,
.ph[style*="--lqip"]::before{
  /* keep the existing shine sweep, but sit it above the blurred preview */
  z-index:2;
}
.dish-img[style*="--lqip"] img,
.ph[style*="--lqip"] img{
  animation:sharpen .55s var(--ease) both;
}
@keyframes sharpen{
  from{opacity:0;filter:blur(8px);transform:scale(1.04)}
  to{opacity:1;filter:none;transform:none}
}
/* the blurred preview should read as texture, not detail */
.dish-img[style*="--lqip"]{background-color:var(--sand)}
.ph[style*="--lqip"]{background-color:var(--maroon-3)}

@media (prefers-reduced-motion:reduce){
  .dish-img[style*="--lqip"] img,.ph[style*="--lqip"] img{animation:none}
}

/* =========================================================
   TEA PICKER — pick your cup, or dial in the one you want
   The <ul class="tea-grid"> in the markup is the data source and the
   no-JS fallback; everything here styles what app.js builds from it.
   ========================================================= */
.tea-grid[hidden]{display:none}
.tea-picker{
  display:grid;grid-template-columns:minmax(0,1fr);  /* a wide token rail must scroll, not stretch the column */
  gap:clamp(16px,2.6vw,24px);margin-top:clamp(24px,4vw,38px);
}
.tea-picker > *{min-width:0}

/* ---- the stage ---- */
.tea-stage{
  position:relative;display:grid;place-items:center;width:min(100%,720px);margin-inline:auto;
  padding:clamp(28px,6vw,52px) 0 clamp(22px,4vw,36px);
}
.stage-glow{
  position:absolute;width:min(92vw,470px);aspect-ratio:1;border-radius:50%;z-index:0;
  background:radial-gradient(circle,rgba(217,164,65,.42),rgba(217,164,65,0) 66%);
  filter:blur(26px);animation:pulseGlow 5.5s ease-in-out infinite;pointer-events:none;
}
.stage-frame{
  position:absolute;width:min(94vw,505px);aspect-ratio:1;z-index:0;pointer-events:none;
  border:1px solid rgba(217,164,65,.45);transform:rotate(45deg);border-radius:44px;
  animation:frameSpin 34s linear infinite;
}
.stage-frame::after{content:"";position:absolute;inset:14px;border:1px solid rgba(217,164,65,.22);border-radius:34px}
@keyframes frameSpin{from{transform:rotate(45deg)}to{transform:rotate(405deg)}}

.stage-card{
  --tea-top:#C89050;--tea-mid:#A96F36;--tea-bot:#6F4322;
  position:relative;z-index:1;width:min(100%,430px);text-align:center;
  display:grid;justify-items:center;gap:3px;
  padding:24px 22px 22px;border-radius:30px;
  background:linear-gradient(168deg,#FFFDF6 0%,#FFF2DC 100%);
  border:1px solid rgba(217,164,65,.5);
  box-shadow:0 26px 60px rgba(63,23,15,.26),0 0 0 6px rgba(255,255,255,.5);
  isolation:isolate;
}
/* the card picks up a wash of whatever is currently in the glass */
.stage-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(120% 90% at 22% 18%,var(--tea-top),transparent 62%);
  opacity:.17;transition:background .6s var(--ease);
}
.stage-card.swap{animation:stageIn .62s var(--spring) both}
@keyframes stageIn{
  0%{opacity:0;transform:translateY(20px) scale(.9) rotate(-1.4deg)}
  55%{opacity:1;transform:translateY(-6px) scale(1.03) rotate(.5deg)}
  100%{opacity:1;transform:none}
}
.stage-index{
  position:absolute;top:14px;right:18px;font-family:var(--f-hand);font-weight:700;
  font-size:.78rem;color:var(--wood);opacity:.62;letter-spacing:.06em;
}
.stage-index b{color:var(--gold);font-size:1.05rem}
.stage-index i{font-style:normal;opacity:.5;margin:0 3px}
.stage-body{display:grid;justify-items:center;gap:3px;min-width:0}

/* ---- the glass: colours, foam and the sweet layer all come from data-* ---- */
.stage-cup{position:relative;display:grid;place-items:center;margin-bottom:4px}
.cup-halo{
  position:absolute;width:172px;aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(217,164,65,.5) 0%,rgba(217,164,65,.22) 42%,transparent 72%);
  filter:blur(20px);animation:pulseGlow 6s ease-in-out infinite;
}
.cup-svg{width:clamp(112px,26vw,164px);height:auto;overflow:visible}
.cup-shadow{fill:rgba(63,23,15,.16)}
.cup-empty{fill:rgba(255,255,255,.55)}
.cup-liquid{transition:none}
.cup-sweet{fill:rgba(255,246,222,.55)}
.cup-swirl{fill:rgba(255,246,222,.17);animation:swirl 7s ease-in-out infinite}
.cup-swirl.s2{animation-duration:9s;animation-direction:reverse}
@keyframes swirl{0%,100%{transform:translateX(-5px) scaleX(.95)}50%{transform:translateX(6px) scaleX(1.05)}}
.cup-foam{fill:rgba(255,250,236,.8)}
.cup-shine{fill:rgba(255,255,255,.34)}
.cup-glass{fill:none;stroke:rgba(63,23,15,.5);stroke-width:2.4;stroke-linejoin:round}
.cup-rim,.cup-saucer{fill:none;stroke:rgba(63,23,15,.5);stroke-width:2.4;stroke-linecap:round}
.cup-saucer{stroke:var(--gold);stroke-width:3}
.cup-pour{transform-origin:50% 100%}
.stage-card.swap .cup-pour{animation:pour .75s var(--ease) both .06s}
@keyframes pour{0%{transform:scaleY(0)}72%{transform:scaleY(1.04)}100%{transform:scaleY(1)}}
.stage-card.swap .cup-foam{animation:foamIn .5s var(--spring) both .5s}
@keyframes foamIn{from{opacity:0;transform:scaleX(.4)}to{opacity:1;transform:none}}
.cup-foam{transform-origin:70px 45px}

/* a real photo, when the shop has one, sits in front of the drawn glass */
.cup-photo{
  position:absolute;width:clamp(118px,29vw,152px);aspect-ratio:1;object-fit:cover;
  border-radius:50%;border:3px solid var(--gold);box-shadow:0 14px 30px rgba(63,23,15,.32);
}
.stage-cup.has-photo .cup-svg,.stage-cup.has-photo .ssteam{opacity:0}

.ssteam{position:absolute;top:-6px;display:flex;gap:9px;pointer-events:none}
.ssteam i{width:5px;height:24px;border-radius:99px;
  background:linear-gradient(to top,rgba(217,164,65,.9),transparent);filter:blur(2px);
  animation:riseSteam 2.6s ease-in-out infinite}
.ssteam i:nth-child(2){animation-delay:.55s}
.ssteam i:nth-child(3){animation-delay:1.1s}

.stage-my{font-family:var(--f-my-dis);font-weight:800;font-size:clamp(1.5rem,5.6vw,2.1rem);line-height:1.5;
  color:var(--maroon);max-width:100%;overflow-wrap:break-word}
.stage-en{font-family:var(--f-hand);font-style:normal;font-weight:700;font-size:1rem;color:var(--wood);letter-spacing:.03em}
.stage-desc{margin-top:8px;font-size:.96rem;line-height:1.75;opacity:.8;max-width:34ch}
.stage-desc .t-my{font-size:1rem;line-height:1.95}

.stage-meters{display:grid;gap:7px;margin:15px 0 4px;justify-items:center}
.stage-meters .meter{gap:6px}
.stage-meters .meter::before{width:56px;text-align:right;font-size:.76rem}
.stage-meters .meter i{width:13px;height:13px;border-width:1.5px}
.stage-card.swap .stage-meters .meter i.on{animation:pipIn .5s var(--spring) both;animation-delay:calc(.22s + var(--k) * .07s)}
@keyframes pipIn{0%{transform:rotate(45deg) scale(0);opacity:0}70%{transform:rotate(45deg) scale(1.32);opacity:1}100%{transform:rotate(45deg) scale(1);opacity:1}}
.stage-cta{margin-top:12px}

/* ---- arrows either side of the stage ---- */
.stage-arrow{
  position:absolute;top:50%;translate:0 -50%;z-index:3;
  width:46px;height:46px;border-radius:50%;display:none;place-items:center;
  color:var(--maroon);background:rgba(255,253,246,.9);border:1px solid rgba(217,164,65,.55);
  box-shadow:0 10px 24px rgba(63,23,15,.18);
  transition:transform .45s var(--spring),background .3s,box-shadow .3s;
}
.stage-arrow .ico{font-size:24px;stroke-width:2}
.stage-arrow.prev{left:0}
.stage-arrow.next{right:0}
.stage-arrow:hover{background:var(--gold);transform:scale(1.12)}
.stage-arrow.prev:hover{transform:scale(1.12) translateX(-3px)}
.stage-arrow.next:hover{transform:scale(1.12) translateX(3px)}
@media (min-width:620px){.stage-arrow{display:grid}}

/* wider screens: pour on the left, read on the right */
@media (min-width:760px){
  .stage-card{
    width:min(100%,620px);grid-template-columns:auto 1fr;align-items:center;
    text-align:left;justify-items:start;gap:0 26px;padding:30px 34px 30px 28px;
  }
  .stage-body{justify-items:start;text-align:left}
  .stage-desc{margin-inline:0;max-width:40ch}
  .stage-meters{justify-items:start}
  .stage-arrow.prev{left:-6px}
  .stage-arrow.next{right:-6px}
}

/* ---- the token rail ---- */
.tea-rail-wrap{position:relative}
.tea-rail-wrap::before,.tea-rail-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:36px;z-index:2;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.tea-rail-wrap::before{left:0;background:linear-gradient(90deg,var(--paper-2),transparent)}
.tea-rail-wrap::after{right:0;background:linear-gradient(270deg,var(--paper-2),transparent)}
.tea-rail-wrap.scrollable::before,.tea-rail-wrap.scrollable::after{opacity:.9}
.tea-rail-wrap.at-start::before{opacity:0}
.tea-rail-wrap.at-end::after{opacity:0}

.tea-rail{
  display:flex;gap:clamp(6px,1.6vw,14px);justify-content:flex-start;align-items:stretch;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  padding:6px 4px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.tea-rail::-webkit-scrollbar{display:none}
@media (min-width:720px){.tea-rail{justify-content:center;flex-wrap:wrap}}

.tea-token{
  flex:none;scroll-snap-align:center;width:clamp(76px,19vw,100px);overflow:hidden;
  display:grid;grid-template-rows:auto auto auto;justify-items:center;align-content:start;gap:4px;
  padding:6px 2px;opacity:.5;filter:saturate(.55);
  transition:opacity .45s var(--ease),filter .45s,transform .6s var(--spring);
  transform:scale(.9);
}
.tea-token:hover{opacity:.85;filter:none;transform:scale(.97) translateY(-3px)}
.tea-token.is-active{opacity:1;filter:none;transform:scale(1.06) translateY(-4px)}

.token-gem{
  position:relative;width:clamp(50px,13vw,62px);aspect-ratio:1;display:grid;place-items:center;
  color:var(--wood);border-radius:16px;transform:rotate(45deg);overflow:hidden;
  background:linear-gradient(150deg,rgba(217,164,65,.2),rgba(217,164,65,.05));
  border:1.5px solid rgba(63,23,15,.22);
  transition:color .35s,border-color .35s,box-shadow .45s;
}
/* each token carries its own brew colour, so the rail reads light → dark */
.token-brew{
  position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(150deg,var(--tea-mid),var(--tea-bot));
}
.token-gem .ico{position:relative;transform:rotate(-45deg);font-size:clamp(23px,6vw,28px)}
.tea-token.is-active .token-gem{
  color:var(--cream);border-color:var(--gold);
  box-shadow:0 12px 26px rgba(217,164,65,.5);
}
.tea-token.is-active .token-brew{opacity:1}
.token-ring{
  position:absolute;inset:-7px;border-radius:20px;pointer-events:none;z-index:2;
  border:1.5px dashed rgba(217,164,65,.85);opacity:0;transform:scale(.8);
  transition:opacity .4s,transform .6s var(--spring);
}
.tea-token.is-active .token-ring{opacity:1;transform:none;animation:ringSpin 12s linear infinite}
@keyframes ringSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
/* the ring lives outside the gem's clip */
.tea-token{position:relative}
.tea-token .token-ring{position:absolute;inset:auto;top:2px;left:50%;margin-left:calc(clamp(50px,13vw,62px) / -2 - 7px);
  width:calc(clamp(50px,13vw,62px) + 14px);height:calc(clamp(50px,13vw,62px) + 14px)}

.token-my{font-family:var(--f-my-dis);font-weight:800;font-size:.8rem;line-height:1.55;color:var(--maroon);
  text-align:center;text-wrap:balance;max-width:100%;min-width:0;overflow-wrap:break-word;hyphens:none}
.token-en{font-family:var(--f-hand);font-size:.64rem;font-weight:700;color:var(--wood);opacity:.72;
  text-align:center;line-height:1.3;max-width:100%;min-width:0;overflow-wrap:break-word}
.tea-token.is-active .token-en{opacity:1;color:var(--gold)}

.tea-hint{
  text-align:center;font-family:var(--f-hand);font-weight:600;font-size:.86rem;
  color:var(--wood);opacity:.72;
}
.tea-hint .t-my{font-family:var(--f-my)}

/* ---- the taste dial ---- */
.taste{
  width:min(100%,640px);margin:clamp(6px,2vw,14px) auto 0;
  padding:clamp(18px,3.4vw,26px) clamp(16px,3vw,30px);
  border-radius:var(--r-l);text-align:center;
  background:linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,248,234,.5));
  border:1px dashed rgba(63,23,15,.24);
}
.taste-head{
  display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;
  font-family:var(--f-hand);font-weight:700;font-size:.95rem;color:var(--wood);margin-bottom:14px;
}
.taste-head .t-my{font-family:var(--f-my);line-height:1.8}
.taste-head .ico{font-size:19px;color:var(--gold);flex:none}

.dial{display:grid;gap:14px;justify-content:center}
.dial-row{
  display:grid;grid-template-columns:minmax(58px,auto) auto minmax(42px,auto);
  align-items:center;gap:clamp(8px,2.4vw,16px);
}
.dial-row.nudge .pip.on:last-of-type{animation:pipPop .45s var(--spring)}
@keyframes pipPop{0%{transform:rotate(45deg) scale(1)}45%{transform:rotate(45deg) scale(1.45)}100%{transform:rotate(45deg) scale(1)}}
.dial-label{
  font-family:var(--f-hand);font-weight:700;font-size:.82rem;color:var(--wood);text-align:right;
}
[data-lang="my"] .dial-label{font-family:var(--f-my);font-size:.88rem}
.dial-pips{display:flex;gap:7px;align-items:center;border-radius:999px;padding:5px 7px;transition:background .3s}
.dial-pips:focus-visible{background:rgba(217,164,65,.18)}
.pip{
  position:relative;width:18px;height:18px;padding:0;flex:none;transform:rotate(45deg);border-radius:3px;
  border:1.5px solid rgba(63,23,15,.3);background:transparent;
  transition:background .35s var(--ease),border-color .3s,transform .45s var(--spring);
}
.pip::after{content:"";position:absolute;inset:-11px}   /* finger-sized target */
.pip:hover{transform:rotate(45deg) scale(1.18);border-color:var(--gold)}
.pip.on{background:var(--gold);border-color:var(--gold)}
.dial-num{font-family:var(--f-hand);font-weight:700;font-size:.82rem;color:var(--wood);opacity:.72;text-align:left}
.dial-num b{color:var(--gold);font-size:1rem}

.taste-out{
  margin-top:15px;font-family:var(--f-hand);font-weight:700;font-size:.95rem;color:var(--maroon);
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.taste-out .t-my{font-family:var(--f-my);line-height:1.8}
.taste-pick{
  font-family:var(--f-hand);font-weight:700;color:var(--maroon);
  padding:4px 14px;border-radius:999px;background:rgba(217,164,65,.24);
  border:1px solid rgba(217,164,65,.6);
}

@media (max-width:359px){
  .dial-row{grid-template-columns:1fr;justify-items:center;gap:2px}
  .dial-label{text-align:center}
  .dial-num{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .stage-card.swap,.stage-card.swap .cup-pour,.stage-card.swap .cup-foam,
  .stage-card.swap .stage-meters .meter i.on{animation:none!important}
  .stage-frame,.token-ring,.stage-glow,.ssteam,.cup-swirl{animation:none!important}
  .ssteam{display:none}
}

/* =========================================================
   POINTER MOTION — magnetic buttons, card tilt
   Every rule here is additive: the custom properties default to
   zero, so nothing moves until JS sets them, and JS only sets them
   on a fine pointer with motion allowed.
   ========================================================= */
.btn.bounce,.stage-cta{
  translate:var(--pull-x,0) var(--pull-y,0);
  transition:transform .45s var(--spring),box-shadow .35s var(--ease),
             background .3s,color .3s,border-color .3s,translate .35s var(--ease);
}
.dish,.vcard,.pillars li,.tea-token,.ph{
  transform-style:preserve-3d;
  rotate:none;
}
@media (hover:hover) and (pointer:fine){
  .dish:hover,.vcard:hover,.pillars li:hover,.ph:hover{
    transform:perspective(900px)
              rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))
              translateY(-10px) scale(1.02);
  }
  .dish:nth-child(even):hover{
    transform:perspective(900px)
              rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))
              translateY(-10px) scale(1.02);
  }
  .tea-token:hover{
    transform:perspective(700px)
              rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))
              scale(.99) translateY(-3px);
  }
  .tea-token.is-active:hover{
    transform:perspective(700px)
              rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))
              scale(1.08) translateY(-5px);
  }
}

/* hero parallax is driven from JS; keep it composited */
.hero-inner{will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .btn.bounce,.stage-cta{translate:none!important}
  .dish,.vcard,.pillars li,.tea-token,.ph{transform:none!important}
  .hero-inner{transform:none!important;opacity:1!important}
}