/* A fixed header and one viewport-sized stage keep the scroll film in frame. */
:root{--site-header-height:82px;--hero-ribbon-height:84px;--hero-height:100svh}
@supports(height:100dvh){:root{--hero-height:100dvh}}
.site-header,.site-header.scrolled{position:fixed;inset:0 0 auto;height:var(--site-header-height);z-index:50;background:var(--ink);animation:none;transform:none;transition:none;backdrop-filter:none;border-bottom:1px solid var(--line)}
.site-header.scrolled{box-shadow:0 8px 24px #0003}
.site-header{direction:ltr;padding-inline:5.5%}
.desktop-nav,.header-actions{direction:rtl}
.mobile-nav{inset:var(--site-header-height) 0 0}
.category-wrap{top:var(--site-header-height)}
.reserve-layout{padding-top:var(--site-header-height)}
.cinema{height:420svh;min-height:0;position:relative}
.cinema-sticky{height:var(--hero-height);min-height:0;max-height:none;position:sticky;top:0;padding:0;overflow:hidden;background:var(--ink);display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);grid-template-rows:var(--site-header-height) minmax(0,1fr) var(--hero-ribbon-height);grid-template-areas:". ." "visual copy" "ribbon ribbon";direction:ltr;isolation:isolate}
.hero-paper{display:none}
.hero-visual{grid-area:visual;position:relative;inset:auto;width:auto;height:auto;min-width:0;min-height:0;align-self:stretch;clip-path:none;overflow:hidden;pointer-events:none;z-index:1;background:transparent}
.hero-visual canvas,.cinema-poster{position:absolute;inset:0;display:block;width:100%;height:100%;transition:none!important}
.hero-visual canvas{opacity:0}
.cinema.scene-ready .hero-visual canvas{opacity:1}
.cinema .cinema-poster{object-fit:contain;object-position:center bottom;opacity:1}
.cinema-poster img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}
.cinema.scene-ready .cinema-poster{opacity:0}
.hero-copy{grid-area:copy;position:relative;inset:auto;width:auto;min-width:0;align-self:center;justify-self:stretch;padding:32px clamp(28px,5.5vw,96px) 32px 20px;text-align:right;direction:rtl;z-index:2}
.hero-copy h1.hero-display{font-family:Pinar,sans-serif;font-size:clamp(42px,4.35vw,76px);font-weight:700;line-height:1.6;letter-spacing:0;margin:0;max-width:none;white-space:normal;text-align:right;color:var(--paper)}
.hero-copy h1.hero-display br{display:block}
.hero-copy h1.hero-display em{color:var(--brand)}
.hero-copy .hero-description{position:static;inset:auto;max-width:30em;margin:18px 0 26px;font-size:clamp(13px,1.05vw,16px);line-height:2.2;text-align:right;direction:rtl;color:var(--text-secondary)}
.hero-copy>.button{background:var(--brand);color:var(--ink);direction:rtl;min-height:50px;font-size:12px;margin:0;padding:12px 24px}
.hero-copy>.button:hover{background:var(--brand-hover)}
@media(min-width:801px) and (max-width:1100px) and (min-aspect-ratio:6/5){.cinema-sticky{grid-template-columns:minmax(0,1fr) 260px}.hero-copy{padding:20px 24px 20px 12px}.hero-copy h1.hero-display{font-size:34px;letter-spacing:0}.hero-copy .hero-description{font-size:12px;margin:14px 0 20px}.hero-copy>.button{min-height:46px;padding:10px 18px;font-size:11px}}
@media(min-width:1101px) and (max-aspect-ratio:6/5){.cinema-sticky{grid-template-columns:minmax(0,2.8fr) minmax(0,1fr)}.hero-copy{padding:24px clamp(24px,3vw,48px) 24px 14px}.hero-copy h1.hero-display{font-size:clamp(36px,3.8vw,64px);letter-spacing:0}}
@media(max-width:1100px) and (max-aspect-ratio:6/5), (max-width:800px){
 :root{--site-header-height:72px;--hero-ribbon-height:76px}
 .site-header{direction:ltr;padding-inline:6%}
 .cinema{height:360svh}
 .cinema-sticky{grid-template-columns:minmax(0,1fr);grid-template-rows:var(--site-header-height) auto minmax(0,1fr) var(--hero-ribbon-height);grid-template-areas:"." "copy" "visual" "ribbon"}
 .hero-copy{padding:clamp(18px,3svh,32px) 7% 12px;align-self:start}
 .hero-copy h1.hero-display{font-size:clamp(34px,6.8vw,54px);line-height:1.5;letter-spacing:0}
 .hero-copy .hero-description{font-size:14px;line-height:2.1;margin:12px 0 18px;max-width:none}
 .hero-copy>.button{min-height:46px;font-size:11px;padding:10px 20px}
 .hero-visual{inset:auto;width:auto;min-height:0}
}
@media(max-width:560px){
 :root{--hero-ribbon-height:70px}
 .hero-copy{padding:clamp(18px,3.8svh,32px) 6% 16px}
 .hero-copy h1.hero-display{font-size:clamp(34px,11.3vw,46px);line-height:1.55}
 .hero-copy .hero-description{font-size:13px;line-height:2.1;margin:16px 0 22px}
 .hero-copy .hero-description br{display:block}
 .hero-copy>.button{min-height:48px;font-size:10px;padding:11px 17px}
}
@media(max-width:560px) and (max-height:740px) and (max-aspect-ratio:6/5){.hero-copy{padding:18px 6% 8px}.hero-copy h1.hero-display{font-size:clamp(26px,8vw,31px);line-height:1.5}.hero-copy h1.hero-display br{display:none}.hero-copy .hero-description{font-size:12px;line-height:2;margin:10px 0 14px}.hero-copy>.button{min-height:42px;padding:8px 16px}}
@media(max-height:600px) and (min-aspect-ratio:6/5){
 :root{--site-header-height:64px;--hero-ribbon-height:58px}
 .cinema-sticky{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:var(--site-header-height) minmax(0,1fr) var(--hero-ribbon-height);grid-template-areas:". ." "visual copy" "ribbon ribbon"}
 .hero-copy{padding:12px 6% 12px 12px;align-self:center}
 .hero-copy h1.hero-display{font-size:clamp(25px,3.8vw,34px);line-height:1.45}
 .hero-copy .hero-description{font-size:11px;line-height:1.9;margin:8px 0 12px}
 .hero-copy>.button{min-height:38px;font-size:10px;padding:7px 14px}
}
@media(prefers-reduced-motion:reduce){.cinema{height:var(--hero-height);min-height:0}.cinema-sticky{position:relative}}

