.opening{position:relative;padding-top:90px;padding-bottom:65px;overflow:hidden;background:radial-gradient(ellipse at 60% 40%,#faf7f0 0%,#f3f0e9 68%);--scene-depth:0}
.opening>.section-kicker{margin-bottom:26px}
.architecture-title{position:relative;z-index:3;max-width:700px;font-size:clamp(46px,5.5vw,86px)}
.architecture-stage{position:relative;width:100%;max-width:1500px;height:clamp(610px,65vw,930px);margin:-15px auto 0;color:#795c42;perspective:1800px}
.architecture-perspective{position:absolute;left:16%;top:4%;width:66%;height:77%;transform:perspective(1600px) rotateY(-12deg) rotateX(3deg);transform-style:preserve-3d;isolation:isolate}
.architecture-photo{position:absolute;inset:0;transform:translateZ(28px);transform-style:preserve-3d}
.architecture-photo>button{position:absolute;inset:0;border:0;padding:0;background:#d7c9b5;box-shadow:-18px 36px 40px #53432f20;cursor:zoom-in;overflow:hidden}
.architecture-photo img{height:100%;object-fit:cover}
.architecture-photo>button:after{content:'';position:absolute;inset:0;border:1px solid #d9d0bf70;pointer-events:none}
.architecture-expand{position:absolute;right:18px;bottom:18px;width:36px;height:36px;display:grid;place-items:center;border:1px solid #ffffff80;background:#f7f0e2d9;color:#4b3c2c;border-radius:50%;opacity:0;transition:opacity .25s}
.architecture-photo>button:hover .architecture-expand,.architecture-photo>button:focus-visible .architecture-expand{opacity:1}
.architecture-sill{position:absolute;left:0;right:0;bottom:-11px;height:12px;transform-origin:top;background:linear-gradient(180deg,#d1bfa4,#b09c7d);box-shadow:0 20px 24px #75614926;border-bottom:1px solid #998a73;pointer-events:none}
.architecture-glass{position:absolute;inset:0;border:1px solid #a899805c;background:linear-gradient(125deg,#fdfbf055,transparent 40%,#ffffff28 75%,#e2d7c72b);box-shadow:9px 20px 25px #99876e13;pointer-events:none;transition:transform 1.5s cubic-bezier(.2,.7,.25,1),opacity 1.4s ease;opacity:0}
.architecture-glass--back{transform:translate3d(0,0,-60px)}
.architecture-glass--middle{transform:translate3d(0,0,-30px)}
.architecture-glass--front{inset:6% auto 0 -5%;width:7%;height:92%;background:linear-gradient(100deg,#f8e5bc65,#ffffff15);transform:translate3d(0,0,50px)}
.architecture-stage.visible .architecture-glass--back{opacity:.8;transform:translate3d(calc(50px + var(--scene-depth)*18px),25px,-65px)}
.architecture-stage.visible .architecture-glass--middle{opacity:.9;transform:translate3d(calc(24px + var(--scene-depth)*9px),8px,-30px)}
.architecture-stage.visible .architecture-glass--front{opacity:.9;transform:translate3d(calc(-4px - var(--scene-depth)*6px),0,50px)}
.architecture-guides{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;color:#88684c;opacity:0;transition:opacity 1s ease .4s}
.architecture-note{position:absolute;z-index:5;color:#312b27;opacity:0;translate:0 10px;transition:opacity .9s ease .5s,translate .9s ease .5s}
.architecture-note strong{display:block;font:400 clamp(31px,3.4vw,53px)/1 var(--serif);letter-spacing:-.04em;white-space:nowrap}
.architecture-note small{font-size:.68em;font-weight:400}
.architecture-note>span{display:block;color:#786d60;font-size:clamp(8px,.8vw,11px);letter-spacing:.12em;line-height:1.8;margin-top:12px}
.note-height{left:0;top:43%;max-width:14%}
.note-floor{right:-1%;top:23%;text-align:left}
.note-area{left:2%;bottom:0}
.architecture-rooms{position:absolute;z-index:6;right:0;bottom:-1%;width:24%;max-width:320px}
.room-fragments{height:clamp(95px,12vw,170px);display:flex;align-items:center;justify-content:center;padding-inline:5px}
.room-fragments button{position:relative;width:43%;height:90%;padding:0;border:2px solid #f9f6ed;box-shadow:0 8px 16px #55432c24;background:#c7b8a0;cursor:zoom-in;transition:transform .45s ease}
.room-fragments button img{width:100%;height:100%;object-fit:cover}
.room-fragments button:first-child{rotate:-4deg;translate:8px 8px}
.room-fragments button:nth-child(2){z-index:2;height:110%;rotate:2deg}
.room-fragments button:last-child{rotate:5deg;translate:-8px 3px}
.room-fragments button:hover{transform:translateY(-9px)}
.note-rooms{position:relative;padding-left:18%;margin-top:25px}
.architecture-stage.visible .architecture-note{opacity:1;translate:0 0}
.architecture-stage.visible .architecture-guides{opacity:.8}
@media(max-width:1100px){.architecture-stage{height:660px;margin-top:25px}.architecture-perspective{left:17%;top:6%;width:64%;height:70%}.architecture-note strong{font-size:35px}.note-floor{right:0;top:20%}.note-height{top:41%}.architecture-rooms{width:25%;bottom:0}.note-area{bottom:4%}.architecture-guides{opacity:.55!important}.opening{padding-inline:40px}}
@media(max-width:760px){.opening{padding:65px 24px 55px}.architecture-title{font-size:clamp(44px,10vw,66px)}.opening>.section-kicker{font-size:8px;letter-spacing:.12em;margin-bottom:25px}.architecture-stage{height:auto;min-height:660px;margin-top:30px;perspective:1000px}.architecture-perspective{left:8%;top:55px;width:82%;height:300px;transform:perspective(1000px) rotateY(-10deg) rotateX(2deg)}.architecture-photo img{object-position:52% center}.architecture-glass--front{width:7%}.architecture-stage.visible .architecture-glass--back{transform:translate3d(20px,15px,-50px)}.architecture-stage.visible .architecture-glass--middle{transform:translate3d(10px,6px,-20px)}.architecture-guides{display:none}.architecture-note strong{font-size:35px}.architecture-note>span{font-size:9px;margin-top:7px;letter-spacing:.06em}.note-height{left:0;top:0;max-width:none}.note-height>span{display:inline-block;margin-left:8px}.note-height strong{display:inline-block}.note-height>span br{display:none}.note-floor{right:0;top:0;max-width:none;text-align:right}.note-floor strong{font-size:30px}.note-floor>span{font-size:8px;margin-top:3px}.note-area{left:0;top:415px;bottom:auto}.architecture-rooms{right:0;bottom:auto;top:405px;width:56%}.room-fragments{height:120px}.note-rooms{margin-top:22px;padding-left:10px}.note-rooms strong{font-size:32px}.note-rooms>span{font-size:9px}.architecture-expand{opacity:1;width:30px;height:30px;right:10px;bottom:10px}.architecture-stage{min-height:640px}}
@media(max-width:390px){.architecture-perspective{height:260px}.architecture-stage{min-height:600px}.note-area{top:375px}.architecture-rooms{top:365px}}
@media(prefers-reduced-motion:reduce){.architecture-perspective{transform:none}.architecture-glass,.architecture-note,.architecture-guides{transition:none}.architecture-stage .architecture-note,.architecture-stage .architecture-guides{opacity:1;translate:none}.room-fragments button:hover{transform:none}}