/* ===================== Nine Mansion v3 · "Sunlit Coastal Luxe" (layered on top of style.css) ===================== */
:root{--display:"Bodoni Moda","Didot","Bodoni MT",Georgia,serif;--champ:#C9A96E;--champ2:#E7D3A8;--ribbon:#B3261E}
h1,h2{font-family:var(--display);font-weight:400;letter-spacing:-.015em}
h2{font-size:60px;line-height:1.04}
h2 em,.hero h1 em{font-family:var(--display);font-style:italic;font-weight:400}
html[lang="zh"] h1,html[lang="zh"] h2{font-family:var(--display),"Noto Serif SC","Songti SC","SimSun",serif}
.eyebrow{color:var(--champ)}
.eyebrow::before{background:var(--champ);width:0;transition:width 1.2s var(--curve)}
.eyebrow.in::before,.in .eyebrow::before{width:42px}
.btn-gold{background:var(--champ);color:#fff}.btn-gold:hover{background:#B8935A}

/* ---------- 1 · gate intro */
#gate{position:fixed;inset:0;z-index:600;background:#fff;perspective:2200px;display:grid;place-items:center;overflow:hidden}
#gate.done{pointer-events:none}
#gate .leaf{position:absolute;top:0;bottom:0;width:50%;background:#fff;transition:transform 2s var(--curve),opacity 1.6s ease .5s;display:flex;align-items:center}
#gate .leaf.l{left:0;transform-origin:left center;justify-content:flex-end}
#gate .leaf.r{right:0;transform-origin:right center;justify-content:flex-start}
#gate .leaf svg{height:min(78vh,640px);width:auto;overflow:visible}
#gate .leaf.l svg{margin-right:-1px}#gate .leaf.r svg{margin-left:-1px}
#gate path,#gate circle,#gate line,#gate rect{fill:none;stroke:var(--champ);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#gate .draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
#gate.go .draw{animation:gdraw 2s var(--curve) forwards;animation-delay:var(--d,0s)}
@keyframes gdraw{to{stroke-dashoffset:0}}
#gate .name{position:absolute;left:50%;bottom:9vh;transform:translateX(-50%);text-align:center;font-family:var(--display);color:var(--ink);opacity:0;z-index:2;white-space:nowrap}
#gate.go .name{animation:fadeup 1.2s var(--curve) 1.4s forwards}
#gate .name b{display:block;font-weight:400;font-size:30px;letter-spacing:.42em}
#gate .name span{display:block;font-family:var(--sans);font-size:14px;letter-spacing:.6em;color:var(--champ);margin-top:10px}
@keyframes fadeup{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translate(-50%,0)}}
#gate.open .leaf.l{transform:rotateY(-104deg);opacity:0}
#gate.open .leaf.r{transform:rotateY(104deg);opacity:0}
#gate.open .name{animation:none;opacity:0;transition:opacity .6s}
#gate.open{background:transparent;transition:background-color 1.4s ease .3s}
#gate.gone{display:none}

/* ---------- 2 · arch hero (scroll-grown) */
.hero{height:auto;min-height:0;padding:0;color:var(--ink);overflow:visible;background:#fff}
.hero::after{display:none}
.archwrap{height:230vh;position:relative}
.archstick{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.arch{position:absolute;inset:0;clip-path:inset(var(--at,14%) var(--ax,31%) var(--ab,6%) var(--ax,31%) round var(--ar,999px) var(--ar,999px) 0 0);will-change:clip-path}
.arch .layer{position:absolute;left:-4%;top:-4%;width:108%;height:108%;max-width:none;object-fit:cover;object-position:center 42%;will-change:transform}
.arch .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,20,28,0) 45%,rgba(14,20,28,.55) 100%);opacity:var(--sh,0)}
.hero-title{position:absolute;top:0;left:0;right:0;text-align:center;padding-top:96px;z-index:3;opacity:var(--to,1);transform:translateY(var(--ty,0px))}
.hero-title .loc{color:var(--champ);font-size:12px;letter-spacing:.42em;text-transform:uppercase}
.hero-title h1{font-size:64px;line-height:1;margin-top:10px;color:var(--ink)}
.hero-title h1 em{color:var(--terra)}
.hero-title .ch{display:inline-block;opacity:0;transform:translateY(.4em);animation:chup 1s var(--curve) forwards}
@keyframes chup{to{opacity:1;transform:none}}
.hero-over{position:absolute;left:0;right:0;bottom:0;z-index:4;color:#fff;padding:0 0 64px;opacity:var(--oo,0);transform:translateY(calc((1 - var(--oo,0)) * 30px));pointer-events:none}
.hero-over.on{pointer-events:auto}
.hero-over h2{font-size:72px;color:#fff;max-width:820px}
.hero-over h2 em{color:var(--champ2)}
.hero-over .sub{font-size:20px;line-height:31px;max-width:560px;margin-top:16px;font-weight:300}
.hero-over .cta{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap}
.hero-over .btn-line{color:#fff}.hero-over .btn-line:hover{background:#fff;color:var(--ink);border-color:#fff}
.scrollhint{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.4em;color:var(--ink2);opacity:var(--to,1)}
.scrollhint i{display:block;width:1px;height:38px;margin:10px auto 0;background:linear-gradient(var(--champ),transparent);animation:drip 2s ease-in-out infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.nav:not(.solid){color:var(--ink)}
.nav:not(.solid) .brand img{filter:none}
.nav:not(.solid) ul a:hover{background:var(--paper)}
.nav:not(.solid) .lang button.on{background:var(--ink);color:#fff}

/* ---------- 3 · palm shadows on white */
.leafy{position:relative;overflow:hidden;isolation:isolate}
.shadow{position:absolute;pointer-events:none;z-index:0;opacity:.09;will-change:transform;backface-visibility:hidden;transform-origin:var(--ox,0%) var(--oy,0%);animation:sway var(--dur,11s) ease-in-out infinite alternate;background-repeat:no-repeat;background-size:contain}
.leafy>.wrap,.leafy>*:not(.shadow){position:relative;z-index:1}
@keyframes sway{from{transform:rotate(var(--r1,-2deg)) translate3d(0,0,0)}to{transform:rotate(var(--r2,3deg)) translate3d(14px,8px,0)}}

/* ---------- 5 · doorway room tour */
.tour .stage img{clip-path:inset(18% 24% 0 24% round 999px 999px 0 0);transform:scale(1.18);transition:opacity .9s var(--curve),clip-path 1.6s var(--curve),transform 1.8s var(--curve)}
.tour .stage img.on{clip-path:inset(0 0 0 0 round 0);transform:none}
.tour .stage{background:#fff}

/* ---------- 6 · wedding ribbon + petals */
.events{position:relative;overflow:hidden;background:#fff;color:var(--ink)}
.events .eyebrow{color:var(--ribbon)}.events .eyebrow::before{background:var(--ribbon)}
.events .lead{color:var(--ink2)}
.events h2 em{color:var(--ribbon)!important}
.events .pkg .card{border:1px solid var(--line);box-shadow:0 30px 70px -40px rgba(28,36,48,.35)}
.events .pkg .note{border-color:var(--line);color:var(--ink2);background:#FBF7F2}
.events .pkg .note h3{color:var(--ink)}
.events .pkg .note li::before{color:var(--ribbon)}
.ribbon-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.ribbon-svg path{fill:none;stroke-linecap:round}
.ribbon-svg .rb{stroke:var(--ribbon);stroke-width:16;opacity:.9}
.ribbon-svg .rb2{stroke:#D6453B;stroke-width:5;opacity:.6}
#petals{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.events>.wrap,.events>.strip{position:relative;z-index:1}

/* ---------- gallery polaroid drop + stats */
.stack{opacity:0;transform:translateY(-36px) rotate(var(--rot,-3deg));transition:opacity .9s var(--curve),transform 1.2s var(--curve)}
.stack.in{opacity:1;transform:none}
.count-up{font-variant-numeric:lining-nums}
.facts b,.spec b{font-family:var(--display);font-weight:400}

/* ---------- calendar: gold ribbon between your dates, gentle month turn */
.day.range{background:linear-gradient(transparent 42%,var(--champ2) 42% 58%,transparent 58%)}
.day.sel{background:var(--ink);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--champ)}
.day.edge{background:var(--champ);color:#fff;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--champ)}
.months.turn{animation:turn .7s var(--curve)}
@keyframes turn{from{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(10px)}to{opacity:1;transform:none}}

/* ---------- 7 · illustrated map */
.routes .coast{fill:#F6F2EA;stroke:#D9CDB6;stroke-width:1.4}
.routes .island{fill:#F6F2EA;stroke:#D9CDB6;stroke-width:1.4}
.routes .sea{fill:none;stroke:#9CC7C4;stroke-width:1.2;stroke-dasharray:4 10;animation:waves 5s linear infinite;opacity:.8}
@keyframes waves{to{stroke-dashoffset:-56}}
.routes .fl{stroke:var(--terra)}
.routes .tag{font-family:var(--sans);font-size:11px;letter-spacing:.24em;fill:var(--champ)}
.routes .illus{font-family:var(--sans);font-size:11px;fill:#A9A39A;letter-spacing:.12em}
.routes .pin{transform-box:fill-box;transform-origin:50% 100%;animation:pindrop 1.4s var(--curve) both}
@keyframes pindrop{from{transform:translateY(-40px);opacity:0}to{transform:none;opacity:1}}

/* ---------- gold cursor */
.cur{position:fixed;left:0;top:0;width:34px;height:34px;border:1px solid var(--champ);border-radius:999px;pointer-events:none;z-index:700;transform:translate(-50%,-50%);transition:width .45s var(--curve),height .45s var(--curve),background-color .45s var(--curve);display:grid;place-items:center;font-family:var(--sans);font-size:11px;letter-spacing:.2em;color:#fff;mix-blend-mode:normal}
.cur.view{width:78px;height:78px;background:rgba(201,169,110,.88);border-color:transparent}
.cur.link{width:54px;height:54px;background:rgba(201,169,110,.14)}
@media (hover:none),(max-width:980px){.cur{display:none}}

/* ---------- responsive */
@media (max-width:980px){
  .archwrap{height:180vh}.hero-title{padding-top:92px}.hero-title h1{font-size:38px}.hero-over h2{font-size:42px}.hero-over .sub{font-size:16px;line-height:25px}
  .arch{clip-path:inset(var(--at,22%) var(--ax,12%) var(--ab,8%) var(--ax,12%) round var(--ar,999px) var(--ar,999px) 0 0)}
  h2{font-size:40px}#gate .leaf svg{height:56vh}#gate .name b{font-size:22px}
  .ribbon-svg .rb{stroke-width:10}
}
@media (prefers-reduced-motion:reduce){#gate{display:none}.archwrap{height:100vh}.stack{opacity:1;transform:none}.shadow{animation:none}}
.hero-title h1{max-width:none;margin-left:auto;margin-right:auto}
.cur{opacity:0;transition:opacity .4s,width .45s var(--curve),height .45s var(--curve),background-color .45s var(--curve)}
.cur.live{opacity:1}

/* performance */
.nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
.arch .layer{backface-visibility:hidden}
.archstick{contain:paint}
.leafy{contain:paint}
.events{contain:paint}
/* performance: "pretty" line breaking on every paragraph made page layout slow; keep balanced headings only */
p,li{text-wrap:wrap}
.hero-over h2,.hero-title h1{text-wrap:balance}

/* ===================== v4 · walk around Nine Mansion map ===================== */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chips button{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:all .3s var(--curve)}
.chips button i{width:9px;height:9px;border-radius:999px;display:inline-block}
.chips button.on,.chips button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mapcard{display:grid;grid-template-columns:1fr 340px;gap:0;margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;box-shadow:0 40px 90px -50px rgba(28,36,48,.45)}
.mapstage{position:relative;aspect-ratio:16/11;overflow:hidden;background:#FBF8F2;transform-style:preserve-3d;transition:transform .8s var(--curve)}
#nmmap{position:absolute;inset:0;width:100%;height:100%}
#roads path{fill:none;stroke-linecap:round;stroke-linejoin:round}
#roads .service{stroke:#EEE8DC;stroke-width:5}
#roads .foot{stroke:#D3C6AC;stroke-width:3;stroke-dasharray:10 10}
#roads .minor{stroke:#E5DCCB;stroke-width:8}
#roads .mid{stroke:#DCCDB0;stroke-width:12}
#roads .major-c{stroke:#E2CC9F;stroke-width:22}
#roads .major{stroke:#FFFDF8;stroke-width:10}
.mapcard.in #roads path{animation:rdraw 2.4s var(--curve) both}
@keyframes rdraw{from{stroke-dashoffset:1;stroke-dasharray:1 1}to{stroke-dashoffset:0;stroke-dasharray:1 0}}
#rings circle{fill:none;stroke:#C9A96E;stroke-width:2;stroke-dasharray:6 14;opacity:.65}
#rings text{font-family:var(--sans);font-size:30px;letter-spacing:.18em;fill:#B8935A}
#route{opacity:0;transition:opacity .4s}
#route.on{opacity:1;animation:march 1.2s linear infinite}
@keyframes march{to{stroke-dashoffset:-40}}
#walker{opacity:0;transition:opacity .3s}
#walker.on{opacity:1}
#walker .leg,#walker .arm{transform-box:fill-box;transform-origin:top center}
#walker.moving .l1,#walker.moving .a2{animation:swing .5s ease-in-out infinite alternate}
#walker.moving .l2,#walker.moving .a1{animation:swing .5s ease-in-out infinite alternate-reverse}
@keyframes swing{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.pins{position:absolute;inset:0;pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;cursor:pointer;display:flex;flex-direction:column;align-items:center;background:none;border:0;padding:0;font:inherit;
  transition:transform .5s var(--curve),opacity .4s var(--curve)}
.pin .dot{width:38px;height:38px;border-radius:999px;background:#fff;display:grid;place-items:center;font-size:18px;box-shadow:0 8px 18px -6px rgba(28,36,48,.45);border:2px solid var(--c)}
.pin .dot::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--c);border-bottom:0}
.pin .lab{margin-top:10px;font-size:12px;letter-spacing:.06em;background:rgba(255,255,255,.92);padding:3px 9px;border-radius:999px;white-space:nowrap;color:var(--ink);box-shadow:0 4px 10px -6px rgba(0,0,0,.3);max-width:170px;overflow:hidden;text-overflow:ellipsis}
.pin:hover,.pin.on{transform:translate(-50%,-100%) scale(1.14);z-index:5}
.pin.on .dot{background:var(--c);color:#fff}
.pin.off{opacity:0;pointer-events:none}
.pin.edge .lab::after{content:" →";color:var(--champ)}
.pin.drop{animation:pdrop .9s var(--curve) both}
@keyframes pdrop{from{opacity:0;transform:translate(-50%,-160%)}to{opacity:1;transform:translate(-50%,-100%)}}
.home{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none;z-index:6}
.home .disc{width:64px;height:64px;border-radius:999px;background:#fff;border:2px solid var(--champ);display:grid;place-items:center;box-shadow:0 14px 30px -10px rgba(28,36,48,.5)}
.home .disc img{width:46px;height:auto}
.home .pulse{position:absolute;top:0;left:50%;width:64px;height:64px;margin-left:-32px;border-radius:999px;border:2px solid var(--champ);animation:hpulse 2.4s var(--curve) infinite}
@keyframes hpulse{from{transform:scale(1);opacity:.9}to{transform:scale(2.6);opacity:0}}
.home b{margin-top:8px;font-family:var(--display);font-weight:400;font-size:18px;background:#fff;padding:2px 12px;border-radius:999px;box-shadow:0 4px 10px -6px rgba(0,0,0,.3)}
.compass{position:absolute;right:18px;top:16px;width:44px;height:44px;border-radius:999px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;font-family:var(--display);font-size:15px;color:var(--ink)}
.compass i{position:absolute;top:4px;left:50%;width:0;height:0;border:5px solid transparent;border-bottom:9px solid var(--terra);transform:translate(-50%,-6px)}
.scale{position:absolute;left:18px;bottom:16px;display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.14em;color:var(--ink2)}
.scale i{display:block;height:6px;border:1px solid var(--ink2);border-top:0}
.osm{position:absolute;right:12px;bottom:8px;font-size:10px;color:#9A938A}
.placecard{padding:30px 28px;border-left:1px solid var(--line);display:flex;flex-direction:column}
.placecard .k{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
.placecard h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:34px;margin-top:6px;min-height:68px}
.placecard .walk{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.placecard .walk b{font-family:var(--display);font-weight:400;font-size:44px;color:var(--terra)}
.placecard .walk span{font-size:14px;color:var(--ink2)}
.placecard .note{font-size:14px;color:var(--ink2);margin-top:6px;min-height:22px}
.placecard .acts{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.plist{list-style:none;margin-top:22px;border-top:1px solid var(--line);overflow:auto;max-height:260px}
.plist li{display:flex;justify-content:space-between;gap:10px;padding:10px 4px;border-bottom:1px solid var(--line);font-size:14px;cursor:pointer;transition:background-color .25s}
.plist li:hover,.plist li.on{background:var(--paper)}
.plist li i{display:inline-block;width:8px;height:8px;border-radius:999px;margin-right:8px;vertical-align:1px}
.plist li span{color:var(--ink2);white-space:nowrap}
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:26px}
.picks .k{width:100%;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--champ)}
.pick{padding:10px 16px;border:1px dashed var(--champ);border-radius:999px;font-size:15px;background:#fff}
@media (max-width:980px){.mapcard{grid-template-columns:1fr}.mapstage{aspect-ratio:4/5}.placecard{border-left:0;border-top:1px solid var(--line)}.plist{max-height:200px}.pin .lab{display:none}.pin.on .lab{display:block}.home .disc{width:52px;height:52px}.home .pulse{width:52px;height:52px;margin-left:-26px}}

.pin .lab{position:absolute;margin:0}
.pin.lb .lab{top:46px;left:50%;transform:translateX(-50%)}
.pin.lr .lab{top:6px;left:44px}
.pin.ll .lab{top:6px;right:44px}
.pin.la .lab{bottom:50px;left:50%;transform:translateX(-50%)}
.home .disc{width:56px;height:56px}.home .disc img{width:40px}.home .pulse{width:56px;height:56px;margin-left:-28px}
.compass{top:auto;bottom:34px;right:16px}
.home{flex-direction:column-reverse}
.home b{margin-top:0;margin-bottom:8px}
.home .pulse{top:auto;bottom:0}