:root{--ink:#121614;--ivory:#eee9de;--gold:#d8bc8a;--panel:#1d2721;--border:#728375;--muted:#c8d0c9;--font:'Manrope',sans-serif;--serif:'Cormorant Garamond',Georgia,serif;--ui-size:clamp(16px,1.04vw,20px);--target:clamp(52px,3.2vw,64px)}
*{box-sizing:border-box}
body{margin:0;background:var(--ink);color:var(--ivory);font:16px/1.5 var(--font);overscroll-behavior:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation}
button:disabled{opacity:.55;cursor:wait}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
#presentation{position:relative;isolation:isolate;height:100svh;min-height:500px;overflow:hidden}
.poster,#scene,#interior-stage,#interior-scene,.shade{position:absolute;inset:0}
.poster{z-index:-3;background:#a8b0ac;transition:opacity .4s}.poster img{width:100%;height:100%;object-fit:cover;object-position:66% center}
#scene,#interior-stage{z-index:-2}#scene{opacity:0;transition:opacity .4s;outline:0}
#scene canvas,#interior-scene canvas{display:block;width:100%;height:100%;touch-action:none;outline:none}
.shade{z-index:-1;pointer-events:none;background:linear-gradient(90deg,#101b16ed,#101b1699 38%,transparent 75%),linear-gradient(180deg,#12161488,transparent 35%,#12161488)}
.topbar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 32px;background:#121614e8;border-bottom:1px solid #eee9de30}
.brand{color:var(--ivory);text-decoration:none;font:500 40px/.95 var(--serif);letter-spacing:-1px}.brand span{font-style:italic}.brand small{display:block;max-width:320px;margin-top:10px;font:500 12px/1.4 var(--font);letter-spacing:.5px}
.menu-opener{display:flex;align-items:center;justify-content:center;gap:12px;min-width:130px;min-height:var(--target);padding:10px 20px;background:var(--ivory);color:var(--ink);border:1px solid var(--ivory);border-radius:4px;font-size:var(--ui-size);font-weight:650}.menu-opener>span:first-child{font-size:24px;line-height:1}
.menu-opener:hover,.primary:hover{background:var(--gold)}
.intro{position:absolute;left:6%;bottom:110px;width:min(430px,88%);transition:opacity .3s,transform .3s}
.eyebrow{margin:0 0 18px;color:var(--gold);font-size:14px;font-weight:600;letter-spacing:2px;text-transform:uppercase}
h1{font:500 clamp(54px,5vw,84px)/1 var(--serif);letter-spacing:-1.5px;margin:0 0 24px}h1 span{display:block;font-size:.65em;font-style:italic;font-weight:400;margin-top:10px;letter-spacing:-.5px}
.description{max-width:400px;font-size:17px;line-height:1.7;margin:0 0 28px;color:var(--ivory)}
.primary{display:flex;justify-content:center;align-items:center;gap:14px;min-height:56px;padding:14px 22px;border:1px solid var(--ivory);border-radius:4px;background:var(--ivory);color:var(--ink);font-size:17px;font-weight:650}
.orbit-icon{font-size:26px}.arrow{font-size:23px;margin-left:auto}
.secondary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:54px;margin-top:12px;padding:12px 0;border-bottom:1px solid #eee9de99;font-size:17px;font-weight:600}.secondary>span:last-child{font-size:24px}
.micro{font-size:14px;color:var(--muted);margin:16px 0 0}.intro-rule{width:45px;height:1px;background:#eee9de55;margin-top:26px}.intro-note{display:flex;gap:20px;align-items:center;margin-top:14px;font-size:14px;color:var(--muted)}.intro-note span{font:20px var(--serif);color:var(--gold)}.intro-note p{margin:0}
.bottom-left{position:absolute;bottom:28px;left:6%;display:flex;align-items:center;gap:14px;font-size:13px;letter-spacing:1.4px}.hairline{width:30px;height:1px;background:var(--gold)}
.scene-heading{position:absolute;top:130px;left:32px;max-width:calc(100% - 64px);z-index:2;padding:12px 18px;background:#121614e8;border-left:2px solid var(--gold);pointer-events:none}.scene-heading .eyebrow{display:block;margin:0 0 5px;font-size:13px}.scene-heading>span+span{display:block;font:500 26px/1.2 var(--serif)}
.navigation-hint{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:calc(100% - 40px);padding:10px 16px;border-radius:4px;background:#121614ed;color:var(--ivory);font-size:15px;text-align:center}.navigation-hint>span:first-child{font-size:24px;flex:none}
.exploring .poster{opacity:0}.exploring #scene{opacity:1}.exploring .intro{opacity:0;pointer-events:none;transform:translateX(-16px)}.exploring .bottom-left{display:none}.exploring .shade{background:linear-gradient(180deg,#12161422,transparent 32%,transparent 70%,#12161444)}.walking .navigation-hint{display:none}.walking #scene canvas,.walking #interior-scene canvas{cursor:crosshair}
.loading,.error{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 40px));padding:30px;background:#121614f5;border:1px solid var(--border);text-align:center;border-radius:4px}.loading p{font:30px/1.2 var(--serif);margin:18px 0 10px}.loading small{font-size:16px;color:var(--gold)}.loader-ring{display:block;width:36px;height:36px;margin:auto;border:2px solid #eee9de44;border-top-color:var(--gold);border-radius:50%;animation:spin 1s linear infinite}.progress-track{height:3px;background:#eee9de33;margin:20px 0 0}.progress-track span{display:block;height:100%;width:0;background:var(--gold)}@keyframes spin{to{transform:rotate(360deg)}}.error{line-height:1.6;text-align:left}.error button{min-height:48px;text-decoration:underline;text-underline-offset:5px;font-weight:600}

/* One readable menu, with a fixed close button and scrollable content. */
.navigation-menu{position:fixed;inset:12px 12px 12px auto;margin:0;width:min(440px,calc(100vw - 24px));height:calc(100svh - 24px);max-width:none;max-height:none;padding:0;background:var(--ink);color:var(--ivory);border:1px solid var(--border);border-radius:6px;overflow:hidden;box-shadow:0 20px 90px #0008}
.navigation-menu[open]{display:flex;flex-direction:column}.navigation-menu::backdrop{background:#0007;backdrop-filter:blur(3px)}
.menu-header{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;border-bottom:1px solid #72837566}.menu-header .eyebrow{font-size:13px;letter-spacing:1.5px;margin:0 0 6px}.menu-header h2{font:500 32px/1.1 var(--serif);margin:0}.menu-header .close-modal{position:static;flex:none}
.menu-content{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border) var(--ink);padding:22px 24px;flex:1;min-height:0}
.menu-section{margin:0 0 24px}.menu-section h3{font:600 14px/1.4 var(--font);letter-spacing:.5px;color:var(--muted);margin:0 0 10px}.menu-section .tools-heading{margin-top:24px}
.explore-only{display:none}.exploring .explore-only{display:block}
#explore-menu button:not(.close-modal){display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;min-height:var(--target);padding:12px 14px;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--ivory);font-size:var(--ui-size);font-weight:550;line-height:1.4;text-align:center;white-space:normal;word-break:normal}
#explore-menu button:not(.close-modal):hover{border-color:var(--ivory);background:#2b382f}
#explore-menu button.selected,#explore-menu button.selected:hover{color:var(--ink);background:var(--ivory);border-color:var(--ivory);font-weight:700}
.space-switch,.walk-modes,.viewpoints,.time-switch,.languages{display:grid;gap:8px;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
.walk-modes>button:last-child,.interior-viewpoints>button:last-child{grid-column:1/-1}.viewpoints .number{font:500 20px var(--serif);color:var(--gold)}#explore-menu .viewpoints .selected .number{color:#67491f}
.languages{grid-template-columns:repeat(3,minmax(0,1fr))}.time-switch>button>span:first-child{font-size:22px;line-height:1}.utility{display:grid;gap:8px;grid-template-columns:1fr}.utility button>span:first-child{font-size:24px;line-height:1;width:28px;flex:none}
.bottom-right{display:grid;gap:8px;grid-template-columns:1fr;margin-top:8px}.bottom-right button{width:100%}.bottom-right button>span:last-child:not(:first-child){margin-left:auto}
.menu-footer{padding-top:20px;border-top:1px solid #72837566}.preview-tag{display:flex;gap:9px;align-items:center;font-size:14px;line-height:1.5;color:var(--ivory)}.preview-tag i{width:6px;height:6px;background:var(--gold);border-radius:50%;flex:none}.render-note{font-size:14px;line-height:1.6;color:var(--muted);margin-top:14px}
.close-modal,#map-close{display:flex;align-items:center;justify-content:center;min-width:52px;min-height:52px;padding:0;border:1px solid var(--border);border-radius:4px;background:var(--panel);color:var(--ivory);font:32px/1 var(--font)}

/* Walking actions stay available without opening the menu. */
.walk-feedback{position:absolute;left:50%;bottom:202px;transform:translateX(-50%);z-index:3;display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:calc(100% - 40px);padding:10px 16px;background:#121614ed;border-radius:4px;font-size:16px;line-height:1.5;text-align:center;pointer-events:none}.walk-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.walk-pad-wrap{position:absolute;bottom:28px;left:32px;z-index:4;display:grid;justify-items:center;gap:8px;user-select:none}.walk-pad-wrap>span{padding:4px 10px;background:#121614ed;border-radius:3px;font-size:14px;font-weight:600;letter-spacing:.8px}
#walk-pad{position:relative;width:124px;height:124px;border:2px solid #eee9decc;border-radius:50%;background:#121614bf;backdrop-filter:blur(8px);box-shadow:inset 0 0 0 15px #eee9de0a;touch-action:none;cursor:grab}#walk-pad:active{cursor:grabbing}#walk-knob{position:absolute;left:50%;top:50%;width:48px;height:48px;transform:translate(-50%,-50%);border:1px solid var(--gold);border-radius:50%;background:var(--ivory);box-shadow:0 3px 16px #0005;pointer-events:none}
.pad-direction{position:absolute;color:var(--ivory);font:26px/1 var(--font);pointer-events:none}.pad-direction.up{left:50%;top:3px;transform:translateX(-50%)}.pad-direction.down{left:50%;bottom:3px;transform:translateX(-50%)}.pad-direction.left{left:7px;top:50%;transform:translateY(-50%)}.pad-direction.right{right:7px;top:50%;transform:translateY(-50%)}
.walk-actions{position:absolute;right:32px;bottom:52px;z-index:4;display:flex;gap:10px}.walk-actions button{min-height:var(--target);padding:12px 18px;border:1px solid var(--border);border-radius:4px;background:var(--ink);color:var(--ivory);font-size:var(--ui-size);font-weight:600;line-height:1.4}.walk-actions button:first-child{color:var(--gold)}
#walk-map-panel{position:absolute;right:32px;bottom:190px;z-index:6;width:min(340px,calc(100% - 40px));max-height:calc(100svh - 230px);padding:16px;border:1px solid var(--border);border-radius:4px;background:var(--ink);box-shadow:0 20px 65px #0007;overflow:auto}.map-header{display:flex;gap:12px;align-items:center;font-size:16px;font-weight:550;line-height:1.4;margin-bottom:12px}.map-header button{flex:none;margin-left:auto}#walk-map{display:block;width:100%;height:clamp(160px,35svh,320px);background:#25332b;border:1px solid var(--border);touch-action:none;cursor:crosshair}#walk-map-panel p{font-size:14px;line-height:1.6;color:var(--muted);margin:12px 0 0}

.modal,.gallery-modal{position:fixed;width:min(650px,calc(100% - 32px));max-height:calc(100svh - 32px);padding:40px 32px 32px;border:1px solid var(--border);border-radius:6px;background:var(--ink);color:var(--ivory);box-shadow:0 20px 80px #0007;overflow:auto}.modal::backdrop,.gallery-modal::backdrop{background:#0009;backdrop-filter:blur(4px)}.modal>.close-modal,.gallery-modal>.close-modal{position:absolute;right:12px;top:12px}.modal>.eyebrow,.gallery-modal>.eyebrow{padding-right:50px;margin-bottom:18px}.modal h2,.gallery-modal h2{font:500 38px/1.15 var(--serif);margin:0 0 24px}.guide-row{display:flex;align-items:flex-start;gap:18px;padding:18px 0;border-top:1px solid #72837566}.guide-row>span{min-width:30px;font-size:24px;color:var(--gold)}.guide-row p{margin:0;font-size:16px;line-height:1.65}.modal .primary{width:100%;margin-top:20px}.gallery-modal{width:min(1200px,calc(100% - 32px))}.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.gallery-grid figure{margin:0}.gallery-grid img{display:block;width:100%}.gallery-grid figcaption{margin-top:12px;font-size:16px;color:var(--gold)}

@media(max-width:700px){
 #presentation{min-height:0}.topbar{padding:16px 20px;gap:16px}.brand{font-size:36px}.brand small{max-width:215px;font-size:12px;letter-spacing:0}.menu-opener{min-width:112px;padding:10px 14px;gap:9px}.exploring .brand small{display:none}.scene-heading{top:102px;left:20px;max-width:calc(100% - 40px);padding:10px 14px}.scene-heading>span+span{font-size:23px}.intro{left:7%;bottom:90px;width:86%}.description{font-size:16px;line-height:1.65;margin-bottom:24px}.intro-rule,.intro-note{display:none}.bottom-left{font-size:12px;left:7%;bottom:26px;letter-spacing:.7px}.navigation-hint{font-size:15px;bottom:24px;line-height:1.5;max-width:calc(100% - 32px);padding:10px 12px}.walk-pad-wrap{left:20px;bottom:24px}.walk-actions{right:20px;bottom:48px}.walk-feedback{bottom:202px;font-size:15px;max-width:calc(100% - 32px)}#walk-map-panel{right:20px;bottom:190px}
}
@media(max-width:480px){
 .topbar{padding:14px 16px}.brand{font-size:34px}.brand small{max-width:190px}.menu-opener{min-width:108px}.scene-heading{left:16px;max-width:calc(100% - 32px)}.scene-heading>span+span{font-size:22px}.navigation-menu{inset:8px 8px 8px auto;width:calc(100vw - 16px);height:calc(100svh - 16px)}.menu-header{padding:18px}.menu-content{padding:18px}.menu-header h2{font-size:30px}#explore-menu button:not(.close-modal){padding:12px 10px}.walk-pad-wrap{left:16px;bottom:24px}#walk-pad{width:114px;height:114px}.walk-actions{right:16px;bottom:30px;display:grid;gap:8px;max-width:calc(100vw - 162px)}.walk-actions button{width:100%;min-width:0;padding:12px 14px}.walk-feedback{bottom:194px;font-size:15px}#walk-map-panel{right:16px;width:calc(100% - 32px);bottom:188px}.modal,.gallery-modal{padding:38px 22px 24px}.modal h2,.gallery-modal h2{font-size:32px}.gallery-grid{grid-template-columns:1fr}
}
@media(max-height:650px){
 .intro{top:128px;bottom:70px;overflow:auto;padding-right:12px}.intro h1{font-size:52px}.intro .description{font-size:16px}.intro .micro{font-size:14px}.topbar{padding-top:12px;padding-bottom:12px}.brand small{display:none}.scene-heading{top:90px}.walk-feedback{bottom:170px}#walk-pad{width:100px;height:100px}.walk-pad-wrap{bottom:18px}.walk-pad-wrap>span{font-size:14px}.walk-actions{bottom:26px}#walk-map-panel{bottom:162px;max-height:calc(100svh - 190px)}
}
@media(min-width:1600px){.navigation-menu{width:480px}.menu-header h2{font-size:36px}.menu-section h3{font-size:16px}.scene-heading>span+span{font-size:30px}.brand{font-size:46px}.brand small,.preview-tag,.render-note{font-size:15px}.walk-feedback{font-size:18px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* A separate live lighting panel leaves the 3D scene visible while adjusting. */
.top-actions{display:flex;align-items:center;gap:12px}
.sun-opener{display:none;align-items:center;justify-content:center;gap:10px;min-height:var(--target);padding:10px 18px;border:1px solid var(--gold);border-radius:4px;background:var(--panel);color:var(--ivory);font-size:var(--ui-size);font-weight:600;line-height:1.4}
.sun-opener>span:first-child{font-size:24px;line-height:1}
.exploring .sun-opener{display:flex}
.sun-opener:hover,.sun-opener[aria-expanded="true"]{color:var(--ink);background:var(--gold)}
#explore-menu .exterior-only{display:none!important}
.exploring #explore-menu .exterior-only{display:flex!important;margin-top:10px;width:100%;border-color:var(--gold)}
.sun-panel{position:absolute;z-index:7;top:126px;right:24px;width:350px;max-width:calc(100% - 32px);max-height:calc(100svh - 150px);display:flex;flex-direction:column;background:var(--ink);border:1px solid var(--border);border-radius:6px;box-shadow:0 14px 50px #0006;overflow:hidden}
.sun-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex:none}
.sun-panel-header h2{font:500 30px/1.15 var(--serif);margin:0}.sun-panel-header .close-modal{position:static;flex:none}
.sun-panel-content{padding:18px 20px;overflow:auto;overscroll-behavior:contain;min-height:0;scrollbar-width:thin;scrollbar-color:var(--border) var(--ink)}
.sun-instruction{font-size:15px;line-height:1.6;color:var(--muted);margin:0 0 20px}
.sun-setting{margin:0 0 22px}.setting-label{display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16px;font-weight:600;line-height:1.5}.setting-label label{min-width:0}.setting-label output{flex:none;color:var(--gold);font-variant-numeric:tabular-nums}.setting-label #sun-time{font-size:24px}
.sun-panel input[type="range"]{display:block;appearance:none;-webkit-appearance:none;cursor:pointer;touch-action:pan-y;width:100%;height:48px;margin:0;padding:0;background:transparent;accent-color:var(--gold)}
.sun-panel input[type="range"]::-webkit-slider-runnable-track{height:6px;background:var(--border);border-radius:3px}.sun-panel input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:2px solid var(--ink);border-radius:50%;background:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sun-panel input[type="range"]::-moz-range-track{height:6px;background:var(--border);border-radius:3px}.sun-panel input[type="range"]::-moz-range-thumb{width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:var(--gold)}
.sun-panel input:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
.range-ends{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);margin:-3px 0 0}
.sun-presets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}.sun-presets button,#sun-reset{min-height:52px;padding:10px 8px;border:1px solid var(--border);border-radius:4px;background:var(--panel);font-size:16px;line-height:1.4;white-space:normal}.sun-presets button:hover,#sun-reset:hover{border-color:var(--ivory)}.sun-presets button.selected{background:var(--ivory);color:var(--ink);font-weight:700}#sun-reset{width:100%;font-weight:600}
.sun-note{font-size:14px;line-height:1.6;color:var(--muted);margin:18px 0 0;padding-top:16px;border-top:1px solid var(--border)}
@media(max-width:700px){.top-actions{gap:10px}.sun-opener{padding:10px 14px}.sun-panel{top:102px;right:16px}}
@media(max-width:480px){
 .exploring .topbar{flex-wrap:wrap;gap:12px}.exploring .top-actions{width:100%;gap:10px}.exploring .top-actions>button{flex:1;min-width:0;padding:10px 8px}.exploring .scene-heading{top:160px}
 .sun-panel{top:auto;bottom:8px;right:8px;width:calc(100% - 16px);max-width:none;max-height:42svh}.sun-panel-header{padding:12px 16px}.sun-panel-header h2{font-size:28px}.sun-panel-content{padding:16px}.sun-setting{margin-bottom:20px}
}
@media(max-height:650px) and (min-width:481px){.sun-panel{top:90px;max-height:calc(100svh - 106px)}}

/* The illustrative window view shares the outdoor lighting controls. */
.interior-only{display:none!important}.interior-active .interior-only{display:block!important}.scene-heading small{max-width:360px;margin-top:7px;color:var(--muted);font:400 14px/1.5 var(--font)}
#blinds-toggle{width:100%;min-height:52px;margin:0 0 22px;padding:12px;border:1px solid var(--gold);border-radius:4px;background:var(--panel);font-size:16px;font-weight:600;line-height:1.4}#blinds-toggle:hover{background:#2b382f}

@media(min-width:901px){.walk-feedback{bottom:28px;max-width:calc(100% - 460px)}}

#camera-tools {
  position: absolute;
  right: clamp(12px, 2.4vw, 34px);
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 5px;
  z-index: 3;
}
#camera-tools button {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid #eee9de80;
  border-radius: 4px;
  background: #121614df;
  color: #eee9de;
  font-size: 25px;
  line-height: 1;
}
#camera-tools button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
@media (hover: hover) {
  #camera-tools button:hover { background: #3a4039; }
}
#camera-tools button:active { background: #3a4039; }
#presentation:has(#sun-panel:not([hidden])) #camera-tools { visibility: hidden; }
.navigation-hint { pointer-events: none; }
@media (max-height: 520px) {
  #presentation { min-height: 0; }
  .navigation-hint { bottom: 12px; }
  #camera-tools { right: 12px; }
}
