/* ==========================================================
   GP Plus KTV 新名门KTV
   Palace at night: near-black, ivory ink, one crimson.
   ========================================================== */

/* Archivo, self-hosted (variable: weight 100-900, width 62-125%). Source: Google Fonts, SIL OFL. */
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --bg: #0a0607;
  --bg-2: #120a0c;
  --bg-3: #1a0f11;
  --ivory: #efe6d6;
  --ivory-2: rgba(239, 230, 214, 0.68);
  --ivory-3: rgba(239, 230, 214, 0.56);   /* 5.4:1 on --bg: smallest text colour allowed */
  --line: rgba(239, 230, 214, 0.12);
  --line-2: rgba(239, 230, 214, 0.22);
  --crimson: #ba1b1d;          /* sampled from the logo */
  --crimson-hi: #e8474a;       /* small text on black and panels (>=4.8:1) */
  --green: #3ecf7a;            /* points: balances and points added (+). Red = points taken off (−) */
  --crimson-deep: #4a0a0e;
  --crimson-wash: rgba(186, 27, 29, 0.1);
  --crimson-wash-2: rgba(186, 27, 29, 0.14);

  --f-display: "Archivo", "Noto Sans SC", system-ui, sans-serif;
  --f-body: "Archivo", "Noto Sans SC", system-ui, sans-serif;
  --f-zh-display: "Noto Serif SC", "Songti SC", serif;
  --f-zh: "Noto Sans SC", "PingFang SC", sans-serif;

  --gutter: clamp(16px, 4vw, 56px);
  --max: 1320px;

  /* Soft glass: rounded corners, soft shadows, smoked frosted glass over the silk */
  --r-sm: 12px;     /* fields, small controls */
  --r-md: 18px;     /* cards, photos */
  --r-lg: 26px;     /* large panels */
  --r-pill: 999px;  /* buttons, switches, chips */
  --radius: var(--r-sm);
  --glass: rgba(26, 14, 17, 0.52);
  --glass-strong: rgba(18, 10, 12, 0.8);
  --glass-soft: rgba(255, 244, 234, 0.05);         /* controls sitting on glass */
  --glass-edge: rgba(255, 238, 226, 0.12);
  --glass-rim: inset 0 1px 0 rgba(255, 246, 238, 0.1);   /* the lit top edge */
  --glass-blur: blur(22px) saturate(160%);
  /* very light glass (owner, 22 Oct 2026): login, Visit Us, Rooms box, Food & Drinks cards, Events finder */
  --glass-clear: linear-gradient(180deg, rgba(255, 244, 234, 0.05), rgba(255, 244, 234, 0) 40%), rgba(26, 14, 17, 0.06);
  --glass-clear-blur: blur(3px) saturate(130%);
  --glass-clear-shadow: 0 1px 8px rgba(10, 6, 7, 0.8);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.28), 0 30px 70px -26px rgba(0, 0, 0, 0.78);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);         /* strong ease-out */
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);  /* drawers / menus */
  --header-h: 76px;

  /* type scale */
  --fs-label: 12px;      /* uppercase functional labels */
  --fs-small: 14px;      /* captions, meta, secondary text */
  --fs-body: 16px;
  --fs-h3: clamp(22px, 2.4vw, 32px);   /* room, ticket and package names */
  --track-label: 0.14em; /* every small uppercase label */
  --track-action: 0.2em; /* buttons and text links */
  --btn-track: rgba(0, 0, 0, 0.2);          /* the soft groove the primary button sits in (see-through, not a black ring) */
  --btn-lip: rgba(255, 240, 230, 0.07);     /* its outer lip catching the light */
  --btn-drop: 0 8px 24px rgba(20, 0, 3, 0.42);   /* light from above, shadow falls 8px down */

  /* vertical rhythm */
  --space-section: clamp(64px, 9vw, 128px);
  --space-section-tight: clamp(48px, 6vw, 88px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ivory);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: 3px; }
::selection { background: var(--crimson); color: var(--ivory); }
html { scrollbar-color: rgba(239, 230, 214, 0.22) var(--bg); }
input, textarea { caret-color: var(--crimson-hi); }

/* ---------- Language switching: both languages ship in the HTML ---------- */
html[data-lang="en"] [lang="zh"]:not(html) { display: none !important; }
html[data-lang="zh"] [lang="en"]:not(html) { display: none !important; }
[lang="zh"] { font-family: var(--f-zh); }

/* ---------- Grain over everything ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--space-section); position: relative; }
.section--tight { padding-block: var(--space-section-tight); }

/* ---------- Type ---------- */

.display {
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
}
.display [lang="zh"] { font-family: var(--f-zh-display); font-weight: 900; letter-spacing: 0.04em; line-height: 1.15; }
.h1 { font-size: clamp(36px, 5.6vw, 80px); }
.h2 { font-size: clamp(28px, 3.6vw, 52px); }
.h3 { font-size: var(--fs-h3); }
.lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--ivory-2); max-width: 40ch; margin: 0; }
.lead [lang="zh"] { line-height: 1.9; }
.lead--lines { max-width: none; }   /* one sentence per line where the screen allows */
.muted { color: var(--ivory-2); }
.num { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; font-variant-numeric: tabular-nums; }
.crimson { color: var(--crimson-hi); }
.outline-text { color: transparent; -webkit-text-stroke: 1px var(--ivory-3); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }   /* screen readers only */

/* ---------- Buttons ---------- */
.btn {
  --b: var(--line-2);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--b);
  font-family: var(--f-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms var(--ease), border-color 200ms var(--ease), transform 160ms var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn [lang="zh"] { letter-spacing: 0.2em; font-size: 14px; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ivory);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 250ms var(--ease);
}
.btn .ico { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: var(--bg); border-color: var(--ivory); }
  .btn:hover::before { clip-path: inset(0 0 0 0); }
  .btn:hover .ico { transform: translateX(4px); }
}

.link-line {
  font-family: var(--f-display); font-stretch: 125%; font-weight: 600; font-size: 12px;
  letter-spacing: 0.2em; text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 4px;
  transition: color 150ms;
}
/* Compare all rates, Room details, See all photos (owner, 2 Oct 2026): the words and their underline turn Lantern Red */
@media (hover: hover) and (pointer: fine) {
  .link-line:hover { color: var(--crimson-hi); }
}
.link-line:focus-visible { color: var(--crimson-hi); }

/* ==========================================================
   Header
   ========================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--header-h);
  transition: background 300ms, border-color 300ms, transform 200ms var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid {
  background: rgba(10, 6, 7, 0.78);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border-color: var(--line);
}
.site-header.is-hidden { transform: translateY(-100%); transition: background 300ms, border-color 300ms, transform 300ms var(--ease); }
.site-header .wrap { height: 100%; display: flex; align-items: center; gap: 28px; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand img { height: 50px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: 14px; letter-spacing: 0.14em; }
.brand-text small { font-family: var(--f-zh-display); font-size: 12px; color: var(--ivory-2); letter-spacing: 0.3em; }

.nav { display: flex; gap: 26px; margin-left: auto; }
.nav a {
  position: relative;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 500;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ivory-2);
  padding-block: 8px;
  white-space: nowrap;
  transition: color 200ms;
}
.nav a [lang="zh"] { font-size: 14px; letter-spacing: 0.1em; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--crimson-hi); transform: scaleX(0); transform-origin: right;
  transition: transform 250ms var(--ease);
}
.nav a[aria-current="page"] { color: var(--ivory); }
.nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (hover: hover) and (pointer: fine) {
  .nav a:hover { color: var(--ivory); }
  .nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

.header-tools { display: flex; align-items: center; gap: 14px; }
.lang-toggle {
  display: inline-flex; border: 1px solid var(--line-2); height: 40px;
  font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label);
}
.lang-toggle button { padding: 0 11px; color: var(--ivory-3); transition: color 150ms, background 150ms; }
.lang-toggle button[aria-pressed="true"] { color: var(--bg); background: var(--ivory); }
.lang-toggle button[data-set="zh"] { font-family: var(--f-zh); font-size: 13px; }
.call-btn, .member-btn {
  height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase;
  white-space: nowrap;
  transition: background 150ms, border-color 150ms, color 150ms;
}
.call-btn { background: var(--crimson); color: var(--ivory); font-variant-numeric: tabular-nums; letter-spacing: 0.06em; }
.member-btn { border: 1px solid var(--line-2); color: var(--ivory-2); }
.member-btn[aria-current="page"] { color: var(--ivory); border-color: var(--ivory-2); }
.member-btn [lang="zh"] { font-size: 13px; }
@media (hover: hover) and (pointer: fine) {
  .call-btn:hover { background: var(--crimson-hi); }
  .member-btn:hover { color: var(--ivory); border-color: var(--ivory); }
}
.call-btn svg, .member-btn svg { width: 15px; height: 15px; flex: none; }
.lang-toggle button { white-space: nowrap; }
.cb-short { display: none; }
/* full menu + tools only fit wide screens: shorten the tools in between */
@media (min-width: 1241px) and (max-width: 1480px) {
  .nav { gap: 22px; }
  .call-btn .cb-label, .member-btn .mb-label { display: none; }
  .call-btn .cb-short { display: inline; }
}

