/* R07: one readable teal-to-copper handoff, with continuous restrained image life. */
.craft-signal[data-pass=design]{stroke:#83d8cb}
.craft-signal[data-pass=design] .craft-flow{stroke-width:3.3;stroke-dasharray:.27 1;stroke-dashoffset:calc(.27 - var(--craft-progress))}
.craft-bed{opacity:.1}
.roofline{stroke-width:calc(1.8 + var(--roof-glow)*3.8);stroke:color-mix(in srgb,#8de0d1 calc((1 - var(--roof))*100%),#dc9b62)}
.architecture::after{border-width:2.6px}
.architecture-art,.is-morphing .architecture-art{animation:northline-presence 28s ease-in-out infinite alternate;animation-play-state:running}
.roof-light,.design-complete:not(.is-morphing) .roof-light{animation:none;opacity:calc(var(--development)*.25)}
@keyframes northline-presence{from{transform:scale(1.018) translateX(.2%)}to{transform:scale(1.036) translateX(-.45%)}}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}
.scroll-active .architecture-art{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.architecture-art{animation:none!important;transform:none}}

/* R08: retain Northline while letting each portrait canvas compose deliberately. */
.morph-layout main{top:calc(26% + var(--tablet)*5% + var(--phone)*4%)}
.morph-layout .architecture{bottom:calc(var(--phone)*22%)}
.morph-layout .image-signature{opacity:calc(var(--design)*(1 - var(--tablet)))}

.scroll-active.story-hold:not(.paused) .architecture-art{animation-play-state:running!important}

/* R09's 430 × 932 phone: a considered three-line title, fuller image and usable CTA. */
.morph-layout h1{font-size:calc(86px - var(--tablet)*10px - var(--phone)*16px)}
.morph-layout .architecture{bottom:calc(var(--phone)*19%)}
.morph-layout .architecture-art{width:calc(100% + var(--phone)*30%);margin-left:calc(var(--phone)*-25%)}
.morph-layout .northline-description{font-size:calc(11px + var(--tablet)*1px)}
.morph-layout .northline-actions>button:first-child{min-height:calc(43px + var(--tablet)*4px + var(--phone)*3px)}