/* Keep intrinsic grid sizes and hero content inside the available viewport. */
.hero-copy{right:clamp(24px,8vw,130px)}
.section-heading>*,.cellar>*,.location>*,.experience-story>*,
.founder-notes>*,.guest-actions>a>*,.reviews-heading>*,.review-grid>*,
.inquiry>*,.form-row>*,.wine-hero>*,.wine-heading>*,.full-cellar>*{min-width:0}
.guest-actions>a{grid-template-columns:auto minmax(0,1fr) auto}
.inquiry input,.inquiry textarea{min-width:0}
.button{max-width:100%;white-space:normal;text-align:center;justify-content:center}
@media(max-width:1100px){
  .nav{height:90px}
  .menu-toggle{display:block}
  .nav nav{position:absolute;top:90px;left:0;right:0;background:var(--deep);display:none;flex-direction:column;align-items:flex-start;padding:26px}
  .nav nav.open{display:flex}
}
@media(max-width:800px){
  .hero{height:auto;min-height:720px;min-height:max(720px,100svh);display:flex;align-items:center;padding:150px clamp(24px,8vw,64px) 100px}
  .hero>img:not(.hero-watermark){position:absolute;inset:0}
  .hero-copy{position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:650px;z-index:1;animation:none}
  .hero h1{font-size:clamp(52px,15vw,68px)}
  .hero .lead{max-width:100%;overflow-wrap:break-word}
  .hero .actions{display:grid;grid-template-columns:minmax(0,1fr)}
  .hero .button{width:100%}
  .experience-copy h2,.location-copy h2,.wine-copy h3,.category-heading h2{overflow-wrap:break-word}
  .menu-nav,.wine-nav{height:auto;min-height:90px;gap:12px;flex-wrap:wrap}
  .menu-nav>div,.wine-nav>div{min-width:0;flex-wrap:wrap;gap:12px}
  footer>div{flex-wrap:wrap}
}