.burger { display: none; width: 44px; height: 44px; position: relative; }
.burger span { position: absolute; left: 11px; right: 11px; top: 22px; height: 1px; background: var(--ivory); transition: transform 250ms var(--ease); }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.menu-open .burger span:nth-child(1) { transform: rotate(45deg); }
.menu-open .burger span:nth-child(2) { transform: rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  padding: calc(var(--header-h) + 24px) var(--gutter) 32px;
  display: flex; flex-direction: column; gap: 6px;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 250ms var(--ease), visibility 0s 250ms;
  overflow-y: auto;
}
.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 450ms var(--ease-drawer), visibility 0s; }
.mobile-menu a.m-link {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-block: 14px; border-bottom: 1px solid var(--line);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(24px, 7vw, 34px); text-transform: uppercase;
  opacity: 0; transform: translateY(12px);
  transition: opacity 150ms, transform 150ms;
}
.mobile-menu a.m-link [lang="zh"] { font-family: var(--f-zh-display); font-weight: 900; }
.menu-open .mobile-menu a.m-link { opacity: 1; transform: none; transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.menu-open .mobile-menu a.m-link:nth-child(2) { transition-delay: 40ms; }
.menu-open .mobile-menu a.m-link:nth-child(3) { transition-delay: 80ms; }
.menu-open .mobile-menu a.m-link:nth-child(4) { transition-delay: 120ms; }
.menu-open .mobile-menu a.m-link:nth-child(5) { transition-delay: 160ms; }
.menu-open .mobile-menu a.m-link:nth-child(6) { transition-delay: 200ms; }
.mobile-menu .m-foot { margin-top: auto; padding-top: 28px; color: var(--ivory-2); font-size: 14px; display: grid; gap: 6px; }
.menu-open { overflow: hidden; }

@media (max-width: 1240px) {
  .nav { display: none; }
  .burger { display: block; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 520px) {
  .brand-text { display: none; }
  .member-btn .mb-label, .call-btn .cb-label, .call-btn .cb-short { display: none; }
  .member-btn, .call-btn { padding: 0 12px; }
}

/* ==========================================================
   Silk canvas (WebGL) backgrounds
   ========================================================== */
.silk {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block;
  background:
    radial-gradient(60% 50% at 70% 40%, #5a0a10 0%, transparent 70%),
    radial-gradient(50% 60% at 20% 80%, #3a0609 0%, transparent 70%),
    var(--bg);
}

/* ==========================================================
   Home hero
   ========================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(10,6,7,0.2) 38%, transparent 60%),
    linear-gradient(to right, rgba(10,6,7,0.55), transparent 55%);
}
.has-page-silk .hero::after {   /* the page-wide glow carries on below the hero, so no solid band at its foot */
  background:
    linear-gradient(to top, rgba(10,6,7,0.55) 0%, transparent 40%),
    linear-gradient(to right, rgba(10,6,7,0.55), transparent 55%);
}
/* Silk-and-ink artwork (Higgsfield, owner, 21 Oct 2026). No blend mode: screen blending drew a grey box around the logo and made the video stutter */
.hero-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-art :is(img, video) { width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 900ms var(--ease); }
.hero-video.is-on { opacity: 1; }   /* fades in over the still picture once it plays */
/* the silk fades to the page colour at its foot and the next section opens with the same dark, fading into the page-wide glow: no edge where the hero ends.
   A still gradient laid over the picture, never a mask: Safari redrew a masked video on every scroll step */
.hero-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 78%, rgba(10, 6, 7, 0.6) 92%, var(--bg) 100%); }
.hero + .section::before { content: ""; position: absolute; inset: 0 0 auto; height: 220px; z-index: -1; pointer-events: none;
  background: linear-gradient(var(--bg), transparent); }
@media (min-width: 861px) {   /* computers: the silk fills the whole screen and everything is centred, logo on top (owner, layout A, 22 Oct 2026); a soft dark pool behind the headline and buttons keeps them readable */
  .has-page-silk .hero::after {
    background:
      radial-gradient(ellipse 18% 30% at 50% 30%, rgba(10, 6, 7, 0.78), transparent),   /* behind the logo */
      radial-gradient(ellipse 36% 32% at 50% 66%, rgba(10, 6, 7, 0.75), transparent),   /* behind the headline, lead and buttons */
      linear-gradient(to top, rgba(10, 6, 7, 0.55) 0%, transparent 40%);
  }
  .hero .hero-inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: clamp(18px, 2.6svh, 30px); }
  .hero .hero-mark { width: clamp(130px, 22svh, 230px); margin-bottom: clamp(6px, 1.6svh, 16px); }   /* sized by the screen height so short laptops still fit the whole hero; sits a little higher (owner, 22 Oct 2026) */
  .hero .hero-copy { justify-items: center; gap: 22px; }
  .hero .hero-copy .h1 { font-size: clamp(36px, 3.6vw, 56px); }
  .hero .hero-copy .lead { max-width: 40em; }
  .hero .hero-cta { justify-content: center; }
}
@media (min-width: 861px) {   /* computers: room box to Inside the rooms about 96px, not 256 (owner, 22 Oct 2026) */
  #rooms { padding-bottom: 0; }
  #rooms + .section { padding-top: clamp(64px, 6.5vw, 96px); }
}
@media (min-width: 861px) and (max-height: 820px) {   /* short laptops: a little less air at the top so the Hours boxes stay on the first screen */
  .hero .hero-inner { padding-top: calc(var(--header-h) + 12px); }
  .hero .hero-mark { width: clamp(116px, 19svh, 200px); margin-bottom: 0; }
}
@media (max-width: 860px) {   /* phones: the silk runs the whole hero, down past the buttons and the Hours boxes (owner, 22 Oct 2026) */
  .hero { background: var(--bg); }
  .has-page-silk .hero::after { background: linear-gradient(to right, rgba(10, 6, 7, 0.22), transparent 60%); }   /* phones: only a light shade on the left, so the silk keeps its colour (owner, 22 Oct 2026); the art's own fade covers the bottom */
  .hero-art :is(img, video) { object-position: center top; }
  .hero-art { bottom: var(--bar-h, 0px); overflow: hidden; }   /* the picture reaches down to just above the Hours box (home.js measures the boxes) */
  .hero-art :is(img, video) { height: 128%; }   /* zoomed from the top: the artwork's own lower part is dark, so the silk and smoke now reach the boxes */
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  padding-top: calc(var(--header-h) + 40px);
  padding-bottom: clamp(28px, 5vw, 56px);
}
.hero-mark {
  display: block;
  width: min(100%, 300px);
  justify-self: center;
  /* no shadow or filter: on the owner's iPhone any filter here drew a dark smudge round 门 while the page reloaded over the video (22 Oct 2026) */
}
.hero-logo { display: block; width: 100%; height: auto; animation: logoIn 2.6s 0.3s cubic-bezier(0.33, 0, 0.2, 1) backwards; }   /* a slow, soft fade-in every visit (owner, 22 Oct 2026; replaced the top-down ink wipe and the ink-painting video) */
@keyframes logoIn { from { opacity: 0; } to { opacity: 1; } }
.hero-copy { display: grid; gap: 26px; padding-bottom: 12px; }
.hero-copy .h1 { font-size: clamp(34px, 4vw, 60px); }
.hero-copy .h1 span.line { display: block; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.hero-bar {
  position: relative; z-index: 2;
  border-top: 1px solid var(--line);
}
.hero-bar .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); }
.keep { white-space: nowrap; }   /* a short phrase that should not break across lines */
.hero-bar .cell { align-content: start; }
#hero-rating { display: flex; align-items: center; gap: 6px; }
#hero-rating .ico { width: 14px; height: 14px; flex: none; color: var(--crimson-hi); }
.hero-bar .cell { padding: 20px 0; display: grid; gap: 2px; }
.hero-bar .cell + .cell { padding-left: 24px; border-left: 1px solid var(--line); }
.hero-bar small { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); }
.hero-bar small [lang="zh"] { font-size: 12px; letter-spacing: 0.2em; }
.hero-bar span, .hero-bar a { font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .hero-bar a:hover { color: var(--crimson-hi); } }


@media (max-width: 860px) {
  .hero-inner { grid-template-columns: 1fr; align-items: start; gap: 28px; padding-top: calc(var(--header-h) + 24px); }
  .hero-mark { width: min(34vw, 150px); justify-self: center; }   /* in the silk artwork's dark pocket (owner, 21 Oct 2026) */
  .hero-bar .wrap { grid-template-columns: 1fr 1fr; grid-auto-flow: dense; }   /* Hours | Rating, then the address full width */
  .hero-bar .cell:nth-child(2) { grid-column: 1 / -1; }
  .hero-bar .cell { padding: 12px 0; }
  .hero-bar .cell + .cell { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }
}

/* ==========================================================
   Moving strip loop
   ========================================================== */
/* one moving strip per page: the room-name strip was removed (audit, 20 Oct 2026); the photo strip below still uses this loop */
@keyframes marquee { to { transform: translateX(-50%); } }

/* ==========================================================
   Section heads
   ========================================================== */
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: clamp(36px, 5vw, 64px); }
.sec-head .left { display: grid; gap: 18px; }
.sec-head > a { justify-self: start; }
@media (max-width: 720px) { .sec-head { grid-template-columns: 1fr; } }

/* ==========================================================
   Room showcase (home)
   ========================================================== */
.showcase { display: grid; grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.6fr); gap: clamp(20px, 3vw, 44px); align-items: start; }

.rs-list { display: grid; border-top: 1px solid var(--line); }
.rs-tab {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  padding: 15px 12px 15px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  color: var(--ivory-3);
  transition: color 200ms;
}
/* Light sweep: a crimson band wipes in from the left edge */
.rs-tab::after {
  content: ""; position: absolute; inset: 0 0 -1px -16px; z-index: -1;
  background: linear-gradient(90deg, rgba(186, 27, 29, 0.42), rgba(186, 27, 29, 0.1) 62%, transparent);
  box-shadow: inset 2px 0 0 var(--crimson-hi);
  clip-path: inset(0 100% 0 0); transition: clip-path 380ms var(--ease), opacity 200ms;
}
.rs-tab[aria-selected="true"]::after { clip-path: inset(0 0 0 0); opacity: 0.55; }
/* Room photo that replaces the guest count on hover */
.rs-tab .px { transition: opacity 180ms; }
.rs-tab .thumb {
  position: absolute; right: 12px; top: 50%; width: 72px; height: 48px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg-3); border: 1px solid rgba(239, 230, 214, 0.2);
  font-family: var(--f-zh-display); font-size: 14px; color: var(--ivory-3);
  opacity: 0; transform: translateY(-50%) translateX(8px) scale(0.94);
  transition: opacity 220ms var(--ease), transform 320ms var(--ease); pointer-events: none;
}
.rs-tab .thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (pointer: fine) {
  .rs-tab:hover::after { clip-path: inset(0 0 0 0); opacity: 1; }
  .rs-tab:hover .nm { transform: translateX(10px); }
  .rs-tab:hover .px { opacity: 0; }
  .rs-tab:hover .thumb { opacity: 1; transform: translateY(-50%) translateX(0) scale(1); }
}
.rs-tab:focus-visible::after { clip-path: inset(0 0 0 0); opacity: 1; }
.rs-tab .nm { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: clamp(15px, 1.35vw, 19px); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.2; }
.rs-tab .nm small { display: block; font-family: var(--f-zh-display); font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.2em; margin-top: 3px; text-transform: none; }
.rs-tab .px { font-size: 12px; font-family: var(--f-display); font-stretch: 112%; white-space: nowrap; }
.rs-tab::before {
  content: ""; position: absolute; left: -14px; top: 50%; width: 6px; height: 6px; margin-top: -3px;
  background: var(--crimson-hi); opacity: 0; transform: scale(0.5) rotate(45deg); transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.rs-tab .nm { transition: transform 250ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .rs-tab:hover { color: var(--ivory); } }
.rs-tab[aria-selected="true"] { color: var(--ivory); }
.rs-tab[aria-selected="true"] .nm { transform: translateX(10px); }
.rs-tab[aria-selected="true"]::before { opacity: 1; transform: scale(1) rotate(45deg); }

.rs-stage { position: relative; }
.rs-frame {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--bg-2);
  border: 1px solid var(--line);
}
.rs-slide {
  position: absolute; inset: 0;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 550ms var(--ease);
  z-index: 1;
}
.rs-slide img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); transition: transform 900ms var(--ease); }
.rs-slide.is-active { clip-path: inset(0 0 0 0); z-index: 2; }
.rs-slide.is-active img { transform: scale(1.02); }
.rs-slide.is-leaving { clip-path: inset(0 0 0 0); z-index: 1; }
.no-photo {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center; gap: 10px;
  background: radial-gradient(70% 70% at 50% 40%, #3b0a0e, var(--bg-2));
}
.no-photo .big { font-family: var(--f-zh-display); font-weight: 900; font-size: clamp(56px, 9vw, 130px); color: rgba(239,230,214,0.1); line-height: 1; }
.no-photo p { margin: 0; font-size: var(--fs-small); color: var(--ivory-3); letter-spacing: 0.1em; }


.rs-info {
  display: grid; grid-template-columns: 1fr auto; gap: 20px clamp(18px, 3vw, 40px); align-items: start;
  border: 1px solid var(--line); border-top: 0;
  background: linear-gradient(180deg, var(--bg-2), var(--bg));
  padding: clamp(18px, 2.4vw, 28px);
}
.rs-name { grid-column: 1 / -1; margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.05; }
.rs-name small { display: block; margin-top: 6px; font-family: var(--f-zh-display); font-weight: 600; font-size: 14px; letter-spacing: 0.2em; color: var(--ivory-2); text-transform: none; }
.rs-price { display: grid; align-content: start; gap: 4px; }
.rs-price .cur { font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); color: var(--crimson-hi); }
.rs-price .amt { font-size: clamp(34px, 4vw, 54px); line-height: 1; }
.rs-price .per { font-size: var(--fs-label); color: var(--ivory-3); }
.rs-inc {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.rs-inc li { display: grid; gap: 1px; }
.rs-inc li + li { border-left: 1px solid var(--line); padding-left: 12px; }
.rs-inc .n { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.1; }
.rs-inc .l { font-size: 12px; color: var(--ivory-2); }
/* guests sit on the price row, at the right, bottom-aligned so both captions share a line */
.rs-meta { display: grid; gap: 10px; text-align: right; grid-column: 2; grid-row: 2; align-self: end; }
.rs-meta .pax b { display: block; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; }
.rs-meta .pax span { display: block; margin-top: 4px; font-size: var(--fs-label); color: var(--ivory-3); }
.rs-meta .ext { font-size: 12px; color: var(--ivory-2); line-height: 1.7; }
.rs-meta .ext b { color: var(--ivory); font-weight: 600; }
.rs-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ivory-2); padding-top: 14px; border-top: 1px solid var(--line); }
.rs-foot b { color: var(--ivory); font-weight: 600; }

