/* D Eastern Hotel: quiet, historic, elegant.
   Like an old grand-hotel brochure: cream paper, ink, muted gold hairlines, generous space,
   numbered chapters, photographic "plates". Malaysian and Peranakan motifs appear only as fine gold line work.
   Motion is slow and gentle, and is switched off for visitors who prefer reduced motion. */
:root{
  --paper:#f6f1e7; --paper-2:#efe7d8; --card:#fbf8f2;
  --ink:#2b2620; --ink-soft:#5e5448; --muted:#74675a;
  --gold:#a88a55; --gold-soft:#c7ad7c; --line:#d9cdb6;
  --green:#2f4a3e; --green-deep:#22362d; --wood:#3d2c22;
  --display:"Cormorant Garamond",Georgia,"Songti SC","Noto Serif SC",serif;
  --serif:"Source Serif 4",Georgia,"Songti SC","Noto Serif SC",serif;
  --sans:"Source Sans 3",-apple-system,"Segoe UI",Roboto,Arial,"PingFang SC","Microsoft YaHei",sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --paper-tex:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.33 0 0 0 0 0.25 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font:17px/1.75 var(--serif);color:var(--ink);background:var(--paper-tex),var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.15;margin:0 0 .4em;color:var(--ink)}
h2{font-size:clamp(32px,4vw,48px);letter-spacing:.01em}
h3{font-size:26px}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.narrow{max-width:800px}
.section{padding:120px 0;position:relative}
.paper{background:var(--paper-tex),var(--paper)}
.paper-2{background:var(--paper-tex),var(--paper-2)}
.intro{color:var(--ink-soft);font-size:18.5px;max-width:640px;margin:0 0 40px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.note{color:var(--muted);font-size:15px;font-style:italic;margin-top:24px}
section[id]{scroll-margin-top:70px}

/* ---------- fine gold line art ---------- */
.rule{display:block;width:200px;height:24px;color:var(--gold)}
.emblem{width:46px;height:46px;color:var(--gold);margin-bottom:22px}
.engraving{width:100%;height:auto;color:var(--gold)}
.monogram{width:40px;height:40px;color:var(--gold)}

/* ---------- chapter headings ---------- */
.chapter{text-align:center;margin:0 auto 56px}
.chapter .numeral{display:block;font-family:var(--display);font-size:15px;letter-spacing:.4em;color:var(--gold);margin-bottom:10px}
.chapter h2{margin-bottom:14px}
.chapter .rule{margin:0 auto}
.chapter.light{text-align:left;margin-left:0}
.chapter.light h2{color:var(--card)}
.chapter.light .rule{margin:0}

/* ---------- header: transparent over the photo, paper after scrolling ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .5s var(--ease),box-shadow .5s var(--ease),color .5s}
.bar{display:flex;align-items:center;gap:28px;height:76px;transition:height .5s var(--ease)}
.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--card);font-family:var(--display);font-size:21px;letter-spacing:.14em;text-transform:uppercase}
.wordmark .monogram{color:var(--gold-soft)}
.menu{display:flex;gap:26px;margin-left:auto}
.menu a,.langs a{color:rgba(251,248,242,.85);text-decoration:none;font:500 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;position:relative}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transition:transform .4s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.langs{display:flex;gap:12px}
.langs a{font-size:12.5px;opacity:.75}
.langs a[aria-current]{opacity:1;color:var(--gold-soft)}
.top.scrolled{background:rgba(246,241,231,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line)}
.top.scrolled .bar{height:64px}
.top.scrolled .wordmark,.top.scrolled .menu a,.top.scrolled .langs a{color:var(--ink)}
.top.scrolled .langs a[aria-current]{color:var(--gold)}
.top.scrolled .btn-line{color:var(--ink);border-color:var(--gold)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 26px;font:600 14px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .35s var(--ease),color .35s var(--ease),border-color .35s}
.btn .ic{width:18px;height:18px}
.btn-small{padding:10px 18px;font-size:12.5px}
.btn-solid{background:var(--green);color:var(--card)}
.btn-solid:hover{background:var(--green-deep)}
.btn-ghost{border-color:rgba(251,248,242,.7);color:var(--card)}
.btn-ghost:hover{background:rgba(251,248,242,.12)}
.btn-line{border-color:var(--gold-soft);color:var(--card)}
.btn-line:hover{background:var(--gold);color:var(--card);border-color:var(--gold)}
.btn-ghost-dark{border-color:var(--gold);color:var(--ink)}
.link{font:600 13.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:3px;transition:color .3s}
.link:hover{color:var(--gold)}

/* ---------- hero ---------- */
.hero{position:relative;height:100vh;min-height:620px;max-height:980px;display:grid;place-items:center;overflow:hidden;background:#1d1a16;text-align:center;color:var(--card)}
.hero-photo{position:absolute;inset:-6% 0 0 0;will-change:transform}
.hero-img{width:100%;height:100%;object-fit:cover;filter:sepia(.45) saturate(.75) brightness(.72) contrast(1.05);transform-origin:50% 60%}
.hero-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(20,16,12,.15),rgba(20,16,12,.65) 80%),linear-gradient(180deg,rgba(20,16,12,.45),rgba(20,16,12,.1) 30%,rgba(20,16,12,.55))}
.hero-frame{position:absolute;inset:0;width:100%;height:100%;stroke:var(--gold-soft);stroke-width:1.2;opacity:.7}
.hero-text{position:relative;z-index:2;padding:0 24px;max-width:820px}
.kicker{font:500 12.5px var(--sans);letter-spacing:.42em;text-transform:uppercase;color:var(--gold-soft);margin:0 0 26px}
.hero h1{margin:0;color:var(--card)}
.hero .name{display:block;font-size:clamp(52px,9vw,112px);font-weight:400;letter-spacing:.04em;line-height:1}
.hero .tagline{display:block;margin-top:18px;font-size:clamp(22px,2.6vw,30px);font-style:italic;font-weight:400;color:rgba(251,248,242,.9)}
.hero .rule{margin:26px auto;color:var(--gold-soft)}
.lead{max-width:560px;margin:0 auto 34px;font-size:18px;color:rgba(251,248,242,.85)}
.actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.chips{margin:28px 0 0;font:400 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,242,.7)}
.scrollcue{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;color:rgba(251,248,242,.7);text-decoration:none;font:500 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;z-index:2}
.scrollcue i{display:block;width:1px;height:46px;background:linear-gradient(var(--gold-soft),transparent);transform-origin:top}

