/* Prototype 4: requested framing, 10 November. Original photos unchanged. */
@media(min-width:701px){
 .hero{height:auto;max-height:none;aspect-ratio:1448/856;}
 .hero-photo{inset:auto 0 0;width:100%;height:auto;min-height:0;object-fit:initial;transform:none;}
 header{top:1%;left:5%;right:15%;align-items:center;gap:2%;height:8.5%;}
 header .brand{width:13%;display:flex;align-items:center;gap:6px;text-align:left;}
 header .brand .cup,header .brand i,header .brand:after{display:none;}
 header .brand b{font-size:clamp(18px,2.2vw,33px);line-height:.88;}
 header nav{padding:0;gap:clamp(12px,2vw,30px);font-size:clamp(14px,1.4vw,20px);}
 header nav a,header nav>button,header .nav-button{padding:8px 0;min-height:36px;}
 header .phone{font-size:clamp(12px,1.1vw,17px);margin:0;}
 header .social{padding:0;}
 #cafe{height:auto;max-height:none;aspect-ratio:100/38.8;}
 #cafe>img{width:69%;height:100%;object-fit:cover;object-position:center;}
 #space{height:clamp(480px,49vw,784px);max-height:none;}
 #space>img{width:58%;height:100%;object-fit:cover;object-position:50% 60%;}
 #space:after{background:linear-gradient(90deg,transparent 42%,#19110a 59%,transparent 68%);}
 #space .story-copy{left:65%;right:5%;top:25%;}
}
@media(max-width:700px){
 .hero-photo{aspect-ratio:1448/856;object-position:center bottom;}
 #cafe>img{aspect-ratio:16/9;object-position:center;}
 #space>img{height:auto;max-height:560px;aspect-ratio:4/5;object-fit:cover;object-position:center 62%;}
}