.swap-in { animation: swapIn 240ms var(--ease) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 980px) {
  .showcase { grid-template-columns: 1fr; }
  .rs-list {
    display: flex; overflow-x: auto; gap: 8px; border: 0; padding-bottom: 6px;
    scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter);
  }
  .rs-list::-webkit-scrollbar { display: none; }
  .rs-tab { display: block; flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--line); padding: 10px 14px; }
  .rs-tab .px, .rs-tab::before, .rs-tab::after, .rs-tab .thumb { display: none; }
  .rs-tab .nm { font-size: var(--fs-small); }
  .rs-tab .nm small { font-size: 12px; }
  .rs-tab { transition: color 200ms, border-color 200ms, background 200ms; }
  .rs-tab[aria-selected="true"] { border-color: var(--crimson); background: var(--crimson-wash-2); }
  .rs-tab[aria-selected="true"] .nm { transform: none; }
}
@media (max-width: 560px) {
  .rs-inc { grid-template-columns: repeat(3, 1fr); row-gap: 16px; }
  .rs-inc li:nth-child(4) { border-left: 0; padding-left: 0; }
}


/* ==========================================================
   Horizontal gallery strip (home)
   ========================================================== */
.strip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
/* each item carries its own right margin so both halves are exactly equal and -50% loops seamlessly */
.strip-track { display: flex; width: max-content; animation: marquee 150s linear infinite; }
.strip a { flex: 0 0 auto; width: clamp(200px, 24vw, 320px); aspect-ratio: 4 / 5; margin-right: 14px; overflow: hidden; position: relative; background: var(--bg-2); }
.strip a img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), filter 400ms; filter: saturate(0.85); }
.strip:focus-within .strip-track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) {
  .strip:hover .strip-track { animation-play-state: paused; }
  .strip a:hover img { transform: scale(1.05); filter: saturate(1.1); }
}

/* ==========================================================
   Visit block
   ========================================================== */
.visit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 72px); align-items: stretch; }
.visit-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.visit-list li { display: grid; grid-template-columns: clamp(96px, 9vw, 120px) 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.visit-list .k { font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); padding-top: 4px; }
.visit-list .k [lang="zh"] { font-size: 12px; letter-spacing: 0.2em; }
.visit-list .v { font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .visit-list a.v:hover { color: var(--crimson-hi); } }
.map {
  position: relative; min-height: 360px; border: 1px solid var(--line); overflow: hidden; background: var(--bg-2);
}
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn-row + .btn-row { margin-top: 12px; }
/* the two direction buttons always sit side by side, sharing the row */
.btn-row--pair { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); }
@media (max-width: 420px) {   /* tighter label so "Google Maps" stays on one line on phones */
  .btn-row--pair { grid-template-columns: 1fr 1fr; }
  .btn-row--pair .btn { justify-content: center; padding-inline: 8px; gap: 8px; letter-spacing: 0.12em; white-space: nowrap; }
  .btn-row--pair .btn .ico { display: none; }   /* the arrow is decoration; the words matter more on a narrow phone */
}
@media (max-width: 340px) { .btn-row--pair .btn { letter-spacing: 0.06em; padding-inline: 4px; } }   /* 320px phones */
@media (max-width: 980px) { .visit { grid-template-columns: 1fr; } }   /* stack before the address column gets too narrow */
@media (max-width: 860px) { .visit-list li { grid-template-columns: 96px 1fr; } }
/* phones: label above the value, so the address keeps its three lines */
@media (max-width: 480px) { .visit-list li { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } .visit-list .k { padding-top: 0; } }

/* ==========================================================
   Footer
   ========================================================== */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(48px, 7vw, 88px) 28px; background: var(--bg); position: relative; overflow: hidden; }
.foot-grid { display: grid; grid-template-columns: 1.1fr max-content 1fr 1fr; gap: 32px; }   /* the address keeps its three lines */
.foot-grid h2 { margin: 0 0 16px; line-height: inherit; font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); }
.foot-grid h2 [lang="zh"] { font-size: 12px; }   /* footer headings are h2 so no page skips a heading level */
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; color: var(--ivory-2); }
@media (hover: hover) and (pointer: fine) { .foot-grid a:hover { color: var(--ivory); } }
.foot-logo img { height: 120px; width: auto; }
.foot-word {
  margin-top: clamp(40px, 6vw, 80px);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 8.8vw, 136px); line-height: 0.8; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: 1px rgba(239,230,214,0.14);
  white-space: nowrap; user-select: none;
}
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ivory-3); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-logo, .foot-find { grid-column: 1 / -1; } }

/* ==========================================================
   Sub-page header
   ========================================================== */
.page-head { position: relative; overflow: hidden; isolation: isolate; }
.page-head::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--bg), rgba(10,6,7,0.1) 60%); pointer-events: none; }
.page-head .wrap { position: relative; z-index: 2; padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px)); padding-bottom: clamp(8px, 2vw, 24px); display: grid; gap: 20px; }
.page-head .h1 { font-size: clamp(34px, 6.4vw, 80px); overflow-wrap: break-word; }
/* Header art (Higgsfield, owner, 22 Oct 2026). Computers: the whole 16:9 picture on the right, its right edge in line with the
   top bar, fading towards the title on the left, softly at its right edge (owner) and into the page below. Phones: full width behind the title, dimmed to 50%. */
.page-art { position: absolute; inset: calc(var(--header-h) + 16px) var(--hx) auto auto; width: min(58%, 840px); aspect-ratio: 16 / 9; z-index: 0; pointer-events: none;   /* starts below the floating top bar */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 30%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 62%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 30%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 62%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.page-art img { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.page-art--member { left: var(--hx); width: auto; height: min(84svh, 760px); aspect-ratio: auto;   /* member login: a big picture behind the login box, spanning the top bar's width, both sides fading (owner, 22 Oct 2026) */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 64%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 40%, #000 86%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 64%, transparent); }
body.is-signed-in .page-art--member { display: none; }   /* signed in, the member card is the picture; two pictures stacked fought each other */
.member-main { position: relative; isolation: isolate; }
.member-main > .wrap { position: relative; z-index: 1; }
.page-head:has(.page-art) { overflow: visible; }   /* the picture reaches down behind the next heading */
.page-head:has(.page-art) ~ * { position: relative; }   /* so the sections below paint above it */
.page-head:has(.page-art) :is(.h1, .lead) { text-shadow: 0 1px 12px rgba(10, 6, 7, 0.85); }   /* the title stays crisp where it crosses the picture */
@media (max-width: 860px) {
  .page-art { left: 0; right: 0; width: 100%; height: min(78svh, 640px); aspect-ratio: auto; opacity: 0.5;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 55%, transparent); }
}
@media (max-width: 860px) {
  /* phones: every page's top reads the same and sits close (owner, 22 Oct 2026): titles on one line at one size, the title
     24px under the top bar, and the content 32px under the intro on Rooms, Food & Drinks, Events, Gallery and Visit Us */
  .page-head .h1 { font-size: clamp(26px, 8vw, 34px); }
  .page-head .wrap { padding-top: calc(var(--header-h) + 16px); }
  .page-head ~ section:not([hidden]):is(.page-head + *, .page-head + [hidden] + *) { padding-top: 24px; }   /* the first shown section (Events hides its promotions block when none is on) */
}
@media print { .page-art { display: none; } }

/* 404: the outlined numeral is the footer wordmark's language at hero scale; the page fills the screen so the footer never floats mid-view */
.nf { min-height: calc(100svh - 40px); display: grid; align-content: center; }
.nf .wrap { padding-bottom: clamp(56px, 9vw, 120px); }
.nf-code {
  margin: 0 0 clamp(-8px, -1vw, -4px);
  font-family: var(--f-display); font-stretch: 125%; font-weight: 900;
  font-size: clamp(120px, 26vw, 340px); line-height: 0.8; letter-spacing: -0.02em;
  color: transparent; -webkit-text-stroke: clamp(1px, 0.15vw, 2px) rgba(239, 230, 214, 0.55);
  user-select: none;
}
.nf-actions { margin-top: 8px; }
@media (max-width: 520px) {   /* stacked, the three actions share one width instead of three ragged ones */
  .nf-actions { display: grid; grid-template-columns: 1fr; }
  .nf-actions .btn { justify-content: center; }
}

/* ==========================================================
   Rooms page
   ========================================================== */
.tier-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); }
.tier-table th, .tier-table td { padding: 16px 18px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tier-table thead th { font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); background: var(--bg-2); }
.tier-table thead th [lang="zh"] { font-size: 12px; letter-spacing: 0.14em; }
.tier-table tbody tr { transition: background 150ms; }
@media (hover: hover) and (pointer: fine) { .tier-table tbody tr:hover { background: var(--crimson-wash); } }
.tier-table td.rn b { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; text-transform: uppercase; font-size: 14px; letter-spacing: 0.04em; }
.tier-table td.rn small { display: block; font-family: var(--f-zh-display); color: var(--ivory-3); font-size: 12px; margin-top: 2px; }
.tier-table td.pr { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; color: var(--ivory); }
.tier-table .c { text-align: center; font-variant-numeric: tabular-nums; }
.tier-table tbody tr:last-child td { border-bottom: 0; }

