/* A continuous mobile dawn scene. Desktop and envelope artwork stay separate. */
.mobile-hero-art{display:none}
@media(max-width:700px){
 body[data-main-invitation] .variant-hero.ella-stationery-on{height:auto;min-height:100svh;padding:0 0 20px;background:#fff;display:block}
 body[data-main-invitation] .ella-stationery-on .mobile-hero-art{display:block;position:relative;z-index:0;width:100%;height:100svh;overflow:hidden;background:#c9e1f8;opacity:var(--ella-image-opacity,1)}
 body[data-main-invitation] .mobile-hero-art picture{position:absolute;inset:0;z-index:0;display:block;width:100%;height:108%}
 body[data-main-invitation] .mobile-hero-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
 body[data-main-invitation] .mobile-hero-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 18%,rgba(255,255,255,.30) 28%,rgba(255,255,255,.85) 40%,rgba(255,255,255,.88) 47%,rgba(255,255,255,.55) 53%,transparent 60%)}
 body[data-main-invitation] .ella-stationery-on .ella-stationery{display:none!important}
 body[data-main-invitation] .ella-stationery-on .invitation-copy{top:24svh;left:50%;width:92%;height:auto;padding:0;margin:0;transform:translateX(-50%);z-index:3;clip-path:none;overflow:visible;white-space:normal}
 body[data-main-invitation] .ella-stationery-on .name-composition{transform:none}
 body[data-main-invitation] .ella-stationery-on .invitation-copy h1{font-size:min(var(--name-size-mobile,44px),9.5vw);margin:0 0 22px;color:#c59a4b}
 body[data-main-invitation] .ella-stationery-on .invitation-copy .gold-name,
 body[data-main-invitation] .ella-stationery-on .invitation-copy .name-amp{background:none;-webkit-text-fill-color:currentColor;color:#c59a4b}
 body[data-main-invitation] .ella-stationery-on .invitation-copy .name-amp{font-size:.5em;margin:8px 0;line-height:1}
 body[data-main-invitation] .ella-stationery-on .invitation-copy .name-amp::before,
 body[data-main-invitation] .ella-stationery-on .invitation-copy .name-amp::after,
 body[data-main-invitation] .ella-stationery-on .invitation-copy .parents{display:none}
 body[data-main-invitation] .ella-stationery-on .invitation-copy .wording{font-size:min(var(--wording-size-mobile,14px),3.6vw);color:#38352f;transform:none}
 body[data-main-invitation] .ella-stationery-on .dancing-rings{left:50%!important;top:12svh!important;width:120px!important;height:96px!important;transform:translate(-50%,-50%)}
 body[data-main-invitation] .ella-stationery-on .invitation-explore{position:relative;top:auto;bottom:auto;left:auto;transform:none;margin:16px auto 0;max-width:calc(100% - 32px);min-height:44px;padding:10px 18px;font-size:var(--explore-mobileFontSize,12px)}
 /* Keep editor access clear of the couple, lawn and pathway. */
 body[data-main-invitation]:not(.invitation-closed) .variant-tools{top:max(8px,env(safe-area-inset-top));right:8px;bottom:auto;gap:5px;font-size:10px}
 body[data-main-invitation]:not(.invitation-closed) .variant-tools button,
 body[data-main-invitation]:not(.invitation-closed) .variant-tools summary{padding:0;min-height:44px;min-width:44px;font-size:0;display:flex;align-items:center;justify-content:center}
 body[data-main-invitation]:not(.invitation-closed) .variant-tools #design-toggle::after{content:"⚙";font-size:19px}
 body[data-main-invitation]:not(.invitation-closed) .variant-tools summary::before{display:none}
 body[data-main-invitation]:not(.invitation-closed) .variant-tools summary::after{content:"◈";font-size:20px}
 body[data-main-invitation]:not(.invitation-closed) .variant-tools nav div{top:50px;bottom:auto;font-size:13px}
}
/* Short phones crop only the unused upper sky, so the copy moves up with it. */
@media(max-width:700px) and (max-aspect-ratio:1/2){
 body[data-main-invitation] .ella-stationery-on .invitation-copy{top:25svh}
}
@media(max-width:700px) and (min-aspect-ratio:1/2){
 body[data-main-invitation] .mobile-hero-art picture{height:100%}
 body[data-main-invitation] .mobile-hero-art img{object-position:center calc(50% + 5svh)}
 body[data-main-invitation] .ella-stationery-on .invitation-copy{top:17svh}
 body[data-main-invitation] .ella-stationery-on .invitation-copy h1{font-size:min(var(--name-size-mobile,44px),8.4vw);margin-bottom:14px}
 body[data-main-invitation] .ella-stationery-on .dancing-rings{top:8svh!important;width:92px!important;height:74px!important}
}


/* Dedicated portrait-tablet artwork; landscape retains its wide composition. */
@media (min-width:701px) and (max-width:1100px) and (orientation:portrait) {
 body[data-main-invitation] .variant-hero.ella-stationery-on{height:100svh;min-height:900px;padding:0;overflow:hidden;background:#f9f6f1}
 body[data-main-invitation] .ella-stationery-on .ella-stationery{display:none!important}
 body[data-main-invitation] .ella-stationery-on .mobile-hero-art{display:block;position:absolute;inset:0;z-index:0;opacity:var(--ella-image-opacity,1)}
 body[data-main-invitation] .mobile-hero-art picture,body[data-main-invitation] .mobile-hero-art img{display:block;width:100%;height:100%}
 body[data-main-invitation] .mobile-hero-art img{object-fit:cover;object-position:center bottom}
 body[data-main-invitation] .ella-stationery-on .invitation-copy{top:19%;left:50%;width:90%;height:auto;padding:0;transform:translateX(-50%);z-index:3}
 body[data-main-invitation] .ella-stationery-on .name-composition{transform:none}
 body[data-main-invitation] .ella-stationery-on .invitation-copy h1{font-size:clamp(44px,6vw,62px);margin:0;line-height:1.12}
 body[data-main-invitation] .ella-stationery-on .invitation-copy .name-amp{font-size:.5em;line-height:1;margin:8px 0}
 body[data-main-invitation] .ella-stationery-on .dancing-rings{left:50%!important;top:7%!important;width:130px!important;height:104px!important;transform:translateX(-50%)}
 body[data-main-invitation] .ella-stationery-on .hero-name-divider{top:43%!important;width:38%!important}
 body[data-main-invitation] .ella-stationery-on .invitation-explore{top:48%!important;left:50%;transform:translate(-50%,-50%);min-height:48px}
}