/* Responsive corrections. Shared photo geometry keeps the bottle and cover aligned. */
body:has(dialog[open]){overflow:hidden}
@media(max-width:900px){
  .product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .product-card,.section-head>div,.house-copy,.product-detail{min-width:0}
  .campaign-copy p{max-width:170px;font-size:26px}
  .product-dialog-layout{grid-template-columns:1fr}
  .product-visual{min-height:0;height:330px;background:#171b15}
  .product-visual .bottle-crop{width:210px;max-width:75%;height:100%;background-size:400% auto}
  .product-visual>span{color:var(--paper);font-size:9px}
  .product-detail{padding:34px 28px}
}
@media(max-width:700px){
  .site-header{height:76px;padding:0 18px;grid-template-columns:minmax(60px,1fr) auto minmax(44px,1fr);gap:8px}
  .menu-toggle{gap:10px;min-width:60px;min-height:44px}
  .site-header>.shortlist-toggle{width:44px;min-height:44px;display:flex;align-items:center;justify-content:flex-end}
  .logo{font-size:clamp(21px,6.1vw,26px);letter-spacing:-1px;padding:8px 0}
  .logo span{font-size:6px;letter-spacing:1.3px;margin-top:7px}
  .motion-hero{--photo-width:min(245vw,1050px);height:calc(100svh - 76px);min-height:560px;max-height:680px;background:#151410}
  .campaign-stage{background:#151410}
  .campaign-frame{width:var(--photo-width);min-width:0;top:40%;height:auto;aspect-ratio:1672/941}
  .campaign-stage .campaign-frame{mask-image:linear-gradient(to bottom,transparent,black 5%,black 84%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,black 5%,black 84%,transparent)}
  .campaign-shade{background:linear-gradient(180deg,#090b0c22,transparent 25%,transparent 50%,#151410 87%)}
  .motion-hero h1{top:calc(40% - var(--photo-width)*.1418 - .55em);left:3%;right:3%;font-size:12.5vw;letter-spacing:.005em}
  .campaign-eyebrow{top:20px;left:18px;right:18px;font-size:8px;letter-spacing:1px}
  .campaign-copy{left:20px;right:20px;bottom:100px}
  .campaign-copy p{max-width:none;font-size:clamp(23px,6.3vw,28px);line-height:1.13;margin:0;letter-spacing:-.5px}
  .campaign-footer{left:20px;right:20px;bottom:16px;gap:12px;align-items:center}
  .campaign-footer>span{font-size:8px;line-height:1.6;letter-spacing:.5px;max-width:55%}
  .campaign-footer button{font-size:11px;min-height:44px;padding:0 2px;gap:10px;flex-shrink:0}
  .section{padding-left:18px;padding-right:18px}
  #collection .kicker{font-size:14px}
  #collection .section-head h2{font-size:clamp(17px,4.55vw,32px);letter-spacing:-.06em}
  .filter-row{gap:0;justify-content:space-between;flex-wrap:nowrap}
  .filter-row button{font-size:11.5px;min-height:48px;padding:13px 7px;flex:1;line-height:1.3}
  .filter-row button>span{font-size:9px;margin-left:4px}
  .product-grid{gap:30px 12px}
  .product-card .bottle-crop{aspect-ratio:3/4.8}
  .card-name{gap:6px;padding-top:14px;padding-bottom:10px}
  .card-name h3{font-size:clamp(12px,3.6vw,16px);letter-spacing:-.06em;white-space:nowrap}
  .card-name>span{font-size:17px;flex-shrink:0}
  .card-family{font-size:11px;font-weight:600;line-height:1.5;min-height:3em;margin:10px 0;overflow-wrap:normal}
  .card-mood{font-size:14px;line-height:1.4;display:block}
  .house{gap:30px}
  .house-copy h2{font-size:clamp(43px,12.7vw,62px);letter-spacing:-1.6px}
  .house-copy>p:not(.kicker){font-size:17px;line-height:1.7}
  .house-copy .underlined{font-size:12px}
  .photo-label{font-size:9px;letter-spacing:1px;left:18px;right:18px;bottom:18px;line-height:1.5}
  .finder{padding:35px 20px 25px}
  .finder-index{font-size:11px;line-height:1.5;margin-bottom:32px}
  .finder h2{font-size:clamp(31px,8.8vw,40px);line-height:1.12}
  .finder>p{font-size:14px;line-height:1.7}
  .finder-bottom{font-size:8px;letter-spacing:.3px;gap:10px;line-height:1.5;align-items:center}
  .note-rows>button{grid-template-columns:20px minmax(0,1fr) 22px;gap:10px}
  .note-rows h3{font-size:clamp(21px,6vw,27px);letter-spacing:-.7px}
  .note-rows p{font-size:13px;line-height:1.5}
  .notes .section-head>p{font-size:14px}
  footer{padding:36px 20px 24px}
  .footer-upper{gap:25px 16px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .footer-upper>p{font-size:32px;line-height:1.2}
  .footer-upper>div{gap:4px;font-size:13px}
  .footer-upper .kicker{font-size:10px;line-height:1.5;margin-bottom:12px}
  .footer-upper a,.footer-upper button{min-height:44px;display:flex;align-items:center;font-size:13px;text-align:left}
  .footer-small p{font-size:16px;line-height:1.6}
  .footer-wordmark{margin:36px 0 25px}
  .footer-base{font-size:8px;gap:16px;line-height:1.5;letter-spacing:.5px;align-items:center}
  .footer-base a{min-height:44px;display:flex;align-items:center}
  .menu-dialog{padding:20px 18px max(20px,env(safe-area-inset-bottom));width:100%;height:100dvh}
  .menu-top{font-size:9px;letter-spacing:1px;padding-bottom:18px}
  .menu-top .close-dialog{min-width:88px;gap:18px;justify-content:flex-end}
  .menu-dialog nav>a,.menu-dialog nav>button,.menu-dialog nav>button.shortlist-toggle{font-size:clamp(22px,6.3vw,42px);gap:8px;letter-spacing:-.055em;padding:24px 0;min-height:80px}
  .menu-dialog nav>a>span:first-child,.menu-dialog nav>button>span:first-child{flex:0 0 20px;font-size:9px}
  .menu-dialog nav>a>span:last-child,.menu-dialog nav>button>span:last-child{font-size:25px;flex:0 0 25px}
  .menu-bottom{font-size:8px;line-height:1.5;gap:18px;letter-spacing:.6px}
  dialog:not(.menu-dialog){width:calc(100% - 24px);max-width:560px;max-height:calc(100svh - 24px);margin:auto}
  .product-visual{height:clamp(245px,40svh,330px);background:#171b15}
  .product-visual .bottle-crop{width:clamp(175px,53vw,220px);max-width:75%;height:100%;background-size:400% auto}
  .product-visual>span{left:16px;bottom:14px;font-size:8px;letter-spacing:1px}
  .product-detail{padding:28px 20px}
  .product-detail h2{font-size:clamp(32px,9vw,40px);line-height:1.05;letter-spacing:-1px}
  .detail-family,.detail-notes>span,.quiz-progress{font-size:11px;letter-spacing:.7px}
  .detail-story{font-size:17px;line-height:1.65}
  .detail-disclaimer{font-size:12px;line-height:1.6}
  details,summary{font-size:13px;line-height:1.6}
  summary{min-height:44px;align-items:center;gap:15px}
  .product-detail .solid-link,.quiz-result-actions .solid-link,.shortlist-dialog .solid-link{font-size:12px;min-height:52px;padding:15px 16px;gap:15px}
  .quiz-dialog,.shortlist-dialog{padding:60px 20px 25px}
  .quiz-dialog h2{font-size:clamp(29px,8.5vw,37px);line-height:1.1;letter-spacing:-1px}
  .quiz-options button{font-size:20px;padding:16px;gap:15px;min-height:58px}
  .quiz-result-actions{gap:14px;margin-top:22px}
  .quiz-result-actions .solid-link{width:100%}
  .shortlist-dialog h2{font-size:36px}
  .saved-row{grid-template-columns:44px minmax(0,1fr) 44px;gap:10px}
  .saved-row .bottle-crop{height:76px}
  .saved-row h3{font-size:20px;line-height:1.15}
  .saved-row p{font-size:11px;line-height:1.5;letter-spacing:0}
  .shortlist-hint{font-size:12px;line-height:1.6}
  .toast{max-width:calc(100% - 32px);font-size:13px;line-height:1.5;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-height:500px) and (min-width:701px){
  .site-header{height:76px}
  .motion-hero{height:560px;min-height:560px}
  .campaign-copy p{max-width:180px;font-size:26px}
  .menu-dialog{padding:20px 4%}
  .menu-dialog nav>a,.menu-dialog nav>button,.menu-dialog nav>button.shortlist-toggle{font-size:48px;padding:15px 0}
}
/* Keep the product close control reachable after scrolling its long description. */
.product-dialog-toolbar{position:sticky;top:0;height:0;z-index:5}
@media(max-width:700px){.product-visual>span{display:none}}
@media(max-width:900px){
  .site-header{padding-left:max(18px,env(safe-area-inset-left));padding-right:max(18px,env(safe-area-inset-right))}
}
@media(max-width:700px){
  .campaign-footer{bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(max-height:500px) and (min-width:701px){
  .site-header{padding-left:max(4%,env(safe-area-inset-left));padding-right:max(4%,env(safe-area-inset-right))}
}

/* Native phone cover: show the entire portrait painting, with a separate bottle. */
@media(max-width:700px){
  .motion-hero{height:auto;min-height:0;max-height:none;background:#151410}
  .campaign-stage{position:relative;inset:auto;aspect-ratio:3/4;width:100%;height:auto;overflow:hidden}
  .campaign-stage .campaign-frame{position:absolute;inset:0;width:100%;height:100%;min-width:0;aspect-ratio:auto;transform:none;mask-image:none;-webkit-mask-image:none}
  .campaign-stage .campaign-frame img{object-fit:contain;object-position:center}
  .campaign-shade{background:linear-gradient(180deg,#08090818,transparent 22%,transparent 85%,#15141066)}
  .campaign-product{height:calc(100vw * 4 / 3);bottom:auto}
  .campaign-product .campaign-frame{width:260vw;min-width:0;top:50%;height:auto;aspect-ratio:1672/941;transform:translate(-50%,-50%)}
  .campaign-product::before{content:"";position:absolute;left:50%;top:84%;width:59%;height:4%;transform:translateX(-50%);background:radial-gradient(ellipse,#0008,transparent 70%)}
  .motion-hero h1{top:33px;left:4%;right:4%;font-size:20.6vw;line-height:.86;letter-spacing:-.055em;text-align:center;display:flex;flex-direction:column;gap:5px}
  .masthead-prefix{display:block;align-self:flex-start;font-size:.25em;letter-spacing:.08em;line-height:1;margin-left:1%}
  .masthead-name{display:block;white-space:nowrap}
  .campaign-eyebrow{top:16px;left:18px;right:18px;font-size:8px;letter-spacing:.8px}
  .campaign-copy{position:relative;inset:auto;margin:0;padding:15px 20px 8px;background:#151410}
  .campaign-copy p{font-size:clamp(23px,6.2vw,28px);line-height:1.12}
  .campaign-footer{position:relative;inset:auto;margin:0;padding:10px 20px max(16px,env(safe-area-inset-bottom));min-height:72px;background:#151410}
  .campaign-footer>span{font-size:8px;max-width:55%}
  .campaign-footer button{font-size:11px}
  .campaign-footer button .icon{width:15px;height:15px}
  .house{padding:32px 18px 38px;gap:24px}
  .house-photo{aspect-ratio:16/9}
  .house-photo img{object-position:center 57%}
  .house-copy .kicker{margin-bottom:16px;padding-top:12px}
  .house-copy h2{font-size:clamp(29px,8.5vw,38px);line-height:1.08;margin-bottom:16px;letter-spacing:-1px}
  .house-copy>p:not(.kicker){font-size:16px;line-height:1.6;max-width:none}
  .finder h2{font-size:clamp(29px,8.3vw,37px)}
  .finder h2 br{display:block}
  .finder .light-link .icon{width:22px;height:22px}
  .card-name>span .icon{width:18px;height:18px}
}
@media(max-width:700px){.motion-hero h1{top:50px}}
@media(max-width:700px){.motion-hero h1{font-size:20vw}}