/* Folding rate table (Rooms page): a bar that opens into the table below it */
#rates { scroll-margin-top: calc(var(--header-h) + 16px); }
.fold-bar {
  width: 100%; min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 2vw, 22px); border: 1px solid var(--line); background: var(--bg-2);
  color: var(--ivory); text-align: left; cursor: pointer;
  transition: border-color 200ms var(--ease), background-color 200ms var(--ease);
}
@media (hover: hover) and (pointer: fine) { .fold-bar:hover { border-color: var(--line-2); } }
.fold-bar:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: -2px; }
.fold-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.fold-title { font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; }
.fold-title [lang="zh"] { font-size: 13px; letter-spacing: 0.14em; }
.fold-sum { font-family: inherit; font-stretch: normal; font-weight: 400; font-size: 14px; color: var(--ivory-2); }
.fold-sum span span { white-space: nowrap; }
.fold-act { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; }
.fold-act [lang="zh"] { font-size: 13px; letter-spacing: 0.1em; }
.fold-act .ico { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 300ms var(--ease); }
.fold-hide, .fold.is-open .fold-show { display: none; }
.fold.is-open .fold-hide { display: inline; }
.fold.is-open .fold-act .ico { transform: rotate(-90deg); }
/* 0fr -> 1fr opens to the table's real height; hidden content leaves the tab order and reading order */
.fold-panel { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows 300ms var(--ease), visibility 0s linear 300ms; }
.fold.is-open .fold-panel { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 300ms var(--ease), visibility 0s; }
.fold-inner { min-height: 0; overflow: hidden; }
.fold .table-scroll { border-top: 0; }

.room-block {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px);
  padding-block: var(--space-section-tight); border-top: 1px solid var(--line);
  scroll-margin-top: var(--header-h);
  align-items: center;
}
.room-block.is-flip .room-media { order: 2; }
.room-media { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: end; }
.room-media .main { aspect-ratio: 16 / 11; overflow: hidden; background: var(--bg-2); position: relative; }
.room-media .side { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); transform: translateY(40px); }
.room-media img { width: 100%; height: 100%; object-fit: cover; }
.room-media .main img { transform: scale(1.12); }
.room-media.single { grid-template-columns: 1fr; }
.room-body { display: grid; align-content: center; gap: 22px; }
.room-name { font-size: clamp(28px, 3.4vw, 48px); }
.room-name small { display: block; font-family: var(--f-zh-display); font-weight: 600; font-size: 0.36em; letter-spacing: 0.2em; color: var(--ivory-2); margin-top: 10px; text-transform: none; }
.spec { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); }
.spec > div { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
.spec > div:nth-child(odd) { padding-right: 16px; }
.spec > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
.spec .k { font-size: 12px; color: var(--ivory-3); }
.spec .v { font-size: 20px; white-space: nowrap; }
.spec .v.price { font-size: 30px; }
.inc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inc-chips > span { border: 1px solid var(--line-2); padding: 6px 12px; font-size: var(--fs-small); }
.inc-chips b { font-family: var(--f-display); font-stretch: 125%; margin-right: 6px; color: var(--ivory); }
@media (max-width: 900px) {
  .room-block { grid-template-columns: 1fr; }
  .room-block.is-flip .room-media { order: 0; }
  .room-media .side { transform: none; }
}

/* Room rail (Rooms page): nine rooms side by side, one open at a time.
   Adapted from "Hover Expand Gallery" by kedhareswer (21st.dev). */
.room-rail {
  --rail: 60px;
  list-style: none; margin: 0 0 28px; padding: 0;
  display: flex; height: clamp(360px, 36vw, 480px);
  border-right: 1px solid var(--line);
  container-type: inline-size;
}
.hx {
  position: relative; min-width: 0; overflow: hidden;
  flex: 0 0 var(--rail); border-left: 1px solid var(--line);
  transition: flex-basis 620ms var(--ease-drawer), border-color 300ms;
}
.hx.is-open { flex-basis: calc(100% - (var(--n) - 1) * var(--rail)); border-left-color: var(--crimson); }
.hx-tab {
  position: absolute; inset: 0 auto 0 0; width: var(--rail);
  display: flex; flex-direction: column-reverse; justify-content: space-between; align-items: center;
  padding: 18px 0; color: var(--ivory-3); transition: color 300ms;
}
.hx.is-open .hx-tab { color: var(--ivory); }
.hx-tab:focus-visible { outline: 2px solid var(--ivory); outline-offset: -4px; }
.hx-name {
  writing-mode: vertical-rl; white-space: nowrap;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: 13px;
  letter-spacing: var(--track-label); text-transform: uppercase;
}
html[data-lang="en"] .hx-name { transform: rotate(180deg); }       /* English reads bottom to top */
.hx-name [lang="zh"] { font-family: var(--f-zh-display); font-size: 16px; letter-spacing: 0.3em; }   /* Chinese stays upright, top to bottom */
.hx-pax { font-size: 12px; letter-spacing: 0.04em; }
.hx-pax .u { display: none; }
/* The photo keeps the open width, so opening reveals it instead of squashing it */
.hx-body {
  position: absolute; top: 10px; bottom: 10px; left: var(--rail);
  width: calc(100cqw - var(--n) * var(--rail) - 10px);
  overflow: hidden; opacity: 0; transition: opacity 400ms var(--ease);
}
.hx.is-open .hx-body { opacity: 1; }
.hx-body img { width: 100%; height: 100%; object-fit: cover; }
.hx-none {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(70% 70% at 50% 40%, #3b0a0e, var(--bg-2));
  font-family: var(--f-zh-display); font-weight: 900; font-size: clamp(56px, 7vw, 110px); color: rgba(239, 230, 214, 0.1);
}
.hx-info {
  position: absolute; inset: auto 0 0 0; display: grid; gap: 6px; justify-items: start;
  padding: clamp(18px, 2.4vw, 28px);
  background: linear-gradient(to top, rgba(10, 6, 7, 0.9), rgba(10, 6, 7, 0.55) 60%, transparent);
  opacity: 0; transform: translateY(10px);
  transition: opacity 300ms var(--ease), transform 400ms var(--ease);
}
.hx.is-open .hx-info { opacity: 1; transform: none; transition-delay: 220ms; }
.hx-title { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: var(--fs-h3); text-transform: uppercase; line-height: 1.05; }
.hx-title [lang="zh"] { font-family: var(--f-zh-display); font-weight: 900; }
.hx-meta { font-size: var(--fs-small); color: var(--ivory-2); }
.hx-go {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 6px;
  font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label);
  letter-spacing: var(--track-action); text-transform: uppercase; color: var(--ivory);
  border-bottom: 1px solid var(--crimson); padding-bottom: 4px;
}
.hx-go .ico { transition: transform 300ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .hx-body:hover .hx-go .ico { transform: translateX(4px); }
  .hx:not(.is-open):hover .hx-tab { color: var(--ivory-2); }
}
.hx-body:focus-visible { outline: 2px solid var(--ivory); outline-offset: -2px; }

/* Phones and tablets: the same list becomes an accordion */
@media (max-width: 900px) {
  .room-rail { flex-direction: column; height: auto; border-right: 0; border-top: 1px solid var(--line); }
  .hx { flex: none; border-left: 0; border-bottom: 1px solid var(--line); transition: none; }
  .hx.is-open { border-bottom-color: var(--crimson); }
  .hx-tab { position: static; width: 100%; min-height: 56px; flex-direction: row; padding: 0 2px; }
  .hx-name { writing-mode: horizontal-tb; }
  html[data-lang="en"] .hx-name { transform: none; }
  .hx-name [lang="zh"] { letter-spacing: 0.1em; }
  .hx-pax { font-size: 13px; }
  .hx-pax .u { display: inline; color: var(--ivory-3); }
  .hx-body {
    position: relative; inset: auto; display: block; width: 100%; height: 0;
    transition: height 300ms var(--ease-drawer), opacity 200ms var(--ease);   /* UI opens in 300ms (audit, 20 Oct 2026) */
  }
  .hx.is-open .hx-body { height: clamp(220px, 56vw, 340px); margin-bottom: 14px; }
  .hx-title { display: none; }   /* the row above already names the room */
  /* without the title the shade is shorter, so make it deeper: the price line stays readable over bright LEDs */
  .hx-info { padding-top: 56px; background: linear-gradient(to top, rgba(10, 6, 7, 0.94), rgba(10, 6, 7, 0.8) 55%, transparent); }
  .hx-meta { color: var(--ivory); }
  .hx-none { font-size: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .hx, .hx-body { transition: opacity 200ms; }
  .hx-info { transform: none; transition: opacity 200ms; }
  .hx.is-open .hx-info { transition-delay: 0ms; }
}

/* ==========================================================
   Package matrix (Food & Drinks)
   ========================================================== */
.note { border-left: 2px solid var(--crimson); padding: 4px 0 4px 18px; color: var(--ivory-2); max-width: 64ch; }
.menu-sec + .menu-sec { margin-top: 48px; }
.menu-sec h3 { margin: 0 0 12px; }
.menu-row { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px dashed var(--line); }
.menu-row .dots { flex: 1; }
.menu-row .p { font-family: var(--f-display); font-stretch: 125%; font-weight: 700; }

/* ==========================================================
   Promotions & events
   ========================================================== */
.promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.promo-card { border: 1px solid var(--line); background: var(--bg-2); display: grid; }
.promo-card img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.promo-card .pc-body { padding: 18px; display: grid; gap: 6px; }
.promo-card .pc-body h3 { margin: 0; font-size: 18px; }
.promo-card .pc-body p { margin: 0; color: var(--ivory-2); font-size: 14px; }
.promo-card .until { font-size: 12px; color: var(--crimson-hi); }
.empty { border: 1px dashed var(--line-2); padding: 32px; color: var(--ivory-2); text-align: center; }


/* spotlight hover used on cards */
.spot { --mx: 50%; --my: 50%; }
.spot::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 250ms;
  background: radial-gradient(420px circle at var(--mx) var(--my), rgba(186,27,29,0.22), transparent 60%);
}
@media (hover: hover) and (pointer: fine) { .spot:hover::before { opacity: 1; } }

/* Room finder */
.finder { border: 1px solid var(--line-2); background: rgba(18, 10, 12, 0.86); padding: clamp(20px, 3vw, 36px); display: grid; gap: 22px; }
.finder-controls { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); align-items: end; }
.finder-label { display: block; margin-bottom: 10px; font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); }
.stepper { display: flex; align-items: stretch; border: 1px solid var(--line-2); }
.stepper .step { width: 56px; font-size: 28px; line-height: 1; color: var(--ivory-2); transition: background-color 150ms, color 150ms; }
.stepper .step:active { background: var(--crimson-wash-2); }
.stepper input {
  width: 3.2ch; min-width: 96px; text-align: center; border: 0; border-inline: 1px solid var(--line-2);
  background: transparent; color: var(--ivory); font-size: clamp(44px, 5vw, 64px); line-height: 1; padding: 6px 0; -moz-appearance: textfield;
}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stepper input:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: -2px; }
.finder-slide { display: grid; gap: 16px; padding-bottom: 6px; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(to right, var(--crimson) var(--p, 20%), var(--line-2) var(--p, 20%)); outline-offset: 10px; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; background: var(--ivory); border: 2px solid var(--crimson); cursor: grab; }
.range::-moz-range-thumb { width: 18px; height: 18px; background: var(--ivory); border: 2px solid var(--crimson); border-radius: 0; cursor: grab; }
.presets { display: flex; flex-wrap: wrap; gap: 8px; }
.preset { min-width: 52px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line-2); font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: var(--fs-small); color: var(--ivory-2); transition: background-color 150ms, color 150ms, border-color 150ms; }
.preset[aria-pressed="true"] { background: var(--ivory); color: var(--bg); border-color: var(--ivory); }
.finder-hint { margin: 0; padding: 12px 14px; border-left: 2px solid var(--crimson); background: var(--crimson-wash); color: var(--ivory); font-size: var(--fs-small); }
.finder-out { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.fr-card { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 16px; align-items: center; border: 1px solid var(--line); padding: 10px 16px 10px 10px; background: var(--bg); transition: border-color 150ms, background-color 150ms; }
.fr-card img, .fr-card .ph { width: 96px; height: 72px; object-fit: cover; background: var(--bg-3); }
.fr-card .ph { display: grid; place-items: center; font-family: var(--f-zh-display); color: rgba(239, 230, 214, 0.3); font-size: 20px; }
.fr-info { display: grid; gap: 3px; min-width: 0; }
.fr-tag { justify-self: start; font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-3); }
.fr-tag.is-best { color: var(--crimson-hi); }
.fr-card b { font-family: var(--f-display); font-stretch: 125%; text-transform: uppercase; font-size: var(--fs-small); }
.fr-card b .zh { font-family: var(--f-zh); font-weight: 500; text-transform: none; color: var(--ivory-2); white-space: nowrap; }   /* a narrow card moves the Chinese name down whole */
.fr-meta { font-size: var(--fs-small); color: var(--ivory-2); }
.fr-meta > span { white-space: nowrap; }   /* "10-12 guests" and "RM 1,988" never split */
.fr-pp { font-size: var(--fs-label); color: var(--ivory-3); }
.fr-card > .ico { width: 20px; height: 20px; color: var(--ivory-3); transition: transform 200ms var(--ease), color 150ms; }
.finder-cta { display: flex; justify-content: flex-start; }
/* room kept for what the script fills in, so the Events finder and the Visit address don't push the page down as it loads (22 Oct 2026) */
.presets:empty { min-height: 40px; }
.finder-cta { min-height: 48px; }
#addr:empty { display: block; min-height: 99px; }
#finder-out:empty { min-height: 116px; }   /* about the two result cards it shows (not a whole screen), so the Call button doesn't jump up */
@media (max-width: 860px) { #finder-out:empty { min-height: 311px; } }
.finder-cta .btn .ico { width: 16px; height: 16px; }
@media (hover: hover) and (pointer: fine) {
  .stepper .step:hover, .preset:hover { background: var(--crimson-wash); color: var(--ivory); }
  .fr-card:hover { border-color: var(--crimson); background: var(--crimson-wash); }
  .fr-card:hover > .ico { transform: translateX(4px); color: var(--ivory); }
}
@media (max-width: 720px) {
  .finder-controls { grid-template-columns: 1fr; }
  .stepper { justify-content: space-between; }
  .stepper input { flex: 1; }
  .finder-out { grid-template-columns: 1fr; }
}

/* ==========================================================
   Gallery
   ========================================================== */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filters button { border: 1px solid var(--line); padding: 8px 14px; font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-2); transition: color 150ms, background-color 150ms, border-color 150ms; }
