.house-scene{position:relative;isolation:isolate;background:#e4e1d7;overflow:hidden;min-height:460px}
.house-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .5s}
.architecture-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .45s;touch-action:pan-y;cursor:grab}
.architecture-canvas:active{cursor:grabbing}
.scene-ready .architecture-canvas{opacity:1}
.scene-ready>img{opacity:0;pointer-events:none}
.house-scene [data-scene-status]{position:absolute;bottom:18px;left:20px;right:20px;font-size:12px;letter-spacing:.045em;z-index:2;pointer-events:none;color:#333d31;text-shadow:0 1px 8px #e4e1d7;margin:0;line-height:1.5}
.scene-toolbar{position:absolute;top:18px;right:18px;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;z-index:3;max-width:calc(100% - 30px)}
.scene-toolbar button{font:12px/1.3 inherit;font-size:12px;color:#30382e;border:1px solid #fff8;background:#f4f1e9dd;backdrop-filter:blur(10px);padding:9px 11px;min-height:38px;cursor:pointer}
.scene-toolbar button:hover{background:#fff}
.scene-feature{position:absolute;bottom:48px;left:20px;background:#243b2f;color:#f7f3e9;padding:12px 17px;font-size:14px;z-index:2}
.architecture-dialog{position:fixed;inset:18px;width:calc(100vw - 36px);max-width:none;height:calc(100dvh - 36px);max-height:none;margin:0;border:0;padding:0;background:#f4f1e9;color:#272f26;box-shadow:0 20px 100px #0007;animation:architecture-enter .5s cubic-bezier(.2,.8,.2,1)}
.architecture-dialog::backdrop{background:#18241fe8;backdrop-filter:blur(8px)}
.explorer-head{height:94px;padding:19px 28px;border-bottom:1px solid #c4c9bb;display:flex;align-items:center;justify-content:space-between;gap:20px}
.explorer-head h2{font-size:30px;margin:4px 0}
.explorer-head .eyebrow{font-size:var(--text-min);letter-spacing:.13em}
.explorer-head button{border:0;background:none;font:inherit;cursor:pointer;padding:12px}
.explorer-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;height:calc(100% - 94px)}
/* max-height:76svh on the plain .house-scene rule (style.css, sized for scroll chapters) otherwise leaks through
   here uncontested and caps the model panel well short of the layout, leaving an empty band (audit item 19). */
.explorer-layout>.house-scene{height:100%;min-height:0;max-height:none}
.explorer-layout .architecture-canvas{touch-action:none}
.explorer-layout aside{padding:30px;overflow:auto;border-left:1px solid #c4c9bb}
.explorer-layout h3{font:36px/1.1 'Cormorant Garamond',Georgia,serif;margin:10px 0 20px}
.explorer-layout p{font-size:15px;line-height:1.65}
.explorer-layout label{display:block;font-size:14px;margin:25px 0}
.explorer-layout input{width:100%;height:24px;accent-color:#284636;display:block;margin-top:14px}
@media(pointer:coarse){.explorer-layout input[type=range]{height:var(--touch-min,44px)}}
.explorer-views{display:flex;gap:6px;margin:25px 0}
.explorer-views button{border:1px solid #b2b8a9;background:transparent;padding:9px;font:inherit;font-size:13px;cursor:pointer}
.explorer-rooms{border-top:1px solid #c4c9bb}
.explorer-rooms button{display:flex;justify-content:space-between;width:100%;text-align:left;border:0;border-bottom:1px solid #c4c9bb;background:none;font:inherit;font-size:14px;padding:15px 0;cursor:pointer}
.explorer-rooms button:hover{color:#607349}
.explorer-layout .fine{font-size:12px;margin-top:24px;color:#626c5d}
body:has(.architecture-dialog[open]){overflow:hidden}
@keyframes architecture-enter{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media(max-width:760px){.house-scene{min-height:320px}.architecture-dialog{inset:0;width:100%;height:100dvh}.explorer-head{height:80px;padding:14px 18px}.explorer-layout{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,47%) minmax(0,1fr);height:calc(100% - 80px);overflow:hidden}.explorer-layout>.house-scene{height:100%;min-height:0;max-height:none;position:relative;top:auto;z-index:1}.explorer-layout aside{min-height:0;overflow:auto;overscroll-behavior:contain;padding:24px;border-left:0;border-top:1px solid #c4c9bb}.scene-toolbar{top:10px;right:10px;gap:3px}.scene-toolbar button{font-size:var(--text-min);padding:8px}.house-scene [data-scene-status]{left:14px;bottom:13px;font-size:var(--text-min)}.explorer-head h2{font-size:25px}.scene-feature{left:14px;bottom:42px;font-size:12px}}
@media(prefers-reduced-motion:reduce){.architecture-dialog{animation:none}.architecture-canvas,.house-scene>img{transition:none}}
/* Legible scene annotations on every material and time-of-day view. */
.house-scene [data-scene-status]{right:auto;max-width:calc(100% - 40px);color:#29372c;background:rgba(246,244,237,.94);text-shadow:none;padding:7px 11px;font-size:12px;letter-spacing:.02em}
@media(max-width:760px){.house-scene [data-scene-status]{font-size:var(--text-min);max-width:calc(100% - 28px)}}
/* One shared canvas per page (scene/engine.js). A holder the canvas has left keeps a frozen copy of its last frame. */
.architecture-freeze{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none}
.house-scene:not(.scene-ready)>.architecture-freeze{display:none}
/* Only the live holder shows its toolbar, and not while the hero photograph still covers the model (audit item 9). */
.house-scene:not(.scene-live)>.scene-toolbar:not(.scene-toolbar-still),.house-scene[data-model-visible="false"]>.scene-toolbar{visibility:hidden}
/* Screen-reader-only key instructions for the shared canvas, one per holder (audit item 40, scene/controls.js). */
.scene-instructions{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Cursor label and part-hover outline over a live model, fine pointer only (audit item 42). Positioned with
   transform only (section 1.4); pointer-events:none and aria-hidden are set from scene/controls.js. */
.scene-cursor-label{position:fixed;top:0;left:0;z-index:2000;background:#243b2f;color:#f7f3e9;font-size:var(--text-min);letter-spacing:.02em;padding:4px 9px;pointer-events:none;transition:transform .06s linear}
.scene-hover-box{position:fixed;top:0;left:0;z-index:5;border:2px solid #243b2f;box-shadow:0 0 0 1px #f7f3e9cc;pointer-events:none}
@media(pointer:coarse){.scene-cursor-label{display:none}}
@media(prefers-reduced-motion:reduce){.scene-cursor-label{transition:none}}
/* Guided tour bar inside the explorer, shown only for "Take a guided tour" (audit item 19, scene/explorer.js). */
.tour-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:22px 0;padding:14px 0;border-top:1px solid #c4c9bb;border-bottom:1px solid #c4c9bb}
.tour-bar p{margin:0;flex:1;text-align:center;font-size:13px}
.tour-bar button{border:1px solid #b2b8a9;background:transparent;padding:9px 14px;font:inherit;font-size:13px;cursor:pointer}
.tour-bar button:disabled{opacity:.4;cursor:default}
/* Every scene control meets the site-wide target floor: 24px always, 44px under a coarse (touch) pointer
   (audit items 11, 19, 22). Padding and min-width/height grow the target; type size is untouched. */
.scene-toolbar button,.explorer-views button,.explorer-rooms button,.explorer-head button,.tour-bar button{min-width:var(--target-min);min-height:var(--target-min)}
@media(pointer:coarse){.scene-toolbar button,.explorer-views button,.explorer-rooms button,.explorer-head button,.tour-bar button{min-width:var(--touch-min);min-height:var(--touch-min)}}
/* R3: reduced motion lays a story holder out in reading order instead of an absolute-positioned overlay. The
   still becomes a normal image sized by its own aspect ratio, and the status line becomes normal text under it.
   Scoped to [data-scene-story] .house-scene so the explorer dialog and the Design Studio's inline model (not
   scroll stories) keep today's layout. The still toolbar ("Explore in 3D") stays position:absolute, so it still
   sits on top of the image: .house-scene keeps position:relative (unchanged, base rule above). */
@media(prefers-reduced-motion:reduce){
  [data-scene-story] .house-scene{height:auto;min-height:0;max-height:none}
  [data-scene-story] .house-scene>img{position:static;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
  [data-scene-story] .house-scene [data-scene-status]{position:static}
}