html[data-roof-embed="home"]{overflow-x:hidden;background:#fff}
html[data-roof-embed="home"] body{margin:0;padding:0;overflow-x:hidden;min-height:0}
html[data-roof-embed="home"] body>.site-header,html[data-roof-embed="home"] body>.skip-link,html[data-roof-embed="home"] body>noscript{display:none!important}
html[data-roof-embed="home"] #main-content> :not(#roof-feature){display:none!important}
html[data-roof-embed="home"] #main-content{margin:0 auto;padding:0 4.5%;max-width:1580px;min-height:0}
html[data-roof-embed="home"] #roof-feature{padding-bottom:15px;margin:0}
/* The parent already displays the complete Peaked logo in its sticky header. */
html[data-roof-embed="home"] .story-copy>.hero-peaked-mark{display:none!important}
@media(min-width:761px){html[data-roof-embed="home"] body:not(.storm-cinema) .photo-stage{height:clamp(570px,calc(var(--roof-parent-height,900px) - 225px),735px)}}
@media(max-width:760px){html[data-roof-embed="home"] #main-content{padding:0 20px}}
/* On a phone, lead with the working roof itself rather than a full screen of
   introductory controls. Its source order already precedes the story copy;
   keep the H1 and every action intact below it. Detail and cinema modes retain
   their own layouts. */
@media(max-width:600px){
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .photo-stage{padding-top:0}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .art-region{order:0;height:clamp(290px,88vw,460px);margin-top:0}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-panel{order:2;min-width:0;padding:22px 0 18px}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-panel .eyebrow{font-size:11px;line-height:1.4;letter-spacing:.12em;margin-bottom:8px}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-panel #caption-title{font-size:clamp(32px,9.4vw,40px);line-height:1.08;margin-bottom:10px;max-width:none}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-panel #caption-description{font-size:15px;line-height:1.5;max-width:none}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-actions{margin-top:14px}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .story-actions .storm-button{margin:10px 0 0}
 html[data-roof-embed="home"] body:not(.storm-cinema) .roof-showcase:not(.has-active-detail) .hero-call{margin-top:4px}
}