.filters button[aria-pressed="true"] { background: var(--ivory); color: var(--bg); border-color: var(--ivory); }
.masonry { columns: 3 300px; column-gap: 14px; }
.masonry a { display: block; margin-bottom: 22px; break-inside: avoid; }
.masonry .m-img { display: block; overflow: hidden; background: var(--bg-2); }
.masonry a img { width: 100%; height: auto; transition: transform 600ms var(--ease); }
.masonry a .cap { display: block; padding-top: 10px; font-family: var(--f-display); font-stretch: 112%; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-2); transition: color 150ms; }
.masonry a .cap [lang="zh"] { margin-left: 8px; font-family: var(--f-zh); letter-spacing: 0.1em; }
@media (hover: hover) and (pointer: fine) {
  .masonry a:hover img { transform: scale(1.04); }
  .masonry a:hover .cap { color: var(--crimson-hi); }   /* gallery: the same red as the links on hover */
  .filters button:not([aria-pressed="true"]):hover { color: var(--crimson-hi); border-color: var(--crimson-hi); }
}
.masonry a.is-hidden { display: none; }

.lightbox {
  border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  background: rgba(6, 3, 4, 0.96); color: var(--ivory);
}
.lightbox::backdrop { background: rgba(6,3,4,0.9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: min(92vw, 1400px); max-height: 84vh; object-fit: contain; animation: lbIn 250ms var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: none; } }
.lb-btn { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line-2); background: rgba(10,6,7,0.6); }
@media (hover: hover) and (pointer: fine) { .lb-btn:hover { border-color: var(--ivory); } }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.lb-cap { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ivory-2); font-family: var(--f-display); font-stretch: 112%; }

/* ==========================================================
   Member (placeholder until login is built)
   ========================================================== */
.member-card {
  position: relative; max-width: 560px; aspect-ratio: 1.586; border-radius: 14px; overflow: hidden; isolation: isolate;
  border: 1px solid rgba(239,230,214,0.18);
  background: linear-gradient(135deg, #2a0609, #0d0708 55%, #3a080c);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  padding: clamp(18px, 4vw, 30px); display: grid; align-content: space-between;
}
.member-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(239,230,214,0.14) 45%, transparent 60%);
  background-size: 250% 100%; background-position: var(--sheen, 100%) 0;
}
.member-card .mc-top { display: flex; justify-content: space-between; align-items: start; }
.member-card img { height: clamp(64px, 14vw, 96px); width: auto; }   /* width auto: the img's width/height attributes only reserve the shape */
.member-card .mc-no { font-family: var(--f-display); font-stretch: 125%; letter-spacing: 0.3em; font-size: clamp(12px, 2.4vw, 16px); color: var(--ivory-2); }
.member-card .mc-tier { font-family: var(--f-display); font-stretch: 125%; font-weight: 800; letter-spacing: 0.2em; font-size: 12px; color: var(--crimson-hi); text-transform: uppercase; }
.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; }
.member-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.member-steps li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.member-steps h2, .member-steps h3 { margin: 0 0 4px; font-size: 18px; }
.member-steps p { margin: 0; color: var(--ivory-2); font-size: 14px; }
@media (max-width: 900px) { .member-grid { grid-template-columns: 1fr; } }

/* ==========================================================
   Reveal (JS adds .is-in). Without JS everything is visible.
   ========================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(100% 0 0 0); transition: clip-path 800ms var(--ease); }
.js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.split .w > span { display: inline-block; transform: translateY(105%); transition: transform 700ms var(--ease); transition-delay: calc(var(--i) * 45ms); }
.split.is-in .w > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  /* Gentler, not zero: keep fades and colour changes, drop movement. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, visibility !important;
    transition-delay: 0s !important;
  }
  body::after { animation: none; }
  .js [data-reveal] { transform: none; transition-duration: 200ms; }
  .js [data-reveal="clip"] { clip-path: none; opacity: 0; transition-duration: 200ms; }
  .js [data-reveal="clip"].is-in { opacity: 1; }
  .split .w > span { transform: none; }
  .rs-slide { clip-path: none; opacity: 0; transition-duration: 200ms; }
  .rs-slide.is-active, .rs-slide.is-leaving { opacity: 1; }
  .rs-slide img, .rs-slide.is-active img { transform: none; }
  .mobile-menu { clip-path: none; opacity: 0; visibility: hidden; transition-duration: 200ms; }
  .menu-open .mobile-menu { opacity: 1; visibility: visible; }
  .mobile-menu a.m-link { transform: none; }
  /* photo strip: no sliding, swipe/scroll by hand, no duplicate set */
  .strip-track { animation: none; }
  .strip { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .strip-track [aria-hidden="true"] { display: none; }
}

/* Keyboard / first-render room switches happen instantly */
.rs-stage.is-instant .rs-slide, .rs-stage.is-instant .rs-slide img { transition: none; }
.rs-stage.is-instant .swap-in { animation: none; }

/* ==========================================================
   Closing "book a room" band (home)
   ========================================================== */
.book-band { padding-block: var(--space-section-tight); border-top: 1px solid var(--line); text-align: center; }
.book-band .wrap { display: grid; gap: 18px; justify-items: center; }
.book-num {
  font-size: clamp(40px, 8vw, 104px); line-height: 1; letter-spacing: -0.01em; color: var(--ivory);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 8px; transition: color 200ms, background-size 300ms var(--ease);
}
.book-band p { margin: 0; }
.book-rating { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-small); color: var(--ivory-2); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms; }
.book-rating .ico { width: 16px; height: 16px; color: var(--crimson-hi); }
@media (hover: hover) and (pointer: fine) { .book-rating:hover { color: var(--crimson-hi); } }
@media (hover: hover) and (pointer: fine) {
  .book-num:hover { color: var(--crimson-hi); background-size: 100% 2px; }
}

/* ==========================================================
   Price tables become stacked rows on phones
   ========================================================== */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; border: 0; }
  .fold .table-scroll { padding-top: 10px; }   /* first room card clears the bar */
  .tier-table, .tier-table tbody, .tier-table tr, .tier-table td { display: block; }
  .tier-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tier-table tr { border: 1px solid var(--line); margin-bottom: 10px; padding: 14px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .tier-table td { padding: 0; border: 0; white-space: normal; }
  .tier-table td.rn { grid-column: 1 / -1; }
  .tier-table td.c { text-align: left; }
  .tier-table td[data-label-en]::before { content: attr(data-label-en); display: block; font-size: 12px; color: var(--ivory-3); margin-bottom: 2px; }
  html[data-lang="zh"] .tier-table td[data-label-zh]::before { content: attr(data-label-zh); }
}

/* ==========================================================
   Touch targets: 44px on touch screens
   ========================================================== */
/* small links and switch buttons keep their look but get an invisible 44px tap area (audit, 20 Oct 2026) */
@media (pointer: coarse) {
  :is(.lang-toggle button, .foot-base a, .hero-bar a, .auth-panel .text-btn, .link-line) { position: relative; }
  :is(.lang-toggle button, .foot-base a, .hero-bar a, .auth-panel .text-btn, .link-line)::after { content: ""; position: absolute; inset: -11px -4px; }
  .preset { min-height: 44px; }
}
@media (pointer: coarse) {
  .lang-toggle, .call-btn, .member-btn { height: 44px; }
  .filters button { min-height: 44px; }
  .rs-tab { min-height: 44px; }
}

/* ==========================================================
   Icons (Phosphor)
   ========================================================== */
