/* Wide gallery walls: the content and the hanging art share the viewport.
   Below desktop, only the newly selected hero photograph gets a focal point. */
.hero-caption-center{display:none}
@media(min-width:1024px){
  .hero-caption{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
  .hero-caption-center{display:block;text-align:center}
  .hero-caption>span:last-child{text-align:right}
}
@media(max-width:767px){
  .hero-photo img{object-position:25% 60%}
  .hero-photo{
    -webkit-mask-image:url('media/hero-mobile-brush-mask.svg?v=3');
    mask-image:url('media/hero-mobile-brush-mask.svg?v=3');
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .loft-photo img{
    -webkit-mask-image:url('media/loft-brush-mask.svg');
    mask-image:url('media/loft-brush-mask.svg');
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
}

@media(min-width:1024px){
  :root{--wall-gutter:4vw;--wall-space:clamp(100px,8vw,220px)}
  .header-inner,.section-shell,.hero{max-width:none}
  .header-inner,.footer{padding-inline:var(--wall-gutter)}

  .hero{
    position:relative;
    isolation:isolate;
    --hero-photo-floor:calc(54px + clamp(30px,2.5vw,60px));
    grid-template-columns:minmax(0,.95fr) minmax(0,1.25fr);
    gap:0 3.5vw;
    padding:clamp(32px,3vw,72px) var(--wall-gutter) 0;
  }
  .hero-copy{height:auto;min-height:0;padding:36px 0 48px;align-self:center}
  .hero .eyebrow{font-size:clamp(10px,.72vw,13px);margin-bottom:clamp(24px,2vw,44px)}
  .hero h1{font-size:clamp(76px,7.6vw,210px);line-height:.96;letter-spacing:-.025em}
  .hero-description{font-size:clamp(16px,1.05vw,21px);max-width:36ch;margin-top:clamp(25px,2vw,44px)}
  .hero-actions{margin-top:clamp(28px,2vw,44px);gap:20px 28px}
  /* Keep the photo's grid space, but let the image blend into the whole hero. */
  .hero-photo{position:static;overflow:visible;background:transparent;margin:0;aspect-ratio:3/2;align-self:center}
  .hero-photo img{
    inset:0 0 var(--hero-photo-floor) auto;
    width:66%;height:calc(100% - var(--hero-photo-floor));
    object-position:50% 55%;
    z-index:0;pointer-events:none;
    -webkit-mask-image:url('media/hero-brush-mask.svg');
    mask-image:url('media/hero-brush-mask.svg');
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
  }
  .hero-caption{position:relative;z-index:1;margin-top:clamp(30px,2.5vw,60px);padding:18px 0;font-size:11px}

  .intro,.menu-section,.visit-section{padding-block:var(--wall-space)}
  .art-section{padding-block:var(--wall-space) calc(var(--wall-space)*.75)}
  .intro{column-gap:clamp(24px,2.2vw,56px)}
  .intro-copy{max-width:540px}
  .loft-photo{padding-top:0}
  .loft-photo img{
    -webkit-mask-image:url('media/loft-brush-mask.svg');
    mask-image:url('media/loft-brush-mask.svg');
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  }
  .menu-grid{gap:clamp(24px,2vw,54px)}
  .dish-photo img{height:clamp(270px,21vw,520px)}
  .menu-note{max-width:70ch}
  .footer{padding-top:50px}
  .footer-wordmark{font-family:'Barlow Condensed','Hero Impact Fallback','Hero Sans Fallback','Arial Narrow',Impact,sans-serif}


}

@media(min-width:1200px){
  .gallery-wall{--wall-side:26vw}

  /* Alternating articles leave a real stretch of wall for each artwork. */
  .gallery-wall>.intro{
    padding-left:var(--wall-gutter);padding-right:var(--wall-side);
    grid-template-columns:minmax(0,min(29vw,540px)) minmax(0,1fr);
  }
  .intro h2{font-size:clamp(55px,4.25vw,96px)}
  .intro .lead{font-size:clamp(18px,1.25vw,23px)}
  .intro-copy>p:not(.lead){font-size:clamp(15px,.95vw,18px)}
  .loft-photo img{height:clamp(420px,32vw,740px);aspect-ratio:auto}

  .gallery-wall>.menu-section{
    padding-left:var(--wall-side);padding-right:var(--wall-gutter);
  }
  .menu-section{border-top:0}
  .menu-heading{border-top:1px solid var(--line);padding-top:40px}
  .menu-heading h2{font-size:clamp(64px,5.6vw,144px)}
  .menu-toolbar{margin-top:42px;margin-bottom:38px}
  .dish-heading h3{font-size:clamp(27px,1.85vw,44px)}
  .dish>p{max-width:38ch;font-size:clamp(14px,.88vw,17px)}

  .gallery-wall>.art-section>.section-shell{
    padding-left:var(--wall-gutter);padding-right:var(--wall-side);
  }
  .art-heading h2{font-size:clamp(58px,5.3vw,136px)}
  .art-copy{font-size:clamp(16px,1.05vw,20px)}
  .art-gallery{
    grid-template-columns:.8fr 1.1fr 1fr;
    grid-template-rows:clamp(220px,18vw,480px) clamp(230px,18vw,480px);
    gap:clamp(24px,2vw,56px);
    margin-top:clamp(44px,4vw,100px);
  }
  .gallery-art{margin-bottom:12%}
  .gallery-table{margin-top:10%}
  .gallery-drinks{margin:24% -9vw -6% 15%;border-width:10px}
  .gallery-footer{margin-top:clamp(70px,6vw,155px)}

  .edge-art{
    --art-width:clamp(154px,13vw,360px);
    width:var(--art-width);
  }
  .edge-art--portrait{left:auto;right:6vw;top:calc(var(--wall-space) + 80px)}
  .edge-art--citrus{left:6vw;right:auto;top:calc(var(--wall-space) + 110px)}
  .edge-art--coffee{left:6vw;right:auto;top:calc(var(--wall-space) + 140px)}
  /* Scale the wire with its frame; the pivot is the SVG hook at (50, 5). */
  .edge-art-hanging{padding-top:calc(var(--art-width)*.36);transform-origin:50% calc(var(--art-width)*.05)}
  .edge-art-wire{height:calc(var(--art-width)*.42)}
  .edge-art-frame{padding:clamp(10px,1vw,20px);border-width:clamp(7px,.55vw,12px)}
  .edge-art-label{font-size:9px;margin:24px 0 0 24px;padding:5px 8px}


}

@media print{
  .gallery-wall>.section-shell,.gallery-wall>.art-section>.section-shell{padding-inline:var(--page-pad)}
  .visit-layout .location-map{position:static}
}