/* Size photographs from their displayed width, not their HTML height attribute. */
.image-frame img{height:auto}

/* Full-width hero with a readable inset for its text. */
@media(min-width:601px){
  .hero{width:100%;margin-inline:0}
  .hero .hero-copy{padding-left:max(56px,calc((100vw - 1280px)/2))}
}
@media(min-width:601px) and (max-width:1150px){
  .hero .hero-copy{padding-left:36px}
}

/* Phone content is divided into smaller, readable visual blocks. No fixed
   height or clipping: large text and short screens can still scroll naturally. */
@media(max-width:600px){
  .section{padding-block:24px}
  .section-heading{margin-bottom:22px}
  .section-heading h2,.story-copy h2{font-size:34px}
  .section-heading .eyebrow{margin-bottom:10px}
  .section-heading>p{font-size:14px;line-height:1.65;margin-top:14px}
  .hero{position:relative;min-height:0}
  .hero-copy{padding:26px 24px;z-index:2}
  .hero h1{font-size:54px}
  .hero .eyebrow{margin-bottom:18px}
  .hero-subtitle{font-size:24px;margin-top:14px}
  .hero-description{font-size:14px;line-height:1.7}
  .hero-actions{margin-top:18px;gap:16px}
  .hero .reservation-note{margin-top:18px;padding-block:10px;font-size:13px}
  .hero-photo{position:absolute;inset:0;min-height:0;max-height:none;opacity:.25}
  .hero-photo:before{background:linear-gradient(90deg,#101112c9,#10111285)}
  .hero-photo figcaption{display:none}
  .hero-footnote{display:none}
  .story{gap:24px}
  .story-image>img{height:180px}
  .story-image{padding-bottom:16px}
  .year-tag{padding:12px 16px}
  .year-tag strong{font-size:32px}
  .story-copy{border-top:1px solid var(--line);padding-top:24px}
  .story-copy h2{margin-bottom:16px}
  .story-copy p:not(.eyebrow){font-size:14px;line-height:1.75}
  .story-copy .eyebrow{margin-bottom:12px}
  .story-note{margin-top:18px;padding-top:12px}
  .food .section-heading{margin-bottom:20px}
  .food-card .image-frame img{aspect-ratio:1;height:auto}
  .food-card:nth-child(2){padding-top:12px}
  .food-card:nth-child(3){padding-top:24px}
  .food-card-title{margin-top:10px}
  .food-card-title h3{font-size:20px}
  .food-card p{font-size:12px;line-height:1.55}
  .menu-notes{margin-top:28px;padding-block:24px 8px}
  .experience-layout{gap:24px}
  .experience-photo img{height:180px}
  .experience-photo figcaption{padding-top:10px}
  .service-list{display:grid;gap:24px}
  .service-item,.service-item:first-child{border-top:1px solid var(--line);padding:24px 0 0;gap:16px}
  .service-item h3{font-size:30px}
  .service-item p{font-size:14px;line-height:1.75}
  .service-item .reservation-note{margin-top:16px;margin-bottom:12px;padding-block:10px}
  .service-item .reservation-note a{margin-top:0}
  .order-band{padding-block:28px}
  .order-band-inner{gap:22px}
  .order-band h2{font-size:36px}
  .order-band p:not(.eyebrow){font-size:14px;margin-block:16px}
  .order-band .button{margin-bottom:20px}
  .order-band figure img{height:130px}
  .order-band figure{max-height:130px;clip-path:inset(0 round 36% 36% 0 0)}
  .gallery{padding-block:20px}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .gallery-grid img{height:110px;aspect-ratio:auto}
  .gallery-grid figcaption{display:block;padding:8px 0}
  .gallery-grid figcaption span:first-child{font-size:19px;line-height:1.1;display:block}
  .gallery-grid figcaption span:last-child{display:none}
  .social-row{margin-top:20px}
  .social-row p{font-size:13px}
  .social-row>div{margin-top:12px}
  .social-button{min-height:44px;padding-inline:12px}
  .coast{min-height:320px}
  .coast-copy{padding-block:30px}
  .coast h2{font-size:36px}
  .coast p:not(.eyebrow){font-size:14px}
  .visit-grid{gap:26px}
  .visit h3{margin-bottom:12px}
  .contact-details address{font-size:14px}
  .reservation-label{margin-top:14px}
  .call-buttons{margin-top:12px}
  .email-link{margin-top:14px}
  .hygiene-link{margin-top:16px}
  .hours{border-top:1px solid var(--line);padding-top:24px}
  .hours th,.hours td{padding-block:8px}
  .shopfront{border-top:1px solid var(--line);padding-top:24px}
  .shopfront img{height:180px;aspect-ratio:auto}
  .map-wrap{margin-top:20px;min-height:180px}
  .map-wrap iframe{height:180px}
  footer{padding-top:28px}
  .footer-top{padding-bottom:24px}
  .footer-order{margin-top:24px}
  .footer-order .reservation-note{margin-block:16px;padding-block:10px}
}

@media(min-width:601px) and (max-width:1099px){
  .section{padding-block:28px}
  .section-heading{margin-bottom:24px;gap:24px}
  .section-heading h2{font-size:42px}
  .section-heading>p{font-size:14px;line-height:1.65}
  .eyebrow{margin-bottom:12px}
  .story{gap:24px}
  .story-image{max-width:none;padding-bottom:20px}
  .story-image>img{height:220px}
  .story-copy{max-width:none}
  .story-copy h2{font-size:40px;margin-bottom:18px}
  .story-note{margin-top:18px;padding-top:14px}
  .food-card .image-frame img{height:160px;aspect-ratio:auto}
  .food-card p{font-size:14px;line-height:1.65}
  .food-card:nth-child(2){padding-top:18px}
  .food-card:nth-child(3){padding-top:36px}
  .food-card-title{margin-top:14px}
  .menu-notes{margin-top:24px;padding-top:18px}
  .experience-layout{grid-template-columns:1fr;gap:24px}
  .experience-photo img{height:190px}
  .experience-photo figcaption{padding-top:10px}
  .service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .service-item,.service-item:first-child{display:block;padding:0;border:0}
  .service-number{display:block;margin-bottom:8px}
  .service-item h3{font-size:28px}
  .service-item p{font-size:14px;line-height:1.65}
  .service-item .reservation-note{padding:10px;margin-top:14px}
  .service-item .reservation-note a{margin-top:0}
  .service-item .button{font-size:10px;padding-inline:10px}
  .gallery-grid img{height:180px}
  .gallery-grid{gap:20px}
  .gallery-grid figcaption{padding-block:10px}
  .social-row{margin-top:24px}
  .visit-grid{gap:20px}
  .shopfront img{height:140px}
  .shopfront figcaption{padding-top:8px}
  .visit h3{margin-bottom:12px}
  .hours th,.hours td{padding-block:5px}
  .reservation-label{margin-top:12px}
  .call-buttons{flex-direction:row;flex-wrap:wrap;margin-top:12px}
  .call-buttons .button{font-size:12px;padding:10px}
  .email-link{margin-top:12px}
  .hygiene-link{margin-top:14px}
  .map-wrap{margin-top:20px;min-height:150px}
  .map-wrap iframe{height:150px}
}

/* Compact full-width layouts for desktop screens. Content remains free to grow
   when text is enlarged or the viewport is unusually short. */
@media(min-width:1100px){
  .section{padding-block:32px}
  .section-heading{margin-bottom:24px;gap:32px}
  .section-heading h2{font-size:clamp(40px,3.5vw,56px)}
  .eyebrow{margin-bottom:12px}
  .hero,.hero-photo{min-height:0}
  .hero{min-height:calc(100svh - 225px)}
  .hero-copy{padding-top:32px;padding-bottom:24px}
  .hero h1{font-size:clamp(62px,5.3vw,84px)}
  .hero-subtitle{margin-top:16px}
  .hero-actions{margin-top:20px}
  .hero .reservation-note{margin-top:18px;padding-block:10px}
  .hero-footnote{padding-top:24px}
  .story-image>img{height:clamp(330px,45svh,470px)}
  .story-copy h2{font-size:46px;margin-bottom:18px}
  .story-note{margin-top:20px;padding-top:14px}
  .food-card .image-frame img{height:clamp(140px,22svh,230px);aspect-ratio:auto}
  .food-card:nth-child(2){padding-top:18px}
  .food-card:nth-child(3){padding-top:36px}
  .food-card-title{margin:14px 0 8px}
  .food-card-title h3{font-size:28px}
  .food-card p{font-size:14px;line-height:1.65}
  .menu-notes{margin-top:22px;padding-top:18px;gap:32px}
  .menu-notes .small{margin-top:8px}
  .experience-layout{grid-template-columns:.8fr 2fr;gap:32px}
  .experience-photo img{height:clamp(300px,42svh,420px)}
  .experience-photo figcaption{font-size:9px;letter-spacing:.1em}
  .service-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
  .service-item,.service-item:first-child{display:block;border:0;border-left:1px solid var(--line);padding:0 0 0 18px}
  .service-number{display:block;margin-bottom:12px}
  .service-item h3{font-size:30px}
  .service-item p{font-size:14px;line-height:1.7}
  .service-item .reservation-note{padding-left:10px;margin-top:16px;margin-bottom:12px}
  .service-item .reservation-note a{margin-top:0}
  .service-item .button{padding-inline:12px;font-size:10px}
  .order-band{padding-block:36px}
  .order-band figure img{height:clamp(300px,45svh,440px)}
  .gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
  .gallery-wide{grid-column:auto}
  .gallery-grid img{height:clamp(190px,30svh,300px)}
  .gallery-grid figcaption{display:block;padding:12px 0}
  .gallery-grid figcaption span:first-child{font-size:23px}
  .gallery-grid figcaption span:last-child{display:block;margin-top:5px}
  .social-row{margin-top:24px}
  .visit-grid{grid-template-columns:1fr 1fr 1fr;gap:32px}
  .shopfront{grid-column:auto}
  .shopfront img{height:230px}
  .visit h3{margin-bottom:12px}
  .reservation-label{margin-top:12px}
  .call-buttons{flex-direction:row;flex-wrap:wrap;margin-top:12px}
  .call-buttons .button{font-size:12px;padding:10px}
  .email-link{margin-top:12px}
  .hygiene-link{margin-top:16px}
  .hours th,.hours td{padding-block:5px}
  .hours .small{margin-top:10px}
  .map-wrap{margin-top:24px;min-height:150px}
  .map-wrap iframe{height:150px}
}

@media(min-width:1100px) and (max-height:820px){
  .hero-copy{padding-top:24px;padding-bottom:20px}
  .hero h1{font-size:62px}
  .hero-description{font-size:14px;line-height:1.7}
  .hero .eyebrow{margin-bottom:16px}
  .hero-footnote{padding-top:16px}
  .visit{padding-block:20px}
  .visit .section-heading{margin-bottom:16px}
  .visit .section-heading h2{font-size:40px}
  .visit .map-wrap{margin-top:14px;min-height:90px}
  .visit .map-wrap iframe{height:90px}
  .visit .map-fallback{margin-top:6px}
}
@media(min-width:601px) and (max-width:1099px) and (max-height:1080px){
  .visit{padding-block:20px}
  .visit .section-heading{margin-bottom:16px}
  .visit .shopfront img{height:100px}
  .visit .map-wrap{margin-top:14px;min-height:110px}
  .visit .map-wrap iframe{height:110px}
}


/* Full-screen section rhythm; longer content remains accessible by scrolling. */
:root{--screen-space:calc(100svh - var(--header-height,106px) - var(--mobile-bar-height,0px))}
main>section:not(.hero){min-height:var(--screen-space)}
main>.hero{min-height:calc(var(--screen-space) - var(--topline-height,40px))}
.section{padding-block:24px}
.story{align-content:start}
.order-band{display:grid;align-content:center}
.visit .map-wrap{margin-top:40px;min-height:370px}
.visit .map-wrap iframe{height:370px}
@media(max-width:600px){.visit .map-wrap{margin-top:28px;min-height:300px}.visit .map-wrap iframe{height:300px}}

/* Cinematic full-bleed hero: steady copy over gently moving photographs. */
main>.hero-cinematic{position:relative;display:flex;align-items:center;min-height:calc(var(--screen-space) - var(--topline-height,40px));width:100%;margin:0;overflow:hidden;background:#101112}
.hero-cinematic .hero-copy{position:relative;z-index:2;width:min(1280px,calc(100% - 112px));margin-inline:auto;padding:48px 0 116px!important;display:block}
.hero-cinematic .hero-copy>*{animation:none}
.hero-cinematic .eyebrow{font-size:11px;letter-spacing:.24em;color:#eee;margin-bottom:24px}
.hero-cinematic h1{font-size:clamp(72px,7.2vw,112px);line-height:.98;letter-spacing:-.035em;text-shadow:0 2px 28px #0004}
.hero-cinematic h1 em{color:#e2e4e7}
.hero-cinematic .hero-subtitle{font-size:30px;margin-top:22px;color:#fff}
.hero-cinematic .hero-description{font-size:15px;line-height:1.8;color:#e0e1e3;max-width:405px;margin-top:14px}
.hero-cinematic .hero-actions{margin-top:26px}
.hero-cinematic .reservation-note{border-left:1px solid #c5c8cb;margin-top:22px;padding-block:0;font-size:13px;background:none}
.hero-cinematic .reservation-note strong{font-size:13px}
.hero-cinematic .hero-footnote{display:none}
.hero-slides,.hero-shade,.hero-slide{position:absolute;inset:0;pointer-events:none}
.hero-slides{z-index:0;overflow:hidden}.hero-slide{width:100%;height:100%;object-fit:cover;object-position:center;opacity:0;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hero-slide:nth-child(2){object-position:60% 50%}.hero-slide:nth-child(3){object-position:65% 48%}
.hero-shade{z-index:1;background:linear-gradient(90deg,rgba(5,7,8,.9),rgba(5,7,8,.68) 35%,rgba(5,7,8,.16) 72%),linear-gradient(0deg,rgba(5,7,8,.85),transparent 35%,rgba(5,7,8,.12))}
.hero-bottom{position:absolute;z-index:3;left:max(56px,calc((100% - 1280px)/2));right:max(56px,calc((100% - 1280px)/2));bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:30px;padding-top:18px;border-top:1px solid #ffffff36}
.hero-location{font-size:10px;letter-spacing:.16em;line-height:1.9;color:#bdc3c8}.hero-location strong{font-weight:500;color:#f1f2f3}
.hero-chapters{display:flex;gap:24px;width:48%;max-width:600px}.hero-chapters>span{flex:1;position:relative;font-size:9px;letter-spacing:.13em;color:#b4b7bb;padding-bottom:12px;white-space:nowrap}.hero-chapters b{font-weight:400;margin-right:8px}.hero-chapters i{position:absolute;bottom:0;left:0;right:0;height:2px;background:#ffffff30}.hero-chapters .is-current{color:#fff}.hero-chapters .is-current i:after{content:'';display:block;height:100%;width:calc(var(--slide-progress,0) * 100%);background:#edf0f2}
.hero-pause{border:1px solid #ffffff55;color:#fff;background:#08090955;min-width:44px;min-height:44px;padding:10px 12px;cursor:pointer;font:11px var(--sans);letter-spacing:.1em;display:flex;align-items:center;gap:8px}.hero-pause[hidden]{display:none}.hero-pause:hover{background:#ffffff22}.hero-pause:focus-visible{outline:2px solid white;outline-offset:4px}
@media(max-width:1150px){.hero-cinematic .hero-copy{width:calc(100% - 72px)}.hero-bottom{left:36px;right:36px}.hero-chapters{width:54%;gap:14px}.hero-location{font-size:9px}}
@media(max-height:820px) and (min-width:601px){.hero-cinematic .hero-copy{padding-block:24px 102px!important}.hero-cinematic h1{font-size:72px}.hero-cinematic .eyebrow{margin-bottom:16px}.hero-cinematic .hero-subtitle{margin-top:14px;font-size:26px}.hero-cinematic .hero-description{margin-top:8px;font-size:14px}.hero-cinematic .hero-actions{margin-top:18px}.hero-cinematic .reservation-note{margin-top:16px}}
@media(max-width:600px){.hero-cinematic .hero-copy{width:calc(100% - 40px);padding:30px 0 110px!important}.hero-cinematic h1{font-size:clamp(52px,14.5vw,78px)}.hero-cinematic .eyebrow{font-size:9px;letter-spacing:.11em;margin-bottom:20px}.hero-cinematic .hero-subtitle{font-size:25px;margin-top:18px}.hero-cinematic .hero-description{font-size:14px;line-height:1.7;max-width:310px;padding-right:0}.hero-cinematic .hero-actions{margin-top:20px;gap:20px}.hero-cinematic .reservation-note{font-size:12px;margin-top:20px;padding-left:12px}.hero-cinematic .reservation-note strong{font-size:12px}.hero-shade{background:linear-gradient(90deg,#050708ce,#05070870),linear-gradient(0deg,#050708f0,transparent 65%)}.hero-slide{object-position:60% center}.hero-bottom{left:20px;right:20px;bottom:20px;gap:12px;padding-top:14px}.hero-location{display:none}.hero-chapters{width:auto;flex:1;gap:10px}.hero-chapters>span{font-size:8px;letter-spacing:.02em;white-space:normal}.hero-chapters b{display:block;margin-bottom:5px}.hero-pause{padding:10px;align-self:center}.hero-pause span{display:none}}
/* Each image owns both fade and movement, as in the working BCH hero. */
.hero-cinematic .hero-slide{animation:hero-ken-burns 18s linear infinite;animation-delay:var(--scene-delay,0s);transform-origin:60% 50%}
.hero-slide:nth-child(1),.hero-chapters>span:nth-child(1){--scene-delay:0s}
.hero-slide:nth-child(2),.hero-chapters>span:nth-child(2){--scene-delay:-12s}
.hero-slide:nth-child(3),.hero-chapters>span:nth-child(3){--scene-delay:-6s}
.hero-cinematic .hero-chapters>span{animation:hero-chapter 18s linear infinite;animation-delay:var(--scene-delay,0s)}
.hero-cinematic .hero-chapters>span i:after{content:'';display:block;width:100%;height:100%;background:#edf0f2;transform-origin:left;animation:hero-meter 18s linear infinite;animation-delay:var(--scene-delay,0s)}
@keyframes hero-ken-burns{
 0%{opacity:1;transform:scale(1.05) translate(0,0)}
 26.666%{opacity:1}
 33.333%,90%{opacity:0;transform:scale(1.18) translate(-1.5%,-1%)}
 93.333%{opacity:0;transform:scale(1.05) translate(0,0)}
 100%{opacity:1;transform:scale(1.05) translate(0,0)}
}
@keyframes hero-crossfade{0%,26.666%{opacity:1}33.333%,93.333%{opacity:0}100%{opacity:1}}
@keyframes hero-chapter{0%,30%{color:#fff}33.333%,93.333%{color:#b4b7bb}100%{color:#fff}}
@keyframes hero-meter{0%{transform:scaleX(0);opacity:1}33.332%{transform:scaleX(1);opacity:1}33.333%,100%{transform:scaleX(0);opacity:0}}
/* Match BCH's mobile safeguard: no backdrop blur over animated layers. */
@media(max-width:1099px){
 .site-header,.mobile-actions{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#101112}
 .hero-slide{will-change:opacity}
}
/* Keep the requested hero movement in all motion modes; the pause control stops it. */
@media(prefers-reduced-motion:reduce){
 .hero-cinematic .hero-slide{animation:hero-ken-burns 18s linear infinite!important;animation-delay:var(--scene-delay,0s)!important;will-change:transform,opacity}
 .hero-cinematic .hero-chapters>span{animation:hero-chapter 18s linear infinite!important;animation-delay:var(--scene-delay,0s)!important}
 .hero-cinematic .hero-chapters>span i:after{animation:none!important;opacity:0}
}
.hero-cinematic.slideshow-paused .hero-slide,.hero-cinematic.slideshow-paused .hero-chapters>span,.hero-cinematic.slideshow-paused .hero-chapters>span i:after{animation-play-state:paused!important}

/* BCH-inspired floating photo previews, using Masala Bay's silver palette. */
.gallery-grid{position:relative;z-index:2;isolation:isolate;overflow:visible}
.gallery-grid figure{position:relative;z-index:1;background:var(--ink);transform-origin:center;transition:transform .24s cubic-bezier(.16,.85,.24,1),box-shadow .24s ease}
.gallery-preview-trigger{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in;overflow:hidden;touch-action:manipulation}
.gallery-preview-trigger img{transition:transform .3s ease}
.gallery-preview-trigger:focus-visible{outline:2px solid #e2e4e7;outline-offset:5px}
.js .gallery-grid figure.is-previewing{z-index:8;transform:translateX(var(--preview-shift,0px)) scale(var(--preview-scale,1.06));box-shadow:0 24px 55px -18px #000e,0 0 0 2px #c8cdd580}
.gallery-grid figure.is-previewing img{transform:scale(1.08)}
.gallery-grid figure.is-previewing figcaption{padding-inline:12px}
.gallery-grid figure.is-previewing .gallery-preview-trigger{cursor:zoom-out}

/* Allow the three social links to wrap on narrow screens. */
.social-row>div{flex-wrap:wrap}

.social-button .social-icon{display:block;width:20px;height:20px;flex:0 0 20px;fill:currentColor}

/* Scroll-linked coastal image zoom; the copy and gradient remain stationary. */
.coast>img{transform:scale(var(--coast-zoom,1));transform-origin:54% 56%;backface-visibility:hidden;will-change:transform}
@media(prefers-reduced-motion:reduce){.coast>img{transform:none;will-change:auto}}

/* Give social labels their natural width instead of squeezing three into a row. */
@media(max-width:600px){
 .social-row>div{display:flex;flex-wrap:wrap;gap:10px}
 .social-row .social-button{flex:1 0 auto;min-width:max-content;gap:8px;padding:12px 16px;min-height:46px;font-size:12px}
}