.ico { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.call-btn .ico, .member-btn .ico { width: 16px; height: 16px; }
.lb-btn .ico { width: 20px; height: 20px; }

/* ==========================================================
   Rooms page: feature / split / pair / trio
   ========================================================== */
.inc-title { margin: 0 0 10px; font-size: var(--fs-small); }
.room-feature { padding-block: clamp(32px, 4vw, 56px) var(--space-section-tight); display: grid; gap: clamp(24px, 3vw, 40px); scroll-margin-top: var(--header-h); }
.room-feature .room-media .main { aspect-ratio: 21 / 9; }
.rf-body { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.rf-details { display: grid; gap: 22px; }
.room-group { padding-block: var(--space-section-tight); border-top: 1px solid var(--line); display: grid; gap: clamp(24px, 3vw, 36px); }
.rg-rooms { display: grid; gap: 16px; }
.rg-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rg-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rg-room { scroll-margin-top: var(--header-h); }
.rg-media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--bg-2); }
.rg-media img { width: 100%; height: 100%; object-fit: cover; }
.rg-media .no-photo .big { font-size: clamp(44px, 6vw, 80px); }
.rg-name { margin: 16px 0 0; font-size: var(--fs-h3); }
.rg-name small { display: block; margin-top: 6px; font-family: var(--f-zh-display); font-weight: 600; font-size: 14px; letter-spacing: 0.2em; color: var(--ivory-2); text-transform: none; }
.rg-pack { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px clamp(24px, 4vw, 56px); align-items: start; }
.rg-note { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--ivory-2); }
@media (max-width: 900px) {
  .room-feature .room-media .main { aspect-ratio: 16 / 10; }
  .rf-body, .rg-pack { grid-template-columns: 1fr; }
  .rg-2, .rg-3 { grid-template-columns: 1fr; }
}
@media (min-width: 560px) and (max-width: 900px) { .rg-2, .rg-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================
   Food & Drinks: one row per package
   ========================================================== */
.pkg-list { display: grid; border-bottom: 1px solid var(--line); }
.pkg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(16px, 3vw, 48px); align-items: center; padding-block: clamp(22px, 3vw, 34px); border-top: 1px solid var(--line); }
.pkg-name { margin: 0; font-size: var(--fs-h3); line-height: 1.1; }
/* the price is the biggest number in the card; the small red RM sits level with the top of the digits */
.pkg-price { --pz: clamp(30px, 3.2vw, 42px); display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 4px; }
.pkg-price .cur { font-family: var(--f-display); font-stretch: 112%; font-weight: 700; font-size: 13px; line-height: 1; letter-spacing: var(--track-label); color: var(--crimson-hi); margin-top: calc(var(--pz) * 0.13 - 2px); }
.pkg-price .num { font-size: var(--pz); line-height: 1; color: var(--ivory); }
.pkg-meta { margin: 0; color: var(--ivory-2); font-size: 14px; }
.pkg-inc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pkg-inc li { display: grid; gap: 2px; }
.pkg-inc b { font-size: clamp(20px, 2vw, 26px); line-height: 1; }   /* smaller than the price, so the price reads first */
.pkg-inc span { font-size: 12px; color: var(--ivory-2); }
@media (max-width: 760px) {
  .pkg { grid-template-columns: 1fr; }
  .pkg-inc { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 16px; }
}

/* ==========================================================
   "Book it for": ticket cards (Events)
   Rounded outer corners (see Soft glass); the round notches
   mark the tear line.
   ========================================================== */
.tickets { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 18px; }
.ticket {
  --tk-bg: var(--bg-2); --tk-fg: var(--ivory); --tk-muted: var(--ivory-2); --tk-accent: var(--crimson-hi); --tk-edge: var(--line-2);
  position: relative; display: grid; grid-template-rows: 1fr auto;
  color: var(--tk-fg);
  transition: transform 250ms var(--ease);
}
/* Two halves of the ticket, each masked with a round bite at the tear line */
.tk-main, .tk-stub { position: relative; isolation: isolate; background: var(--tk-bg); border: 1px solid var(--tk-edge); transition: border-color 200ms; }
/* Hover/focus: an ivory fill wipes up from the stub into the main part, same move as the site's buttons */
.tk-main::before, .tk-stub::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ivory);
  clip-path: inset(100% 0 0 0); transition: clip-path 300ms var(--ease);
}
.tk-name, .tk-guests b, .tk-guests small, .tk-text, .tk-from b, .tk-rooms, .tk-stub, .tk-top .ico { transition: color 200ms; }
.tk-main {
  border-bottom: 0;
  -webkit-mask: radial-gradient(circle 11px at 0 100%, #0000 10.5px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 100%, #0000 10.5px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 100%, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
}
.ticket--0 { grid-row: span 2; --tk-bg: var(--crimson); --tk-fg: var(--ivory); --tk-muted: rgba(239, 230, 214, 0.86); --tk-accent: var(--ivory); --tk-edge: var(--crimson); }
.ticket--1 { --tk-edge: var(--ivory-2); }
.ticket--2 .tk-guests b { color: var(--crimson-hi); }
.tk-main { display: grid; align-content: start; gap: 14px; padding: clamp(22px, 3vw, 36px); }
.ticket--0 .tk-main { align-content: space-between; }   /* tall card: name top, number middle, line bottom */
.tk-top { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.tk-name { margin: 0; font-family: var(--f-display); font-stretch: 125%; font-weight: 800; font-size: var(--fs-h3); line-height: 1.05; text-transform: uppercase; }
.tk-name [lang="zh"] { font-family: var(--f-zh-display); font-weight: 900; letter-spacing: 0.04em; }
.tk-top .ico { width: 26px; height: 26px; color: var(--tk-accent); transition: transform 250ms var(--ease); }
.tk-guests { display: flex; align-items: baseline; gap: 10px; }
.tk-guests b { font-size: clamp(40px, 5vw, 72px); line-height: 0.95; }
.ticket--0 .tk-guests b { font-size: clamp(64px, 9vw, 132px); }
.tk-guests small { font-size: 14px; color: var(--tk-muted); }
.tk-text { color: var(--tk-muted); font-size: var(--fs-body); max-width: 40ch; }
/* stub below the perforation */
.tk-stub {
  position: relative; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 20px;
  padding: 16px clamp(22px, 3vw, 36px) 18px; border-top: 1px dashed var(--tk-muted); font-size: 14px; color: var(--tk-muted);
  -webkit-mask: radial-gradient(circle 11px at 0 0, #0000 10.5px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 11px at 0 0, #0000 10.5px, #000 11px) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 0, #0000 10.5px, #000 11px) right / 51% 100% no-repeat;
}
.tk-from b { color: var(--tk-fg); font-size: 18px; margin-left: 4px; }
.tk-rooms { font-family: var(--f-display); font-stretch: 112%; font-weight: 600; font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--tk-fg); }
.tk-rooms [lang="zh"] { font-family: var(--f-zh); letter-spacing: 0.1em; }
.ticket:active { transform: scale(0.98); }
.ticket:focus-visible { outline: 2px solid var(--ivory); outline-offset: 4px; }
/* filled state: dark text on ivory, crimson accents (all >= 4.5:1 on ivory except the large numbers, >= 3:1) */
.ticket:focus-visible { --tk-fg: var(--bg); --tk-muted: rgba(10, 6, 7, 0.74); --tk-accent: var(--crimson); --tk-edge: var(--ivory); }
.ticket:focus-visible .tk-stub::before { clip-path: inset(0 0 0 0); }
.ticket:focus-visible .tk-main::before { clip-path: inset(0 0 0 0); transition-delay: 90ms; }
.ticket:focus-visible .tk-guests b { color: var(--crimson); }
@media (hover: hover) and (pointer: fine) {
  .ticket:hover { --tk-fg: var(--bg); --tk-muted: rgba(10, 6, 7, 0.74); --tk-accent: var(--crimson); --tk-edge: var(--ivory); }
  .ticket:hover .tk-stub::before { clip-path: inset(0 0 0 0); }
  .ticket:hover .tk-main::before { clip-path: inset(0 0 0 0); transition-delay: 90ms; }
  .ticket:hover .tk-guests b { color: var(--crimson); }
  .ticket:hover { transform: translateY(-4px); }
  .ticket:hover .tk-top .ico { transform: translateX(4px); }

}
@media (max-width: 820px) {
  .tickets { grid-template-columns: 1fr; }
  .ticket--0 { grid-row: auto; }
}

/* ==========================================================
   Past promotions (Events): archive row
   ========================================================== */
.past-row {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); padding-bottom: 8px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));   /* snapping keeps the first card on the page margin */
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.past-card { flex: 0 0 auto; width: clamp(180px, 20vw, 240px); display: grid; gap: 8px; text-align: left; scroll-snap-align: start; }
.past-card .pc-img { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.past-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.7) brightness(0.75); transition: filter 250ms, transform 600ms var(--ease); }
.past-card .pc-t { font-size: 14px; color: var(--ivory); }
.past-card .pc-d { font-size: 12px; color: var(--ivory-3); }
.past-card:focus-visible img { filter: none; }
@media (hover: hover) and (pointer: fine) {
  .past-card:hover img { filter: none; transform: scale(1.03); }
}

/* ==========================================================
   Page-wide silk (Rooms & Rates, Gallery): fixed behind content
   ========================================================== */
