/* Marcellus and Mukta with the full Vietnamese alphabet (OFL; renamed as the licence requires). Built by brand/tools/make-vietnamese-fonts.py. */
@font-face{font-family:"Mossy Display";src:url('../assets/homepage/MossyDisplay-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Mossy Text";src:url('../assets/homepage/MossyText-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:"Mossy Text";src:url('../assets/homepage/MossyText-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
:root{--paper:#faf9f4;--forest:#34433a;--ink:#253b33;--muted:#57635c;--terracotta:#a4542f;--sage:#edf2e9;--rule:#d5d9cb;--gutter:clamp(24px,5vw,88px);--serif:"Mossy Display",Georgia,serif;--body:"Mossy Text",Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:32px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select{font:inherit;color:inherit}button,summary,select{cursor:pointer}button{border:0}img{display:block;max-width:100%;height:auto}figure,p,h1,h2,h3{margin:0}figure{min-width:0}h1,h2,h3{font-family:var(--serif);font-weight:400;text-wrap:balance}h2{font-size:clamp(38px,4.1vw,64px);line-height:1.09;letter-spacing:-.035em}h3{font-size:29px;line-height:1.2;letter-spacing:-.02em}a,button,input,select,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--terracotta);outline-offset:5px}button:disabled{cursor:wait;opacity:.65}::selection{background:#dae2cc;color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip-link{position:fixed;top:12px;left:12px;z-index:10;background:var(--paper);color:var(--ink);padding:12px 20px;transform:translateY(-180%)}.skip-link:focus{transform:none}.section-inner{width:min(100% - var(--gutter)*2,1320px);margin-inline:auto}.prose{font-size:clamp(18px,1.5vw,21px);line-height:1.57}.prose h2{margin-bottom:32px}.prose p+p{margin-top:25px}.eyebrow{font-size:14px!important;font-weight:500;letter-spacing:.16em;line-height:1.5}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;min-height:52px;padding:12px 25px;background:var(--terracotta);color:#fffdf7;font-size:18px;line-height:1.25;white-space:nowrap;transition:background .18s}.button:hover{background:#8c4528}.button span{font-size:24px}.button-light{background:var(--paper);color:var(--forest)}.button-light:hover{background:#e7eadf}.text-actions{display:flex;flex-wrap:wrap;gap:16px 36px;margin-top:30px}.text-link{display:inline-flex;align-items:center;gap:22px;min-height:44px;padding:6px 0;border-bottom:1px solid currentColor;color:var(--terracotta);font-size:20px;line-height:1.3}.text-link:hover{color:#733c24}.text-link span{font-size:24px;line-height:1}.prose>.text-link{margin-top:25px}
/* The approved introduction stays still apart from the bird scene. */
.island{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;min-height:700px;height:100vh;height:100svh;padding:24px var(--gutter) 22px;color:#fffdf7;background:#28413f url('../assets/homepage/island-poster.webp') center/cover no-repeat}.island video{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}.island::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,28,27,.43),rgba(7,28,27,.1) 35%,rgba(7,28,27,.15) 65%,rgba(7,28,27,.6))}.hero-header{display:flex;align-items:center;justify-content:space-between;gap:24px}.desktop-nav{display:flex;gap:36px}.desktop-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:18px;text-shadow:0 1px 8px #102d2b}.desktop-nav a:hover{text-decoration:underline;text-underline-offset:7px}.hero-brand{align-self:center;padding:40px 0 60px;text-align:center;text-shadow:0 2px 25px rgba(5,25,23,.25)}.hero-brand img{width:clamp(100px,10.7vw,154px);margin:0 auto 20px}.hero-brand h1{font-size:clamp(30px,5.5vw,82px);line-height:1.2;letter-spacing:.08em;padding-left:.08em;white-space:nowrap}.hero-brand p{font-size:12px;line-height:1.4;letter-spacing:.48em;padding-left:.48em;margin-top:22px}.playback{display:inline-flex;align-items:center;gap:12px;min-width:44px;min-height:44px;padding:0;background:none;color:inherit;font-size:16px}.playback svg{width:40px;height:40px;padding:11px;border:1px solid rgba(255,253,247,.65);border-radius:50%;fill:currentColor}.playback .pause-icon{display:none}.playback[data-playing="true"] .pause-icon{display:block}.playback[data-playing="true"] .play-icon{display:none}.island :focus-visible{outline-color:#fffdf7}.mobile-menu{display:none}.hero-booking{width:min(100%,1320px);margin-inline:auto}.stay-planner{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(160px,1fr) minmax(160px,1fr) minmax(125px,.75fr) auto;align-items:center;background:rgba(250,249,244,.97);padding:16px 18px;color:var(--forest);box-shadow:0 12px 50px #0c282026;gap:0}.stay-planner :focus-visible{outline-color:var(--terracotta);outline-offset:2px}.planner-intro{padding:0 20px 0 10px}.planner-intro span{display:block;font-size:11px;letter-spacing:.13em;line-height:1.4;color:var(--muted);margin-bottom:5px}.planner-intro strong{font-family:var(--serif);font-size:21px;line-height:1.2;font-weight:400;display:block}.planner-field{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:0 19px;border-left:1px solid var(--rule)}.planner-field>span{font-size:14px;color:var(--muted);line-height:1.2}.planner-field input,.planner-field select{width:100%;min-width:0;min-height:44px;padding:2px 0;background:transparent;border:0;border-radius:0;font-size:18px;line-height:1.2}.planner-field input::-webkit-date-and-time-value{min-height:1.2em;text-align:left}.planner-field select{padding-right:4px}.planner-submit{min-height:56px;padding-inline:22px;gap:16px}.booking-help{font-size:14px;line-height:1.4;margin-top:10px;text-shadow:0 1px 8px #163730;min-height:20px}.booking-help p:not(:empty)+p:not(:empty){margin-top:5px}#booking-error:not(:empty){color:#fff3e0;font-weight:500}#booking-error:empty,#booking-hint:empty{display:none}
/* Long-form writing is real text, paired with independent photographs. */
.house-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);max-width:1600px;margin-inline:auto}.house-copy{align-self:center;padding:76px clamp(32px,5vw,88px)}.house-copy .eyebrow{margin-bottom:23px}.house-copy h2{font-size:clamp(43px,5vw,76px);margin-bottom:35px}.house-photo img{width:100%;height:100%;min-height:780px;max-height:1000px;object-fit:cover;object-position:53% center}.section-band{background:var(--sage)}.together{padding-block:104px}.split-story{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(40px,7vw,110px)}.split-story .prose{max-width:580px}.coast-photo img{width:100%;height:670px;object-fit:cover;object-position:48% center}.rooms{padding-block:112px 94px}.room-story{display:grid;grid-template-columns:1.22fr 1fr;align-items:center;gap:clamp(40px,6vw,90px)}.room-story figure img{width:100%;aspect-ratio:1.13;object-fit:cover;object-position:55% center}.room-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-top:70px;scroll-margin-top:30px}.room figure img{width:100%;aspect-ratio:1.32;object-fit:cover;object-position:55% center}.room-caption{display:flex;gap:18px;align-items:baseline;margin-top:19px}.room-number{color:var(--terracotta);font-size:14px}.room-caption p{color:var(--muted);font-size:17px;line-height:1.5;margin-top:9px}.island-story{padding-top:15px;padding-bottom:110px;display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:start}.breakfast-story h2{margin-bottom:35px;max-width:590px}.breakfast-photo img{width:100%;aspect-ratio:1.03;object-fit:cover;object-position:50% 79%}.island-story .prose{margin-top:25px}.road-photo img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center}.island-guide{margin-top:20px}.island-guide summary{list-style:none}.island-guide summary::-webkit-details-marker{display:none}.island-guide[open] summary .icon{transform:none}.island-guide-content{margin-top:20px;font-size:17px}.guide-intro{color:var(--muted);line-height:1.5}.island-guide ul{list-style:none;padding:0;margin:12px 0 0}.island-guide li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 20px;border-bottom:1px solid var(--rule);padding:7px 0}.island-guide li a{display:inline-flex;align-items:center;gap:12px;min-height:44px;font-weight:500}.island-guide li>span{color:var(--muted);font-size:16px}.arrival{background:var(--forest);color:var(--paper);padding-block:90px}.arrival-inner{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(50px,7vw,110px);align-items:start}.arrival h2{font-size:clamp(38px,4vw,60px);padding-top:3px}.arrival .prose{padding-left:clamp(30px,4vw,65px);border-left:1px solid #8a998661}.arrival-actions{display:flex;flex-wrap:wrap;gap:15px;margin-top:28px}.arrival :focus-visible{outline-color:var(--paper)}.site-footer{padding-block:54px 25px;display:grid;grid-template-columns:1.2fr 1fr auto;gap:25px 35px;align-items:center}.footer-brand{display:inline-flex;align-items:center;gap:17px;justify-self:start}.footer-brand img{width:66px;height:auto}.footer-brand strong{display:block;font-family:var(--serif);font-size:24px;letter-spacing:.02em;line-height:1.2;font-weight:400;white-space:nowrap}.footer-brand small{display:block;font-size:10px;letter-spacing:.4em;margin-top:9px}.site-footer address{font-style:normal;color:var(--muted);font-size:16px;line-height:1.5}.footer-contact{display:flex;flex-direction:column;align-items:flex-start;font-size:16px}.footer-contact a{display:inline-flex;align-items:center;min-height:44px}.footer-contact a:hover{text-decoration:underline;text-underline-offset:5px}.footer-bottom{grid-column:1/-1;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;border-top:1px solid var(--rule);padding-top:24px;color:var(--muted);font-size:14px;line-height:1.5}.image-note{max-width:740px}.footer-bottom small{font-size:14px;white-space:nowrap}
@media(min-width:1600px){.house-intro{max-width:none;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.house-copy{width:720px;max-width:100%;justify-self:end;padding-right:100px}.house-photo img{max-height:940px}.island{padding-inline:max(var(--gutter),calc((100vw - 1500px)/2))}}
@media(max-width:1150px){.stay-planner{grid-template-columns:minmax(155px,1fr) minmax(155px,1fr) minmax(110px,.8fr) auto}.planner-intro{display:none}.planner-field:first-of-type{border-left:0;padding-left:4px}.planner-field{padding-inline:14px}.house-copy{padding:60px 36px}.house-photo img{min-height:780px}.coast-photo img{height:640px}.room-story{grid-template-columns:1fr 1fr}.room-gallery{gap:20px}.room-caption{gap:11px}.room-caption h3{font-size:26px}.site-footer{grid-template-columns:1fr 1fr}.site-footer address{justify-self:end}.footer-contact{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:8px 28px}}
@media(max-width:820px){:root{--gutter:32px}.desktop-nav{gap:26px}.desktop-nav a{font-size:17px}.island{min-height:670px}.stay-planner{padding:16px;grid-template-columns:1fr 1fr;gap:15px}.planner-field{border-left:0;padding:0}.planner-field:first-of-type{padding:0}.planner-field:nth-of-type(2){padding-left:15px;border-left:1px solid var(--rule)}.planner-field input,.planner-field select{min-height:44px}.planner-guests{padding-top:6px;border-top:1px solid var(--rule)}.planner-submit{min-height:52px}.hero-brand{padding-bottom:45px}.hero-brand h1{font-size:clamp(28px,6.25vw,50px);letter-spacing:.055em}.house-intro{grid-template-columns:1fr 1fr}.house-copy{padding:55px 28px}.house-copy h2{font-size:43px}.house-copy .prose{font-size:18px}.house-photo img{min-height:860px;object-position:52% center}.together{padding-block:72px}.split-story{gap:30px}.coast-photo img{height:670px}.prose{font-size:18px}.prose h2{margin-bottom:26px}.prose p+p{margin-top:22px}.rooms{padding-block:75px}.room-story{grid-template-columns:1fr;gap:35px}.room-story figure img{aspect-ratio:1.5;object-position:50% center}.room-story .prose{max-width:650px}.room-story h2 br{display:none}.room-gallery{padding-top:50px;gap:18px}.room-caption{display:block}.room-number{display:block;margin-bottom:8px}.room-caption h3{font-size:26px}.room-caption p{font-size:16px}.island-story{gap:32px;padding-bottom:75px}.breakfast-story h2{font-size:38px}.island-guide li{display:block}.island-guide li>span{display:block;padding-bottom:8px}.arrival{padding-block:68px}.arrival-inner{grid-template-columns:1fr;gap:35px}.arrival h2 br{display:none}.arrival .prose{border-left:0;padding-left:0;max-width:650px}.site-footer{padding-top:42px}.footer-brand strong{font-size:22px}.footer-brand img{width:58px}.footer-bottom{flex-direction:column;gap:15px}}
@media(max-width:600px){:root{--gutter:24px}html{scroll-padding-top:22px}body{font-size:18px}h2{font-size:39px}.island{padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(17px,env(safe-area-inset-bottom));min-height:680px}.island video{object-position:30% center}.island{background-position:30% center}.hero-header{gap:18px}.desktop-nav{display:none}.mobile-menu{display:block;position:relative;z-index:3}.mobile-menu summary{display:flex;align-items:center;gap:11px;min-height:44px;list-style:none;font-size:17px}.mobile-menu summary::-webkit-details-marker{display:none}.menu-symbol{display:flex;flex-direction:column;gap:6px;width:22px}.menu-symbol i{display:block;height:1px;width:22px;background:currentColor}.mobile-menu nav{position:absolute;top:57px;left:0;width:min(280px,calc(100vw - 48px));padding:13px 22px;background:var(--paper);color:var(--forest);box-shadow:0 12px 35px #152f3430}.mobile-menu nav a{display:flex;align-items:center;min-height:49px;border-bottom:1px solid var(--rule)}.mobile-menu nav a:last-child{border:0}.mobile-menu nav a:focus-visible{outline-color:var(--terracotta)}.hero-brand{padding:34px 0 42px}.hero-brand img{width:110px;margin-bottom:18px}.hero-brand h1{font-size:clamp(22px,6.1vw,36px);letter-spacing:.045em;padding-left:.045em}.hero-brand p{font-size:10px;letter-spacing:.4em;margin-top:18px}.playback-label{font-size:14px}.playback{gap:9px}.playback svg{width:36px;height:36px;padding:10px}.stay-planner{padding:17px 15px;gap:14px 12px}.planner-field>span{font-size:14px}.planner-field input,.planner-field select{font-size:17px;min-height:44px;padding:3px 0}.planner-field:nth-of-type(2){padding-left:12px}.planner-submit{font-size:16px;min-height:52px;padding:10px 12px;gap:9px;white-space:normal}.planner-submit span{font-size:21px}.booking-help{font-size:14px;line-height:1.4;margin-top:9px}.house-intro{display:flex;flex-direction:column}.house-copy{padding:60px var(--gutter) 38px}.house-copy h2{font-size:48px;margin-bottom:27px}.house-copy .eyebrow{font-size:13px!important;margin-bottom:20px}.house-photo{margin:0 var(--gutter) 0}.house-photo img{min-height:0;max-height:none;aspect-ratio:4/5;object-fit:cover;object-position:50% center}.text-actions{gap:12px 28px;margin-top:23px}.text-link{font-size:19px;gap:18px}.together{padding-block:65px 60px;margin-top:50px}.split-story{grid-template-columns:1fr;gap:34px}.together h2 br{display:none}.coast-photo img{height:auto;aspect-ratio:1.05;object-fit:cover;object-position:40% center}.rooms{padding-block:60px}.room-story{gap:30px}.room-story figure img{aspect-ratio:1.22}.room-story .prose h2{font-size:40px}.room-gallery{display:grid;grid-template-columns:1fr;gap:34px;padding-top:44px}.room figure img{aspect-ratio:1.35;object-position:center}.room-caption{display:flex;gap:15px;margin-top:16px}.room-number{margin:0}.room-caption h3{font-size:29px}.room-caption p{margin-top:6px;font-size:17px}.island-story{grid-template-columns:1fr;gap:42px;padding-top:0;padding-bottom:62px}.breakfast-story h2{font-size:40px;margin-bottom:27px}.breakfast-photo img{aspect-ratio:1;object-position:50% 79%}.island-story .prose{margin-top:24px}.road-photo img{height:auto;aspect-ratio:4/5;object-position:center}.island-guide li{display:flex}.island-guide li>span{padding-bottom:0}.arrival{padding-block:58px}.arrival-inner{gap:28px}.arrival h2{font-size:40px}.arrival-actions{gap:12px}.arrival-actions .button{font-size:17px;padding-inline:19px;gap:16px}.site-footer{grid-template-columns:1fr;gap:24px;padding-block:35px 23px}.site-footer address{justify-self:start}.footer-brand{gap:15px}.footer-brand strong{font-size:24px}.footer-brand img{width:61px}.footer-contact{flex-direction:column;gap:0}.footer-bottom{padding-top:21px;font-size:14px}.image-note{max-width:43ch}}
@media(max-width:360px){:root{--gutter:18px}.island{min-height:650px}.hero-brand h1{font-size:21px;letter-spacing:.055em}.hero-brand img{width:96px}.playback-label{position:absolute;overflow:hidden;clip:rect(0,0,0,0);width:1px;height:1px}.planner-submit{gap:6px;padding-inline:8px}.planner-field input,.planner-field select{font-size:16px}.planner-field:nth-of-type(2){padding-left:0;border-left:0}.house-copy h2{font-size:43px}.footer-brand strong{font-size:21px}.button{white-space:normal}.island-guide li{display:block}.island-guide li>span{padding-bottom:8px}}
@media(max-height:620px) and (min-width:601px){.island{min-height:660px}.hero-brand{padding-block:25px 35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

/* A single, restrained action language for the whole page. */
.icon{display:block;width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.button{border-radius:4px;gap:12px;font-size:18px;min-height:52px}
.house-actions{gap:12px;margin-top:30px;align-items:center}
.button-primary{background:var(--forest)}.button-primary:hover{background:#243b31}
.button-secondary{background:transparent;color:var(--forest);border:1px solid #bcc5b7;padding-inline:19px}
.button-secondary:hover{background:var(--sage);color:var(--forest)}.button-secondary .icon{width:16px;height:16px;flex-basis:16px}
.text-link{font-size:19px;gap:12px;border-bottom-color:#c08b72}.planner-submit{font-size:18px;padding-inline:26px}
.mobile-book{display:none}
/* The foliage belongs below the heading, leaving both reading and actions clear. */
.arrival{overflow:hidden}.arrival-inner{align-items:stretch}.arrival-heading{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.arrival-heading h2{position:relative;z-index:1}
/* Brand, navigation and contact details share one clear footer baseline. */
.site-footer{display:block;padding-block:56px 28px}.footer-main{display:grid;grid-template-columns:minmax(260px,1.4fr) minmax(140px,.8fr) minmax(220px,1fr);gap:40px 60px;align-items:start}
.footer-identity{display:flex;flex-direction:column;align-items:flex-start;gap:23px}.footer-brand{gap:15px}.footer-brand img{width:59px;flex:0 0 59px}.footer-brand strong{font-size:24px;letter-spacing:.015em}.footer-brand small{font-size:10px;letter-spacing:.36em;margin-top:8px}.site-footer .footer-location{font-style:normal;font-size:16px;line-height:1.5;color:var(--muted);justify-self:start;margin:0}
.footer-column{display:flex;flex-direction:column;align-items:flex-start;min-width:0}.footer-heading{font:500 17px/1.4 var(--body);letter-spacing:0;margin:0 0 13px;color:var(--forest)}.footer-column a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;line-height:1.4;color:var(--muted)}.footer-column a:hover{color:var(--forest);text-decoration:underline;text-underline-offset:5px}.footer-contacts a{overflow-wrap:anywhere}
.footer-bottom{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;margin-top:32px;padding-top:24px;border-top:1px solid var(--rule);gap:28px;font-size:14px;line-height:1.5}.image-note{max-width:680px}.footer-bottom small{font-size:14px;white-space:nowrap}
@media(max-width:980px){.footer-main{grid-template-columns:minmax(220px,1.2fr) minmax(120px,.7fr) minmax(185px,1fr);gap:30px}.footer-brand strong{font-size:21px}.footer-brand img{width:49px;flex-basis:49px}.footer-brand{gap:11px}}
@media(max-width:820px){.arrival-heading{position:relative;padding-right:220px;min-height:165px;justify-content:center}.footer-main{grid-template-columns:1fr 1fr;gap:32px}.footer-identity{grid-column:1/-1;gap:18px}.footer-brand strong{font-size:24px}.footer-brand img{width:59px;flex-basis:59px}.footer-bottom{flex-direction:column;gap:16px}}
@media(max-width:600px){
 .island{display:block;height:100vh;height:100svh;min-height:520px;padding-top:max(18px,env(safe-area-inset-top));padding-bottom:max(18px,env(safe-area-inset-bottom))}.hero-header{position:relative;z-index:3;justify-content:space-between}.hero-booking{display:none}.mobile-book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 19px;border:1px solid #fffdf7a6;border-radius:3px;background:#19352d29;color:#fffdf7;font-size:17px;line-height:1.3}.mobile-book:hover{background:#19352d80}.hero-brand{position:absolute;top:50%;left:var(--gutter);right:var(--gutter);transform:translateY(-50%);padding:0}.hero-header .playback{position:absolute;top:calc(100svh - 102px);right:0;min-height:44px}.hero-header .playback-label{font-size:15px}.hero-header .playback svg{width:38px;height:38px}.hero-brand img{width:119px;margin-bottom:20px}.hero-brand p{margin-top:19px}
 .house-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.house-actions .button{font-size:17px;padding:12px 10px;gap:8px;min-height:52px;white-space:nowrap}.arrival-actions .button{flex:1 1 auto;min-height:52px;font-size:17px;padding:12px 18px}.arrival-heading{display:block;padding:0;min-height:0}.arrival-heading h2{max-width:500px}.arrival-inner{gap:30px}.site-footer{padding-block:38px 24px}.footer-main{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px 24px}.footer-identity{gap:17px}.footer-brand{gap:14px}.footer-brand strong{font-size:24px}.footer-brand img{width:59px;flex-basis:59px}.footer-heading{font-size:17px;margin-bottom:9px}.footer-column a{font-size:16px;min-height:44px}.footer-bottom{margin-top:27px;padding-top:22px;gap:16px}.image-note{max-width:46ch}
}
@media(max-width:360px){.house-actions{grid-template-columns:1fr}.house-actions .button{width:100%}.footer-main{grid-template-columns:1fr;gap:28px}.footer-identity{grid-column:auto}.footer-brand strong{font-size:22px}.hero-brand img{width:106px}}
@media(max-width:600px) and (max-height:520px){.island{min-height:440px}.hero-header .playback{top:calc(440px - 102px)}.hero-brand img{width:90px}.hero-brand h1{font-size:27px}.hero-brand p{margin-top:13px}}

/* Foliage enters from the edge, as in the approved composition. */
.arrival{position:relative}.arrival-inner{position:relative;z-index:1;padding-right:clamp(50px,8vw,130px)}.arrival-heading{position:static;padding:0;min-height:0;display:block}.arrival .prose{position:relative}
@media(max-width:820px){.arrival-inner{padding-right:70px}.arrival-heading{padding:0;min-height:0}}
@media(max-width:600px){.arrival-inner{padding:0;gap:28px}.arrival-heading{padding-right:62px;min-height:180px}.arrival .prose{padding:0}.arrival .prose p{position:relative}}

/* Playback remains separate from the mobile booking action. */
.hero-media-controls{position:absolute;top:24px;right:var(--gutter);z-index:3;display:flex;align-items:center;gap:15px}
.hero-media-controls button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:44px;min-height:44px;padding:7px 9px;background:transparent;color:#fffdf7;font:400 15px/1.4 var(--body);cursor:pointer}
.hero-media-controls .playback-label{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:nowrap}
.hero-media-controls .playback svg{width:18px;height:18px;border:0;border-radius:0;padding:0;flex:0 0 18px}
/* Native disclosure styled as the same quiet secondary action used at the house. */
.island-guide{margin-top:25px}.island-guide .guide-toggle{display:inline-flex;align-items:center;justify-content:space-between;gap:22px;min-height:52px;padding:12px 20px;border:1px solid #b7c1b1;border-radius:4px;background:transparent;color:var(--forest);font-size:18px;line-height:1.4;list-style:none;user-select:none}
.island-guide .guide-toggle:hover{background:var(--sage)}.island-guide[open] .guide-toggle{border-color:var(--forest);background:var(--forest);color:var(--paper)}.island-guide[open] .guide-plus{display:none}
.island-guide-content{margin-top:16px;padding:20px 22px;background:#eff2e9;border-radius:4px}.island-guide-content .guide-intro{font-size:17px}.island-guide-content li:last-child{border-bottom:0}.island-guide-content li a{color:var(--forest)}
/* Full-width garden canopy, with one continuous readable green wash. */
.arrival{position:relative;overflow:hidden;background:#23412f url('../assets/homepage/arrival-canopy.webp') center/cover no-repeat;color:#fffdf7;isolation:isolate}
.arrival::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(17,43,28,.67);pointer-events:none}
.arrival-inner{position:relative;z-index:1;align-items:center;padding-right:0;gap:clamp(45px,6vw,90px)}.arrival-heading{position:static;display:block;min-height:0;padding:0}.arrival-heading h2{max-width:560px;text-shadow:0 2px 18px #17342140}.arrival .prose{position:relative;padding-left:clamp(30px,4vw,65px);border-left:1px solid #eef3e552;text-shadow:0 1px 10px #17342130}.arrival-actions{text-shadow:none}
/* A compact footer: identity followed by two useful rows, not distant columns. */
.site-footer{display:block;padding-block:38px 23px}.footer-top{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;margin-bottom:20px}.footer-brand{gap:13px}.footer-brand img{width:54px;flex-basis:54px}.footer-brand strong{font-size:23px}.footer-brand small{margin-top:7px;font-size:10px}.site-footer .footer-location{font-size:16px;line-height:1.5;color:var(--muted);margin:0;max-width:none}
.footer-links{display:grid;gap:2px}.footer-row{display:flex;align-items:baseline;gap:20px;min-width:0}.footer-row-label{flex:0 0 80px;font-size:15px;font-weight:500;line-height:1.5;color:var(--muted)}.footer-row-links{display:flex;flex-wrap:wrap;align-items:center;gap:0 28px}.footer-row-links a{display:inline-flex;align-items:center;min-height:44px;font-size:16px;line-height:1.4;color:var(--forest);overflow-wrap:anywhere}.footer-row-links a:hover{text-decoration:underline;text-underline-offset:5px}.footer-bottom{margin-top:21px;padding-top:19px;gap:24px}.image-note{max-width:750px}
@media(min-width:1600px){.hero-media-controls{right:max(var(--gutter),calc((100vw - 1500px)/2))}}
@media(max-width:820px){.hero-media-controls{gap:7px}.hero-media-controls button{font-size:14px;padding-inline:7px;gap:8px}.arrival-inner{padding:0;gap:30px}.arrival .prose{padding:0;border-left:0}.arrival-heading{padding:0;min-height:0}.footer-top{gap:16px 24px}.footer-row-links{gap:0 23px}}
@media(max-width:600px){
 .hero-media-controls{top:auto;right:var(--gutter);bottom:max(22px,env(safe-area-inset-bottom));gap:4px;padding:3px 5px;border:1px solid #fffdf74f;border-radius:999px;background:#183c3296;backdrop-filter:blur(9px)}.hero-media-controls button{min-height:44px;font-size:14px;padding:7px 10px;gap:8px}.hero-media-controls .playback-label{font-size:14px}.hero-media-controls .playback svg{width:17px;height:17px;flex-basis:17px}
 .island-guide .guide-toggle{width:100%;font-size:18px;min-height:52px;padding:12px 18px}.island-guide-content{padding:18px}.island-guide-content li{gap:0 12px}.arrival{background-position:58% center}.arrival-inner{padding:0;gap:27px}.arrival-heading{padding:0;min-height:0}.arrival .prose{padding:0;border:0}.arrival::before{background:rgba(17,43,28,.69)}
 .site-footer{padding-block:30px 20px}.footer-top{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:19px}.footer-brand strong{font-size:23px}.footer-brand img{width:54px;flex-basis:54px}.footer-row{display:block}.footer-row-label{display:block;margin-bottom:2px;font-size:14px}.footer-row-links{gap:0 22px}.footer-links{gap:13px}.footer-row-links a{font-size:16px;min-height:44px}.footer-contact-links{gap:0 20px}.footer-bottom{margin-top:22px;padding-top:18px;gap:15px}.image-note{max-width:48ch}
}
@media(max-width:360px){.hero-media-controls{right:18px;gap:2px;padding-inline:4px}.hero-media-controls button{font-size:14px;padding-inline:8px}.footer-row-links{column-gap:19px}.footer-brand strong{font-size:21px}}

/* Keep the compact footer balanced: identity beside one connected links block. */
.site-footer .footer-main{display:grid;grid-template-columns:260px minmax(0,1fr);align-items:start;gap:44px;width:100%;max-width:1056px;margin-inline:auto}
.site-footer .footer-top{display:flex;flex-direction:column;align-items:flex-start;gap:17px;margin-bottom:0}
.site-footer .footer-links{min-width:0;gap:2px}.site-footer .footer-row-links{flex:1;min-width:0;column-gap:24px}.site-footer .footer-bottom{max-width:1056px;margin-inline:auto}
@media(min-width:601px) and (max-width:900px){.site-footer .footer-main{grid-template-columns:230px minmax(0,1fr);gap:32px}.site-footer .footer-row{gap:14px}.site-footer .footer-row-label{flex-basis:65px}.site-footer .footer-row-links{column-gap:20px}.site-footer .footer-brand strong{font-size:21px}.site-footer .footer-brand img{width:48px;flex-basis:48px}.site-footer .footer-brand{gap:11px}.site-footer .footer-location{max-width:230px}}
@media(max-width:600px){.site-footer .footer-main{display:block;max-width:none}.site-footer .footer-top{gap:14px;margin-bottom:19px}.site-footer .footer-links{gap:13px}.site-footer .footer-row-links{column-gap:22px}.site-footer .footer-bottom{max-width:none}}

/* Keep navigation, text enlargement and short screens usable at the same breakpoints. */
.hero-media-controls button,.hero-media-controls .playback-label{font-size:16px}
.hero-brand h1,.footer-brand strong{white-space:normal;overflow-wrap:normal;text-wrap:balance}
.house-copy,.prose,.room-caption>div,.breakfast-story,.around-island{min-width:0}
.button,.house-actions .button{max-width:100%;min-width:0;white-space:normal;text-wrap:balance}
.mobile-menu nav{max-height:calc(100svh - 108px);overflow-y:auto;overscroll-behavior:contain}
.footer-row-links a{max-width:100%}.site-footer .footer-row-label{min-width:0}
@media(min-width:601px) and (max-width:740px){
 .desktop-nav{display:none}.hero-header{position:relative;z-index:4}.mobile-menu{display:block;position:relative}.mobile-menu summary{display:flex;align-items:center;gap:11px;min-height:44px;font-size:17px;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.menu-symbol{display:flex;flex-direction:column;gap:6px;width:22px}.menu-symbol i{display:block;width:22px;height:1px;background:currentColor}.mobile-menu nav{position:absolute;top:57px;left:0;width:280px;padding:13px 22px;background:var(--paper);color:var(--forest);box-shadow:0 12px 35px #152f3430}.mobile-menu nav a{display:flex;align-items:center;min-height:49px;border-bottom:1px solid var(--rule)}.mobile-menu nav a:last-child{border:0}.mobile-menu nav a:focus-visible{outline-color:var(--terracotta)}.mobile-book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 19px;border:1px solid #fffdf7a6;border-radius:3px;background:#19352d29;color:#fffdf7;font-size:17px;line-height:1.3}.hero-media-controls{top:84px}.hero-brand{padding-top:80px;padding-bottom:35px}
}
@media(max-width:360px){
 .hero-media-controls .playback{min-width:44px;padding-inline:10px}.hero-media-controls button{font-size:16px}.hero-media-controls{max-width:calc(100% - 36px)}
}
@media(max-height:500px) and (max-width:900px){
 .island{display:block;height:100vh;height:100svh;min-height:360px;padding:14px max(var(--gutter),env(safe-area-inset-right)) 14px max(var(--gutter),env(safe-area-inset-left))}.hero-header{position:relative;z-index:4;justify-content:space-between}.desktop-nav,.hero-booking{display:none}.mobile-menu{display:block;position:relative;z-index:4}.mobile-menu summary{display:flex;align-items:center;gap:11px;min-height:44px;font-size:17px;list-style:none}.mobile-menu summary::-webkit-details-marker{display:none}.menu-symbol{display:flex;flex-direction:column;gap:6px;width:22px}.menu-symbol i{display:block;width:22px;height:1px;background:currentColor}.mobile-menu nav{position:absolute;top:52px;left:0;width:min(280px,calc(100vw - 48px));max-height:calc(100svh - 86px);overflow-y:auto;padding:10px 20px;background:var(--paper);color:var(--forest);box-shadow:0 12px 35px #152f3430}.mobile-menu nav a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--rule)}.mobile-menu nav a:last-child{border:0}.mobile-menu nav a:focus-visible{outline-color:var(--terracotta)}.mobile-book{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 19px;border:1px solid #fffdf7a6;border-radius:3px;background:#19352d29;color:#fffdf7;font-size:17px;line-height:1.3}.hero-brand{position:absolute;top:48%;left:var(--gutter);right:var(--gutter);transform:translateY(-50%);padding:0}.hero-brand img{width:77px;margin-bottom:12px}.hero-brand h1{font-size:clamp(25px,4.8vw,38px);letter-spacing:.055em;line-height:1.15}.hero-brand p{font-size:10px;margin-top:13px}.hero-media-controls{top:auto;right:max(var(--gutter),env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));gap:4px;padding:3px 5px;border:1px solid #fffdf74f;border-radius:999px;background:#183c3296;backdrop-filter:blur(9px)}.hero-media-controls button{min-height:44px;font-size:16px;padding:7px 10px;gap:8px}
}
/* Phones: the opening scene fills the whole screen. Newer iOS Safari draws the page under its
   translucent toolbars, below even 100lvh, so the scene runs past the bottom edge; the brand is
   centred in the area that is always visible. */
@media(max-width:600px){
  .island{height:calc(100vh + 140px);height:calc(100lvh + 140px);min-height:580px}
  .hero-brand{top:50vh;top:50svh}
}
@media(max-width:600px) and (orientation:portrait){.island{background-image:url('../assets/homepage/island-poster-portrait.webp?v=1');background-position:center}.island video{object-position:center}}

/* ==========================================================================
   Header booking tag + "Khám phá" guidebook page (2026-09-26, menu1).
   Appended last: every selector is scoped to .hero-header .mobile-book,
   .mobile-menu or html[data-menu]; whether either control shows at all is
   still decided by the existing ≤600 / 601–740 / landscape-phone blocks.
   ========================================================================== */
:root{--menu-ease-page:cubic-bezier(.77,0,.18,1);--menu-ease-out:cubic-bezier(.22,1,.36,1);--menu-open:640ms;--menu-close:520ms;--menu-overscan:140px}

/* ---- Booking tag: the one solid object on the film ------------------------ */
.hero-header .mobile-book{position:relative;gap:10px;min-height:44px;padding:0 15px 0 18px;border:0;border-radius:4px;background:rgba(250,249,244,.9);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);color:var(--forest);font-family:var(--serif);font-size:16px;line-height:1;letter-spacing:.035em;white-space:nowrap;box-shadow:0 12px 30px -16px rgba(7,28,27,.6),inset 0 0 0 1px rgba(255,255,255,.5);touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .3s,transform .2s var(--menu-ease-out)}
.hero-header .mobile-book>span{padding-top:1px}
.hero-header .mobile-book:hover{background:rgba(250,249,244,.9)}
.hero-header .mobile-book .book-arrow{width:15px;height:15px;flex:0 0 15px;fill:none;stroke:var(--terracotta);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--menu-ease-out)}
.hero-header .mobile-book:active{transform:scale(.97)}
.hero-header .mobile-book:focus-visible{outline:2px solid #fffdf7;outline-offset:4px}
@media(hover:hover){.hero-header .mobile-book:hover{background:#fffdf7}.hero-header .mobile-book:hover .book-arrow{transform:translateX(3px)}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.hero-header .mobile-book{background:#faf9f4}}
/* Slow island connections: a hairline draws while the booking page loads. */
.hero-header .mobile-book::after,.mobile-menu .menu-book::after{content:"";position:absolute;left:16px;right:16px;bottom:8px;height:1px;background:var(--terracotta);transform:scaleX(0);transform-origin:left;opacity:0}
.hero-header .mobile-book.is-pending::after,.mobile-menu .menu-book.is-pending::after{opacity:1;animation:menu-pending 1.3s var(--menu-ease-page) infinite}
.mobile-menu .menu-book::after{background:#e9c9b6;bottom:10px;left:20px;right:20px}
@keyframes menu-pending{0%{transform:scaleX(0);opacity:1}60%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}

/* ---- Toggle: two hairlines + a word that become "✕ Đóng" ------------------ */
.mobile-menu>summary{position:relative;z-index:2;display:flex;align-items:center;gap:11px;min-height:44px;padding-right:6px;list-style:none;user-select:none;-webkit-user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:color .2s linear}
.mobile-menu>summary::-webkit-details-marker{display:none}
.mobile-menu .menu-symbol{position:relative;display:block;width:22px;height:8px}
.mobile-menu .menu-symbol i{position:absolute;left:0;display:block;width:22px;height:1px;background:currentColor;transition:transform .42s var(--menu-ease-page),scale .42s var(--menu-ease-page),translate .42s var(--menu-ease-page)}
.mobile-menu .menu-symbol i:first-child{top:0}
/* 15px drawn as a 22px bar scaled from its left end (scale about the centre, then shifted back by 3.5px). */
.mobile-menu .menu-symbol i:last-child{top:7px;width:22px;scale:.682 1;translate:-3.5px 0}
.mobile-menu[open] .menu-symbol i:first-child{transform:translateY(3.5px) rotate(45deg)}
.mobile-menu[open] .menu-symbol i:last-child{scale:1;translate:0;transform:translateY(-3.5px) rotate(-45deg)}
.mobile-menu .menu-label{display:grid}
.mobile-menu .menu-label>span{grid-area:1/1}
/* The accessible name always equals the visible word; only the fade-in is delayed. */
.mobile-menu:not([open]) .menu-label-close,.mobile-menu[open] .menu-label-open{opacity:0;visibility:hidden}
.mobile-menu.is-enhanced .menu-label>span{transition:opacity .22s linear .26s}
.mobile-menu.is-enhanced.is-open .menu-label-close{transition-delay:.34s}
.mobile-menu.is-enhanced:not([open]) .menu-label-close,.mobile-menu.is-enhanced.is-open .menu-label-open{transition:none}
.mobile-menu[open]>summary:focus-visible{outline-color:var(--terracotta)}
/* On the film the word needs the same soft shadow as the brand: bright sky frames stay above 4.5:1. */
.hero-header .mobile-menu:not(.is-open)>summary{text-shadow:0 1px 3px rgba(5,25,23,.35),0 1px 14px rgba(5,25,23,.45)}
.hero-header .mobile-menu:not(.is-open) .menu-symbol i{box-shadow:0 1px 3px rgba(5,25,23,.35)}

/* ---- Content shared by both modes ---------------------------------------- */
.mobile-menu .menu-sheet{color:var(--forest)}
.mobile-menu .menu-nav{position:static;width:auto;max-height:none;overflow:visible;padding:0;margin:0;background:none;box-shadow:none}
.mobile-menu .menu-nav .menu-chapter,.mobile-menu .menu-nav .menu-book{border:0}
.mobile-menu .menu-sheet a{-webkit-tap-highlight-color:transparent}
.mobile-menu .menu-chapter{position:relative;display:grid;grid-template-columns:26px minmax(0,1fr) auto;align-items:center;gap:0 14px;color:var(--forest)}
.mobile-menu .menu-no{align-self:start;font-size:12px;line-height:1;letter-spacing:.14em;color:var(--muted);font-variant-numeric:tabular-nums}
.mobile-menu .menu-text{display:flex;flex-direction:column;min-width:0}
.mobile-menu .menu-title{font-family:var(--serif);font-size:21px;line-height:1.15;letter-spacing:-.005em}
.mobile-menu .menu-note{font-size:15px;line-height:1.35;color:var(--muted)}
.mobile-menu .menu-book{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--forest);color:#fffdf7;border-radius:4px}
.mobile-menu .menu-book-text{display:flex;flex-direction:column;min-width:0}
.mobile-menu .menu-book-title{font-family:var(--serif);font-size:20px;line-height:1.2;letter-spacing:.01em}
.mobile-menu .menu-book-note{font-size:14px;line-height:1.35;color:#d7ddd3}
.mobile-menu .menu-arrow{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--menu-ease-out)}
.mobile-menu .menu-foot{color:var(--muted);font-size:15px;line-height:1.45}
.mobile-menu .menu-foot p{margin:0}
.mobile-menu .menu-contact{display:inline-flex;align-items:center;min-height:44px;color:var(--forest);font-weight:500;text-decoration:underline;text-decoration-color:#b9c2b3;text-decoration-thickness:1px;text-underline-offset:6px}
.mobile-menu .menu-foot small{display:block;font-size:12px;line-height:1.45;color:#6b756f}
.mobile-menu .menu-sheet :focus-visible{outline:2px solid var(--terracotta);outline-offset:4px}

/* ---- Without JS (or without `inert`): a compact paper card ---------------- */
.mobile-menu:not(.is-enhanced) .menu-sheet{position:absolute;top:57px;left:0;width:min(320px,calc(100vw - 48px));max-height:calc(100svh - 108px);overflow-y:auto;overscroll-behavior:contain;padding:10px 22px 16px;background:var(--paper);box-shadow:0 12px 35px #152f3430}
.mobile-menu:not(.is-enhanced) :is(.menu-scrim,.menu-edge,.menu-masthead,.menu-eyebrow,.menu-thumb,.menu-note,.menu-book-note,.menu-foot p,.menu-foot small){display:none}
.mobile-menu:not(.is-enhanced) .menu-chapter{min-height:50px;border-bottom:1px solid var(--rule)}
.mobile-menu:not(.is-enhanced) .menu-no{align-self:center}
.mobile-menu:not(.is-enhanced) .menu-book{min-height:52px;margin-top:14px;padding:0 18px}

/* ---- Enhanced: a full page that turns in over the film -------------------- */
.mobile-menu.is-enhanced{position:relative;z-index:3}
/* The closing page is a short-lived inert copy (JS) under the toggle, so <details> can close at once. */
.mobile-menu.menu-ghost{position:absolute;top:0;left:0;z-index:2}
/* The sheet runs 140px below the screen, like the hero, so iOS's translucent toolbar shows paper, not film. */
.mobile-menu.is-enhanced .menu-sheet{position:fixed;top:0;right:0;bottom:calc(-1 * var(--menu-overscan));left:0;z-index:1;pointer-events:none}
.mobile-menu.is-enhanced.is-open .menu-sheet{pointer-events:auto}
.mobile-menu.is-enhanced>summary{transition:color .2s linear .26s}
.mobile-menu.is-enhanced.is-open>summary{color:var(--forest);transition:color .24s linear .34s}
.mobile-menu.is-enhanced .menu-scrim{position:absolute;inset:0;background:rgba(9,24,21,.42);opacity:0;transition:opacity var(--menu-close) linear}
.mobile-menu.is-enhanced .menu-page{position:absolute;inset:0;overflow:hidden;background:var(--paper);transform:translateX(100%);transition:transform var(--menu-close) var(--menu-ease-page) 90ms}
/* The page slides in while everything printed on it slides the other way by the same amount, so the
   ink stays still and the page edge sweeps across it (a reveal, drawn with transform alone). */
.mobile-menu.is-enhanced :is(.menu-scroll,.menu-masthead){transform:translateX(-100%);transition:transform var(--menu-close) var(--menu-ease-page) 90ms}
/* The page's leading edge: a soft shadow that travels with the page. */
.mobile-menu.is-enhanced .menu-edge{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(37,59,51,.24),rgba(37,59,51,.07) 22px,rgba(37,59,51,0) 64px);transition:opacity 0s}
.mobile-menu.is-enhanced .menu-scroll{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;display:grid;grid-template-rows:auto auto 1fr;align-content:start;padding:calc(max(18px,env(safe-area-inset-top)) + 70px) var(--gutter) calc(max(20px,env(safe-area-inset-bottom)) + 28px + var(--menu-overscan));
  /* Keyboard focus never lands under the toggle or in the 140px that runs below the screen. */
  scroll-padding:calc(max(18px,env(safe-area-inset-top)) + 60px) 0 calc(var(--menu-overscan) + 16px)}
/* The toggle and the roof mark stay put while the contents scroll under a strip of paper. */
.mobile-menu.is-enhanced .menu-page::after{content:"";position:absolute;top:0;left:0;right:0;z-index:1;height:calc(max(18px,env(safe-area-inset-top)) + 58px);background:linear-gradient(var(--paper) calc(100% - 12px),rgba(250,249,244,0));pointer-events:none}
.mobile-menu.is-enhanced .menu-masthead{position:absolute;z-index:2;top:max(18px,env(safe-area-inset-top));left:0;right:0;height:44px;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* The roof-tile mark, drawn inline (no image request); its tiles are laid from the eave up on open. */
.mobile-menu .menu-mark{display:block;width:34px;height:24px;overflow:visible;stroke:var(--paper);stroke-width:1.1;stroke-linejoin:round}
.mobile-menu .menu-mark path:nth-child(2){--t:1}.mobile-menu .menu-mark path:nth-child(3){--t:2}.mobile-menu .menu-mark path:nth-child(4){--t:3}.mobile-menu .menu-mark path:nth-child(5){--t:4}
.mobile-menu .menu-mark path:nth-child(6){--t:5}.mobile-menu .menu-mark path:nth-child(7){--t:6}.mobile-menu .menu-mark path:nth-child(8){--t:7}.mobile-menu .menu-mark path:nth-child(9){--t:8}.mobile-menu .menu-mark path:nth-child(10){--t:9}
.mobile-menu.is-enhanced .menu-nav{display:flex;flex-direction:column;width:100%;max-width:560px;margin-inline:auto}
.mobile-menu.is-enhanced .menu-eyebrow{margin:0 0 6px;font-size:11px;line-height:1.4;letter-spacing:.34em;text-transform:uppercase;color:var(--muted)}
.mobile-menu.is-enhanced .menu-chapter{min-height:96px;padding:14px 0;gap:0 14px;grid-template-columns:24px minmax(0,1fr) 64px}
.mobile-menu.is-enhanced .menu-chapter::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:var(--rule);transform:scaleX(0);transform-origin:left}
.mobile-menu.is-enhanced .menu-no{padding-top:10px}
.mobile-menu.is-enhanced .menu-title{font-size:clamp(26px,7.4vw,38px);line-height:1.08;letter-spacing:-.012em}
.mobile-menu.is-enhanced .menu-note{margin-top:5px}
/* Plates are cut in the silhouette of the brand's arched roof tile. */
.mobile-menu.is-enhanced .menu-thumb{position:relative;display:block;width:64px;aspect-ratio:4/5;overflow:hidden;border-radius:50% 50% 3px 3px/40% 40% 3px 3px;background:var(--sage)}
.mobile-menu.is-enhanced .menu-thumb img{width:100%;height:100%;object-fit:cover}
.mobile-menu.is-enhanced .menu-book{min-height:64px;margin-top:22px;padding:12px 20px}
.mobile-menu.is-enhanced .menu-foot{width:100%;max-width:560px;margin:26px auto 0;display:flex;flex-direction:column;align-items:flex-start;gap:0}
.mobile-menu.is-enhanced .menu-foot small{margin-top:14px}
/* Items: set on the page line by line. The closed state is the exit (ink leaves first). */
.mobile-menu.is-enhanced :is(.menu-eyebrow,.menu-chapter,.menu-book,.menu-foot){opacity:0;translate:0 12px;transition:opacity .16s linear,translate 0s linear .2s}
.mobile-menu.is-enhanced .menu-thumb img{opacity:0;scale:1.12;transition:opacity .16s linear,scale 0s linear .2s}
.mobile-menu.is-enhanced .menu-mark path{opacity:0;transform:translateY(-8px);transition:opacity .16s linear,transform 0s linear .2s}
.mobile-menu.is-enhanced .menu-chapter::before{transition:transform 0s linear .2s}
.mobile-menu.is-enhanced .menu-eyebrow{--d:300ms}
.mobile-menu.is-enhanced .menu-chapter:nth-of-type(1){--d:340ms}
.mobile-menu.is-enhanced .menu-chapter:nth-of-type(2){--d:405ms}
.mobile-menu.is-enhanced .menu-chapter:nth-of-type(3){--d:470ms}
.mobile-menu.is-enhanced .menu-chapter:nth-of-type(4){--d:535ms}
.mobile-menu.is-enhanced .menu-book{--d:600ms}
.mobile-menu.is-enhanced .menu-foot{--d:680ms}
/* Open state */
.mobile-menu.is-enhanced.is-open .menu-scrim{opacity:1;transition:opacity var(--menu-open) linear}
.mobile-menu.is-enhanced.is-open :is(.menu-page,.menu-scroll,.menu-masthead){transform:none;transition:transform var(--menu-open) var(--menu-ease-page)}
.mobile-menu.is-enhanced.is-open .menu-edge{opacity:0;transition:opacity .2s linear calc(var(--menu-open) - 170ms)}
.mobile-menu.is-enhanced.is-open :is(.menu-eyebrow,.menu-chapter,.menu-book,.menu-foot){opacity:1;translate:0 0;transition:opacity .5s var(--menu-ease-out) var(--d),translate .7s var(--menu-ease-out) var(--d)}
.mobile-menu.is-enhanced.is-open .menu-chapter::before{transform:scaleX(1);transition:transform .8s var(--menu-ease-page) calc(var(--d) - 60ms)}
.mobile-menu.is-enhanced.is-open .menu-thumb img{opacity:1;scale:1;transition:opacity .6s var(--menu-ease-out) calc(var(--d) + 90ms),scale .9s var(--menu-ease-out) calc(var(--d) + 90ms)}
.mobile-menu.is-enhanced.is-open .menu-mark path{opacity:1;transform:none;transition:opacity .4s var(--menu-ease-out) calc(240ms + var(--t,0) * 40ms),transform .55s var(--menu-ease-out) calc(240ms + var(--t,0) * 40ms)}
@starting-style{
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-scrim{opacity:0}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-page{transform:translateX(100%)}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) :is(.menu-scroll,.menu-masthead){transform:translateX(-100%)}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-edge{opacity:1}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) :is(.menu-eyebrow,.menu-chapter,.menu-book,.menu-foot){opacity:0;translate:0 12px}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-chapter::before{transform:scaleX(0)}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-thumb img{opacity:0;scale:1.12}
  .mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-mark path{opacity:0;transform:translateY(-8px)}
}
/* JS: the live page settles into its closed pose, unseen, just before <details> hides it. */
.mobile-menu.is-enhanced.is-resetting .menu-sheet,.mobile-menu.is-enhanced.is-resetting .menu-sheet *,.mobile-menu.is-enhanced.is-resetting .menu-sheet *::before{transition:none!important}
/* Closed within a moment of opening: the half-set ink vanishes and the page turns back from where it was. */
.mobile-menu.menu-ghost.is-early :is(.menu-eyebrow,.menu-chapter,.menu-book,.menu-foot,.menu-thumb img,.menu-mark path){opacity:0;transition:none}
@media(hover:hover){
  .mobile-menu.is-enhanced .menu-chapter:hover .menu-title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px;text-decoration-color:#b9c2b3}
  .mobile-menu.is-enhanced .menu-book:hover .menu-arrow{transform:translateX(4px)}
}
.mobile-menu.is-enhanced .menu-chapter:active .menu-title{opacity:.7}
/* While the page is up the rest of the site stays still and above later sections. */
html[data-menu] .island{z-index:40}
html[data-menu="open"]{overflow:hidden;scrollbar-gutter:stable}
html[data-menu="open"] body{overflow:hidden}
/* A chapter reached from the menu takes focus for screen readers without drawing a ring round it. */
main section[tabindex="-1"]:focus,main .room-gallery[tabindex="-1"]:focus{outline:0}
/* Narrow phones (≤360px) */
@media(max-width:360px){
  .hero-header .mobile-book{padding:0 12px 0 14px;gap:8px;font-size:15px}
  .mobile-menu.is-enhanced .menu-chapter{grid-template-columns:20px minmax(0,1fr) 52px;gap:0 12px;min-height:88px}
  .mobile-menu.is-enhanced .menu-thumb{width:52px}
  .mobile-menu.is-enhanced .menu-title{font-size:25px}
  .mobile-menu.is-enhanced .menu-note{font-size:14px}
}
/* 601–740 wide (foldables, small tablets): the header sits 24px down, so the page's top matches it. */
@media(min-width:601px) and (max-width:740px) and (min-height:501px){
  .mobile-menu.is-enhanced .menu-masthead{top:24px}
  .mobile-menu.is-enhanced .menu-page::after{height:82px}
  .mobile-menu.is-enhanced .menu-scroll{padding-top:94px;scroll-padding-top:84px}
}
/* Landscape phones: two columns, no plates, everything within one screen. */
@media(max-height:500px) and (max-width:900px){
  .mobile-menu.is-enhanced .menu-scroll{padding-top:calc(max(14px,env(safe-area-inset-top)) + 58px);padding-inline:max(var(--gutter),env(safe-area-inset-left)) max(var(--gutter),env(safe-area-inset-right));scroll-padding-top:calc(max(14px,env(safe-area-inset-top)) + 54px)}
  .mobile-menu.is-enhanced .menu-page::after{height:calc(max(14px,env(safe-area-inset-top)) + 56px)}
  .mobile-menu.is-enhanced .menu-masthead{top:max(14px,env(safe-area-inset-top))}
  .mobile-menu.is-enhanced .menu-nav{display:grid;grid-template-columns:1fr 1fr;column-gap:36px;max-width:760px}
  .mobile-menu.is-enhanced .menu-eyebrow,.mobile-menu.is-enhanced .menu-book{grid-column:1/-1}
  .mobile-menu.is-enhanced .menu-chapter{min-height:60px;padding:8px 0;grid-template-columns:22px minmax(0,1fr)}
  .mobile-menu.is-enhanced :is(.menu-thumb,.menu-note){display:none}
  .mobile-menu.is-enhanced .menu-no{padding-top:6px}
  .mobile-menu.is-enhanced .menu-title{font-size:25px}
  .mobile-menu.is-enhanced .menu-book{min-height:56px;margin-top:14px}
  .mobile-menu.is-enhanced .menu-foot{max-width:760px;margin-top:14px}
}
/* Reduced motion: no turn, no travel — a short fade only. */
@media(prefers-reduced-motion:reduce){
  .mobile-menu.is-enhanced :is(.menu-page,.menu-scroll,.menu-masthead),.mobile-menu.is-enhanced.is-open :is(.menu-page,.menu-scroll,.menu-masthead){transform:none}
  .mobile-menu.is-enhanced .menu-edge{display:none}
  .mobile-menu.is-enhanced .menu-sheet{opacity:0;transition:opacity .16s linear!important}
  .mobile-menu.is-enhanced.is-open .menu-sheet{opacity:1}
  .mobile-menu.is-enhanced :is(.menu-eyebrow,.menu-chapter,.menu-book,.menu-foot),.mobile-menu.is-enhanced .menu-thumb img{opacity:1;translate:none;scale:none}
  .mobile-menu.is-enhanced .menu-mark path{opacity:1;transform:none}
  .mobile-menu.is-enhanced .menu-chapter::before{transform:none}
  .hero-header .mobile-book.is-pending::after,.mobile-menu .menu-book.is-pending::after{animation:none;transform:scaleX(1);opacity:.6}
  @starting-style{.mobile-menu.is-enhanced.is-open:not(.menu-ghost) .menu-sheet{opacity:0}}
}
/* Windows High Contrast / forced colours: keep every control outlined and the hairlines visible. */
@media(forced-colors:active){
  .hero-header .mobile-book,.mobile-menu .menu-nav .menu-book{border:1px solid ButtonText}
  .mobile-menu.is-enhanced .menu-chapter::before{forced-color-adjust:none;background:CanvasText}
  .mobile-menu .menu-symbol i{forced-color-adjust:none;background:CanvasText}
  .mobile-menu.is-enhanced .menu-edge,.mobile-menu.is-enhanced .menu-scrim{display:none}
}

/* ==========================================================================
   Illustrations (2026-09-26, img1): new house front and room renders.
   ========================================================================== */
/* House: the new render centres the house, so every frame crops symmetrically and keeps the gable. */
.house-photo img{object-position:50% 42%}
/* iPad portrait and foldables (601–820): the half-width column cut the house to a 0.4 sliver.
   Stack as on phones and show the whole house in a square frame. */
@media(min-width:601px) and (max-width:820px){
  .house-intro{display:flex;flex-direction:column}
  .house-copy{align-self:flex-start;max-width:680px;padding:64px var(--gutter) 44px}
  .house-photo{margin:0 var(--gutter)}
  .house-photo img{min-height:0;max-height:none;aspect-ratio:1}
}
/* Very wide screens reach a 1.36 frame: favour the gable over the paving. */
@media(min-width:2300px){.house-photo img{object-position:50% 36%}}
/* Rooms intro (Lá Sen, towards the wardrobe): in the 1.13 frame show a deliberate third of the peony painting, never a sliver of its frame. */
@media(min-width:821px){.room-story figure img{object-position:85% center}}
/* Phones: the Lá Sen view keeps its left window and leaves the peony painting (from 91.9%) wholly out of frame. */
@media(max-width:600px){.room-story figure img{object-position:0 50%}}
/* Phones held sideways (821–900 wide, ≤500 tall): show the whole house in its own 4:5 instead of a 0.6 slice. */
@media(max-height:500px) and (min-width:821px) and (max-width:900px){.house-photo img{min-height:0;height:auto;aspect-ratio:4/5}}
/* Phone layouts: a chapter lands exactly at the top of the screen (its own padding is the breathing
   room), so no strip of film or of the section above shows. Hòn Sơn has no top padding on phones, so
   it lands on the blank paper that ends the rooms section. */
@media(max-width:740px),(max-height:500px) and (max-width:900px){html{scroll-padding-top:0}.room-gallery{scroll-margin-top:0}#hon-son{scroll-margin-top:36px}}
/* Where "Khám phá" sits on the film, a little more shade behind the header keeps the word above 4.5:1
   on the brightest frames (sky at 0:12 and 0:22–0:24); it fades out within the first 130px. */
@media(max-width:740px),(max-height:500px) and (max-width:900px){.island::after{background:linear-gradient(180deg,rgba(7,28,27,.2),rgba(7,28,27,0) 130px),linear-gradient(180deg,rgba(7,28,27,.43),rgba(7,28,27,.1) 35%,rgba(7,28,27,.15) 65%,rgba(7,28,27,.6))}}

/* ==========================================================================
   Structure pass (2026-09-26, copy2): facts get their own shapes instead of trailing a paragraph —
   what the price includes.
   ========================================================================== */
.together .split-story{align-items:center}
.together-copy{min-width:0;max-width:600px}
.together-copy h2{margin-bottom:24px}
.together-text{font-size:clamp(18px,1.5vw,21px);line-height:1.57}
.together-shared{margin-top:28px}
/* What the price includes: a quiet paper card on the sage band. */
.included{margin-top:30px;padding:20px 22px 22px;background:var(--paper);border-radius:4px;box-shadow:0 1px 0 #d6ddcd}
.included-title{margin:0 0 16px;font-size:13px;font-weight:500;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.included ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.included li{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0;font-size:17px;line-height:1.35;color:var(--forest)}
.included svg{width:30px;height:30px;flex:0 0 30px;fill:none;stroke:var(--terracotta);stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.together .coast-photo img{height:auto;aspect-ratio:4/5;max-height:760px}
@media(max-width:1150px){.included{padding:18px}}
/* Up to 820 the story stacks, so the facts keep a full, readable width. */
@media(max-width:820px){
  .together .split-story{grid-template-columns:1fr;gap:40px}
  .together-copy{max-width:640px}
  .together .coast-photo img{aspect-ratio:3/2;max-height:none}
}
@media(max-width:600px){
  .together-copy h2{margin-bottom:20px}
  .together-shared{margin-top:24px}
  .included{margin-top:26px;padding:18px 16px 20px}
  .included ul{gap:12px}
  .included li{font-size:16px}
  .together .coast-photo img{aspect-ratio:1.05}
}
@media(max-width:360px){
  .included ul{grid-template-columns:1fr;gap:10px}
  .included li{flex-direction:row;align-items:center;gap:12px}
}
/* "Xem ba phòng ngủ" uses the same quiet outlined button as "Xem căn nhà"; its arrow nods downward on hover. */
.prose>.rooms-jump{margin-top:30px}
.rooms-jump .icon{transition:transform .25s ease}
@media(hover:hover){.rooms-jump:hover .icon{transform:translateY(3px)}}
@media(max-width:600px){.prose>.rooms-jump{margin-top:26px}}