/* ---------- welcome ---------- */
.intro-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.intro-title{font-size:clamp(34px,4vw,50px)}
.intro-text{font-size:19px;color:var(--ink-soft);margin:0}
.features{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.features li{display:grid;grid-template-columns:54px 1fr;gap:12px;padding:24px 0;border-bottom:1px solid var(--line)}
.fnum{font-family:var(--display);font-size:22px;color:var(--gold)}
.features h3{font-size:24px;margin-bottom:6px}
.features p{margin:0;color:var(--ink-soft);font-size:16px}

/* ---------- rooms: editorial rows with photographic plates ---------- */
.rooms{display:grid;gap:110px;margin-top:20px}
.room{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;align-items:center}
.room.flip .plate{order:2}
.plate{margin:0;background:var(--card);padding:12px 12px 0;box-shadow:0 1px 0 var(--line),0 20px 40px -24px rgba(43,38,32,.35);overflow:hidden}
.plate img{aspect-ratio:4/3;object-fit:cover;width:100%}
.plate figcaption{font:italic 15px var(--display);color:var(--muted);padding:10px 2px 12px;letter-spacing:.02em}
.eyebrow{font:500 12.5px var(--sans);letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.room h3{font-size:clamp(30px,3vw,40px)}
.blurb{font-size:18px;color:var(--ink-soft)}
.facts{list-style:none;padding:0;margin:20px 0 30px;border-top:1px solid var(--line)}
.facts li{padding:10px 0;border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:16px}

/* photos 'develop' from sepia to colour when they scroll into view */
.develop{transition:filter 1.8s var(--ease),transform 2.4s var(--ease)}
.js [data-reveal] .develop{filter:sepia(.9) saturate(.3) contrast(.9) brightness(1.05);transform:scale(1.04)}
.js [data-reveal].in .develop{filter:sepia(.08) saturate(.95);transform:scale(1)}
.plate:hover .develop{transform:scale(1.02)}

/* ---------- old Ipoh ---------- */
.engraving-wrap{max-width:980px;margin:0 auto 60px}
.ipoh-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.ipoh-grid .intro{font-size:19.5px;margin:0}
.menu-card{background:var(--card);padding:34px 36px;border:1px solid var(--line);outline:1px solid var(--line);outline-offset:-8px}
.menu-list{list-style:none;padding:0;margin:0}
.menu-list li,.leaders li{display:flex;align-items:baseline;gap:10px;padding:9px 0}
.dish{font-family:var(--display);font-size:21px}
.dots{flex:1;border-bottom:1px dotted var(--gold-soft);transform:translateY(-5px);min-width:20px}
.where{color:var(--muted);font-size:14.5px;font-style:italic;text-align:right}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.gallery .plate:nth-child(3n+2){transform:translateY(40px)}
.gallery .plate img{aspect-ratio:4/5}

/* ---------- reservations ---------- */
.reserve{background:var(--paper-tex),var(--green);color:var(--card)}
.reserve .intro{color:rgba(251,248,242,.8)}
.pucuk{position:absolute;left:0;right:0;top:26px;height:14px;background:url(/assets/art/pucuk.svg) 0 0/280px 14px repeat-x;opacity:.55}
.pucuk.bottom{top:auto;bottom:26px;transform:scaleY(-1)}
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.perks{list-style:none;padding:0;margin:0 0 30px}
.perks li{padding:10px 0 10px 28px;position:relative;border-bottom:1px solid rgba(199,173,124,.25)}
.perks li::before{content:"";position:absolute;left:0;top:21px;width:12px;height:1px;background:var(--gold-soft)}
.alt{font-size:16px}
.alt a{color:var(--gold-soft)}
.form{background:var(--card);color:var(--ink);padding:38px;display:grid;gap:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);outline:1px solid var(--line);outline-offset:-10px}
.form label{display:grid;gap:6px;font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.form input,.form select,.form textarea{font:17px var(--serif);padding:10px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--ink);width:100%;border-radius:0;transition:border-color .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-bottom-color:var(--gold)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.err{color:#9b2c1f;margin:0;font-size:14px}
.book-grid > *,.loc-grid > *,.intro-grid > *,.ipoh-grid > *,.row2 > *,.form label{min-width:0}

/* ---------- location ---------- */
.loc-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:60px;align-items:start}
.map{background:var(--card);padding:12px;box-shadow:0 20px 40px -24px rgba(43,38,32,.35)}
.map iframe{display:block;width:100%;height:420px;border:0;filter:sepia(.35) saturate(.7) contrast(.95)}
.leaders{list-style:none;padding:0;margin:0 0 30px}
.leaders li span:first-child{font-size:16.5px}
.leaders li span:last-child{color:var(--gold);font:600 14px var(--sans);letter-spacing:.06em;white-space:nowrap}
.links{display:flex;flex-wrap:wrap;gap:26px}

/* ---------- guest book ---------- */
.ratings{display:flex;justify-content:center;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rating{padding:26px 48px;text-align:center;border-right:1px solid var(--line)}
.rating:last-child{border-right:0}
.rating b{font:400 52px/1 var(--display);color:var(--ink)}
.rating span{font:400 20px var(--display);color:var(--muted);margin-left:4px}
.rating small{display:block;margin-top:8px;font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:60px 80px;margin-top:70px}
blockquote{margin:0;position:relative;padding-left:34px}
blockquote::before{content:"“";position:absolute;left:0;top:-14px;font:400 64px/1 var(--display);color:var(--gold)}
blockquote p{margin:0 0 12px;font:italic 400 23px/1.45 var(--display);color:var(--ink)}
cite{font:500 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--muted)}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font:500 23px var(--display)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg) translateY(-4px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.faq p{margin:0 0 24px;color:var(--ink-soft);font-size:16.5px}

/* ---------- footer ---------- */
.foot{background:var(--paper-tex),var(--wood);color:rgba(251,248,242,.75);padding:70px 0 100px;font-size:16px}
.foot-engraving{opacity:.35;max-width:900px;margin:0 auto 60px}
.foot-engraving .engraving{color:var(--gold-soft)}
.foot-grid{display:grid;grid-template-columns:1.3fr 1.3fr auto;gap:40px;border-top:1px solid rgba(199,173,124,.3);padding-top:40px}
.foot-mark{display:flex;align-items:center;gap:12px;font:400 22px var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--card);margin:0 0 14px}
.foot h3{color:var(--gold-soft);font-size:15px;font-family:var(--sans);letter-spacing:.2em;text-transform:uppercase}
.foot a{color:var(--gold-soft)}
.foot .langs{flex-direction:column;gap:6px}
.foot .langs a{color:rgba(251,248,242,.7);text-transform:none;letter-spacing:.04em;font-size:14px}
.small{font-size:13px;opacity:.6;margin-top:40px}
.mobilebar{display:none}

/* ---------- motion (only when JavaScript is on; reduced-motion users get none) ---------- */
@keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}
.hero-img{animation:kenburns 14s var(--ease) both}
.js .rise{opacity:0;animation:rise 1.2s var(--ease) var(--d,0s) both}
.scrollcue i{animation:cue 2.4s var(--ease) infinite}
.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js .gallery .plate:nth-child(3n+2)[data-reveal].in{transform:translateY(40px)}
/* line drawings draw themselves (dash values set by app.js) */
.js .draw{transition:stroke-dashoffset 2.6s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-img,.js .rise,.scrollcue i{animation:none!important;opacity:1}
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  .js [data-reveal] .develop{filter:sepia(.08) saturate(.95);transform:none}
  .js .draw{transition:none}
}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .menu{display:none}
  .langs{margin-left:auto}
  .intro-grid,.ipoh-grid,.book-grid,.loc-grid{grid-template-columns:1fr;gap:50px}
  .room,.room.flip{grid-template-columns:1fr;gap:30px}
  .room.flip .plate{order:0}
  .gallery{grid-template-columns:1fr 1fr}
  .gallery .plate:nth-child(3n+2),.js .gallery .plate:nth-child(3n+2)[data-reveal].in{transform:none}
}
@media (max-width:640px){
  body{font-size:16px}
  .section{padding:84px 0}
  .bar{gap:14px}
  .wordmark span{display:none}
  .btn-small{display:none}
  .hero .name{letter-spacing:.02em}
  .actions .btn{flex:1 1 100%}
  .quotes{grid-template-columns:1fr;gap:40px}
  .rating{padding:20px 22px;border-right:0;border-bottom:1px solid var(--line);width:100%}
  .rating:last-child{border-bottom:0}
  .gallery{gap:16px}
  .foot-grid{grid-template-columns:1fr}
  .foot .langs{flex-direction:row;flex-wrap:nowrap;gap:22px;white-space:nowrap}
  .menu-card{padding:24px 20px}
  .mobilebar{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(246,241,231,.97);border-top:1px solid var(--line)}
  .mobilebar .btn{padding:13px 10px;font-size:12.5px}
}
:lang(zh) .hero .tagline,:lang(zh) blockquote p,:lang(zh) .plate figcaption,:lang(zh) .note,:lang(zh) .where{font-style:normal}