.silk--page { position: fixed; inset: 0 0 auto 0; height: 100lvh; z-index: -1; }   /* the largest screen height: it never resizes as Safari's address bar slides away while scrolling (jerky scroll, owner 22 Oct 2026) */
.has-page-silk .page-head::after { display: none; }   /* the page-wide silk needs no fade band */
.has-page-silk .table-scroll { background: rgba(10, 6, 7, 0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* Gallery filters: a single swipeable row on phones instead of four wrapped rows */
@media (max-width: 640px) {
  .filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  .filters::-webkit-scrollbar { display: none; }
  .filters button { flex: 0 0 auto; }
}

/* Home scroll motion: GSAP drives the strips once it has loaded */
.strip-track.is-gsap { animation: none; will-change: transform; }
.book-num { display: inline-block; transform-origin: 50% 60%; }
/* motion can move things past the edge; never let it cause sideways scrolling */
main { overflow-x: clip; }
.foot-legal { flex-basis: 100%; margin: 0; max-width: 90ch; line-height: 1.6; }

/* ==========================================================
   Soft glass (owner's direction, 30 Sep 2026)
   Rounded corners everywhere, soft downward shadows, and
   smoked frosted glass that picks up the crimson silk behind.
   Blur is kept to large surfaces so phones stay smooth.
   ========================================================== */

/* ---------- Header: a floating glass bar ---------- */
:root { --hx: max(12px, calc((100vw - var(--max)) / 2 + var(--gutter) - 22px)); }   /* the bar's side inset: the logo lines up with the page content; the header art lines up with it too */
.site-header {
  inset: 12px var(--hx) auto; height: 64px;
  border: 1px solid var(--glass-edge); border-radius: 22px;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--shadow-1);
  transition: background 300ms, transform 300ms var(--ease);
}
.site-header.is-solid { background: var(--glass-strong); border-color: var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.site-header.is-hidden { transform: translateY(calc(-100% - 20px)); }
.site-header .wrap { max-width: none; padding-inline: 22px; gap: 24px; }
.brand img { height: 44px; }
@media (max-width: 640px) {
  .site-header { inset: 8px 8px auto; height: 60px; border-radius: 20px; }
  .site-header .wrap { padding-inline: 10px 8px; }
  .brand img { height: 40px; }
}
.header-tools { gap: 10px; }
.lang-toggle {
  height: 40px; padding: 3px; gap: 2px; border: 1px solid var(--glass-edge); border-radius: var(--r-pill);
  background: var(--glass-soft);
}
.lang-toggle button { border-radius: var(--r-pill); padding: 0 12px; }
.call-btn, .member-btn { border-radius: var(--r-pill); padding: 0 16px; }
.call-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 18px -10px rgba(110, 8, 12, 0.9); }
.member-btn { border-color: var(--glass-edge); background: var(--glass-soft); }
.burger { border-radius: 50%; border: 1px solid var(--glass-edge); background: var(--glass-soft); }
@media (max-width: 520px) {   /* icon-only: round buttons */
  .member-btn, .call-btn { width: 40px; padding: 0; justify-content: center; }
}
@media (pointer: coarse) and (max-width: 520px) { .member-btn, .call-btn { width: 44px; } }
.mobile-menu { background: rgba(12, 7, 8, 0.9); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------- Buttons: capsules with a lit top edge ---------- */
.btn { border-radius: var(--r-pill); box-shadow: var(--glass-rim), var(--shadow-1); }
.btn:not(.btn--solid) { background: var(--glass-soft); border-color: var(--glass-edge); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------- Primary button: six decisions (owner's choice B, 2 Oct 2026: brand label kept) ----------
   size 48px / 24px sides · label 13px uppercase · satin crimson, 1px rim (5.3:1), white text (5-8:1)
   · sits in a recessed track, lit from above, shadow 8px down / 24px blur · pill, one 20px icon 10px off
   · hover: a soft light travels the rim at an even ~160px a second (shows within 100ms) · press: sinks 1px and compresses · busy: spinner · saved: check (GP.done) */
.btn--solid {
  min-height: 48px; padding: 0 24px; gap: 10px; overflow: visible;
  color: #fff; border-color: var(--crimson-hi); font-size: 13px; letter-spacing: 0.16em;
  background: linear-gradient(180deg, #d4282b 0%, #b81c1f 55%, #9e1517 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34), inset 0 -1px 0 rgba(0, 0, 0, 0.28),
    0 0 0 3px var(--btn-track), 0 0 0 4px var(--btn-lip), var(--btn-drop);
  transition: transform 100ms var(--ease), box-shadow 200ms, filter 200ms, border-color 200ms;
}
.btn--solid [lang="zh"] { font-size: 15px; letter-spacing: 0.16em; }
.btn--solid .ico { width: 20px; height: 20px; }
.btn--solid::before { display: none; }   /* no ivory wipe on the red button: it has the rim light instead */
/* Rim light (owner, 2 Oct 2026: slower and smooth). A soft glow travels along the button's own outline
   (offset-path), so it moves at one even speed, on the flat sides and around the round ends alike; the ring
   mask keeps it on the edge. site.js adds the .rim the first time the mouse comes over a red button and sets
   --lap from the outline's length (about 160px a second on every size). Leaving freezes it while it fades. */
.btn--solid .rim {
  position: absolute; inset: -1.5px; z-index: 1; border-radius: inherit; padding: 1.5px; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity 200ms;
}
.btn--solid .rim::before {
  content: ""; position: absolute; top: 0; left: 0; width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 230, 222, 0.75) 30%, rgba(255, 217, 207, 0.25) 65%, rgba(255, 217, 207, 0));
  offset-path: border-box; offset-rotate: 0deg;
  animation: btn-rim var(--lap, 4s) linear infinite paused;
}
@keyframes btn-rim { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@supports not (offset-path: border-box) { .btn--solid .rim { display: none; } }   /* older browsers: no rim, the rest of the hover stays */
@media (hover: hover) and (pointer: fine) {
  .btn--solid:hover { color: #fff; border-color: #f06a6c; filter: brightness(1.06); }
  .btn--solid:hover .rim { opacity: 1; transition-duration: 100ms; }
  .btn--solid:hover .rim::before { animation-play-state: running; }
}
.btn--solid:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 2px 6px rgba(0, 0, 0, 0.25),
    0 0 0 3px var(--btn-track), 0 0 0 4px var(--btn-lip), 0 3px 10px rgba(20, 0, 3, 0.4);
}
.is-busy .btn--solid[type="submit"], .btn--solid.is-done { color: transparent; opacity: 1; }
.is-busy .btn--solid[type="submit"] > *, .btn--solid.is-done > * { visibility: hidden; }
.is-busy .btn--solid[type="submit"]::after, .btn--solid.is-done::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; }
.is-busy .btn--solid[type="submit"]::after {
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: btn-spin 600ms linear infinite;
}
.btn--solid.is-done::after {
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Home ---------- */
.hero-bar { border-top: 0; padding-bottom: clamp(14px, 2.4vw, 24px); }
.hero-bar .wrap { gap: 12px; }
.hero-bar .cell, .hero-bar .cell + .cell {
  padding: 16px 20px; border: 1px solid var(--glass-edge); border-radius: var(--r-md);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim);
}
@media (max-width: 860px) { .hero-bar .wrap { gap: 8px; } .hero-bar .cell, .hero-bar .cell + .cell { padding: 12px 16px; } }
.addr-short { display: none; }
/* Nothing blurs over the playing hero video: a blur has to be redrawn for every video frame, and on a sharp laptop screen that made
   the silk update only a few times a second (owner's recording, 22 Oct 2026). Same dark glass look, tinted instead of blurred. */
body[data-page="home"] .site-header, body[data-page="home"] .site-header.is-solid { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 10, 12, 0.8); }
.hero .btn:not(.btn--solid) { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(19, 12, 14, 0.6); }
.hero .hero-bar .cell, .hero .hero-bar .cell + .cell { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(19, 12, 14, 0.72); }
/* Phones, layout B (owner, 22 Oct 2026): the logo and video stay put; the text and buttons are centred, the buttons sit a little lower,
   and Hours, Rating and Where share one strip at the foot of the first screen */
@media (max-width: 860px) {
  .hero { min-height: auto; align-content: start; }   /* the strip sits midway between the Call button and Pick your room (owner, 22 Oct 2026) */
  .hero .hero-inner { padding-bottom: 0; }
  .hero .hero-bar { margin-top: 46px; padding-bottom: 0; }
  .hero + .section { padding-top: 58px; }
  #rooms { padding-bottom: 0; }
  #rooms + .section { padding-top: 58px; }   /* room box to Inside the rooms: 58px, not 128 (owner, 22 Oct 2026) */
  .hero .hero-inner { padding-top: calc(var(--header-h) + 36px); }   /* lower than at first, then a little higher again (owner, 22 Oct 2026) */
  .hero .hero-mark { width: min(40vw, 172px); }   /* a little larger (owner, 22 Oct 2026) */
  .hero .hero-copy { justify-items: center; text-align: center; gap: 18px; }
  .hero .hero-copy .h1 { font-size: clamp(32px, 9.6vw, 42px); }   /* a size smaller (owner, 22 Oct 2026) */
  .hero .hero-copy .lead { font-size: 16px; max-width: 31ch; }
  .hero .hero-cta { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; margin-top: 14px; }
  .hero .hero-cta .btn { justify-content: center; }
  .hero .hero-bar .wrap { width: auto; margin-inline: var(--gutter); padding-inline: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--glass-edge); border-radius: var(--r-md);
    background: rgba(19, 12, 14, 0.72); box-shadow: var(--glass-rim); overflow: hidden; }   /* solid tint, no blur: nothing blurs over the playing video */
  .hero .hero-bar .cell, .hero .hero-bar .cell + .cell { grid-column: auto; border: 0; border-radius: 0; background: none; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none; padding: 12px 6px; text-align: center; justify-items: center; }
  .hero .hero-bar .cell:nth-child(3) { order: 2; border-left: 1px solid var(--line); }   /* Hours | Rating | Where */
  .hero .hero-bar .cell:nth-child(2) { order: 3; border-left: 1px solid var(--line); }
  .hero .hero-bar :is(span, a) { font-size: 12.5px; }
  .hero .hero-bar :is(small, small span) { font-size: 10px; }
  .addr-long { display: none; }
  .addr-short { display: inline; }
}

.rs-list {
  gap: 2px; padding: 8px; border: 1px solid var(--glass-edge); border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-rim), var(--shadow-2);
}
.rs-tab { border-bottom: 0; border-radius: var(--r-md); padding: 14px 14px; overflow: hidden; }
.rs-tab::after { inset: 0; border-radius: var(--r-md); box-shadow: none; }
.rs-tab::before { left: 10px; }
.rs-tab .thumb { right: 10px; border-radius: 10px; }
.rs-stage { border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.rs-frame { border-color: var(--glass-edge); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.rs-info {
  border-color: var(--glass-edge); border-radius: 0 0 var(--r-lg) var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}
@media (max-width: 980px) {   /* the room list becomes a row of capsules */
  .rs-list { gap: 8px; padding: 0 var(--gutter) 10px; scroll-padding-inline: var(--gutter); border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .rs-tab { border: 1px solid var(--glass-edge); border-radius: var(--r-pill); padding: 10px 18px; background: var(--glass-soft); }
}
.strip a { border-radius: var(--r-md); box-shadow: var(--shadow-1); }

/* ---------- Visit block (Home, Visit Us) ---------- */
.visit-list {
  align-self: start; border: 1px solid var(--glass-edge); border-radius: var(--r-lg); padding: 4px clamp(18px, 2.4vw, 28px);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--shadow-2);
}
.visit-list li:last-child { border-bottom: 0; }
body[data-page="visit"] .visit-list { background: var(--glass-clear); -webkit-backdrop-filter: var(--glass-clear-blur); backdrop-filter: var(--glass-clear-blur); }   /* very light glass (owner, 22 Oct 2026) */
body[data-page="visit"] .visit-list :is(.k, .v) { text-shadow: var(--glass-clear-shadow); }
.map { border-color: var(--glass-edge); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }

/* ---------- Rooms & Rates ---------- */
.room-rail {
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg); overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--shadow-2);
}
.room-rail { background: var(--glass-clear); -webkit-backdrop-filter: var(--glass-clear-blur); backdrop-filter: var(--glass-clear-blur); }   /* very light glass (owner, 22 Oct 2026) */
.room-rail .hx-name, .room-rail .hx-pax { text-shadow: var(--glass-clear-shadow); }   /* room names stay crisp on the picture */
.hx:first-child { border-left: 0; }
.hx-body { border-radius: var(--r-md); }
@media (max-width: 900px) {
  .room-rail { padding: 2px 14px; border-top: 1px solid var(--glass-edge); }
  .hx:last-child { border-bottom: 0; }
}
.fold-bar {
  border-color: var(--glass-edge); border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--shadow-1);
  transition: border-color 200ms var(--ease), border-radius 300ms var(--ease);
}
.fold.is-open .fold-bar { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.fold-bar:focus-visible { outline-offset: 2px; }
.table-scroll { border-color: var(--glass-edge); border-radius: var(--r-lg); }
.fold .table-scroll { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.has-page-silk .table-scroll { background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
@media (max-width: 640px) {
  .fold .table-scroll, .has-page-silk .table-scroll { border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fold.is-open .fold-bar { border-radius: var(--r-lg); }
  .tier-table tr { border-color: var(--glass-edge); border-radius: var(--r-md); background: var(--glass-strong); }   /* no blur per row: nine blurred cards would cost phones */
}
.room-media .main, .room-media .side, .rg-media { border-radius: var(--r-md); box-shadow: var(--shadow-2); }
.room-feature .room-media .main { border-radius: var(--r-lg); }
.spec { border: 1px solid var(--glass-edge); border-radius: var(--r-md); padding: 2px 18px; background: var(--glass-soft); }
.spec > div:nth-last-child(-n+2) { border-bottom: 0; }
.inc-chips > span { border-color: var(--glass-edge); border-radius: var(--r-pill); padding: 6px 14px; background: var(--glass-soft); }

/* ---------- Food & Drinks: each package is a glass card ---------- */
.pkg-list { border-bottom: 0; gap: 12px; }
.pkg {
  border: 1px solid var(--glass-edge); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--shadow-1);
}
.pkg { background: var(--glass-clear); -webkit-backdrop-filter: var(--glass-clear-blur); backdrop-filter: var(--glass-clear-blur); }   /* very light glass (owner, 22 Oct 2026) */
.pkg :is(.pkg-name, .pkg-price, .pkg-meta, small, span, b) { text-shadow: var(--glass-clear-shadow); }
.note { border-left: 0; border: 1px solid rgba(232, 71, 74, 0.32); border-radius: var(--r-md); padding: 12px 18px; background: var(--crimson-wash); }

/* ---------- Events ---------- */
.finder {
  border-color: var(--glass-edge); border-radius: var(--r-lg);
  background: var(--glass); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: var(--glass-rim), var(--shadow-2);
}
.finder { background: var(--glass-clear); -webkit-backdrop-filter: var(--glass-clear-blur); backdrop-filter: var(--glass-clear-blur); }   /* very light glass (owner, 22 Oct 2026) */
.finder :is(.finder-label, .finder-hint) { text-shadow: var(--glass-clear-shadow); }
.stepper { border-color: var(--glass-edge); border-radius: var(--r-sm); overflow: hidden; background: var(--glass-soft); }
.stepper input { border-inline-color: var(--glass-edge); }
.preset { border-color: var(--glass-edge); border-radius: var(--r-pill); background: var(--glass-soft); }
.range { height: 4px; border-radius: var(--r-pill); }
.range::-webkit-slider-thumb { border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.range::-moz-range-thumb { border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); }
.finder-hint { border-left: 0; border: 1px solid rgba(232, 71, 74, 0.32); border-radius: var(--r-sm); }
.fr-card { border-color: var(--glass-edge); border-radius: var(--r-md); background: var(--glass-soft); box-shadow: var(--shadow-1); }
.fr-card img, .fr-card .ph { border-radius: 10px; }
.tk-main, .tk-stub { overflow: hidden; }
.tk-main { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.tk-stub { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ticket { filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.45)); }   /* follows the notches, unlike box-shadow */
.promo-card { border-color: var(--glass-edge); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); }
.past-card .pc-img { border-color: var(--glass-edge); border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.empty { border-radius: var(--r-md); }

/* ---------- Gallery ---------- */
.filters button { border-color: var(--glass-edge); border-radius: var(--r-pill); background: var(--glass-soft); }
.masonry .m-img { border-radius: var(--r-md); box-shadow: var(--shadow-1); }
.lightbox img { border-radius: var(--r-md); }
.lb-btn { border-radius: 50%; border-color: var(--glass-edge); background: var(--glass-strong); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* ---------- Member card: a wallet card ---------- */
.member-card { border-radius: 22px; }

/* ---------- Comfort and fallbacks ---------- */
/* people who ask for less transparency (iPhone, Mac, Windows) get solid panels */
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: #1a0f11; --glass-strong: #140b0d; --glass-soft: rgba(255, 244, 234, 0.07); --glass-blur: none; --glass-clear: #1a0f11; --glass-clear-blur: none; }
}
/* browsers without frosted glass get near-solid panels, so text never sits on busy silk */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  :root { --glass: rgba(22, 12, 14, 0.94); --glass-strong: rgba(18, 10, 12, 0.96); }
}

/* ==========================================================
   Hierarchy (30 Sep 2026): what to look at first
   ========================================================== */
/* the Home title is the largest heading on the site, clearly above section headings */
.hero-copy .h1 { font-size: clamp(40px, 5.6vw, 84px); }
/* Chinese room names under the English ones stay readable (never below 13px) */
.room-name small { font-size: max(13px, 0.36em); }
.rs-tab .nm small { font-size: 13px; }
/* every browsing page ends with the same next step: one red "Call to book" */
.book-band .btn { margin-top: 6px; }
.book-band .btn .ico, .room-call .ico { width: 16px; height: 16px; }
.room-call { justify-self: start; }

/* Split room sections (Rooms page, wide screens): the photos start level with the top of the
   price box and end level with the bottom of the Call button, both photos the same height.
   The details become grid items of the section (.room-body is display: contents) so the
   photo column can span exactly their rows; contain: size lets those rows set the height.
   Below 1024px the details column is too narrow for this, so photos stack above, as on tablets. */
@media (min-width: 901px) and (max-width: 1023px) {
  .room-block { grid-template-columns: 1fr; }
  .room-block.is-flip .room-media { order: 0; }
  .room-media .side { transform: none; }
}
@media (min-width: 1024px) {
  .room-block { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); row-gap: 22px; align-items: start; }
  .room-block.is-flip { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
  .room-block .room-body { display: contents; }
  .room-block .room-name { grid-column: 2; grid-row: 1; }
  .room-block .spec { grid-column: 2; grid-row: 2; }
  .room-block .room-body > div:not(.spec) { grid-column: 2; grid-row: 3; }
  .room-block .room-call { grid-column: 2; grid-row: 4; }
  .room-block.is-flip :is(.room-name, .spec, .room-body > div:not(.spec), .room-call) { grid-column: 1; }
  .room-block .room-media { grid-column: 1; grid-row: 2 / 5; align-self: stretch; align-items: stretch; contain: size; }
  .room-block.is-flip .room-media { grid-column: 2; }
  .room-block .room-media .main, .room-block .room-media .side { aspect-ratio: auto; height: 100%; transform: none; }
}

/* PSG / Inter Milan (the two-room group, wide screens): the details follow the photo columns,
   price box under the first photo, drinks list under the second (owner's choice: this group only) */
@media (min-width: 901px) {
  .room-group:has(.rg-2) .rg-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}

/* ---------- Owner request, 3 Oct 2026: skip link, floating buttons, copy button, FAQ, hover gaps ---------- */
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 18px; border-radius: var(--r-pill);
  background: var(--ivory); color: var(--bg); font-weight: 600; transform: translateY(-200%); transition: transform 150ms;
}
.skip-link:focus { transform: none; outline: 2px solid var(--crimson-hi); outline-offset: 2px; }
main:focus { outline: none; }

/* Back to top (after 1.5 screens) and, on phones, Call while the header is out of view */
.float-actions {
  position: fixed; z-index: 30; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: grid; gap: 12px; justify-items: center; pointer-events: none;
}
.float-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; pointer-events: auto;
  border: 1px solid var(--glass-edge); background: rgba(20, 12, 14, 0.85); color: var(--ivory); box-shadow: var(--shadow-1);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s linear 200ms, color 150ms, border-color 150ms;
}
.float-btn .ico { width: 20px; height: 20px; }
.float-call { width: 56px; height: 56px; color: #fff; border-color: var(--crimson-hi); background: linear-gradient(180deg, #d4282b 0%, #b81c1f 55%, #9e1517 100%); }
.float-actions.show-top .float-top, .float-actions.show-call .float-call {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 0s, color 150ms, border-color 150ms;
}
@media (min-width: 901px) { .float-call { display: none; } }   /* phones and tablets only: on a computer the header's Call is enough */
.menu-open .float-actions { display: none; }
@media (prefers-reduced-motion: reduce) { .float-btn { transform: none; } }

.copy-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 2px;
  font-size: var(--fs-small); color: var(--ivory-2); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms;
}
.copy-btn .ico { width: 16px; height: 16px; }
.copy-btn.is-copied { color: var(--green); text-decoration: none; }