/* Smoked glass with a restrained blue edge; no food thumbnails in these rails. */
.cinema-teaser{grid-area:ribbon;position:relative;inset:auto;isolation:isolate;min-width:0;height:var(--hero-ribbon-height);padding:0;background:rgba(5,9,11,.98);z-index:3}

.hero-glass-menu{height:100%;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;direction:ltr;overflow:hidden;border-radius:0;border:1px solid rgba(185,230,240,.19);border-inline:0;background:rgba(15,24,28,.65);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);box-shadow:inset 0 1px 0 rgba(242,252,255,.035)}

.glass-menu-link{display:flex;align-items:center;justify-content:center;gap:19px;direction:rtl;position:relative;min-width:0;padding:8px 24px;transition:background .25s,color .25s}
.glass-menu-link:hover .glass-menu-copy strong{color:var(--brand-hover)}
.glass-menu-link:focus-visible{outline-offset:-5px;border-radius:16px}

.glass-menu-copy{display:block;text-align:center;line-height:1.7}
.glass-menu-copy>span{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-bottom:2px}
.glass-menu-copy strong{display:block;font-size:14px;font-weight:500;color:var(--paper);white-space:nowrap}
.teaser-word{position:relative;align-self:center;padding:0 52px;font:22px/1.15 Georgia,serif;letter-spacing:3px;color:var(--paper);text-align:center}
.teaser-word::before,.teaser-word::after{content:'';position:absolute;top:50%;width:1px;height:28px;transform:translateY(-50%);background:linear-gradient(transparent,rgba(205,237,245,.18),transparent)}
.teaser-word::before{left:0}.teaser-word::after{right:0}
.teaser-word span{display:block;margin-top:7px;font:6px/1.3 Arial,sans-serif;letter-spacing:2.8px;color:var(--muted)}
.sea-band{display:block;position:relative;isolation:isolate;padding:0;background:transparent;color:var(--paper);overflow:visible;white-space:normal;letter-spacing:0;direction:rtl}
.sea-band-glass{display:flex;align-items:center;justify-content:center;gap:0;min-height:56px;position:relative;overflow:hidden;border:1px solid rgba(185,230,240,.13);border-radius:0;border-inline:0;border-top:0;padding:15px 5.5%;background:rgba(9,17,21,.75);backdrop-filter:blur(20px) saturate(130%);-webkit-backdrop-filter:blur(20px) saturate(130%);box-shadow:inset 0 1px 0 rgba(240,253,255,.025)}

