/* Portrait art direction only on phones; desktop and tablet retain R6. */
.hero-opening{display:contents}
@media(max-width:700px){
 .editorial-r7 .editorial-hero{--art-height:calc(min(133.3333vw,573.3333px) + 56px);background:#f5f1e8}
 .editorial-r7 .editorial-hero>.hero-inner{width:87%;padding-top:103px;padding-bottom:27px}
 .editorial-r7 .hero-opening{display:block;min-height:calc(var(--art-height) - 103px)}
 .editorial-r7 .hero-opening>.eyebrow,.editorial-r7 .hero-mobile-media{display:none}
 .editorial-r7 .hero-picture{display:block;top:0;bottom:auto;height:var(--art-height);z-index:-1;background:linear-gradient(105deg,#f8f5ee 9%,#ebf1f4 54%,#bddcf5 100%)}
 .editorial-r7 .hero-picture:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 84%,#f5f1e8 100%);pointer-events:none}
 .editorial-r7 .hero-picture .hero-photo{position:absolute;top:56px;inset-inline:0;width:100%;height:auto;object-fit:contain;transform:none;z-index:0;mask-image:linear-gradient(180deg,transparent,#000 18%)}
 .editorial-r7 .hero-inner h1{font-size:clamp(42px,13.3vw,58px);margin-bottom:18px;letter-spacing:-.045em}
 .editorial-r7 .hero-inner h1 small{font-size:12px;margin-bottom:9px;letter-spacing:.09em}
 .editorial-r7 .hero-statement{font-size:clamp(21px,5.8vw,25px);line-height:1.5;letter-spacing:-.02em}
 .editorial-r7 .hero-deck{margin-top:5px;max-width:none;font-size:14px;line-height:1.8}
 .editorial-r7 .hero-actions{margin-top:20px}
 .editorial-r7 .hero-actions .button{min-height:50px;padding-inline:20px}
 .editorial-r7 .hero-bottom{position:static;margin-top:21px;font-size:9px;line-height:1.6;letter-spacing:.02em}
}
@media(min-width:431px) and (max-width:700px){
 .editorial-r7 .hero-picture .hero-photo{width:430px;left:50%;right:auto;transform:translateX(-50%);mask-image:linear-gradient(180deg,transparent,#000 18%),linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-composite:intersect}
}
@media(max-width:360px){
 .editorial-r7 .editorial-hero{--art-height:calc(133.3333vw + 72px)}
 .editorial-r7 .hero-picture .hero-photo{top:72px}
 .editorial-r7 .editorial-hero>.hero-inner{padding-top:91px}
 .editorial-r7 .hero-opening{min-height:calc(var(--art-height) - 91px)}
 .editorial-r7 .hero-inner h1{margin-bottom:15px}
 .editorial-r7 .hero-deck{font-size:13px}
}