/* FAQ: questions people ask before they call */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 60px; padding: 14px 0;
  list-style: none; cursor: pointer; font-size: 17px; color: var(--ivory); transition: color 150ms;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 24px; line-height: 1; color: var(--crimson-hi); transition: transform 200ms var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:focus-visible { outline: 2px solid var(--crimson-hi); outline-offset: 4px; }
.faq p { margin: 0 0 20px; max-width: 62ch; font-size: var(--fs-body); line-height: 1.7; color: var(--ivory-2); }
.faq a { color: var(--ivory); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms; }
.updated { margin: 12px 0 0; font-size: var(--fs-small); }

@media (hover: hover) and (pointer: fine) {
  .float-top:hover { color: var(--crimson-hi); border-color: var(--crimson-hi); }
  .copy-btn:hover, .faq summary:hover, .faq a:hover, .foot-base a:hover { color: var(--crimson-hi); }
  .brand { transition: opacity 150ms; }
  .brand:hover { opacity: 0.75; }
  .lang-toggle button:not([aria-pressed="true"]):hover { color: var(--ivory); }
}
.foot-base a { transition: color 150ms; }

/* ---------- Printing a public page: black text on white, content only (the staff console has its own rule) ---------- */
@media print {
  :root { --bg: #fff; --bg-2: #fff; --ivory: #000; --ivory-2: #222; --ivory-3: #555; --line: #bbb; --line-2: #999;
          --crimson: #a1161a; --crimson-hi: #a1161a; --green: #0b6b38; --glass: #fff; --glass-soft: #fff; --glass-edge: #bbb; }
  body:not(.staff-page) { background: #fff !important; }
  body:not(.staff-page) :is(.site-header, .mobile-menu, .skip-link, .silk, .strip, .map, .float-actions, .foot-word,
    .hero-mark, .hero-art, .hero-cta, .btn, .burger, .filters, .lightbox, .copy-btn, .book-rating) { display: none !important; }
  body:not(.staff-page) .page-head::after { display: none !important; }
  body:not(.staff-page) :is(.room-rail, .room-media, .rg-media, .fold-act) { display: none !important; }   /* the paper copy is a price list: no picker, no photos */
  body:not(.staff-page) * { box-shadow: none !important; text-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .js [data-reveal], .js [data-reveal="clip"], .split .w > span { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .fold-panel { grid-template-rows: 1fr !important; visibility: visible !important; }
  img { break-inside: avoid; }
}

/* ---------- Speed (3 Oct 2026) ---------- */
/* Space for the parts scripts fill in, so the sections below don't jump once they arrive */
:is(#room-rail, #masonry, #matrix):empty { min-height: 100vh; }
/* What is on screen at first paint rises a little with CSS alone (never hidden, never waiting for a script) */
.page-head :is(h1, .lead), .auth-intro > :is(h1, .lead) { animation: firstRise 600ms var(--ease) both; }   /* the home page's text has no entrance at all (owner, 22 Oct 2026) */
.page-head .lead, .auth-intro > .lead { animation-delay: 80ms; }
@keyframes firstRise { from { transform: translateY(14px); } }   /* movement only: the text is readable from the first moment */
@media (prefers-reduced-motion: reduce) { .page-head :is(h1, .lead), .auth-intro > :is(h1, .lead) { animation: none; } }

/* ==========================================================
   Phones (owner's iPhone test, 20 Oct 2026)
   ========================================================== */
/* A double tap no longer zooms the page (pinch to zoom still works, for anyone who needs bigger text),
   taps fire at once, and no grey flash covers what was tapped */
html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* landing on a room from another page: clear of the floating header */
:is(.room-feature, .rg-room) { scroll-margin-top: calc(var(--header-h) + 20px); }
/* No hover look on phones (owner, 20 Oct 2026): hover effects stay mouse-only; a tap only presses the button in a little */