.sea-band-fa{font-size:14px;font-weight:500;line-height:1.8;white-space:nowrap}
@media(max-width:1100px){
 .teaser-word{padding-inline:30px;font-size:20px}.glass-menu-link{gap:15px;padding-inline:18px}.glass-menu-copy strong{font-size:13px}
}
@media(max-width:800px){
 .cinema-teaser{padding:0}.hero-glass-menu{grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:0}.teaser-word{display:none}.glass-menu-link{gap:16px;padding-inline:20px}.glass-menu-link:last-child{border-left:1px solid rgba(204,237,244,.10)}.glass-menu-copy strong{font-size:14px}.glass-menu-copy>span{font-size:10px}
 .sea-band{padding:0}.sea-band-glass{gap:0;min-height:56px;padding:12px 4%;border-radius:0}.sea-band-fa{font-size:14px}
}
@media(max-width:560px){
 .cinema-teaser{padding:0}.hero-glass-menu{border-radius:0}.glass-menu-link{gap:11px;padding:7px 12px}.glass-menu-copy strong{font-size:12px}.glass-menu-copy>span{font-size:8px;margin-bottom:1px}
 .sea-band{padding:0}.sea-band-glass{gap:0;min-height:54px;padding:12px 4%;border-radius:0}.sea-band-fa{font-size:14px}
}
@media(max-width:380px){.glass-menu-link{gap:8px;padding-inline:9px}.glass-menu-copy strong{font-size:11px}.glass-menu-copy>span{font-size:7px}}
@media(max-height:600px) and (min-aspect-ratio:6/5){
 .cinema-teaser{padding:0}.hero-glass-menu{border-radius:0}.glass-menu-link{padding-block:5px;gap:10px}.glass-menu-copy strong{font-size:11px}.glass-menu-copy>span{font-size:8px}.teaser-word{font-size:18px;padding-inline:28px}.teaser-word span{font-size:5px;margin-top:5px}.sea-band{padding:0}.sea-band-glass{min-height:48px;padding-block:10px}
}
@supports not (backdrop-filter:blur(1px)){.hero-glass-menu{background:#0d1519}.sea-band-glass{background:#091115}}
@media(prefers-reduced-motion:reduce){.glass-menu-link{transition:none}}

/* One continuous light field behind the transparent film, beyond its canvas edges. */
.cinema-sticky::before{content:'';position:absolute;inset:0 0 var(--hero-ribbon-height);z-index:0;pointer-events:none;background:radial-gradient(ellipse 57% 66% at 28% 57%,rgba(46,176,198,.16) 0%,rgba(17,78,97,.105) 36%,rgba(4,23,32,.035) 62%,transparent 85%)}
@media(max-width:800px){.cinema-sticky::before{background:radial-gradient(ellipse 90% 52% at 48% 68%,rgba(46,176,198,.15),rgba(14,61,78,.075) 45%,transparent 87%)}}
@media(max-height:600px) and (min-aspect-ratio:6/5){.cinema-sticky::before{background:radial-gradient(ellipse 60% 90% at 28% 60%,rgba(46,176,198,.15),rgba(14,61,78,.07) 40%,transparent 85%)}}

/* Balanced hairlines frame the signature without adding light to the glass surface. */
.sea-band-glass{gap:25px}
.sea-band-line{display:block;width:clamp(34px,9vw,140px);height:1px;flex:0 1 140px!important;background:linear-gradient(90deg,rgba(193,231,241,.28),transparent)}
.sea-band-line:last-child{transform:scaleX(-1)}
@media(max-width:560px){.sea-band-glass{gap:16px}.sea-band-line{width:42px;flex-basis:42px!important}}
@media(max-width:380px){.sea-band-glass{gap:13px}.sea-band-line{width:32px;flex-basis:32px!important}}

/* Compact phone rails: each card reads on one line and keeps a full touch target. */
@media(max-width:800px){
 :root{--hero-ribbon-height:46px}
 .glass-menu-link{padding:6px 12px}
 .glass-menu-copy{display:flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;line-height:1.6}
 .glass-menu-copy>span{font-size:10px;margin:0}
 .glass-menu-copy strong{font-size:12px}
 .sea-band-glass{min-height:42px;padding:8px 4%;gap:16px}
 .sea-band-fa{font-size:12px}
}
@media(max-width:380px){.glass-menu-link{padding-inline:6px}.glass-menu-copy{gap:6px}.glass-menu-copy>span{font-size:8px}.glass-menu-copy strong{font-size:11px}.sea-band-glass{gap:13px}}

/* A tall phone uses the film's width to size its stage, instead of an empty viewport. */
@media(max-width:800px) and (max-aspect-ratio:3/5){
 .cinema{height:auto;--cinema-compact:1}
 .cinema-sticky{height:auto;position:relative;grid-template-rows:var(--site-header-height) auto auto var(--hero-ribbon-height)}
 .hero-copy{padding:clamp(44px,7.8vw,56px) 6% clamp(20px,4.8vw,34px);align-self:start}
 .hero-copy h1.hero-display{font-size:clamp(34px,calc(7.8vw + 9px),64px);line-height:1.35}
 .hero-copy .hero-description{font-size:clamp(12px,2.3vw,16px);line-height:2;margin:14px 0 20px}
 .hero-copy>.button{min-height:44px;font-size:clamp(10px,1.7vw,12px);padding:10px 18px}
 .hero-visual{height:clamp(260px,94vw,700px);align-self:stretch}
 .cinema-sticky::before{background:radial-gradient(ellipse 92% 58% at 48% 64%,rgba(46,176,198,.15),rgba(14,61,78,.075) 45%,transparent 87%)}
}
@media(max-width:560px) and (max-height:740px) and (max-aspect-ratio:3/5){
 .hero-copy{padding-top:32px;padding-bottom:16px}
 .hero-copy h1.hero-display{font-size:clamp(26px,8vw,31px);line-height:1.45}
 .hero-copy .hero-description{margin:10px 0 15px;font-size:12px}
 .hero-copy>.button{min-height:42px;padding-block:8px}
 .hero-visual{height:clamp(245px,92vw,520px)}
}

/* Autoplay devices have no multi-screen scroll runway after the film. */
.cinema.is-autoplay{height:auto}
.cinema.is-autoplay .cinema-sticky{position:relative}

/* Place the desktop story in the upper right, with a deliberate header gap. */
@media(min-width:1101px), (min-width:801px) and (min-aspect-ratio:6/5){
 .hero-copy{align-self:start;padding-top:clamp(56px,9svh,112px)}
}
@media(min-width:801px) and (max-height:600px) and (min-aspect-ratio:6/5){
 .hero-copy{padding-top:clamp(24px,5svh,32px)}
}
/* Give the mobile title more air below the fixed header. */
@media(max-width:800px) and (max-aspect-ratio:6/5){
 .hero-copy{padding-top:clamp(40px,6svh,56px)}
}
@media(max-width:800px) and (max-aspect-ratio:3/5){
 .hero-copy{padding-top:clamp(64px,7.8vw + 20px,76px)}
}
@media(max-width:560px) and (max-height:740px) and (max-aspect-ratio:3/5){
 .hero-copy{padding-top:48px}
}

/* Keep vapor clear of the stage edge on autoplay devices, without lifting the plate. */
@media(max-width:1100px), (max-width:1440px) and (pointer:coarse){
 .cinema-poster img{height:calc(100% / 1.075);position:absolute;bottom:0;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(to bottom,transparent,#000 18%);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%)}
}
@media(max-width:800px) and (max-aspect-ratio:3/5){
 .hero-visual{height:clamp(280px,101vw,750px)}
}
@media(max-width:560px) and (max-height:740px) and (max-aspect-ratio:3/5){
 .hero-visual{height:clamp(265px,99vw,560px)}
}