/* Shared frame keeps the photographic plate and drawn architecture aligned. */
.house-story { position:absolute; inset:0; overflow:hidden; background:#47564c; }
.house-story svg { width:100%; height:100%; display:block; transform:scale(var(--zoom,1)); transform-origin:55% 65%; }
.house-story .story-paper { opacity:var(--paper,0); }
.house-story .story-ground { opacity:var(--ground,0); }
.house-story .story-outline { opacity:var(--lines,0); }
.house-story .story-outline path { stroke-dasharray:1; stroke-dashoffset:var(--draw,1); }
.house-story .story-dimensions { stroke-width:1; }
.house-story .story-walls,.house-story .story-openings { opacity:var(--walls,0); }
.house-story .story-roof { opacity:var(--roof,0); }
.house-story .story-final { opacity:var(--final,0); }
.story-controls { position:absolute; right:max(24px,calc((100% - 1440px)/2)); bottom:18px; z-index:3; display:flex; align-items:center; gap:16px; color:#fff; font-size:12px; }
.story-controls span { text-shadow:0 1px 8px #000; }
.story-controls button { padding:9px 14px; min-height:44px; border:1px solid #ffffff50; border-radius:24px; background:#162019a6; color:#fff; font:inherit; cursor:pointer; backdrop-filter:blur(8px); }
.story-controls button:hover { background:#162019; }
.story-controls button:focus-visible { outline:2px solid white; outline-offset:3px; }
.has-house-story .hero-bg > img { animation:none; }
@media(max-width:600px) { .story-controls { right:16px; left:16px; bottom:10px; justify-content:space-between; font-size:11px; } .has-house-story { padding-bottom:74px; } }
@media(prefers-reduced-motion:reduce) { .house-story,.story-controls { display:none; } }

/* First paint is an inline blueprint, before either JS or image downloads. */
.story-start { position:absolute; inset:0; width:100%; height:100%; display:none; }
.has-house-story .story-start,.story-fallback .story-start { display:none; }
@media(min-width:761px) {
 .hero-story-layout:not(.story-fallback) .hero-bg > img { visibility:hidden; }
 .hero-story-layout:not(.has-house-story):not(.story-fallback) .story-start { display:block; }
}
@media(max-width:760px) {
 .hero-story-layout .story-start { display:none; }
 body[data-hero-preview] .hero { height:auto; min-height:0; aspect-ratio:16 / 9; padding:0; }
 body[data-hero-preview] .house-story svg { transform:none; }
 body[data-hero-preview] .hero-bg > img { object-fit:contain; }
}
@media(prefers-reduced-motion:reduce) {
 .hero-story-layout .hero-bg > img { visibility:visible !important; }
 .hero-story-layout .story-start { display:none !important; }
}