/*
Theme Name: JoJo's Riverside
Theme URI: https://jojosriverside.com/
Author: JoJo's Riverside
Description: Custom theme for JoJo's Riverside, the rooftop bar at Party Pier, Guangzhou. Built from the approved Claude Design homepage ("JoJo's Riverside – Homepage Redesign"); fonts and assets are self-hosted so the site works without Google services in mainland China.
Version: 1.4.1
Requires at least: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: jojos-riverside
*/

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jost-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jost-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Jost;font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/jost-latin-600-normal.woff2) format("woff2")}

/* Tokens — taken from the approved design. */
:root{
  --night:#121826;
  --navy:#1B2440;
  --navy-hi:#2A3762;
  --deep:#0E131F;
  --cream:#F4EDE1;
  --sand:#EDE4D3;
  --paper:#FFFDF8;
  --ink:#1B2233;
  --slate:#4A5163;
  --gold:#C9A45C;
  --gold-hi:#D9B873;
  --gold-lt:#E2C489;
  --gold-dk:#7A5A1E;
  --text:#F4EDE1;
  --text-2:#C9C3B6;
  --text-3:#B9B3A8;
  --serif:"Cormorant Garamond",Georgia,"Songti SC",serif;
  --sans:"Jost",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  --zh:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  --hdr:76px;
  --adminbar:0px;
  color-scheme:dark;
}
.admin-bar{--adminbar:32px}
@media(max-width:782px){.admin-bar{--adminbar:46px}}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--hdr) + var(--adminbar))}
body{margin:0;background:var(--night);color:var(--text);font:400 17px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:var(--gold)}
a:hover{color:var(--gold-lt)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;margin:0;letter-spacing:-.005em;line-height:1.1}
p{margin:0}
.zh,[lang^="zh"]{font-family:var(--zh)}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.skip-link:focus{position:fixed;top:.75rem;left:.75rem;z-index:100001;width:auto;height:auto;clip:auto;background:#fff;color:#000;padding:.6rem 1rem;border-radius:4px}

/* Type. The design's own reset (.jj h1-h3, .jj p {margin:0}) outranks its spacing classes, so
   the approved render has no top margin on .h2, .hero-sub, .info-v, .feat-v or .lb-cap. (.hero h1 ties
   with the reset and comes later, so its 18px does apply.) Matched. */
.eyebrow{font:500 13px/1.2 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.h2{font-size:56px;line-height:1.04}
.lede{font-size:18px;line-height:1.65;color:var(--text-2);max-width:560px}

/* Light sections flip the palette for everything inside them. */
.is-light{color:var(--ink)}
.is-light .eyebrow{color:var(--gold-dk)}
.is-light .lede{color:var(--slate)}
.is-light a:not(.btn){color:var(--ink)}
.is-light a:not(.btn):hover{color:#000}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;font:500 15px/1 var(--sans);letter-spacing:.03em;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:background .2s ease,color .2s ease,border-color .2s ease;white-space:nowrap}
.btn svg{flex:none}
.btn-gold{background:var(--gold);color:var(--night)}.btn-gold:hover{background:var(--gold-hi);color:var(--night)}
.btn-ghost{border-color:rgba(244,237,225,.55);color:var(--text);background:transparent}.btn-ghost:hover{border-color:var(--text);background:rgba(244,237,225,.08);color:#fff}
.btn-ink{background:var(--navy);color:var(--text)}.btn-ink:hover{background:var(--navy-hi);color:#fff}
.btn-line{border-color:rgba(27,34,51,.45);color:var(--ink);background:transparent}.btn-line:hover{border-color:var(--ink);background:var(--ink);color:var(--text)}
.btn-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.tlink{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.45);padding-bottom:2px}.tlink:hover{color:var(--gold-lt);border-color:var(--gold-lt)}
.is-light .tlink{color:var(--ink);border-color:rgba(27,34,51,.35)}.is-light .tlink:hover{color:#000;border-color:var(--ink)}

/* Header */
.hdr{position:sticky;top:var(--adminbar);z-index:40;background:rgba(18,24,38,.93);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid rgba(201,164,92,.16)}
.hdr-in{display:flex;align-items:center;gap:32px;height:var(--hdr)}
.logo{display:flex;align-items:center;padding:6px 0}
.logo img{height:38px;width:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.nav a{display:block;color:#E9E2D4;text-decoration:none;font-size:15px;letter-spacing:.02em;padding:10px 0;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav a:hover,.nav .menu-item-type-post_type.current_page_item>a{color:#fff;border-color:var(--gold)}
.menu-btn{display:none;align-items:center;justify-content:center;width:48px;height:48px;margin-left:auto;border-radius:999px;border:1px solid rgba(244,237,225,.3);background:transparent;color:var(--text);cursor:pointer}
.menu-btn .i-close{display:none}
.hdr.is-open .menu-btn .i-open{display:none}
.hdr.is-open .menu-btn .i-close{display:block}
.mpanel{display:none}
/* English | 中文 */
.lang-sw{display:flex;align-items:center;gap:6px;font:500 13px/1 var(--sans);letter-spacing:.04em;color:rgba(233,226,212,.4);white-space:nowrap}
.lang-sw a{display:block;padding:12px 4px;color:#C9C3B6;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.lang-sw a:hover{color:#fff}
.lang-sw a[aria-current]{color:var(--gold);border-color:var(--gold)}
.lang-sw a[lang="zh-CN"]{font-family:var(--zh);letter-spacing:.08em}

/* Chinese pages: the Latin faces stay first for names and numbers; Chinese falls through to the system's Chinese face.
   Tracking made for uppercase Latin is relaxed, and multi-line headings get room for the taller glyphs. */
html[lang^="zh"]{--serif:"Cormorant Garamond","Songti SC","Noto Serif SC","Source Han Serif SC",var(--zh);--sans:"Jost",var(--zh)}
html[lang^="zh"] body{font-family:var(--sans)}
html[lang^="zh"] .eyebrow{letter-spacing:.12em}
html[lang^="zh"] h1,html[lang^="zh"] h2,html[lang^="zh"] h3,html[lang^="zh"] .h2{line-height:1.25;letter-spacing:.02em;text-wrap:balance}
html[lang^="zh"] p,html[lang^="zh"] li,html[lang^="zh"] dd{text-wrap:pretty}
html[lang^="zh"] .lede,html[lang^="zh"] .hero-sub{line-height:1.8}

/* Heroes (home + inner pages). Owner, 2026-10-13: show the whole photograph, not a zoomed strip.
   Each hero takes its photo's own aspect ratio (--ar, set inline from the attachment), clamped to the screen
   height; only when clamped does cover trim, and --fx/--fy keep the subject (faces) in frame. Phones stack the
   full photo above the text. Portrait photos sit beside their title on desktop. */
.site-main>.hero,.phero:not(.compact){position:relative;overflow:hidden;background:var(--night);width:100%;
  aspect-ratio:var(--ar,1.8667);min-height:480px;max-height:calc(100svh - var(--hdr) - var(--adminbar))}
.hero-img{position:absolute;inset:0;overflow:hidden;container-type:size}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:calc(var(--fx,.5) * 100%) calc(var(--fy,.5) * 100%);animation:jjzoom 20s ease-out both}
.hero-copy{position:absolute;left:0;right:0;bottom:clamp(40px,8%,84px);animation:jjrise .9s .15s ease-out both}
/* The only darkening: a soft, light backdrop hugging the text block (blurred edges), never the whole photo. */
.hero-text{position:relative;display:inline-block;max-width:100%;isolation:isolate}
.hero-text::before{content:"";position:absolute;inset:-34px -52px;z-index:-1;border-radius:48px;pointer-events:none;
  background:rgba(10,14,24,.55);filter:blur(24px)}
.phero.is-portrait{aspect-ratio:auto;max-height:none;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:48px;
  width:auto;max-width:1240px;margin-inline:auto;padding-inline:40px;overflow:visible}
.phero.is-portrait .hero-copy .wrap{padding:0}
.phero.is-portrait .hero-img{position:relative;inset:auto;order:2;height:min(calc(100svh - var(--hdr) - var(--adminbar)),760px);aspect-ratio:var(--ar)}
.phero.is-portrait .hero-copy{position:relative;bottom:auto;padding:56px 0}
.phero.is-portrait .hero-text::before{display:none}
/* Glints over real lights (owner request, 2026-10-13). The layer lives in the photo's box and shares its slow
   zoom; .glints is sized and offset exactly like the photo's object-fit:cover crop, so a point placed in % of
   the photo stays on its light at any viewport. Decorative: no pointer events. site.js mutes any glint on or
   near a line of hero text. */
.glint.is-muted{visibility:hidden;animation:none} /* not display:none: muting reads each glint's layout position */
.glint-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;animation:jjzoom 20s ease-out both}
.glints{position:absolute;
  width:max(100cqw,calc(100cqh * var(--ar)));height:max(100cqh,calc(100cqw / var(--ar)));
  left:calc((100cqw - max(100cqw,calc(100cqh * var(--ar)))) * var(--fx,.5));
  top:calc((100cqh - max(100cqh,calc(100cqw / var(--ar)))) * var(--fy,.5))}
/* Owner, 2026-10-13: the first sparkles were too faint and too few at once. Bigger, screen-blended
   so they read as light, lit for about a quarter of each 6-14 s cycle; peak opacity halved to .5 on request. */
.glint{--c:255,255,255;position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;opacity:0;mix-blend-mode:screen;
  transform:scale(calc(var(--s) * .3));animation:jjglint var(--d) ease-in-out var(--t) infinite;
  background:radial-gradient(circle,#fff 0,#fff 9%,rgba(var(--c),.95) 20%,rgba(var(--c),.5) 38%,rgba(var(--c),.18) 54%,rgba(var(--c),0) 70%)}
.glint::before,.glint::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:2px;margin:-1px 0 0 -17px;border-radius:2px;
  background:linear-gradient(90deg,rgba(var(--c),0),rgba(255,255,255,.95) 50%,rgba(var(--c),0))}
.glint::after{transform:rotate(90deg)}
.g-gold{--c:255,196,92}.g-pink{--c:255,105,190}.g-cyan{--c:80,225,255}.g-violet{--c:176,120,255}
@keyframes jjglint{0%,100%{opacity:0;transform:scale(calc(var(--s) * .3)) rotate(0deg)}
  9%{opacity:.5;transform:scale(var(--s)) rotate(20deg)}18%{opacity:.42;transform:scale(calc(var(--s) * .85)) rotate(35deg)}
  27%{opacity:0;transform:scale(calc(var(--s) * .4)) rotate(45deg)}}
@keyframes jjglint-soft{0%,100%{opacity:0;transform:scale(calc(var(--s) * .5))}9%{opacity:.2;transform:scale(var(--s))}15%{opacity:.17;transform:scale(calc(var(--s) * .9))}23%{opacity:0;transform:scale(calc(var(--s) * .6))}}
@media(prefers-reduced-motion:reduce){.glint-layer{display:none}}
.site-main>.hero h1{font-size:88px;line-height:1;max-width:780px;margin-top:18px;color:#FBF7EF}
.hero-sub{font-size:19px;line-height:1.6;color:#E3DCCD;max-width:520px}
/* Hero readability (owner, 2026-10-13): white eyebrow and copy. No scrims anywhere: the owner wants every hero photo
   at its own brightness and colour, so readability comes from text shadows alone. */
.site-main>.hero .eyebrow,.phero .eyebrow{font-size:14px;font-weight:600;color:#fff}
.hero-sub{color:#fff}
.site-main>.hero .eyebrow,.site-main>.hero h1,.site-main>.hero .hero-sub,.phero .eyebrow,.phero h1,.phero .hero-sub{text-shadow:0 1px 2px rgba(0,0,0,.6),0 0 1px rgba(0,0,0,.5),0 2px 14px rgba(0,0,0,.45)}
.site-main>.hero .btn-ghost,.phero .btn-ghost{border-color:#fff;color:#fff;background:rgba(12,16,27,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.site-main>.hero .btn-ghost:hover,.phero .btn-ghost:hover{background:rgba(12,16,27,.75)}
.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}

/* Quick info strip */
.strip{background:var(--navy);border-bottom:1px solid rgba(201,164,92,.14)}
.strip-in{display:grid;grid-template-columns:1fr 1.25fr auto;gap:40px;align-items:center;padding-top:26px;padding-bottom:26px}
.info{display:flex;gap:16px;align-items:flex-start}
.info-ic{flex:none;width:40px;height:40px;border-radius:999px;border:1px solid rgba(201,164,92,.5);color:var(--gold);display:flex;align-items:center;justify-content:center}
.info-k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:500}
.info-v{font-size:17px;color:var(--text);line-height:1.45}
.info-s{font-size:14px;color:var(--text-3);line-height:1.45}
.strip-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Photos */
.ph{position:relative;overflow:hidden;border-radius:4px;margin:0;background:var(--navy);height:100%}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.ph:hover img{transform:scale(1.035)}
.ph-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 14px;background:linear-gradient(180deg,rgba(10,13,22,0),rgba(10,13,22,.72));color:#F7F2E8;font-size:12px;letter-spacing:.16em;text-transform:uppercase}

/* Section shells */
.sec{padding:120px 0}
.sec-night{background:var(--night)}
.sec-navy{background:var(--navy)}
.sec-cream{background:var(--cream)}
.sec-sand{background:var(--sand)}
.sec-head{display:grid;grid-template-columns:5fr 6fr;gap:72px;align-items:end;margin-bottom:56px}
.sec-head-copy{display:flex;flex-direction:column;gap:26px}

/* Food */
.food-grid{display:grid;grid-template-columns:5fr 4fr 3fr;grid-template-rows:330px 330px;gap:16px}
.fg-a{grid-row:1 / span 2}
.fg-b{grid-column:2 / span 2}
.diet{font-size:14px;color:var(--slate)}

/* Rooftop */
.roof-top{display:grid;grid-template-columns:4fr 7fr;gap:72px;align-items:center}
.roof-big{height:560px}
.feats{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-direction:column}
.feats li{display:flex;gap:18px;padding:16px 0;border-top:1px solid rgba(244,237,225,.12)}
.feats li:last-child{border-bottom:1px solid rgba(244,237,225,.12)}
.feat-k{font-family:var(--serif);font-size:22px;color:var(--text);line-height:1.2}
.feat-v{font-size:15px;color:var(--text-3)}
.is-light .feats li{border-color:rgba(27,34,51,.16)}
.is-light .feat-k{color:var(--ink)}
.is-light .feat-v{color:var(--slate)}
.roof-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.roof-row .ph{height:300px}

/* Events */
.ev{display:grid;grid-template-columns:7fr 5fr;gap:72px;align-items:center}
.ev-collage{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:290px 290px;gap:16px}
.ev-a{grid-row:1 / span 2}
.ev-copy{display:flex;flex-direction:column;gap:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.chip{border:1px solid rgba(27,34,51,.28);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink)}
.pk{list-style:none;padding:0;margin:0;border-top:1px solid rgba(27,34,51,.16)}
.pk li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid rgba(27,34,51,.16)}
.pk-k{font-family:var(--serif);font-size:21px;color:var(--ink);min-width:190px}
.pk-v{font-size:15px;color:var(--slate)}
.sec-night .pk,.sec-navy .pk,.sec-night .pk li,.sec-navy .pk li{border-color:rgba(244,237,225,.12)}
.sec-night .pk-k,.sec-navy .pk-k{color:var(--text)}
.sec-night .pk-v,.sec-navy .pk-v{color:var(--text-3)}

/* Gallery */
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:44px}
.gal-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:250px;gap:12px;grid-auto-flow:dense}
.span2{grid-column:span 2}
.tall{grid-row:span 2}
.thumb{display:block;width:100%;height:100%;padding:0;border:0;background:var(--navy);border-radius:4px;overflow:hidden;cursor:zoom-in;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1),opacity .3s}
.thumb:hover img{transform:scale(1.04)}

/* Find us */
.find-grid{display:grid;grid-template-columns:6fr 5fr;gap:72px;align-items:start}
.dl{display:grid;grid-template-columns:150px 1fr;gap:0;margin:34px 0 0;border-top:1px solid rgba(27,34,51,.16)}
.dl dt,.dl dd{margin:0;padding:16px 0;border-bottom:1px solid rgba(27,34,51,.16)}
.dl dt{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dk);font-weight:500;padding-top:20px}
.dl dd{font-size:17px;color:var(--ink);line-height:1.55}
.dd-s{font-size:14px;color:var(--slate)}
/* WeChat QR: never under 140px, where it stops decoding reliably. */
.wxqr{display:flex;align-items:center;gap:20px;margin:0}
.wxqr img{flex:none;width:150px;height:150px;background:#fff;border-radius:10px;border:1px solid rgba(27,34,51,.14)}
.wxqr figcaption{display:flex;flex-direction:column;gap:6px;font-size:15px;line-height:1.5}
.wxqr-tip{display:none;font-size:13px;color:var(--slate)}
.wxqr-ftr{flex-direction:column;align-items:flex-start;gap:10px;margin-top:20px}
.wxqr-ftr img{width:140px;height:140px;border:0}
.wxqr-ftr figcaption{font-size:13px;color:#9C9789;max-width:180px}
.wxqr-ftr .wxqr-tip{color:#9C9789}
.gh{background:var(--navy);color:var(--text);border-radius:8px;padding:40px;display:flex;flex-direction:column;gap:26px}
.gh h3{font-size:34px;line-height:1.1;margin-top:10px}
.is-light .gh .eyebrow{color:var(--gold)}
.gh-steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:18px}
.gh-steps li{display:flex;gap:16px}
.gh-n{flex:none;width:30px;height:30px;border-radius:999px;border:1px solid rgba(201,164,92,.6);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:14px}
.gh-actions{display:flex;flex-direction:column;gap:10px}
.gh-actions .btn{width:100%}

/* Inner page hero */
.phero.compact{position:relative;padding:110px 0 56px;background:linear-gradient(180deg,var(--navy),var(--night))}
.phero.compact .hero-copy{position:static;animation:none}
.phero.compact .hero-text::before{display:none}
.phero h1{font-size:72px;line-height:1.02;max-width:900px;margin-top:18px;color:#FBF7EF}
.phero .hero-sub{max-width:640px}

/* Prose (legal pages, plain pages, non-legacy posts) */
.prose{max-width:760px}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:34px;margin-top:1.6em}
.prose h3{font-size:26px;margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.25rem}
.prose li+li{margin-top:.4em}
.prose img{border-radius:4px}
.prose strong{font-weight:500}
.legal-updated{color:var(--gold-dk);font-weight:500}
.wp-block-image{margin:2rem 0}
.wp-block-button__link{display:inline-flex;min-height:48px;align-items:center;padding:0 24px;border-radius:999px;background:var(--gold);color:var(--night);font-weight:500;text-decoration:none}

/* Food menu page */
.dish-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:72px;border-top:1px solid rgba(244,237,225,.12)}
.dish-list li{padding:22px 0;border-bottom:1px solid rgba(244,237,225,.12)}
.dish-list h3{font-size:26px;color:var(--text)}
.dish-list p{font-size:15px;color:var(--text-3);margin-top:6px}
.dish-tag{display:inline-block;margin-left:8px;font:500 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold);border:1px solid rgba(201,164,92,.5);padding:5px 8px;border-radius:999px;vertical-align:middle}
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px}
.trio .ph{height:340px}
.cta-band{display:flex;flex-wrap:wrap;gap:24px 48px;align-items:center;justify-content:space-between}
.cta-band h2{font-size:48px}
.cta-band p{color:var(--text-2);margin-top:10px}

/* Enquiry + booking forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld-w{grid-column:1 / -1}
.fld label{font-size:13px;letter-spacing:.06em;color:var(--slate);font-weight:500}
.fld input,.fld select,.fld textarea{width:100%;font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--paper);border:1px solid rgba(27,34,51,.3);border-radius:4px;min-height:48px;padding:10px 12px}
.fld textarea{min-height:120px;resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--gold)}
.hp-field{position:absolute!important;left:-9999px!important}
.panel{background:var(--cream);color:var(--ink);border-radius:8px;padding:40px}
.notice{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.5;padding:12px 14px;border-radius:4px}
.notice-ok{background:#E3EEDB;color:#23361A;border:1px solid #9DB88A}
.notice-err{background:#F6E0DA;color:#5A1D10;border:1px solid #D69A89}
.notice+.form,.notice+.notice{margin-top:18px}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;background:var(--night);border:1px solid rgba(244,237,225,.16);border-radius:6px;overflow:hidden;text-decoration:none;color:inherit;transition:border-color .2s}
.post-card:hover{border-color:var(--gold);color:inherit}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.post-card .card-body{padding:22px;display:flex;flex-direction:column;gap:8px}
.post-meta{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.post-card h2{font-size:28px;color:var(--text)}
.post-card p{font-size:15px;color:var(--text-3)}
.term-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0}
.term-list a{display:inline-block;border:1px solid rgba(244,237,225,.22);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--text);text-decoration:none}
.term-list a:hover{border-color:var(--gold);color:var(--gold)}
.post-foot{display:flex;flex-direction:column;gap:28px}
.pagination{margin-top:48px;display:flex;gap:8px;flex-wrap:wrap}
.pagination .page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid rgba(244,237,225,.22);border-radius:999px;color:var(--text);text-decoration:none}
.pagination .current{background:var(--gold);color:var(--night);border-color:var(--gold)}
.single-legacy .jojo-article{color-scheme:light}

/* 404 */
.e404{min-height:70vh;display:grid;place-items:center;text-align:center;padding:96px 20px}
.e404 h1{font-size:64px;margin-top:14px}
.e404 p{color:var(--text-2);margin:18px auto 0;max-width:520px}
.e404 .btn-row{justify-content:center;margin-top:32px}

/* Footer */
.ftr{background:var(--deep);color:var(--text-2);padding:72px 0 40px;font-size:15px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.ftr h2{font:500 12px/1.6 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.ftr ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.ftr a{color:#E9E2D4;text-decoration:none}.ftr a:hover{color:var(--gold)}
.ftr-logo{height:46px;width:auto}
.ftr-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;border-top:1px solid rgba(244,237,225,.1);margin-top:56px;padding-top:24px;font-size:13px;color:#9C9789}
.ftr-legal{display:flex;gap:22px;flex-wrap:wrap}
.soc{display:flex;gap:10px;margin-top:20px}
.soc a{width:44px;height:44px;border-radius:999px;border:1px solid rgba(244,237,225,.22);display:flex;align-items:center;justify-content:center;color:#E9E2D4}
.soc a:hover{border-color:var(--gold);color:var(--gold)}

/* Mobile action bar */
.mbar{display:none}

/* Dialogs: native <dialog> sits in the top layer, above the WordPress admin bar. */
dialog.modal{border:0;padding:0;background:transparent;color:var(--ink);width:100%;max-width:580px;max-height:calc(100% - 40px);overflow:visible}
dialog.modal::backdrop{background:rgba(9,12,20,.78)}
dialog.modal[open]{animation:jjfade .25s ease-out both}
.dialog{position:relative;background:var(--cream);color:var(--ink);border-radius:8px;max-height:calc(100dvh - 40px);overflow:auto;padding:40px;box-shadow:0 30px 80px rgba(0,0,0,.45)}
.dialog h2{font-size:38px;line-height:1.1;margin-top:10px}
.dialog .eyebrow{color:var(--gold-dk)}
.dialog a:not(.btn){color:var(--ink)}
.dialog .form{margin-top:24px}
.dialog .notice{margin-top:18px}
.x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;border:1px solid rgba(27,34,51,.2);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer}
.x:hover{background:var(--ink);color:var(--text)}
dialog.taxi-dlg{max-width:620px}
.taxi{text-align:center;padding:48px 40px}
.taxi img{width:96px;height:auto;margin:0 auto}
.taxi h2{font:600 22px/1.3 var(--zh);margin-top:18px}
.taxi-ask{font-size:20px;margin-top:18px;color:var(--slate)}
.taxi-addr{font-size:30px;line-height:1.45;font-weight:500;color:var(--ink)}
.taxi-near{font-size:17px;margin-top:12px;color:var(--slate)}
.taxi hr{border:0;border-top:1px solid rgba(27,34,51,.18);margin:26px 0}
.book-done{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.book-done h3{font-size:28px}

/* Photo viewer */
dialog.lb{border:0;margin:0;padding:72px 84px 28px;width:100%;height:100%;max-width:none;max-height:none;background:rgba(8,10,17,.95);color:#D9D2C4;flex-direction:column;align-items:center;justify-content:center}
dialog.lb[open]{display:flex;animation:jjfade .25s ease-out both}
dialog.lb::backdrop{background:transparent}
.lb-img{max-width:100%;max-height:calc(100% - 60px);width:auto;height:auto;object-fit:contain;border-radius:3px}
.lb-cap{display:flex;gap:18px;align-items:center;font-size:14px}
.lb-count{color:var(--gold)}
.lb-btn{position:absolute;width:52px;height:52px;border-radius:999px;border:1px solid rgba(244,237,225,.3);background:rgba(18,24,38,.6);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer}
.lb-btn:hover{border-color:var(--gold);color:var(--gold)}
.lb-prev{left:20px;top:50%;margin-top:-26px}.lb-next{right:20px;top:50%;margin-top:-26px}.lb-x{top:16px;right:20px}
body.is-locked{overflow:hidden}

@keyframes jjzoom{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes jjrise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes jjfade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* VIP room (owner, 2026-10-14). Photos are never covered: no text, scrim or sparkle sits on them. */
.vip-grid{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.vip-media{display:flex;flex-direction:column;gap:16px}
.vip-main,.vip-support{height:auto;aspect-ratio:3/2}
.vip-support{width:58%;margin-left:auto}
.vip-copy{display:flex;flex-direction:column;gap:20px}
.vip-copy .h2{margin-top:-6px}
.vip-tags{font:500 13px/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.vip-note{font-size:15px;color:var(--text-2)}
/* Find us: the entrance at night, so guests recognise it */
.gh-photo{height:auto;aspect-ratio:3/2;margin:-12px -12px 0;border-radius:6px}

/* Video cards: large posters with a play button; the file is only fetched after a click.
   Four cards: the wide tour, the tall portrait show beside it, two more underneath. */
.vid-block{margin-top:56px;display:flex;flex-direction:column;gap:18px}
.vid-top{margin:0 0 56px}
.vgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vgrid-1{grid-template-columns:1fr}
.vcard{position:relative;display:block;width:100%;padding:0;border:0;border-radius:6px;overflow:hidden;cursor:pointer;background:var(--navy);aspect-ratio:16/9;color:#fff;text-align:left}
.vgrid-4 .vcard:first-child{grid-column:1 / span 2}
.vcard.is-portrait{aspect-ratio:auto;grid-column:3;grid-row:1 / span 2;min-height:100%}
.vcard-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.6,.2,1)}
.vcard:hover .vcard-poster{transform:scale(1.03)}
.vcard::after{content:"";position:absolute;inset:auto 0 0 0;height:46%;background:linear-gradient(180deg,rgba(10,13,22,0),rgba(10,13,22,.7))}
.vcard-play{position:absolute;left:50%;top:50%;z-index:1;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(201,164,92,.92);color:var(--night);box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .2s ease,background .2s ease}
.vcard-play svg{margin-left:4px}
.vcard:hover .vcard-play,.vcard:focus-visible .vcard-play{transform:scale(1.08);background:var(--gold-hi)}
.vcard-cap{position:absolute;left:18px;right:18px;bottom:14px;z-index:1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.vcard-title{font:500 13px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.vcard-time{font-size:13px;color:#E3DCCD}

/* Video popup: native <dialog> (focus trap, Escape, top layer). The player keeps the clip's own shape. */
dialog.vbox{border:0;margin:0;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));width:100%;height:100%;max-width:none;max-height:none;background:rgba(6,8,14,.9);color:var(--text);place-items:center}
dialog.vbox[open]{display:grid;animation:jjfade .2s ease-out both}
dialog.vbox::backdrop{background:transparent}
.vbox-inner{display:flex;flex-direction:column;gap:10px;max-width:100%}
.vbox-bar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.vbox-title{font:500 13px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.vbox-x{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px 0 12px;border-radius:999px;border:1px solid rgba(244,237,225,.4);background:rgba(18,24,38,.7);color:#fff;font:500 14px/1 var(--sans);cursor:pointer}
.vbox-x:hover{border-color:var(--gold);color:var(--gold)}
.vbox-stage video{display:block;background:#000;border-radius:4px;aspect-ratio:var(--vr);height:auto;
  width:min(90vw,calc((90vh - 64px) * var(--vr)));width:min(90vw,calc((90dvh - 64px) * var(--vr)))}
.vbox-play{align-self:center;display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:0;background:var(--gold);color:var(--night);font:500 15px/1 var(--sans);cursor:pointer}
.vbox-play[hidden],.vbox-msg[hidden]{display:none}
.vbox-msg{text-align:center;font-size:15px;color:#F6E0DA}

/* Tablet */
@media(max-width:1120px){
  .nav ul{gap:20px}.nav a{font-size:14px}
  .hdr-in{gap:22px}
  .site-main>.hero h1{font-size:72px}
  .phero h1{font-size:60px}
  .h2{font-size:48px}
  .sec-head,.roof-top,.ev,.find-grid{gap:48px}
  .strip-in{grid-template-columns:1fr 1fr;row-gap:20px}
  .strip-actions{grid-column:1 / -1}
  .post-grid{grid-template-columns:1fr 1fr}
  .dish-list{column-gap:48px}
}

/* Mobile */
@media(max-width:860px){
  :root{--hdr:64px}
  .wrap{padding:0 20px}
  .nav,.hdr-cta{display:none}
  .menu-btn{display:inline-flex;margin-left:0}
  .lang-sw{margin-left:auto}
  .hdr-in{gap:12px}
  .logo img{height:32px}
  .hdr.is-open .mpanel{display:flex;flex-direction:column;padding:8px 20px 22px;border-top:1px solid rgba(244,237,225,.08);max-height:calc(100dvh - var(--hdr) - var(--adminbar));overflow:auto}
  .mpanel ul{list-style:none;margin:0;padding:0}
  .mpanel a:not(.btn){display:block;color:var(--text);text-decoration:none;font-family:var(--serif);font-size:26px;padding:12px 0;border-bottom:1px solid rgba(244,237,225,.08)}
  .mpanel .menu-item-type-post_type.current_page_item>a{color:var(--gold)}
  .mpanel .btn{margin-top:18px}
  /* Phones: the whole photo first, the text below it on the page background. */
  .site-main>.hero,.phero:not(.compact){aspect-ratio:auto;min-height:0;max-height:none;display:block}
  .hero-img,.phero.is-portrait .hero-img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:var(--ar)}
  .hero-copy,.phero.is-portrait .hero-copy{position:relative;bottom:auto;padding:26px 0 28px}
  .phero.is-portrait{padding-inline:0;gap:0}
  .phero.is-portrait .hero-copy .wrap{padding:0 20px}
  .hero-text{display:block}
  .hero-text::before{display:none}
  .site-main>.hero h1{font-size:48px;line-height:1.04}
  .hero-sub{font-size:17px}
  .hero-actions{flex-direction:column;margin-top:26px}
  .hero-actions .btn{width:100%}
  .phero.compact{height:auto;padding:64px 0 40px}
  .phero h1{font-size:42px;line-height:1.06}
  .strip-in{grid-template-columns:1fr;gap:18px;padding-top:24px;padding-bottom:24px}
  .strip-actions .btn{flex:1 1 140px}
  .sec{padding:76px 0}
  /* Phones (owner, 2026-10-13): where the hero runs straight into a section of the same colour, the hero's own
     28px is the gap; a second 76px of the same background read as an empty hole (gallery, blog, archives). */
  .phero:not(.compact) + .sec-night{padding-top:0}
  .phero.compact{padding-bottom:28px;background:linear-gradient(180deg,var(--night),var(--navy))}
  .phero.compact .hero-copy{padding:0}
  /* Homepage hero on phones (owner, 2026-10-13): its own crop, taller than the panorama's 1.87:1 strip.
     1.2:1 keeps the full height and ~64% of the width, framed (fx .6) from Canton Tower across the rooftop
     guests to the skyline and the boat. The glints use the same --fx/--fy, so they stay on their lights. */
  .site-main>.hero .hero-img{aspect-ratio:1.2;--fx:.6;--fy:.5}
  /* Sparkles on phones: about a quarter of them, smaller, ~60% dimmer with a tighter glow, slower and gentler. */
  .glint{width:12px;height:12px;margin:-6px 0 0 -6px;animation-name:jjglint-soft;animation-duration:calc(var(--d) * 2);
    background:radial-gradient(circle,#fff 0,rgba(var(--c),.8) 18%,rgba(var(--c),.25) 36%,rgba(var(--c),0) 56%)}
  .glint::before,.glint::after{width:16px;height:1px;margin:-.5px 0 0 -8px;background:linear-gradient(90deg,rgba(var(--c),0),rgba(255,255,255,.7) 50%,rgba(var(--c),0))}
  .glint:not(:nth-child(4n+1)){display:none}
  /* VIP on phones: room photo, copy, then the screen/table photo; full width, no cropping. */
  .vip-grid{display:flex;flex-direction:column;gap:22px}
  .vip-media{display:contents}
  .vip-main{order:1}
  .vip-copy{order:2;gap:16px}
  .vip-support{order:3;width:100%}
  .gh-photo{margin:-6px -6px 0}
  /* Video cards on phones: one per row, large; the portrait show keeps a tall card. */
  .vid-block{margin-top:40px}
  .vid-top{margin:0 0 40px}
  .vgrid{grid-template-columns:1fr;gap:12px}
  .vgrid-4 .vcard:first-child{grid-column:auto}
  .vcard.is-portrait{grid-column:auto;grid-row:auto;aspect-ratio:4/5;min-height:0}
  .vcard-play{width:64px;height:64px;margin:-32px 0 0 -32px}
  .vbox-stage video{width:min(100%,calc((100dvh - 92px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--vr)));max-width:calc(100vw - 24px)}
  .vbox-inner{width:100%;align-items:center}
  .vbox-bar{width:100%}
  .phero.compact + .sec-navy{padding-top:0}
  .h2{font-size:38px;line-height:1.08}
  .lede{font-size:17px}
  .sec-head{grid-template-columns:1fr;gap:20px;margin-bottom:32px}
  .sec-head .btn-row .btn{flex:1 1 150px}
  .food-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto;gap:10px}
  .fg-a{grid-row:auto;grid-column:1 / -1;height:420px}
  .fg-b{grid-column:1 / -1;height:230px}
  .fg-c,.fg-d{height:200px}
  .roof-top{grid-template-columns:1fr;gap:32px}
  .roof-big{height:300px;order:-1}
  .roof-row{grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
  .roof-row .ph{height:180px}
  .roof-row .ph:first-child{grid-column:1 / -1;height:220px}
  .ev{grid-template-columns:1fr;gap:36px}
  .ev-collage{grid-template-rows:200px 150px;gap:10px}
  .pk li{grid-template-columns:1fr;gap:2px}
  .pk-k{min-width:0}
  .ev-copy .btn-row .btn{flex:1 1 100%}
  .gal-head{margin-bottom:28px}
  .gal-grid{grid-template-columns:1fr 1fr;grid-auto-rows:160px;gap:8px}
  .span2{grid-column:1 / -1}
  .find-grid{grid-template-columns:1fr;gap:40px}
  .dl{grid-template-columns:1fr}
  .wxqr-tip{display:block}
  .dl dt{border-bottom:0;padding-bottom:0;padding-top:16px}
  .gh{padding:28px 22px}
  .dish-list{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr 1fr;gap:10px;margin-top:32px}
  .trio .ph{height:200px}
  .trio .ph:first-child{grid-column:1 / -1;height:260px}
  .cta-band h2{font-size:36px}
  .cta-band .btn{width:100%}
  .post-grid{grid-template-columns:1fr}
  .panel{padding:28px 22px}
  .e404 h1{font-size:44px}
  .ftr{padding:56px 0 24px}
  .ftr-grid{grid-template-columns:1fr 1fr;gap:36px 24px}
  .ftr-brand{grid-column:1 / -1}
  .mbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:sticky;bottom:0;z-index:45;background:rgba(14,19,31,.97);border-top:1px solid rgba(201,164,92,.28);padding:10px 12px calc(12px + env(safe-area-inset-bottom))}
  .mbar .btn{min-height:52px;padding:0 10px;font-size:14px;gap:8px}
  dialog.modal{max-width:calc(100% - 24px)}
  .dialog{padding:30px 22px}
  .form{grid-template-columns:1fr}
  .taxi{padding:40px 22px}
  .taxi-addr{font-size:24px}
  dialog.lb{padding:64px 10px 20px}
  .lb-prev,.lb-next{top:auto;bottom:18px;margin-top:0}
  .lb-cap{margin-bottom:60px;padding:0 10px;text-align:center}
}