/* V4: architectural editorial direction; original VI and customer photography. */
:root{--paper:#f4f0e8;--ink:#282622;--muted:#706c64;--gold:#cfb78e}
h2{font-size:clamp(34px,3.8vw,56px);line-height:1.4}h2 em{font-style:normal;color:var(--red)}.wrap{max-width:1320px;width:calc(100% - 128px)}.header{height:88px;padding:0 4.45%;border-bottom:1px solid #e9e4da}.brand img{width:106px}.header nav{gap:36px}.header-book{background:transparent;border-color:var(--red);color:var(--red);padding:10px 21px}.header-book:hover{color:#fff}.brand>span{font-size:17px}.hero{height:calc(100svh - 88px);min-height:640px;max-height:930px}.hero-image{object-position:60% 50%;transition:opacity .4s}.hero-shade{background:linear-gradient(90deg,#0f171bd4 0%,#111a1b60 45%,#111a1b08 75%),linear-gradient(0deg,#10191b9c,transparent 32%)}.hero-content{width:calc(100% - 128px);max-width:1320px;padding-top:clamp(78px,12vh,150px)}.hero .eyebrow{letter-spacing:.25em;font-size:11px;margin-bottom:30px}.hero h1{font-size:clamp(54px,6vw,86px);font-weight:400;line-height:1.3;letter-spacing:.02em}.hero h1 span{display:inline;font:inherit;letter-spacing:inherit;color:#e4ceaa;margin:0}.hero-content>p.hero-subtitle{font-size:17px;letter-spacing:.18em;opacity:.9;margin-top:24px;margin-bottom:34px}.hero-link{display:inline-flex;align-items:center;gap:40px;padding:8px 0 14px;border-bottom:1px solid #ffffffa0;font-size:14px}.hero-link span{font-size:27px;line-height:1;transition:transform .2s}.hero-link:hover span{transform:translate(3px,-3px)}.hero-side{position:absolute;right:36px;top:50%;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em}.hero-foot{left:64px;right:64px;padding:20px 0 24px;align-items:center;letter-spacing:.12em}.hero-scenes{display:flex;gap:36px}.hero-scenes button{color:#fff;opacity:.6;padding:9px 0;font-size:13px;position:relative}.hero-scenes small{font:10px Georgia;margin-right:8px}.hero-scenes button[aria-pressed=true]{opacity:1}.hero-scenes button[aria-pressed=true]:after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--gold)}.explore-down{display:grid;place-items:center;width:44px;height:44px;border:1px solid #ffffff70;border-radius:50%;font-size:22px}.hero[data-scene=river] .hero-image{object-position:60% 50%}.hero[data-scene=night] .hero-image{object-position:50% 48%}.intro,.life,.location{padding-top:110px;padding-bottom:100px}.section-caption{font-size:11px;letter-spacing:.15em;margin-bottom:54px}.intro-grid{grid-template-columns:1.1fr 1fr;gap:90px}.intro-grid .lead{font-size:22px;line-height:1.75}.intro-grid .muted{max-width:510px}.intro-grid .text-link{margin-top:25px;color:var(--red)}.architecture-story{display:grid;grid-template-columns:1.55fr 1fr;gap:70px;margin-top:70px;align-items:end}.architecture-story figure{margin:0}.architecture-main>img{width:100%;height:auto;aspect-ratio:1.24;object-fit:cover}.architecture-story figcaption{display:flex;justify-content:space-between;font-size:12px;padding-top:16px;color:var(--muted)}.architecture-story figcaption small{font-size:9px;letter-spacing:.1em}.architecture-aside{display:flex;gap:25px;padding-bottom:55px;align-items:flex-start}.architecture-aside figure{flex:1;min-width:0}.architecture-aside img{width:100%;height:auto;aspect-ratio:.8;object-fit:cover}.vertical-note{writing-mode:vertical-rl;font-family:var(--serif);font-size:20px;letter-spacing:.16em;padding-top:20px}.facts{margin-top:65px;padding:35px 0 30px;border-bottom:1px solid var(--line)}.facts strong{font-size:54px}.service-line{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:27px;font-size:13px}.service-line>span{color:var(--red)}.service-line>small{font-size:10px;color:var(--muted)}.service-line>p{letter-spacing:.03em}.intro .source-note{margin-top:15px;font-size:10px}.spaces{padding:100px 0 88px;background:#f4f0e8}.spaces .section-heading{align-items:flex-end}.spaces .section-heading p{margin-top:20px}.filter-bar{margin-top:48px}.filters{gap:18px}.filters button{padding:9px 15px}.space-grid{gap:44px 28px}.card-image{aspect-ratio:1.2}.round-arrow{border-radius:0;right:0;bottom:0;width:48px;height:48px}.photo-badge{background:#faf6ede8}.card-head h3{font:27px Georgia,var(--sans)}.card-head>span{font-size:28px;color:var(--red)}.card-sub{font-size:13px}.card-bottom{font-size:12px}.space-bottom{margin-top:45px}.life{background:#760f22;color:#fff}.life .section-caption,.life .section-caption>span:first-child{color:#d5bd9b}.life h2{font-size:clamp(34px,3.4vw,50px)}.life h2 em{color:#e6cba5}.life-grid{grid-template-columns:1fr 1.35fr;gap:72px;align-items:start}.life-copy>p{color:#e5d6d7}.life-tabs{margin-top:35px;display:grid;grid-template-columns:1fr 1fr;gap:0 25px}.life-tabs button{border-color:#ffffff40;padding:20px 0;font-size:14px;gap:12px}.life-tabs button>span{color:#ccaa91}.life-tabs button[aria-selected=true]{color:#f2d4a6;border-color:#f2d4a6}.life-tabs button b{opacity:.7}.life-photo img{height:460px;object-fit:cover}.life-photo>span{background:#f2eadb;color:#592f2a;bottom:0;left:0;padding:9px 17px;font-size:11px}.life-description{padding-top:25px}.life-description h3{font-size:27px}.life-description p{color:#e0cdd0;font-size:13px;line-height:1.9;max-width:580px}.life-note{font-size:10px;color:#d5bdc1;border-top:1px solid #ffffff30;margin-top:42px;padding-top:20px}.river-story{height:550px}.river-story>div{top:115px;left:max(64px,calc((100vw - 1320px)/2))}.river-story h2{font-size:60px;line-height:1.35}.river-story:after{background:linear-gradient(90deg,#101c22c9,#101c221c)}.location-grid{grid-template-columns:1fr 1.15fr;gap:90px}.location-image{min-height:470px}.location-image span{background:#f5f0e6}.location .address{margin-top:26px;margin-bottom:32px}.location .travel-row{padding:20px 0}.faq{padding-bottom:100px;grid-template-columns:1fr 1.15fr;gap:90px}.faq h2{font-size:32px}.contact{padding:85px 0;background:#282622}.contact h2{font-size:46px}.contact-details>span,.contact .eyebrow{color:#d5bd9b}.contact .ivory{color:#6a1828;background:#eee5d6}.contact-details{padding-left:65px}.footer-top{padding:38px 0}.detail-page h2{font-size:26px}.dialog-body h2{font-size:32px}.detail-page{padding-top:35px}
@media(min-width:1600px){.hero-foot{left:calc((100% - 1320px)/2);right:calc((100% - 1320px)/2)}}
@media(max-width:1100px){.wrap,.hero-content{width:calc(100% - 80px)}.header{gap:24px}.header nav{gap:23px}.hero-foot{left:40px;right:40px}.hero h1{font-size:68px}.hero-side{right:18px}.intro-grid{gap:48px}.architecture-story{gap:36px}.architecture-aside{gap:20px;padding-bottom:30px}.facts strong{font-size:44px}.service-line{flex-wrap:wrap}.life-grid{gap:38px}.life-photo img{height:420px}.life-tabs{gap:0 18px}.location-grid,.faq{gap:45px}.contact-details{padding-left:35px}.river-story>div{left:40px}.contact h2{font-size:40px}.space-grid{gap:36px 22px}}
@media(max-width:760px){.header{height:76px;padding:0 22px;gap:16px}.header nav{gap:0}.header-book{padding:8px 12px}.brand img{width:95px}.wrap,.hero-content{width:calc(100% - 44px)}.hero{height:calc(100svh - 76px);min-height:570px;max-height:850px}.hero-content{padding-top:78px}.hero .eyebrow{font-size:9px;letter-spacing:.16em;margin-bottom:28px}.hero h1{font-size:49px;line-height:1.4;letter-spacing:.015em}.hero-content>p.hero-subtitle{font-size:14px;letter-spacing:.13em;margin:20px 0 30px}.hero-image{object-position:64% 50%}.hero-shade{background:linear-gradient(90deg,#0b171bc7,#0b171b35),linear-gradient(0deg,#0c171bb3,transparent 35%)}.hero-side{display:none}.hero-link{gap:34px;font-size:13px}.hero-foot{left:22px;right:22px;padding:15px 0 22px}.hero-position{display:none}.hero-scenes{gap:26px}.hero-scenes button{font-size:12px}.hero-scenes small{font-size:9px;margin-right:4px}.explore-down{width:36px;height:36px;font-size:18px}.intro,.life,.location{padding:64px 0}.section-caption{margin-bottom:34px;font-size:10px}.intro-grid{grid-template-columns:1fr;gap:27px}h2{font-size:34px}.intro-grid h2 span{display:initial}.intro-grid .lead{font-size:18px}.intro-grid .text-link{font-size:12px;margin-top:20px}.architecture-story{gap:15px;margin-top:36px;grid-template-columns:1.4fr 1fr;align-items:center}.architecture-main>img{aspect-ratio:.77}.architecture-aside{padding:0;display:block}.architecture-aside img{aspect-ratio:.7}.architecture-aside figcaption{font-size:10px}.vertical-note{writing-mode:initial;font-size:12px;letter-spacing:0;padding:0 0 13px}.architecture-story figcaption{font-size:10px;padding-top:12px}.architecture-story figcaption small{display:none}.facts{margin-top:36px;padding:27px 0;gap:25px 0}.facts strong{font-size:37px}.facts strong span{font-size:13px}.facts>div{padding-left:25px}.service-line{display:block;padding-top:22px}.service-line>p{font-size:11px;margin-top:7px}.service-line>small{display:block;margin-top:7px}.spaces{padding:64px 0 54px}.spaces .section-heading h2{font-size:34px}.spaces .section-heading p{font-size:13px}.filter-bar{margin-top:30px}.filters{gap:4px}.filters button{padding:8px 10px}.space-grid{grid-template-columns:1fr 1fr;gap:30px 15px}.card-image{aspect-ratio:.85}.card-head h3{font-size:22px}.card-head>span{font-size:22px}.card-head{margin-top:13px}.card-sub{font-size:11px}.round-arrow{width:30px;height:30px;font-size:18px}.card-bottom{font-size:10px}.space-bottom{margin-top:30px}.life h2{font-size:34px}.life-copy h2 br{display:block}.life-grid{grid-template-columns:1fr;gap:30px}.life-copy>p{font-size:13px}.life-tabs{margin-top:25px;gap:0 24px}.life-tabs button{font-size:13px;padding:15px 0}.life-photo img{height:300px}.life-photo>span{font-size:10px;padding:7px 12px}.life-description h3{font-size:24px}.life-description p{font-size:12px}.life-note{margin-top:30px;font-size:10px}.river-story{height:390px}.river-story>div{top:85px;left:22px;right:22px}.river-story h2{font-size:39px}.river-story div>p:last-child{line-height:1.9;max-width:285px}.location-grid{grid-template-columns:1fr;gap:30px}.location-image{height:330px;min-height:0}.location .address{font-size:16px;margin:23px 0}.location .travel-row{padding:16px 0}.faq{grid-template-columns:1fr;gap:28px;padding-bottom:60px}.faq h2{font-size:28px}.contact{padding:55px 0}.contact h2{font-size:33px}.contact-details{padding:30px 0 0}.footer-top{padding:30px 0}.detail-page{padding-top:25px}.dialog-body h2{font-size:28px}}
@media(max-width:370px){.wrap,.hero-content{width:calc(100% - 32px)}.hero h1{font-size:43px}.hero-foot{left:16px;right:16px}.space-grid{grid-template-columns:1fr}.card-image{aspect-ratio:1.4}.card-head{display:flex}.header{padding:0 16px;gap:12px}.hero-scenes{gap:20px}.filters button{padding:8px}.life-tabs{gap:0 18px}}
/* Keep the horizontal thumbnail rail inside narrow detail pages. */
.detail-layout>div,.detail-info{min-width:0}
@media(max-width:760px){.detail-layout{grid-template-columns:minmax(0,1fr)}}

/* One content boundary for navigation, every section and room details. */
:root{--content-max:1320px;--page-gutter:64px;--content-inset:max(var(--page-gutter),calc((100% - var(--content-max))/2))}
html{scrollbar-gutter:stable}
.wrap,.hero-content{width:calc(100% - var(--page-gutter)*2);max-width:var(--content-max);margin-inline:auto}
.header{padding-inline:var(--content-inset)}
.hero-foot{left:var(--content-inset);right:var(--content-inset)}
.river-story>div{left:var(--content-inset);right:var(--content-inset)}
.detail-description{max-width:none}
@media(max-width:1100px){:root{--page-gutter:40px}}
@media(max-width:760px){:root{--page-gutter:22px}.header nav,.header nav.open{padding-inline:var(--page-gutter)}}
@media(max-width:370px){:root{--page-gutter:16px}}

/* Golden brand treatment preserves the original logo silhouette. */
.brand-filter{position:absolute;pointer-events:none}
.brand img{filter:url(#brand-gold)}
.brand>span{color:#a77b2f}
.header nav a[aria-current=page]{color:var(--red)}
.header nav a[aria-current=page]:after{width:100%}
.page-heading{padding-top:34px;padding-bottom:32px;border-bottom:1px solid var(--line)}
.page-heading .breadcrumbs{margin-bottom:25px}
.page-title-row{display:flex;align-items:center;justify-content:space-between;gap:20px}
.page-title-row h1{font-size:42px;color:var(--red)}
.page-title-row>span{font-size:11px;letter-spacing:.18em;color:var(--muted)}
body:not([data-page=home]) #home-page>#home{display:none}
body:not([data-page=home]) .intro,body:not([data-page=home]) .life,body:not([data-page=home]) .spaces,body:not([data-page=home]) .location{padding-top:60px}
@media(max-width:760px){.page-heading{padding:25px 0}.page-title-row{display:block}.page-title-row h1{font-size:32px}.page-title-row>span{display:block;margin-top:10px;font-size:9px}.page-heading .breadcrumbs{margin-bottom:18px}.header nav a[aria-current=page]{font-weight:600}}
/* Match each page's initial paint to its content before JavaScript initializes. */
body[data-page=about] #home-page>section:not(#about):not(.contact),
body[data-page=spaces] #home-page>section:not(#spaces):not(.contact),
body[data-page=life] #home-page>section:not(#life):not(.river-story):not(.contact),
body[data-page=location] #home-page>section:not(#location):not(.faq):not(.contact){display:none}

/* Use a consistent Chinese Gothic face for every heading. */
:root{--heading-font:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC","Noto Sans SC",sans-serif}
h1,h2,h3,.hero h1,.card-head h3,.life-description h3{font-family:var(--heading-font);font-weight:600}

/* Navigation exit pairs with the short entrance animation in app.js. */
#main{transition:opacity .18s ease,transform .18s ease}
.page-leaving #main{opacity:0;transform:translateY(-6px);pointer-events:none}
@media(prefers-reduced-motion:reduce){#main{transition:none}.page-leaving #main{opacity:1;transform:none}}