/* Final responsive adjustments, after the existing component styles. */
.hero::after{content:'';position:absolute;inset:auto 0 -1px;height:clamp(160px,18vw,280px);background:var(--cream) url('assets/menu-paper-texture.avif') left bottom/640px 640px repeat;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 15%,rgba(0,0,0,.32) 35%,rgba(0,0,0,.68) 60%,rgba(0,0,0,.94) 82%,#000 96%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.08) 15%,rgba(0,0,0,.32) 35%,rgba(0,0,0,.68) 60%,rgba(0,0,0,.94) 82%,#000 96%);pointer-events:none;z-index:4}
.hero-copy .eyebrow{animation-delay:2.08s}.hero h1 span:first-child{animation-delay:2.18s}.hero h1 span:nth-child(2){animation-delay:2.3s}.hero h1 em{animation-delay:2.42s}.hero-description{animation-delay:2.55s}.hero-copy .actions{animation-delay:2.68s}.hero-place{animation-delay:2.8s}
.alcudia-walls{position:absolute;right:0;top:10px;width:min(68vw,960px);aspect-ratio:1.6;background:url('assets/alcudia-walls.png') center/contain no-repeat;opacity:.15;pointer-events:none;z-index:-1}
.menu-more{margin-top:20px}.menu-more[hidden]{display:none}
@media(max-width:760px){
 .hero{padding-top:0;min-height:100vh;min-height:100svh}
 .hero-inner{min-height:inherit;position:relative}
 .hero-visual{position:absolute;inset:0;width:100%;height:100%}
 .hero-photos{aspect-ratio:auto;height:100%;min-height:100%;background:var(--forest)}
 .hero-slide img,.hero-slide.active img{object-fit:contain;object-position:center 24%;height:100%;width:100%}
 .hero-visual::after{background:linear-gradient(180deg,rgba(7,25,19,.35),transparent 24%,rgba(7,25,19,.38) 43%,rgba(7,25,19,.94) 65%,rgba(7,25,19,.96))}
 .hero-copy{align-self:end;text-align:left;padding:100px 24px max(85px,calc(env(safe-area-inset-bottom) + 65px));max-width:560px;margin:0 auto;}
 .hero h1{font-size:clamp(2.75rem,11vw,4.2rem);line-height:.98}
 .hero h1 span,.hero h1 em{display:block}.hero h1 span::after{content:none}
 .hero-copy .eyebrow{font-size:.62rem;letter-spacing:.14em;margin-bottom:14px;max-width:250px}
 .hero .hero-description{font-size:1rem;line-height:1.55;max-width:340px;margin:18px 0 20px}
 .hero-copy .actions{justify-content:flex-start;gap:12px 20px}
 .hero-copy .button{font-size:.86rem;padding:13px 20px}
 .hero-copy .text-link{font-size:.85rem;padding:10px 0}
 .hero-place{font-size:.53rem;letter-spacing:.1em;line-height:1.5;margin-top:20px}
 .hero::after{height:125px}
 .header{padding:16px 20px;gap:12px}.header .brand{gap:8px}.header .brand>img{width:42px;height:auto}.brand small{font-size:8px}
 .header nav{top:82px;padding:16px;gap:4px;max-height:calc(100svh - 110px);overflow-y:auto;border-radius:18px}
 .header nav.open{display:grid;grid-template-columns:1fr 1fr}
 .header nav>a{font-size:.95rem;line-height:1.35;border-bottom:1px solid #ffffff12;padding:13px 9px!important}
 .header nav>.button{grid-column:1/-1;margin-top:10px}
 .menu.section{padding:65px 16px}.menu-top{gap:18px;margin-bottom:28px;align-items:start;flex-direction:column}.menu-top>p{font-size:1rem}
 .menu-layout{display:block}.menu-sidebar{position:relative;top:auto;margin-bottom:18px}.menu-sidebar>.eyebrow,.menu-sidebar>.text-link{display:none}
 .menu-tabs{gap:8px;padding:4px 2px 12px;scroll-snap-type:x proximity}.menu-tabs button{font-family:var(--secondary,Georgia,serif);font-size:.95rem;min-height:44px;padding:10px 16px!important;scroll-snap-align:start}
 .menu-paper{padding:26px 20px 22px;border-radius:18px 4px 18px 4px;box-shadow:none}.menu-paper::before{inset:7px;border-radius:13px 2px 13px 2px}
 .menu-paper>h3{font-size:2rem;margin:10px 0;max-width:100%}.menu-description{font-size:.94rem;line-height:1.5;margin-bottom:12px}
 .menu-item{grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;padding:12px 0}.menu-item h4{font-size:1.04rem;line-height:1.3}.menu .menu-item p{font-size:.9rem;line-height:1.45}.menu-item .item-price{font-size:1rem;line-height:1.35}
 .menu-footnote{font-size:.8rem;line-height:1.5;margin-top:20px}.original-menus{margin-top:24px}
 .alcudia-walls{width:100%;top:20px;opacity:.18}.essence .section-heading{position:relative}
}
@media(max-width:760px) and (max-height:740px){.hero-copy{padding-top:110px;padding-bottom:65px}.hero h1{font-size:clamp(2.35rem,9.5vw,3.1rem)}.hero .hero-description{font-size:.91rem;margin:12px 0 14px}.hero-copy .eyebrow{margin-bottom:10px}.hero-place{margin-top:12px}.hero-slide img{object-position:center 18%}}
@media(max-width:760px) and (orientation:landscape){.hero-copy{padding-top:105px;max-width:100%;padding-left:6vw}.hero h1{font-size:2.4rem}.hero h1 span,.hero h1 em{display:inline}.hero-slide img,.hero-slide.active img{object-position:right center}.hero-visual::after{background:linear-gradient(90deg,#071913ed,#07191377)}.hero .hero-description{max-width:380px}}
@media(prefers-reduced-motion:reduce){.hero-copy *{animation:none!important}}

@media(max-width:760px) and (max-height:650px){.hero-visual::after{background:linear-gradient(180deg,rgba(7,25,19,.67),rgba(7,25,19,.62) 45%,rgba(7,25,19,.96) 72%)}.hero-copy .button{font-size:.78rem;padding:11px 15px}.hero-copy .text-link{font-size:.78rem}.hero-copy .actions{gap:10px}.hero .hero-description{font-size:.87rem;line-height:1.45}.hero-copy .eyebrow{font-size:.55rem;max-width:100%}.hero h1{font-size:2.3rem}.hero-place{font-size:.49rem}}

/* Fade each complete mobile photograph within its own 16:9 bounds. */
@media(max-width:760px) and (orientation:portrait){
 .hero-photos{background:var(--forest)}
 .hero-slide img,.hero-slide.active img{position:absolute;top:85px;left:0;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;object-position:center;transform:none;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.88) 73%,rgba(0,0,0,.44) 89%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 60%,rgba(0,0,0,.88) 73%,rgba(0,0,0,.44) 89%,transparent 100%)}
 .hero-visual::after{background:linear-gradient(to bottom,rgba(7,25,19,.16),rgba(7,25,19,.08) 30%,rgba(7,25,19,.3) 55%,rgba(7,25,19,.7))}
}
@media(max-width:760px) and (orientation:portrait) and (max-height:650px){.hero-visual::after{background:linear-gradient(to bottom,rgba(7,25,19,.3),rgba(7,25,19,.36) 45%,rgba(7,25,19,.7))}}

/* Mobile uses the original portrait assets; desktop keeps the 1920px remasters. */
.hero-slide picture{display:block;width:100%;height:100%}
@media(max-width:760px) and (orientation:portrait){
 .hero-slide img,.hero-slide.active img{top:85px;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:top center;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.65) 82%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 62%,rgba(0,0,0,.65) 82%,transparent 100%)}
 .hero-visual::after{background:linear-gradient(to bottom,rgba(7,25,19,.12),rgba(7,25,19,.08) 24%,rgba(7,25,19,.52) 45%,rgba(7,25,19,.85) 70%,rgba(7,25,19,.94))}
}

.breakfast-stage{padding-bottom:85px}
.breakfast-stage .handnote-svg{position:absolute;right:0;bottom:0;width:clamp(170px,18vw,240px);height:auto;max-width:48%;transform:rotate(-6deg);object-fit:contain}
@media(max-width:760px){.breakfast-stage{padding-bottom:100px}.breakfast-stage .handnote-svg{width:200px;max-width:65%;right:5%;bottom:0;transform:rotate(-4deg)}}

/* A gentle SVG float, with the same motion on touch and desktop. */
.breakfast-stage .handnote-svg{--phrase-tilt:-6deg;animation:phrase-float 5.8s ease-in-out infinite;will-change:transform}
@keyframes phrase-float{0%,100%{transform:translate3d(0,0,0) rotate(var(--phrase-tilt))}50%{transform:translate3d(0,-12px,0) rotate(calc(var(--phrase-tilt) + 2deg))}}
@media(max-width:760px){.breakfast-stage .handnote-svg{--phrase-tilt:-4deg}}
@media(prefers-reduced-motion:reduce){.breakfast-stage .handnote-svg{animation:none;will-change:auto}}
