/* Own titles use the hero's real width after the original side panel opens. */
body[data-factory-demo="true"] .hero{container-type:inline-size;scroll-margin-top:calc(var(--factory-banner-height,34px) + var(--factory-notice-height,0px))}
@media(min-width:701px){
 body[data-factory-demo="true"] .hero .hero-title{padding-top:clamp(40px,6svh,75px)}
 body[data-factory-demo="true"][data-preview-long-title="true"] .hero .hero-title{padding-top:clamp(125px,18svh,155px)}
 body[data-factory-demo="true"][data-preview-long-title="true"] .hero .hero-title h1{max-width:84%;line-height:.94}
 body[data-factory-demo="true"][data-preview-long-title="true"] .hero .hero-title h1 span:first-child{font-size:clamp(28px,min(7.5cqw,6.8svh),90px);overflow-wrap:anywhere}
 body[data-factory-demo="true"][data-preview-long-title="true"] .hero .hero-title h1 span:last-child{font-size:clamp(25px,min(5.5cqw,5svh),66px)}
 body[data-factory-demo="true"][data-preview-long-title="true"] .hero .hero-title .script{font-size:clamp(32px,min(7cqw,6svh),80px);margin-top:6px}
}

/* Mobile follows Diva: reserve the masthead before any object title.
   The measured value grows only when the actual header needs more room. */
@media(max-width:700px){
 body[data-factory-demo="true"] .hero .hero-title{
  padding-top:max(135px,var(--factory-mobile-header-clearance,135px))!important;
 }
}

/* Long object-specific words must remain inside mobile section headings. */
@media(max-width:700px){
 body[data-factory-demo="true"] main h2{overflow-wrap:anywhere}
 body[data-factory-demo="true"] main h2[data-mobile-section-fit="true"]{font-size:var(--factory-mobile-section-size)!important}
}