/* hero refinements: frame sits below the header; scroll cue is just a fine line */
.hero-frame{inset:92px 26px 26px 26px;width:calc(100% - 52px);height:calc(100% - 118px)}
.hero-text{margin-top:50px}
.scrollcue span{display:none}
.scrollcue{bottom:40px}
@media (max-height:760px){.scrollcue{display:none}}

/* menu card: dish name with its description underneath, like an old printed menu */
.menu-list li{display:block;padding:14px 0;border-bottom:1px dotted var(--gold-soft)}
.menu-list li:last-child{border-bottom:0}
.menu-list .dots{display:none}
.menu-list .where{display:block;text-align:left;margin-top:2px}

@media (max-width:640px){.hero .chips{display:none}.hero-frame{inset:84px 12px 12px 12px;width:calc(100% - 24px);height:calc(100% - 96px)}}

/* ---------- balanced motion (owner feedback, round 2): slow hero zoom, photos develop from sepia,
   gold lines draw themselves, ratings count up, gentle reveals. No parallax, no scroll cue. ---------- */
.scrollcue{display:none}
.hero-img{animation-duration:18s}
.js .rise{animation-duration:1.1s}

/* ---------- Ipoh guide pages ---------- */
.guide-page .top{position:sticky}
.guide-main{padding:60px 0 100px}
.guide,.guide-index{max-width:760px}
.crumbs{font:500 12.5px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:34px}
.crumbs a{color:var(--muted);text-decoration:none}
.guide h1,.guide-index h1{font-size:clamp(34px,4.6vw,52px);font-weight:500;margin-bottom:16px}
.guide .rule,.guide-index .rule{margin:0 0 26px}
.answer{font:400 21px/1.6 var(--display);color:var(--ink);background:var(--card);border-left:2px solid var(--gold);padding:18px 24px;margin:0 0 14px}
.byline{font:500 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 40px}
.guide-body h2{font-size:30px;margin:46px 0 12px;letter-spacing:0}
.guide-body h2::after{display:none}
.guide-body h3{font-size:23px;margin:30px 0 8px}
.guide-body p,.guide-body li{color:var(--ink-soft)}
.guide-body ul,.guide-body ol{padding-left:22px}
.guide-body li{margin:6px 0}
.guide-body a{color:var(--green)}
.guide-body .tw{overflow-x:auto;margin:20px 0}
.guide-body table{border-collapse:collapse;width:100%;font-size:15.5px;background:var(--card)}
.guide-body th,.guide-body td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.guide-body th{font:600 12px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
mark.verify{background:#f7d9a8;color:#5a3a00;padding:1px 4px;font:600 13px var(--sans)}
mark.staff{background:#d6e6dc;color:#1f4a35;padding:1px 4px;font:600 13px var(--sans)}
.review-note{background:#fff3d6;border:1px solid #e3c27a;padding:10px 14px;font:500 14px var(--sans);color:#6b4a00}
.guide-list{list-style:none;padding:0;margin:30px 0 60px;border-top:1px solid var(--line)}
.guide-list li{padding:20px 0;border-bottom:1px solid var(--line)}
.guide-list a{display:flex;gap:18px;align-items:baseline;text-decoration:none;color:var(--ink);font:500 24px var(--display)}
.guide-list a:hover{color:var(--green)}
.gnum{font:500 14px var(--sans);color:var(--gold);letter-spacing:.1em}
.guide-list p{margin:6px 0 0 42px;color:var(--muted);font-size:15.5px}
.guide-index h2{font-size:28px}
.guide-index h2::after{display:none}
.qa-list{columns:2;column-gap:40px;padding-left:20px}
.qa-list li{margin:8px 0;break-inside:avoid}
.guide-foot{padding:50px 0}
@media (max-width:640px){.qa-list{columns:1}.guide-list p{margin-left:0}.guide-page .wordmark span{display:inline}}

/* ---------- animated location map ---------- */
.map-wrap{display:grid;grid-template-columns:1.45fr 1fr;gap:50px;align-items:start}
.map-wrap > *{min-width:0}
.map-frame{position:relative;background:var(--card);padding:12px;box-shadow:0 20px 40px -24px rgba(43,38,32,.35);outline:1px solid var(--line);outline-offset:-6px}
#dmap{height:560px;background:#e9e1cf}
#dmap .leaflet-tile-pane{filter:sepia(.42) saturate(.72) contrast(.96) brightness(1.03)}
.leaflet-container{font-family:var(--sans)}
.leaflet-control-attribution{font-size:10.5px;background:rgba(251,248,242,.85)!important}
.map-replay{position:absolute;right:24px;bottom:24px;z-index:500;background:var(--green);color:var(--card);border:0;padding:10px 16px;font:600 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.map-replay:hover{background:var(--green-deep)}
.hotel-pin{position:relative}
.hotel-pin .seal{position:absolute;inset:5px;border-radius:50%;background:var(--wood);color:var(--gold-soft);border:2px solid var(--gold);display:grid;place-items:center;font:600 13px var(--display);letter-spacing:.06em;box-shadow:0 4px 12px rgba(0,0,0,.35)}
.hotel-pin .pulse{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:pinpulse 2.4s ease-out infinite}
@keyframes pinpulse{from{transform:scale(.7);opacity:.9}to{transform:scale(2);opacity:0}}
.hotel-tip{background:var(--wood)!important;color:var(--card)!important;border:1px solid var(--gold)!important;font:500 13px var(--display)!important;letter-spacing:.08em;text-transform:uppercase;box-shadow:none!important}
.hotel-tip::before{border-top-color:var(--wood)!important}
.place-pin span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--card);border:1.5px solid #8a5a2b;color:#5c3b1c;font:700 12px var(--sans);box-shadow:0 2px 6px rgba(0,0,0,.2);animation:pinpop .5s cubic-bezier(.34,1.56,.64,1) both}
.place-pin.kind-transport span{border-color:var(--green);color:var(--green)}
@keyframes pinpop{from{transform:scale(0)}to{transform:scale(1)}}
.place-tip{font:500 13px var(--sans)!important;border-radius:2px!important;border:1px solid var(--line)!important}
.map-label{white-space:nowrap;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#6b5434;text-shadow:0 0 3px #fff,0 0 3px #fff}
.map-label.ctx{font-size:12px;transform:translate(10px,-8px)}
.map-label.ipoh{font:600 15px var(--display);letter-spacing:.2em;transform:translate(14px,-10px)}
.ring-label{transform:translate(-50%,-115%);color:var(--gold);font-size:10.5px}
.walk-line.active{stroke-width:4;opacity:1}
.map-side h3{font-size:28px;margin-bottom:16px}
.place-list{list-style:none;padding:0;margin:0 0 18px;counter-reset:none}
.place-list li{display:flex;align-items:baseline;gap:10px;padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .25s}
.place-list li:hover,.place-list li.active{background:var(--card)}
.pnum{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid #8a5a2b;color:#5c3b1c;font:700 11px/19px var(--sans);text-align:center}
.place-list li.kind-transport .pnum{border-color:var(--green);color:var(--green)}
.pname{font-size:16px}
.mins{flex:none;color:var(--gold);font:600 13px var(--sans);white-space:nowrap}
.map-side .links{display:flex;flex-wrap:wrap;gap:14px 24px;margin-top:18px}
@media (max-width:980px){.map-wrap{grid-template-columns:1fr}#dmap{height:440px}}
@media (max-width:640px){#dmap{height:380px}.map-frame{padding:8px}.map-replay{right:16px;bottom:16px}}
@media (prefers-reduced-motion:reduce){.hotel-pin .pulse,.place-pin span{animation:none}}

/* Leaflet 1.9 blends tiles with plus-lighter, which shows bright seams; use normal blending */
#dmap .leaflet-tile{mix-blend-mode:normal}

/* ---------- hero as an old photograph (owner feedback): the print "develops" from a faded white
   sheet into warm sepia, then lives on with fine film grain, a soft burnt vignette, faint flicker and
   the odd dust speck. Subtle by design; reduced-motion users get the still, aged print. ---------- */
.hero-img{filter:sepia(.85) saturate(.7) brightness(.74) contrast(1.12) blur(.3px);
  animation:kenburns 18s var(--ease) both,develop-print 4.2s cubic-bezier(.4,0,.2,1) both}
@keyframes develop-print{
  0%{filter:sepia(.3) saturate(.2) brightness(1.3) contrast(.5) blur(3px)}
  40%{filter:sepia(.6) saturate(.45) brightness(.95) contrast(.8) blur(1px)}
  100%{filter:sepia(.85) saturate(.7) brightness(.74) contrast(1.12) blur(.3px)}}
.hero-veil{background:
  radial-gradient(ellipse 75% 70% at 50% 48%,rgba(30,20,10,.28) 30%,rgba(40,26,12,.55) 85%,rgba(22,14,6,.85) 100%),
  linear-gradient(180deg,rgba(20,16,12,.45),rgba(20,16,12,.08) 30%,rgba(20,16,12,.5))}
.hero-film{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;animation:flicker 5s steps(1) infinite}
.hero-film::before{content:"";position:absolute;inset:-60px;opacity:.16;mix-blend-mode:overlay;
  background:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .9s steps(6) infinite}
.hero-film::after{content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(circle at 18% 32%,rgba(255,244,220,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 71% 64%,rgba(20,12,4,.6) 0 1.5px,transparent 2.5px),
    radial-gradient(circle at 84% 22%,rgba(255,244,220,.4) 0 1px,transparent 2px),
    linear-gradient(90deg,transparent calc(37% - 1px),rgba(255,244,220,.18) 37%,transparent calc(37% + 1px));
  animation:dust 7s steps(1) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}17%{transform:translate(-22px,14px)}33%{transform:translate(18px,-26px)}
  50%{transform:translate(-30px,-10px)}67%{transform:translate(26px,22px)}83%{transform:translate(-8px,30px)}100%{transform:translate(0,0)}}
@keyframes flicker{0%,100%{opacity:1}31%{opacity:.86}33%{opacity:1}62%{opacity:.92}64%{opacity:1}}
@keyframes dust{
  0%{opacity:0}12%{opacity:.5;transform:translate(0,0)}14%{opacity:0}
  46%{opacity:.45;transform:translate(-24%,18%) scaleX(-1)}48%{opacity:0}
  78%{opacity:.5;transform:translate(12%,-10%)}80%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .hero-img{filter:sepia(.85) saturate(.7) brightness(.74) contrast(1.12)}
  .hero-film,.hero-film::before,.hero-film::after{animation:none!important}
  .hero-film::after{opacity:0}
}

/* ---------- more ancient + faded paper border (owner feedback): the photo sits on yellowed, foxed
   paper; its edges fade into the paper like an old print; stronger sepia, softer contrast,
   heavier grain. ---------- */
.hero{background:
  radial-gradient(circle at 8% 14%,rgba(150,105,50,.22) 0 22px,transparent 60px),
  radial-gradient(circle at 93% 88%,rgba(150,105,50,.18) 0 30px,transparent 80px),
  radial-gradient(circle at 96% 9%,rgba(120,85,40,.14) 0 8px,transparent 28px),
  radial-gradient(ellipse at 50% 50%,#ece1c8 55%,#d9c7a2 100%)}
.hero-photo,.hero-veil,.hero-film{inset:var(--mount,20px);overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent),linear-gradient(180deg,transparent,#000 3%,#000 97%,transparent);
  mask-composite:intersect}
.hero-img{filter:sepia(1) saturate(.6) hue-rotate(-6deg) brightness(.78) contrast(.92) blur(.45px)}
@keyframes develop-print{
  0%{filter:sepia(.4) saturate(.2) hue-rotate(0deg) brightness(1.3) contrast(.5) blur(3px)}
  40%{filter:sepia(.75) saturate(.4) hue-rotate(-3deg) brightness(.95) contrast(.75) blur(1.2px)}
  100%{filter:sepia(1) saturate(.6) hue-rotate(-6deg) brightness(.78) contrast(.92) blur(.45px)}}
.hero-veil{background:
  radial-gradient(ellipse 75% 70% at 50% 48%,rgba(30,20,10,.3) 30%,rgba(50,32,14,.6) 82%,rgba(40,24,8,.9) 100%),
  linear-gradient(180deg,rgba(20,16,12,.45),rgba(20,16,12,.08) 30%,rgba(20,16,12,.5)),
  linear-gradient(rgba(214,190,150,.07),rgba(214,190,150,.07))}
.hero-film::before{opacity:.26}
.hero-film::after{opacity:.65;background:
  radial-gradient(circle at 18% 32%,rgba(255,244,220,.6) 0 1px,transparent 2px),
  radial-gradient(circle at 71% 64%,rgba(20,12,4,.65) 0 1.5px,transparent 2.5px),
  radial-gradient(circle at 84% 22%,rgba(255,244,220,.45) 0 1px,transparent 2px),
  radial-gradient(circle at 33% 78%,rgba(20,12,4,.5) 0 1px,transparent 2px),
  radial-gradient(ellipse 3px 1px at 58% 41%,rgba(255,244,220,.4),transparent),
  linear-gradient(90deg,transparent calc(37% - 1px),rgba(255,244,220,.2) 37%,transparent calc(37% + 1px)),
  linear-gradient(90deg,transparent calc(81% - 1px),rgba(20,12,4,.18) 81%,transparent calc(81% + 1px))}
@media (max-width:640px){.hero{--mount:10px}}
@media (prefers-reduced-motion:reduce){.hero-img{filter:sepia(1) saturate(.6) hue-rotate(-6deg) brightness(.78) contrast(.92)}}
.hero .name-zh{display:block;margin-top:14px;font:400 clamp(26px,3.4vw,40px)/1 var(--display);letter-spacing:.5em;padding-left:.5em;color:var(--gold-soft)}
:lang(zh) .hero .name{font-size:clamp(46px,7.6vw,96px)}
:lang(zh) .hero .name-zh{margin:12px 0 4px}
/* guides strip under the map */
.guide-strip{margin-top:70px;padding-top:44px;border-top:1px solid var(--line)}
.guide-strip h3{text-align:center;font-size:clamp(24px,2.6vw,30px);font-weight:500;margin:0 0 26px}
.guide-cards{list-style:none;margin:0 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px}
.guide-cards li{border-bottom:1px solid var(--line)}
.guide-cards a{display:flex;gap:12px;align-items:baseline;padding:13px 4px;color:var(--ink);text-decoration:none;transition:background .25s}
.guide-cards a:hover{background:var(--card)}
.guide-cards .gnum{font:600 12px var(--sans);letter-spacing:.12em;color:var(--gold)}
.guide-cards .gt{font:400 19px/1.35 var(--display)}
@media (max-width:980px){.guide-cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.guide-cards{grid-template-columns:1fr}}
/* owner: focus the hero on the top of the building, where the 東方大酒店 / D'EASTERN HOTEL sign is */
.hero-img{object-position:50% 0%;transform-origin:50% 8%}
.hero-veil{background:
  radial-gradient(ellipse 75% 70% at 50% 55%,rgba(30,20,10,.32) 30%,rgba(50,32,14,.55) 82%,rgba(40,24,8,.88) 100%),
  linear-gradient(180deg,rgba(20,16,12,.25),rgba(20,16,12,0) 22%,rgba(20,16,12,.05) 45%,rgba(20,16,12,.55)),
  linear-gradient(rgba(214,190,150,.07),rgba(214,190,150,.07))}
.hero-text{margin-top:60px}
@media (max-width:640px){.hero-img{object-position:42% 0%}}

/* ---------- Experiences: home section + /experiences/ page ---------- */
.exp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:40px 0 46px}
.exp-card{display:flex;flex-direction:column;gap:10px;padding:30px 28px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;position:relative;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.exp-card::after{content:"";position:absolute;inset:7px;border:1px solid var(--line);pointer-events:none}
.exp-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px -18px rgba(60,40,20,.35)}
.exp-n{font:400 64px/1 var(--display);color:var(--gold)}
.exp-t{font:500 24px/1.2 var(--display)}
.exp-b{font-size:15.5px;color:var(--muted);line-height:1.6}
.exp-trips{text-align:center;margin-bottom:34px}
.exp-trips h3{font:600 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.exp-trips ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.exp-trips a{display:inline-block;padding:8px 16px;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-size:15px;background:var(--card);transition:border-color .3s}
.exp-trips a:hover{border-color:var(--gold)}
.experiences .pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin:10px 0 40px}
.pkg{background:var(--card);border:1px solid var(--line);padding:24px}
.pkg h3{margin:4px 0 10px;font-size:24px}
.pkg ul{padding-left:18px;margin:0 0 18px;font-size:15.5px}
.guide-index h2 a{color:inherit;text-decoration:none}
@media (max-width:980px){.exp-cards{grid-template-columns:1fr}}

/* ---------- guide strip fix + trip panel + experiences planner (owner feedback round 2) ---------- */
.guide-cards{list-style:none!important;padding-left:0!important}
.guide-cards li::marker{content:none}
.exp-go{margin-top:auto;font:600 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--green)}
.trip-panel{margin:6px 0 44px;background:var(--card);border:1px solid var(--line);position:relative}
.trip-panel::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.tp-facts{padding:26px 28px 10px}
.tp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.tp-big{display:block;font:500 26px/1.15 var(--display);color:var(--ink)}
.tp-small{display:block;font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.trip-panel dl{margin:0}
.tf-row{display:grid;grid-template-columns:170px 1fr;gap:16px;padding:10px 0;border-bottom:1px dashed var(--line)}
.tf-row:last-child{border-bottom:0}
.tf-row dt{font:600 11.5px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tf-row dd{margin:0;font-size:16px;line-height:1.6}
.tf-row ul{margin:0;padding-left:18px}
.tp-links{margin:12px 0 14px}
.tp-map{padding:0 12px 12px}
.trip-map{height:380px;background:#e9e1cf}
.trip-map .leaflet-tile-pane,#trips-map .leaflet-tile-pane{filter:sepia(.42) saturate(.72) contrast(.96) brightness(1.03)}
.trip-map .leaflet-tile,#trips-map .leaflet-tile{mix-blend-mode:normal}
.experiences{max-width:1120px;padding-top:10px}
.exp-head{text-align:center;max-width:760px;margin:0 auto 20px}
.exp-head .rule{margin:0 auto 18px}
.lead-in{font:400 21px/1.6 var(--display);color:var(--ink)}
.steps{list-style:none;padding:0;margin:26px 0 0;display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.steps a{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font:600 13px var(--sans);letter-spacing:.06em}
.steps a:hover{border-color:var(--gold)}
.steps b,.exp-step h2 b{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--wood);color:var(--gold-soft);font:600 13px var(--sans)}
.exp-step{padding:54px 0 10px;border-top:1px solid var(--line);margin-top:40px;scroll-margin-top:90px}
.exp-step h2{display:flex;align-items:center;gap:14px;font-size:clamp(26px,3vw,34px);margin:0 0 8px}
.exp-step h2::after{display:none}
.exp-step h2 b{width:34px;height:34px;font-size:15px}
.step-note{color:var(--muted);margin:0 0 22px}
.experiences .exp-cards{margin:24px 0 10px}
.trips-layout{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:26px;align-items:start}
.trip-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.trip-card{display:flex;align-items:center;gap:14px;padding:14px 16px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.trip-card:hover,.trip-card:focus{border-color:var(--gold);transform:translateX(4px);box-shadow:0 10px 24px -18px rgba(60,40,20,.4);outline:none}
.tc-n{flex:0 0 30px;height:30px;border-radius:50%;border:1.5px solid #8a5a2b;display:grid;place-items:center;font:700 12.5px var(--sans);color:#5c3b1c}
.tc-body{display:flex;flex-direction:column;gap:2px;flex:1}
.tc-name{font:500 20px/1.25 var(--display)}
.tc-meta{font:600 12px var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tc-best{font-size:14.5px;color:var(--green)}
.tc-go{font-size:20px;color:var(--gold)}
.trips-map-wrap{position:sticky;top:96px;background:var(--card);border:1px solid var(--line);padding:10px}
#trips-map{height:560px;background:#e9e1cf}
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin:24px 0 30px}
.pkg-draft{font:600 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:#9a5b1e;background:#f6ead2;padding:6px 10px;margin:0 0 12px}
.plan-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);padding:24px 28px;margin-bottom:60px}
.plan-cta p{margin:0;max-width:620px}
@media (max-width:980px){.trips-layout{grid-template-columns:1fr}.trips-map-wrap{position:relative;top:0;order:-1}#trips-map{height:400px}}
@media (max-width:640px){.tp-stats{grid-template-columns:1fr 1fr}.tf-row{grid-template-columns:1fr;gap:4px}.trip-map{height:300px}#trips-map{height:320px}}
/* itinerary maps */
.itin-panel{margin:6px 0 44px;background:var(--card);border:1px solid var(--line);padding:22px 22px 18px}
.ip-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.ip-head .eyebrow{margin:0}
.itin-tabs{display:flex;gap:8px;flex-wrap:wrap}
.itin-tabs button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;background:var(--paper);color:var(--ink);font:600 12.5px var(--sans);letter-spacing:.06em;cursor:pointer}
.itin-tabs button i{width:10px;height:10px;border-radius:50%;display:inline-block}
.itin-tabs button.on{background:var(--wood);color:var(--card);border-color:var(--wood)}
.ip-body{display:grid;grid-template-columns:1fr;gap:16px}
.itin-map{height:420px;background:#e9e1cf}
.itin-map .leaflet-tile-pane{filter:sepia(.42) saturate(.72) contrast(.96) brightness(1.03)}
.itin-map .leaflet-tile{mix-blend-mode:normal}
.itin-stops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 26px}
.is-day{transition:opacity .3s}
.is-day.dim{opacity:.35}
.is-day h4{font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;margin:6px 0 6px}
.is-day ol{list-style:none;margin:0;padding:0}
.is-day li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-bottom:1px dashed var(--line);font-size:15.5px;line-height:1.45;cursor:default}
.is-day li small{display:block;color:var(--muted);font-size:13px}
.is-n{flex:0 0 22px;height:22px;border-radius:50%;border:1.5px solid;display:inline-grid;place-items:center;font:700 11px var(--sans)}
.ip-note{grid-column:1/-1;font-size:13.5px;color:var(--muted);margin:8px 0 0}
@media (max-width:640px){.itin-map{height:320px}.itin-panel{padding:14px}}
.exp-trips-map{margin:10px 0 40px}
.exp-trips-h{text-align:center;font:600 13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 6px}
.exp-trips-map #trips-map{height:520px}
.exp-trips-map .trip-card{padding:11px 14px}
.exp-trips-map .tc-name{font-size:18.5px}

/* ---------- Deepavali greeting (only when <html class="festive">; dates in content.FESTIVE) ---------- */
.festive-banner{display:none}
.festive .festive-banner{display:block;position:relative;margin:0 auto 20px;padding:10px 40px 12px;max-width:540px;
  border:1px solid rgba(245,210,122,.6);background:radial-gradient(ellipse at 50% 0,rgba(255,153,51,.26),rgba(29,26,22,.6) 72%);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);box-shadow:0 0 40px rgba(255,153,51,.18);animation:fbIn 1.2s var(--ease) .2s both}
.festive-closed .festive-banner{display:none}
.festive-banner::before{content:"";position:absolute;inset:4px;border:1px solid rgba(245,210,122,.28);pointer-events:none}
.festive-banner.bye{opacity:0;transform:scale(.96);transition:opacity .45s,transform .45s}
.fb-close{position:absolute;top:4px;right:8px;background:none;border:0;color:rgba(251,248,242,.7);font-size:22px;line-height:1;padding:6px;cursor:pointer}
.fb-close:hover{color:#fff}
.fb-lamps{display:flex;justify-content:center;align-items:flex-end;gap:16px}
.fb-star{color:#f5d27a;font-size:18px;margin:0 6px 6px;animation:fbSpin 8s linear infinite;display:inline-block}
.diya{width:26px;height:29px;overflow:visible}
.diya .bowl{fill:#9c4f17;stroke:#f5d27a;stroke-width:1.4}
.diya .rim{stroke:#f5d27a;stroke-width:2;stroke-linecap:round}
.diya .flame{fill:#ff9933;transform-origin:20px 26px;filter:drop-shadow(0 0 5px #ffb347);animation:flicker 1.6s ease-in-out infinite}
.diya .flame-core{fill:#fff2b8;transform-origin:20px 26px;animation:flicker 1.6s ease-in-out infinite reverse}
.diya:nth-child(2) .flame,.diya:nth-child(5) .flame{animation-duration:1.25s}
.diya:nth-child(4) .flame{animation-duration:1.9s}
.fb-title{font:500 clamp(30px,3.9vw,46px)/1.1 var(--display);letter-spacing:.04em;margin:4px 0 2px;perspective:600px}
.fb-title span{display:inline-block;background:linear-gradient(100deg,#e8b65a 0%,#fff3c4 42%,#ff9933 58%,#e8b65a 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:fbLetter .9s var(--ease) calc(.7s + var(--i) * .06s) both,fbSheen 4.5s linear calc(2.2s + var(--i) * .07s) infinite}
.fb-sub{font:italic 400 15.5px/1.4 var(--display);color:rgba(251,248,242,.88);margin:0 auto;max-width:470px;animation:rise 1s var(--ease) 1.6s both}
.festive .hero-text{margin-top:30px}
.festive .hero h1 .name{font-size:clamp(52px,7.4vw,104px)}
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
@keyframes fbIn{from{opacity:0;transform:translateY(-14px) scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fbLetter{from{opacity:0;transform:translateY(22px) rotateX(75deg);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes fbSheen{from{background-position:100% 0}to{background-position:-200% 0}}
@keyframes fbSpin{to{transform:rotate(360deg)}}
@keyframes flicker{0%,100%{transform:scale(1,1) rotate(0)}25%{transform:scale(.92,1.08) rotate(-3deg)}50%{transform:scale(1.05,.95) rotate(2deg)}75%{transform:scale(.96,1.06) rotate(-1deg)}}
@media (max-width:640px){
  .festive .festive-banner{padding:8px 30px 10px;margin-bottom:14px}
  .fb-title{font-size:27px;white-space:nowrap}
  .fb-sub,.festive .hero .kicker{display:none}
  .diya{width:21px;height:23px}
  .fb-lamps{gap:10px}
}
@media (prefers-reduced-motion:reduce){
  .festive .festive-banner,.fb-title span,.fb-sub,.fb-star,.diya .flame,.diya .flame-core{animation:none!important}
}

/* ---------- hero look: B, the 1950s hand-tinted postcard (owner's choice 2026-11-06; data-look on <html>).
   ?look=silver|cinema still previews the alternatives ----------
   All three drop the burnt edges, foxed paper, dust, scratches and flicker. */
[data-look] .hero-film::after{display:none}
[data-look] .hero-film{animation:none}
[data-look] .hero-img{animation:kenburns 18s var(--ease) both,none}
/* A. Silver gelatin print in a museum mat: rich black and white, slight warm (selenium) tone, ivory mat, gold keyline */
[data-look=silver] .hero{--mount:28px;background:#efe8da}
[data-look=silver] .hero-photo,[data-look=silver] .hero-veil,[data-look=silver] .hero-film{-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 1px rgba(168,138,85,.6)}
[data-look=silver] .hero-img{filter:grayscale(1) sepia(.18) contrast(1.22) brightness(.86)}
[data-look=silver] .hero-veil{background:radial-gradient(ellipse 85% 80% at 50% 50%,rgba(10,8,6,.18) 40%,rgba(10,8,6,.5) 100%),linear-gradient(180deg,rgba(10,8,6,.35),rgba(10,8,6,.05) 25%,rgba(10,8,6,.1) 50%,rgba(10,8,6,.6))}
[data-look=silver] .hero-film::before{opacity:.12}
[data-look=silver] .hero-frame{opacity:.55}
@media (max-width:640px){[data-look=silver] .hero{--mount:12px}}
/* B. 1950s hand-tinted hotel postcard: soft muted colour, white deckle-edged border, warm paper */
[data-look=postcard] .hero{--mount:22px;background:#f4efe3}
[data-look=postcard] .hero-photo,[data-look=postcard] .hero-veil,[data-look=postcard] .hero-film{-webkit-mask-image:none;mask-image:none;border-radius:3px}
[data-look=postcard] .hero-img{filter:sepia(.35) saturate(.7) hue-rotate(-8deg) contrast(1.02) brightness(.9)}
[data-look=postcard] .hero-veil{background:
  linear-gradient(180deg,rgba(90,140,150,.28),rgba(90,140,150,0) 35%),
  linear-gradient(0deg,rgba(170,90,50,.22),rgba(170,90,50,0) 40%),
  radial-gradient(ellipse 85% 80% at 50% 52%,rgba(20,16,12,.25) 40%,rgba(20,16,12,.55) 100%),
  linear-gradient(180deg,rgba(20,16,12,.25),rgba(20,16,12,0) 25%,rgba(20,16,12,.12) 55%,rgba(20,16,12,.55))}
[data-look=postcard] .hero-film::before{opacity:.1}
[data-look=postcard] .hero-frame{opacity:.45}
@media (max-width:640px){[data-look=postcard] .hero{--mount:10px}}
/* C. Classic film still: full-bleed deep black and white, strong vignette, fine grain, gold double frame */
[data-look=cinema] .hero{--mount:0px;background:#0d0b09}
[data-look=cinema] .hero-photo,[data-look=cinema] .hero-veil,[data-look=cinema] .hero-film{-webkit-mask-image:none;mask-image:none}
[data-look=cinema] .hero-img{filter:grayscale(1) contrast(1.35) brightness(.78)}
[data-look=cinema] .hero-veil{background:radial-gradient(ellipse 70% 65% at 50% 50%,rgba(0,0,0,.1) 35%,rgba(0,0,0,.72) 100%),linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 25%,rgba(0,0,0,.1) 55%,rgba(0,0,0,.65))}
[data-look=cinema] .hero-film::before{opacity:.18}

/* company logo (triangle mark, cropped from the owner's logo file): maroon on light, cream on dark */
.logo-mark{height:42px;width:auto;display:block;flex:none}
.top:not(.scrolled) .logo-mark,.foot .logo-mark{filter:brightness(0) invert(1) sepia(.35) brightness(.95);opacity:.92}
.guide-page .top .logo-mark{filter:none;opacity:1}
.foot-mark .logo-mark{height:46px}
@media (max-width:640px){.logo-mark{height:36px}}
/* postcard: the photo starts below the header, so the header sits on the cream card in dark ink (owner, 2026-11-06) */
[data-look=postcard] .hero{--mtop:84px}
[data-look=postcard] .hero-photo,[data-look=postcard] .hero-veil,[data-look=postcard] .hero-film{top:var(--mtop)}
[data-look=postcard] .hero-frame{inset:calc(var(--mtop) + 16px) 38px 38px 38px;width:calc(100% - 76px);height:calc(100% - var(--mtop) - 54px)}
[data-look=postcard] .hero-text{margin-top:calc(var(--mtop) + 10px)}
[data-look=postcard] .top:not(.scrolled) .wordmark,[data-look=postcard] .top:not(.scrolled) .menu a,[data-look=postcard] .top:not(.scrolled) .langs a{color:var(--ink)}
[data-look=postcard] .top:not(.scrolled) .langs a[aria-current]{color:var(--gold)}
[data-look=postcard] .top:not(.scrolled) .btn-line{color:var(--ink);border-color:var(--gold)}
[data-look=postcard] .top:not(.scrolled) .logo-mark{filter:none;opacity:1}
@media (max-width:640px){
  [data-look=postcard] .hero{--mtop:76px}
  [data-look=postcard] .hero-frame{inset:calc(var(--mtop) + 10px) 20px 20px 20px;width:calc(100% - 40px);height:calc(100% - var(--mtop) - 30px)}
  [data-look=postcard] .hero-text{margin-top:calc(var(--mtop) - 10px)}
}
[data-look=postcard].festive .hero-text{margin-top:calc(var(--mtop) - 24px)}
@media (max-width:640px){[data-look=postcard].festive .hero-text{margin-top:calc(var(--mtop) - 30px)}}
/* the archive photo of the old Eastern Hotel (owner, 2026-11-06): frame the whole facade; museum-style caption */
.hero-img{object-position:50% 38%;transform-origin:50% 40%}
@media (max-width:640px){.hero-img{object-position:28% 40%}}
.hero-caption{position:absolute;z-index:2;left:calc(var(--mount,20px) + 28px);bottom:calc(var(--mount,20px) + 18px);margin:0;
  font:italic 400 13px/1.3 var(--display);letter-spacing:.04em;color:rgba(251,248,242,.78);text-align:left;max-width:60%}
[data-look=postcard] .hero-caption{left:52px;bottom:46px}
@media (max-width:640px){.hero-caption,[data-look=postcard] .hero-caption{display:none}}
/* keep the old signage (EASTERN HOTEL · 東方酒店 · HOO SOO WAN BUILDING) visible: text sits low on a dark band */
[data-look=postcard] .hero{align-items:end}
[data-look=postcard] .hero-text,[data-look=postcard].festive .hero-text{margin:0 0 64px}
[data-look=postcard] .hero .name{font-size:clamp(44px,6vw,84px)}
[data-look=postcard] .hero .tagline{margin-top:10px}
[data-look=postcard] .hero .rule,[data-look=postcard] .hero .lead{display:none}
[data-look=postcard] .hero .actions{margin-top:22px}
[data-look=postcard] .hero-veil{background:
  linear-gradient(180deg,rgba(90,140,150,.22),rgba(90,140,150,0) 30%),
  linear-gradient(180deg,rgba(18,13,9,0) 38%,rgba(18,13,9,.55) 62%,rgba(18,13,9,.82) 100%),
  radial-gradient(ellipse 90% 85% at 50% 45%,rgba(20,16,12,0) 50%,rgba(20,16,12,.35) 100%)}
[data-look=postcard] .festive-banner{margin-bottom:14px}
@media (max-width:640px){
  [data-look=postcard] .hero-text,[data-look=postcard].festive .hero-text{margin:0 0 92px}
}
/* Deepavali banner as a small badge in the sky (top right), clear of the old signage */
[data-look=postcard].festive .festive-banner{position:absolute;z-index:3;top:calc(var(--mtop) + 34px);right:64px;margin:0;max-width:330px;padding:8px 26px 10px}
[data-look=postcard] .fb-title{font-size:30px}
[data-look=postcard] .fb-sub{display:none}
[data-look=postcard] .diya{width:20px;height:22px}
[data-look=postcard] .hero-text,[data-look=postcard].festive .hero-text{margin-bottom:76px}
@media (max-width:640px){
  [data-look=postcard].festive .festive-banner{top:calc(var(--mtop) + 14px);left:50%;right:auto;transform:translateX(-50%);max-width:none;width:max-content;padding:6px 22px 8px;animation:none}
  [data-look=postcard] .fb-title{font-size:22px}
  [data-look=postcard] .hero-text,[data-look=postcard].festive .hero-text{margin-bottom:96px}
}
.festive .festive-banner{position:absolute;z-index:3}

/* ---------- Our story (/our-story/) ---------- */
.story .story-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:start;margin:36px 0}
.story .story-grid h2{margin-top:0}
.story .plate img{width:100%;height:auto;display:block;filter:sepia(.15)}
.story .story-wide{margin:34px 0}
.story .timeline{list-style:none;padding:0;margin:20px 0 30px;border-left:1px solid var(--gold-soft)}
.story .timeline li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:8px 0 8px 18px;position:relative}
.story .timeline li::before{content:"";position:absolute;left:-5px;top:17px;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.story .timeline b{font:600 15px/1.6 var(--sans);letter-spacing:.06em;color:var(--gold)}
.story-cta{margin:26px 0;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
@media (max-width:760px){.story .story-grid{grid-template-columns:1fr}.story .timeline li{grid-template-columns:1fr;gap:2px}}
.story .plate img{aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}

/* <picture> wrappers (WebP) must not change layout: the <img> inside keeps all its rules */
picture{display:contents}